/* Salasilah — global CSS. Light = :root defaults; Dark = html.dark overrides. */

/* ── Theme variables ─────────────────────────────────────────────────────── */
:root {
  --bg:          #f1f5f9;
  --surface:     rgba(255,255,255,0.82);
  --card:        rgba(255,255,255,0.62);
  --border:      rgba(0,0,0,0.08);
  --text-hi:     #0f172a;
  --text-md:     #334155;
  --text-lo:     #64748b;
  --input-bg:    rgba(255,255,255,0.92);
  --input-bd:    rgba(0,0,0,0.15);
  --input-ph:    #94a3b8;
  --ta-bg:       #ffffff;
  --ta-bd:       rgba(0,0,0,0.10);
  --sb-track:    #f1f5f9;
  --sb-thumb:    #cbd5e1;
  --sb-hover:    #94a3b8;
}

html.dark {
  --bg:          #0b0f19;
  --surface:     rgba(17,24,39,0.65);
  --card:        rgba(30,41,59,0.45);
  --border:      rgba(255,255,255,0.08);
  --text-hi:     #e2e8f0;
  --text-md:     #cbd5e1;
  --text-lo:     #64748b;
  --input-bg:    rgba(15,23,42,0.80);
  --input-bd:    rgba(255,255,255,0.10);
  --input-ph:    #475569;
  --ta-bg:       #1e293b;
  --ta-bd:       rgba(255,255,255,0.10);
  --sb-track:    #0b0f19;
  --sb-thumb:    #1e293b;
  --sb-hover:    #334155;
}

/* ── Base ────────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
body { background-color: var(--bg); color: var(--text-hi); font-family: 'Outfit', sans-serif; }

/* ── Glassmorphism ───────────────────────────────────────────────────────── */
.glass-panel {
  background: var(--surface);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border);
}

.glass-card {
  background: var(--card);
  border: 1px solid var(--border);
  transition: all 0.25s cubic-bezier(0.4,0,0.2,1);
}
.glass-card:hover {
  background: var(--surface);
  border-color: rgba(18,120,75,0.3);
  box-shadow: 0 0 24px rgba(18,120,75,0.12);
  transform: translateY(-2px);
}

/* ── Scrollbar ───────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-track  { background: var(--sb-track); }
::-webkit-scrollbar-thumb  { background: var(--sb-thumb); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background: var(--sb-hover); }

/* ── Tree canvas ─────────────────────────────────────────────────────────── */
#ft-canvas { width:100%; height:100%; overflow:hidden; cursor:grab; }
#ft-canvas:active { cursor:grabbing; }

/* ── Toolbar active state ────────────────────────────────────────────────── */
.toolbar-btn.active {
  background: rgba(18,120,75,0.25);
  border-color: rgba(18,120,75,0.5);
  color: #5fa882;
}

/* ── Edit Person form: Simple / Advanced tiering ─────────────────────────── */
/* In Simple mode (the default) the power-user fields tagged .adv-only are hidden;
   switching the panel to Advanced (data-editmode) reveals them. Pure show/hide. */
#edit-panel[data-editmode="simple"] .adv-only { display: none !important; }

/* ── Share modal: Simple / Advanced two-tier (v0.91.231) ─────────────────── */
/* Simple = one-click view link: everything tagged .adv-share-only is hidden, leaving just the
   one-line intro (.simple-share-only) → Create & copy → result. Advanced = the full intent chooser:
   .simple-share-only is hidden instead. */
#modal-share[data-sharemode="simple"]   .adv-share-only    { display: none !important; }
#modal-share[data-sharemode="advanced"] .simple-share-only { display: none !important; }
/* Back-compat: any leftover .share-adv fields still collapse in Simple. */
#modal-share[data-sharemode="simple"]   .share-adv         { display: none !important; }

/* Intent-first visibility (v0.91.226). Groups carry data-intents="view copy live …"; share-modal.js
   toggles Tailwind's .hidden on the ones whose list excludes the current #modal-share[data-intent].
   Visibility is JS-driven (multi-membership is awkward in pure CSS) and composes with the mode rules
   above — a field hidden by EITHER the intent or Simple mode stays hidden. */

/* ── Account-level Simple / Advanced tiering ─────────────────────────────── */
/* Same pattern again, but app-wide and persistent: data-uimode on <body> comes from
   users.ui_mode, so a Simple user lands without the power-user entry points tagged
   .slsl-adv. A DEFAULT, not a gate — no endpoint reads ui_mode, so anything hidden here is
   still reachable and still served (Progressive_Disclosure_Plan.md §1). Distinct from the
   modal-scoped .share-adv above: the two compose, and a .share-adv field inside the share
   modal stays governed by that modal's own session toggle. */
body[data-uimode="simple"] .slsl-adv { display: none !important; }

/* ── Theme swatch ────────────────────────────────────────────────────────── */
.theme-swatch {
  width:28px; height:28px; border-radius:50%; cursor:pointer;
  border:2px solid transparent;
  transition:transform 0.15s ease, border-color 0.15s ease;
}
.theme-swatch:hover { transform:scale(1.2); }
.theme-swatch.selected { border-color:#c99a33; transform:scale(1.15); }

/* ── Typeahead ───────────────────────────────────────────────────────────── */
.typeahead-list {
  position:absolute; z-index:50;
  background: var(--ta-bg);
  border: 1px solid var(--ta-bd);
  border-radius:10px;
  max-height:200px; overflow-y:auto;
  width:100%; top:calc(100% + 4px); left:0;
}
.typeahead-list li { padding:8px 12px; cursor:pointer; font-size:13px; color: var(--text-md); }
.typeahead-list li:hover { background:rgba(18,120,75,0.12); color: var(--text-hi); }

/* Share "Start from" typeahead dropdown — theme-aware bg/border so the option text
   (which the light-mode .text-slate-200 rule flips to dark) stays readable in light mode. */
.share-results { background: var(--ta-bg); border: 1px solid var(--ta-bd); }

/* Share countdown pill — amber that stays readable in BOTH modes (plain text-amber-300
   is invisible on a light background). Dark text on light, light text on dark. */
.share-countdown { background: rgba(245,158,11,0.12); border: 1px solid rgba(245,158,11,0.35); color: #b45309; }
html.dark .share-countdown { color: #fcd34d; }

/* Contact link (e.g. on the expired-link page) — indigo that reads in both modes. */
.contact-link { color: #0c5f3b; }            /* indigo-700 on light */
html.dark .contact-link { color: #5fa882; }  /* indigo-300 on dark */

/* ── Input ───────────────────────────────────────────────────────────────── */
.input-dark {
  background: var(--input-bg);
  border: 1px solid var(--input-bd);
  border-radius:8px;
  color: var(--text-hi);
  padding:8px 12px; font-size:14px; width:100%;
  outline:none; transition:border-color 0.15s;
}
.input-dark:focus { border-color:#12784b; }
.input-dark::placeholder { color: var(--input-ph); }
/* Native date picker: make the calendar indicator visible on the dark input bg (it ships
   near-black). Lighten in dark mode; leave default in light mode. */
html.dark .input-dark[type="date"]::-webkit-calendar-picker-indicator { filter: invert(0.75); cursor: pointer; }
select.input-dark option { background: var(--ta-bg); color: var(--text-hi); }

/* ── Light-mode overrides for hardcoded Tailwind utility classes ─────────── */
html:not(.dark) .bg-brand-bg,
html:not(.dark) #ft-root { background-color: var(--bg) !important; }

html:not(.dark) .text-white     { color: var(--text-hi) !important; }
html:not(.dark) .text-slate-200 { color: var(--text-hi) !important; }
html:not(.dark) .text-slate-300 { color: var(--text-md) !important; }
html:not(.dark) .text-slate-400 { color: var(--text-lo) !important; }
html:not(.dark) .text-slate-500 { color: #94a3b8 !important; }
html:not(.dark) .text-slate-600 { color: #94a3b8 !important; }

/* Keep labels WHITE on solid-green button fills in light mode. The generic
   .text-white→dark override above is meant for text on light surfaces, but on a
   filled green button dark text is hard to read. These two-class selectors are
   more specific, so white wins on the buttons only. */
html:not(.dark) .bg-indigo-600.text-white,
html:not(.dark) .bg-indigo-500.text-white,
html:not(.dark) .bg-indigo-400.text-white,
html:not(.dark) .bg-indigo-700.text-white,
html:not(.dark) .bg-indigo-600\/80.text-white,
html:not(.dark) .bg-indigo-500\/80.text-white { color: #ffffff !important; }

/* Sub-panel & modal overlay backgrounds */
html:not(.dark) .bg-slate-950\/70,
html:not(.dark) .bg-slate-950\/60 { background-color: rgba(203,213,225,0.72) !important; }
html:not(.dark) .bg-slate-900\/50 { background-color: rgba(241,245,249,0.75) !important; }
html:not(.dark) .bg-slate-900\/60 { background-color: rgba(241,245,249,0.85) !important; }
html:not(.dark) .bg-slate-800\/50 { background-color: rgba(226,232,240,0.60) !important; }
html:not(.dark) .bg-slate-800\/40 { background-color: rgba(226,232,240,0.50) !important; }  /* share-modal existing-link rows */

/* Brand border (defined in Tailwind config as rgba(255,255,255,0.08)) */
html:not(.dark) .border-brand-border { border-color: var(--border) !important; }

/* Light-mode: "Add Person" button — soft purple instead of solid indigo */
html:not(.dark) #btn-add-person {
  background-color: rgba(18,120,75,0.12) !important;
  color: #0c5f3b !important;
  border: 1px solid rgba(18,120,75,0.28);
}
html:not(.dark) #btn-add-person:hover {
  background-color: rgba(18,120,75,0.22) !important;
}

/* Light-mode: user avatar initials circle */
html:not(.dark) .user-avatar {
  background-color: rgba(18,120,75,0.12) !important;
  color: #0c5f3b !important;
}

/* Toast light variants */
html:not(.dark) #toast      { background:#f8fafc; color:#1e293b; border:1px solid #e2e8f0; }
html:not(.dark) #toast.success { background:#ecfdf5; color:#065f46; border-color:#a7f3d0; }
html:not(.dark) #toast.error   { background:#fff1f2; color:#881337; border-color:#fecdd3; }

/* ── Person search (toolbar) ─────────────────────────────────────────────── */
#person-search { background-color: rgba(15,23,42,0.55); }
#person-search::placeholder { color: #64748b; }
#person-search-results { background-color: rgba(15,23,42,0.97); backdrop-filter: blur(8px); }
html:not(.dark) #person-search { background-color: #ffffff; }
html:not(.dark) #person-search::placeholder { color: #94a3b8; }
html:not(.dark) #person-search-results { background-color: #ffffff; }

#recent-dropdown { background-color: rgba(15,23,42,0.97); backdrop-filter: blur(8px); }
html:not(.dark) #recent-dropdown { background-color: #ffffff; }

#export-dropdown { background-color: rgba(15,23,42,0.97); backdrop-filter: blur(8px); }
html:not(.dark) #export-dropdown { background-color: #ffffff; }

/* ── Busy overlay (PDF export, etc.) ──────────────────────────────────────── */
#busy-overlay { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; background: rgba(2,6,23,0.45); }
#busy-overlay.hidden { display: none; }
#busy-overlay .busy-card { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-radius: 16px; background: rgba(15,23,42,0.97); border: 1px solid var(--border); box-shadow: 0 20px 50px rgba(0,0,0,0.5); color: #e2e8f0; font-size: 14px; }
html:not(.dark) #busy-overlay { background: rgba(148,163,184,0.35); }
html:not(.dark) #busy-overlay .busy-card { background: #ffffff; color: #1e293b; }
.busy-spinner { width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(148,163,184,0.35); border-top-color: #12784b; animation: busy-spin 0.7s linear infinite; display: inline-block; }
@keyframes busy-spin { to { transform: rotate(360deg); } }