/* ---------- Glass theme (Settings → Appearance → Theme → Glass) ----------
   Frosted-glass bars and panels over a warm, dim backdrop (like glass tabs floating in front of a lit room).
   The open header tab is lit from above by a teal spotlight with a glowing line under it; chosen chips and
   main buttons glow teal too. It is a dark theme, so <html> also carries data-theme="dark" and every dark
   rule still applies; these rules sit on top (this file loads after the Midnight one). */
html[data-look="glass"][data-theme="dark"] {
  --bg: #121110;
  --bg-warm: #1b1815;
  --bg-sage: #111816;
  --ink: #f2f1ee;
  --ink-2: #c3bfb8;
  --muted: #8a857d;
  --card: rgba(30, 29, 27, 0.46);
  --card-solid: #1c1b19;
  --line: rgba(255, 255, 255, 0.1);
  --shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 -1px 0 rgba(0, 0, 0, 0.25), 0 22px 44px -22px rgba(0, 0, 0, 0.85);

  --brand: #5fe3c9;
  --brand-ink: #062a24;
  --accent: #e6a866;
  --accent-bg: #2b2016;

  --green: #3fbf8f;
  --red: #ef6a5e;
  --yellow: #e7b34c;
  --dark: #0f0e0d;

  --g-bg: rgba(63, 191, 143, 0.16);  --g-ink: #8eecc4;
  --y-bg: rgba(231, 179, 76, 0.16);  --y-ink: #f6d58e;
  --r-bg: rgba(239, 106, 94, 0.16);  --r-ink: #ffaaa0;

  --gl-teal: 95, 227, 201;
  --gl-warm: 214, 150, 88;
  /* the glass itself: a light sheen at the top over a smoky tint, blurred and slightly saturated behind */
  --gl-fill: linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.025) 55%), rgba(28, 27, 25, 0.42);
  --gl-edge: rgba(255, 255, 255, 0.15);
  --gl-blur: blur(22px) saturate(150%);
  color-scheme: dark;
}

/* Backdrop: a dim room with warm light from below-left and a faint teal glow top-right, so the glass has something to blur */
html[data-look="glass"][data-theme="dark"] .bg {
  background:
    radial-gradient(1100px 520px at 12% 108%, rgba(var(--gl-warm), 0.26), transparent 62%),
    radial-gradient(800px 420px at 92% -8%, rgba(var(--gl-teal), 0.10), transparent 60%),
    radial-gradient(700px 500px at 55% 45%, rgba(255, 240, 220, 0.035), transparent 70%),
    linear-gradient(180deg, #171513, #0f0e0d 70%, #15110d);
}
html[data-look="glass"][data-theme="dark"] .bg .blob { opacity: .14; }
html[data-look="glass"][data-theme="dark"] body { background: var(--bg); }
html[data-look="glass"][data-theme="dark"] .topbar { background: linear-gradient(rgba(18, 17, 16, .82) 55%, transparent); }

/* Every glass surface: the header tab bar, the side dock, panels and tiles, the Add menu */
html[data-look="glass"][data-theme="dark"] :is(.tabs, .dock, .dock-pop),
html[data-look="glass"][data-theme="dark"] .card:not(.has-bg),
html[data-look="glass"][data-theme="dark"] .ov-card:not(.ov-hero),
html[data-look="glass"][data-theme="dark"] .kpi {
  background: var(--gl-fill);
  -webkit-backdrop-filter: var(--gl-blur); backdrop-filter: var(--gl-blur);
  border: 1px solid var(--gl-edge);
  box-shadow: var(--shadow);
}
html[data-look="glass"][data-theme="dark"] .card-title { color: var(--ink-2); letter-spacing: .01em; }
html[data-look="glass"][data-theme="dark"] .p-card:hover,
html[data-look="glass"][data-theme="dark"] .ov-card:not(.ov-hero):hover,
html[data-look="glass"][data-theme="dark"] .kpi:hover {
  border-color: rgba(var(--gl-teal), 0.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 24px 46px -20px rgba(0, 0, 0, 0.9), 0 0 26px -10px rgba(var(--gl-teal), 0.55);
}
html[data-look="glass"][data-theme="dark"] .card.dark-card { background: linear-gradient(135deg, rgba(var(--gl-teal), .16), rgba(20, 20, 19, .6)); }

/* Header tabs: the open page sits in a teal spotlight, a bright bar at the top casting light down,
   a glowing line along the bottom. The highlight still glides from tab to tab. */
html[data-look="glass"][data-theme="dark"] .tab { color: var(--ink-2); }
html[data-look="glass"][data-theme="dark"] .tab:hover { color: #fff; }
html[data-look="glass"][data-theme="dark"] .tab-pill {
  background:
    radial-gradient(ellipse 75% 110% at 50% 0%, rgba(var(--gl-teal), 0.42), rgba(var(--gl-teal), 0.08) 70%, transparent 100%),
    rgba(var(--gl-teal), 0.06);
  box-shadow: inset 0 0 0 1px rgba(var(--gl-teal), 0.4), inset 0 -2px 0 rgb(var(--gl-teal)), 0 0 18px -5px rgba(var(--gl-teal), 0.75);
}
html[data-look="glass"][data-theme="dark"] .tab-pill::before {
  content: ''; position: absolute; top: 0; left: 28%; right: 28%; height: 3px; border-radius: 0 0 4px 4px;
  background: rgb(var(--gl-teal)); box-shadow: 0 0 10px 1px rgba(var(--gl-teal), 0.9);
}
html[data-look="glass"][data-theme="dark"] :is(.tabs > .tab.active, .tab-more > .tab.active) { color: #effffb; }
html[data-look="glass"][data-theme="dark"] .tab.active .tab-ic { filter: drop-shadow(0 0 5px rgba(var(--gl-teal), 0.8)); color: rgb(var(--gl-teal)); }
/* where the sliding highlight is missing (some narrow layouts), the active tab gets the same look itself */
html[data-look="glass"][data-theme="dark"] .tabs:not(:has(.tab-pill)) .tab.active {
  background: radial-gradient(ellipse 75% 110% at 50% 0%, rgba(var(--gl-teal), 0.42), rgba(var(--gl-teal), 0.08) 70%, transparent 100%);
  box-shadow: inset 0 0 0 1px rgba(var(--gl-teal), 0.4), inset 0 -2px 0 rgb(var(--gl-teal));
}

/* Side dock: the + button floats as a glowing teal bubble, the rest are plain glass icons */
html[data-look="glass"][data-theme="dark"] .dock-btn:hover { background: rgba(255, 255, 255, 0.09); }
html[data-look="glass"][data-theme="dark"] .dock-plus {
  background: radial-gradient(circle at 50% 30%, rgba(var(--gl-teal), 0.55), rgba(18, 70, 62, 0.9));
  color: #eafffa; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 0 0 1px rgba(var(--gl-teal), 0.55), 0 0 16px -2px rgba(var(--gl-teal), 0.7);
}
html[data-look="glass"][data-theme="dark"] .dock-plus:hover { background: radial-gradient(circle at 50% 30%, rgba(var(--gl-teal), 0.7), rgba(18, 80, 70, 0.95)); }
html[data-look="glass"][data-theme="dark"] .dock-btn::after { background: rgba(20, 20, 19, 0.92); color: var(--ink); border: 1px solid var(--gl-edge); }
html[data-look="glass"][data-theme="dark"] .dock-pop button:hover { background: rgba(255, 255, 255, 0.08); }

/* Chips: glass pills; a chosen one is lit teal */
html[data-look="glass"][data-theme="dark"] .chip {
  background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.12); color: var(--ink-2);
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
html[data-look="glass"][data-theme="dark"] .chip:hover { border-color: rgba(255, 255, 255, 0.26); color: var(--ink); }
html[data-look="glass"][data-theme="dark"] .chip.on {
  background: rgba(var(--gl-teal), 0.14); color: #effffb; border-color: rgba(var(--gl-teal), 0.8);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0 14px -4px rgba(var(--gl-teal), 0.7);
}

/* Segmented switches */
html[data-look="glass"][data-theme="dark"] .seg { background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09); }
html[data-look="glass"][data-theme="dark"] .seg button.on {
  background: rgba(var(--gl-teal), 0.18); color: #fff; box-shadow: inset 0 0 0 1px rgba(var(--gl-teal), 0.7), inset 0 -2px 0 rgb(var(--gl-teal));
}

/* Buttons: glass with a light top edge; the main button is lit teal */
html[data-look="glass"][data-theme="dark"] .btn {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.025));
  border-color: rgba(255, 255, 255, 0.16); color: var(--ink); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
html[data-look="glass"][data-theme="dark"] .btn:hover { border-color: rgba(255, 255, 255, 0.32); background: rgba(255, 255, 255, 0.09); }
html[data-look="glass"][data-theme="dark"] .btn.primary {
  background: linear-gradient(180deg, rgba(var(--gl-teal), 0.36), rgba(var(--gl-teal), 0.14)); color: #effffb;
  border-color: rgba(var(--gl-teal), 0.8); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 0 18px -5px rgba(var(--gl-teal), 0.7);
}
html[data-look="glass"][data-theme="dark"] .btn.primary:hover { opacity: 1; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 0 24px -3px rgba(var(--gl-teal), 0.8); }
html[data-look="glass"][data-theme="dark"] .btn.accent {
  background: rgba(var(--gl-warm), 0.2); color: #ffe2c4; border-color: rgba(var(--gl-warm), 0.7);
  box-shadow: 0 0 16px -5px rgba(var(--gl-warm), 0.6);
}

/* Fields: smoky glass */
html[data-look="glass"][data-theme="dark"] :is(input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]), select, textarea) {
  background-color: rgba(10, 10, 9, 0.45); border-color: rgba(255, 255, 255, 0.12); color: var(--ink);
}
html[data-look="glass"][data-theme="dark"] :is(input, select, textarea):focus {
  border-color: rgba(var(--gl-teal), 0.8); box-shadow: 0 0 0 3px rgba(var(--gl-teal), 0.18); outline: none;
}

/* Status pills */
html[data-look="glass"][data-theme="dark"] .pill { background: rgba(255, 255, 255, 0.07); }
html[data-look="glass"][data-theme="dark"] .pill.green { background: var(--g-bg); color: var(--g-ink); box-shadow: inset 0 0 0 1px rgba(63, 191, 143, .35); }
html[data-look="glass"][data-theme="dark"] .pill.yellow { background: var(--y-bg); color: var(--y-ink); box-shadow: inset 0 0 0 1px rgba(231, 179, 76, .35); }
html[data-look="glass"][data-theme="dark"] .pill.red { background: var(--r-bg); color: var(--r-ink); box-shadow: inset 0 0 0 1px rgba(239, 106, 94, .35); }

/* Prayer times: glass boxes; the current one is lit */
html[data-look="glass"][data-theme="dark"] .pr-box { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.1); color: var(--ink); }
html[data-look="glass"][data-theme="dark"] .pr-box.now {
  background: rgba(var(--gl-teal), 0.15); border-color: rgba(var(--gl-teal), 0.8);
  box-shadow: inset 0 -2px 0 rgb(var(--gl-teal)), 0 0 16px -4px rgba(var(--gl-teal), 0.6);
}

html[data-look="glass"][data-theme="dark"] { scrollbar-color: #3a3631 transparent; }

/* Hover tips: a glass box with a teal edge */
html[data-look="glass"][data-theme="dark"] #tooltip-root {
  background: rgba(22, 21, 20, 0.9); color: var(--ink);
  -webkit-backdrop-filter: var(--gl-blur); backdrop-filter: var(--gl-blur);
  border: 1px solid rgba(var(--gl-teal), 0.35);
  box-shadow: 0 14px 34px -10px rgba(0, 0, 0, 0.9), 0 0 18px -6px rgba(var(--gl-teal), 0.45);
}