/* ============================================================
   BizSite PH — enhance.css
   Accessibility · dark mode · mobile polish · toast/toggle styles.
   Linked AFTER each page's inline <style>, so [data-theme="dark"]
   rules win by both specificity and source order.
   ============================================================ */

/* ---- Accessibility: visible focus + reduced motion ---- */
:focus-visible{outline:3px solid var(--brand);outline-offset:2px;border-radius:4px}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}
@media (hover:none) and (pointer:coarse){
  .hub-tab,.ftab,.nav-links a{min-height:40px}
}

/* ---- Skip link ---- */
.bz-skip{position:fixed;left:10px;top:-56px;z-index:4000;background:var(--brand);color:#fff;padding:10px 18px;border-radius:8px;font-weight:700;font-size:.85rem;box-shadow:0 12px 40px rgba(0,0,0,.25);transition:top .15s}
.bz-skip:focus{top:10px;outline:3px solid #fff;outline-offset:2px}

/* ---- Floating theme toggle ---- */
.bz-theme-toggle{position:fixed;right:16px;bottom:16px;z-index:2400;width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--ink);box-shadow:0 10px 30px rgba(0,0,0,.18);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .15s,background .2s,color .2s,border-color .2s}
.bz-theme-toggle:hover{transform:translateY(-2px)}
.bz-theme-toggle svg{width:20px;height:20px}

/* ---- Toasts (also upgrades native alert()) ---- */
.bz-toasts{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:4000;display:flex;flex-direction:column;gap:8px;width:min(92vw,440px);pointer-events:none}
.bz-toast{pointer-events:auto;display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:12px;font-size:.88rem;font-weight:600;color:#fff;background:#1f2937;box-shadow:0 12px 40px rgba(0,0,0,.3);opacity:0;transform:translateY(10px);transition:opacity .2s,transform .2s;line-height:1.45}
.bz-toast.show{opacity:1;transform:none}
.bz-toast-success{background:#15803d}
.bz-toast-error{background:#b91c1c}
.bz-toast-info{background:#1f3a5f}
.bz-toast-warning{background:#b06c1a}
.bz-toast button{margin-left:auto;background:none;border:none;color:rgba(255,255,255,.85);cursor:pointer;font-size:1.15rem;line-height:1;padding:0 2px}
@media (prefers-reduced-motion: reduce){.bz-toast{transition:none}}

/* ---- Loading skeleton ---- */
.bz-skel{background:linear-gradient(90deg,var(--surface-2,#eee) 25%,var(--line) 37%,var(--surface-2,#eee) 63%);background-size:400% 100%;animation:bz-shimmer 1.4s ease infinite;border-radius:10px}
@keyframes bz-shimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}
@media (prefers-reduced-motion: reduce){.bz-skel{animation:none}}
.bz-skel-row{height:84px;margin-bottom:12px}

/* ============================================================
   DARK MODE  (shared token palette across index/start/studio)
   ============================================================ */
[data-theme="dark"]{
  --bg:#12151b;
  --bg-2:#0d1015;
  --surface:#1a1f28;
  --surface-2:#232b36;
  --line:#2c3542;
  --line-soft:rgba(255,255,255,.06);
  --ink:#e7ebf1;
  --ink-soft:#c4ccd7;
  --soft:#c4ccd7;
  --muted:#9aa6b4;
  --muted-2:#828e9d;
  --brand:#5b8bd0;        /* lightened so brand-as-text stays legible on dark */
  --brand-soft:#1f2c40;
  --brand-2:#c9a24a;      /* gold accent, slightly brightened for dark */
  color-scheme:dark;
}
[data-theme="dark"] body{background:var(--bg);color:var(--ink)}

/* --- shared / dashboard surfaces (used by index.html AND studio.html) --- */
[data-theme="dark"] .dash-top{background:rgba(18,21,27,.9)}
[data-theme="dark"] .stat,[data-theme="dark"] .client,[data-theme="dark"] .modal,
[data-theme="dark"] .ftab,[data-theme="dark"] .search input{background:var(--surface);border-color:var(--line)}
[data-theme="dark"] .field input,[data-theme="dark"] .field select,[data-theme="dark"] .field textarea{background:#10151c;color:var(--ink);border-color:var(--line)}
[data-theme="dark"] .b-paused{background:#232b36;color:#9aa6b4}

/* --- studio-specific hardcoded whites --- */
[data-theme="dark"] .bar,[data-theme="dark"] .side,[data-theme="dark"] .hub-tabs,
[data-theme="dark"] .login,[data-theme="dark"] .btn.ghost{background:var(--surface);border-color:var(--line)}
[data-theme="dark"] .login input,[data-theme="dark"] select{background:#10151c;color:var(--ink);border-color:var(--line)}
[data-theme="dark"] .prev{background:#0d1015}
[data-theme="dark"] .rec{background:var(--surface-2)}
[data-theme="dark"] .drop{border-color:var(--line);color:var(--muted)}

/* --- index.html landing --- */
[data-theme="dark"] header{background:rgba(18,21,27,.82)!important}
[data-theme="dark"] header.scrolled{background:var(--surface)!important}
[data-theme="dark"] .nav-links{background:var(--surface)}
[data-theme="dark"] .srow li,[data-theme="dark"] .srow-visual,[data-theme="dark"] .fcard,
[data-theme="dark"] .price-band,[data-theme="dark"] .plan-details .pd,[data-theme="dark"] .inq,
[data-theme="dark"] .tcard,[data-theme="dark"] .tmonial,[data-theme="dark"] .rely .r,
[data-theme="dark"] .about-card{background:var(--surface);border-color:var(--line)}

/* --- start.html intake --- */
[data-theme="dark"] .card,[data-theme="dark"] .tpl{background:var(--surface);border-color:var(--line)}
[data-theme="dark"] input[type=text],[data-theme="dark"] input[type=tel],
[data-theme="dark"] input[type=email],[data-theme="dark"] textarea{background:#10151c;color:var(--ink);border-color:var(--line)}
[data-theme="dark"] .seg button{background:var(--surface);color:var(--ink);border-color:var(--line)}

/* honeypot field — hidden from humans, catches bots */
.bz-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

.bz-theme-toggle{border-color:var(--line)}

/* Primary CTA uses background:var(--ink) which flips light in dark mode —
   pin it to brand blue with white text so it stays a solid, legible button. */
[data-theme="dark"] .btn-primary{background:var(--brand);color:#fff}
[data-theme="dark"] .btn-primary:hover{background:#4a78bd;color:#fff}
/* Feature-card number chip also uses --ink as a fill */
[data-theme="dark"] .fcard .fn{color:#0d1015}