/* =========================================================================
   RSVP List — shared design system
   Loaded (absolute path) by every operator-facing page:
     <link rel="stylesheet" href="/styles.css">
   Page <style> blocks load AFTER this file and hold page-unique rules only.

   Guest pages (guest/rsvp.html, guest/table.html) do NOT load this file — they
   are themed per-event with organizer-picked colours and keep their own CSS.

   Standard responsive breakpoints (max-width): 560 / 640 / 760 / 960 / 1120.
   (640 = data-table -> stacked-card cutover; 760 = dashboard/admin sidebar
   collapse.) Use these values only; do not introduce new ones.
   ========================================================================= */

:root{
  /* ---- Brand palette — "Mediterranean Heritage" (values unchanged) ---- */
  --cream:#FAFAF7;   /* Pure Chalk White — the flat page ground */
  --ivory:#D8EFF4;   /* Light Blue Tint — occasional calm bands */
  --butter:#EAF6FA;  /* lighter tint — neutral panels, table headers */
  --powder:#A9D9E4;  /* mid tint — secondary surfaces */
  --mist:#D8EFF4;    /* Light Blue Tint (alias kept for auth pages) */
  --gold:#B8935A;    /* Antique Gold — attention / milestone accent only */
  --aqua:#3EB1C8;    /* bright brand accent — decorative use */
  --sage:#14213D;    /* Inky Navy — muted notes */
  --blue:#16788C;    /* Accessible action blue — actions, active nav, links */
  --olive:#14213D;   /* Inky Navy — nearly all type, headings */
  --hover:#105E6C;   /* Accessible action blue, pressed */
  --ink:#14213D;
  --ink-soft:rgba(20,33,61,0.62);
  --line:rgba(20,33,61,0.14);
  --white:#ffffff;

  /* ---- Semantic aliases (prefer these in new code) ---- */
  --bg:var(--cream);
  --surface:#ffffff;
  --text:var(--ink);
  --text-muted:var(--ink-soft);
  --border:var(--line);
  --accent:var(--blue);
  --accent-hover:var(--hover);

  /* feedback */
  --danger:#8a5a3f;
  --danger-line:rgba(180,131,93,0.30);
  --danger-bg:rgba(180,131,93,0.12);

  /* ---- Spacing scale ---- */
  --space-1:4px;  --space-2:8px;  --space-3:12px; --space-4:16px;
  --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px;

  /* ---- Radius ---- */
  --radius-sm:2px;
  --radius-md:8px;
  --radius-pill:999px;

  /* ---- Type scale — interface-text floor is --text-xs ---- */
  --text-xs:0.8rem;
  --text-sm:0.875rem;
  --text-base:1rem;
  --text-lg:1.125rem;
  --text-xl:1.4rem;
  --label-size:0.7rem;
  --label-tracking:0.14em;

  /* ---- Fonts ---- */
  --font-heading:'Cormorant Garamond', Georgia, serif;
  --font-body:'Jost', 'Inter', system-ui, sans-serif;

  /* ---- Focus ---- */
  --focus-ring:3px solid rgba(22,120,140,0.35);
  --focus-offset:2px;
}

/* =========================== Base / reset =============================== */

*{ box-sizing:border-box; margin:0; padding:0; }
img{ max-width:100%; }

body{
  font-family:var(--font-body);
  font-weight:300;
  color:var(--text);
  line-height:1.65;
  background:var(--bg);
  min-height:100vh;
}

h1,h2,h3{
  font-family:var(--font-heading);
  font-weight:500;
  color:var(--olive);
  letter-spacing:0.005em;
}

input, select, textarea, button{ font-family:inherit; }

a{ color:var(--accent); }

:focus-visible{ outline:var(--focus-ring); outline-offset:var(--focus-offset); }
button:focus-visible, a:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:var(--focus-ring);
  outline-offset:3px;
}
[tabindex="-1"]:focus-visible{ outline:none; }

.sr-only{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.wrap{ max-width:1120px; margin:0 auto; }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    transition-duration:0.01ms !important;
    animation-duration:0.01ms !important;
  }
}

/* =============================== Layout ================================= */

.topbar{
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:var(--space-3); margin-bottom:var(--space-6);
}
.topbar h1{ font-size:1.8rem; }

.loading{ text-align:center; padding:80px 0; color:var(--text-muted); }

/* =============================== Card ================================== */

.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:34px 32px;
  margin-bottom:var(--space-5);
}
.card h2{ font-size:var(--text-xl); margin-bottom:var(--space-5); font-weight:500; }

/* ============================== Forms ================================= */

.field{ display:flex; flex-direction:column; gap:var(--space-2); }
.field-row{ display:flex; gap:var(--space-4); flex-wrap:wrap; margin-bottom:18px; }
.field-row .field{ flex:1; min-width:160px; }

.field label{
  font-size:var(--label-size);
  letter-spacing:var(--label-tracking);
  text-transform:uppercase;
  color:var(--text-muted);
  font-weight:500;
}
.field input, .field textarea, .field select{
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:11px 13px;
  font-size:0.93rem;
  width:100%;
  background:var(--surface);
  color:var(--text);
}
.field input[type=color]{ padding:4px; height:42px; }
.field input:focus-visible,
.field textarea:focus-visible,
.field select:focus-visible{
  outline:var(--focus-ring);
  outline-offset:var(--focus-offset);
  border-color:var(--accent);
}

.note{ font-size:var(--text-xs); color:var(--text-muted); margin-top:6px; }

/* ============================== Buttons =============================== */

.btn{
  padding:12px 24px;
  border:1px solid var(--accent);
  border-radius:var(--radius-pill);
  background:var(--accent);
  color:#fff;
  font-size:0.82rem;
  letter-spacing:0.02em;
  font-weight:500;
  cursor:pointer;
  transition:background .2s ease, border-color .2s ease;
}
.btn:hover{ background:var(--accent-hover); border-color:var(--accent-hover); }
.btn.ghost{ background:transparent; color:var(--accent); }
.btn.ghost:hover{ background:rgba(22,120,140,0.08); }
.btn.small{ padding:8px 16px; font-size:var(--text-xs); }
.btn.danger{ background:transparent; border-color:#b0836f; color:#a15b3f; }
.btn.danger:hover{ background:rgba(176,131,111,0.10); border-color:#a15b3f; }
.btn:disabled{ opacity:0.5; cursor:not-allowed; }

/* ============================ Feedback =============================== */
/* Standard set: .alert + modifier. Legacy names kept as aliases so existing
   markup keeps working. */

.alert{
  font-size:var(--text-sm);
  padding:12px 14px;
  border-radius:var(--radius-sm);
  border:1px solid transparent;
  margin-top:10px;
  line-height:1.6;
}
.alert--error,   .error-box{
  background:var(--danger-bg); border-color:var(--danger-line); color:var(--danger);
  font-size:var(--text-sm); padding:12px 14px; border-radius:var(--radius-sm); margin-top:10px;
}
.alert--warning{
  background:rgba(184,147,90,0.14); border-color:rgba(184,147,90,0.34); color:#7a5a2f;
}
.alert--success, .success-box{
  background:var(--butter); color:var(--text);
  font-size:var(--text-sm); padding:10px 14px; border-radius:var(--radius-sm); margin-top:10px;
}
.alert--info, .note-box, .banner{
  background:var(--butter); color:var(--text);
  font-size:0.9rem; padding:12px 16px; border-radius:var(--radius-sm);
}
.note-box{ font-size:var(--text-sm); margin-bottom:16px; }
.banner{ margin-bottom:var(--space-5); }

/* ============================ Status pill ============================ */

.status-pill{
  display:inline-block; padding:3px 12px; border-radius:var(--radius-pill);
  font-size:var(--label-size); letter-spacing:0.1em; text-transform:uppercase;
  font-weight:500; white-space:nowrap;
}
.status-pill.yes, .status-pill.live, .status-pill.on{ background:var(--blue); color:#fff; }
.status-pill.no, .status-pill.draft, .status-pill.off{
  background:var(--ivory); color:var(--ink); box-shadow:inset 0 0 0 1px var(--line);
}
.status-pill.pending{ background:var(--butter); color:var(--ink); }
.status-pill.warn{ background:rgba(184,147,90,0.16); color:#7a5a2f; }

/* ============================== Tables ============================== */

.admin-table{ width:100%; border-collapse:collapse; margin-top:12px; font-size:var(--text-sm); }
.admin-table th{
  text-align:left; font-size:var(--label-size); letter-spacing:0.12em;
  text-transform:uppercase; color:var(--text-muted); font-weight:500;
  padding:10px 6px; border-bottom:1px solid var(--border); white-space:nowrap;
}
.admin-table td{
  padding:11px 6px; border-bottom:1px solid var(--border);
  vertical-align:top; color:var(--text-muted);
}
.admin-table tr.clickable{ cursor:pointer; }
.admin-table tr.clickable:hover td{ background:var(--cream); }
.table-scroll{ overflow-x:auto; }

/* Stacked-card layout on narrow screens — add .table--cards to the table. */
@media (max-width:640px){
  .table--cards thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
  .table--cards, .table--cards tbody, .table--cards tr, .table--cards td{ display:block; width:100%; }
  .table--cards tr{ border:1px solid var(--border); border-radius:4px; padding:10px 12px; margin-bottom:12px; }
  .table--cards td{
    border:none; padding:6px 0; display:flex; justify-content:space-between;
    align-items:center; gap:12px; text-align:right;
  }
  .table--cards td::before{
    content:attr(data-label); font-size:var(--label-size); letter-spacing:0.1em;
    text-transform:uppercase; color:var(--text-muted); font-weight:500; text-align:left;
  }
  .table--cards td[data-label=""]::before{ content:""; }
}

/* ====================== Rows / grids / stats ====================== */

.plan-row{
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:var(--space-2); padding:10px 0;
  border-bottom:1px solid var(--border); font-size:0.9rem;
}
.plan-row:last-child{ border-bottom:none; }
.plan-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:var(--space-4); margin-top:var(--space-4); }
.plan-card{ border:1px solid var(--border); border-radius:var(--radius-sm); padding:18px; text-align:center; }
.plan-card .amt{ font-family:var(--font-heading); font-size:1.7rem; color:var(--accent); margin:var(--space-2) 0; }

.stat-card{ border:1px solid var(--border); border-radius:var(--radius-sm); padding:16px 14px; text-align:center; }
.stat-card .amt{ font-family:var(--font-heading); font-size:1.9rem; color:var(--accent); line-height:1.1; }
.stat-card .stat-label{ font-size:var(--text-xs); color:var(--text-muted); margin-top:6px; }
.stat-card .stat-sub{ font-size:var(--text-xs); color:var(--text-muted); margin-top:2px; }

.tiles{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:var(--space-4); margin-top:6px; }
.tile{ border:1px solid var(--border); border-radius:var(--radius-sm); padding:16px 18px; }
.tile .n{ font-family:var(--font-heading); font-size:1.9rem; color:var(--accent); line-height:1.1; }
.tile .l{ font-size:var(--label-size); letter-spacing:0.12em; text-transform:uppercase; color:var(--text-muted); margin-top:6px; }

/* ============================ Link box ============================= */

.link-box{
  display:flex; gap:var(--space-2); align-items:center;
  background:var(--cream); border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:11px 14px;
  font-size:var(--text-sm); word-break:break-all;
}

/* ======================= Toggle switch =========================== */

.switch{ position:relative; width:44px; height:24px; display:inline-block; }
.switch input{ opacity:0; width:0; height:0; }
.slider{ position:absolute; inset:0; background:#ccc; border-radius:var(--radius-pill); cursor:pointer; transition:.2s; }
.slider:before{ content:""; position:absolute; width:18px; height:18px; left:3px; top:3px; background:#fff; border-radius:50%; transition:.2s; }
.switch input:checked + .slider{ background:var(--accent); }
.switch input:checked + .slider:before{ transform:translateX(20px); }

/* ========================= Empty state ========================== */

.empty-state{
  text-align:center;
  padding:40px 24px;
  border:1px dashed var(--border);
  border-radius:var(--radius-md);
  background:var(--cream);
}
.empty-state .es-title{
  font-family:var(--font-heading); font-size:1.25rem; color:var(--olive); margin-bottom:4px;
}
.empty-state .es-body{ font-size:var(--text-sm); color:var(--text-muted); margin-bottom:16px; }

/* ============ Dashboard / Admin navigation shell ================ */

.dash-layout{ display:flex; gap:26px; align-items:flex-start; }

.dash-nav{
  width:220px; flex-shrink:0; position:sticky; top:40px;
  display:flex; flex-direction:column; gap:1px;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:16px 12px;
}
.dash-nav-title{
  font-family:var(--font-heading); font-size:1.15rem; font-weight:500; color:var(--olive);
  padding:8px 10px 14px; border-bottom:1px solid var(--border);
  margin-bottom:6px; line-height:1.3;
}
.dash-nav-group{
  font-size:var(--label-size); letter-spacing:0.18em; text-transform:uppercase;
  color:var(--ink); font-weight:600;
  margin-top:12px; padding:16px 12px 8px;
  border-top:1px solid var(--line);
}
.dash-nav-group:first-of-type{ margin-top:0; padding-top:6px; border-top:none; }
.dash-nav-item{
  display:block; width:100%; text-align:left; background:none; border:none;
  border-left:2px solid transparent; padding:10px 12px; font-size:var(--text-xs);
  color:var(--text-muted); cursor:pointer; font-family:var(--font-body);
  text-decoration:none; transition:color .15s ease;
}
.dash-nav-item:hover{ color:var(--text); }
.dash-nav-item.active{ border-left-color:var(--accent); color:var(--accent); font-weight:500; }
.dash-nav-item.leave, .dash-nav-item.signout{ margin-top:12px; border-top:1px solid var(--border); padding-top:16px; }
.dash-main{ flex:1; min-width:0; }

/* Default mobile nav: collapse the sidebar into a horizontal scroll strip.
   Pages that want a richer mobile nav (dashboard's disclosure menu) override
   this in their own <style>. */
@media (max-width:760px){
  .dash-layout{ flex-direction:column; }
  .dash-nav{
    width:100%; position:static; flex-direction:row; flex-wrap:nowrap;
    overflow-x:auto; overscroll-behavior-inline:contain; scrollbar-width:thin;
  }
  .dash-nav-title{ display:none; }
  .dash-nav-group{ display:none; }
  .dash-nav-item{ width:auto; flex:0 0 auto; border-left:0; border-bottom:2px solid transparent; }
  .dash-nav-item.active{ border-left-color:transparent; border-bottom-color:var(--accent); }
  .dash-nav-item.leave, .dash-nav-item.signout{ margin-top:0; border-top:none; padding-top:10px; }
}

/* ============ Unsaved-changes indicators + sticky save ============ */

.dirty-dot{
  display:none; width:7px; height:7px; border-radius:50%;
  background:var(--gold); margin-left:6px; vertical-align:middle;
}
.dash-nav-item.is-dirty .dirty-dot{ display:inline-block; }
.unsaved-flag{ display:none; align-items:center; gap:6px; font-size:var(--text-xs); color:var(--danger); }
.unsaved-flag::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--gold); }
.is-dirty .unsaved-flag{ display:inline-flex; }

.save-bar{
  position:sticky; bottom:0; z-index:5;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  margin:18px -32px -34px; padding:16px 32px;
  background:color-mix(in srgb, #fff 92%, transparent);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  border-top:1px solid var(--border);
}

.section-head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:var(--space-3); flex-wrap:wrap; margin-bottom:var(--space-5);
}
.section-head h2{ margin-bottom:0; }