/* Themes (design.md, Themes). Each person's choice sets <html data-theme="...">; without it
 * the page follows the device (style.css). "light" needs nothing: it is style.css's base.
 * Festive themes add small decorations only: sidebar art, a strip under the top bar and a
 * greeting on the dashboard. Nothing moves, and tables and forms keep plain backgrounds. */

/* ---------------------------------------------------------------- dark family */
:root[data-theme="dark"], :root[data-theme="night"], :root[data-theme="diwali"] {
  --bg: #0E0E18; --surface: #161624; --surface-2: #1C1C2E;
  --line: #2A2A40; --line-strong: #34344E;
  --ink: #EDEDF3; --ink-2: #C9C9DA; --muted: #9A9AB5;
  --brand-ink: #FF8A3D; --brand-soft: #2A1C14; --brand-soft-2: #3A2416;
  --good: #5CCB8F; --good-soft: #12291D; --warn: #F0B659; --warn-soft: #2C2312;
  --bad: #FF8A80; --bad-soft: #321A1A; --info: #8FA8FF; --info-soft: #1A2138;
  --shadow: 0 0 0 1px rgba(255, 255, 255, .02); --shadow-lg: 0 20px 50px rgba(0, 0, 0, .5);
  --topbar-bg: rgba(22, 22, 36, .88); --wa-out-bg: #1F3B2D; --wa-out-ink: #E4F5EA;
  color-scheme: dark;
}

/* Night: near-black, warm text and amber accents - less blue light late in the day. */
:root[data-theme="night"] {
  --bg: #000000; --surface: #0B0B0B; --surface-2: #121212;
  --line: #222222; --line-strong: #2C2C2C;
  --ink: #EDE3D4; --ink-2: #CBBFAE; --muted: #9C907F;
  --brand: #F59E0B; --brand-2: #FBBF24; --brand-ink: #FBBF24;
  --brand-soft: #1F1708; --brand-soft-2: #2B1F0A;
  --brand-grad: linear-gradient(135deg, #B45309 0%, #92400E 100%);
  --brand-glow: linear-gradient(90deg, #FBBF24, #F59E0B 55%, #B45309);
  --bar: linear-gradient(90deg, #FBBF24, #F59E0B);
  --navy: #050505; --navy-2: #0D0D0D;
  --info: #A8B8D8; --info-soft: #141820;
  --topbar-bg: rgba(8, 8, 8, .9);
  --nav-ink: #BFB3A2; --nav-active-bg: rgba(245, 158, 11, .12); --nav-active-ink: #FBBF24;
  --mark-grad: linear-gradient(135deg, #FBBF24, #F59E0B 60%, #B45309); --mark-glow: rgba(245, 158, 11, .25);
  --ring: 0 0 0 3px rgba(245, 158, 11, .25);
}

/* ---------------------------------------------------------------- festive */
/* Diwali: deep maroon night, gold and diya orange. */
:root[data-theme="diwali"] {
  --bg: #16080C; --surface: #220E14; --surface-2: #2A121A;
  --line: #3D1D27; --line-strong: #4A2430;
  --ink: #FBEFE3; --ink-2: #EBD5C4; --muted: #C2A397;
  --brand: #F5B700; --brand-2: #FFD166; --brand-ink: #FFC94D;
  --brand-soft: #33180F; --brand-soft-2: #45200F;
  --brand-grad: linear-gradient(135deg, #D9480F 0%, #A61E4D 100%);
  --brand-glow: linear-gradient(90deg, #FFD166, #F5B700 50%, #E8590C);
  --bar: linear-gradient(90deg, #FFD166, #F59F00);
  --navy: #3B0A17; --navy-2: #4A0E1E;
  --topbar-bg: rgba(34, 14, 20, .9);
  --nav-ink: #F1D9CF; --nav-active-bg: rgba(245, 183, 0, .16); --nav-active-ink: #FFD166;
  --mark-grad: linear-gradient(135deg, #FFD166, #F59F00 60%, #E8590C); --mark-glow: rgba(245, 183, 0, .4);
  --ring: 0 0 0 3px rgba(245, 183, 0, .3);
  --foot-art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='44' viewBox='0 0 60 44'%3E%3Cg opacity='.75'%3E%3Cpath d='M30 6c3 5 4 8 0 12c-4-4-3-7 0-12z' fill='%23FFC94D'/%3E%3Cpath d='M30 10c1.5 3 2 4.5 0 6.5c-2-2-1.5-3.5 0-6.5z' fill='%23FFF4C2'/%3E%3Cpath d='M14 24h32c-2 9-8 13-16 13s-14-4-16-13z' fill='%23E8590C'/%3E%3Cpath d='M14 24h32' stroke='%23FFC94D' stroke-width='2'/%3E%3Ccircle cx='22' cy='30' r='1.6' fill='%23FFC94D'/%3E%3Ccircle cx='30' cy='32' r='1.6' fill='%23FFC94D'/%3E%3Ccircle cx='38' cy='30' r='1.6' fill='%23FFC94D'/%3E%3C/g%3E%3C/svg%3E");
  /* marigold toran */
  --topbar-art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='12'%3E%3Ccircle cx='6' cy='5' r='4' fill='%23EA580C'/%3E%3Ccircle cx='15' cy='5' r='4' fill='%23F59E0B'/%3E%3Cpath d='M19.5 1l2 9l2-9z' fill='%2316A34A'/%3E%3C/svg%3E");
}

/* Holi: colour on a warm white page, purple sidebar. */
:root[data-theme="holi"] {
  --bg: #FFFBF7;
  --brand: #DB2777; --brand-2: #16A34A; --brand-ink: #BE185D;
  --brand-soft: #FDF2F8; --brand-soft-2: #FCE7F3;
  --brand-grad: linear-gradient(135deg, #DB2777 0%, #7C3AED 100%);
  --brand-glow: linear-gradient(90deg, #EC4899, #FACC15, #22C55E, #3B82F6, #8B5CF6);
  --bar: linear-gradient(90deg, #EC4899, #FACC15, #22C55E, #3B82F6);
  --navy: #3B0764; --navy-2: #4C1D95;
  --nav-active-bg: rgba(236, 72, 153, .2); --nav-active-ink: #F9A8D4;
  --mark-grad: linear-gradient(135deg, #EC4899, #FACC15 50%, #22C55E); --mark-glow: rgba(236, 72, 153, .35);
  --ring: 0 0 0 3px rgba(219, 39, 119, .22);
  --foot-art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='60'%3E%3Cg opacity='.5'%3E%3Ccircle cx='20' cy='40' r='14' fill='%23EC4899'/%3E%3Ccircle cx='50' cy='26' r='10' fill='%2322C55E'/%3E%3Ccircle cx='82' cy='42' r='15' fill='%23FACC15'/%3E%3Ccircle cx='106' cy='22' r='9' fill='%233B82F6'/%3E%3Ccircle cx='38' cy='12' r='3' fill='%23FACC15'/%3E%3Ccircle cx='68' cy='52' r='3' fill='%23EC4899'/%3E%3Ccircle cx='96' cy='8' r='2.5' fill='%2322C55E'/%3E%3C/g%3E%3C/svg%3E");
  --topbar-art: linear-gradient(90deg, #EC4899, #FACC15, #22C55E, #3B82F6, #8B5CF6);
  --topbar-art-h: 4px;
}

/* Navratri / Durga Puja: red and saffron, bunting. */
:root[data-theme="navratri"] {
  --bg: #FFF8F1;
  --brand: #EA580C; --brand-2: #F59E0B; --brand-ink: #B91C1C;
  --brand-soft: #FFF1E6; --brand-soft-2: #FFE2CC;
  --brand-grad: linear-gradient(135deg, #DC2626 0%, #9A3412 100%);
  --brand-glow: linear-gradient(90deg, #F59E0B, #EA580C 50%, #DC2626);
  --navy: #7F1D1D; --navy-2: #991B1B;
  --nav-ink: #FDE2D2; --nav-active-bg: rgba(253, 186, 116, .2); --nav-active-ink: #FDBA74;
  --mark-grad: linear-gradient(135deg, #F59E0B, #EA580C 55%, #DC2626); --mark-glow: rgba(234, 88, 12, .4);
  --foot-art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='44'%3E%3Cg opacity='.6'%3E%3Cpath d='M18 36L42 10M42 36L18 10' stroke='%23F59E0B' stroke-width='3' stroke-linecap='round'/%3E%3Ccircle cx='30' cy='23' r='3' fill='%23FDE68A'/%3E%3C/g%3E%3C/svg%3E");
  /* bunting */
  --topbar-art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='12'%3E%3Cpath d='M0 0h10l-5 10z' fill='%23DC2626'/%3E%3Cpath d='M10 0h10l-5 10z' fill='%23F59E0B'/%3E%3Cpath d='M20 0h10l-5 10z' fill='%2316A34A'/%3E%3C/svg%3E");
}

/* Christmas / New Year: evergreen sidebar, red and gold, a little snow. */
:root[data-theme="christmas"] {
  --bg: #F5FAF6;
  --brand: #DC2626; --brand-2: #D4A017; --brand-ink: #B91C1C;
  --brand-soft: #FEF2F2; --brand-soft-2: #FEE2E2;
  --brand-grad: linear-gradient(135deg, #DC2626 0%, #991B1B 100%);
  --brand-glow: linear-gradient(90deg, #DC2626, #D4A017 50%, #16A34A);
  --navy: #14532D; --navy-2: #166534;
  --nav-ink: #DCFCE7; --nav-active-bg: rgba(250, 204, 21, .16); --nav-active-ink: #FDE68A;
  --mark-grad: linear-gradient(135deg, #EF4444, #DC2626 55%, #991B1B); --mark-glow: rgba(220, 38, 38, .35);
  --ring: 0 0 0 3px rgba(220, 38, 38, .2);
  --sidebar-art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cg stroke='%23FFFFFF' stroke-width='1.4' stroke-linecap='round' opacity='.22'%3E%3Cpath d='M16 8v12M10 14h12M12 10l8 8M20 10l-8 8'/%3E%3Cpath d='M58 44v10M53 49h10M54.5 45.5l7 7M61.5 45.5l-7 7'/%3E%3Cpath d='M30 64v6M27 67h6'/%3E%3C/g%3E%3C/svg%3E");
  /* string of lights */
  --topbar-art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='12'%3E%3Cpath d='M0 2h24' stroke='%23166534' stroke-width='1.5'/%3E%3Ccircle cx='6' cy='7' r='3' fill='%23DC2626'/%3E%3Ccircle cx='18' cy='7' r='3' fill='%23FACC15'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------- decorations */
.sidebar { background-image: var(--sidebar-art, none); background-repeat: repeat; }
/* Festive art sits in the footer, under the menu, never behind it. */
.sidebar-foot { background-image: var(--foot-art, none); background-repeat: repeat-x; background-position: left top 10px; }
:root[data-theme="diwali"] .sidebar-foot, :root[data-theme="holi"] .sidebar-foot,
:root[data-theme="navratri"] .sidebar-foot { padding-top: 66px; }
.topbar::after { content: ""; display: none; position: absolute; left: 0; right: 0; top: 100%;
                 height: var(--topbar-art-h, 12px); background: var(--topbar-art); pointer-events: none; }
:root[data-theme="diwali"] .topbar::after, :root[data-theme="holi"] .topbar::after,
:root[data-theme="navratri"] .topbar::after, :root[data-theme="christmas"] .topbar::after { display: block; }
.festive-greet { font-size: 14px; font-weight: 600; color: var(--brand-ink); margin: 2px 0 0; }

/* ---------------------------------------------------------------- picker (My account) */
.auth-box form.theme-picker { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 8px 0 6px; }
.auth-box .theme-opt { display: flex; flex-direction: row; align-items: center; gap: 8px; padding: 8px 10px;
             border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; font-size: 13px;
             color: var(--ink); background: var(--surface); }
.auth-box .theme-opt input { padding: 0; }
.theme-opt:has(input:checked) { border-color: var(--brand); box-shadow: var(--ring); }
.theme-opt input { margin: 0; }
.swatch { display: inline-flex; border-radius: 6px; overflow: hidden; flex: none; border: 1px solid var(--line); }
.swatch i { width: 10px; height: 20px; display: block; }
.sw-auto i:nth-child(1) { background: #F7F7FA; } .sw-auto i:nth-child(2) { background: #0E0E18; } .sw-auto i:nth-child(3) { background: #FE6000; }
.sw-light i:nth-child(1) { background: #FFFFFF; } .sw-light i:nth-child(2) { background: #141425; } .sw-light i:nth-child(3) { background: #FE6000; }
.sw-dark i:nth-child(1) { background: #161624; } .sw-dark i:nth-child(2) { background: #0E0E18; } .sw-dark i:nth-child(3) { background: #FF8A3D; }
.sw-night i:nth-child(1) { background: #000000; } .sw-night i:nth-child(2) { background: #EDE3D4; } .sw-night i:nth-child(3) { background: #F59E0B; }
.sw-diwali i:nth-child(1) { background: #3B0A17; } .sw-diwali i:nth-child(2) { background: #F5B700; } .sw-diwali i:nth-child(3) { background: #E8590C; }
.sw-holi i:nth-child(1) { background: #EC4899; } .sw-holi i:nth-child(2) { background: #FACC15; } .sw-holi i:nth-child(3) { background: #22C55E; }
.sw-navratri i:nth-child(1) { background: #7F1D1D; } .sw-navratri i:nth-child(2) { background: #EA580C; } .sw-navratri i:nth-child(3) { background: #F59E0B; }
.sw-christmas i:nth-child(1) { background: #14532D; } .sw-christmas i:nth-child(2) { background: #DC2626; } .sw-christmas i:nth-child(3) { background: #D4A017; }