/* 2.6.0 part C — TWO MORE THEMES for the Theme Studio (same quality rules as NEXUS Night / NEXUS Light / Lavender Night, WCAG AA):
   EMERALD  (dark):  deep emerald green + gold buttons with dark ink, ivory text — same family as NEXUS Night.
   PEARL    (light): soft white / ivory pages, white cards, ivory side menu, deep gold (bronze) buttons with white ink.
   Every NEXUS Night rule is repeated here for Emerald and every NEXUS Light rule for Pearl (app.css, x25.css, dash25.css),
   so the other files stay untouched. Loaded by admin.html, app.html, owner.html and kiosk.html after the other style sheets.
   Checked by tests/v26c/ui_themes_c.py (contrast of every visible text, EN + AR, PC + phone, dialogs, print). */

/* ------------------------------------------------------------------ tokens */
[data-theme="emerald"] {
  --bg: #051a13;
  --bg2: #082419;
  --card: #0b2a1f;
  --text: #ecf5ef;
  --muted: #a6c7b7;
  --line: #1d4636;
  --primary: #dcb253;
  --primary2: #ebc976;
  --primaryText: #1a1300;
  --accent: #dcb253;
  --silver: #22503e;
  --side: #03120c;
  --side2: #051a13;
  --sideText: #e2efe8;
  --sideMute: #a0c0b1;
  --hero1: #0c5a3d;
  --hero2: #053321;
  --ok: #4ee0a0;
  --okBg: #0e3424;
  --warn: #fbbf24;
  --warnBg: #3a2c0f;
  --bad: #f88a8a;
  --badBg: #3d1a1c;
  --info: #7cc9f2;
  --infoBg: #0e2f3a;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.45), 0 10px 28px rgba(0, 0, 0, 0.4);
  color-scheme: dark;
}
[data-theme="pearl"] {
  --bg: #f8f5ee;
  --bg2: #efe8d9;
  --card: #ffffff;
  --text: #2b2416;
  --muted: #625743;
  --line: #e6dcc6;
  --primary: #7a5710;
  --primary2: #8a6414;
  --primaryText: #ffffff;
  --accent: #7a5710;
  --silver: #d9cdb3;
  --side: #fbf8f1;
  --side2: #f1e9d8;
  --sideText: #3b301b;
  --sideMute: #6f6146;
  --hero1: #8a6414;
  --hero2: #5c420c;
  --ok: #047857;
  --okBg: #e6f3ea;
  --warn: #a14a07;
  --warnBg: #fff3df;
  --bad: #b42318;
  --badBg: #fbecea;
  --info: #0b5f8a;
  --infoBg: #e3f1fa;
  --shadow: 0 1px 2px rgba(60, 45, 15, 0.05), 0 8px 24px rgba(60, 45, 15, 0.08);
  color-scheme: light;
}

/* ------------------------------------------------------------------ Emerald = the NEXUS Night rules (app.css 2.4.1) */
[data-theme="emerald"] .card {
  border-top: 1px solid rgba(220, 178, 83, 0.18);
}
[data-theme="emerald"] .side a.on {
  color: var(--primaryText);
}
[data-theme="emerald"] .pill.pospill {
  background: color-mix(in srgb, var(--pc) 30%, transparent);
  color: color-mix(in srgb, var(--pc) 45%, #ffffff);
}
[data-theme="emerald"] .s-LEAVE,
[data-theme="emerald"] .cal-d.lv {
  background: #2a1f4a;
  color: #c4b5fd;
}
[data-theme="emerald"] .btn.wa {
  background: #0f2d1c;
  color: #6ee7a0;
}
[data-theme="emerald"] .login .box .appname {
  color: #e6f4ec;
}
[data-theme="emerald"]
  :is(.avatar:not([style*="background"]), .langsw button.on, .bub.me, .msgpop .mp-h, .mapmode button.on, .maptools .mt-row button.on, .hr-tabs button.on, .mnum, .daychk label:has(input:checked), .lang button.on) {
  color: var(--primaryText);
}
:is([data-theme="emerald"], [data-theme="pearl"]) .avatar[style*="background"] {
  color: #fff;
  background-image: linear-gradient(rgba(0, 0, 0, 0.32), rgba(0, 0, 0, 0.32)) !important; /* darker circle under the white initials */
}
[data-theme="emerald"] .big {
  --ring: #166534;
}
[data-theme="emerald"] .big.out {
  --ring: #991b1b;
}
[data-theme="emerald"] :is(.btn.ok, .btn.bad, .btn.warn, .btn.danger),
[data-theme="emerald"] :is(.cnt, b.cnt) {
  color: #10141c;
}
[data-theme="emerald"] .lic-banner.gold {
  color: var(--text);
  background: linear-gradient(90deg, rgba(212, 175, 55, 0.18), rgba(212, 175, 55, 0.06)), var(--card);
}
[data-theme="emerald"] .lic-banner.gold a {
  color: var(--primary2);
}
[data-theme="emerald"] .langsw button:not(.on) {
  color: var(--text);
}
:is([data-theme="emerald"], [data-theme="pearl"]) .sbh-i {
  opacity: 0.72;
}
[data-theme="emerald"] body {
  background:
    radial-gradient(ellipse 60vw 50vh at 100% -10%, rgba(220, 178, 83, 0.07), transparent 70%),
    radial-gradient(ellipse 55vw 45vh at -10% 110%, rgba(52, 211, 153, 0.06), transparent 70%),
    var(--bg);
}

/* ------------------------------------------------------------------ Pearl = the NEXUS Light rules + a light side menu */
[data-theme="pearl"] .card {
  border-top: 2px solid rgba(176, 127, 30, 0.32);
}
[data-theme="pearl"] .btn.wa {
  color: #0d6235;
}
[data-theme="pearl"] .side {
  border-inline-end: 1px solid var(--line);
}
[data-theme="pearl"] .side a:hover {
  background: rgba(138, 100, 20, 0.08);
}
[data-theme="pearl"] .side a.on {
  background: linear-gradient(90deg, #7a5710, #8a6414);
  color: #ffffff;
}
[data-theme="pearl"] #lo-side {
  color: var(--sideText) !important;
  border-color: var(--line) !important;
}
[data-theme="pearl"] .side .brand b i {
  color: #8a6414;
}
[data-theme="pearl"] .modsw {
  background: var(--bg2);
}
[data-theme="pearl"] .login .box .appname {
  color: var(--text);
}

/* ------------------------------------------------------------------ the 2.5.0 look (x25.css): faint grid, gold menu icons, glass cards */
@media screen {
  [data-theme="emerald"] body,
  [data-theme="pearl"] body {
    background-attachment: fixed;
  }
  [data-theme="emerald"] body::before,
  [data-theme="pearl"] body::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="emerald"] body {
    --x25grid: rgba(166, 199, 183, 0.06);
  }
  [data-theme="pearl"] body {
    --x25grid: rgba(90, 70, 30, 0.05);
  }
  [data-theme="emerald"] #root,
  [data-theme="pearl"] #root {
    position: relative;
    z-index: 1;
  }
  [data-theme="emerald"] .side a > svg {
    color: var(--primary);
    opacity: 0.72;
    transition: opacity 0.18s, filter 0.18s, background 0.18s;
  }
  [data-theme="pearl"] .side a > svg {
    color: #a0761b;
    opacity: 0.85;
  }
  [data-theme="emerald"] .side a > svg,
  [data-theme="pearl"] .side a > svg {
    box-sizing: content-box;
    padding: 5px;
    margin: -5px;
    border-radius: 10px;
  }
  [data-theme="emerald"] .side a:hover > svg,
  [data-theme="emerald"] .side a:focus-visible > svg,
  [data-theme="emerald"] .side a:active > svg,
  [data-theme="pearl"] .side a:hover > svg,
  [data-theme="pearl"] .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) 55%, transparent));
  }
  [data-theme="emerald"] .side a.on > svg,
  [data-theme="pearl"] .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));
  }
  [data-theme="emerald"] #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="pearl"] #pg .card {
    border-radius: 20px;
  }
  [data-theme="emerald"] #pg .d25 .card,
  [data-theme="pearl"] #pg .d25 .card {
    border-radius: 22px;
    background: linear-gradient(180deg, var(--panelHi), transparent 40%), var(--panel);
    border: 1px solid var(--stroke);
  }
}
[data-theme="pearl"] .prayerchip b {
  color: #6f500f;
}

/* ------------------------------------------------------------------ the new dashboard (dash25.css tokens): Emerald on "night", Pearl on "light" */
[data-theme="emerald"] .d25[data-dt="night"] {
  --bg0: #03120c;
  --bg1: #051a13;
  --bg2: #0a2a1e;
  --panel: rgba(11, 42, 31, 0.74);
  --panelHi: rgba(255, 255, 255, 0.045);
  --solid: #0b2a1f;
  --well: rgba(2, 14, 9, 0.55);
  --stroke: rgba(255, 255, 255, 0.075);
  --strokeGold: rgba(220, 178, 83, 0.42);
  --text: #ecf5ef;
  --muted: #a6c7b7;
  --faint: #8fb2a1;
  --grid: rgba(166, 199, 183, 0.12);
  --gold: #e0b65a;
  --gold2: #f3d98f;
  --goldDeep: #b8892c;
  --goldInk: #1a1300;
  --goldSoft: rgba(224, 182, 90, 0.14);
  --ok: #4ee0a0;
  --off: #6b8a7c;
  --aura1: rgba(224, 182, 90, 0.12);
  --aura2: rgba(52, 211, 153, 0.1);
  --aura3: rgba(16, 120, 80, 0.12);
  --rail: #03120c;
}
[data-theme="pearl"] .d25[data-dt="light"] {
  --bg0: #f1ebdd;
  --bg1: #f8f5ee;
  --bg2: #fdfbf7;
  --panel: rgba(255, 255, 255, 0.9);
  --panelHi: rgba(255, 255, 255, 0.7);
  --solid: #ffffff;
  --well: #f5efe2;
  --stroke: rgba(60, 45, 15, 0.1);
  --strokeGold: rgba(160, 120, 30, 0.5);
  --text: #2b2416;
  --muted: #5f5440;
  --faint: #665a42;
  --grid: rgba(90, 70, 30, 0.08);
  --gold: #8a6414;
  --gold2: #7a5610;
  --goldDeep: #8a6414;
  --goldInk: #1c1300;
  --goldSoft: rgba(176, 127, 30, 0.12);
  --shadow: 0 18px 40px -22px rgba(60, 45, 15, 0.25), 0 1px 2px rgba(60, 45, 15, 0.06);
  --aura1: rgba(217, 174, 78, 0.2);
  --aura2: rgba(201, 162, 39, 0.08);
  --aura3: rgba(217, 174, 78, 0.08);
  --rail: #5c420c;
  --chipBg: rgba(60, 45, 15, 0.05);
}
[data-theme="pearl"] .d25[data-dt="light"] .bp small {
  color: #4a3f2b;
}

/* ------------------------------------------------------------------ PRINT: paper is white → dark text, white cards (as NEXUS Night) */
@media print {
  [data-theme="emerald"] {
    --bg: #ffffff;
    --bg2: #f3f4f6;
    --card: #ffffff;
    --text: #111827;
    --muted: #4b5563;
    --line: #d1d5db;
    --primary: #0b3d2a;
    --primary2: #14553b;
    --primaryText: #ffffff;
    --ok: #166534;
    --okBg: #e6f3ea;
    --warn: #8a5200;
    --warnBg: #fff3df;
    --bad: #b3261e;
    --badBg: #fbecea;
    --info: #0b5f8a;
    --infoBg: #e3f1fa;
    color-scheme: light;
  }
  [data-theme="emerald"] body,
  [data-theme="pearl"] body {
    background: #ffffff !important;
    color: #111827;
  }
}

/* ------------------------------------------------------------------ 2.6.0 part C: PRACTICE COMPANY banner (web/js/c26/practice.js) —
   the same gold stripes in every theme, dark ink (AA), sticky on top of every office screen of a practice company */
.c26-pbanner {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  padding: 9px 16px;
  background: repeating-linear-gradient(135deg, #f2c94c 0 16px, #ecc03f 16px 32px);
  color: #1a1300;
  font-size: 13.5px;
  font-weight: 600;
  border-bottom: 2px solid #1a1300;
}
.c26-pbanner b {
  font-weight: 900;
  letter-spacing: 1.4px;
}
[dir="rtl"] .c26-pbanner b {
  letter-spacing: 0;
}
.c26-pbanner .btn {
  background: #1a1300 !important;
  color: #f8e2a0 !important;
  border: 0 !important;
}
@media print {
  .c26-pbanner {
    position: static;
    background: #fff;
    border: 2px solid #000;
  }
}

/* staff phone home: the chips (prayer time, Thank a colleague, Business trip) sit on the coloured hero → light ink there */
[data-theme="emerald"] .hero .prayerchip b {
  color: #f2c94c;
}
[data-theme="pearl"] .hero .prayerchip {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.45);
  background: rgba(0, 0, 0, 0.2);
}
[data-theme="pearl"] .hero .prayerchip b {
  color: #ffe7a3;
}
[data-theme="pearl"] .hero .prayerchip .pin {
  color: #f5ecd8;
}
/* 2.6.0 merge: NEXUS Light has the same dark hero on the staff phone home → the same light chips as Pearl (prayer time, Thank a
   colleague, Business trip, Complaint box were dark ink on the dark hero since 2.5.0) */
[data-theme="nexuslight"] .hero .prayerchip {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.45);
  background: rgba(0, 0, 0, 0.2);
}
[data-theme="nexuslight"] .hero .prayerchip b {
  color: #ffe7a3;
}
[data-theme="nexuslight"] .hero .prayerchip .pin {
  color: #f5ecd8;
}