/* Session Restore modal fixes and sensible defaults
   - Define missing color variables used by component CSS
   - Ensure readable solid background
   - Constrain size on mobile so it doesn't fill the screen */

:root {
  /* Map component aliases to existing design tokens */
  --color-background-primary: var(--color-background);
  --color-background-secondary: var(--color-surface);
  --color-text-primary: var(--color-text);
}

/* Lock page scroll when modal is open */
body.modal-open { overflow: hidden; }

/* Overlay container scrolls if needed; inner panel stays static */
.session-restore-modal,
.session-restore-modal.session-restore-modal--open {
  padding: var(--space-xl) var(--space-lg);
  overflow-y: auto;
}

/* Backdrop: readable, subtle blur */
.session-restore-modal__backdrop,
.session-restore-backdrop {
  background: rgba(0, 0, 0, 0.55) !important;
  backdrop-filter: blur(3px);
}

/* Modal panel: solid background, tidy radius/shadow */
.session-restore-modal__content,
.session-restore-content {
  background: var(--color-background-primary) !important;
  color: var(--color-text-primary) !important;
  border-radius: var(--border-radius-xl);
  box-shadow: var(--shadow-xl);
  max-width: 560px;
  width: 92%;
  max-height: none; /* avoid inner scroll */
  overflow: visible; /* no inner scrollbars */
}

/* Modern header aesthetic */
.session-restore-modal__header {
  background: linear-gradient(180deg, rgba(32, 41, 84, 0.04), transparent);
  border-bottom: var(--border-width) var(--border-style) var(--color-border-light) !important;
}

.session-restore-modal__icon { color: var(--color-primary); }
.session-restore-modal__title { letter-spacing: 0.2px; }

/* Actions bar: clean separation and modern spacing */
.session-restore-modal__actions {
  border-top: var(--border-width) var(--border-style) var(--color-border-light) !important;
  background: transparent !important;
}

/* Button polish within modal (fallback for legacy classes) */
.session-restore-modal__actions button,
.session-restore-modal__actions .btn-restore-primary,
.session-restore-modal__actions .btn-restore-secondary {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-medium);
  border-radius: var(--border-radius-md);
  padding: var(--space-sm) var(--space-md);
  transition: all var(--transition-normal);
}

.session-restore-modal__actions .btn-restore-primary {
  background-color: var(--color-primary);
  color: #fff;
  border: var(--border-width) solid var(--color-primary);
  box-shadow: var(--shadow-xs);
}
.session-restore-modal__actions .btn-restore-primary:hover { background-color: var(--color-primary-light); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.session-restore-modal__actions .btn-restore-primary:active { background-color: var(--color-primary-dark); transform: translateY(0); }

.session-restore-modal__actions .btn-restore-secondary {
  background: transparent;
  color: var(--color-primary);
  border: var(--border-width) solid var(--color-primary);
}
.session-restore-modal__actions .btn-restore-secondary:hover { background: var(--color-primary); color: #fff; box-shadow: var(--shadow-sm); transform: translateY(-1px); }

/* Mobile: keep it pop-up sized, not full-screen */
@media (max-width: 768px) {
  .session-restore-modal { padding: var(--space-lg); }
  .session-restore-modal__content,
  .session-restore-content {
    width: min(92vw, 440px);
  }
}

@media (max-width: 480px) {
  .session-restore-modal { padding: var(--space-md); }
  .session-restore-modal__content,
  .session-restore-content {
    width: 94vw;
  }
}