/* 2.5.0 LOOK (SB 25 Oct, with the approved dashboard): every page the same family as the new dashboard.
   1. "hidden design" background: navy gradient + a very faint grid of thin lines (115 px cells, ~5 % lines, brighter toward top-left);
      NEXUS Light gets a light version, Lavender Night its own tint. Only on screen (never on print / PDF).
   2. Side menu icons: soft gold at rest; hover / tap / open item = bright gold with a soft glow and a gold pill behind the icon.
   3. Cards: rounder, glass-like edge — colours still come from the theme tokens (no per-page colours).
   Loaded by admin.html and app.html. Old themes (SHABAB Blue, Green, Midnight …) are untouched. */
@media screen {
  [data-theme="nexus"] body,
  [data-theme="lavender"] body,
  [data-theme="nexuslight"] body {
    background-attachment: fixed;
  }
  [data-theme="nexus"] body::before,
  [data-theme="lavender"] body::before,
  [data-theme="nexuslight"] body::before,
  body.sbprem::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
      linear-gradient(to right, var(--x25grid, rgba(169, 184, 214, 0.055)) 1px, transparent 1px),
      linear-gradient(to bottom, var(--x25grid, rgba(169, 184, 214, 0.055)) 1px, transparent 1px);
    background-size: 115px 115px;
    background-position: -1px -1px;
    -webkit-mask-image: radial-gradient(140% 120% at 0% 0%, #000 0%, rgba(0, 0, 0, 0.55) 45%, rgba(0, 0, 0, 0.25) 100%);
    mask-image: radial-gradient(140% 120% at 0% 0%, #000 0%, rgba(0, 0, 0, 0.55) 45%, rgba(0, 0, 0, 0.25) 100%);
  }
  [data-theme="nexus"] body,
  body.sbprem {
    --x25grid: rgba(169, 184, 214, 0.06);
  }
  [data-theme="lavender"] body {
    --x25grid: rgba(196, 187, 232, 0.06);
  }
  [data-theme="nexuslight"] body {
    --x25grid: rgba(11, 31, 74, 0.05);
  }
  /* the page sits above the grid */
  [data-theme="nexus"] #root,
  [data-theme="lavender"] #root,
  [data-theme="nexuslight"] #root {
    position: relative;
    z-index: 1;
  }
  /* --- side menu: gold icons */
  [data-theme="nexus"] .side a > svg,
  [data-theme="lavender"] .side a > svg {
    color: var(--primary);
    opacity: 0.72;
    transition: opacity 0.18s, filter 0.18s, background 0.18s;
  }
  [data-theme="nexuslight"] .side a > svg {
    color: #e3b552;
    opacity: 0.78;
  }
  [data-theme="nexus"] .side a > svg,
  [data-theme="lavender"] .side a > svg,
  [data-theme="nexuslight"] .side a > svg {
    box-sizing: content-box;
    padding: 5px;
    margin: -5px;
    border-radius: 10px;
  }
  [data-theme="nexus"] .side a:hover > svg,
  [data-theme="nexus"] .side a:focus-visible > svg,
  [data-theme="nexus"] .side a:active > svg,
  [data-theme="lavender"] .side a:hover > svg,
  [data-theme="lavender"] .side a:active > svg,
  [data-theme="nexuslight"] .side a:hover > svg,
  [data-theme="nexuslight"] .side a:active > svg {
    opacity: 1;
    color: var(--primary2, var(--primary));
    background: color-mix(in srgb, var(--primary) 18%, transparent);
    filter: drop-shadow(0 0 6px color-mix(in srgb, var(--primary) 70%, transparent));
  }
  [data-theme="nexus"] .side a.on > svg,
  [data-theme="lavender"] .side a.on > svg,
  [data-theme="nexuslight"] .side a.on > svg {
    opacity: 1;
    color: currentColor;
    background: rgba(255, 255, 255, 0.22);
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.35));
  }
  /* --- cards: same family as the dashboard */
  [data-theme="nexus"] #pg .card,
  [data-theme="lavender"] #pg .card {
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 40%), var(--card);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-top-color: color-mix(in srgb, var(--primary) 26%, transparent);
  }
  [data-theme="nexuslight"] #pg .card {
    border-radius: 20px;
  }
  [data-theme="nexus"] #pg .d25 .card,
  [data-theme="lavender"] #pg .d25 .card,
  [data-theme="nexuslight"] #pg .d25 .card {
    border-radius: 22px;
    background: linear-gradient(180deg, var(--panelHi), transparent 40%), var(--panel);
    border: 1px solid var(--stroke);
  }
}
/* 2.5.0 prayer-times chip */
.prayerchip { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--primary, #d9ae4e) 45%, transparent); background: color-mix(in srgb, var(--primary, #d9ae4e) 12%, transparent); color: var(--text, #eef2fb); font: 600 12.5px/1 inherit; white-space: nowrap; cursor: pointer; }
.prayerchip b { color: var(--primary, #d9ae4e); font-weight: 800; }
[data-theme="nexuslight"] .prayerchip b { color: #8a6a1f; }
.prayerchip .pin { color: var(--muted, #a7b6d3); }
.prchipwrap:empty { display: none; }
@media (max-width: 1100px) { .top .prchipwrap { display: none; } }
.d25 .prchipwrap { display: none; }
@media (max-width: 1100px) { .d25 .prchipwrap { display: inline-flex; } }
body.sbprem .prayerchip { color: #f8e2a0; }
@media print {
  body::before {
    display: none !important;
  }
}
/* 2.5.0 9-box on a phone: no side labels, 3 equal columns, smaller text */
@media (max-width: 640px) {
  [data-testid="ninebox"] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 6px !important; }
  [data-testid="ninebox"] > .small.muted, [data-testid="ninebox"] > div:empty { display: none; }
  [data-testid="ninebox"] .card { padding: 8px !important; min-height: 96px !important; }
  [data-testid="ninebox"] .card .small { font-size: 11px; }
}

/* 2.7.0 SHABAB HR PRO default LIGHT look (theme NEXUS Light + data-hrpro): white page, white glass cards, navy text + menu, gold buttons. Night stays a choice. */
html[data-hrpro="1"][data-theme="nexuslight"] { --bg: #ffffff; --bg2: #f5f7fb; --card: rgba(255, 255, 255, 0.86); --line: #e2e6ef; --primary: #c99a35; --primary2: #e3b552; --primaryText: #0b1f4a; --accent: #a87b1e; }
html[data-hrpro="1"][data-theme="nexuslight"] body { background: linear-gradient(180deg, #ffffff 0%, #f5f7fb 100%) !important; }
html[data-hrpro="1"][data-theme="nexuslight"] #pg .card, html[data-hrpro="1"][data-theme="nexuslight"] .card { background: rgba(255, 255, 255, 0.86); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid #e6e9f1; box-shadow: 0 6px 24px rgba(11, 31, 74, 0.07); }
html[data-hrpro="1"][data-theme="nexuslight"] .btn:not(.ghost):not(.soft):not(.bad) { background: linear-gradient(180deg, #e3b552, #c99a35); color: #0b1f4a; border-color: #c99a35; }