/* ═══════════════════════════════════════════════════════════════
   settings.css — Account Settings Page
   ═══════════════════════════════════════════════════════════════
   Sections:
   1.  Top bar
   2.  Main layout and wrapper
   3.  Left sidebar and tab navigation
   4.  Right content area and panels
   5.  Section headings
   6.  Settings blocks (generic card-like groupings)
   7.  Plan card
   8.  Status badges (Active / Cancelled / Past Due)
   9.  Payment method
   10. Billing history table
   11. Form elements (inputs, labels — used by password form and modals)
   12. Password change form
   13. Account email display
   14. Danger zone
   15. Privacy placeholder
   16. Message states (success / error)
   17. Danger button variant
   18. Modal overlay and dialog
   19. Mobile responsive (< 768px)
═══════════════════════════════════════════════════════════════ */


/* ─── 1. TOP BAR ──────────────────────────────────────────── */
/* Same visual pattern as .dash-topbar in dashboard.css */
.settings-topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-xl);
  height: 60px;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
}

/* Brand — lock icon + wordmark */
.settings-topbar__brand {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-display);
  font-size: var(--size-lg);
  font-weight: 700;
  color: var(--text-primary);
  text-decoration: none;
  letter-spacing: -.01em;
}

.settings-topbar__brand:hover {
  color: var(--text-primary);
}

/* The teal lock icon box */
.settings-topbar__icon {
  width: 26px;
  height: 26px;
  background: var(--accent);
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  color: var(--text-inverse);
  flex-shrink: 0;
}

.settings-topbar__icon svg {
  width: 13px;
  height: 13px;
}

.settings-topbar__actions {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  flex-shrink: 0;
}


/* ─── 2. MAIN LAYOUT ─────────────────────────────────────── */
.settings-main {
  min-height: calc(100vh - 60px);
  padding: var(--space-2xl) var(--space-lg);
}

/* Wrapper — centres content and constrains max width */
.settings-wrapper {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  /* 240px sidebar + gap + rest for content */
  grid-template-columns: 240px 1fr;
  gap: var(--space-lg);
  align-items: start;
}


/* ─── 3. SIDEBAR & TABS ──────────────────────────────────── */
.settings-sidebar {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: var(--space-md);
  /* Sticky so the sidebar stays in view as content scrolls */
  position: sticky;
  top: calc(60px + var(--space-lg));
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Each tab is a full-width button */
.settings-tab {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  /* The 4px left border is always present; transparent by default,
     coloured accent when active — keeps text from jumping position */
  border-left: 4px solid transparent;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 12px 16px 12px 12px;
  font-family: var(--font-body);
  font-size: var(--size-sm);
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease),
              color var(--duration-fast) var(--ease),
              border-color var(--duration-fast) var(--ease);
}

.settings-tab:hover {
  background: var(--bg-subtle);
  color: var(--text-primary);
}

/* Active tab — teal text, soft teal background, visible left border */
.settings-tab.active {
  color: var(--accent);
  background: rgba(91, 158, 166, 0.1);
  border-left-color: var(--accent);
}

.settings-tab svg {
  flex-shrink: 0;
  opacity: 0.7;
}

.settings-tab.active svg {
  opacity: 1;
}


/* ─── 4. CONTENT AREA & PANELS ───────────────────────────── */
.settings-content {
  min-width: 0; /* prevents grid blowout on narrow screens */
}

/* Each panel is its own full-width card */
.settings-panel {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

/* The HTML `hidden` attribute sets display:none via the browser's built-in
   stylesheet, but our `display: flex` above has higher specificity and wins.
   This rule restores the correct behaviour so hidden panels stay invisible. */
.settings-panel[hidden] {
  display: none;
}


/* ─── 5. SECTION HEADINGS ────────────────────────────────── */
/* Main panel heading — display serif, large */
.settings-heading {
  font-family: var(--font-display);
  font-size: var(--size-2xl);
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -.01em;
  margin-top: calc(-1 * var(--space-sm)); /* close the gap under the eyebrow label */
}


/* ─── 6. SETTINGS BLOCKS ─────────────────────────────────── */
/* A labelled grouping inside a panel — similar to a section in the dashboard */
.settings-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding-bottom: var(--space-xl);
  border-bottom: 1px solid var(--border-light);
}

/* Last block in a panel has no bottom border */
.settings-block:last-of-type,
.settings-block--cancel {
  border-bottom: none;
  padding-bottom: 0;
}

.settings-block__title {
  font-family: var(--font-body);
  font-size: var(--size-sm);
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--text-primary);
}


/* ─── 7. PLAN CARD ───────────────────────────────────────── */
/* The card showing the current subscription plan */
.plan-card {
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.plan-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-md);
}

.plan-card__name {
  font-size: var(--size-base);
  font-weight: 600;
  color: var(--text-primary);
}

.plan-card__price {
  font-family: var(--font-display);
  font-size: var(--size-2xl);
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.1;
  margin-top: 4px;
}

.plan-card__period {
  font-family: var(--font-body);
  font-size: var(--size-sm);
  font-weight: 400;
  color: var(--text-tertiary);
}

.plan-card__billing {
  font-size: var(--size-sm);
  color: var(--text-secondary);
}

.plan-card__billing strong {
  color: var(--text-primary);
}


/* ─── 8. STATUS BADGES ───────────────────────────────────── */
/* Small pill indicator — used for plan status and invoice status */
.status-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-size: var(--size-xs);
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}

.status-badge--active {
  background: rgba(74, 222, 128, 0.12);
  color: #4ade80;
}

.status-badge--cancelled {
  background: rgba(248, 113, 113, 0.12);
  color: #f87171;
}

.status-badge--past-due {
  background: rgba(251, 191, 36, 0.12);
  color: #fbbf24;
}


/* ─── 9. PAYMENT METHOD ──────────────────────────────────── */
.payment-method {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.payment-method__brand {
  font-size: var(--size-sm);
  font-weight: 600;
  color: var(--text-primary);
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 4px 10px;
}

.payment-method__number {
  font-size: var(--size-sm);
  color: var(--text-secondary);
  letter-spacing: .05em;
}

.payment-method__update {
  font-size: var(--size-sm);
  color: var(--accent);
  text-decoration: none;
  margin-left: auto;
  transition: color var(--duration-fast) var(--ease);
}

.payment-method__update:hover {
  color: var(--accent-hover);
}


/* ─── 10. BILLING HISTORY TABLE ──────────────────────────── */
.billing-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--size-sm);
}

.billing-table th {
  text-align: left;
  padding: 8px 12px;
  font-size: var(--size-xs);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  border-bottom: 1px solid var(--border);
}

.billing-table td {
  padding: 12px;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-light);
  vertical-align: middle;
}

.billing-table tbody tr:last-child td {
  border-bottom: none;
}

.billing-table__download {
  font-size: var(--size-xs);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease);
}

.billing-table__download:hover {
  color: var(--accent-hover);
}


/* ─── 11. FORM ELEMENTS ──────────────────────────────────── */
/* Used by the password change form and the delete confirmation modal input.
   These mirror the equivalent classes in dashboard.css so any form input
   on this page looks consistent with the rest of the product. */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-label {
  font-size: var(--size-xs);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.form-input {
  width: 100%;
  padding: 10px 14px;
  font-size: var(--size-sm);
  color: var(--text-primary);
  background: var(--bg-primary);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  outline: none;
  transition: border-color var(--duration-fast) var(--ease),
              box-shadow var(--duration-fast) var(--ease);
}

.form-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.form-input::placeholder {
  color: var(--text-tertiary);
}

.form-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.form-hint {
  font-size: var(--size-xs);
  color: var(--text-tertiary);
  line-height: 1.5;
}


/* ─── 12. PASSWORD CHANGE FORM ───────────────────────────── */
.password-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-top: var(--space-sm);
  padding: var(--space-lg);
  background: var(--bg-subtle);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
}

.password-form__actions {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}


/* ─── 13. ACCOUNT EMAIL DISPLAY ──────────────────────────── */
.account-email {
  font-size: var(--size-base);
  color: var(--text-primary);
  font-weight: 500;
}


/* ─── 14. DANGER ZONE ────────────────────────────────────── */
/* Clearly demarcated with a red top border and faint red background */
.danger-zone {
  border: 1px solid rgba(220, 38, 38, 0.25);
  border-top: 3px solid #dc2626;
  border-radius: var(--radius-sm);
  padding: var(--space-xl);
  background: rgba(220, 38, 38, 0.04);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* "DANGER ZONE" eyebrow label in red */
.danger-zone__label {
  font-family: var(--font-body);
  font-size: var(--size-xs);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #dc2626;
}

.danger-zone__title {
  font-family: var(--font-display);
  font-size: var(--size-lg);
  font-weight: 700;
  color: var(--text-primary);
}

.danger-zone__desc {
  font-size: var(--size-sm);
  color: var(--text-secondary);
  line-height: 1.6;
}


/* ─── 15. PRIVACY PLACEHOLDER ────────────────────────────── */
/* Centred empty state for the Privacy tab */
.privacy-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-3xl) var(--space-lg);
  gap: var(--space-md);
}

.privacy-placeholder__icon {
  color: var(--text-tertiary);
  opacity: 0.5;
}

.privacy-placeholder__title {
  font-family: var(--font-display);
  font-size: var(--size-xl);
  color: var(--text-primary);
}

.privacy-placeholder__body {
  font-size: var(--size-sm);
  color: var(--text-secondary);
  max-width: 360px;
  line-height: 1.65;
}


/* ─── 16. MESSAGE STATES ─────────────────────────────────── */
/* Inline success / error text shown near the action that triggered it */
.settings-message {
  font-size: var(--size-sm);
  font-weight: 500;
  letter-spacing: .01em;
  line-height: 1.5;
  min-height: 1.2em; /* reserves space so layout doesn't shift */
}

.settings-message--success { color: #4ade80; }
.settings-message--error   { color: #f87171; }


/* ─── 17. DANGER BUTTON VARIANT ──────────────────────────── */
/* Used for destructive actions: Cancel Anyway, Delete Account */
.btn--danger {
  background: #dc2626;
  border-color: #dc2626;
  color: #ffffff;
}

.btn--danger:hover {
  background: #b91c1c;
  border-color: #b91c1c;
  color: #ffffff;
  box-shadow: 0 4px 24px rgba(220, 38, 38, 0.3);
}

.btn--danger:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}


/* ─── 18. MODAL OVERLAY & DIALOG ─────────────────────────── */
/* Full-screen fixed overlay with a centred modal card */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
  /* Hidden by default — JS adds .open to show it */
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-fast) var(--ease);
}

.modal-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

/* The dialog card itself */
.modal {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: var(--space-xl);
  max-width: 480px;
  width: 100%;
  box-shadow: var(--shadow-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  /* Slide up slightly when opening */
  transform: translateY(8px);
  transition: transform var(--duration-fast) var(--ease);
}

.modal-overlay.open .modal {
  transform: translateY(0);
}

.modal__title {
  font-family: var(--font-display);
  font-size: var(--size-xl);
  font-weight: 700;
  color: var(--text-primary);
}

.modal__body {
  font-size: var(--size-sm);
  color: var(--text-secondary);
  line-height: 1.65;
}

.modal__body strong {
  color: var(--text-primary);
}

.modal__confirm-label {
  font-size: var(--size-sm);
  color: var(--text-secondary);
  font-weight: 500;
}

.modal__actions {
  display: flex;
  gap: var(--space-sm);
  justify-content: flex-end;
  flex-wrap: wrap;
  margin-top: var(--space-xs);
}


/* ─── 19. MOBILE RESPONSIVE (< 768px) ───────────────────── */
@media (max-width: 768px) {
  /* Stack sidebar above content rather than side-by-side */
  .settings-wrapper {
    grid-template-columns: 1fr;
  }

  /* Sidebar becomes a horizontal tab strip */
  .settings-sidebar {
    flex-direction: row;
    position: static; /* un-sticky on mobile — not enough vertical space */
    padding: 8px;
    gap: 4px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Tabs shrink to equal-width pills in a row */
  .settings-tab {
    flex: 1;
    justify-content: center;
    text-align: center;
    /* On mobile, use a bottom border for the active state instead of left */
    border-left: none;
    border-bottom: 3px solid transparent;
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    white-space: nowrap;
    font-size: var(--size-xs);
  }

  .settings-tab.active {
    border-left-color: transparent;
    border-bottom-color: var(--accent);
  }

  .settings-tab svg {
    display: none; /* hide icons on very small screens to save space */
  }

  .settings-main {
    padding: var(--space-lg) var(--space-md);
  }
}

@media (max-width: 480px) {
  .settings-topbar {
    padding: 0 var(--space-md);
  }

  .settings-panel {
    padding: var(--space-lg);
  }

  .modal__actions {
    flex-direction: column-reverse;
  }

  .modal__actions .btn {
    width: 100%;
    justify-content: center;
  }

  /* Billing table — hide invoice column on very small screens */
  .billing-table th:last-child,
  .billing-table td:last-child {
    display: none;
  }
}