/* ==========================================================================
   Net-Worth Platform — white/blue design system (Front + Back office)
   ========================================================================== */
:root{
  --blue:#2563EB; --blue-hover:#1D4ED8; --ink:#0F172A; --ink-2:#64748B;
  --border:#E2E8F0; --bg:#F8FAFC; --surface:#FFFFFF;
  --ok:#059669; --ok-bg:#ECFDF5; --danger:#DC2626; --danger-bg:#FEF2F2;
  --radius:14px; --radius-sm:10px; --shadow:0 1px 2px rgba(15,23,42,.06),0 2px 8px rgba(15,23,42,.06);
  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-5:1.5rem; --sp-6:2rem;
  --nav-w:250px;
}
*{ box-sizing:border-box; }
html,body{ margin:0; }
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,Helvetica,Arial,sans-serif;
  background:var(--bg); color:var(--ink); line-height:1.5; font-size:15px;
}
a{ color:var(--blue); text-decoration:none; }
a:hover{ text-decoration:underline; }
h1{ font-size:1.6rem; margin:0 0 .25rem; letter-spacing:-.01em; }
h2{ font-size:1.15rem; margin:0; }
.muted{ color:var(--ink-2); font-weight:400; }
.subtitle{ color:var(--ink-2); margin:0 0 var(--sp-5); }

/* ---------- app shell: sidebar + content ---------- */
.app-shell{ display:flex; min-height:100vh; }
.sidebar{
  width:var(--nav-w); flex:0 0 var(--nav-w); background:var(--surface);
  border-right:1px solid var(--border); padding:var(--sp-5) var(--sp-4);
  display:flex; flex-direction:column; gap:var(--sp-2); position:sticky; top:0; height:100vh; overflow-y:auto;
}
.sidebar-brand{ display:flex; align-items:center; gap:.5rem; font-weight:700; font-size:1.15rem;
  color:var(--ink); margin-bottom:var(--sp-4); }
.brand-mark{ color:var(--blue); }
.sidebar-nav{ display:flex; flex-direction:column; gap:2px; }
.sidebar-nav a{ color:var(--ink); padding:.5rem .7rem; border-radius:var(--radius-sm); font-weight:500; }
.sidebar-nav a:hover{ background:#EFF4FF; text-decoration:none; }
.sidebar-nav a.active{ background:var(--blue); color:#fff; }
.nav-group-label{ font-size:.72rem; text-transform:uppercase; letter-spacing:.06em;
  color:var(--ink-2); margin:var(--sp-3) .7rem var(--sp-1); }
.sidebar-logout{ margin-top:auto; padding-top:var(--sp-4); }

.content-area{ flex:1; min-width:0; display:flex; flex-direction:column; }
.page{ padding:var(--sp-6); max-width:1200px; width:100%; }
.page-head{ margin-bottom:var(--sp-5); }

.mobile-topbar{ display:none; align-items:center; gap:.75rem; padding:var(--sp-3) var(--sp-4);
  background:var(--surface); border-bottom:1px solid var(--border); }
.hamburger{ font-size:1.4rem; cursor:pointer; }
.nav-toggle-cbx{ display:none; }
/* ---------- cards ---------- */
.card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:var(--sp-5); margin-bottom:var(--sp-5); }
.card-head{ margin-bottom:var(--sp-4); }

/* ---------- stat cards ---------- */
.stat-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:var(--sp-4); margin-bottom:var(--sp-5); }
.stat-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:var(--sp-5); }
.stat-card.primary{ background:linear-gradient(135deg,#2563EB,#1D4ED8); color:#fff; border:none; }
.stat-label{ font-size:.8rem; color:var(--ink-2); }
.stat-card.primary .stat-label,.stat-card.primary .stat-sub{ color:#DBEAFE; }
.stat-value{ font-size:1.9rem; font-weight:700; letter-spacing:-.02em; margin:.25rem 0; }
.stat-sub{ font-size:.8rem; color:var(--ink-2); }

/* ---------- buttons ---------- */
.btn{ display:inline-block; background:var(--blue); color:#fff; border:1px solid var(--blue);
  border-radius:var(--radius-sm); padding:.5rem .9rem; font-weight:600; font-size:.9rem;
  cursor:pointer; text-decoration:none; }
.btn:hover{ background:var(--blue-hover); border-color:var(--blue-hover); text-decoration:none; }
.btn.ghost{ background:#fff; color:var(--blue); border-color:var(--border); }
.btn.ghost:hover{ background:#EFF4FF; }
.btn.small{ padding:.3rem .6rem; font-size:.8rem; }
.btn.full{ width:100%; text-align:center; }
.quick-actions{ display:flex; flex-wrap:wrap; gap:var(--sp-2); }
.row-actions{ display:flex; gap:.4rem; align-items:center; flex-wrap:wrap; }
.inline-form{ display:inline; margin:0; }

/* ---------- tables ---------- */
.table-wrap{ overflow-x:auto; }
.data-table,.admin-table{ width:100%; border-collapse:collapse; background:var(--surface); }
.data-table th,.admin-table th{ text-align:left; font-size:.78rem; text-transform:uppercase;
  letter-spacing:.04em; color:var(--ink-2); padding:.6rem .75rem; border-bottom:1px solid var(--border); }
.data-table td,.admin-table td{ padding:.7rem .75rem; border-bottom:1px solid var(--border); vertical-align:top; }
.data-table tr:last-child td,.admin-table tr:last-child td{ border-bottom:none; }
.data-table tr:hover td{ background:#F8FAFC; }
.num{ text-align:right; font-variant-numeric:tabular-nums; }

/* ---------- badges ---------- */
.badge{ display:inline-block; padding:.15rem .55rem; border-radius:999px; font-size:.75rem; font-weight:600; }
.badge-type{ background:#EFF4FF; color:var(--blue); }
.badge-admin{ background:#EFF4FF; color:var(--blue); }
.badge-user{ background:#F1F5F9; color:var(--ink-2); }
.badge-active{ background:var(--ok-bg); color:var(--ok); }
.badge-inactive{ background:var(--danger-bg); color:var(--danger); }

/* ---------- forms ---------- */
.stacked{ display:flex; flex-direction:column; gap:.35rem; }
.stacked label{ font-weight:600; font-size:.85rem; margin-top:.5rem; }
input,select,textarea{ padding:.55rem .7rem; border:1px solid var(--border); border-radius:var(--radius-sm);
  font:inherit; color:var(--ink); background:#fff; }
input:focus,select:focus,textarea:focus{ outline:2px solid #BFDBFE; outline-offset:1px; border-color:var(--blue); }
.row-form{ display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; }

/* ---------- flashes / advisory / empty ---------- */
.flash{ padding:.6rem .9rem; border-radius:var(--radius-sm); margin:.5rem 0; }
.flash.ok{ background:var(--ok-bg); color:var(--ok); }
.flash.err{ background:var(--danger-bg); color:var(--danger); }
.advisory{ background:#FEF9C3; color:#854D0E; border:1px solid #FDE68A;
  padding:.6rem .9rem; border-radius:var(--radius-sm); margin-bottom:var(--sp-5); }
.empty{ color:var(--ink-2); padding:var(--sp-4); text-align:center; }

/* ---------- admin layout (see Backoffice shell block below) ---------- */
.provisioning-uri{ display:block; word-break:break-all; background:#F8FAFC;
  border:1px dashed var(--border); padding:.6rem; border-radius:var(--radius-sm); }
.actions details summary{ cursor:pointer; color:var(--blue); font-weight:600; }
.actions form{ display:flex; gap:.4rem; margin:.4rem 0; flex-wrap:wrap; align-items:center; }
.card-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:var(--sp-4); }
.card-value{ font-size:1.8rem; font-weight:700; color:var(--blue); }
.card-label{ color:var(--ink-2); font-size:.85rem; }

/* ---------- login ---------- */
.auth-page{ display:flex; align-items:center; justify-content:center; min-height:100vh; padding:var(--sp-4); }
.login-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:var(--sp-6); width:100%; max-width:400px; }
.login-brand{ display:flex; align-items:center; gap:.5rem; font-weight:700; color:var(--ink); margin-bottom:var(--sp-4); }
.forbidden-wrap{ max-width:520px; margin:3rem auto; text-align:center; }

/* ---------- responsive ---------- */
@media (max-width:900px){
  .app-shell{ flex-direction:column; }
  .sidebar{ position:fixed; z-index:30; left:0; top:0; height:100vh; height:100dvh; transform:translateX(-100%);
    transition:transform .2s ease; box-shadow:var(--shadow); width:min(84vw,300px); }
  .nav-toggle-cbx:checked ~ .sidebar{ transform:translateX(0); }
  /* Shared mobile header: sticky so it stays pinned while the page scrolls.
     Sticky (not fixed) keeps flow space so content never hides beneath it, and
     it is not defeated by an overflow-x ancestor (which we removed). */
  .mobile-topbar{ display:flex; position:sticky; top:0; z-index:15;
    padding-top:calc(var(--sp-3) + env(safe-area-inset-top, 0px));
    box-shadow:0 1px 2px rgba(15,23,42,.10); }
  .content-area{ width:100%; }
  .page{ padding:var(--sp-4); }
  .sidebar-logout{ margin-top:0; padding-top:0; }
}

/* Core Portfolio V1 */
.card-head.split{display:flex;justify-content:space-between;gap:1rem;align-items:flex-start}
.section-total{text-align:right;color:var(--ink)}
.section-total span{color:var(--ink-2)}
.compact-actions{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.asset-section{scroll-margin-top:1rem}
@media(max-width:900px){.card-head.split{flex-direction:column}.section-total{text-align:left}}

/* Production FX V1 */
.fx-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.fx-grid>div{display:flex;flex-direction:column}
.fx-label{font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-2)}
.fx-value{font-weight:600;color:var(--ink)}
.badge-warn{background:#fff4e5;color:#8a5300;border:1px solid #f0c987;padding:.1rem .4rem;border-radius:.3rem;font-size:.72rem}
@media(max-width:900px){.fx-grid{grid-template-columns:1fr 1fr}}

/* ==========================================================================
   MOBILE-FIRST V1 UX PASS — responsive shell, table->card, forms, touch.
   Presentation only. Breakpoints: mobile <=768, tablet <=820, desktop >900.
   ========================================================================== */

/* --- Drawer backdrop (tap to close) --- */
.nav-backdrop{ display:none; }
@media (max-width:900px){
  .nav-backdrop{ display:none; position:fixed; inset:0; background:rgba(15,23,42,.45); z-index:25; }
  .nav-toggle-cbx:checked ~ .nav-backdrop{ display:block; }
  .sidebar{ width:min(84vw,300px); }
}

/* --- No horizontal document overflow, ever ---
   NOTE: overflow-x:hidden on html/body is deliberately NOT used — it makes the
   body a scroll container and breaks position:sticky/fixed for the mobile header
   and drawer (esp. iOS Safari). Prevent overflow at the element level instead. */
html,body{ max-width:100%; }
img{ max-width:100%; height:auto; }
.page,.content-area{ max-width:100%; min-width:0; }
.table-wrap{ max-width:100%; }
.asset-card,.card{ overflow-wrap:anywhere; }

/* --- Touch targets & full-width buttons on phones --- */
@media (max-width:768px){
  input,select,textarea,.btn{ font-size:16px; }               /* prevents iOS zoom */
  .stacked input,.stacked select,.stacked textarea{ width:100%; min-height:44px; }
  .stacked .btn,.btn.full,form.stacked button[type=submit]{ width:100%; min-height:46px; }
  .submit{ display:flex; flex-direction:column; gap:.5rem; }
  .submit .btn{ width:100%; text-align:center; }
  .row-form{ flex-direction:column; align-items:stretch; }
  .row-form input,.row-form select,.row-form button{ width:100%; }
  .quick-actions .btn{ flex:1 1 auto; text-align:center; }
  .page-head .btn{ width:100%; margin-top:.5rem; }
}

/* --- Stat cards stack cleanly on phones --- */
@media (max-width:768px){
  .stat-grid{ grid-template-columns:1fr; gap:var(--sp-3); }
  .fx-grid{ grid-template-columns:1fr 1fr; }
}

/* --- Responsive table -> card. Add class="responsive" + data-label on <td>. --- */
@media (max-width:768px){
  table.responsive thead{ position:absolute; left:-9999px; }
  table.responsive,table.responsive tbody,table.responsive tr,table.responsive td{ display:block; width:100%; }
  table.responsive tr{ border:1px solid var(--border); border-radius:var(--radius-sm);
    margin-bottom:.6rem; padding:.35rem .1rem; background:var(--surface); }
  table.responsive td{ border:none; display:flex; justify-content:space-between; gap:.75rem;
    padding:.35rem .6rem; text-align:right; align-items:baseline; }
  table.responsive td::before{ content:attr(data-label); font-weight:600; color:var(--ink-2);
    text-align:left; flex:0 0 38%; }
  table.responsive td > *{ min-width:0; }
  table.responsive td{ overflow-wrap:anywhere; word-break:break-word; }
  table.responsive td.num{ text-align:right; }
  table.responsive td[colspan]{ justify-content:center; }
  table.responsive td[colspan]::before{ content:""; }
}

/* --- Admin manage forms stack on phones --- */
@media (max-width:768px){
  .actions form{ flex-direction:column; align-items:stretch; }
  .actions form input,.actions form select,.actions form button{ width:100%; }
  .card-grid{ grid-template-columns:1fr 1fr; }
}

/* --- Asset chooser: 2-col, fall back to 1-col on very narrow --- */
@media (max-width:360px){ .chooser-grid{ grid-template-columns:1fr; } }

/* ==========================================================================
   BACKOFFICE (V1.1) — shared admin shell + reusable component system.
   Same visual language as the main app; mobile-first with a drawer that mirrors
   the front-office primitives. Desktop = sidebar; mobile = sticky topbar + drawer.
   ========================================================================== */
.admin-bleed{ width:100%; }
.admin-shell{ display:flex; min-height:100vh; }
.admin-nav{
  width:var(--nav-w); flex:0 0 var(--nav-w); background:var(--surface);
  border-right:1px solid var(--border); padding:var(--sp-5) var(--sp-4);
  display:flex; flex-direction:column; gap:2px; position:sticky; top:0; height:100vh; overflow-y:auto;
}
.admin-nav .sidebar-brand{ margin-bottom:var(--sp-4); }
.admin-nav-links{ display:flex; flex-direction:column; gap:2px; }
.admin-nav-links a{ color:var(--ink); padding:.5rem .7rem; border-radius:var(--radius-sm); font-weight:500; }
.admin-nav-links a:hover{ background:#EFF4FF; text-decoration:none; }
.admin-nav-links a.active{ background:var(--blue); color:#fff; }
.admin-nav-links a:focus-visible,.hamburger:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; }
.admin-nav-back{ color:var(--ink-2)!important; font-weight:600; }
.nav-soon{ padding:.5rem .7rem; color:#94A3B8; font-weight:500; display:flex; justify-content:space-between; align-items:center; cursor:default; }
.nav-soon em{ font-style:normal; font-size:.62rem; text-transform:uppercase; letter-spacing:.05em;
  background:#F1F5F9; color:#94A3B8; padding:.05rem .35rem; border-radius:999px; }
.admin-nav-logout{ margin-top:auto; padding-top:var(--sp-4); }
.admin-main{ flex:1; min-width:0; padding:var(--sp-6); max-width:1100px; }

.admin-topbar{ display:none; position:sticky; top:0; z-index:15; align-items:center; gap:.6rem;
  background:var(--surface); border-bottom:1px solid var(--border);
  padding:calc(var(--sp-3) + env(safe-area-inset-top,0px)) var(--sp-4) var(--sp-3);
  box-shadow:0 1px 2px rgba(15,23,42,.10); }
.admin-topbar-brand{ font-weight:700; display:flex; align-items:center; gap:.35rem; }
.admin-topbar-title{ color:var(--ink-2); font-size:.9rem; margin-left:auto; }
.admin-nav-cbx{ display:none; }
.admin-backdrop{ display:none; }

/* --- reusable admin components --- */
.section-head{ margin-bottom:var(--sp-5); }
.section-head h1{ margin:0 0 .15rem; }
.admin-actions-bar{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:var(--sp-5); }
.status-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:var(--sp-4); }
.status-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:var(--sp-5); }
.status-card .label{ font-size:.8rem; color:var(--ink-2); }
.status-card .value{ font-size:1.15rem; font-weight:700; margin-top:.2rem; overflow-wrap:anywhere; }
.status-card .value.mono{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.95rem; }
.record-cards{ display:none; }              /* desktop: table; mobile: cards */
.record-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:var(--sp-4); margin-bottom:.6rem; }
.record-card .rc-title{ font-weight:700; font-size:1.05rem; }
.record-card dl{ display:grid; grid-template-columns:auto 1fr; gap:.15rem .75rem; margin:.5rem 0 0; font-size:.9rem; }
.record-card dt{ color:var(--ink-2); } .record-card dd{ margin:0; text-align:right; overflow-wrap:anywhere; }
.form-group{ display:flex; flex-direction:column; gap:.35rem; margin-bottom:var(--sp-4); }
.form-group > label{ font-weight:600; font-size:.85rem; }
.action-group{ display:flex; flex-wrap:wrap; gap:.4rem; }
.btn.danger{ background:var(--danger); border-color:var(--danger); }
.btn.danger:hover{ background:#B91C1C; border-color:#B91C1C; }

@media (max-width:900px){
  .admin-shell{ flex-direction:column; }
  .admin-nav{ position:fixed; z-index:30; left:0; top:0; height:100vh; height:100dvh; width:min(84vw,300px);
    transform:translateX(-100%); transition:transform .2s ease; box-shadow:var(--shadow); }
  .admin-nav-cbx:checked ~ .admin-nav{ transform:translateX(0); }
  .admin-backdrop{ display:none; position:fixed; inset:0; background:rgba(15,23,42,.45); z-index:25; }
  .admin-nav-cbx:checked ~ .admin-backdrop{ display:block; }
  .admin-topbar{ display:flex; }
  .admin-main{ padding:var(--sp-4); max-width:100%; }
}
@media (max-width:768px){
  .admin-record-table{ display:none; }       /* hide wide table on phones */
  .record-cards{ display:block; }
  .admin-main form.stacked .btn,.admin-main form.stacked button[type=submit]{ width:100%; min-height:46px; }
}