/* Ordentus Dashboard — recreation styles
   ----------------------------------------------------------------
   Copy of the live home.html tokens & chrome, factored down to the
   subset this kit needs. Lives next to the index.html / .jsx files. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&display=swap');

:root{
  --bg-primary:#FFFFFF; --bg-secondary:#F5F5F7;
  --bg-sidebar:#F0F0F2; --bg-hover:#E8E8ED; --bg-active:#D1D1D6;
  --border-light:#E5E5EA; --border-medium:#D1D1D6;
  --text-primary:#1D1D1F; --text-secondary:#6E6E73;
  --text-tertiary:#8E8E93; --text-quaternary:#AEAEB2;
  --accent:#007AFF; --accent-hover:#0056CC; --accent-light:#E3F2FD;
  --red:#FF3B30; --pink:#FF2D55; --green:#34C759; --orange:#FF9500;
  --purple:#AF52DE; --indigo:#5E5CE6; --teal:#5AC8FA; --yellow:#FFCC00;

  --grad-bedtime: linear-gradient(135deg,#1B1464 0%,#2D1B69 100%);
  --grad-greeting:
    radial-gradient(1200px 400px at 80% -10%, rgba(94,92,230,.55), transparent 60%),
    radial-gradient(800px 500px at 10% 120%, rgba(175,82,222,.45), transparent 60%),
    linear-gradient(135deg,#1B1464 0%,#2D1B69 55%,#1B1464 100%);

  --shadow-sm:0 1px 2px rgba(0,0,0,.04);
  --shadow-md:0 4px 12px rgba(0,0,0,.06);
  --shadow-lg:0 8px 24px rgba(0,0,0,.10);

  --r-sm:6px; --r-md:10px; --r-lg:14px; --r-xl:18px;
  --toolbar-h:52px; --sidebar-w:260px;
  --font:'Inter',-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; }
body{
  font-family:var(--font); color:var(--text-primary);
  background:var(--bg-secondary);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow:hidden; font-feature-settings:"ss01","cv11";
}
button{ font:inherit; cursor:pointer; border:none; background:none; color:inherit; }
input{ font:inherit; }

#root{ display:flex; flex-direction:column; height:100vh; }

/* ────────── Toolbar ────────── */
.toolbar{
  height:var(--toolbar-h); flex-shrink:0;
  display:flex; align-items:center; padding:0 14px; gap:10px;
  background:var(--bg-secondary); border-bottom:1px solid var(--border-light);
}
.tb-btn{
  width:30px; height:30px; border-radius:8px;
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--text-secondary); transition:background .15s, color .15s;
}
.tb-btn:hover{ background:var(--bg-hover); color:var(--text-primary); }
.tb-btn.text{ width:auto; padding:0 12px; font-size:13px; font-weight:500; color:var(--accent); }
.tb-btn.text:hover{ background:var(--accent-light); }
.tb-btn svg{ width:16px; height:16px; }
.tb-title{ font-size:14px; font-weight:600; letter-spacing:-.2px; margin-left:4px; }
.tb-title .sub{ color:var(--text-tertiary); margin-left:8px; font-weight:500; }
.tb-spacer{ flex:1; }
.avatar{ width:30px; height:30px; border-radius:50%; background:var(--accent); color:#fff;
  font-size:11px; font-weight:600; display:inline-flex; align-items:center; justify-content:center; }
.avatar:hover{ background:var(--accent-hover); }

/* ────────── App body ────────── */
.body{ flex:1; display:flex; min-height:0; }

/* Sidebar */
.sidebar{
  width:var(--sidebar-w); flex-shrink:0; background:var(--bg-sidebar);
  border-right:1px solid var(--border-light);
  padding:12px; overflow-y:auto;
  display:flex; flex-direction:column; gap:12px;
}
.sb-section + .sb-section{ border-top:1px solid var(--border-light); padding-top:12px; }
.sb-label{ font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.6px;
  color:var(--text-tertiary); padding:0 8px 6px; }
.sb-item{ display:flex; align-items:center; gap:10px; padding:7px 10px; border-radius:8px;
  font-size:13px; color:var(--text-primary); cursor:pointer; transition:background .12s; user-select:none; }
.sb-item:hover{ background:var(--bg-hover); }
.sb-item.active{ background:var(--bg-primary); box-shadow:var(--shadow-sm); }
.sb-icon{ width:22px; height:22px; border-radius:6px; display:inline-flex; align-items:center;
  justify-content:center; color:#fff; flex-shrink:0; }
.sb-icon svg{ width:13px; height:13px; }
.sb-count{ margin-left:auto; font-size:11px; color:var(--text-tertiary); font-variant-numeric:tabular-nums; }

.sb-date{ padding:10px; background:var(--bg-primary); border-radius:var(--r-lg); }
.sb-date .dow{ font-size:11px; color:var(--accent); font-weight:600; text-transform:uppercase; letter-spacing:.6px; }
.sb-date .num{ font-size:32px; font-weight:300; letter-spacing:-1px; line-height:1; margin-top:2px; }
.sb-date .mon{ font-size:13px; color:var(--text-secondary); margin-top:2px; }
.sb-date .next{ margin-top:10px; padding-top:10px; border-top:1px solid var(--border-light); font-size:11px; color:var(--text-tertiary); }
.sb-date .next strong{ color:var(--text-primary); font-size:12px; font-weight:500; display:block; margin-top:2px; }

/* Content */
.content{ flex:1; overflow-y:auto; background:var(--bg-secondary); }
.content-inner{ padding:22px 28px 64px; max-width:1180px; margin:0 auto; }

.page-head h1{ font-size:34px; font-weight:700; letter-spacing:-.4px; line-height:1.15; color:var(--text-primary); }
.page-head .sub{ font-size:14px; color:var(--text-secondary); margin-top:6px; max-width:560px; line-height:1.5; }

.section-title{ font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.7px;
  color:var(--text-tertiary); margin:24px 0 10px; padding-left:2px;
  display:flex; align-items:center; justify-content:space-between; }
.section-title .see-all{ font-size:12px; color:var(--accent); text-transform:none; letter-spacing:0; font-weight:500; cursor:pointer; }

/* ────────── Hero greeting ────────── */
.hero{
  position:relative; overflow:hidden; border-radius:16px;
  padding:26px 28px 22px; color:#fff;
  background:var(--grad-greeting);
  box-shadow:var(--shadow-md);
}
.hero::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(1.2px 1.2px at 12% 22%, #fff 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 22% 68%, rgba(255,255,255,.7) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 42% 18%, rgba(255,255,255,.6) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 62% 38%, rgba(255,255,255,.5) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 78% 28%, #fff 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 88% 62%, rgba(255,255,255,.7) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 35% 82%, rgba(255,255,255,.5) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 70% 88%, rgba(255,255,255,.4) 50%, transparent 51%);
  opacity:.7;
}
.hero > *{ position:relative; z-index:1; }
.hero-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:24px; }
.hero-eyebrow{ display:inline-flex; align-items:center; gap:8px;
  font-size:10.5px; font-weight:600; letter-spacing:1.2px; text-transform:uppercase; color:rgba(255,255,255,.72); }
.hero-eyebrow .orb{ width:14px; height:14px; border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #fff, rgba(255,255,255,.85) 60%, rgba(255,255,255,.4));
  box-shadow:0 0 12px rgba(255,255,255,.35); }
.hero-greet{ margin-top:14px; font-size:32px; font-weight:600; letter-spacing:-.7px; line-height:1.08; max-width:560px; }
.hero-greet .dim{ font-weight:300; color:rgba(255,255,255,.78); }
.hero-tag{ margin-top:8px; font-size:14px; color:rgba(255,255,255,.78); line-height:1.55; max-width:520px; font-weight:400; }
.hero-tag strong{ color:#fff; font-weight:600; }
.hero-clock{ text-align:right; font-variant-numeric:tabular-nums; display:flex; flex-direction:column; align-items:flex-end; gap:2px; }
.hero-clock .t{ font-size:44px; font-weight:200; letter-spacing:-1.4px; line-height:1; color:#fff; }
.hero-clock .t .ampm{ font-size:16px; font-weight:300; color:rgba(255,255,255,.6); margin-left:4px; letter-spacing:0; }
.hero-clock .d{ font-size:11px; color:rgba(255,255,255,.6); margin-top:4px; letter-spacing:.4px; text-transform:uppercase; font-weight:500; }
.hero-clock .wx{ margin-top:8px; display:flex; align-items:center; gap:6px; font-size:12px; color:rgba(255,255,255,.78); }

.hero-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
  margin-top:22px; padding-top:18px; border-top:1px solid rgba(255,255,255,.12); }
.hero-stat .lbl{ font-size:10px; letter-spacing:.7px; text-transform:uppercase; color:rgba(255,255,255,.55); margin-bottom:6px; }
.hero-stat .val{ font-size:22px; font-weight:500; color:#fff; letter-spacing:-.3px; line-height:1; }
.hero-stat .val small{ font-size:11px; font-weight:400; color:rgba(255,255,255,.55); margin-left:3px; }
.hero-stat .delta{ font-size:11px; color:rgba(255,255,255,.7); margin-top:5px; }

/* ────────── Now cards ────────── */
.now-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.now-card{ background:var(--bg-primary); border:1px solid var(--border-light); border-radius:14px; padding:14px 16px; }
.now-card .lbl{ font-size:10px; font-weight:600; letter-spacing:.6px; text-transform:uppercase; color:var(--text-tertiary);
  display:flex; align-items:center; gap:6px; }
.now-card .lbl .dot{ width:7px; height:7px; border-radius:50%; }
.now-card .val{ font-size:30px; font-weight:200; letter-spacing:-1px; line-height:1.1; margin-top:8px; color:var(--text-primary); font-variant-numeric:tabular-nums; }
.now-card .val.small{ font-size:18px; font-weight:500; }
.now-card .val small{ font-size:14px; color:var(--text-tertiary); font-weight:400; margin-left:3px; letter-spacing:0; }
.now-card .sub{ font-size:11.5px; color:var(--text-secondary); margin-top:5px; line-height:1.4; }
.now-card .bar{ height:4px; background:var(--bg-secondary); border-radius:2px; margin-top:10px; overflow:hidden; }
.now-card .bar i{ display:block; height:100%; border-radius:2px; }

/* ────────── Agenda strip ────────── */
.agenda{ display:flex; flex-direction:column; gap:8px; }
.agenda-row{ background:var(--bg-primary); border:1px solid var(--border-light); border-radius:12px;
  padding:11px 14px; display:flex; align-items:center; gap:12px; }
.agenda-row .sw{ width:4px; align-self:stretch; border-radius:2px; flex-shrink:0; }
.agenda-row .nm{ font-size:13.5px; font-weight:600; color:var(--text-primary); letter-spacing:-.1px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.agenda-row .src{ font-size:11px; color:var(--text-tertiary); margin-top:1px; font-variant-numeric:tabular-nums; }
.agenda-row .col{ flex:1; min-width:0; }
.agenda-row .tm{ font-size:11.5px; color:var(--text-secondary); font-variant-numeric:tabular-nums; flex-shrink:0; }

/* ────────── Goal cards ────────── */
.goal-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:12px; }
.goal-card{ background:var(--bg-primary); border:1px solid var(--border-light); border-radius:14px;
  padding:16px 18px; display:grid; grid-template-columns:1fr auto; gap:14px; align-items:center; }
.goal-card .chip{ display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px;
  border-radius:8px; color:#fff; }
.goal-card .chip svg{ width:15px; height:15px; }
.goal-card .ttl{ font-size:14px; font-weight:600; color:var(--text-primary); margin-top:8px; letter-spacing:-.1px; }
.goal-card .why{ font-size:12px; color:var(--text-secondary); margin-top:3px; line-height:1.45; }
.goal-card .pct{ font-size:11px; color:var(--text-tertiary); margin-top:8px; font-variant-numeric:tabular-nums; }

.ring-c{ position:relative; width:74px; height:74px; }
.ring-c svg{ width:100%; height:100%; transform:rotate(-90deg); }
.ring-c .v{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:18px; font-weight:600; color:var(--text-primary); font-variant-numeric:tabular-nums; letter-spacing:-.3px; }

/* Stub page-body when sidebar swaps view */
.stub{ padding:60px 0; text-align:center; color:var(--text-tertiary); }
.stub h2{ font-size:18px; font-weight:600; color:var(--text-secondary); margin-bottom:6px; }
.stub p{ font-size:13px; }