/* ==========================================================================
   Compazable designs ("skins"): Classic, Warm and Bold
   --------------------------------------------------------------------------
   Choice of Design proposal (approved by Prasad 2026-10-04). A company's
   HR Administrator picks the company design under Settings -> Appearance,
   and - unless HR has switched personal choice off - each person can pick
   their own under Appearance in their account menu. The server works out
   which one applies (design_skins.effective_skin) and writes it onto the
   page as <html data-cz-skin="classic|warm|bold">.

   How it works: compazable-theme.css already draws EVERYTHING from a short
   list of named colours, fonts and corner sizes (--cz-accent, --cz-ink,
   --cz-radius ...). A design is simply a different set of values for that
   same list. So this file only:
     1. redefines those values for Warm and Bold,
     2. points Bootstrap's own built-in blue (buttons, tick boxes, focus
        rings) at the same values, because Bootstrap ships with its blue
        typed in rather than read from a setting,
     3. draws the few things that differ in shape, not just colour: Warm's
        pill-shaped menu items and serif headings, Bold's dark navy sidebar.

   Classic is the design the app already had ("Direction A2"). Every rule
   below is scoped to warm or bold on purpose, so Classic screens are
   byte-for-byte unaffected by this file.

   Layout is identical in all three - only colours, fonts and corner
   rounding change. The Super Admin console, emails, PDFs and the phone
   home-screen icon always stay Classic.

   RULE FOR NEW SCREENS: never type a colour into a template. Use the
   var(--cz-...) names, or a cz- class, so the screen follows the design.
   ========================================================================== */

/* ---------- 0. Fonts (self-hosted - see static/vendor/<font>/OFL.txt) ----------
   Served from our own server for the same reasons as Plus Jakarta Sans:
   the security policy only allows fonts from 'self', the offline phone app
   caches same-origin files only, and no visitor's browser contacts Google
   just to draw text. A browser only downloads a font file when a page
   actually uses it, so Classic users never fetch these. IBM Plex Sans was
   already in the app (the marketing page uses it). */
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(../vendor/fraunces/fraunces-latin.woff2) format('woff2'); }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(../vendor/dm-sans/dm-sans-latin.woff2) format('woff2'); }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(../vendor/space-grotesk/space-grotesk-latin.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(../vendor/ibm-plex-sans/ibm-plex-sans-latin.woff2) format('woff2'); }

/* ---------- 1. The values for each design ---------- */
/* Warm: cream and white, deep teal, Fraunces headings over DM Sans. Every
   text colour below was checked for at least 4.5:1 contrast against the
   backgrounds it sits on (the same standard Classic meets). */
:root[data-cz-skin="warm"] {
  --cz-bg: #FAF7F2;  --cz-surface: #FFFFFF;  --cz-ink: #1F1B16;  --cz-muted: #6B6259;
  --cz-faint: #A39A8F;  --cz-line: #EAE3D8;
  --cz-accent: #1F6F66;  --cz-accent-deep: #1A5E57;  --cz-accent-soft: #E3F0EE;
  --cz-warn-bg: #FBE7DC; --cz-warn: #8A3A12;
  --cz-ok-bg: #E5F2E7;   --cz-ok: #24623A;
  --cz-neutral-bg: #F1ECE4; --cz-neutral: #5E554B;
  --cz-font: 'DM Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --cz-font-head: 'Fraunces', Georgia, 'Times New Roman', serif;
  --cz-radius: 12px; --cz-radius-lg: 18px;
  --cz-nav-ink: #4A433B;
  --cz-row-hover: #FCFAF6;
  --bs-primary-rgb: 31, 111, 102;
  --bs-link-color-rgb: 26, 94, 87;  --bs-link-hover-color: #14493F; --bs-link-hover-color-rgb: 20, 73, 63;
  --bs-focus-ring-color: rgba(31, 111, 102, .25);
}
/* Bold: light lavender-grey, dark navy, violet, Space Grotesk headings
   over IBM Plex Sans. The sidebar is the dark navy part (section 4). */
:root[data-cz-skin="bold"] {
  --cz-bg: #F4F5FB;  --cz-surface: #FFFFFF;  --cz-ink: #0E1330;  --cz-muted: #555C7A;
  --cz-faint: #9AA0BD;  --cz-line: #E3E5F0;
  --cz-accent: #5B3DF5;  --cz-accent-deep: #4527D6;  --cz-accent-soft: #EDE9FF;
  --cz-warn-bg: #FFE9D6; --cz-warn: #A04500;
  --cz-ok-bg: #DDF5EA;   --cz-ok: #0F6A45;
  --cz-neutral-bg: #EEF0F7; --cz-neutral: #4A5070;
  --cz-font: 'IBM Plex Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --cz-font-head: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  --cz-radius: 10px; --cz-radius-lg: 12px;
  --cz-nav-ink: #B7BCD9;
  --cz-row-hover: #F9F9FD;
  --cz-navy: #0E1330; --cz-navy-line: #232A52;
  --bs-primary-rgb: 91, 61, 245;
  --bs-link-color-rgb: 69, 39, 214;  --bs-link-hover-color: #3519B0; --bs-link-hover-color-rgb: 53, 25, 176;
  --bs-focus-ring-color: rgba(91, 61, 245, .25);
}
/* Bootstrap reads its link colour from these two (the hex versions are set
   in compazable-shell.css for Classic; these win for Warm and Bold). */
:root[data-cz-skin="warm"], :root[data-cz-skin="bold"] {
  --bs-link-color: var(--cz-accent-deep);
  --bs-body-color: var(--cz-ink);
  --bs-secondary-color: var(--cz-muted);
}

/* ---------- 2. Headings use the design's heading font ---------- */
:is([data-cz-skin="warm"], [data-cz-skin="bold"]) :is(h1, h2, h3, .h1, .h2, .h3, .cz-h1, .cz-h2, .cz-brand, .cz-stat, .cz-hero__number, .cz-brand__mark) {
  font-family: var(--cz-font-head);
}
[data-cz-skin="warm"] :is(h1, .h1, .cz-h1) { font-weight: 600; letter-spacing: -0.02em; }
[data-cz-skin="warm"] .cz-brand { font-weight: 600; }

/* ---------- 3. Bootstrap's built-in blue -> the design's colour ---------- */
:is([data-cz-skin="warm"], [data-cz-skin="bold"]) .btn-primary {
  --bs-btn-bg: var(--cz-accent); --bs-btn-border-color: var(--cz-accent);
  --bs-btn-hover-bg: var(--cz-accent-deep); --bs-btn-hover-border-color: var(--cz-accent-deep);
  --bs-btn-active-bg: var(--cz-accent-deep); --bs-btn-active-border-color: var(--cz-accent-deep);
  --bs-btn-disabled-bg: var(--cz-accent); --bs-btn-disabled-border-color: var(--cz-accent);
  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}
:is([data-cz-skin="warm"], [data-cz-skin="bold"]) .btn-outline-primary {
  --bs-btn-color: var(--cz-accent-deep); --bs-btn-border-color: var(--cz-accent-deep);
  --bs-btn-hover-bg: var(--cz-accent); --bs-btn-hover-border-color: var(--cz-accent); --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--cz-accent-deep); --bs-btn-active-border-color: var(--cz-accent-deep); --bs-btn-active-color: #fff;
  --bs-btn-disabled-color: var(--cz-accent-deep); --bs-btn-disabled-border-color: var(--cz-accent-deep);
  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}
:is([data-cz-skin="warm"], [data-cz-skin="bold"]) .form-check-input:checked {
  background-color: var(--cz-accent); border-color: var(--cz-accent);
}
:is([data-cz-skin="warm"], [data-cz-skin="bold"]) :is(.form-control, .form-select, .form-check-input):focus {
  border-color: var(--cz-accent); box-shadow: 0 0 0 .25rem var(--bs-focus-ring-color);
}
:is([data-cz-skin="warm"], [data-cz-skin="bold"]) .border-primary { border-color: var(--cz-accent) !important; }
:is([data-cz-skin="warm"], [data-cz-skin="bold"]) :is(.nav-pills .nav-link.active, .dropdown-item.active, .dropdown-item:active, .list-group-item.active, .progress-bar) {
  background-color: var(--cz-accent); border-color: var(--cz-accent);
}
:is([data-cz-skin="warm"], [data-cz-skin="bold"]) .page-link { color: var(--cz-accent-deep); }
:is([data-cz-skin="warm"], [data-cz-skin="bold"]) .active > .page-link { background-color: var(--cz-accent); border-color: var(--cz-accent); color: #fff; }
:is([data-cz-skin="warm"], [data-cz-skin="bold"]) .accordion-button:not(.collapsed) { color: var(--cz-accent-deep); background-color: var(--cz-accent-soft); }
:is([data-cz-skin="warm"], [data-cz-skin="bold"]) .accordion-button:focus { box-shadow: 0 0 0 .25rem var(--bs-focus-ring-color); }
/* Grey hover tints that were tuned for Classic's cool grey background */
:is([data-cz-skin="warm"], [data-cz-skin="bold"]) :is(.cz-table tbody tr:hover, .cz-list__row:hover, .cz-todo-row:hover) { background: var(--cz-row-hover); }
:is([data-cz-skin="warm"], [data-cz-skin="bold"]) table.cz-grid-table.table-hover > tbody > tr:hover > * { --bs-table-bg-state: var(--cz-row-hover); }

/* ---------- 4. Sidebar ---------- */
[data-cz-skin="warm"] .cz-nav__item { color: var(--cz-nav-ink); }

/* Warm: the selected menu item is a dark pill, like the design's tabs. */
[data-cz-skin="warm"] .cz-sidebar .cz-nav__item { border-radius: 999px; }
[data-cz-skin="warm"] .cz-sidebar .cz-nav__item[aria-current="page"] { background: var(--cz-ink); color: #fff; }
[data-cz-skin="warm"] .cz-sidebar .cz-nav__item[aria-current="page"] > .bi { color: #fff; }

/* Bold: dark navy sidebar with a violet selected item. Only the sidebar
   itself turns dark - the pop-up menus it opens (profile switcher, account
   menu) stay white, like every other menu in the app. */
[data-cz-skin="bold"] .cz-sidebar { background: var(--cz-navy); border-right-color: var(--cz-navy-line); color: #fff; }
[data-cz-skin="bold"] .cz-sidebar .cz-brand { color: #fff; }
[data-cz-skin="bold"] .cz-sidebar .cz-nav__item { color: var(--cz-nav-ink); }
[data-cz-skin="bold"] .cz-sidebar .cz-nav__item > .bi { color: var(--cz-nav-ink); }
[data-cz-skin="bold"] .cz-sidebar .cz-nav__item:hover { background: rgba(255, 255, 255, .07); }
[data-cz-skin="bold"] .cz-sidebar .cz-nav__group[open] > summary { color: #fff; }
[data-cz-skin="bold"] .cz-sidebar .cz-nav__sub .cz-nav__item { color: var(--cz-nav-ink); }
[data-cz-skin="bold"] .cz-sidebar .cz-nav__item[aria-current="page"] { background: var(--cz-accent); color: #fff; }
[data-cz-skin="bold"] .cz-sidebar .cz-nav__item[aria-current="page"] > .bi { color: #fff; }
[data-cz-skin="bold"] .cz-sidebar .cz-switcher__label { color: var(--cz-nav-ink); }
[data-cz-skin="bold"] .cz-sidebar .cz-switcher__button { background: rgba(255, 255, 255, .06); border-color: var(--cz-navy-line); color: #fff; }
[data-cz-skin="bold"] .cz-sidebar .cz-sidebar__me { border-top-color: var(--cz-navy-line); color: #fff; }
[data-cz-skin="bold"] .cz-sidebar .cz-sidebar__me:hover { background: rgba(255, 255, 255, .07); }
[data-cz-skin="bold"] .cz-sidebar .cz-sidebar__me .cz-sub { color: var(--cz-nav-ink); }
[data-cz-skin="bold"] .cz-sidebar .cz-menu { color: var(--cz-ink); }
[data-cz-skin="bold"] .cz-sidebar :focus-visible { outline-color: #fff; }

/* ---------- 5. Small shape differences ---------- */
/* Bold's "needs your action" panel is navy with a violet button, as in
   the design; Warm and Classic use their main colour. */
[data-cz-skin="bold"] .cz-hero { background: var(--cz-navy); }
[data-cz-skin="bold"] .cz-hero .cz-btn { background: var(--cz-accent); color: #fff; }

/* ---------- 6. The design picker (Settings -> Appearance, and Appearance
   in the account menu - templates/_design_picker.html) ----------
   Used in every design, so not scoped. Each card shows a tiny preview of
   its design; those preview colours are fixed on purpose (they ARE the
   design being shown, whatever design the page itself is in). */
.cz-skinpick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; border: 0; padding: 0; margin: 0; }
@media (max-width: 767.98px) { .cz-skinpick { grid-template-columns: 1fr; } }
.cz-skinpick__opt { position: relative; min-width: 0; }
.cz-skinpick__opt input { position: absolute; opacity: 0; pointer-events: none; }
.cz-skinpick__card {
  height: 100%; display: flex; flex-direction: column; gap: 10px; padding: 12px; cursor: pointer; margin: 0;
  background: var(--cz-surface); border: 2px solid var(--cz-line); border-radius: var(--cz-radius-lg);
}
.cz-skinpick__opt input:checked + .cz-skinpick__card { border-color: var(--cz-accent); box-shadow: 0 0 0 3px var(--cz-accent-soft); }
.cz-skinpick__opt input:focus-visible + .cz-skinpick__card { outline: 3px solid var(--cz-accent); outline-offset: 2px; }
.cz-skinpick__name { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-weight: 700; }
.cz-skinpick__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cz-skinpick__desc { font-size: var(--cz-text-sm); color: var(--cz-muted); line-height: 1.4; }
.cz-skinpick__radio { width: 18px; height: 18px; flex-shrink: 0; border-radius: 50%; border: 2px solid var(--cz-line); display: grid; place-items: center; }
.cz-skinpick__opt input:checked + .cz-skinpick__card .cz-skinpick__radio { border-color: var(--cz-accent); }
.cz-skinpick__opt input:checked + .cz-skinpick__card .cz-skinpick__radio::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--cz-accent); }
@media (max-width: 767.98px) {
  .cz-skinpick__card { flex-direction: row; align-items: center; }
  .cz-skinprev { width: 112px; height: 76px; flex-shrink: 0; }
}
/* "Use my company's design" row on the personal page */
.cz-skinpick__follow .cz-skinpick__card { flex-direction: row; align-items: center; gap: 12px; padding: 14px 16px; }

.cz-skinprev { height: 100px; display: flex; overflow: hidden; border-radius: 10px; border: 1px solid var(--p-line); background: var(--p-bg); }
.cz-skinprev__side { width: 30%; padding: 8px 6px; display: flex; flex-direction: column; gap: 5px; background: var(--p-side); border-right: 1px solid var(--p-line); }
.cz-skinprev__side i { display: block; height: 6px; border-radius: var(--p-nav-r); background: var(--p-side-line); }
.cz-skinprev__side i.is-on { height: 9px; background: var(--p-on); }
.cz-skinprev__main { flex: 1; padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; }
.cz-skinprev__aa { font-family: var(--p-head); font-weight: 700; font-size: 22px; line-height: 1; color: var(--p-ink); }
.cz-skinprev__line { height: 5px; border-radius: 3px; background: var(--p-line); }
.cz-skinprev__btn { margin-top: auto; align-self: flex-start; padding: 3px 9px; border-radius: 8px; background: var(--p-accent); color: #fff; font-size: 9px; font-weight: 600; font-family: var(--p-body); }
.cz-skinprev--classic { --p-bg: #F6F7F9; --p-side: #FFFFFF; --p-side-line: #E4E7EC; --p-line: #E4E7EC; --p-on: #E7F1FF; --p-accent: #0D6EFD; --p-ink: #101828; --p-nav-r: 4px;
  --p-head: 'Plus Jakarta Sans', sans-serif; --p-body: 'Plus Jakarta Sans', sans-serif; }
.cz-skinprev--warm { --p-bg: #FAF7F2; --p-side: #FFFFFF; --p-side-line: #EAE3D8; --p-line: #EAE3D8; --p-on: #1F1B16; --p-accent: #1F6F66; --p-ink: #1F1B16; --p-nav-r: 999px;
  --p-head: 'Fraunces', Georgia, serif; --p-body: 'DM Sans', sans-serif; }
.cz-skinprev--bold { --p-bg: #F4F5FB; --p-side: #0E1330; --p-side-line: #232A52; --p-line: #E3E5F0; --p-on: #5B3DF5; --p-accent: #5B3DF5; --p-ink: #0E1330; --p-nav-r: 4px;
  --p-head: 'Space Grotesk', sans-serif; --p-body: 'IBM Plex Sans', sans-serif; }

/* ---------- Multi-lingual Compazable: Marathi letters (2026-10-05) ----------
   None of the three designs' fonts (Plus Jakarta Sans, DM Sans, Fraunces,
   IBM Plex Sans, Space Grotesk) has Devanagari letters, which Marathi (and
   later Hindi) is written in. So every design's font list carries Marathi-
   capable fonts right after its own: the browser draws English letters in
   the design's font as before and, letter by letter, Devanagari in the
   first font below that has them. English screens look exactly the same.
     Noto Sans Devanagari   self-hosted by Compazable (static/vendor/
                            noto-sans-devanagari/), so it's used everywhere
     Kohinoor Devanagari    Mac and iPhone
     Nirmala UI, Mangal     Windows
   Same specificity as each design's own block above, and later in the
   file, so these win. */
:root, :root[data-cz-skin="classic"] {
  --cz-font: 'Plus Jakarta Sans', 'Noto Sans Devanagari', 'Kohinoor Devanagari', 'Nirmala UI', 'Mangal', 'Segoe UI', system-ui, -apple-system, sans-serif;
}
:root[data-cz-skin="warm"] {
  --cz-font: 'DM Sans', 'Noto Sans Devanagari', 'Kohinoor Devanagari', 'Nirmala UI', 'Mangal', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --cz-font-head: 'Fraunces', 'Noto Sans Devanagari', 'Kohinoor Devanagari', 'Nirmala UI', 'Mangal', Georgia, 'Times New Roman', serif;
}
:root[data-cz-skin="bold"] {
  --cz-font: 'IBM Plex Sans', 'Noto Sans Devanagari', 'Kohinoor Devanagari', 'Nirmala UI', 'Mangal', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --cz-font-head: 'Space Grotesk', 'Noto Sans Devanagari', 'Kohinoor Devanagari', 'Nirmala UI', 'Mangal', 'Segoe UI', system-ui, sans-serif;
}
/* Devanagari sits taller than Latin letters (the line above the letters,
   and vowel signs above and below), so Marathi text gets a little more
   line height to stop lines touching. */
:root[lang="mr"] body { line-height: 1.6; }

/* The account menu's Language row: the link, with the one-click
   EN | मराठी switch beside it (approved mock-up screen 3). */
.cz-langrow { display: flex; align-items: center; gap: 6px; }
.cz-langrow > a { flex: 1; min-width: 0; }
.cz-langswitch { display: inline-flex; flex: none; border: 1px solid var(--cz-line); border-radius: 999px; overflow: hidden; margin-right: 6px; }
.cz-langswitch button { border: 0; background: var(--cz-surface); color: var(--cz-muted); font: inherit; font-size: 12px; font-weight: 600; padding: 2px 9px; cursor: pointer; line-height: 1.6; }
.cz-langswitch button[aria-pressed="true"] { background: var(--cz-accent); color: #fff; cursor: default; opacity: 1; }
.cz-langswitch button:focus-visible { outline: 2px solid var(--cz-accent); outline-offset: -2px; }
/* The Language picker shows each language's own name large. */
.cz-langpick__native { font-size: 1.15rem; font-weight: 700; }
/* The sign-in pages' English | मराठी link (approved mock-up screen 4). */
.cz-signin-lang { text-align: center; font-size: .85rem; color: var(--cz-muted); margin-top: .75rem; }
.cz-signin-lang a { font-weight: 600; }
.cz-signin-lang [aria-current="true"] { color: var(--cz-ink); font-weight: 700; }