/* Main-page-only theme — NH-Portal-style look in BURGUNDY, day + night.
   Loaded ONLY by dashboard.html after style.css; other pages keep the green theme.
   The 🌙/☀️ switcher (js/theme.js, hub_theme) flips html[data-theme] as everywhere else. */

:root {
  --bg: #faf6f7;
  --bg-2: #ffffff;
  --card: #ffffff;
  --card-border: #eedde3;
  --text: #2b1220;
  --muted: #92707d;
  --accent: #881337;
  --accent-2: #be123c;
  --danger: #e11d48;
  --ok: #16a34a;
  --radius: 16px;
  --shadow: 0 20px 60px rgba(136, 19, 55, 0.10);
}

body {
  background:
    radial-gradient(900px 600px at 12% -10%, rgba(136, 19, 55, 0.09), transparent 60%),
    radial-gradient(800px 500px at 100% 0%, rgba(190, 18, 60, 0.07), transparent 55%),
    linear-gradient(160deg, var(--bg), var(--bg-2));
  background-attachment: fixed;
}

/* ---------- nav: NH-style squircle mark + wordmark ---------- */
.nav { padding: 20px 28px 12px; }
.nav .logo { font-size: 19px; gap: 10px !important; }
.nav .logo::before {
  content: "AB";
  width: 38px; height: 38px; border-radius: 12px; flex: none;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff; font-size: 15px; font-weight: 800; letter-spacing: 0;
  box-shadow: 0 6px 16px rgba(136, 19, 55, .30);
}
.nav .brand { background: none; color: var(--text); -webkit-text-fill-color: var(--text); letter-spacing: -0.02em; }
.pnav-btn { border-radius: 99px; }
.pnav-av { background: linear-gradient(135deg, var(--accent), var(--accent-2)); }

/* ---------- greeting block ---------- */
.section-head { margin: 34px 0 8px; align-items: center; }
.section-head h2 { font-size: 30px; font-weight: 800; letter-spacing: -0.03em; }
.section-head .muted { font-size: 14.5px; margin-top: 3px; }
.section-head .muted b { color: var(--accent); font-weight: 700; }

/* ---------- clocks as NH chip cards ---------- */
.clocks { gap: 10px; }
.clock {
  background: var(--card); border: 1px solid var(--card-border); border-radius: 14px;
  padding: 10px 16px 9px; box-shadow: 0 6px 18px rgba(136, 19, 55, .06);
}
.clock .t { font-size: 21px; }
.clock .d { letter-spacing: .1em; font-size: 10.5px; }
@media (max-width: 900px) { .clock { padding: 8px 12px 7px; } .clock .t { font-size: 17px; } }

/* ---------- app tiles, NH card style ---------- */
.app-grid { gap: 16px; margin-top: 20px; }
.app-tile {
  border-radius: var(--radius);
  padding: 22px 22px 20px;
  box-shadow: 0 6px 20px rgba(136, 19, 55, .05);
}
.app-tile .glow { opacity: .06; }
.app-tile .thumb { width: 52px; height: 52px; border-radius: 14px; font-size: 26px; margin-bottom: 14px; }
/* curated jewel-tone icon squircles — assigned in order, all sit well on the burgundy theme */
.thumb.hue-0 { background: linear-gradient(135deg, #6366f1, #4338ca); box-shadow: 0 8px 20px rgba(99, 102, 241, .38); }
.glow.hue-0 { background: radial-gradient(circle at 30% 0%, #6366f1, transparent 70%); }
.thumb.hue-1 { background: linear-gradient(135deg, #14b8a6, #0f766e); box-shadow: 0 8px 20px rgba(20, 184, 166, .38); }
.glow.hue-1 { background: radial-gradient(circle at 30% 0%, #14b8a6, transparent 70%); }
.thumb.hue-2 { background: linear-gradient(135deg, #f59e0b, #b45309); box-shadow: 0 8px 20px rgba(245, 158, 11, .38); }
.glow.hue-2 { background: radial-gradient(circle at 30% 0%, #f59e0b, transparent 70%); }
.thumb.hue-3 { background: linear-gradient(135deg, #f43f5e, #be123c); box-shadow: 0 8px 20px rgba(244, 63, 94, .38); }
.glow.hue-3 { background: radial-gradient(circle at 30% 0%, #f43f5e, transparent 70%); }
.thumb.hue-4 { background: linear-gradient(135deg, #a855f7, #7e22ce); box-shadow: 0 8px 20px rgba(168, 85, 247, .38); }
.glow.hue-4 { background: radial-gradient(circle at 30% 0%, #a855f7, transparent 70%); }
.thumb.hue-5 { background: linear-gradient(135deg, #0ea5e9, #0369a1); box-shadow: 0 8px 20px rgba(14, 165, 233, .38); }
.glow.hue-5 { background: radial-gradient(circle at 30% 0%, #0ea5e9, transparent 70%); }
.thumb.hue-6 { background: linear-gradient(135deg, #10b981, #047857); box-shadow: 0 8px 20px rgba(16, 185, 129, .38); }
.glow.hue-6 { background: radial-gradient(circle at 30% 0%, #10b981, transparent 70%); }
.thumb.hue-7 { background: linear-gradient(135deg, #64748b, #334155); box-shadow: 0 8px 20px rgba(100, 116, 139, .38); }
.glow.hue-7 { background: radial-gradient(circle at 30% 0%, #64748b, transparent 70%); }
.app-tile h3 { font-size: 17px; letter-spacing: -0.01em; }
.app-tile p { font-size: 13px; line-height: 1.45; }
.app-tile::after {
  content: "Open →";
  display: inline-block; margin-top: 12px;
  font-size: 12.5px; font-weight: 700; color: var(--accent);
  opacity: 0; transform: translateX(-4px); transition: .18s;
}
.app-tile:hover { border-color: var(--accent-2); box-shadow: 0 18px 40px rgba(136, 19, 55, .14); }
.app-tile:hover::after { opacity: 1; transform: none; }

/* ---------- reminders indicator ---------- */
.rem-card {
  display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--text);
  background: var(--card); border: 1px solid var(--card-border); border-radius: 16px;
  padding: 14px 18px; margin: 4px 0 20px; box-shadow: 0 6px 20px rgba(136, 19, 55, .06);
  transition: transform .15s ease, border-color .2s, box-shadow .2s; max-width: 460px;
}
.rem-card:hover { transform: translateY(-2px); border-color: var(--accent-2); box-shadow: 0 14px 32px rgba(136, 19, 55, .13); text-decoration: none; }
.rem-num {
  flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  font-size: 19px; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums;
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 6px 16px rgba(136, 19, 55, .3);
}
.rem-txt { display: flex; flex-direction: column; line-height: 1.3; }
.rem-txt b { font-size: 15px; }
.rem-sub { font-size: 12.5px; color: var(--muted); }
.rem-go { margin-left: auto; color: var(--accent); font-weight: 800; font-size: 18px; }
.rem-card.due .rem-num { background: linear-gradient(135deg, #c2780b, #e0920f); box-shadow: 0 6px 16px rgba(194, 120, 11, .32); }
.rem-card.due .rem-sub { color: #a8630a; font-weight: 600; }
html[data-theme="dark"] .rem-card { box-shadow: 0 6px 20px rgba(0, 0, 0, .35); }
html[data-theme="dark"] .rem-card.due .rem-sub { color: #f0b25a; }

/* ---------- footer ---------- */
.hub-foot { border-top: 1px solid var(--card-border); margin-top: 48px; padding-top: 18px; }

/* ---------- theme fab ---------- */
.theme-fab { box-shadow: 0 8px 24px rgba(136, 19, 55, .22); }

/* ================= NIGHT ================= */
html[data-theme="dark"] {
  --bg: #170a10;
  --bg-2: #1e0d15;
  --card: #251019;
  --card-border: #41202e;
  --text: #f7e9ee;
  --muted: #b58e9c;
  --accent: #fb7185;
  --accent-2: #f43f5e;
  --danger: #fb7185;
  --shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}
html[data-theme="dark"] body {
  background:
    radial-gradient(900px 600px at 12% -10%, rgba(244, 63, 94, 0.10), transparent 60%),
    radial-gradient(800px 500px at 100% 0%, rgba(251, 113, 133, 0.06), transparent 55%),
    linear-gradient(160deg, var(--bg), var(--bg-2));
  background-attachment: fixed;
}
html[data-theme="dark"] .nav .logo::before {
  background: linear-gradient(135deg, #9f1239, #e11d48);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .5);
}
html[data-theme="dark"] .pnav-av { background: linear-gradient(135deg, #9f1239, #e11d48); }
html[data-theme="dark"] .app-tile .thumb { box-shadow: 0 8px 20px rgba(0, 0, 0, .45); }
html[data-theme="dark"] .clock,
html[data-theme="dark"] .app-tile { box-shadow: 0 6px 20px rgba(0, 0, 0, .35); }
html[data-theme="dark"] .app-tile:hover { box-shadow: 0 18px 40px rgba(0, 0, 0, .55); border-color: var(--accent-2); }
html[data-theme="dark"] .section-head .muted b { color: var(--accent); }
html[data-theme="dark"] input, html[data-theme="dark"] select, html[data-theme="dark"] textarea { background: #1c0b12; }
html[data-theme="dark"] .btn-primary { background: linear-gradient(120deg, #be123c, #e11d48); color: #fff; }
html[data-theme="dark"] .msg.error { background: rgba(251,113,133,.14); color: #fda4af; }
html[data-theme="dark"] .msg.ok { background: rgba(52,211,153,.14); color: #6ee7b7; }
html[data-theme="dark"] .theme-fab { box-shadow: 0 8px 24px rgba(0, 0, 0, .55); }