/* ══════════════════════════════════════════════════════════════════════════
   ROview reskin — Phase 1 (visual). Loaded from index.html AFTER the inline
   <style>, so it overrides on equal specificity. Reversible: remove the
   <link rel="stylesheet" href="/reskin.css"> line in index.html.

   Method: redefine the app's OWN theme variables to the new palette, then a
   thin layer of component refinements against the app's real classes. No
   verbiage or metric change. Font stays the system stack — the site CSP
   (style-src 'self') blocks web fonts; self-hosting Inter to match the design's
   typeface exactly is a follow-up.

   Phase 2 (mobile navigation) is now included at the bottom of this file — the
   bottom tab bar, Settings gear, and logo-in-header. It pairs with markup in
   index.html (#mobileTabbar / #mobileGear / #mobileBrand) and wiring in app.js
   (wireNav + showView drive and sync them). Mobile no longer uses the hamburger.
   ════════════════════════════════════════════════════════════════════════ */

/* ---- Layer 1: token overrides (the app themes everything through these) ---- */

/* LIGHT (bare :root) */
:root{
  --sidebar-bg:#dfe3f5; --sidebar-text:#4f5570; --sidebar-text-active:#161826;
  --sidebar-active-bg:#dedafc; --sidebar-border:rgba(43,47,102,0.14);
  --page-bg:#eef0fb; --inset-bg:#eef0fb; --card-bg:#fdfdff;
  --text-primary:#161826; --text-secondary:#363b55; --text-muted:#6e7490;
  --border:#c3c8e2; --gridline:#dfe3f5;
  --blue:#544a8f; --blue-tint:#dedafc; --blue-text:#544a8f; --brand-blue:#544a8f;
  --green:#4d7a63; --green-tint:rgba(77,122,99,0.12);
  --amber:#d98300; --amber-tint:rgba(250,178,25,0.20);
  --red:#a8474b; --red-tint:rgba(168,71,75,0.12);
  --purple:#544a8f; --purple-tint:#dedafc;
  --shadow:0 0 0 1px #c9cee6,0 1px 2px rgba(30,34,74,0.06);
}
/* DARK (OS dark, not explicitly light) */
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  --sidebar-bg:#1c1e2b; --sidebar-text:#7c8199; --sidebar-text-active:#ffffff;
  --sidebar-active-bg:#262a4a; --sidebar-border:rgba(233,233,237,0.14);
  --page-bg:#161826; --inset-bg:#161826; --card-bg:#232532;
  --text-primary:#e9e9ed; --text-secondary:#a2a7bd; --text-muted:#575c73;
  --border:#2a2d3d; --gridline:#1c1e2b;
  --blue:#9184d9; --blue-tint:#262a4a; --blue-text:#9184d9; --brand-blue:#9184d9;
  --green:#6f9e86; --green-tint:rgba(111,158,134,0.14);
  --amber:#eda93b; --amber-tint:rgba(237,169,59,0.30);
  --red:#d98080; --red-tint:rgba(217,128,128,0.14);
  --purple:#9184d9; --purple-tint:#262a4a;
  --shadow:0 0 0 1px rgba(0,0,0,0.30),0 1px 2px rgba(0,0,0,0.20);
}}
/* DARK (explicit toggle) */
:root[data-theme="dark"]{
  --sidebar-bg:#1c1e2b; --sidebar-text:#7c8199; --sidebar-text-active:#ffffff;
  --sidebar-active-bg:#262a4a; --sidebar-border:rgba(233,233,237,0.14);
  --page-bg:#161826; --inset-bg:#161826; --card-bg:#232532;
  --text-primary:#e9e9ed; --text-secondary:#a2a7bd; --text-muted:#575c73;
  --border:#2a2d3d; --gridline:#1c1e2b;
  --blue:#9184d9; --blue-tint:#262a4a; --blue-text:#9184d9; --brand-blue:#9184d9;
  --green:#6f9e86; --green-tint:rgba(111,158,134,0.14);
  --amber:#eda93b; --amber-tint:rgba(237,169,59,0.30);
  --red:#d98080; --red-tint:rgba(217,128,128,0.14);
  --purple:#9184d9; --purple-tint:#262a4a;
  --shadow:0 0 0 1px rgba(0,0,0,0.30),0 1px 2px rgba(0,0,0,0.20);
}

/* ---- Layer 2: typography — hierarchy from size + space, weight capped at 500.
   Wordmark (.brand) is identity and keeps its heavier weight, so it's excluded. */
h1,h2,h3,h4,.card-title,.stat-label,.section-label,.door-title,.door h3{
  font-weight:500 !important; letter-spacing:-.012em;
}

/* Wordmark: "RO" in the logo's brand blue (both themes); "view AI" follows
   primary text — white on dark, black on light. Not the redesign accent. */
.brand-ro,
.login-hero span{ color:#135cf8 !important; }
.brand-top,
.login-hero{ color:var(--text-primary) !important; }

/* Every card / tile header at full contrast (white on dark, black on light). */
.card-header h2, .card-header h3, .card-header .card-title, .card-header .label,
.card > h2, .card > h3,
.stat-card .label,
#issuesByAdvisorCard .label,
#top-issues-section h2, #top-issues-section .card-title{
  color:var(--text-primary) !important;
}

/* Buttons — outlined only, never filled. */
.btn-primary{
  background:transparent !important; color:var(--blue) !important;
  border:1px solid var(--blue) !important;
}
.btn-primary:hover{ background:color-mix(in srgb, var(--blue) 12%, transparent) !important; }
.btn-secondary,.btn-ghost{
  background:transparent !important; border:1px solid var(--border) !important;
  color:var(--text-secondary) !important;
}
.btn{ border-radius:6px !important; font-weight:500 !important; }

/* Cards — flat surface, hairline edge, no colored outline. */
.card{
  border:1px solid var(--border) !important; border-radius:8px !important;
  box-shadow:var(--shadow) !important;
}
/* ROview Noticed + Coach ROview: a glowing outline in the logo blue (#135cf8),
   so the AI advisory panels read as the product speaking. Static glow (no
   animation — keeps it calm and reduced-motion-safe). */
.noticed-card,.coach-card{
  border:1px solid #135cf8 !important; border-radius:8px !important;
  box-shadow:0 0 0 1px rgba(19,92,248,0.35), 0 0 16px 1px rgba(19,92,248,0.38) !important;
}

/* KPI band — de-box the stat tiles into one instrument. */
.stat-card{
  background:transparent !important; border:0 !important; box-shadow:none !important;
  border-radius:0 !important; border-left:1px solid var(--gridline) !important;
}
.stat-card:first-child{ border-left:0 !important; }
/* ...but Issues by Advisor is a .stat-card only by inheritance — it's really a
   full-width content card, so restore its surface tile. */
#issuesByAdvisorCard,.stat-card-issues{
  background:var(--card-bg) !important; border:1px solid var(--border) !important;
  border-radius:8px !important; box-shadow:var(--shadow) !important; padding:12px 14px !important;
}

/* Section doors — flat, lit only when a state exists. */
.door{ border:1px solid var(--border) !important; border-radius:8px !important; box-shadow:none !important; }
.door.flagged,.door.warn{ background:var(--amber-tint) !important; box-shadow:inset 0 0 0 1px var(--amber) !important; border-color:transparent !important; }
.door.critical,.door.alert{ background:var(--red-tint) !important; box-shadow:inset 0 0 0 1px var(--red) !important; border-color:transparent !important; }

/* Sidebar SELECTED page — unmistakable in both themes. The app's default is
   white text on a faint tint, which nearly vanishes on the light theme. Give the
   active item accent-colored label + icon (icons stroke=currentColor so they
   follow), a stronger accent-tint fill, and a 3px accent bar down the left edge
   (via inset shadow so nothing shifts). */
.sidenav a.active{
  background:color-mix(in srgb, var(--blue) 20%, transparent) !important;
  color:var(--blue) !important;
  box-shadow:inset 3px 0 0 var(--blue) !important;
  font-weight:600 !important;
}

/* ---- Removed features (product decision): no physical-RO upload, no MPI review.
   CSS hide keeps this reversible — nothing is deleted from the markup or routes. */
#toggleUpload,                                   /* topbar "Upload RO" button */
#navUploadLink,                                  /* "Upload RO (form / CSV)" nav */
.sidenav a[data-scroll="mpi-review-section"],    /* "MPI Review" nav */
#upload-section,                                 /* homepage upload panel */
#mpi-review-section{                             /* MPI Review Queue card */
  display:none !important;
}

/* ══ Phase 2: mobile navigation — bottom tab bar + Settings gear + brand header.
   Replaces the hamburger drawer on phones. Applies to portrait phones
   (max-width 700) AND landscape phones (short height ≤500) so rotating keeps
   the tab bar and reflows tiles into the wider screen. ══ */
#mobileTabbar, #mobileGear, #mobileBrand{ display:none; }

@media (max-width:700px), (max-height:500px){
  #navToggle{ display:none !important; }   /* hamburger replaced by the tab bar */
  .sidebar{ display:none !important; }     /* drawer no longer used */

  /* Header band: brand top-left, gear top-right; the rest flows below it. */
  .topbar{ position:relative; padding-top:54px !important; }
  #mobileBrand{
    display:flex; align-items:center; gap:8px;
    position:absolute; top:14px; left:16px; color:var(--text-primary);
  }
  #mobileBrand img{ width:24px; height:24px; border-radius:6px; }
  #mobileBrand .mbrand{ font-weight:800; font-size:15.5px; letter-spacing:-.015em; }
  #mobileBrand .brand-ro{ color:#135cf8; font-weight:800; }
  #mobileGear{
    display:inline-flex; align-items:center; justify-content:center;
    position:absolute; top:12px; right:14px; z-index:5;
    width:34px; height:34px; border-radius:8px; cursor:pointer;
    background:transparent; border:1px solid var(--border); color:var(--text-secondary);
  }
  #mobileGear.active{ color:var(--blue); border-color:var(--blue); }

  /* Bottom tab bar. */
  #mobileTabbar{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:60;
    background:var(--card-bg); border-top:1px solid var(--border);
    box-shadow:0 -2px 14px rgba(0,0,0,.28);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom, 0px)); justify-content:space-around;
  }
  #mobileTabbar button{
    flex:1 1 0; min-width:0; min-height:44px; background:0; border:0; cursor:pointer;
    color:var(--text-muted); display:flex; flex-direction:column; align-items:center; gap:3px;
    padding:4px 2px; font-weight:500; font-size:9px; line-height:1;
  }
  #mobileTabbar button svg{ width:20px; height:20px; }
  #mobileTabbar button span{ white-space:nowrap; }
  #mobileTabbar button.active{ color:var(--blue); }

  /* Pin the tab bar to the screen: the body stops scrolling and the content
     scrolls inside itself, so a fixed bar can't ride to the page bottom. */
  body{ overflow:hidden !important; }
  main.content{
    height:100dvh; height:100vh; overflow-y:auto; -webkit-overflow-scrolling:touch;
    /* clearance tracks the notch inset so the last content clears the bar */
    padding-bottom:calc(80px + env(safe-area-inset-bottom, 0px)) !important;
  }
}