/*
 * Theme & Branding — runtime stylesheet.
 *
 * Inert until an organization publishes a theme: every rule is scoped to an
 * element carrying [data-tb] (the <html> element of the app, or the live
 * preview container on the Theme & Branding screen).
 *
 * Layers
 *   --app-*  raw values from the published config (rendered server-side in
 *            index.blade.php, or inline on the preview container)
 *   --tb-*   effective tokens components use; they equal --app-* in light
 *            mode and switch to a dark palette in dark / system-dark mode
 *   --hr-*   the application's existing variables, re-pointed at the theme
 *            so older screens that already use them follow it too
 */

/* ── 0. Self-hosted font families (declarations only: nothing downloads until used) ──
   Latin: Fontsource builds (OFL) in css/fonts/tb/; Poppins and Kalimati ship in /fonts/. */
@font-face { font-family: "tb-inter"; src: url("fonts/tb/inter-latin-300-normal.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "tb-inter"; src: url("fonts/tb/inter-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "tb-inter"; src: url("fonts/tb/inter-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "tb-inter"; src: url("fonts/tb/inter-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "tb-inter"; src: url("fonts/tb/inter-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "tb-open-sans"; src: url("fonts/tb/open-sans-latin-300-normal.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "tb-open-sans"; src: url("fonts/tb/open-sans-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "tb-open-sans"; src: url("fonts/tb/open-sans-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "tb-open-sans"; src: url("fonts/tb/open-sans-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "tb-open-sans"; src: url("fonts/tb/open-sans-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "tb-noto-sans"; src: url("fonts/tb/noto-sans-latin-300-normal.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "tb-noto-sans"; src: url("fonts/tb/noto-sans-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "tb-noto-sans"; src: url("fonts/tb/noto-sans-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "tb-noto-sans"; src: url("fonts/tb/noto-sans-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "tb-noto-sans"; src: url("fonts/tb/noto-sans-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "tb-poppins"; src: url("../fonts/poppins-light-webfont.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "tb-poppins"; src: url("../fonts/poppins-regular-webfont.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "tb-poppins"; src: url("../fonts/poppins-medium-webfont.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "tb-poppins"; src: url("../fonts/poppins-semibold-webfont.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "tb-poppins"; src: url("../fonts/poppins-bold-webfont.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "tb-dev-noto"; src: url("fonts/tb/noto-sans-devanagari-devanagari-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF; }
@font-face { font-family: "tb-dev-noto"; src: url("fonts/tb/noto-sans-devanagari-devanagari-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF; }
@font-face { font-family: "tb-dev-noto"; src: url("fonts/tb/noto-sans-devanagari-devanagari-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF; }
@font-face { font-family: "tb-dev-noto"; src: url("fonts/tb/noto-sans-devanagari-devanagari-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF; }
@font-face { font-family: "tb-dev-mukta"; src: url("fonts/tb/mukta-devanagari-300-normal.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF; }
@font-face { font-family: "tb-dev-mukta"; src: url("fonts/tb/mukta-devanagari-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF; }
@font-face { font-family: "tb-dev-mukta"; src: url("fonts/tb/mukta-devanagari-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF; }
@font-face { font-family: "tb-dev-mukta"; src: url("fonts/tb/mukta-devanagari-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF; }
@font-face { font-family: "tb-dev-mukta"; src: url("fonts/tb/mukta-devanagari-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF; }
@font-face { font-family: "tb-dev-kalimati"; src: url("../fonts/Kalimati-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF; }

/* ── 1. Effective tokens ─────────────────────────────────────────────── */
/* :root[data-tb]: style.css (injected by the app bundle after this sheet) declares the legacy
   --hr-* variables on :root; the extra weight lets the theme values below win. */
:root[data-tb], [data-tb] {
  --tb-primary: var(--app-primary);
  --tb-primary-dark: color-mix(in srgb, var(--app-primary) 78%, #000);
  --tb-primary-soft: color-mix(in srgb, var(--app-primary) 12%, transparent);
  --tb-secondary: var(--app-secondary);
  --tb-accent: var(--app-accent);
  --tb-background: var(--app-background);
  --tb-text: var(--app-text);
  --tb-muted-text: var(--app-muted-text);
  --tb-sidebar-bg: var(--app-sidebar-bg);
  --tb-sidebar-text: var(--app-sidebar-text);
  --tb-sidebar-active-bg: var(--app-sidebar-active-bg);
  --tb-sidebar-active-text: var(--app-sidebar-active-text);
  --tb-sidebar-hover: var(--app-sidebar-hover);
  --tb-header-bg: var(--app-header-bg);
  --tb-header-text: var(--app-header-text);
  --tb-topmenu-bg: var(--app-topmenu-bg);
  --tb-topmenu-text: var(--app-topmenu-text);
  --tb-button-bg: var(--app-button-bg);
  --tb-button-bg-hover: var(--app-button-hover-bg, color-mix(in srgb, var(--app-button-bg) 85%, #000));
  --tb-button-text: var(--app-button-text);
  --tb-link: var(--app-link);
  --tb-card-bg: var(--app-card-bg);
  --tb-border: var(--app-border);
  --tb-input-bg: var(--app-input-bg);
  --tb-input-border: var(--app-input-border);
  --tb-table-header-bg: var(--app-table-header-bg);
  --tb-table-header-text: var(--app-table-header-text);
  --tb-table-row-alt: var(--app-table-row-alt);
  --tb-success: var(--app-success);
  --tb-warning: var(--app-warning);
  --tb-danger: var(--app-danger);
  --tb-info: var(--app-info);
  --tb-focus: var(--app-focus-ring, var(--app-primary));
  --tb-focus-ring: color-mix(in srgb, var(--tb-focus) 30%, transparent);
  --tb-sb-w: var(--app-sidebar-width);

  /* Existing application variables follow the theme. */
  --hr-brand-color: var(--tb-primary);
  --hr-brand-dark-color: var(--tb-primary-dark);
  --hr-brand-light-color: var(--tb-accent);
  --hr-surface-color: var(--tb-accent);
  --hr-hover-color: var(--tb-primary-dark);
  --hr-light-trans-color: var(--tb-sidebar-active-bg);
  --main-btn-color: var(--tb-button-bg);
  --main-btn-hover: var(--tb-button-bg-hover);
  --btn-primary: var(--tb-button-bg);
  --btn-primary-hover: var(--tb-button-bg-hover);
  --btn-success: var(--tb-success);
  --btn-warning: var(--tb-warning);
  --btn-danger: var(--tb-danger);
}

/* Dark palette: brand colours stay, neutral surfaces flip. */
[data-tb][data-tb-mode="dark"][data-tb-dark-style="native"] {
  --tb-background: #0f172a;
  --tb-text: #e2e8f0;
  --tb-muted-text: #94a3b8;
  --tb-sidebar-bg: #111827;
  --tb-sidebar-text: #cbd5e1;
  --tb-sidebar-hover: #1f2937;
  --tb-sidebar-active-bg: color-mix(in srgb, var(--app-primary) 35%, #111827);
  --tb-sidebar-active-text: #ffffff;
  --tb-topmenu-bg: #111827;
  --tb-topmenu-text: #e2e8f0;
  --tb-card-bg: #1e293b;
  --tb-border: #334155;
  --tb-input-bg: #0f172a;
  --tb-input-border: #475569;
  --tb-table-header-bg: #1e293b;
  --tb-table-header-text: #cbd5e1;
  --tb-table-row-alt: #172033;
  --tb-link: color-mix(in srgb, var(--app-link) 65%, #fff);
  /* Row colours are usually light: blended into the dark surface so the light text stays readable. */
  --tb-table-row-hover-bg: color-mix(in srgb, var(--app-table-row-hover-bg, var(--app-primary)) 18%, #1e293b);
  --tb-table-row-selected-bg: color-mix(in srgb, var(--app-table-row-selected-bg, var(--app-primary)) 28%, #1e293b);
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  [data-tb][data-tb-mode="system"][data-tb-dark-style="native"] {
    --tb-background: #0f172a;
    --tb-text: #e2e8f0;
    --tb-muted-text: #94a3b8;
    --tb-sidebar-bg: #111827;
    --tb-sidebar-text: #cbd5e1;
    --tb-sidebar-hover: #1f2937;
    --tb-sidebar-active-bg: color-mix(in srgb, var(--app-primary) 35%, #111827);
    --tb-sidebar-active-text: #ffffff;
    --tb-topmenu-bg: #111827;
    --tb-topmenu-text: #e2e8f0;
    --tb-card-bg: #1e293b;
    --tb-border: #334155;
    --tb-input-bg: #0f172a;
    --tb-input-border: #475569;
    --tb-table-header-bg: #1e293b;
    --tb-table-header-text: #cbd5e1;
    --tb-table-row-alt: #172033;
    --tb-link: color-mix(in srgb, var(--app-link) 65%, #fff);
  /* Row colours are usually light: blended into the dark surface so the light text stays readable. */
  --tb-table-row-hover-bg: color-mix(in srgb, var(--app-table-row-hover-bg, var(--app-primary)) 18%, #1e293b);
  --tb-table-row-selected-bg: color-mix(in srgb, var(--app-table-row-selected-bg, var(--app-primary)) 28%, #1e293b);
    color-scheme: dark;
  }
}

/* ── 1b. Component tokens (Theme & Branding → Menu, Buttons, Popups, Sections, Tabs, Tables)
   --app-<token> is an administrator's override, or 'initial' when the token follows
   the preset; then the fallback below derives it from the general colours. Because
   the fallbacks use --tb-* tokens, they also follow the native dark palette.
   Keep the fallbacks in step with themeEngine.js resolveComponents(). */
[data-tb] {
  /* Menus (background/text/hover/active are the colours.sidebar_* tokens) */
  --tb-menu-icon: var(--app-menu-icon, currentColor);
  --tb-menu-indicator: var(--app-menu-active-indicator, var(--tb-primary));
  --tb-submenu-bg: var(--app-submenu-bg, color-mix(in srgb, var(--tb-sidebar-bg) 94%, #000));
  --tb-submenu-text: var(--app-submenu-text, var(--tb-sidebar-text));
  /* Buttons (primary background/text are colours.button_*) */
  --tb-button-text-hover: var(--app-button-hover-text, var(--tb-button-text));
  --tb-button-secondary-bg: var(--app-button-secondary-bg, var(--tb-secondary));
  --tb-button-secondary-text: var(--app-button-secondary-text, #ffffff);
  --tb-button-outline: var(--app-button-outline, var(--tb-primary));
  --tb-button-disabled-bg: var(--app-button-disabled-bg, color-mix(in srgb, var(--tb-border) 70%, var(--tb-card-bg)));
  --tb-button-disabled-text: var(--app-button-disabled-text, var(--tb-muted-text));
  /* Popups: modals, dialogs, dropdowns, popovers */
  --tb-popup-bg: var(--app-popup-bg, var(--tb-card-bg));
  --tb-popup-text: var(--app-popup-text, var(--tb-text));
  --tb-popup-header-bg: var(--app-popup-header-bg, color-mix(in srgb, var(--tb-primary) 10%, var(--tb-popup-bg)));
  --tb-popup-header-text: var(--app-popup-header-text, var(--tb-popup-text));
  --tb-popup-border: var(--app-popup-border, var(--tb-border));
  --tb-popup-overlay: var(--app-popup-overlay, rgba(0, 0, 0, .5));
  /* Sections and cards */
  --tb-section-bg: var(--app-section-bg, var(--tb-card-bg));
  --tb-section-header-bg: var(--app-section-header-bg, color-mix(in srgb, var(--tb-primary) 4%, var(--tb-section-bg)));
  --tb-section-header-text: var(--app-section-header-text, var(--tb-text));
  --tb-section-border: var(--app-section-border, var(--tb-border));
  /* Tabs: filled tabs use active bg/text; underline tabs (Bootstrap nav-tabs) use the active border colour */
  --tb-tab-bg: var(--app-tab-bg, var(--tb-section-bg));
  --tb-tab-text: var(--app-tab-text, var(--tb-text));
  --tb-tab-hover-bg: var(--app-tab-hover-bg, var(--tb-tab-bg));
  --tb-tab-hover-text: var(--app-tab-hover-text, var(--tb-primary));
  --tb-tab-active-bg: var(--app-tab-active-bg, var(--tb-primary));
  --tb-tab-active-text: var(--app-tab-active-text, #ffffff);
  --tb-tab-active-border: var(--app-tab-active-border, var(--tb-tab-active-bg));
  /* Tables (header colours and striped row are colours.table_*) */
  --tb-table-body-bg: var(--app-table-body-bg, transparent);
  --tb-table-body-text: var(--app-table-body-text, var(--tb-text));
  --tb-table-row-hover-bg: var(--app-table-row-hover-bg, color-mix(in srgb, var(--tb-primary) 12%, transparent));
  --tb-table-row-hover-text: var(--app-table-row-hover-text, var(--tb-table-body-text));
  --tb-table-row-selected-bg: var(--app-table-row-selected-bg, color-mix(in srgb, var(--tb-primary) 22%, transparent));
  --tb-table-border: var(--app-table-border, var(--tb-border));
  --tb-table-font: var(--app-table-font, var(--app-font-family));
  --tb-table-line-height: var(--app-table-line-height, 1.45);
}

/* Adaptive dark (default dark style): the whole signed-in app (html.tb-app,
   set by layouts/index.js) is colour-inverted with hue kept, so every screen
   turns dark, including ones with hard-coded or inline light colours.
   Photos, video, canvases (charts) and embedded frames are flipped back.
   A filter on the root element keeps position: fixed working. The login
   page has its own light/dark switch and is not affected. */
html.tb-app[data-tb-mode="dark"][data-tb-dark-style="adaptive"] { filter: invert(.92) hue-rotate(180deg); background: #fff; }
@media (prefers-color-scheme: dark) {
  html.tb-app[data-tb-mode="system"][data-tb-dark-style="adaptive"] { filter: invert(.92) hue-rotate(180deg); background: #fff; }
}
html.tb-app[data-tb-mode="dark"][data-tb-dark-style="adaptive"] :is(img, video, canvas, iframe, embed, object),
html.tb-app[data-tb-mode="dark"][data-tb-dark-style="adaptive"] [style*="background-image"]:not(:has(img)) { filter: invert(1) hue-rotate(180deg); }
@media (prefers-color-scheme: dark) {
  html.tb-app[data-tb-mode="system"][data-tb-dark-style="adaptive"] :is(img, video, canvas, iframe, embed, object),
  html.tb-app[data-tb-mode="system"][data-tb-dark-style="adaptive"] [style*="background-image"]:not(:has(img)) { filter: invert(1) hue-rotate(180deg); }
}
/* The header and bottom bar keep their real brand colours (flipped back as a whole; their images then need no extra flip). */
html.tb-app[data-tb-mode="dark"][data-tb-dark-style="adaptive"] :is(.app-header, .app-footer) { filter: invert(1) hue-rotate(180deg); }
html.tb-app[data-tb-mode="dark"][data-tb-dark-style="adaptive"] :is(.app-header, .app-footer) :is(img, video, canvas) { filter: none; }
@media (prefers-color-scheme: dark) {
  html.tb-app[data-tb-mode="system"][data-tb-dark-style="adaptive"] :is(.app-header, .app-footer) { filter: invert(1) hue-rotate(180deg); }
  html.tb-app[data-tb-mode="system"][data-tb-dark-style="adaptive"] :is(.app-header, .app-footer) :is(img, video, canvas) { filter: none; }
}
/* Dark overlays behind dialogs would invert to light: make them white so they come out dark. */
html.tb-app[data-tb-mode="dark"][data-tb-dark-style="adaptive"] .modal-backdrop { background-color: #fff; }
html.tb-app[data-tb-mode="dark"][data-tb-dark-style="adaptive"] .swal2-container.swal2-backdrop-show { background: rgba(255, 255, 255, .45) !important; }
@media (prefers-color-scheme: dark) {
  html.tb-app[data-tb-mode="system"][data-tb-dark-style="adaptive"] .modal-backdrop { background-color: #fff; }
  html.tb-app[data-tb-mode="system"][data-tb-dark-style="adaptive"] .swal2-container.swal2-backdrop-show { background: rgba(255, 255, 255, .45) !important; }
}
/* Theme & Branding preview: shows the draft's dark style whatever the page around it uses. */
.tbe-pv-frame[data-tb-mode="dark"][data-tb-dark-style="adaptive"] { filter: invert(.92) hue-rotate(180deg); }
html.tb-app[data-tb-mode="dark"][data-tb-dark-style="adaptive"] .tbe-pv-frame { filter: invert(.92) hue-rotate(180deg); }
html.tb-app[data-tb-mode="dark"][data-tb-dark-style="adaptive"] .tbe-pv-frame[data-tb-mode="dark"][data-tb-dark-style="adaptive"] { filter: none; }
.tbe-pv-frame[data-tb-mode="dark"][data-tb-dark-style="adaptive"] :is(.pv-header, .pv-footer) { filter: invert(1) hue-rotate(180deg); }


/* ── 2. Base typography & surfaces ───────────────────────────────────── */
html[data-tb] body {
  background-color: var(--tb-background);
  color: var(--tb-text);
  font-family: var(--app-font-family);
  font-size: var(--app-font-size);
  font-weight: var(--app-font-weight);
  line-height: var(--app-line-height);
}

[data-tb] .form-control,
[data-tb] .btn,
[data-tb] .table,
[data-tb] label,
[data-tb] .nav-link,
[data-tb] .dropdown-item,
[data-tb] .card,
[data-tb] .modal-content,
[data-tb] .breadcrumb,
[data-tb] input,
[data-tb] select,
[data-tb] textarea,
[data-tb] button,
[data-tb] h1, [data-tb] h2, [data-tb] h3,
[data-tb] h4, [data-tb] h5, [data-tb] h6 {
  font-family: var(--app-font-family);
}

[data-tb] .main h1, [data-tb] .tb-scope h1 { font-size: var(--app-h1-size); font-weight: var(--app-heading-weight); }
[data-tb] .main h2, [data-tb] .tb-scope h2 { font-size: var(--app-h2-size); font-weight: var(--app-heading-weight); }
[data-tb] .main h3, [data-tb] .tb-scope h3 { font-size: var(--app-h3-size); font-weight: var(--app-heading-weight); }

[data-tb] label { font-size: var(--app-label-size); }

/* Plain links take the theme link colour. The selector weighs two element
   names (html, a; the :where() parts add nothing): enough to beat the bare
   `a` rules of Bootstrap and the bundled style.css, while any screen's own
   link colour (a class rule), such as white links on coloured cards, headers
   and badges, still wins. Hover keeps style.css's --hr-hover-color, which
   the theme maps to its darker primary. */
html :where([data-tb] .main) a:where(:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link)),
html :where([data-tb] .tb-scope, .tb-scope[data-tb]) a:where(:not(.btn):not(.nav-link):not(.dropdown-item)) {
  color: var(--tb-link);
}

[data-tb] .text-primary { color: var(--tb-primary) !important; }
[data-tb] .bg-primary, [data-tb] .badge-primary { background-color: var(--tb-primary) !important; }
[data-tb] .text-muted { color: var(--tb-muted-text) !important; }

/* ── 3. Buttons ──────────────────────────────────────────────────────────
   Primary = colours.button_*; hover, secondary, outline and disabled are
   component tokens. Status buttons (success / warning / danger / info) keep
   their status colour in every theme, so Delete always looks destructive.
   !important is used only where a legacy rule already uses it (noted). */
[data-tb] .btn { font-size: var(--app-button-size); }
[data-tb] .btn-sm { font-size: calc(var(--app-button-size) - 2px); }

[data-tb] .btn-primary {
  background-color: var(--tb-button-bg);
  border-color: var(--tb-button-bg);
  color: var(--tb-button-text);
}
[data-tb] .btn-primary:hover,
[data-tb] .btn-primary:not(:disabled):not(.disabled):active,
[data-tb] .btn-primary:not(:disabled):not(.disabled).active {
  background-color: var(--tb-button-bg-hover);
  border-color: var(--tb-button-bg-hover);
  color: var(--tb-button-text-hover);
}
[data-tb] .btn-primary:focus { background-color: var(--tb-button-bg); border-color: var(--tb-button-bg); color: var(--tb-button-text); }
[data-tb] .btn-primary:focus:hover { background-color: var(--tb-button-bg-hover); color: var(--tb-button-text-hover); }

[data-tb] .btn-outline-primary { color: var(--tb-button-outline); border-color: var(--tb-button-outline); background-color: transparent; }
[data-tb] .btn-outline-primary:hover,
[data-tb] .btn-outline-primary:not(:disabled):not(.disabled):active { background-color: var(--tb-button-outline); border-color: var(--tb-button-outline); color: var(--tb-button-text); }

[data-tb] .btn-secondary:not([class*="btn-outline"]) { background-color: var(--tb-button-secondary-bg); border-color: var(--tb-button-secondary-bg); color: var(--tb-button-secondary-text); }
[data-tb] .btn-secondary:not([class*="btn-outline"]):hover,
[data-tb] .btn-secondary:not([class*="btn-outline"]):not(:disabled):not(.disabled):active { background-color: color-mix(in srgb, var(--tb-button-secondary-bg) 85%, #000); border-color: color-mix(in srgb, var(--tb-button-secondary-bg) 85%, #000); color: var(--tb-button-secondary-text); }
[data-tb] .btn-outline-secondary { color: var(--tb-button-secondary-bg); border-color: var(--tb-button-secondary-bg); }
[data-tb] .btn-outline-secondary:hover { background-color: var(--tb-button-secondary-bg); color: var(--tb-button-secondary-text); }

/* Neutral buttons (Cancel, Close, Reset in many screens). */
[data-tb] :is(.btn-light, .btn-default):not([class*="btn-outline"]) { background-color: color-mix(in srgb, var(--tb-border) 45%, var(--tb-card-bg)); border-color: var(--tb-border); color: var(--tb-text); }
[data-tb] :is(.btn-light, .btn-default):not([class*="btn-outline"]):hover { background-color: color-mix(in srgb, var(--tb-border) 80%, var(--tb-card-bg)); color: var(--tb-text); }

[data-tb] .btn-link { color: var(--tb-link); }
[data-tb] .btn-link:hover { color: var(--tb-primary-dark); }

/* Status buttons: their own colour, a darker shade of it on hover (the legacy
   `.btn-info:hover { … --main-btn-hover !important }` turned Search/View blue-black). */
[data-tb] .btn-success:not([class*="btn-outline"]) { background-color: var(--tb-success); border-color: var(--tb-success); color: #fff; }
[data-tb] .btn-danger:not([class*="btn-outline"]) { background-color: var(--tb-danger); border-color: var(--tb-danger); color: #fff; }
[data-tb] .btn-warning:not([class*="btn-outline"]) { background-color: var(--tb-warning); border-color: var(--tb-warning); color: #fff; }
[data-tb] .btn-info:not([class*="btn-outline"]) { background-color: var(--tb-info); border-color: var(--tb-info); color: #fff; }
[data-tb] .btn-success:not([class*="btn-outline"]):hover { background-color: color-mix(in srgb, var(--tb-success) 85%, #000); border-color: color-mix(in srgb, var(--tb-success) 85%, #000); }
[data-tb] .btn-danger:not([class*="btn-outline"]):hover { background-color: color-mix(in srgb, var(--tb-danger) 85%, #000); border-color: color-mix(in srgb, var(--tb-danger) 85%, #000); }
[data-tb] .btn-warning:not([class*="btn-outline"]):hover { background-color: color-mix(in srgb, var(--tb-warning) 85%, #000); border-color: color-mix(in srgb, var(--tb-warning) 85%, #000); }
[data-tb] .btn-info:not([class*="btn-outline"]):not(:disabled):not(.disabled):hover { background-color: color-mix(in srgb, var(--tb-info) 85%, #000) !important; border-color: color-mix(in srgb, var(--tb-info) 85%, #000); }
[data-tb] .btn-outline-danger { color: var(--tb-danger); border-color: var(--tb-danger); }
[data-tb] .btn-outline-danger:hover { background-color: var(--tb-danger); color: #fff; }
[data-tb] .btn-outline-success { color: var(--tb-success); border-color: var(--tb-success); }
[data-tb] .btn-outline-success:hover { background-color: var(--tb-success); color: #fff; }

/* Pressed */
[data-tb] .btn:not(:disabled):not(.disabled):active { box-shadow: inset 0 2px 4px rgba(15, 23, 42, .22); }
/* Keyboard focus: a visible outline (the legacy `.btn:focus { outline: none !important }` removed it). */
[data-tb] .btn:focus-visible { outline: 2px solid var(--tb-focus) !important; outline-offset: 2px; box-shadow: 0 0 0 .2rem var(--tb-focus-ring); }
/* Disabled: muted surface and text, still readable, no hover lift. Outline and link buttons stay transparent. */
[data-tb] .btn:is(:disabled, .disabled):not([class*="btn-outline"]):not(.btn-link) {
  background-color: var(--tb-button-disabled-bg);
  border-color: var(--tb-button-disabled-bg);
  color: var(--tb-button-disabled-text);
  opacity: 1;
  box-shadow: none;
  cursor: not-allowed;
}
[data-tb] .btn:is(:disabled, .disabled):is([class*="btn-outline"], .btn-link) { color: var(--tb-button-disabled-text); border-color: var(--tb-button-disabled-bg); opacity: 1; cursor: not-allowed; }
/* Loading: a button showing a spinner keeps its colours; the spinner follows the text colour (section 12). */
[data-tb] .btn[aria-busy="true"] { cursor: progress; }

/* Row actions in react-table lists (custom.css draws them in fixed blue / red). */
[data-tb] .ReactTable .rt-tbody .rt-td .btnEdit { color: var(--tb-primary); border-color: var(--tb-primary); }
[data-tb] .ReactTable .rt-tbody .rt-td .btnEdit:hover { background: var(--tb-primary); color: var(--tb-button-text); }
[data-tb] .ReactTable .rt-tbody .rt-td .btnDelete { color: var(--tb-danger); border-color: var(--tb-danger); }
[data-tb] .ReactTable .rt-tbody .rt-td .btnDelete:hover { background: var(--tb-danger); color: #fff; }

[data-tb] .badge-success { background-color: var(--tb-success); }
[data-tb] .badge-danger { background-color: var(--tb-danger); }
[data-tb] .badge-warning { background-color: var(--tb-warning); color: #fff; }
[data-tb] .badge-info { background-color: var(--tb-info); }

[data-tb] .alert-success { background: color-mix(in srgb, var(--tb-success) 12%, var(--tb-card-bg)); border-color: color-mix(in srgb, var(--tb-success) 35%, transparent); color: color-mix(in srgb, var(--tb-success) 70%, var(--tb-text)); }
[data-tb] .alert-danger { background: color-mix(in srgb, var(--tb-danger) 12%, var(--tb-card-bg)); border-color: color-mix(in srgb, var(--tb-danger) 35%, transparent); color: color-mix(in srgb, var(--tb-danger) 70%, var(--tb-text)); }
[data-tb] .alert-warning { background: color-mix(in srgb, var(--tb-warning) 12%, var(--tb-card-bg)); border-color: color-mix(in srgb, var(--tb-warning) 35%, transparent); color: color-mix(in srgb, var(--tb-warning) 60%, var(--tb-text)); }
[data-tb] .alert-info { background: color-mix(in srgb, var(--tb-info) 12%, var(--tb-card-bg)); border-color: color-mix(in srgb, var(--tb-info) 35%, transparent); color: color-mix(in srgb, var(--tb-info) 70%, var(--tb-text)); }

/* ── 4. Popups: modals, dialogs, dropdowns, popovers, tooltips ────────────
   Portals (reactstrap modals, SweetAlert, select menus, the sidebar flyout)
   mount under <body>, which sits inside html[data-tb], so they get the theme. */
[data-tb] .modal-content {
  background-color: var(--tb-popup-bg);
  border-color: var(--tb-popup-border);
  color: var(--tb-popup-text);
  box-shadow: 0 18px 48px rgba(15, 23, 42, .22);
}
/* custom.css: `.modal-header { background: var(--hr-light-trans-color) !important }` */
[data-tb] .modal-header { background: var(--tb-popup-header-bg) !important; color: var(--tb-popup-header-text); border-color: var(--tb-popup-border); }
[data-tb] .modal-header :is(.modal-title, h1, h2, h3, h4, h5, h6) { color: var(--tb-popup-header-text); }
[data-tb] .modal-header .close { color: var(--tb-popup-header-text); text-shadow: none; opacity: .7; }
[data-tb] .modal-header .close:hover { opacity: 1; }
[data-tb] .modal-header .close:focus-visible { outline: 2px solid var(--tb-focus); opacity: 1; }
[data-tb] .modal-body { color: var(--tb-popup-text); }
[data-tb] .modal-footer { border-color: var(--tb-popup-border); background-color: var(--tb-popup-bg); }
/* Colour and strength separately: adaptive dark swaps the colour to white (section 1) and keeps the strength. */
[data-tb] .modal-backdrop { background-color: var(--app-popup-overlay-color, #000); }
[data-tb] .modal-backdrop.show { opacity: var(--app-popup-overlay-opacity, .5); }

/* Dropdown menus (also inside modals: z-index above the dialog). */
[data-tb] .dropdown-menu { background-color: var(--tb-popup-bg); border-color: var(--tb-popup-border); color: var(--tb-popup-text); }
[data-tb] .modal .dropdown-menu { z-index: 1060; }
[data-tb] .dropdown-item { color: var(--tb-popup-text); }
[data-tb] .dropdown-item:hover, [data-tb] .dropdown-item:focus { background-color: var(--tb-primary-soft); color: var(--tb-popup-text); }
[data-tb] .dropdown-item.active, [data-tb] .dropdown-item:active { background-color: var(--tb-primary); color: var(--tb-button-text); }
[data-tb] .dropdown-divider { border-color: var(--tb-popup-border); }

/* Searchable selects: react-select (classNamePrefix ml-rs), select2, multiselect-react-dropdown. */
[data-tb] .ml-rs__menu { background-color: var(--tb-popup-bg); border: 1px solid var(--tb-popup-border); color: var(--tb-popup-text); z-index: 1065; }
[data-tb] .ml-rs__option--is-focused { background-color: var(--tb-primary-soft); color: var(--tb-popup-text); }
[data-tb] .ml-rs__option--is-selected { background-color: var(--tb-primary); color: var(--tb-button-text); }
[data-tb] .select2-dropdown { background-color: var(--tb-popup-bg); border-color: var(--tb-popup-border); color: var(--tb-popup-text); }
[data-tb] .select2-container--open .select2-dropdown { z-index: 1065; }
[data-tb] .select2-results__option--highlighted[aria-selected],
[data-tb] .select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: var(--tb-primary); color: var(--tb-button-text); }
[data-tb] .select2-container--default .select2-results__option[aria-selected="true"] { background-color: var(--tb-primary-soft); color: var(--tb-popup-text); }
[data-tb] .optionListContainer { background-color: var(--tb-popup-bg); border-color: var(--tb-popup-border); z-index: 1065; }
[data-tb] .optionListContainer .option { color: var(--tb-popup-text); }
[data-tb] .optionListContainer .option:hover, [data-tb] .optionListContainer .highlightOption { background-color: var(--tb-primary); color: var(--tb-button-text); }
[data-tb] .multiSelectContainer .chip { background-color: var(--tb-primary); color: var(--tb-button-text); }

/* Popovers and tooltips */
[data-tb] .popover { background-color: var(--tb-popup-bg); border-color: var(--tb-popup-border); color: var(--tb-popup-text); font-family: var(--app-font-family); }
[data-tb] .popover-header { background-color: var(--tb-popup-header-bg); color: var(--tb-popup-header-text); border-bottom-color: var(--tb-popup-border); }
[data-tb] .popover-body { color: var(--tb-popup-text); }
[data-tb] .tooltip { font-family: var(--app-font-family); }
[data-tb] .tooltip-inner { background-color: var(--tb-text); color: var(--tb-card-bg); }
[data-tb] .bs-tooltip-top .arrow::before, [data-tb] .bs-tooltip-auto[x-placement^="top"] .arrow::before { border-top-color: var(--tb-text); }
[data-tb] .bs-tooltip-bottom .arrow::before, [data-tb] .bs-tooltip-auto[x-placement^="bottom"] .arrow::before { border-bottom-color: var(--tb-text); }

/* SweetAlert2 confirmation dialogs. The default confirm colour (#3085d6) is set
   inline by the library, so only that default is replaced; a colour a screen
   chose itself (e.g. red for Delete) is kept. */
[data-tb] .swal2-popup { background: var(--tb-popup-bg); color: var(--tb-popup-text); font-family: var(--app-font-family); border: 1px solid var(--tb-popup-border); }
[data-tb] .swal2-popup :is(.swal2-title, .swal2-content, .swal2-html-container) { color: var(--tb-popup-text); }
[data-tb] .swal2-container.swal2-backdrop-show, [data-tb] .swal2-container.swal2-shown { background: var(--tb-popup-overlay); }
[data-tb] .swal2-popup .swal2-confirm[style*="rgb(48, 133, 214)"] { background-color: var(--tb-button-bg) !important; border-color: var(--tb-button-bg) !important; color: var(--tb-button-text); }
[data-tb] .swal2-popup .swal2-cancel[style*="rgb(170, 170, 170)"] { background-color: var(--tb-button-secondary-bg) !important; border-color: var(--tb-button-secondary-bg) !important; color: var(--tb-button-secondary-text); }
[data-tb] .swal2-popup .swal2-styled:focus-visible { box-shadow: 0 0 0 3px var(--tb-focus-ring); outline: 2px solid var(--tb-focus); }

/* ── 4b. Sections, cards and forms ───────────────────────────────────── */
[data-tb] .card {
  background-color: var(--tb-section-bg);
  border-color: var(--tb-section-border);
  color: var(--tb-text);
}
/* custom.css fixes the card header at #f5faff / #e1ecff and its title at #000 !important. */
[data-tb] .card-header { background-color: var(--tb-section-header-bg); border-color: var(--tb-section-border); color: var(--tb-section-header-text); }
[data-tb] .card-header :is(h1, h2, h3, h4, h5, h6) { color: var(--tb-section-header-text); }
[data-tb] .card-header .card-title { color: var(--tb-section-header-text) !important; background-color: transparent; border-bottom-color: var(--tb-section-border) !important; }
[data-tb] .card-footer { border-color: var(--tb-section-border); background-color: var(--tb-section-header-bg); }
/* Card shape (Sections & cards → Card shape & spacing). Applied only when chosen; with
   "Default" (data-tb-card-* = default) every screen keeps its own radius and shadow. */
[data-tb][data-tb-card-radius]:not([data-tb-card-radius="default"]) .card { border-radius: var(--app-card-radius); }
[data-tb][data-tb-card-radius]:not([data-tb-card-radius="default"]) .card > .card-header:first-child { border-radius: calc(var(--app-card-radius) - 1px) calc(var(--app-card-radius) - 1px) 0 0; }
[data-tb][data-tb-card-radius]:not([data-tb-card-radius="default"]) .card > .card-footer:last-child { border-radius: 0 0 calc(var(--app-card-radius) - 1px) calc(var(--app-card-radius) - 1px); }
[data-tb][data-tb-card-shadow]:not([data-tb-card-shadow="default"]) .card { box-shadow: var(--app-card-shadow); }
[data-tb] fieldset { border-color: var(--tb-section-border); }
[data-tb] legend { color: var(--tb-section-header-text); }
[data-tb] hr { border-top-color: var(--tb-section-border); }
[data-tb] .list-group-item { background-color: var(--tb-section-bg); border-color: var(--tb-section-border); color: var(--tb-text); }

[data-tb] .form-control,
[data-tb] .custom-select {
  background-color: var(--tb-input-bg);
  border-color: var(--tb-input-border);
  color: var(--tb-text);
  font-size: var(--app-input-size);
}
[data-tb] .form-control:focus,
[data-tb] .custom-select:focus {
  border-color: var(--tb-focus);
  box-shadow: 0 0 0 .2rem var(--tb-focus-ring);
}
[data-tb] .form-control::placeholder { color: var(--tb-muted-text); }
[data-tb] .input-group-text { background-color: var(--tb-background); border-color: var(--tb-input-border); color: var(--tb-muted-text); }

/* ── 4c. Tables (Bootstrap .table, react-table, DataTables) ─────────────
   Screen only: print and exports keep the report styles (section 15).
   custom.css forces react-table text to 12px and the striped rows of
   .table to #fff / #f9f9f9 with !important; those few rules need it here. */
@media screen {
  [data-tb] :is(.table, .ReactTable, table.dataTable) {
    color: var(--tb-table-body-text);
    font-family: var(--tb-table-font);
    font-size: var(--app-table-size);
    line-height: var(--tb-table-line-height);
  }
  [data-tb] .table :is(th, td),
  [data-tb] table.dataTable :is(th, td) {
    border-color: var(--tb-table-border);
    padding: var(--app-table-cell-py) var(--app-table-cell-px);
    font-size: var(--app-table-size);
    line-height: var(--tb-table-line-height);
  }
  [data-tb] .table-sm :is(th, td) { padding: calc(var(--app-table-cell-py) * .6) calc(var(--app-table-cell-px) * .6); }
  [data-tb] .ReactTable { border-color: var(--tb-table-border); }
  [data-tb] .ReactTable :is(.rt-th, .rt-td) {
    padding: var(--app-table-cell-py) var(--app-table-cell-px);
    font-size: var(--app-table-size) !important;
    font-family: var(--tb-table-font);
    line-height: var(--tb-table-line-height);
    color: inherit;
    border-color: var(--tb-table-border);
  }
  /* Fixed line-height on striped report lists clipped Nepali vowel marks. */
  /* DataTables lists (.no-footer wrapper): custom.css forces 5px 6px !important and a fixed 14px line height that clipped Nepali vowel marks. */
  [data-tb] .no-footer .table-striped tr td { padding: var(--app-table-cell-py) var(--app-table-cell-px) !important; line-height: var(--tb-table-line-height); }

  /* Header row, including DataTables' cloned headers (scrollX, fixedHeader) and sticky headers. */
  [data-tb] :is(.table thead th, .table thead td, table.dataTable thead th, .dataTables_scrollHead th, table.fixedHeader-floating th, .ReactTable .rt-thead .rt-th, .ReactTable .rt-thead .rt-td) {
    background-color: var(--tb-table-header-bg);
    color: var(--tb-table-header-text);
    font-size: var(--app-table-header-size) !important;
    font-weight: var(--app-table-header-weight);
    border-color: var(--tb-table-border);
  }
  [data-tb] .ReactTable .rt-thead .rt-resizable-header-content { font-size: inherit !important; }
  [data-tb] .ReactTable .rt-thead.-header { box-shadow: 0 1px 0 var(--tb-table-border); }
  [data-tb] .table thead th { border-bottom-color: var(--tb-table-border); }

  /* Body rows: plain, striped (even rows, as the legacy styles do). Rows with a
     contextual class (.table-success, .bg-warning …) keep their meaning. */
  [data-tb] :is(.table, table.dataTable) > tbody > tr:not([class*="table-"]):not([class*="bg-"]) { background-color: var(--tb-table-body-bg); }
  [data-tb] .table-striped > tbody > tr:nth-of-type(odd):not([class*="table-"]):not([class*="bg-"]):not(.selected):not([aria-selected="true"]) { background-color: var(--tb-table-body-bg) !important; }
  [data-tb] .table-striped > tbody > tr:nth-of-type(even):not([class*="table-"]):not([class*="bg-"]):not(.selected):not([aria-selected="true"]),
  [data-tb] table.dataTable.stripe > tbody > tr.even { background-color: var(--tb-table-row-alt) !important; }
  [data-tb] .ReactTable .rt-tbody .rt-tr-group { background-color: var(--tb-table-body-bg); border-color: var(--tb-table-border); }
  [data-tb] .ReactTable.-striped .rt-tr.-even { background-color: var(--tb-table-row-alt); }
  [data-tb] .ReactTable.-striped .rt-tr.-odd { background-color: transparent; }

  /* Hover (the legacy striped hover set rows to #fff !important) */
  [data-tb] :is(.table-hover, .table-striped) > tbody > tr:not(.selected):not([aria-selected="true"]):hover,
  [data-tb] table.dataTable.hover > tbody > tr:hover,
  [data-tb] .no-footer .table-striped tr:not(.selected):hover td {
    background-color: var(--tb-table-row-hover-bg) !important;
    color: var(--tb-table-row-hover-text);
  }
  [data-tb] .ReactTable.-highlight .rt-tbody .rt-tr:not(.-padRow):hover { background-color: var(--tb-table-row-hover-bg); color: var(--tb-table-row-hover-text); }

  /* Selected rows: stronger tint plus an edge bar, so they differ from hover without relying on colour alone. */
  [data-tb] :is(.table, table.dataTable) > tbody > tr:is(.selected, .table-active, [aria-selected="true"]),
  [data-tb] :is(.table, table.dataTable) > tbody > tr:is(.selected, .table-active, [aria-selected="true"]):hover {
    background-color: var(--tb-table-row-selected-bg) !important;
    box-shadow: inset 3px 0 0 var(--tb-primary);
  }
  [data-tb] .ReactTable .rt-tbody .rt-tr:is(.selected, .-selected, [aria-selected="true"]) { background-color: var(--tb-table-row-selected-bg); box-shadow: inset 3px 0 0 var(--tb-primary); }

  /* Footer / totals */
  [data-tb] .table tfoot :is(th, td),
  [data-tb] .ReactTable .rt-tfoot .rt-td { background-color: color-mix(in srgb, var(--tb-table-header-bg) 70%, var(--tb-section-bg)); color: var(--tb-table-header-text); font-weight: 600; border-color: var(--tb-table-border); }

  /* Fixed columns and sticky cells sit over scrolling content: they need an opaque background. */
  [data-tb] :is(.dtfc-fixed-left, .dtfc-fixed-right, .DTFC_LeftBodyWrapper td, .DTFC_RightBodyWrapper td, td.sticky-col, td.sticky-column) { background-color: var(--tb-section-bg); }
  [data-tb] :is(th.dtfc-fixed-left, th.dtfc-fixed-right, .DTFC_LeftHeadWrapper th, .DTFC_RightHeadWrapper th, th.sticky-col, th.sticky-column) { background-color: var(--tb-table-header-bg); }

  /* Sorting: the active column is marked in the theme colour. */
  [data-tb] .ReactTable .rt-thead .rt-th.-sort-asc, [data-tb] .ReactTable .rt-thead .rt-td.-sort-asc { box-shadow: inset 0 3px 0 0 var(--tb-primary); }
  [data-tb] .ReactTable .rt-thead .rt-th.-sort-desc, [data-tb] .ReactTable .rt-thead .rt-td.-sort-desc { box-shadow: inset 0 -3px 0 0 var(--tb-primary); }
  [data-tb] table.dataTable thead :is(.sorting_asc, .sorting_desc) { color: var(--tb-table-header-text); box-shadow: inset 0 -2px 0 var(--tb-primary); }

  /* Expandable rows */
  [data-tb] .ReactTable .rt-expander::after { border-top-color: currentColor; }

  /* Search, filter and pagination controls */
  [data-tb] .ReactTable .rt-thead.-filters :is(input, select),
  [data-tb] :is(.dataTables_filter, .dataTables_length) :is(input, select) {
    background-color: var(--tb-input-bg); border: 1px solid var(--tb-input-border); color: var(--tb-text); font-family: var(--tb-table-font); font-size: var(--app-table-size);
  }
  [data-tb] .ReactTable .rt-thead.-filters :is(input, select):focus,
  [data-tb] :is(.dataTables_filter, .dataTables_length) :is(input, select):focus { border-color: var(--tb-focus); box-shadow: 0 0 0 .2rem var(--tb-focus-ring); outline: none; }
  [data-tb] .ReactTable .-pagination { font-family: var(--tb-table-font); font-size: var(--app-table-size); color: var(--tb-table-body-text); border-top-color: var(--tb-table-border); box-shadow: none; }
  [data-tb] .ReactTable .-pagination :is(input, select) { background-color: var(--tb-input-bg); border-color: var(--tb-input-border); color: var(--tb-text); }
  [data-tb] .ReactTable .-pagination .-btn { background: var(--tb-button-bg); color: var(--tb-button-text); }
  [data-tb] .ReactTable .-pagination .-btn:not([disabled]):hover { background: var(--tb-button-bg-hover); color: var(--tb-button-text-hover); }
  [data-tb] .ReactTable .-pagination .-btn[disabled] { background: var(--tb-button-disabled-bg); color: var(--tb-button-disabled-text); opacity: 1; }
  [data-tb] .ReactTable .-pagination .-btn:focus-visible { outline: 2px solid var(--tb-focus); outline-offset: 1px; }
  [data-tb] :is(.dataTables_info, .dataTables_paginate) { font-family: var(--tb-table-font); font-size: var(--app-table-size); color: var(--tb-table-body-text) !important; }
  [data-tb] .dataTables_paginate .paginate_button { color: var(--tb-primary) !important; border-radius: 4px; }
  [data-tb] .dataTables_paginate .paginate_button.current,
  [data-tb] .dataTables_paginate .paginate_button.current:hover { background: var(--tb-primary) !important; border-color: var(--tb-primary) !important; color: var(--tb-button-text) !important; }
  [data-tb] .dataTables_paginate .paginate_button:not(.current):not(.disabled):hover { background: var(--tb-primary-soft) !important; border-color: transparent !important; color: var(--tb-primary) !important; }

  /* Empty and loading states */
  [data-tb] .ReactTable .rt-noData { background: var(--tb-section-bg); color: var(--tb-muted-text); font-family: var(--tb-table-font); }
  [data-tb] .ReactTable .-loading { background: color-mix(in srgb, var(--tb-section-bg) 82%, transparent); }
  [data-tb] .ReactTable .-loading > div { color: var(--tb-muted-text); }
  [data-tb] table.dataTable td.dataTables_empty { color: var(--tb-muted-text); }
}

[data-tb] .page-item.active .page-link { background-color: var(--tb-primary); border-color: var(--tb-primary); color: var(--tb-button-text); }
[data-tb] .page-link { color: var(--tb-primary); background-color: var(--tb-section-bg); border-color: var(--tb-table-border); }
[data-tb] .page-item.disabled .page-link { color: var(--tb-button-disabled-text); background-color: var(--tb-section-bg); }
[data-tb] .page-link:focus-visible { box-shadow: 0 0 0 .2rem var(--tb-focus-ring); outline: 2px solid var(--tb-focus); }

/* ── 4d. Tabs ───────────────────────────────────────────────────────────
   Filled tabs (page tabs from DynamicTab.js, vertical page tabs, vertical
   nav tabs, pills) use the active background / text; underline tabs
   (Bootstrap .nav-tabs) use the active border colour for text and line.
   Styling only: which tabs exist, which are disabled and tab_permission
   rules are decided by the screens and are not touched here. The legacy
   tab rules all use !important, so these overrides do too. */
/* Page tabs (horizontal) */
[data-tb] .horizontal-page .link button { background: var(--tb-tab-bg); color: var(--tb-tab-text) !important; }
[data-tb] .horizontal-page .link button:hover { background-color: var(--tb-tab-hover-bg) !important; color: var(--tb-tab-hover-text) !important; border-bottom-color: var(--tb-tab-active-border) !important; }
[data-tb] .horizontal-page .rwt__tabs .selected button,
[data-tb] .horizontal-page .rwt__tabs .selected button:hover { background: var(--tb-tab-active-bg) !important; color: var(--tb-tab-active-text) !important; border-bottom-color: var(--tb-tab-active-border) !important; }
[data-tb] .horizontal-page .rwt__tabs .selected button::before { border-top-color: var(--tb-tab-active-bg); }
[data-tb] .primary_tabs .horizontal-tabs { background: var(--tb-tab-bg); box-shadow: inset 0 -1px 0 0 var(--tb-section-border); border-bottom-color: var(--tb-tab-bg); }
[data-tb] .primary_tabs .horizontal-page .link button { box-shadow: 0 0 0 1px var(--tb-section-border); }
[data-tb] .primary_tabs .horizontal-page .link button:hover { color: var(--tb-tab-hover-text) !important; border-color: var(--tb-tab-hover-bg) !important; }
[data-tb] .primary_tabs .horizontal-page .rwt__tabs .selected button:hover { color: var(--tb-tab-active-text) !important; }
/* react-web-tabs, generic (index.css hovers them in #00d8ff). index.css is injected after this
   stylesheet, so the base rule carries the tab list class to outrank its `.rwt__tab { background: #fff }`. */
[data-tb] .rwt__tablist .rwt__tab { background: var(--tb-tab-bg); color: var(--tb-tab-text); border-bottom-color: var(--tb-section-border) !important; }
[data-tb] .rwt__tab:hover { background-color: var(--tb-tab-hover-bg) !important; color: var(--tb-tab-hover-text); }
[data-tb] .rwt__tab[aria-selected="true"]:not(.nav-link) { color: var(--tb-tab-active-border); border-bottom-color: var(--tb-tab-active-border) !important; }
/* Vertical page tabs */
[data-tb] .vertical_page_tabs .rwt__tablist button { background: var(--tb-tab-bg); color: var(--tb-tab-text); border-color: var(--tb-section-border) !important; }
[data-tb] .vertical_page_tabs .rwt__tablist button:hover { background: var(--tb-tab-hover-bg) !important; color: var(--tb-tab-hover-text); border-left-color: var(--tb-tab-active-border) !important; }
[data-tb] .vertical_page_tabs .rwt__tab[aria-selected="true"],
[data-tb] .vertical_page_tabs .rwt__tab[aria-selected="true"]:hover { background-color: var(--tb-tab-active-bg) !important; color: var(--tb-tab-active-text) !important; border-left-color: var(--tb-tab-active-border) !important; }
/* Vertical nav tabs (settings and employee record screens) */
[data-tb] .vertical_tabs .nav-tabs .nav-item { border-color: var(--tb-section-border); background-color: var(--tb-tab-bg); }
[data-tb] .vertical_tabs .nav-tabs .nav-item:hover { background-color: var(--tb-tab-hover-bg) !important; border-left-color: var(--tb-tab-active-border) !important; }
[data-tb] .vertical_tabs .nav-tabs .nav-item .nav-link { color: var(--tb-tab-text); }
[data-tb] .vertical_tabs .nav-tabs .nav-item:hover .nav-link:not(.active) { color: var(--tb-tab-hover-text); }
[data-tb] .vertical_tabs .nav-tabs .nav-link.active { background-color: var(--tb-tab-active-bg) !important; color: var(--tb-tab-active-text) !important; }
[data-tb] .vertical_tabs .nav-tabs .nav-link.active::after { border-left-color: var(--tb-tab-active-bg) !important; }
/* Underline tabs (Bootstrap) */
[data-tb] .nav-tabs { border-bottom-color: var(--tb-section-border); }
[data-tb] .nav-tabs .nav-link { color: var(--tb-tab-text); }
[data-tb] .nav-tabs .nav-link:hover { color: var(--tb-tab-hover-text); background-color: var(--tb-tab-hover-bg); border-color: transparent transparent var(--tb-section-border); }
[data-tb] .nav-tabs .nav-link.active,
[data-tb] .nav-tabs .nav-item.show .nav-link { color: var(--tb-tab-active-border); background-color: var(--tb-tab-bg); border-color: var(--tb-section-border) var(--tb-section-border) var(--tb-tab-bg); box-shadow: inset 0 -2px 0 var(--tb-tab-active-border); }
/* Pills */
[data-tb] .nav-pills .nav-link { color: var(--tb-tab-text); }
[data-tb] .nav-pills .nav-link:hover { color: var(--tb-tab-hover-text); background-color: var(--tb-tab-hover-bg); }
[data-tb] .nav-pills .nav-link.active, [data-tb] .nav-pills .show > .nav-link { background-color: var(--tb-tab-active-bg); color: var(--tb-tab-active-text); }
/* Disabled tabs stay visibly unavailable (and keep their disabled behaviour). */
[data-tb] :is(.nav-tabs, .nav-pills) .nav-link.disabled,
[data-tb] .rwt__tab:is([disabled], [aria-disabled="true"]),
[data-tb] .horizontal-page .link button:disabled { color: var(--tb-button-disabled-text) !important; background-color: transparent !important; opacity: .7; cursor: not-allowed; }
/* Keyboard focus on every tab style */
[data-tb] :is(.nav-tabs .nav-link, .nav-pills .nav-link, .rwt__tab, .horizontal-page .link button):focus-visible { outline: 2px solid var(--tb-focus) !important; outline-offset: -2px; }

/* ── 5. Header ───────────────────────────────────────────────────────── */
html[data-tb] .app-header {
  background: var(--tb-header-bg) !important;
  color: var(--tb-header-text);
  height: var(--app-header-height);
  min-height: var(--app-header-height);
}
html[data-tb] .app-header .companyinfo .title,
html[data-tb] .app-header .companyinfo .software,
html[data-tb] .app-header .companyinfo .address,
html[data-tb] .app-header .companyinfo .phone,
html[data-tb] .app-header .language_btn,
html[data-tb] .app-header .nav-link,
html[data-tb] .app-header .navbar-toggler { color: var(--tb-header-text) !important; }

html[data-tb][data-tb-header-shadow="1"] .app-header { box-shadow: 0 2px 10px rgba(15, 23, 42, .16); }
html[data-tb][data-tb-header-shadow="0"] .app-header { box-shadow: none; }
html[data-tb][data-tb-header-border="1"] .app-header { border-bottom: 1px solid var(--tb-border) !important; }
html[data-tb][data-tb-header-sticky="0"] .app-header { position: absolute; }

/* Header logo: height from Branding & Theme → Organization; the width follows the image (aspect ratio kept). */
html[data-tb] .app-header .companyinfo img { height: var(--app-header-logo-height, 40px); width: auto; max-height: none; max-width: calc(var(--app-header-logo-height, 40px) * 4); object-fit: contain; box-sizing: content-box; }
html[data-tb][data-tb-header-logo="0"] .app-header .companyinfo img,
html[data-tb][data-tb-header-logo="0"] .app-header .tb-header-logo { display: none !important; }
html[data-tb][data-tb-header-name="0"] .app-header .companyinfo .title,
html[data-tb][data-tb-header-name="0"] .app-header .companyinfo .software,
html[data-tb][data-tb-header-name="0"] .app-header .tb-header-name { display: none !important; }
html[data-tb][data-tb-notifications="0"] .app-header .noti { display: none !important; }
/* Menu search box in the header (layouts/MenuSearch.js). */
html[data-tb] .tb-menu-search { position: relative; margin: 0 12px 0 16px; flex: 0 1 300px; min-width: 0; }
html[data-tb] .tb-menu-search-toggle { display: none; background: transparent; border: 0; color: var(--tb-header-text); font-size: 16px; padding: 6px 8px; cursor: pointer; }
html[data-tb] .tb-menu-search-box { position: relative; display: flex; align-items: center; }
html[data-tb] .tb-menu-search-icon { position: absolute; left: 10px; color: var(--tb-header-text); opacity: .7; font-size: 12px; pointer-events: none; }
html[data-tb] .tb-menu-search-input {
  width: 100%; height: 32px; padding: 0 58px 0 30px; border-radius: 8px; outline: none;
  border: 1px solid color-mix(in srgb, var(--tb-header-text) 28%, transparent);
  background: color-mix(in srgb, var(--tb-header-text) 14%, transparent);
  color: var(--tb-header-text); font-size: 13px; font-family: var(--app-font-family);
}
html[data-tb] .tb-menu-search-input::placeholder { color: var(--tb-header-text); opacity: .7; }
html[data-tb] .tb-menu-search-input:focus { background: var(--tb-card-bg); color: var(--tb-text); border-color: var(--tb-card-bg); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tb-header-text) 30%, transparent); }
html[data-tb] .tb-menu-search-input:focus::placeholder { color: var(--tb-muted-text); }
html[data-tb] .tb-menu-search-input:focus ~ .tb-menu-search-kbd { display: none; }
html[data-tb] .tb-menu-search-box:focus-within .tb-menu-search-icon { color: var(--tb-muted-text); }
html[data-tb] .tb-menu-search-input::-webkit-search-cancel-button { cursor: pointer; }
html[data-tb] .tb-menu-search-kbd { position: absolute; right: 8px; font-size: 10px; padding: 1px 5px; border-radius: 4px; background: color-mix(in srgb, var(--tb-header-text) 18%, transparent);
  color: var(--tb-header-text); font-family: inherit; box-shadow: none; pointer-events: none; }
html[data-tb] .tb-menu-search-results {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; min-width: 280px; max-height: 60vh; overflow-y: auto; z-index: 1100;
  margin: 0; padding: 4px; list-style: none; background: var(--tb-card-bg); border: 1px solid var(--tb-border); border-radius: 10px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, .18);
}
html[data-tb] .tb-menu-search-results a { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 7px; color: var(--tb-text); text-decoration: none; }
html[data-tb] .tb-menu-search-results a.active { background: var(--tb-primary-soft); color: var(--tb-primary); }
html[data-tb] .tb-menu-search-results .tb-ms-icon { width: 16px; text-align: center; color: var(--tb-muted-text); flex-shrink: 0; }
html[data-tb] .tb-menu-search-results a.active .tb-ms-icon { color: var(--tb-primary); }
html[data-tb] .tb-menu-search-results .tb-ms-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
html[data-tb] .tb-menu-search-results .tb-ms-name { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-tb] .tb-menu-search-results .tb-ms-path { font-size: 11px; color: var(--tb-muted-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-tb] .tb-menu-search-results mark { background: transparent; color: inherit; font-weight: 700; padding: 0; }
html[data-tb] .tb-menu-search-results .tb-ms-empty { padding: 10px; color: var(--tb-muted-text); font-size: 12.5px; }
html[data-tb] .app-header .companyinfo { flex-shrink: 0; }
html[data-tb] .tb-menu-search-results { text-align: left; }
@media (max-width: 991px) {
  /* Narrow screens: an icon that opens the search as a bar over the whole header. */
  html[data-tb] .tb-menu-search { flex: 0 0 auto; margin: 0 4px 0 auto; position: static; }
  html[data-tb] .tb-menu-search-toggle { display: inline-block; }
  html[data-tb] .tb-menu-search-box { display: none; }
  html[data-tb] .tb-menu-search.expanded .tb-menu-search-toggle { visibility: hidden; }
  html[data-tb] .tb-menu-search.expanded .tb-menu-search-box {
    display: flex; position: absolute; left: 0; right: 0; top: 0; height: var(--app-header-height);
    padding: 0 10px; z-index: 1102; background: var(--tb-header-bg);
  }
  html[data-tb] .tb-menu-search.expanded .tb-menu-search-icon { left: 20px; }
  html[data-tb] .tb-menu-search.expanded .tb-menu-search-input { padding-right: 10px; }
  html[data-tb] .tb-menu-search.expanded .tb-menu-search-results { left: 8px; right: 8px; top: calc(var(--app-header-height) + 4px); min-width: 0; position: fixed; }
  html[data-tb] .tb-menu-search-kbd { display: none; }
}

html[data-tb] .app-header .tb-lang-switch { display: flex; align-items: center; gap: 2px; }
html[data-tb] .app-header .tb-lang-switch .language_btn { display: inline-block; margin: 0 !important; min-width: 30px; text-align: center; }

html[data-tb][data-tb-breadcrumb="1"] .nagarpalika_dashboard .breadcrumb {
  display: flex !important;
  background: transparent;
  margin: 6px 0 0 !important;
  padding: 4px 0 !important;
  font-size: calc(var(--app-font-size) - 1px);
}
html[data-tb] .breadcrumb-item.active { color: var(--tb-muted-text); }
html[data-tb] .breadcrumb-item a { color: var(--tb-link); }

/* The horizontal menu sits directly under the fixed header. */
html[data-tb] .top_hr_menu {
  margin-top: calc(var(--app-header-height) - 5px);
  background: var(--tb-topmenu-bg);
}
html[data-tb] .top_hr_menu .navbar-nav .nav-link,
html[data-tb] .top_hr_menu .navbar-nav .nav-link i {
  color: var(--tb-topmenu-text);
  font-size: var(--app-menu-size);
}
html[data-tb] .top_hr_menu .navbar-nav .nav-link:hover,
html[data-tb] .top_hr_menu .navbar-nav .nav-link.active,
html[data-tb] .top_hr_menu .navbar-nav .nav-link:hover i { color: var(--tb-primary); }
html[data-tb] .top_hr_menu .dropdown-menu .dropdown-item { font-size: calc(var(--app-menu-size) - 1px); }

/* ── 6. Sidebar ──────────────────────────────────────────────────────── */
html[data-tb] .sidebar,
html[data-tb] .sidebar .sidebar-nav,
html[data-tb] .sidebar .nav,
html[data-tb] .sidebar .sidebar-minimizer { background: var(--tb-sidebar-bg); }
html[data-tb] .sidebar .nav-link {
  color: var(--tb-sidebar-text);
  font-size: var(--app-sidebar-font-size);
  border-bottom-color: color-mix(in srgb, var(--tb-sidebar-text) 10%, transparent);
}
html[data-tb] .sidebar .nav-link .nav-icon,
html[data-tb] .sidebar .nav-link i {
  color: var(--tb-menu-icon);
  font-size: var(--app-sidebar-icon-size);
}
/* Hovered, active and open items: icons take the item's text colour. */
html[data-tb] .sidebar .nav-link:is(:hover, :focus-visible, .active) :is(.nav-icon, i),
html[data-tb] .sidebar .nav-dropdown.open > .nav-link :is(.nav-icon, i) { color: inherit; }
html[data-tb] .sidebar .nav-link:hover {
  background: var(--tb-sidebar-hover);
  color: var(--tb-sidebar-text);
}
html[data-tb] .sidebar .nav-link.active,
html[data-tb] .sidebar .nav-dropdown.open > .nav-link {
  background: var(--tb-sidebar-active-bg);
  color: var(--tb-sidebar-active-text);
  box-shadow: inset 3px 0 0 var(--tb-menu-indicator);
}
html[data-tb] .sidebar .nav-dropdown-items { background: var(--tb-submenu-bg); }
html[data-tb] .sidebar .nav-dropdown-items .nav-link:not(.active):not(:hover) { color: var(--tb-submenu-text); }
/* Keyboard focus: an outline, so it never looks like hover or the active page. */
html[data-tb] .sidebar .nav-link:focus-visible,
html[data-tb] .top_hr_menu .nav-link:focus-visible { outline: 2px solid var(--tb-focus); outline-offset: -2px; }
html[data-tb] .sidebar .sidebar-header { background: var(--tb-sidebar-bg); padding: 0; text-align: left; }
html[data-tb] .sidebar .tb-sidebar-logo { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid color-mix(in srgb, var(--tb-sidebar-text) 12%, transparent); }
html[data-tb] .sidebar .tb-sidebar-logo img { max-width: 72px; max-height: 34px; object-fit: contain; flex-shrink: 0; }
html[data-tb] .sidebar .tb-sidebar-logo .tb-sidebar-logo-mark { width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--tb-primary); color: #fff; font-weight: 700; font-size: 13px; }
html[data-tb] .sidebar .tb-sidebar-logo .tb-sidebar-app { min-width: 0; line-height: 1.25; }
html[data-tb] .sidebar .tb-sidebar-logo .tb-sidebar-app-name { display: block; font-weight: 700; font-size: 13.5px; color: var(--tb-sidebar-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-tb] .sidebar .tb-sidebar-logo .tb-sidebar-app-org { display: block; font-size: 11px; color: var(--tb-sidebar-text); opacity: .65; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-tb][data-tb-sidebar-logo="0"] .sidebar .tb-sidebar-logo { display: none; }
html[data-tb] body.sidebar-minimized .sidebar .tb-sidebar-logo { display: none; }

/* Compact: tighter rows. */
html[data-tb][data-tb-sidebar-style="compact"] .sidebar .nav-link { padding-top: 5px; padding-bottom: 5px; }

/* Expanded / icon-only modes have no minimise button. */
html[data-tb][data-tb-sidebar-style="expanded"] .sidebar .sidebar-minimizer,
html[data-tb][data-tb-sidebar-style="icon"] .sidebar .sidebar-minimizer { display: none; }

/* Labels hidden: icons only, label shown as tooltip (title attribute). */
html[data-tb][data-tb-sidebar-labels="0"] body:not(.sidebar-show) .sidebar .nav-link { font-size: 0; }
html[data-tb][data-tb-sidebar-labels="0"] body:not(.sidebar-show) .sidebar .nav-link .nav-icon,
html[data-tb][data-tb-sidebar-labels="0"] body:not(.sidebar-show) .sidebar .nav-link i { font-size: var(--app-sidebar-icon-size); margin: 0; }


/* Icons of an open parent item: an old rule (`.sidebar .nav-dropdown.open
   .nav-link.nav-dropdown-toggle i { font-family: robotomedium }`) replaces the
   icon font and shows a box. Keep icons in their icon font. */
html[data-tb] .sidebar .nav-link i.fa { font-family: FontAwesome !important; }

/* ── 6b. Sidebar menu styles (Theme & Branding → Sidebar → Menu style) ──
   classic = the rules above (divider lines). modern / minimal below.
   Expanded sidebar only: the minimised (icons-only) sidebar keeps CoreUI's own
   layout, so these rules are scoped to body:not(.sidebar-minimized). */

/* Shared by modern and minimal: no divider lines, clean rows, tidy icons. */
html[data-tb]:is([data-tb-sidebar-menu="modern"], [data-tb-sidebar-menu="minimal"]) body:not(.sidebar-minimized) .sidebar .nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 0 !important;
  line-height: 1.3;
  white-space: normal;
  transition: background-color .15s ease, color .15s ease;
}
html[data-tb]:is([data-tb-sidebar-menu="modern"], [data-tb-sidebar-menu="minimal"]) body:not(.sidebar-minimized) .sidebar .nav-link .nav-icon {
  flex: 0 0 20px;
  width: 20px;
  margin: 0 !important;
  text-align: center;
  opacity: .75;
  transition: opacity .15s ease;
}
html[data-tb]:is([data-tb-sidebar-menu="modern"], [data-tb-sidebar-menu="minimal"]) body:not(.sidebar-minimized) .sidebar .nav-link:hover .nav-icon,
html[data-tb]:is([data-tb-sidebar-menu="modern"], [data-tb-sidebar-menu="minimal"]) body:not(.sidebar-minimized) .sidebar .nav-link.active .nav-icon { opacity: 1; }
html[data-tb]:is([data-tb-sidebar-menu="modern"], [data-tb-sidebar-menu="minimal"]) body:not(.sidebar-minimized) .sidebar .nav-dropdown.open > .nav-link {
  font-weight: 600;
  background: transparent;
  box-shadow: none;
  color: var(--tb-sidebar-text);
}
/* Sub-items: the old CSS hides their icons (opacity 0) but keeps the space. */
html[data-tb]:is([data-tb-sidebar-menu="modern"], [data-tb-sidebar-menu="minimal"]) body:not(.sidebar-minimized) .sidebar .nav-dropdown-items .nav-link .nav-icon { display: none; }
html[data-tb]:is([data-tb-sidebar-menu="modern"], [data-tb-sidebar-menu="minimal"]) body:not(.sidebar-minimized) .sidebar .nav-dropdown-items {
  background: var(--app-submenu-bg, transparent) !important; /* these styles have no sub-menu tint unless one is set */
  box-shadow: none !important;
}
/* Old rule: `.sidebar .nav-item { border-bottom: 1px solid #fff }` (shows on dark sidebars). */
html[data-tb]:is([data-tb-sidebar-menu="modern"], [data-tb-sidebar-menu="minimal"]) .sidebar .nav-item { border-bottom: 0; }
html[data-tb][data-tb-sidebar-menu="classic"] .sidebar .nav-item { border-bottom-color: color-mix(in srgb, var(--tb-sidebar-text) 10%, transparent); }
/* Old rules colour every sub-menu heading inside an open menu. */
html[data-tb]:is([data-tb-sidebar-menu="modern"], [data-tb-sidebar-menu="minimal"]) body:not(.sidebar-minimized) .sidebar .nav-dropdown-items .nav-link.nav-dropdown-toggle { background: transparent; }
html[data-tb]:is([data-tb-sidebar-menu="modern"], [data-tb-sidebar-menu="minimal"]) body:not(.sidebar-minimized) .sidebar .nav-dropdown-items .nav-link.nav-dropdown-toggle:hover { background: var(--tb-sidebar-hover); }
html[data-tb]:is([data-tb-sidebar-menu="modern"], [data-tb-sidebar-menu="minimal"]) body:not(.sidebar-minimized) .sidebar .nav-dropdown-items .nav-dropdown.open > .nav-link.nav-dropdown-toggle { font-weight: 600; }
html[data-tb]:is([data-tb-sidebar-menu="modern"], [data-tb-sidebar-menu="minimal"]) body:not(.sidebar-minimized) .sidebar .nav-dropdown-items .nav-link {
  font-size: calc(var(--app-sidebar-font-size) - .5px);
  font-weight: normal;
}
html[data-tb]:is([data-tb-sidebar-menu="modern"], [data-tb-sidebar-menu="minimal"]) .sidebar .sidebar-nav {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--tb-sidebar-text) 25%, transparent) transparent;
}

/* Modern: rounded items inside the sidebar, guide line for sub-menus. */
html[data-tb][data-tb-sidebar-menu="modern"] body:not(.sidebar-minimized) .sidebar .sidebar-nav > .nav { padding: 6px 8px 12px; }
html[data-tb][data-tb-sidebar-menu="modern"] body:not(.sidebar-minimized) .sidebar .nav-item { margin: calc(var(--app-sidebar-item-gap, 2px) / 2) 0; }
html[data-tb][data-tb-sidebar-menu="minimal"] body:not(.sidebar-minimized) .sidebar .nav-item { margin: calc(var(--app-sidebar-item-gap, 2px) / 2) 0; }
html[data-tb][data-tb-sidebar-menu="modern"] body:not(.sidebar-minimized) .sidebar .nav-link {
  position: relative;
  padding: 8px 10px !important;
  border-radius: 8px;
}
html[data-tb][data-tb-sidebar-menu="modern"][data-tb-sidebar-style="compact"] body:not(.sidebar-minimized) .sidebar .nav-link { padding: 5px 10px !important; }
html[data-tb][data-tb-sidebar-menu="modern"] body:not(.sidebar-minimized) .sidebar .nav-link:hover { background: var(--tb-sidebar-hover); }
html[data-tb][data-tb-sidebar-menu="modern"] body:not(.sidebar-minimized) .sidebar .nav-link.active {
  background: var(--tb-sidebar-active-bg);
  color: var(--tb-sidebar-active-text);
  font-weight: 600;
  box-shadow: none;
}
html[data-tb][data-tb-sidebar-menu="modern"] body:not(.sidebar-minimized) .sidebar .nav-link.active::after {
  content: "";
  position: absolute;
  left: 0;
  top: 22%;
  bottom: 22%;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--tb-menu-indicator);
}
html[data-tb][data-tb-sidebar-menu="modern"] body:not(.sidebar-minimized) .sidebar .nav-dropdown-items {
  margin: 2px 0 6px 19px;
  padding-left: 8px;
  border-left: 1px solid color-mix(in srgb, var(--tb-sidebar-text) 16%, transparent);
}
html[data-tb][data-tb-sidebar-menu="modern"] body:not(.sidebar-minimized) .sidebar .nav-dropdown-items .nav-link { padding: 6px 10px !important; }
/* Active sub-item: its accent sits on the guide line. */
html[data-tb][data-tb-sidebar-menu="modern"] body:not(.sidebar-minimized) .sidebar .nav-dropdown-items .nav-link.active::after { left: -9px; top: 18%; bottom: 18%; border-radius: 2px; }

/* Minimal: full-width flat rows, accent bar on the edge. */
html[data-tb][data-tb-sidebar-menu="minimal"] body:not(.sidebar-minimized) .sidebar .nav-link {
  padding: 9px 14px !important;
  border-radius: 0;
}
html[data-tb][data-tb-sidebar-menu="minimal"][data-tb-sidebar-style="compact"] body:not(.sidebar-minimized) .sidebar .nav-link { padding: 6px 14px !important; }
html[data-tb][data-tb-sidebar-menu="minimal"] body:not(.sidebar-minimized) .sidebar .nav-link:hover { background: var(--tb-sidebar-hover); }
html[data-tb][data-tb-sidebar-menu="minimal"] body:not(.sidebar-minimized) .sidebar .nav-link.active {
  background: var(--tb-sidebar-active-bg);
  color: var(--tb-sidebar-active-text);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--tb-menu-indicator);
}
html[data-tb][data-tb-sidebar-menu="minimal"] body:not(.sidebar-minimized) .sidebar .nav-dropdown-items .nav-link { padding-left: 44px !important; }
html[data-tb][data-tb-sidebar-menu="minimal"] body:not(.sidebar-minimized) .sidebar .nav-dropdown-items .nav-dropdown-items .nav-link { padding-left: 58px !important; }

/* Header ☰ button that collapses / expands the sidebar (sidebar layouts, desktop). */
html[data-tb] .tb-sidebar-toggle {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 34px; height: 34px; margin: 0 6px 0 4px; border: 0; border-radius: 8px;
  background: transparent; color: var(--tb-header-text); font-size: 17px; cursor: pointer;
  transition: background-color .15s ease;
}
html[data-tb] .tb-sidebar-toggle:hover { background: color-mix(in srgb, var(--tb-header-text) 15%, transparent); }
html[data-tb] .tb-sidebar-toggle:focus-visible { outline: 2px solid var(--tb-header-text); outline-offset: 1px; }
@media (max-width: 991px) { html[data-tb] .tb-sidebar-toggle { display: none; } }

/* Menu filter at the top of the sidebar. */
html[data-tb] .sidebar .tb-sidebar-filter { position: relative; margin: 8px 8px 4px; }
html[data-tb] .sidebar .tb-sidebar-filter > i { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-size: 11px; color: var(--tb-sidebar-text); opacity: .55; pointer-events: none; }
html[data-tb] .sidebar .tb-sidebar-filter input {
  width: 100%; height: 32px; padding: 0 28px 0 28px; border-radius: 8px; outline: none;
  border: 1px solid color-mix(in srgb, var(--tb-sidebar-text) 18%, transparent);
  background: color-mix(in srgb, var(--tb-sidebar-text) 6%, var(--tb-sidebar-bg));
  color: var(--tb-sidebar-text); font-size: calc(var(--app-sidebar-font-size) - .5px); font-family: var(--app-font-family);
}
html[data-tb] .sidebar .tb-sidebar-filter input::placeholder { color: var(--tb-sidebar-text); opacity: .55; }
html[data-tb] .sidebar .tb-sidebar-filter input:focus { border-color: var(--tb-primary); box-shadow: 0 0 0 3px var(--tb-focus-ring); }
html[data-tb] .sidebar .tb-sidebar-filter button {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px;
  border: 0; border-radius: 6px; background: transparent; color: var(--tb-sidebar-text); opacity: .6; cursor: pointer;
}
html[data-tb] .sidebar .tb-sidebar-filter button:hover { opacity: 1; background: var(--tb-sidebar-hover); }
html[data-tb] .sidebar .tb-sidebar-filter-empty { padding: 14px 16px; font-size: 12px; color: var(--tb-sidebar-text); opacity: .65; }
html[data-tb] body.sidebar-minimized .sidebar .tb-sidebar-filter,
html[data-tb] body.sidebar-minimized .sidebar .tb-sidebar-filter-empty { display: none; }

/* ── 6c. Sidebar: footer collapse button, collapsed icons, flyouts ───────
   layouts/index.js (footer button) and layouts/SidebarFlyout.js. */
[data-tb] { --tb-sidebar-hover-text: var(--app-sidebar-hover-text, var(--app-sidebar-text)); }
[data-tb][data-tb-mode="dark"][data-tb-dark-style="native"] { --tb-sidebar-hover-text: #ffffff; }
html[data-tb] .sidebar .nav-link:hover { color: var(--tb-sidebar-hover-text); }

/* CoreUI's own minimise bar is replaced by the footer button. */
html[data-tb] .sidebar .sidebar-minimizer { display: none !important; }

/* Full-height column: menu scrolls, footer stays put. */
html[data-tb] .sidebar { display: flex; flex-direction: column; min-height: 0; }
html[data-tb] .sidebar .sidebar-nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; }
html[data-tb] .sidebar .tb-sidebar-footer {
  flex-shrink: 0;
  margin-top: auto;
  padding: 8px;
  border-top: 1px solid color-mix(in srgb, var(--tb-sidebar-text) 14%, transparent);
  background: var(--tb-sidebar-bg);
}
html[data-tb] .sidebar .tb-sidebar-collapse {
  display: flex; align-items: center; gap: 10px; width: 100%; height: 36px; padding: 0 10px;
  border: 0; border-radius: 8px; background: transparent; cursor: pointer;
  color: var(--tb-sidebar-text); font-size: calc(var(--app-sidebar-font-size) - .5px); font-family: var(--app-font-family);
  transition: background-color .15s ease, color .15s ease;
}
html[data-tb] .sidebar .tb-sidebar-collapse .fa { width: 20px; text-align: center; font-size: 16px; flex-shrink: 0; }
html[data-tb] .sidebar .tb-sidebar-collapse:hover { background: var(--tb-sidebar-hover); color: var(--tb-sidebar-hover-text); }
html[data-tb] .sidebar .tb-sidebar-collapse:focus-visible { outline: 2px solid var(--tb-primary); outline-offset: 1px; }
html[data-tb] body.sidebar-minimized .sidebar .tb-sidebar-collapse { justify-content: center; padding: 0; }
html[data-tb] body.sidebar-minimized .sidebar .tb-sidebar-collapse-label { display: none; }
/* Phones/tablets use the slide-in menu: no collapse control there. */
@media (max-width: 991px) { html[data-tb] .sidebar .tb-sidebar-footer { display: none; } }

/* Collapsed width from Theme & Branding */
html[data-tb] body.sidebar-minimized { --tb-sb-w: var(--app-sidebar-collapsed-width, 56px) !important; }
html[data-tb][data-tb-sidebar-labels="0"] body { --tb-sb-w: var(--app-sidebar-collapsed-width, 56px); }

/* Smooth width change */
@media (min-width: 992px) {
  html[data-tb] .sidebar,
  html[data-tb] .sidebar .sidebar-nav,
  html[data-tb] .sidebar .nav { transition: width .2s ease; }
  html[data-tb] .main { transition: margin-left .2s ease, margin-right .2s ease; }
}

/* The old CSS pins the collapsed sidebar at 38px !important; use the theme width. */
@media (min-width: 992px) {
  html[data-tb]:is([data-tb-layout="sidebar"], [data-tb-layout="combined"]) body.sidebar-minimized .sidebar,
  html[data-tb]:is([data-tb-layout="sidebar"], [data-tb-layout="combined"]) body.sidebar-minimized .sidebar .sidebar-nav,
  html[data-tb]:is([data-tb-layout="sidebar"], [data-tb-layout="combined"]) body.sidebar-minimized .sidebar .nav { width: var(--tb-sb-w) !important; flex-basis: var(--tb-sb-w); }
}

/* Collapsed: centred icons only; the flyout replaces CoreUI's hover pop-out. */
@media (min-width: 992px) {
  html[data-tb] body.sidebar-minimized .sidebar .tb-sidebar-filter,
  html[data-tb] body.sidebar-minimized .sidebar .tb-sidebar-app { display: none; }
  html[data-tb] body.sidebar-minimized .sidebar .tb-sidebar-logo { justify-content: center; padding: 10px 4px; }
  html[data-tb] body.sidebar-minimized .sidebar .tb-sidebar-logo img { max-width: 36px; }
  html[data-tb] body.sidebar-minimized .sidebar .nav-item,
  html[data-tb] body.sidebar-minimized .sidebar .nav-item:hover { width: auto !important; overflow: visible; border-bottom: 0; margin: 2px 6px; }
  html[data-tb] body.sidebar-minimized .sidebar .nav-link,
  html[data-tb] body.sidebar-minimized .sidebar .nav-item:hover > .nav-link {
    display: flex !important; align-items: center; justify-content: center;
    width: auto !important; height: 40px; padding: 0 !important; border-radius: 8px;
    font-size: 0 !important; border: 0 !important; box-shadow: none; background: transparent;
    color: var(--tb-sidebar-text);
  }
  html[data-tb] body.sidebar-minimized .sidebar .nav-link .nav-icon,
  html[data-tb] body.sidebar-minimized .sidebar .nav-item:hover > .nav-link .nav-icon {
    margin: 0 !important; width: auto; font-size: calc(var(--app-sidebar-icon-size) + 2px) !important; color: inherit; opacity: .85;
  }
  html[data-tb] body.sidebar-minimized .sidebar .nav-link.nav-dropdown-toggle::before { display: none; }
  /* Old rules widen an open menu to 270px and tint it for CoreUI's pop-out. */
  html[data-tb] body.sidebar-minimized .sidebar .nav > .nav-item.nav-dropdown.open { width: auto !important; background: transparent; overflow: visible; }
  html[data-tb] body.sidebar-minimized .sidebar .nav > .nav-item.nav-dropdown.open > .nav-link { background: transparent; font-weight: normal; }
  html[data-tb] body.sidebar-minimized .sidebar .nav > .nav-item.nav-dropdown.open > .nav-link:hover,
  html[data-tb] body.sidebar-minimized .sidebar .nav > .nav-item.tb-flyout-open > .nav-link { background: var(--tb-sidebar-hover); }
  html[data-tb] body.sidebar-minimized .sidebar .nav > .nav-item.nav-dropdown.open:has(.nav-link.active) > .nav-link { background: var(--tb-sidebar-active-bg); }
  html[data-tb] body.sidebar-minimized .sidebar .nav-dropdown-items { display: none !important; }
  html[data-tb] body.sidebar-minimized .sidebar .nav-link:hover,
  html[data-tb] body.sidebar-minimized .sidebar .tb-flyout-open > .nav-link { background: var(--tb-sidebar-hover); color: var(--tb-sidebar-hover-text); }
  html[data-tb] body.sidebar-minimized .sidebar .nav-link:hover .nav-icon,
  html[data-tb] body.sidebar-minimized .sidebar .tb-flyout-open > .nav-link .nav-icon { opacity: 1; }
  /* The section holding the current page stays marked: tint + accent bar. */
  html[data-tb] body.sidebar-minimized .sidebar .nav-link.active,
  html[data-tb] body.sidebar-minimized .sidebar .nav-dropdown:has(.nav-link.active) > .nav-link {
    position: relative; background: var(--tb-sidebar-active-bg); color: var(--tb-sidebar-active-text);
  }
  html[data-tb] body.sidebar-minimized .sidebar .nav-link.active::after,
  html[data-tb] body.sidebar-minimized .sidebar .nav-dropdown:has(.nav-link.active) > .nav-link::after {
    content: ""; position: absolute; left: -6px; top: 25%; bottom: 25%; width: 3px; border-radius: 0 3px 3px 0; background: var(--tb-menu-indicator);
  }
  html[data-tb] body.sidebar-minimized .sidebar .nav-link:focus-visible { outline: 2px solid var(--tb-primary); outline-offset: -2px; }
}

/* Flyout panel (rendered into <body>, fixed position) */
html[data-tb] .tb-flyout {
  position: fixed; z-index: 1065; min-width: 220px; max-width: 300px;
  display: flex; flex-direction: column;
  background: var(--tb-card-bg); color: var(--tb-text);
  border: 1px solid var(--tb-border); border-radius: 12px;
  box-shadow: 0 16px 40px rgba(15, 23, 42, .16), 0 2px 6px rgba(15, 23, 42, .06);
  font-family: var(--app-font-family); font-size: var(--app-sidebar-font-size);
  animation: tbFlyIn .14s ease-out both;
}
@keyframes tbFlyIn { from { opacity: 0; transform: translateX(-4px); } to { opacity: 1; transform: none; } }
/* An invisible bridge to the sidebar so the pointer never falls into a gap. */
html[data-tb] .tb-flyout::before { content: ""; position: absolute; top: 0; bottom: 0; left: -10px; width: 10px; }
html[data-tb] .tb-flyout-head {
  flex-shrink: 0; display: flex; align-items: center; gap: 8px; padding: 10px 14px 8px;
  font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--tb-primary);
  border-bottom: 1px solid var(--tb-border);
}
html[data-tb] .tb-flyout-scroll { overflow-y: auto; min-height: 0; padding: 6px; scrollbar-width: thin; }
html[data-tb] .tb-flyout-list { list-style: none; margin: 0; padding: 0; }
html[data-tb] .tb-flyout-list.depth-1 { margin: 2px 0 4px 18px; padding-left: 6px; border-left: 1px solid var(--tb-border); }
html[data-tb] .tb-flyout-list.depth-2 { margin: 2px 0 4px 14px; padding-left: 6px; border-left: 1px solid var(--tb-border); }
html[data-tb] .tb-flyout-item {
  position: relative; display: flex; align-items: center; gap: 10px; width: 100%; min-height: 34px; padding: 6px 10px;
  border: 0; border-radius: 8px; background: transparent; color: var(--tb-text); text-align: left; text-decoration: none !important;
  font-size: var(--app-sidebar-font-size); font-family: var(--app-font-family); line-height: 1.3; cursor: pointer;
}
html[data-tb] .tb-flyout-item:hover,
html[data-tb] .tb-flyout-item:focus-visible { background: var(--tb-sidebar-hover); color: var(--tb-sidebar-hover-text); outline: none; }
html[data-tb] .tb-flyout-item:focus-visible { box-shadow: inset 0 0 0 2px var(--tb-primary); }
html[data-tb] .tb-flyout-item.active { background: var(--tb-sidebar-active-bg); color: var(--tb-sidebar-active-text); font-weight: 600; }
html[data-tb] .tb-flyout-item.active::after { content: ""; position: absolute; left: 0; top: 22%; bottom: 22%; width: 3px; border-radius: 0 3px 3px 0; background: var(--tb-menu-indicator); }
html[data-tb] .tb-flyout-icon { width: 18px; flex-shrink: 0; text-align: center; font-size: calc(var(--app-sidebar-icon-size) - 1px); opacity: .7; }
html[data-tb] .tb-flyout-item.active .tb-flyout-icon, html[data-tb] .tb-flyout-item:hover .tb-flyout-icon { opacity: 1; }
html[data-tb] .tb-flyout-label { flex: 1; min-width: 0; overflow-wrap: anywhere; }
html[data-tb] .tb-flyout-caret { margin-left: auto; font-size: 12px; opacity: .6; }
html[data-tb] .tb-flyout-group { font-weight: 600; }
html[data-tb] li.has-active > .tb-flyout-group { color: var(--tb-sidebar-active-text); }
html[data-tb] .tb-flyout.is-single { min-width: 0; padding: 4px; }
html[data-tb] .tb-flyout-solo { white-space: nowrap; font-weight: 600; }

/* ── 7. Layout: top menu (default) / sidebar / both — desktop only ──── */
@media (min-width: 992px) {
  html[data-tb][data-tb-layout="sidebar"] .top_hr_menu { display: none !important; }
  html[data-tb][data-tb-layout="sidebar"] .app-body { margin-top: var(--app-header-height); }

  html[data-tb][data-tb-layout="sidebar"] .sidebar,
  html[data-tb][data-tb-layout="combined"] .sidebar {
    display: flex !important;
    top: var(--app-header-height);
    height: calc(100vh - var(--app-header-height) - 30px);
    width: var(--tb-sb-w);
    z-index: 1019;
  }
  html[data-tb][data-tb-layout="sidebar"] .sidebar .sidebar-nav,
  html[data-tb][data-tb-layout="sidebar"] .sidebar .nav,
  html[data-tb][data-tb-layout="sidebar"] .sidebar .sidebar-minimizer,
  html[data-tb][data-tb-layout="combined"] .sidebar .sidebar-nav,
  html[data-tb][data-tb-layout="combined"] .sidebar .nav,
  html[data-tb][data-tb-layout="combined"] .sidebar .sidebar-minimizer { width: var(--tb-sb-w); }

  html[data-tb][data-tb-layout="sidebar"] .main,
  html[data-tb][data-tb-layout="combined"] .main { margin-left: calc(var(--tb-sb-w) + 20px) !important; }
  html[data-tb][data-tb-layout="combined"] .top_hr_menu { margin-left: var(--tb-sb-w); width: auto; }
  html[data-tb][data-tb-layout="combined"] .sidebar { top: var(--app-header-height); }

  /* Sidebar on the right. */
  html[data-tb][data-tb-sidebar-pos="right"][data-tb-layout="sidebar"] .sidebar,
  html[data-tb][data-tb-sidebar-pos="right"][data-tb-layout="combined"] .sidebar { left: auto; right: 0; }
  html[data-tb][data-tb-sidebar-pos="right"][data-tb-layout="sidebar"] .main,
  html[data-tb][data-tb-sidebar-pos="right"][data-tb-layout="combined"] .main {
    margin-left: 20px !important;
    margin-right: calc(var(--tb-sb-w) + 20px) !important;
  }
  html[data-tb][data-tb-sidebar-pos="right"][data-tb-layout="combined"] .top_hr_menu { margin-left: 0; margin-right: var(--tb-sb-w); }

  /* A sidebar that scrolls with the page instead of staying fixed. */
  html[data-tb][data-tb-layout="sidebar"] body:not(.sidebar-fixed) .sidebar,
  html[data-tb][data-tb-layout="combined"] body:not(.sidebar-fixed) .sidebar { position: absolute; height: auto; min-height: calc(100vh - var(--app-header-height)); }
}

/* ── 8. Footer ───────────────────────────────────────────────────────── */
html[data-tb] .tb-footer-text {
  color: rgba(255, 255, 255, .8);
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 12px;
}

/* ── 9. Date pickers ─────────────────────────────────────────────────── */
[data-tb] .datepicker table tr td.active,
[data-tb] .datepicker table tr td.active:hover,
[data-tb] .datepicker table tr td.active.active { background: var(--tb-primary) !important; color: #fff; }
[data-tb] .datepicker table tr td.today { background: var(--tb-primary-soft) !important; }
[data-tb] #ndp-nepali-box td.ndp-days-current,
[data-tb] .ndp-nepali-box td.active { background: var(--tb-primary) !important; color: #fff !important; }

html[data-tb][data-tb-picker-size="sm"] .datepicker.dropdown-menu,
html[data-tb][data-tb-picker-size="sm"] #ndp-nepali-box { font-size: 11px; }
html[data-tb][data-tb-picker-size="lg"] .datepicker.dropdown-menu,
html[data-tb][data-tb-picker-size="lg"] #ndp-nepali-box { font-size: 15px; }
html[data-tb][data-tb-picker-size="lg"] .datepicker table tr td,
html[data-tb][data-tb-picker-size="lg"] .datepicker table tr th { width: 34px; height: 32px; }

/* ── 10. Login page ──────────────────────────────────────────────────────
   Layouts: split screen (brand panel or photo beside the form) or a
   centred card (Theme & Branding → Login Page). Phones always get the card. */
html[data-tb] .login_wrap { background: var(--app-login-bg); padding: 24px 16px; min-height: 100vh; height: auto; }
html[data-tb][data-tb-login-bg="gradient"] .login_wrap { background: linear-gradient(135deg, var(--app-login-bg), var(--app-login-bg2)); }
html[data-tb][data-tb-login-bg="image"] .login_wrap { background-color: var(--app-login-bg); background-size: cover; background-position: center; }

html[data-tb] .login_grid {
  width: calc(var(--app-login-card-width) + 400px);
  max-width: 100%;
  height: auto;
  min-height: 560px;
  margin: 0;
  flex-direction: row-reverse;            /* panel on the left, form on the right */
  align-items: stretch;
  border-radius: 16px;
  overflow: hidden;
  background: var(--app-login-card-bg);
  box-shadow: 0 24px 48px rgba(15, 23, 42, .12), 0 2px 6px rgba(15, 23, 42, .06);
}
html[data-tb][data-tb-login-banner="0"] .login_grid { width: var(--app-login-card-width); min-height: 0; }
html[data-tb][data-tb-login-banner="0"] .login_left { display: none; }

/* Form side */
html[data-tb] .login_right {
  flex: 1 1 auto;
  flex-flow: column nowrap;
  justify-content: center;
  height: auto;
  padding: 40px 44px 28px;
  border-radius: 0;
  background: var(--app-login-card-bg);
  color: #1f2937;
}
html[data-tb] .login_logo { height: auto; text-align: left; margin-bottom: 18px; }
html[data-tb] .login_logo img { max-height: var(--app-login-logo-size); max-width: 220px; object-fit: contain; }
html[data-tb] .login_logo h5 { margin: 10px 0 0; color: var(--tb-primary); font-size: 15px; font-weight: 600; }
html[data-tb] .login_logo .tb-login-tagline { display: block; font-size: 12.5px; color: #64748b; margin-top: 2px; }
/* The brand panel already shows the logo and name. */
html[data-tb][data-tb-login-banner="1"][data-tb-login-panel="brand"] .login_logo { display: none; }

html[data-tb] .login_right h6 { margin: 0; font-size: 22px; font-weight: 700; color: #0f172a; font-family: var(--app-font-family); }
html[data-tb] .login_right > .w-100 > small { margin: 4px 0 18px; font-size: 13.5px; color: #64748b; }
html[data-tb] .login_right > .w-100 > br { display: none; }
html[data-tb] .login_right label { font-size: 13px; font-weight: 600; color: #334155; margin-bottom: 6px; font-family: var(--app-font-family); }
html[data-tb] .login_right .form-group { margin-bottom: 16px; }
html[data-tb] .login_right .form-control {
  height: 44px;
  padding: 0 14px !important;
  font-size: 14px;
  border-radius: 10px !important;
  border: 1px solid #cbd5e1;
  background: #fff;
  color: #0f172a;
}
html[data-tb] .login_right .input-group-prepend:empty { display: none; }
html[data-tb] .login_right .input-group > .form-control { margin-left: 0 !important; }
html[data-tb] .login_right .input-group .form-control:not(:last-child) { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
html[data-tb] .login_right .input-group-append .btn {
  height: 44px; padding: 0 14px; border: 1px solid #cbd5e1; border-left: 0;
  border-radius: 0 10px 10px 0; background: #f8fafc; color: #475569;
}
html[data-tb] .login_right .form-control:focus {
  border-color: var(--app-login-button-bg);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--app-login-button-bg) 22%, transparent);
}
html[data-tb] .login_right .btn_login {
  height: 44px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  background: var(--app-login-button-bg);
  border-color: var(--app-login-button-bg);
  color: var(--app-login-button-text);
}
html[data-tb] .login_right .btn_login:hover:not(:disabled) { background: color-mix(in srgb, var(--app-login-button-bg) 85%, #000); }
html[data-tb] .login_right .btn_login:disabled { opacity: .8; cursor: progress; }
html[data-tb] .login_right .btn_attendance { height: 40px; border-radius: 10px; margin-top: 10px !important; }
html[data-tb] .login_right .text-center small { text-align: right; font-size: 13px; color: #64748b; }
html[data-tb] .login_right .text-primary { color: var(--app-login-button-bg) !important; }
html[data-tb] .login_right .copyright { align-self: stretch; margin-top: 24px; padding-top: 14px; border-top: 1px solid #eef2f7; }
html[data-tb] .login_right .copyright small { font-size: 12px; color: #94a3b8; margin: 0; }
html[data-tb] .login_right a:focus-visible,
html[data-tb] .login_right .btn:focus-visible,
html[data-tb] .tb-login-lang button:focus-visible { outline: 2px solid var(--app-login-button-bg); outline-offset: 2px; }

html[data-tb][data-tb-login-input="filled"] .login_right .form-control { background: #f1f5f9; border-color: transparent; }
html[data-tb][data-tb-login-input="underline"] .login_right .form-control {
  border-width: 0 0 2px;
  border-radius: 0 !important;
  background: transparent;
  border-color: var(--tb-input-border);
  padding-left: 2px;
}
html[data-tb][data-tb-login-input="underline"] .login_right .form-control:focus { box-shadow: none; border-color: var(--app-login-button-bg); }
html[data-tb][data-tb-login-input="underline"] .login_right .input-group-append .btn { border-width: 0 0 2px; border-radius: 0; background: transparent; }

/* Brand panel / photo */
html[data-tb] .login_left { width: 400px; height: auto; flex-shrink: 0; }
html[data-tb] .login_left .media_wrapper { height: 100%; }
html[data-tb] .login_left .media_wrapper img { width: 100%; height: 100%; object-fit: cover; opacity: 1; }
html[data-tb] .tb-login-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  padding: 48px 40px 32px;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(155deg, var(--tb-primary), var(--tb-primary-dark));
}
html[data-tb] .tb-login-panel::before,
html[data-tb] .tb-login-panel::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, .07);
  pointer-events: none;
}
html[data-tb] .tb-login-panel::before { width: 320px; height: 320px; right: -120px; top: -110px; }
html[data-tb] .tb-login-panel::after { width: 220px; height: 220px; left: -90px; bottom: -80px; }
html[data-tb] .tb-login-panel-logo {
  display: inline-flex;
  align-self: flex-start;
  padding: 12px 14px;
  margin-bottom: 26px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .15);
}
html[data-tb] .tb-login-panel-logo img { max-height: var(--app-login-logo-size); max-width: 200px; object-fit: contain; }
html[data-tb] .tb-login-panel-name { font-size: 26px; font-weight: 700; line-height: 1.2; font-family: var(--app-font-family); }
html[data-tb] .tb-login-panel-org { margin-top: 6px; font-size: 14px; opacity: .85; }
html[data-tb] .tb-login-panel-tagline { margin: 16px 0 0; max-width: 30ch; font-size: 15px; line-height: 1.6; opacity: .92; }
html[data-tb] .tb-login-panel-foot { margin-top: auto; padding-top: 28px; font-size: 12px; opacity: .72; }

/* Dark card */
html[data-tb][data-tb-login-mode="dark"] .login_grid,
html[data-tb][data-tb-login-mode="dark"] .login_right { background: #111827; }
html[data-tb][data-tb-login-mode="dark"] .login_right,
html[data-tb][data-tb-login-mode="dark"] .login_right h6,
html[data-tb][data-tb-login-mode="dark"] .login_right label,
html[data-tb][data-tb-login-mode="dark"] .login_right small { color: #e5e7eb !important; }
html[data-tb][data-tb-login-mode="dark"] .login_right > .w-100 > small,
html[data-tb][data-tb-login-mode="dark"] .login_right .copyright small { color: #94a3b8 !important; }
html[data-tb][data-tb-login-mode="dark"] .login_right .form-control { background: #0f172a; border-color: #374151; color: #f9fafb; }
html[data-tb][data-tb-login-mode="dark"] .login_right .input-group-append .btn { background: #1f2937; border-color: #374151; color: #cbd5e1; }
html[data-tb][data-tb-login-mode="dark"] .login_right .copyright { border-top-color: #1f2937; }

/* Language selector */
.tb-login-lang { position: absolute; top: 14px; right: 16px; display: flex; gap: 4px; z-index: 2; }
.tb-login-lang button {
  border: 1px solid #d1d5db;
  background: transparent;
  border-radius: 6px;
  font-size: 11.5px;
  padding: 3px 9px;
  cursor: pointer;
  color: inherit;
}
.tb-login-lang button.active { background: var(--app-login-button-bg, #346cb0); border-color: transparent; color: var(--app-login-button-text, #fff); }

/* Tablet: narrower panel. Phone: card only, the logo returns to the form. */
@media (max-width: 991px) {
  html[data-tb] .login_grid { width: calc(var(--app-login-card-width) + 300px); }
  html[data-tb] .login_left { width: 300px; }
  html[data-tb] .tb-login-panel { padding: 36px 28px 24px; }
}
@media (max-width: 767px) {
  html[data-tb] .login_wrap { padding: 16px 12px; align-items: flex-start; }
  html[data-tb] .login_grid { width: 100%; min-height: 0; border-radius: 14px; }
  html[data-tb] .login_left { display: none; }
  html[data-tb][data-tb-login-banner="1"][data-tb-login-panel="brand"] .login_logo { display: block; }
  html[data-tb] .login_right { padding: 28px 22px 20px; }
  html[data-tb] .login_right h6 { font-size: 20px; }
}

/* ── 10c. Login page: full-screen hero layout ─────────────────────────────
   Theme & Branding → Login Page → Layout "Full-screen hero"
   (Login.js renderHero). Left: brand story over an image or gradient.
   Right: sign-in card. Below 992px the left panel is hidden. */
[data-tb] .tb-hero-login {
  --hero-bg: var(--app-login-bg);
  --hero-card: var(--app-login-card-bg);
  --hero-text: #0f172a;
  --hero-muted: #64748b;
  --hero-line: #e2e8f0;
  --hero-input-bg: color-mix(in srgb, var(--app-login-button-bg) 6%, #fff);
  --hero-input-line: color-mix(in srgb, var(--app-login-button-bg) 16%, #e2e8f0);
  display: flex;
  min-height: 100vh;
  font-family: var(--app-font-family);
  color: var(--hero-text);
  background: var(--hero-bg);
}
[data-tb] .tb-hero-login.is-dark {
  --hero-bg: #0b1220;
  --hero-card: #111827;
  --hero-text: #e5e7eb;
  --hero-muted: #94a3b8;
  --hero-line: #1f2937;
  --hero-input-bg: #0f172a;
  --hero-input-line: #334155;
  color-scheme: dark;
}

/* Left panel */
[data-tb] .tb-hero-left {
  position: relative;
  flex: 0 0 58%;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding: 48px;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(160deg, var(--app-login-hero-1), var(--app-login-hero-2));
  background-size: cover;
  background-position: center;
}
[data-tb] .tb-hero-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, var(--app-login-hero-1), var(--app-login-hero-2));
  opacity: 1;
  pointer-events: none;
}
[data-tb] .tb-hero-left.has-image .tb-hero-shade { opacity: var(--app-login-hero-overlay); }
/* Without an image: a quiet dot grid so the panel is not flat. */
[data-tb] .tb-hero-left:not(.has-image) .tb-hero-shade::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .09) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: linear-gradient(180deg, transparent, #000 35%, #000 75%, transparent);
}
[data-tb] .tb-hero-left > *:not(.tb-hero-shade):not(.tb-hero-glow):not(.tb-hero-art):not(.tb-hris) { position: relative; }

[data-tb] .tb-hero-brand { display: flex; align-items: center; gap: 16px; }
[data-tb] .tb-hero-logo {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 56px; height: 56px; padding: 8px; border-radius: 14px;
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .22);
  backdrop-filter: blur(6px);
}
[data-tb] .tb-hero-logo img { max-height: 40px; max-width: 140px; object-fit: contain; }
[data-tb] .tb-hero-brand-text { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
[data-tb] .tb-hero-badge {
  display: inline-block; padding: 2px 12px; border-radius: 999px; font-size: 12px; font-weight: 600;
  border: 1px solid rgba(255, 255, 255, .28);
  background: rgba(255, 255, 255, .14);
}
[data-tb] .tb-hero-org { font-size: 19px; font-weight: 700; line-height: 1.2; }

[data-tb] .tb-hero-body { margin: auto 0; padding: 40px 0; max-width: 680px; }
[data-tb] .tb-hero-chip {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 22px;
  padding: 7px 14px; border-radius: 8px; font-size: 13.5px; font-weight: 600;
  color: #6ee7b7; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16);
}
[data-tb] .tb-hero-headline {
  margin: 0 0 18px; font-size: clamp(30px, 3.1vw, 44px); line-height: 1.16; font-weight: 800;
  letter-spacing: -.02em; color: #fff; font-family: var(--app-font-family);
}
[data-tb] .tb-hero-desc { margin: 0; max-width: 60ch; font-size: 17px; line-height: 1.65; color: rgba(255, 255, 255, .85); }
[data-tb] .tb-hero-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-top: 34px; }
[data-tb] .tb-hero-feature {
  padding: 16px 18px; border-radius: 12px;
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .16);
  backdrop-filter: blur(4px);
}
[data-tb] .tb-hero-feature-title { display: flex; align-items: center; gap: 9px; font-size: 14.5px; font-weight: 700; color: #7dd3fc; }
[data-tb] .tb-hero-feature:first-child .tb-hero-feature-title { color: #6ee7b7; }
[data-tb] .tb-hero-feature-text { margin-top: 6px; font-size: 13px; color: rgba(255, 255, 255, .78); }
[data-tb] .tb-hero-foot {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .14);
  font-size: 13.5px; color: rgba(255, 255, 255, .78);
}
[data-tb] .tb-hero-foot .fa-shield { color: #6ee7b7; margin-right: 6px; }

/* Right panel */
[data-tb] .tb-hero-right {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 100vh;
  padding: 20px 48px 18px;
  background: var(--hero-bg);
}
[data-tb] .tb-hero-tools { display: flex; justify-content: flex-end; gap: 6px; min-height: 40px; }
[data-tb] .tb-hero-tool {
  display: inline-flex; align-items: center; gap: 6px; height: 38px; min-width: 38px; padding: 0 10px;
  border: 1px solid transparent; border-radius: 10px; background: transparent; color: var(--hero-muted);
  font-size: 13px; cursor: pointer;
}
[data-tb] .tb-hero-tool .fa { font-size: 17px; }
[data-tb] .tb-hero-tool:hover { background: color-mix(in srgb, var(--hero-text) 7%, transparent); color: var(--hero-text); }
[data-tb] .tb-hero-tool:focus-visible { outline: 2px solid var(--app-login-button-bg); outline-offset: 2px; }
[data-tb] .tb-hero-tool-text { font-size: 12.5px; }

[data-tb] .tb-hero-main { width: 100%; max-width: var(--app-login-card-width); margin: auto; padding: 8px 0; }
[data-tb] .tb-hero-mobile-brand { display: none; }
[data-tb] .tb-hero-app h1 { margin: 0; font-size: 30px; font-weight: 800; letter-spacing: -.01em; color: var(--hero-text); font-family: var(--app-font-family); }
[data-tb] .tb-hero-app p { margin: 6px 0 0; font-size: 15.5px; color: var(--hero-muted); }
[data-tb] .tb-hero-card {
  margin-top: 22px; padding: 30px 34px 26px; border-radius: 16px;
  background: var(--hero-card); border: 1px solid var(--hero-line);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 12px 32px rgba(15, 23, 42, .06);
}
[data-tb] .tb-hero-title { margin: 0; font-size: 23px; font-weight: 700; color: var(--hero-text); font-family: var(--app-font-family); }
[data-tb] .tb-hero-subtitle { margin: 8px 0 0; font-size: 15px; line-height: 1.6; color: var(--hero-muted); }

[data-tb] .tb-hero-alert {
  display: flex; gap: 12px; align-items: flex-start; margin-top: 24px; padding: 14px 16px; border-radius: 10px;
  background: #fff7ed; border: 1px solid #fed7aa; color: #7c2d12; font-size: 14.5px; line-height: 1.55;
}
[data-tb] .tb-hero-alert .fa { color: #d97706; font-size: 17px; margin-top: 2px; }
[data-tb] .is-dark .tb-hero-alert { background: #2a1d0b; border-color: #78350f; color: #fde68a; }
[data-tb] .tb-hero-errors:empty { display: none; }
[data-tb] .tb-hero-errors { margin-top: 16px; }
[data-tb] .tb-hero-errors ul, [data-tb] .tb-hero-errors .error-messages { margin: 0; padding: 12px 16px 12px 32px; border-radius: 10px; background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; font-size: 14px; }

[data-tb] .tb-hero-card form { margin-top: 20px; }
[data-tb] .tb-hero-field { margin-bottom: 16px; }
[data-tb] .tb-hero-field label { display: block; margin-bottom: 8px; font-size: 14.5px; font-weight: 600; color: var(--hero-text); font-family: var(--app-font-family); }
[data-tb] .tb-req { color: #dc2626; margin-left: 3px; }
[data-tb] .tb-hero-input { position: relative; display: flex; align-items: center; }
[data-tb] .tb-hero-input > .fa { position: absolute; left: 16px; font-size: 16px; color: var(--hero-muted); pointer-events: none; }
[data-tb] .tb-hero-input .form-control {
  width: 100%; height: 52px; padding: 0 48px 0 46px !important; border-radius: 10px;
  border: 1px solid var(--hero-input-line); background: var(--hero-input-bg); color: var(--hero-text);
  font-size: 15.5px; box-shadow: none;
}
[data-tb][data-tb-login-input="outline"] .tb-hero-input .form-control { background: var(--hero-card); }
[data-tb][data-tb-login-input="underline"] .tb-hero-input .form-control { border-width: 0 0 2px; border-radius: 0; background: transparent; }
[data-tb] .tb-hero-input .form-control:focus {
  border-color: var(--app-login-button-bg);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--app-login-button-bg) 18%, transparent);
}
[data-tb] .tb-hero-eye {
  position: absolute; right: 8px; width: 38px; height: 38px; border: 0; border-radius: 8px;
  background: transparent; color: var(--hero-muted); cursor: pointer;
}
[data-tb] .tb-hero-eye:hover { color: var(--hero-text); background: color-mix(in srgb, var(--hero-text) 6%, transparent); }
[data-tb] .tb-hero-eye:focus-visible { outline: 2px solid var(--app-login-button-bg); }
[data-tb] .tb-hero-qr { text-align: center; margin-bottom: 12px; }
[data-tb] .tb-hero-qr img { max-width: 180px; }
[data-tb] .tb-hero-qr small { display: block; color: var(--hero-muted); margin-top: 6px; }

[data-tb] .tb-hero-row { display: flex; justify-content: flex-end; margin: -2px 0 18px; }
[data-tb] .tb-hero-link { font-size: 15px; font-weight: 600; color: var(--app-login-button-bg); }
[data-tb] .tb-hero-link:hover { text-decoration: underline; color: color-mix(in srgb, var(--app-login-button-bg) 80%, #000); }
[data-tb] .is-dark .tb-hero-link { color: color-mix(in srgb, var(--app-login-button-bg) 55%, #fff); }
[data-tb] .tb-hero-link:focus-visible { outline: 2px solid var(--app-login-button-bg); outline-offset: 2px; border-radius: 4px; }

[data-tb] .tb-hero-submit {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 54px;
  border: 0; border-radius: 10px; font-size: 16.5px; font-weight: 700;
  background: var(--app-login-button-bg); color: var(--app-login-button-text);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--app-login-button-bg) 30%, transparent);
}
[data-tb] .tb-hero-submit:hover:not(:disabled) { background: color-mix(in srgb, var(--app-login-button-bg) 86%, #000); color: var(--app-login-button-text); }
[data-tb] .tb-hero-submit:focus-visible { outline: 3px solid color-mix(in srgb, var(--app-login-button-bg) 40%, transparent); outline-offset: 2px; }
[data-tb] .tb-hero-submit:disabled { opacity: .85; cursor: progress; }
[data-tb] .tb-hero-secondary {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 46px; margin-top: 12px;
  border-radius: 10px; border: 1px solid var(--hero-input-line); background: transparent; color: var(--hero-text); font-weight: 600;
}
[data-tb] .tb-hero-secondary:hover { background: color-mix(in srgb, var(--hero-text) 5%, transparent); }

[data-tb] .tb-hero-note {
  display: flex; gap: 10px; align-items: flex-start; margin-top: 22px; padding: 12px 16px; border-radius: 10px;
  background: color-mix(in srgb, var(--hero-text) 4%, transparent); color: var(--hero-muted); font-size: 14px; line-height: 1.6;
}
[data-tb] .tb-hero-note .fa { margin-top: 3px; }
[data-tb] .tb-hero-copy {
  padding-top: 18px; border-top: 1px solid var(--hero-line);
  text-align: center; font-size: 14px; color: var(--hero-muted);
}

/* Large screens: keep the card comfortable. Tablet and phone: sign-in only. */
@media (max-width: 1199px) {
  [data-tb] .tb-hero-left { flex-basis: 50%; padding: 36px; }
  [data-tb] .tb-hero-right { padding: 24px 32px 20px; }
}
@media (max-width: 991px) {
  [data-tb] .tb-hero-left { display: none; }
  [data-tb] .tb-hero-mobile-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; font-weight: 700; color: var(--hero-text); }
  [data-tb] .tb-hero-mobile-brand img { max-height: 36px; max-width: 120px; object-fit: contain; }
}
@media (max-width: 575px) {
  [data-tb] .tb-hero-right { padding: 14px 14px 16px; }
  [data-tb] .tb-hero-main { padding: 8px 0 16px; }
  [data-tb] .tb-hero-app h1 { font-size: 24px; }
  [data-tb] .tb-hero-card { margin-top: 18px; padding: 24px 20px 22px; border-radius: 14px; }
  [data-tb] .tb-hero-title { font-size: 20px; }
  [data-tb] .tb-hero-input .form-control { height: 48px; }
  [data-tb] .tb-hero-submit { height: 50px; }
}

/* ── 10d. Hero login: polish (glow, illustration, highlight, motion) ─────
   Theme & Branding → Login Page: Highlight words, Background illustration,
   Button style, Animations. Motion is off for users who prefer reduced
   motion (section 11) and when Animations is switched off. */

/* Moving colour glow from the theme colours (shown when no image is uploaded). */
[data-tb] .tb-hero-glow { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
[data-tb] .tb-hero-glow span { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; }
[data-tb] .tb-hero-glow .g1 { width: 55%; height: 55%; left: -12%; top: -10%; background: var(--app-login-hero-1); opacity: .9; }
[data-tb] .tb-hero-glow .g2 { width: 45%; height: 45%; right: -8%; top: 18%; background: var(--tb-accent); opacity: .38; }
[data-tb] .tb-hero-glow .g3 { width: 50%; height: 50%; left: 22%; bottom: -18%; background: var(--tb-primary); opacity: .45; }
[data-tb] .tb-hero-glow .grid {
  inset: 0; width: auto; height: auto; border-radius: 0; filter: none; opacity: 1;
  background-image:
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at 70% 40%, #000 0%, transparent 70%);
}
/* The plain dot grid from 10c is replaced by the glow. */
[data-tb] .tb-hero-left:not(.has-image) .tb-hero-shade { opacity: .92; }
[data-tb] .tb-hero-left:not(.has-image) .tb-hero-shade::after { display: none; }

/* Floating dashboard illustration (decorative). */
[data-tb] .tb-hero-art {
  position: absolute; right: 4%; top: 41%; width: 36%; max-width: 400px; aspect-ratio: 1 / 1;
  transform: translateY(-50%); pointer-events: none; opacity: .62;
}
[data-tb] .tb-hero-art .art-card {
  position: absolute; padding: 12px; border-radius: 14px;
  background: rgba(255, 255, 255, .09); border: 1px solid rgba(255, 255, 255, .18);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .25); backdrop-filter: blur(10px);
}
[data-tb] .tb-hero-art .line { display: block; height: 7px; border-radius: 4px; background: rgba(255, 255, 255, .38); }
[data-tb] .tb-hero-art .line.dim { background: rgba(255, 255, 255, .18); margin-top: 6px; height: 5px; }
[data-tb] .tb-hero-art .w40 { width: 40%; } [data-tb] .tb-hero-art .w50 { width: 50%; }
[data-tb] .tb-hero-art .w60 { width: 60%; } [data-tb] .tb-hero-art .w70 { width: 70%; }
[data-tb] .tb-hero-art .art-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
[data-tb] .tb-hero-art .art-head .dot { width: 10px; height: 10px; border-radius: 50%; background: #6ee7b7; }
[data-tb] .tb-hero-art .art-chart { left: 0; top: 4%; width: 68%; }
[data-tb] .tb-hero-art .art-bars { display: flex; align-items: flex-end; gap: 7%; height: 90px; padding: 0 2%; }
[data-tb] .tb-hero-art .art-bars span { flex: 1; border-radius: 5px 5px 2px 2px; background: linear-gradient(180deg, var(--tb-accent), rgba(255, 255, 255, .25)); }
[data-tb] .tb-hero-art .art-people { right: 0; top: 36%; width: 64%; }
[data-tb] .tb-hero-art .art-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; }
[data-tb] .tb-hero-art .art-row + .art-row { border-top: 1px solid rgba(255, 255, 255, .1); }
[data-tb] .tb-hero-art .avatar { width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%; background: linear-gradient(135deg, #fbcfe8, #a78bfa); }
[data-tb] .tb-hero-art .avatar.a1 { background: linear-gradient(135deg, #a7f3d0, #38bdf8); }
[data-tb] .tb-hero-art .avatar.a2 { background: linear-gradient(135deg, #fde68a, #fb923c); }
[data-tb] .tb-hero-art .lines { flex: 1; }
[data-tb] .tb-hero-art .pill { width: 34px; height: 12px; border-radius: 6px; background: rgba(110, 231, 183, .55); }
[data-tb] .tb-hero-art .pill.p1 { background: rgba(253, 230, 138, .55); }
[data-tb] .tb-hero-art .pill.p2 { background: rgba(125, 211, 252, .55); }
[data-tb] .tb-hero-art .art-calendar { left: 22%; bottom: 4%; width: 46%; }
[data-tb] .tb-hero-art .art-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
[data-tb] .tb-hero-art .art-days span { aspect-ratio: 1; border-radius: 4px; background: rgba(255, 255, 255, .12); }
[data-tb] .tb-hero-art .art-days span.mark { background: rgba(110, 231, 183, .45); }
[data-tb] .tb-hero-art .art-days span.on { background: var(--tb-accent); box-shadow: 0 0 0 3px rgba(255, 255, 255, .15); }
[data-tb] .tb-hero-art .art-badge {
  position: absolute; right: 8%; bottom: 14%; width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 18px; color: #064e3b;
  background: #6ee7b7; box-shadow: 0 10px 24px rgba(16, 185, 129, .45);
}
/* Text stays above the illustration. */
[data-tb] .tb-hero-brand, [data-tb] .tb-hero-body, [data-tb] .tb-hero-foot { z-index: 1; }

/* Chip with a live dot */
[data-tb] .tb-hero-chip-dot {
  position: relative; width: 8px; height: 8px; border-radius: 50%; background: #34d399; flex-shrink: 0;
  box-shadow: 0 0 0 0 rgba(52, 211, 153, .6);
}

/* Highlighted words in the headline */
[data-tb] .tb-hero-hl {
  background: linear-gradient(90deg, color-mix(in srgb, var(--tb-accent) 75%, #fff), #a7f3d0);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Feature cards: icon tile, lift on hover */
[data-tb] .tb-hero-feature {
  display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: start;
  transition: transform .2s ease, background-color .2s ease, border-color .2s ease;
}
[data-tb] .tb-hero-feature:hover { transform: translateY(-2px); background: rgba(255, 255, 255, .11); border-color: rgba(255, 255, 255, .26); }
[data-tb] .tb-hero-feature-icon {
  grid-row: span 2; display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 10px; font-size: 16px; color: #fff;
  background: linear-gradient(135deg, var(--tb-accent), color-mix(in srgb, var(--tb-primary) 70%, #000));
  box-shadow: 0 6px 14px rgba(0, 0, 0, .2);
}
[data-tb] .tb-hero-feature:nth-child(2) .tb-hero-feature-icon { background: linear-gradient(135deg, #34d399, #0f766e); }
[data-tb] .tb-hero-feature:nth-child(3) .tb-hero-feature-icon { background: linear-gradient(135deg, #fbbf24, #c2410c); }
[data-tb] .tb-hero-feature .tb-hero-feature-title,
[data-tb] .tb-hero-feature:first-child .tb-hero-feature-title { color: #fff; font-size: 14.5px; }
[data-tb] .tb-hero-feature-text { margin-top: 3px; }

/* Right panel: soft brand glows behind the card */
[data-tb] .tb-hero-right { overflow: hidden; isolation: isolate; }
[data-tb] .tb-hero-right::before,
[data-tb] .tb-hero-right::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; filter: blur(60px); pointer-events: none; }
[data-tb] .tb-hero-right::before { width: 420px; height: 420px; right: -140px; top: -120px; background: color-mix(in srgb, var(--app-login-button-bg) 16%, transparent); }
[data-tb] .tb-hero-right::after { width: 360px; height: 360px; left: -140px; bottom: -120px; background: color-mix(in srgb, var(--tb-accent) 14%, transparent); }

[data-tb] .tb-hero-app h1 {
  background: linear-gradient(90deg, var(--hero-text) 10%, var(--app-login-button-bg));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Card with a soft gradient edge */
[data-tb] .tb-hero-card {
  border: 1px solid transparent;
  background:
    linear-gradient(var(--hero-card), var(--hero-card)) padding-box,
    linear-gradient(135deg, color-mix(in srgb, var(--app-login-button-bg) 35%, var(--hero-line)), var(--hero-line) 40%, color-mix(in srgb, var(--tb-accent) 30%, var(--hero-line))) border-box;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 24px 48px -12px rgba(15, 23, 42, .14);
}
[data-tb] .tb-hero-input:focus-within > .fa { color: var(--app-login-button-bg); }
[data-tb] .tb-hero-input .form-control { transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease; }
[data-tb] .tb-hero-input .form-control:focus { background: var(--hero-card); }

/* Sign-in button: gradient with a shine on hover */
[data-tb] .tb-hero-submit { position: relative; overflow: hidden; transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease; }
[data-tb][data-tb-login-button="gradient"] .tb-hero-submit,
[data-tb][data-tb-login-button="gradient"] .tb-hero-submit:hover:not(:disabled) {
  background: linear-gradient(135deg, var(--app-login-button-bg), color-mix(in srgb, var(--app-login-button-bg) 55%, var(--tb-accent)));
}
[data-tb] .tb-hero-submit:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 12px 24px color-mix(in srgb, var(--app-login-button-bg) 38%, transparent);
}
[data-tb] .tb-hero-submit::after {
  content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .28), transparent);
  transform: skewX(-20deg); pointer-events: none;
}
[data-tb] .tb-hero-submit .fa-arrow-right { transition: transform .15s ease; }
[data-tb] .tb-hero-submit:hover .fa-arrow-right { transform: translateX(3px); }

/* Motion */
@keyframes tbHeroUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes tbHeroDrift { from { transform: translate(0, 0) scale(1); } to { transform: translate(6%, 5%) scale(1.08); } }
@keyframes tbHeroFloat { from { transform: translateY(0); } to { transform: translateY(-10px); } }
@keyframes tbHeroPulse { 0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, .55); } 70% { box-shadow: 0 0 0 8px rgba(52, 211, 153, 0); } 100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); } }
@keyframes tbHeroShine { from { left: -60%; } to { left: 130%; } }

[data-tb][data-tb-login-anim="1"] .tb-hero-card,
[data-tb][data-tb-login-anim="1"] .tb-hero-app { animation: tbHeroUp .55s cubic-bezier(.2, .7, .2, 1) both; }
[data-tb][data-tb-login-anim="1"] .tb-hero-card { animation-delay: .08s; }
[data-tb][data-tb-login-anim="1"] .tb-hero-body > * { animation: tbHeroUp .6s cubic-bezier(.2, .7, .2, 1) both; }
[data-tb][data-tb-login-anim="1"] .tb-hero-body > :nth-child(2) { animation-delay: .08s; }
[data-tb][data-tb-login-anim="1"] .tb-hero-body > :nth-child(3) { animation-delay: .16s; }
[data-tb][data-tb-login-anim="1"] .tb-hero-body > :nth-child(4) { animation-delay: .24s; }
[data-tb][data-tb-login-anim="1"] .tb-hero-glow .g1 { animation: tbHeroDrift 16s ease-in-out infinite alternate; }
[data-tb][data-tb-login-anim="1"] .tb-hero-glow .g2 { animation: tbHeroDrift 19s ease-in-out infinite alternate-reverse; }
[data-tb][data-tb-login-anim="1"] .tb-hero-glow .g3 { animation: tbHeroDrift 22s ease-in-out infinite alternate; }
[data-tb][data-tb-login-anim="1"] .tb-hero-art .art-chart { animation: tbHeroFloat 6s ease-in-out infinite alternate; }
[data-tb][data-tb-login-anim="1"] .tb-hero-art .art-people { animation: tbHeroFloat 7s ease-in-out .8s infinite alternate; }
[data-tb][data-tb-login-anim="1"] .tb-hero-art .art-calendar { animation: tbHeroFloat 8s ease-in-out 1.6s infinite alternate; }
[data-tb][data-tb-login-anim="1"] .tb-hero-chip-dot { animation: tbHeroPulse 2s ease-out infinite; }
[data-tb][data-tb-login-anim="1"] .tb-hero-submit:hover:not(:disabled)::after { animation: tbHeroShine .8s ease; }

/* Narrower desktop: the illustration steps back so text stays readable. */
@media (max-width: 1399px) { html[data-tb] .tb-hero-art { display: none; } }

/* ── 10e. Hero login: HRIS scene background (heroParts.js HrisScene) ─────
   Theme & Branding → Login Page → Left panel background → "HRIS scene".
   ≥1400px: the scene fills the right half and the text keeps the left half.
   Narrower: the scene stays as a faint texture behind the text. */
[data-tb] .tb-hris { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
[data-tb] .tb-hris .hs-network { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .22; }
[data-tb] .tb-hris .hs-network path { fill: none; stroke: #fff; stroke-width: 1; stroke-dasharray: 3 5; vector-effect: non-scaling-stroke; }
[data-tb] .tb-hris .hs-network circle { fill: var(--tb-accent); }

[data-tb] .tb-hris .hs-card {
  position: absolute; padding: 12px; border-radius: 14px;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2);
  box-shadow: 0 22px 44px rgba(0, 0, 0, .28); backdrop-filter: blur(12px);
}
[data-tb] .tb-hris .l { display: block; height: 7px; border-radius: 4px; background: rgba(255, 255, 255, .45); }
[data-tb] .tb-hris .l + .l { margin-top: 6px; }
[data-tb] .tb-hris .l.dim { background: rgba(255, 255, 255, .2); height: 5px; }
[data-tb] .tb-hris .w30 { width: 30%; } [data-tb] .tb-hris .w40 { width: 40%; } [data-tb] .tb-hris .w50 { width: 50%; }
[data-tb] .tb-hris .w60 { width: 60%; } [data-tb] .tb-hris .w70 { width: 70%; } [data-tb] .tb-hris .w80 { width: 80%; }
[data-tb] .tb-hris .hs-avatar { display: inline-flex; flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; overflow: hidden; background: linear-gradient(135deg, #c4b5fd, #7c3aed); }
[data-tb] .tb-hris .hs-avatar svg { width: 100%; height: 100%; fill: rgba(255, 255, 255, .85); }
[data-tb] .tb-hris .hs-avatar.a1 { background: linear-gradient(135deg, #99f6e4, #0891b2); }
[data-tb] .tb-hris .hs-avatar.a2 { background: linear-gradient(135deg, #fde68a, #ea580c); }
[data-tb] .tb-hris .hs-avatar.a3 { background: linear-gradient(135deg, var(--tb-accent), var(--tb-primary)); }
[data-tb] .tb-hris .hs-avatar.big { width: 40px; height: 40px; margin: -20px auto 8px; border: 3px solid rgba(255, 255, 255, .35); display: flex; }

/* Dashboard window */
[data-tb] .tb-hris .hs-dash { right: 6%; top: 23%; width: 42%; max-width: 520px; padding: 0; overflow: hidden; }
[data-tb] .tb-hris .hs-titlebar { display: flex; align-items: center; gap: 5px; padding: 8px 10px; background: rgba(255, 255, 255, .08); border-bottom: 1px solid rgba(255, 255, 255, .12); }
[data-tb] .tb-hris .hs-titlebar > span { width: 8px; height: 8px; border-radius: 50%; background: #f87171; }
[data-tb] .tb-hris .hs-titlebar > span:nth-child(2) { background: #fbbf24; }
[data-tb] .tb-hris .hs-titlebar > span:nth-child(3) { background: #34d399; }
[data-tb] .tb-hris .hs-url { flex: 1; height: 8px; margin-left: 10px; border-radius: 4px; background: rgba(255, 255, 255, .14); }
[data-tb] .tb-hris .hs-dash-body { display: flex; }
[data-tb] .tb-hris .hs-side { display: flex; flex-direction: column; gap: 12px; padding: 12px 10px; border-right: 1px solid rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .55); font-size: 13px; text-align: center; }
[data-tb] .tb-hris .hs-side .on { color: #fff; background: var(--tb-accent); border-radius: 6px; padding: 4px; margin: -4px; }
[data-tb] .tb-hris .hs-main { flex: 1; min-width: 0; padding: 12px; }
[data-tb] .tb-hris .hs-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
[data-tb] .tb-hris .hs-kpi { padding: 8px; border-radius: 9px; background: rgba(255, 255, 255, .08); }
[data-tb] .tb-hris .hs-kpi i { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-bottom: 7px; border-radius: 6px; font-size: 11px; color: #fff; }
[data-tb] .tb-hris .hs-kpi.k1 i { background: var(--tb-accent); }
[data-tb] .tb-hris .hs-kpi.k2 i { background: #10b981; }
[data-tb] .tb-hris .hs-kpi.k3 i { background: #f59e0b; }
[data-tb] .tb-hris .hs-chart { margin-top: 10px; height: 64px; border-radius: 9px; background: rgba(255, 255, 255, .05); overflow: hidden; }
[data-tb] .tb-hris .hs-chart svg { width: 100%; height: 100%; display: block; }
[data-tb] .tb-hris .hs-chart .stop-a { stop-color: var(--tb-accent); stop-opacity: .55; }
[data-tb] .tb-hris .hs-chart .stop-b { stop-color: var(--tb-accent); stop-opacity: 0; }
[data-tb] .tb-hris .hs-chart .area { fill: url(#hsArea); }
[data-tb] .tb-hris .hs-chart .line { fill: none; stroke: color-mix(in srgb, var(--tb-accent) 60%, #fff); stroke-width: 2; vector-effect: non-scaling-stroke; }
[data-tb] .tb-hris .hs-table { margin-top: 10px; }
[data-tb] .tb-hris .hs-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
[data-tb] .tb-hris .hs-row + .hs-row { border-top: 1px solid rgba(255, 255, 255, .08); }
[data-tb] .tb-hris .hs-lines { flex: 1; }
[data-tb] .tb-hris .hs-pill { width: 40px; height: 13px; border-radius: 7px; }
[data-tb] .tb-hris .hs-pill.ok { background: rgba(52, 211, 153, .6); }
[data-tb] .tb-hris .hs-pill.warn { background: rgba(251, 191, 36, .6); }

/* Org chart */
[data-tb] .tb-hris .hs-org { right: 30%; top: 7%; width: 16%; min-width: 130px; text-align: center; }
[data-tb] .tb-hris .hs-org-top { display: flex; justify-content: center; }
[data-tb] .tb-hris .hs-org-lines { display: block; width: 100%; height: 16px; }
[data-tb] .tb-hris .hs-org-lines path { fill: none; stroke: rgba(255, 255, 255, .45); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
[data-tb] .tb-hris .hs-org-row { display: flex; justify-content: space-between; }
[data-tb] .tb-hris .hs-org-row .hs-avatar { width: 22px; height: 22px; }

/* ID card */
[data-tb] .tb-hris .hs-id { right: 5%; top: 6%; width: 13%; min-width: 110px; padding-top: 0; text-align: center; overflow: hidden; transform: rotate(5deg); }
[data-tb] .tb-hris .hs-id-band { height: 26px; margin: 0 -12px 0; background: linear-gradient(90deg, var(--tb-accent), var(--tb-primary)); }
[data-tb] .tb-hris .hs-id .l { margin-left: auto; margin-right: auto; }
[data-tb] .tb-hris .hs-barcode { display: flex; justify-content: center; gap: 2px; height: 16px; margin-top: 10px; }
[data-tb] .tb-hris .hs-barcode span { background: rgba(255, 255, 255, .6); }

/* Attendance clock */
[data-tb] .tb-hris .hs-clock { right: 17%; bottom: 20%; width: 15%; min-width: 130px; display: flex; align-items: center; gap: 10px; }
[data-tb] .tb-hris .hs-clockface { width: 44px; height: 44px; flex-shrink: 0; }
[data-tb] .tb-hris .hs-clockface circle { fill: rgba(255, 255, 255, .08); stroke: color-mix(in srgb, var(--tb-accent) 70%, #fff); stroke-width: 2.5; }
[data-tb] .tb-hris .hs-clockface path { fill: none; stroke: #fff; stroke-width: 2.5; stroke-linecap: round; }
[data-tb] .tb-hris .hs-inout { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
[data-tb] .tb-hris .hs-inout > span { display: flex; align-items: center; gap: 6px; font-size: 11px; }
[data-tb] .tb-hris .hs-inout .in i { color: #34d399; }
[data-tb] .tb-hris .hs-inout .out i { color: #fbbf24; }
[data-tb] .tb-hris .hs-inout .l { flex: 1; }

/* Payslip */
[data-tb] .tb-hris .hs-slip { right: 34%; bottom: 14%; width: 15%; min-width: 130px; }
[data-tb] .tb-hris .hs-slip-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; color: #fff; font-size: 13px; }
[data-tb] .tb-hris .hs-slip-total { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; padding-top: 8px; border-top: 1px dashed rgba(255, 255, 255, .25); }
[data-tb] .tb-hris .hs-amount { width: 40%; height: 10px; border-radius: 5px; background: #34d399; }

/* Leave calendar */
[data-tb] .tb-hris .hs-cal { right: 3%; bottom: 12%; width: 17%; min-width: 140px; }
[data-tb] .tb-hris .hs-cal-head { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; color: #fff; font-size: 12px; }
[data-tb] .tb-hris .hs-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
[data-tb] .tb-hris .hs-days span { aspect-ratio: 1; border-radius: 3px; background: rgba(255, 255, 255, .12); }
[data-tb] .tb-hris .hs-days span.off { background: rgba(248, 113, 113, .35); }
[data-tb] .tb-hris .hs-days span.leave { background: rgba(251, 191, 36, .6); }
[data-tb] .tb-hris .hs-days span.on { background: var(--tb-accent); box-shadow: 0 0 0 2px rgba(255, 255, 255, .3); }

/* Small floating badges */
[data-tb] .tb-hris .hs-badge {
  position: absolute; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  border-radius: 50%; font-size: 15px; box-shadow: 0 10px 22px rgba(0, 0, 0, .3);
}
[data-tb] .tb-hris .hs-badge.b1 { right: 46%; top: 23%; background: #34d399; color: #064e3b; }
[data-tb] .tb-hris .hs-badge.b2 { right: 3%; top: 34%; background: #fbbf24; color: #78350f; }

/* Motion (follows the Animations setting and reduced-motion) */
[data-tb][data-tb-login-anim="1"] .tb-hris .hs-dash { animation: tbHeroFloat 7s ease-in-out infinite alternate; }
[data-tb][data-tb-login-anim="1"] .tb-hris .hs-org { animation: tbHeroFloat 6s ease-in-out .6s infinite alternate; }
[data-tb][data-tb-login-anim="1"] .tb-hris .hs-clock { animation: tbHeroFloat 8s ease-in-out 1.2s infinite alternate; }
[data-tb][data-tb-login-anim="1"] .tb-hris .hs-cal { animation: tbHeroFloat 9s ease-in-out .3s infinite alternate; }
[data-tb][data-tb-login-anim="1"] .tb-hris .hs-slip { animation: tbHeroFloat 7.5s ease-in-out 1.8s infinite alternate; }
[data-tb][data-tb-login-anim="1"] .tb-hris .hs-badge { animation: tbHeroFloat 5s ease-in-out infinite alternate; }

/* Wide screens: text keeps the left half next to the scene. */
@media (min-width: 1400px) {
  html[data-tb] .tb-hero-left.has-hris .tb-hero-body { max-width: 50%; }
  html[data-tb] .tb-hero-left.has-hris .tb-hero-headline { font-size: clamp(30px, 2.3vw, 42px); }
  html[data-tb] .tb-hero-left.has-hris .tb-hero-features { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
}
/* Narrower: a faint texture behind the text. */
@media (max-width: 1399px) {
  html[data-tb] .tb-hris { opacity: .16; }
}

/* ── 12. Loaders (Theme & Branding → Loader) ─────────────────────────────
   One markup for every loader (resources/views/partials/tb-loader.blade.php
   and theme/Loader.js):
     .tb-ld-host            where it sits: .is-overlay (API requests, the
                            .common_loder layer), .is-boot (app start-up),
                            .is-page (a page's code downloading); also the editor preview
       .tb-ld               role=status; .has-logo, .is-determinate
         .tb-ld-fig         logo + animation (.tb-ld-a, or .tb-ld-svg)
         .tb-ld-text        message (English / Nepali) + upload percentage
   The style, logo and text switches are attributes on .tb-ld itself
   (data-ld, data-ld-logo, data-ld-text; data-ld-display on the overlay
   host), so a preview or style tile never picks up the published style from
   <html>. Colours, size and speed come from the --app-loader-* variables. */

[data-tb] {
  --tb-ld-c1: var(--app-loader-primary, var(--tb-primary));
  --tb-ld-c2: var(--app-loader-secondary, color-mix(in srgb, var(--tb-ld-c1) 20%, transparent));
  --tb-ld-s: var(--app-loader-size, 44px);
  --tb-ld-d: var(--app-loader-speed, .9s);
  --tb-ld-e: var(--app-loader-ease, linear);
  --tb-ld-w: max(3px, calc(var(--tb-ld-s) * .09));
  --tb-ld-card: #ffffff;
  --tb-ld-fg: #334155;
  --tb-ld-line: rgba(15, 23, 42, .08);
  --tb-ld-page: var(--tb-background, #f4f6f9);
}
[data-tb][data-tb-loader-mode="dark"],
[data-tb][data-tb-loader-mode="auto"][data-tb-mode="dark"] {
  --tb-ld-card: #1e293b; --tb-ld-fg: #e2e8f0; --tb-ld-line: rgba(255, 255, 255, .1); --tb-ld-page: #0f172a;
}
@media (prefers-color-scheme: dark) {
  [data-tb][data-tb-loader-mode="auto"][data-tb-mode="system"] {
    --tb-ld-card: #1e293b; --tb-ld-fg: #e2e8f0; --tb-ld-line: rgba(255, 255, 255, .1); --tb-ld-page: #0f172a;
  }
}

/* Without a published theme only the original loader shows. */
.tb-ld, .tb-ld-host.is-boot { display: none; }
html[data-tb] .common_loder > .spinner { display: none; }

[data-tb] .tb-ld {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  box-sizing: border-box; line-height: 1.35; text-align: center;
  font-family: var(--app-font-family, inherit);
  color: var(--app-loader-text, var(--tb-ld-fg));
}
[data-tb] .tb-ld-fig { position: relative; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
[data-tb] .tb-ld-logo { display: none; width: auto; max-width: calc(var(--app-loader-logo-size, 48px) * 3); height: var(--app-loader-logo-size, 48px); object-fit: contain; }
[data-tb] .tb-ld-a, [data-tb] .tb-ld-svg { display: none; flex-shrink: 0; box-sizing: border-box; }
[data-tb] .tb-ld-a > i { display: none; }
[data-tb] .tb-ld-text { font-size: var(--app-loader-text-size, 13px); font-weight: 500; letter-spacing: .01em; max-width: 280px; }
[data-tb] .tb-ld-pct { margin-left: 6px; font-variant-numeric: tabular-nums; opacity: .8; }
[data-tb] .tb-ld-pct:empty { display: none; }
/* Message in the page language (the nearest lang attribute). */
[data-tb] .tb-ld-msg-en:lang(ne), [data-tb] .tb-ld-msg-ne:not(:lang(ne)) { display: none; }
/* "Show text" off: still read out by screen readers. */
[data-tb] .tb-ld[data-ld-text="0"] .tb-ld-text {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* Logo: shown when "Show logo" is on, and always by the logo styles. */
[data-tb] .tb-ld[data-ld-logo="1"].has-logo .tb-ld-logo,
[data-tb] .tb-ld[data-ld="logo"].has-logo .tb-ld-logo,
[data-tb] .tb-ld[data-ld="logo_spinner"].has-logo .tb-ld-logo { display: block; }

/* — Circular spinner (also: minimal, and the logo styles without a logo) — */
[data-tb] .tb-ld[data-ld="spinner"] .tb-ld-a,
[data-tb] .tb-ld[data-ld="minimal"] .tb-ld-a,
[data-tb] .tb-ld[data-ld="logo"]:not(.has-logo) .tb-ld-a,
[data-tb] .tb-ld[data-ld="logo_spinner"] .tb-ld-a {
  display: block; width: var(--tb-ld-s); height: var(--tb-ld-s); border-radius: 50%;
  border: var(--tb-ld-w) solid var(--tb-ld-c2); border-top-color: var(--tb-ld-c1);
  animation: tbLdSpin var(--tb-ld-d) var(--tb-ld-e) infinite;
}
/* — Dual ring — */
[data-tb] .tb-ld[data-ld="dual_ring"] .tb-ld-a {
  display: block; position: relative; width: var(--tb-ld-s); height: var(--tb-ld-s); border-radius: 50%;
  border: var(--tb-ld-w) solid transparent; border-top-color: var(--tb-ld-c1); border-bottom-color: var(--tb-ld-c1);
  animation: tbLdSpin var(--tb-ld-d) var(--tb-ld-e) infinite;
}
[data-tb] .tb-ld[data-ld="dual_ring"] .tb-ld-a::after {
  content: ""; position: absolute; inset: calc(var(--tb-ld-w) * 1.2); border-radius: 50%;
  border: var(--tb-ld-w) solid transparent;
  border-left-color: color-mix(in srgb, var(--tb-ld-c1) 55%, transparent); border-right-color: color-mix(in srgb, var(--tb-ld-c1) 55%, transparent);
  animation: tbLdSpin calc(var(--tb-ld-d) * .75) var(--tb-ld-e) infinite reverse;
}
/* — Dots / bouncing dots — */
[data-tb] .tb-ld[data-ld="dots"] .tb-ld-a,
[data-tb] .tb-ld[data-ld="bounce"] .tb-ld-a {
  display: flex; align-items: center; justify-content: center; gap: calc(var(--tb-ld-s) * .16);
  height: var(--tb-ld-s); min-width: var(--tb-ld-s);
}
[data-tb] .tb-ld[data-ld="dots"] .tb-ld-a > i,
[data-tb] .tb-ld[data-ld="bounce"] .tb-ld-a > i {
  display: block; width: calc(var(--tb-ld-s) * .22); height: calc(var(--tb-ld-s) * .22); border-radius: 50%; background: var(--tb-ld-c1);
}
[data-tb] .tb-ld[data-ld="dots"] .tb-ld-a > i { animation: tbLdDot calc(var(--tb-ld-d) * 1.4) var(--tb-ld-e) infinite both; }
[data-tb] .tb-ld[data-ld="bounce"] .tb-ld-a > i { animation: tbLdBounce calc(var(--tb-ld-d) * 1.2) var(--tb-ld-e) infinite both; }
[data-tb] .tb-ld[data-ld="dots"] .tb-ld-a > i:nth-child(2),
[data-tb] .tb-ld[data-ld="bounce"] .tb-ld-a > i:nth-child(2) { animation-delay: calc(var(--tb-ld-d) * .16); }
[data-tb] .tb-ld[data-ld="dots"] .tb-ld-a > i:nth-child(3),
[data-tb] .tb-ld[data-ld="bounce"] .tb-ld-a > i:nth-child(3) { animation-delay: calc(var(--tb-ld-d) * .32); }
/* — Pulse — */
[data-tb] .tb-ld[data-ld="pulse"] .tb-ld-a { display: block; position: relative; width: var(--tb-ld-s); height: var(--tb-ld-s); }
[data-tb] .tb-ld[data-ld="pulse"] .tb-ld-a::before,
[data-tb] .tb-ld[data-ld="pulse"] .tb-ld-a::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--tb-ld-c1);
  animation: tbLdPulse calc(var(--tb-ld-d) * 1.8) var(--tb-ld-e) infinite both;
}
[data-tb] .tb-ld[data-ld="pulse"] .tb-ld-a::after { animation-delay: calc(var(--tb-ld-d) * .9); }
/* — Progress bar (indeterminate; fills while a file uploads) — */
[data-tb] .tb-ld[data-ld="bar"] .tb-ld-a {
  display: block; position: relative; overflow: hidden; width: calc(var(--tb-ld-s) * 3.6); max-width: 70vw;
  height: max(4px, calc(var(--tb-ld-s) * .1)); border-radius: 999px; background: var(--tb-ld-c2);
}
[data-tb] .tb-ld[data-ld="bar"] .tb-ld-a::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; border-radius: inherit; background: var(--tb-ld-c1);
  animation: tbLdBar calc(var(--tb-ld-d) * 1.6) var(--tb-ld-e) infinite;
}
[data-tb] .tb-ld[data-ld="bar"].is-determinate .tb-ld-a::before {
  animation: none; width: calc(var(--tb-ld-p, 0) * 1%); transition: width .2s ease;
}
/* — Circular progress (indeterminate arc; a real percentage while a file uploads) — */
[data-tb] .tb-ld[data-ld="progress"] .tb-ld-svg {
  display: block; width: var(--tb-ld-s); height: var(--tb-ld-s);
  animation: tbLdSpin calc(var(--tb-ld-d) * 2.2) linear infinite;
}
[data-tb] .tb-ld-svg circle { fill: none; stroke-width: 4.5; stroke-linecap: round; }
[data-tb] .tb-ld-svg .tb-ld-track { stroke: var(--tb-ld-c2); }
[data-tb] .tb-ld-svg .tb-ld-arc { stroke: var(--tb-ld-c1); stroke-dasharray: 1 100; animation: tbLdDash calc(var(--tb-ld-d) * 1.6) var(--tb-ld-e) infinite; }
[data-tb] .tb-ld[data-ld="progress"].is-determinate .tb-ld-svg { animation: none; transform: rotate(-90deg); }
[data-tb] .tb-ld[data-ld="progress"].is-determinate .tb-ld-arc {
  animation: none; stroke-dasharray: var(--tb-ld-p, 0) 100; transition: stroke-dasharray .2s ease;
}
/* — Branded logo (gentle breathing) — */
[data-tb] .tb-ld[data-ld="logo"].has-logo .tb-ld-logo { animation: tbLdBreath calc(var(--tb-ld-d) * 1.8) ease-in-out infinite; }
/* — Logo with a ring around it — */
[data-tb] .tb-ld[data-ld="logo_spinner"].has-logo .tb-ld-fig {
  width: calc(var(--app-loader-logo-size, 48px) + var(--tb-ld-w) * 2 + 22px);
  height: calc(var(--app-loader-logo-size, 48px) + var(--tb-ld-w) * 2 + 22px);
}
[data-tb] .tb-ld[data-ld="logo_spinner"].has-logo .tb-ld-logo { max-width: var(--app-loader-logo-size, 48px); border-radius: 50%; }
[data-tb] .tb-ld[data-ld="logo_spinner"].has-logo .tb-ld-a { position: absolute; inset: 0; width: auto; height: auto; }
/* — Minimal: small ring and the message on one line — */
[data-tb] .tb-ld[data-ld="minimal"] { flex-direction: row; gap: 10px; }
[data-tb] .tb-ld[data-ld="minimal"] .tb-ld-a { width: calc(var(--tb-ld-s) * .5); height: calc(var(--tb-ld-s) * .5); border-width: 2px; }

@keyframes tbLdSpin { to { transform: rotate(360deg); } }
@keyframes tbLdDot { 0%, 80%, 100% { opacity: .25; transform: scale(.7); } 40% { opacity: 1; transform: scale(1); } }
@keyframes tbLdBounce { 0%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(calc(var(--tb-ld-s) * -.28)); } }
@keyframes tbLdPulse { 0% { transform: scale(.2); opacity: .9; } 100% { transform: scale(1); opacity: 0; } }
@keyframes tbLdBar { 0% { transform: translateX(-100%); } 100% { transform: translateX(250%); } }
@keyframes tbLdDash { 0% { stroke-dasharray: 1 100; stroke-dashoffset: 0; } 50% { stroke-dasharray: 65 100; stroke-dashoffset: -15; } 100% { stroke-dasharray: 65 100; stroke-dashoffset: -99; } }
@keyframes tbLdBreath { 0%, 100% { opacity: .55; transform: scale(.96); } 50% { opacity: 1; transform: scale(1); } }
@keyframes tbLdIn { from { opacity: 0; } to { opacity: 1; } }

/* Surfaces: the card used by the request overlay and the preview. */
[data-tb] .tb-ld-host.is-overlay .tb-ld {
  min-width: 132px; padding: 22px 28px; border-radius: 14px;
  background: var(--tb-ld-card); border: 1px solid var(--tb-ld-line);
  box-shadow: 0 18px 48px rgba(15, 23, 42, .18), 0 2px 6px rgba(15, 23, 42, .06);
}
[data-tb] .tb-ld-host.is-overlay .tb-ld[data-ld="minimal"] { min-width: 0; padding: 12px 18px; border-radius: 999px; }

/* Request overlay (body.loading-indicator, set by defaultsetting/interceptor.js).
   It still blocks clicks from the first moment (no double submits), but only
   becomes visible after the configured delay, so quick requests do not flash.
   .tb-ld-host.is-overlay rules are shared with the editor's preview. */
html[data-tb] .common_loder { line-height: normal; font-size: inherit; color: inherit; text-align: center; cursor: progress; }
html[data-tb] body.loading-indicator .common_loder {
  display: flex !important; animation: tbLdIn .18s ease var(--app-loader-delay, .2s) both;
}
[data-tb] .tb-ld-host.is-overlay {
  align-items: center; justify-content: center; padding: 16px;
  background: var(--app-loader-overlay, rgba(15, 23, 42, .35));
}
[data-tb] .tb-ld-host.is-overlay[data-ld-display="card"] { background: transparent; }
/* Top bar: a thin bar along the top of the window, nothing else. */
[data-tb] .tb-ld-host.is-overlay[data-ld-display="topbar"] { background: transparent; align-items: flex-start; padding: 0; }
[data-tb] .tb-ld-host.is-overlay[data-ld-display="topbar"] .tb-ld {
  position: absolute; top: 0; left: 0; right: 0; height: 3px; padding: 0; gap: 0; overflow: hidden;
  background: var(--tb-ld-c2); border: 0; border-radius: 0; box-shadow: none; min-width: 0;
}
[data-tb] .tb-ld-host.is-overlay[data-ld-display="topbar"] .tb-ld-fig,
[data-tb] .tb-ld-host.is-overlay[data-ld-display="topbar"] .tb-ld-text {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
[data-tb] .tb-ld-host.is-overlay[data-ld-display="topbar"] .tb-ld::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 35%; background: var(--tb-ld-c1);
  animation: tbLdBar calc(var(--tb-ld-d) * 1.6) var(--tb-ld-e) infinite;
}
[data-tb] .tb-ld-host.is-overlay[data-ld-display="topbar"] .tb-ld.is-determinate::before {
  animation: none; width: calc(var(--tb-ld-p, 0) * 1%); transition: width .2s ease;
}

/* App start-up: covers the page until the application has started. */
html[data-tb] .tb-ld-host.is-boot {
  display: flex; position: fixed; inset: 0; z-index: 1000001; align-items: center; justify-content: center;
  background: var(--tb-ld-page);
}
/* A page whose code is still downloading: inside the content area only. */
[data-tb] .tb-ld-host.is-page {
  display: flex; align-items: center; justify-content: center; min-height: 40vh; padding: 32px 16px;
  animation: tbLdIn .18s ease both;
}
.tb-page-error { padding: 48px 16px; text-align: center; color: #64748b; }
.tb-page-error .fa { font-size: 28px; opacity: .6; display: block; margin-bottom: 10px; }

/* Adaptive dark inverts the whole app: loaders are flipped back so their
   colours are the configured ones (Appearance "Auto" then picks the dark card). */
html.tb-app[data-tb-mode="dark"][data-tb-dark-style="adaptive"] :is(.common_loder, .tb-ld-host.is-page) { filter: invert(1) hue-rotate(180deg); }
html.tb-app[data-tb-mode="dark"][data-tb-dark-style="adaptive"] :is(.common_loder, .tb-ld-host.is-page) img { filter: none; }
@media (prefers-color-scheme: dark) {
  html.tb-app[data-tb-mode="system"][data-tb-dark-style="adaptive"] :is(.common_loder, .tb-ld-host.is-page) { filter: invert(1) hue-rotate(180deg); }
  html.tb-app[data-tb-mode="system"][data-tb-dark-style="adaptive"] :is(.common_loder, .tb-ld-host.is-page) img { filter: none; }
}
.tbe-pv-frame[data-tb-mode="dark"][data-tb-dark-style="adaptive"] .tb-ld-host { filter: invert(1) hue-rotate(180deg); }
.tbe-pv-frame[data-tb-mode="dark"][data-tb-dark-style="adaptive"] .tb-ld-host img { filter: none; }

/* Small loaders follow the theme: the ~300 Font Awesome spinner icons in
   buttons and panels become a thin ring in the current text colour, at the
   loader speed. Same 1em box, so nothing moves. */
[data-tb][data-tb-loader-icons="1"] .fa-spinner.fa-spin,
[data-tb][data-tb-loader-icons="1"] .fa-circle-o-notch.fa-spin { animation-duration: var(--tb-ld-d); animation-timing-function: linear; }
[data-tb][data-tb-loader-icons="1"] .fa-spinner.fa-spin::before {
  content: ""; display: inline-block; box-sizing: border-box; width: 1em; height: 1em; vertical-align: -.125em;
  border: max(2px, .14em) solid currentColor; border-right-color: transparent; border-radius: 50%; opacity: .9;
}
/* Tables (react-table "Loading…" layer). */
[data-tb] .ReactTable .-loading { background: color-mix(in srgb, var(--tb-card-bg, #fff) 78%, transparent); }
[data-tb] .ReactTable .-loading > div { color: var(--tb-ld-fg); font-size: var(--app-loader-text-size, 13px); font-family: var(--app-font-family, inherit); }
[data-tb] .ReactTable .-loading > div::before {
  content: ""; display: block; box-sizing: border-box; width: 28px; height: 28px; margin: 0 auto 8px; border-radius: 50%;
  border: 3px solid var(--tb-ld-c2); border-top-color: var(--tb-ld-c1);
  animation: tbLdSpin var(--tb-ld-d) linear infinite;
}

/* Reduced motion: no spinning or bouncing; a slow fade says "still working",
   and the message is always there as well. */
@media (prefers-reduced-motion: reduce) {
  [data-tb] .tb-ld .tb-ld-a, [data-tb] .tb-ld .tb-ld-a::before, [data-tb] .tb-ld .tb-ld-a::after, [data-tb] .tb-ld .tb-ld-a > i,
  [data-tb] .tb-ld .tb-ld-svg, [data-tb] .tb-ld .tb-ld-arc, [data-tb] .tb-ld .tb-ld-logo { animation: none !important; }
  [data-tb] .tb-ld .tb-ld-arc { stroke-dasharray: 30 100; }
  [data-tb] .tb-ld .tb-ld-fig {
    animation: tbLdBreath 2s ease-in-out infinite !important; animation-duration: 2s !important; animation-iteration-count: infinite !important;
  }
}

/* ── 11. Content spacing and reduced motion ───────────────────────────── */
html[data-tb][data-tb-spacing="compact"] .main .container-fluid { padding-left: 10px; padding-right: 10px; }
html[data-tb][data-tb-spacing="comfortable"] .main .container-fluid { padding-left: 28px; padding-right: 28px; }
html[data-tb][data-tb-spacing="comfortable"] .main .main-wrap { padding-top: 8px; }

@media (prefers-reduced-motion: reduce) {
  [data-tb] *, [data-tb] *::before, [data-tb] *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* ── 13. Login page designer templates ───────────────────────────────────
   Theme & Branding → Login Page → Templates: classic, split_screen,
   modern_card, full_background, minimal, gradient, corporate, illustration,
   glass, compact (theme/LoginTemplate.js, used by Login.js and the editor
   preview). Sizes and colours: --app-lt-* (ThemeBrandingService::
   loginDesignVariables); choices: data-lt-* on .tb-lt. The root is a size
   container, so the same rules reflow the real page and the preview frame
   (desktop / tablet / phone). */
[data-tb] .tb-lt {
  container: tblt / inline-size;
  font-family: var(--app-lt-font);
  color: var(--app-lt-heading);
  --lt-btn-bg: var(--app-login-button-bg);
  --lt-btn-text: var(--app-login-button-text);
  --lt-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 8px 24px rgba(15, 23, 42, .08);
  --lt-focus-ring: 0 0 0 3px color-mix(in srgb, var(--app-lt-input-focus) 22%, transparent);
}
[data-tb] .tb-lt *, [data-tb] .tb-lt *::before, [data-tb] .tb-lt *::after { box-sizing: border-box; }
[data-tb] .tb-lt[data-lt-shadow="none"] { --lt-shadow: none; }
[data-tb] .tb-lt[data-lt-shadow="medium"] { --lt-shadow: 0 2px 6px rgba(15, 23, 42, .06), 0 18px 40px rgba(15, 23, 42, .12); }
[data-tb] .tb-lt[data-lt-shadow="strong"] { --lt-shadow: 0 4px 12px rgba(15, 23, 42, .1), 0 32px 64px rgba(15, 23, 42, .24); }
[data-tb] .tb-lt[data-lt-glow="none"] { --lt-focus-ring: none; }
[data-tb] .tb-lt[data-lt-glow="strong"] { --lt-focus-ring: 0 0 0 4px color-mix(in srgb, var(--app-lt-input-focus) 35%, transparent), 0 0 18px color-mix(in srgb, var(--app-lt-input-focus) 30%, transparent); }

/* Page background: colour, gradient or image (an image setting without an image falls back to the gradient). */
[data-tb] .tb-lt-page {
  position: relative; display: flex; flex-direction: column; min-height: 100vh; overflow: hidden;
  background: var(--app-login-bg);
}
[data-tb] .tb-lt[data-lt-bg="gradient"] .tb-lt-page,
[data-tb] .tb-lt[data-lt-bg="image"] .tb-lt-page:not(.has-bg-image) {
  background: linear-gradient(var(--app-lt-gradient-angle), var(--app-login-bg), var(--app-login-bg2));
}
[data-tb] .tb-lt .tb-lt-page.has-bg-image {
  background-color: var(--app-login-bg);
  background-size: var(--app-lt-bg-size);
  background-position: var(--app-lt-bg-position);
  background-repeat: var(--app-lt-bg-repeat);
}
[data-tb] .tb-lt-overlay { position: absolute; inset: 0; background: var(--app-lt-bg-overlay); pointer-events: none; }

/* Stage: optional side panel + the form area. */
[data-tb] .tb-lt-stage { position: relative; z-index: 1; flex: 1 1 auto; display: flex; min-height: 0; }
[data-tb] .tb-lt[data-lt-panel="right"] .tb-lt-stage { flex-direction: row-reverse; }
[data-tb] .tb-lt-main {
  flex: 1 1 auto; min-width: 0; display: flex; justify-content: center; align-items: center;
  padding: var(--app-lt-pad-top) var(--app-lt-pad-right) var(--app-lt-pad-bottom) var(--app-lt-pad-left);
}
[data-tb] .tb-lt[data-lt-align="left"] .tb-lt-main { justify-content: flex-start; }
[data-tb] .tb-lt[data-lt-align="right"] .tb-lt-main { justify-content: flex-end; }
[data-tb] .tb-lt[data-lt-valign="top"] .tb-lt-main { align-items: flex-start; }
[data-tb] .tb-lt[data-lt-valign="bottom"] .tb-lt-main { align-items: flex-end; }

/* Card */
[data-tb] .tb-lt-card {
  position: relative; width: 100%; max-width: var(--app-lt-form-width);
  padding: var(--app-lt-card-padding); border-radius: var(--app-lt-card-radius);
  background: var(--app-login-card-bg); box-shadow: var(--lt-shadow);
}
[data-tb] .tb-lt[data-lt-card="0"] .tb-lt-card { background: transparent; box-shadow: none; border: 0 !important; }

/* Brand block, title, subtitle */
[data-tb] .tb-lt-brand { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: var(--app-lt-logo-gap); }
[data-tb] .tb-lt[data-lt-logo="left"] .tb-lt-brand { align-items: flex-start; text-align: left; }
[data-tb] .tb-lt[data-lt-logo="right"] .tb-lt-brand { align-items: flex-end; text-align: right; }
[data-tb] .tb-lt-brand:empty { display: none; }
[data-tb] .tb-lt-logo { display: block; max-height: var(--app-login-logo-size); max-width: min(240px, 100%); object-fit: contain; }
[data-tb] .tb-lt-org { margin-top: 8px; font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--app-lt-heading); }
[data-tb] .tb-lt-logo + .tb-lt-org { margin-top: 10px; }
[data-tb] .tb-lt-brand > .tb-lt-org:first-child { margin-top: 0; }
[data-tb] .tb-lt-tagline { margin-top: 2px; font-size: 12.5px; color: var(--app-lt-subtitle); }
[data-tb] .tb-lt-brand-dup { display: none; }
[data-tb] .tb-lt-title {
  margin: 0; font-family: var(--app-lt-font); font-size: var(--app-lt-title-size); font-weight: var(--app-lt-title-weight);
  line-height: 1.25; letter-spacing: -.01em; color: var(--app-lt-heading);
}
[data-tb] .tb-lt-subtitle { margin: 6px 0 0; font-size: 14px; line-height: 1.55; color: var(--app-lt-subtitle); }
[data-tb] .tb-lt[data-lt-logo="center"] .tb-lt-title,
[data-tb] .tb-lt[data-lt-logo="center"] .tb-lt-subtitle { text-align: center; }
[data-tb] .tb-lt[data-lt-logo="right"] .tb-lt-title,
[data-tb] .tb-lt[data-lt-logo="right"] .tb-lt-subtitle { text-align: right; }

/* Language switch */
[data-tb] .tb-lt-lang { display: flex; justify-content: flex-end; gap: 4px; margin: -8px -8px 8px 0; }
[data-tb] .tb-lt-lang button {
  border: 1px solid var(--app-lt-divider); background: transparent; border-radius: 6px; padding: 3px 9px;
  font-size: 11.5px; color: var(--app-lt-subtitle); cursor: pointer;
}
[data-tb] .tb-lt-lang button.active { background: var(--lt-btn-bg); border-color: transparent; color: var(--lt-btn-text); }

/* Notices and errors */
[data-tb] .tb-lt-alert {
  display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; padding: 10px 12px; border-radius: 8px;
  background: #fff7ed; border: 1px solid #fed7aa; color: #7c2d12; font-size: 13.5px; line-height: 1.5;
}
[data-tb] .tb-lt-alert .fa { color: #d97706; margin-top: 2px; }
[data-tb] .tb-lt-errors:empty { display: none; }
[data-tb] .tb-lt-errors { margin-top: 14px; color: var(--app-lt-error); font-size: 13.5px; }
[data-tb] .tb-lt-errors ul, [data-tb] .tb-lt-errors .error-messages {
  margin: 0; padding: 10px 14px 10px 30px; border-radius: 8px; color: var(--app-lt-error);
  background: color-mix(in srgb, var(--app-lt-error) 8%, #fff); border: 1px solid color-mix(in srgb, var(--app-lt-error) 30%, #fff);
}

/* Fields */
[data-tb] .tb-lt-form { margin-top: 20px; }
[data-tb] .tb-lt-field { margin-bottom: var(--app-lt-field-gap); }
[data-tb] .tb-lt-label {
  display: block; margin: 0 0 6px; font-family: var(--app-lt-font); font-size: var(--app-lt-label-size);
  font-weight: 600; color: var(--app-lt-label);
}
[data-tb] .tb-lt .tb-req { color: var(--app-lt-error); margin-left: 3px; }
[data-tb] .tb-lt-control { position: relative; display: flex; align-items: center; width: var(--app-lt-input-width); max-width: 100%; }
[data-tb] .tb-lt .tb-lt-input {
  display: block; width: 100%; height: var(--app-lt-input-height); margin: 0;
  padding: 0 var(--app-lt-input-padding) !important; /* a legacy .form-control rule forces padding */
  font-family: var(--app-lt-font); font-size: var(--app-lt-input-size); color: var(--app-lt-input-text);
  background: var(--app-lt-input-bg); border: var(--app-lt-input-border-width) solid var(--app-lt-input-border);
  border-radius: var(--app-lt-input-radius); outline: none; box-shadow: none;
  transition: border-color .15s, box-shadow .15s;
}
[data-tb] .tb-lt .tb-lt-input::placeholder { color: var(--app-lt-placeholder); font-size: var(--app-lt-placeholder-size); opacity: 1; }
[data-tb] .tb-lt .tb-lt-input:focus,
[data-tb] .tb-lt[data-lt-demo="focus"] .tb-lt-field:first-child .tb-lt-input {
  border-color: var(--app-lt-input-focus); box-shadow: var(--lt-focus-ring);
}
[data-tb][data-tb-login-input="filled"] .tb-lt .tb-lt-input { background: color-mix(in srgb, var(--app-lt-input-text) 6%, var(--app-lt-input-bg)); border-color: transparent; }
[data-tb][data-tb-login-input="underline"] .tb-lt .tb-lt-input {
  border-width: 0 0 max(2px, var(--app-lt-input-border-width)); border-radius: 0; background: transparent; padding-left: 2px !important;
}
[data-tb][data-tb-login-input="underline"] .tb-lt .tb-lt-input:focus,
[data-tb][data-tb-login-input="underline"] .tb-lt[data-lt-demo="focus"] .tb-lt-field:first-child .tb-lt-input { box-shadow: none; }
/* Icons: left (default) or right. On the right the password field shows only its show/hide control. */
[data-tb] .tb-lt-icon { position: absolute; left: var(--app-lt-input-padding); font-size: 15px; color: var(--app-lt-placeholder); pointer-events: none; }
[data-tb] .tb-lt .tb-lt-control.has-icon .tb-lt-input { padding-left: calc(var(--app-lt-input-padding) + 26px) !important; }
[data-tb] .tb-lt .tb-lt-control.has-after .tb-lt-input { padding-right: 52px !important; }
[data-tb] .tb-lt[data-lt-icon-pos="right"] .tb-lt-icon { left: auto; right: var(--app-lt-input-padding); }
[data-tb] .tb-lt[data-lt-icon-pos="right"] .tb-lt-control.has-icon .tb-lt-input { padding-left: var(--app-lt-input-padding) !important; padding-right: calc(var(--app-lt-input-padding) + 26px) !important; }
[data-tb] .tb-lt[data-lt-icon-pos="right"] .tb-lt-control.has-after .tb-lt-icon { display: none; }
[data-tb] .tb-lt-control:focus-within .tb-lt-icon { color: var(--app-lt-input-focus); }
[data-tb] .tb-lt-eye {
  position: absolute; right: 4px; height: calc(100% - 8px); min-width: 36px; padding: 0 8px; border: 0; border-radius: 6px;
  background: transparent; color: var(--app-lt-placeholder); font-size: 15px; cursor: pointer;
}
[data-tb] .tb-lt-eye.is-text { font-size: 12.5px; font-weight: 600; color: var(--app-lt-link); }
[data-tb] .tb-lt-eye:hover { color: var(--app-lt-input-text); background: color-mix(in srgb, var(--app-lt-input-text) 6%, transparent); }
[data-tb] .tb-lt-qr { text-align: center; margin-bottom: 12px; }
[data-tb] .tb-lt-qr img { max-width: 180px; }
[data-tb] .tb-lt-qr small { display: block; margin-top: 6px; color: var(--app-lt-subtitle); }

[data-tb] .tb-lt-row { display: flex; justify-content: flex-end; margin: -4px 0 16px; }
[data-tb] .tb-lt-link { font-size: 13.5px; font-weight: 600; color: var(--app-lt-link); text-decoration: none; }
[data-tb] .tb-lt-link:hover { color: color-mix(in srgb, var(--app-lt-link) 80%, #000); text-decoration: underline; }

/* Sign-in button */
[data-tb] .tb-lt-submit-row { display: flex; }
[data-tb] .tb-lt[data-lt-logo="center"] .tb-lt-submit-row { justify-content: center; }
[data-tb] .tb-lt[data-lt-logo="right"] .tb-lt-submit-row { justify-content: flex-end; }
[data-tb] .tb-lt .tb-lt-submit {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: var(--app-lt-button-width); max-width: 100%; height: var(--app-lt-button-height); padding: 0 22px; margin: 0;
  border: 0; border-radius: var(--app-lt-button-radius); cursor: pointer;
  font-family: var(--app-lt-font); font-size: var(--app-lt-button-size); font-weight: var(--app-lt-button-weight);
  background: var(--lt-btn-bg); color: var(--lt-btn-text);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--lt-btn-bg) 26%, transparent);
  transition: background .15s, color .15s, transform .08s, box-shadow .15s;
}
[data-tb] .tb-lt[data-lt-btn-style="gradient"] .tb-lt-submit { background: linear-gradient(135deg, var(--lt-btn-bg), var(--app-lt-button-hover-bg)); }
[data-tb] .tb-lt .tb-lt-submit:hover:not(:disabled),
[data-tb] .tb-lt[data-lt-demo="hover"] .tb-lt-submit {
  background: var(--app-lt-button-hover-bg); color: var(--app-lt-button-hover-text);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--app-lt-button-hover-bg) 32%, transparent);
}
[data-tb] .tb-lt .tb-lt-submit:active:not(:disabled) { transform: translateY(1px); box-shadow: none; }
[data-tb] .tb-lt .tb-lt-submit:focus-visible { outline: 3px solid color-mix(in srgb, var(--lt-btn-bg) 40%, transparent); outline-offset: 2px; }
[data-tb] .tb-lt .tb-lt-submit:disabled { opacity: .85; cursor: progress; }
[data-tb] .tb-lt-busy { display: inline-flex; align-items: center; gap: 8px; }
[data-tb] .tb-lt-dots { display: inline-flex; gap: 4px; }
[data-tb] .tb-lt-dots i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: tbLtDot 1s infinite ease-in-out; }
[data-tb] .tb-lt-dots i:nth-child(2) { animation-delay: .15s; }
[data-tb] .tb-lt-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes tbLtDot { 0%, 80%, 100% { opacity: .3; transform: scale(.8); } 40% { opacity: 1; transform: scale(1); } }
[data-tb] .tb-lt-secondary {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 40px; margin-top: 10px;
  border: 1px solid var(--app-lt-divider); border-radius: var(--app-lt-button-radius); background: transparent;
  color: var(--app-lt-heading); font-weight: 600; font-size: 13.5px; cursor: pointer;
}
[data-tb] .tb-lt-secondary:hover { background: color-mix(in srgb, var(--app-lt-heading) 5%, transparent); }
[data-tb] .tb-lt a:focus-visible, [data-tb] .tb-lt button:focus-visible { outline: 2px solid var(--app-lt-input-focus); outline-offset: 2px; }

/* Note and footer */
[data-tb] .tb-lt-note {
  display: flex; gap: 8px; align-items: flex-start; margin-top: 18px; padding: 10px 12px; border-radius: 8px;
  background: color-mix(in srgb, var(--app-lt-heading) 4%, transparent); color: var(--app-lt-subtitle); font-size: 13px; line-height: 1.55;
}
[data-tb] .tb-lt-note .fa { margin-top: 3px; }
[data-tb] .tb-lt-foot { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--app-lt-divider); text-align: center; }
[data-tb] .tb-lt-foot-text { font-size: 12px; line-height: 1.5; color: var(--app-lt-footer); }
[data-tb] .tb-lt-support { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; margin-bottom: 6px; font-size: 12.5px; }
[data-tb] .tb-lt-support a { color: var(--app-lt-link); text-decoration: none; }
[data-tb] .tb-lt-support .fa { margin-right: 3px; opacity: .8; }

/* Side panels */
[data-tb] .tb-lt-panel {
  position: relative; flex: 0 0 var(--app-lt-panel-width); max-width: var(--app-lt-panel-width);
  display: flex; flex-direction: column; overflow: hidden; color: #fff;
  background: linear-gradient(var(--app-lt-gradient-angle), var(--app-login-hero-1), var(--app-login-hero-2));
  background-size: cover; background-position: center;
}
[data-tb] .tb-lt-panel-shade { position: absolute; inset: 0; background: linear-gradient(160deg, var(--app-login-hero-1), var(--app-login-hero-2)); opacity: .92; pointer-events: none; }
[data-tb] .tb-lt-panel.has-image .tb-lt-panel-shade { opacity: var(--app-login-hero-overlay); }
[data-tb] .tb-lt-panel-inner { position: relative; z-index: 1; display: flex; flex-direction: column; flex: 1; padding: 44px 48px 28px; }
[data-tb] .tb-lt-panel-brand-row { display: flex; align-items: center; gap: 14px; }
[data-tb] .tb-lt-panel-logo { display: inline-flex; padding: 8px 10px; border-radius: 12px; background: #fff; box-shadow: 0 6px 18px rgba(0, 0, 0, .15); }
[data-tb] .tb-lt-panel-logo img { max-height: 40px; max-width: 140px; object-fit: contain; }
[data-tb] .tb-lt-panel-org { font-size: 18px; font-weight: 700; line-height: 1.25; }
[data-tb] .tb-lt-panel-body { margin: auto 0; padding: 32px 0; max-width: 560px; }
[data-tb] .tb-lt-panel-foot { padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .16); font-size: 12.5px; opacity: .78; }
[data-tb] .tb-lt-badge {
  display: inline-block; margin-bottom: 4px; padding: 2px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600;
  background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .26);
}
[data-tb] .tb-lt-headline { margin: 0 0 14px; font-family: var(--app-lt-font); font-size: clamp(24px, 3cqi, 38px); line-height: 1.18; font-weight: 800; letter-spacing: -.02em; color: inherit; }
[data-tb] .tb-lt-desc { margin: 0; max-width: 56ch; font-size: 15px; line-height: 1.65; opacity: .86; }
[data-tb] .tb-lt-features { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 12px; }
[data-tb] .tb-lt-features li { display: flex; gap: 12px; align-items: flex-start; }
[data-tb] .tb-lt-features b { display: block; font-size: 14px; }
[data-tb] .tb-lt-features small { display: block; margin-top: 2px; font-size: 12.5px; opacity: .8; }
[data-tb] .tb-lt-feature-icon {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 34px; height: 34px; border-radius: 9px;
  background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .2);
}
[data-tb] .tb-lt-panel .tb-hero-glow { z-index: 0; }

/* Illustration panel: art on top, text below */
[data-tb] .tb-lt-panel-art { justify-content: flex-end; padding: 32px 40px 40px; }
[data-tb] .tb-lt-art { position: relative; z-index: 1; flex: 1 1 auto; min-height: 220px; display: flex; align-items: center; justify-content: center; }
[data-tb] .tb-lt-art > img { max-width: 100%; max-height: 100%; object-fit: contain; }
[data-tb] .tb-lt .tb-lt-art .tb-hris { opacity: .95; }
[data-tb] .tb-lt .tb-lt-art .tb-hris .hs-dash { right: 18%; top: 18%; width: 64%; }
[data-tb] .tb-lt .tb-lt-art .tb-hero-art { display: block; position: absolute; left: 50%; top: 50%; right: auto; width: 70%; max-width: 420px; transform: translate(-50%, -50%); opacity: .9; }
[data-tb] .tb-lt-panel-text { position: relative; z-index: 1; }

/* Corporate: top bar, info panel on the page background, bottom bar */
[data-tb] .tb-lt-topbar, [data-tb] .tb-lt-bottombar { position: relative; z-index: 2; display: flex; align-items: center; gap: 16px; padding: 12px 32px; }
[data-tb] .tb-lt-topbar { justify-content: space-between; background: var(--app-login-card-bg); border-bottom: 3px solid var(--lt-btn-bg); box-shadow: 0 1px 3px rgba(15, 23, 42, .06); }
[data-tb] .tb-lt-topbar-brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
[data-tb] .tb-lt-topbar-brand img { max-height: 40px; max-width: 140px; object-fit: contain; }
[data-tb] .tb-lt-topbar .tb-lt-org { margin: 0; }
[data-tb] .tb-lt-topbar-tools { display: flex; align-items: center; gap: 14px; }
[data-tb] .tb-lt-topbar .tb-lt-support { margin: 0; }
[data-tb] .tb-lt-topbar .tb-lt-lang { margin: 0; }
[data-tb] .tb-lt-bottombar { justify-content: center; font-size: 12px; color: var(--app-lt-footer); border-top: 1px solid var(--app-lt-divider); background: var(--app-login-card-bg); }
[data-tb] .tb-lt-panel-info { justify-content: center; padding: 40px 48px; color: var(--app-lt-heading); background: transparent; }
[data-tb] .tb-lt-panel-info .tb-lt-desc { color: var(--app-lt-subtitle); opacity: 1; }
[data-tb] .tb-lt-panel-info .tb-lt-badge { align-self: flex-start; color: var(--lt-btn-bg); background: color-mix(in srgb, var(--lt-btn-bg) 10%, transparent); border-color: color-mix(in srgb, var(--lt-btn-bg) 25%, transparent); }
[data-tb] .tb-lt-panel-info .tb-lt-feature-icon { color: var(--lt-btn-bg); background: color-mix(in srgb, var(--lt-btn-bg) 10%, transparent); border-color: transparent; }
[data-tb] .tb-lt-panel-info .tb-lt-features small { color: var(--app-lt-subtitle); opacity: 1; }
/* The highlight gradient is made for dark panels; on the light corporate page use the button colour. */
[data-tb] .tb-lt-panel-info .tb-hero-hl { background: none; -webkit-text-fill-color: currentColor; color: var(--lt-btn-bg); }

/* Template accents */
[data-tb] .tb-lt[data-lt="classic"][data-lt-card="1"] .tb-lt-card { border: 1px solid var(--app-lt-divider); }
[data-tb] .tb-lt[data-lt="split_screen"] .tb-lt-main,
[data-tb] .tb-lt[data-lt="illustration"] .tb-lt-main { background: var(--app-login-card-bg); }
[data-tb] .tb-lt[data-lt="modern_card"] .tb-lt-card { overflow: hidden; }
[data-tb] .tb-lt[data-lt="modern_card"] .tb-lt-card::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px;
  background: linear-gradient(90deg, var(--lt-btn-bg), var(--app-lt-button-hover-bg), var(--app-login-hero-1));
}
[data-tb] .tb-lt[data-lt="full_background"] .tb-lt-card { backdrop-filter: blur(6px); }
[data-tb] .tb-lt[data-lt="minimal"] .tb-lt-foot { border-top: 0; }
[data-tb] .tb-lt[data-lt="minimal"] .tb-lt-submit { box-shadow: none; }
[data-tb] .tb-lt[data-lt="gradient"] .tb-lt-page:not(.has-bg-image),
[data-tb] .tb-lt[data-lt="glass"] .tb-lt-page:not(.has-bg-image) {
  background: linear-gradient(var(--app-lt-gradient-angle), var(--app-login-hero-1), var(--app-login-hero-2));
}
[data-tb] .tb-lt-blobs { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
[data-tb] .tb-lt-blobs span { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .5; }
[data-tb] .tb-lt-blobs span:nth-child(1) { width: 46%; height: 46%; left: -10%; top: -12%; background: var(--lt-btn-bg); }
[data-tb] .tb-lt-blobs span:nth-child(2) { width: 38%; height: 38%; right: -8%; top: 30%; background: var(--tb-accent, #2999ff); opacity: .4; }
[data-tb] .tb-lt-blobs span:nth-child(3) { width: 40%; height: 40%; left: 30%; bottom: -16%; background: var(--app-lt-button-hover-bg); opacity: .45; }
[data-tb] .tb-lt[data-lt="glass"][data-lt-card="1"] .tb-lt-card {
  background: color-mix(in srgb, var(--app-login-card-bg) 16%, transparent);
  border: 1px solid rgba(255, 255, 255, .32);
  backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%);
}
[data-tb] .tb-lt[data-lt="glass"] .tb-lt-foot { border-top-color: rgba(255, 255, 255, .24); }
[data-tb] .tb-lt[data-lt="glass"] .tb-lt-note { background: rgba(255, 255, 255, .12); }
[data-tb] .tb-lt[data-lt="compact"] .tb-lt-title { font-size: calc(var(--app-lt-title-size) * .82); }
[data-tb] .tb-lt[data-lt="compact"] .tb-lt-subtitle { font-size: 12.5px; }
[data-tb] .tb-lt[data-lt="compact"] .tb-lt-form { margin-top: 14px; }
[data-tb] .tb-lt[data-lt="compact"] .tb-lt-foot { margin-top: 14px; padding-top: 10px; }

/* Motion (off with Animations switched off, and for reduced motion via section 11). */
[data-tb][data-tb-login-anim="1"] .tb-lt-card { animation: tbLtIn .45s ease-out both; }
[data-tb][data-tb-login-anim="1"] .tb-lt-blobs span { animation: tbHeroFloat 9s ease-in-out infinite alternate; }
@keyframes tbLtIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Tablet: side panels narrower. */
@container tblt (max-width: 991px) {
  [data-tb] .tb-lt-panel { flex-basis: 42%; max-width: 42%; }
  [data-tb] .tb-lt-panel-inner { padding: 32px 28px 22px; }
  [data-tb] .tb-lt-panel-info { padding: 28px; }
  [data-tb] .tb-lt-features small { display: none; }
  [data-tb] .tb-lt-topbar .tb-lt-support { display: none; }
}
/* Phone: the side panel is hidden (or a short banner on top), the card's own brand block returns. */
@container tblt (max-width: 767px) {
  [data-tb] .tb-lt-stage, [data-tb] .tb-lt[data-lt-panel="right"] .tb-lt-stage { flex-direction: column; }
  [data-tb] .tb-lt[data-lt-mpanel="hide"] .tb-lt-panel { display: none; }
  [data-tb] .tb-lt[data-lt-mpanel="top"] .tb-lt-panel { flex: 0 0 auto; max-width: none; }
  [data-tb] .tb-lt[data-lt-mpanel="top"] .tb-lt-panel-inner { padding: 20px; }
  [data-tb] .tb-lt[data-lt-mpanel="top"] .tb-lt-panel-body { padding: 14px 0 0; }
  [data-tb] .tb-lt[data-lt-mpanel="top"] .tb-lt-features,
  [data-tb] .tb-lt[data-lt-mpanel="top"] .tb-lt-panel-foot,
  [data-tb] .tb-lt[data-lt-mpanel="top"] .tb-lt-desc,
  [data-tb] .tb-lt[data-lt-mpanel="top"] .tb-lt-art { display: none; }
  [data-tb] .tb-lt[data-lt-mpanel="top"] .tb-lt-panel-art { padding: 16px 20px; }
  [data-tb] .tb-lt[data-lt-mpanel="top"] .tb-lt-headline { font-size: 20px; margin: 0; }
  [data-tb] .tb-lt[data-lt-mpanel="hide"] .tb-lt-brand-dup { display: flex; }
  [data-tb] .tb-lt[data-lt="corporate"] .tb-lt-brand-dup { display: none; }
  [data-tb] .tb-lt-main { justify-content: center !important; align-items: flex-start !important; padding: 20px 14px; }
  [data-tb] .tb-lt-card { padding: min(var(--app-lt-card-padding), 24px); }
  [data-tb] .tb-lt-topbar, [data-tb] .tb-lt-bottombar { padding: 10px 14px; }
  [data-tb] .tb-lt-topbar .tb-lt-tagline { display: none; }
  [data-tb] .tb-lt[data-lt-mfull="1"] .tb-lt-main { padding: 0; align-items: stretch !important; }
  [data-tb] .tb-lt[data-lt-mfull="1"] .tb-lt-card { max-width: none; border-radius: 0; box-shadow: none; border: 0; }
  [data-tb] .tb-lt-control { width: 100%; }
}

/* ── 15. Print ───────────────────────────────────────────────────────────
   The screen theme never reaches paper: printed reports, letters and the
   browser's "Save as PDF" use black text on white, whatever the colours,
   dark mode or table settings. Server exports (mPDF, dompdf, Excel) do not
   use this stylesheet at all. Letterhead / report formatting is unchanged. */
@media print {
  /* Same weight as the dark-palette selectors (section 1), and later, so it wins over them too. */
  [data-tb][data-tb-mode][data-tb-dark-style] {
    --tb-background: #fff; --tb-text: #000; --tb-muted-text: #444; --tb-card-bg: #fff; --tb-border: #999;
    --tb-section-bg: #fff; --tb-section-header-bg: #fff; --tb-section-header-text: #000; --tb-section-border: #999;
    --tb-popup-bg: #fff; --tb-popup-text: #000; --tb-popup-header-bg: #fff; --tb-popup-header-text: #000;
    --tb-table-header-bg: #fff; --tb-table-header-text: #000; --tb-table-row-alt: #fff; --tb-table-border: #999;
    --tb-table-body-bg: transparent; --tb-table-body-text: #000;
    --tb-link: #000; --tb-input-bg: #fff; --tb-input-border: #999;
    color-scheme: light;
  }
  html.tb-app[data-tb], html.tb-app[data-tb] :is(img, video, canvas, iframe, embed, object, .app-header, .app-footer),
  html.tb-app[data-tb] [style*="background-image"] { filter: none !important; }
  html[data-tb] body { background: #fff !important; color: #000; }
}

/* Native dark: Bootstrap contextual rows keep their light tint, so their text stays dark. */
[data-tb][data-tb-mode="dark"][data-tb-dark-style="native"] :is(.table, table.dataTable) > tbody > tr[class*="table-"] { color: #0f172a; }
@media (prefers-color-scheme: dark) {
  [data-tb][data-tb-mode="system"][data-tb-dark-style="native"] :is(.table, table.dataTable) > tbody > tr[class*="table-"] { color: #0f172a; }
}

/* ── 16. Top menu, profile menu and dashboards ───────────────────────────
   Hard-coded / brand-only colours of the header menus and of the admin and
   employee dashboards (resources/views/Dashboard) follow the theme tokens.
   Status colours (warnings, present / absent, legends, progress bars) are kept.
   custom.css uses !important on the menu rules, so the overrides do too. */

/* Top menu: the hovered / open main item, its dropdown items and the active item icon. */
html[data-tb] .top_hr_menu .navbar-nav .nav-item:hover .dropdown-toggle.main-menu,
html[data-tb] .top_hr_menu .navbar-nav .nav-item.show > .dropdown-toggle.main-menu { background: var(--tb-sidebar-active-bg) !important; color: var(--tb-sidebar-active-text) !important; }
html[data-tb] .top_hr_menu .navbar-nav .nav-item:hover .dropdown-toggle.main-menu i { color: var(--tb-sidebar-active-text) !important; }
html[data-tb] .top_hr_menu .nav-item.active .nav-link.main-menu,
html[data-tb] .top_hr_menu .nav-item.active .nav-link.main-menu i { color: var(--tb-sidebar-active-text) !important; background: var(--tb-sidebar-active-bg) !important; }
html[data-tb] .top_hr_menu .navbar-nav .dropdown-menu { background: var(--tb-popup-bg); border-color: var(--tb-popup-border); }
html[data-tb] .top_hr_menu .navbar-nav .nav-item.dropdown .dropdown-menu .dropdown-item { color: var(--tb-popup-text); }
html[data-tb] .top_hr_menu .navbar-nav .dropdown-menu .dropdown-item i { color: var(--tb-menu-icon); }
html[data-tb] .top_hr_menu .navbar-nav .dropdown-menu .dropdown-item:hover,
html[data-tb] .top_hr_menu .navbar-nav .nav-item.dropdown .dropdown-menu .dropdown:hover .dropdown-toggle { background: var(--tb-sidebar-hover) !important; color: var(--tb-sidebar-hover-text) !important; }
html[data-tb] .top_hr_menu .navbar-nav .dropdown-menu .dropdown-item:hover i,
html[data-tb] .top_hr_menu .navbar-nav .nav-item.dropdown .dropdown-menu .dropdown:hover .dropdown-toggle i { color: var(--tb-sidebar-hover-text) !important; }
html[data-tb] .top_hr_menu .navbar-nav .dropdown-menu .dropdown-item.active { background: var(--tb-sidebar-active-bg) !important; color: var(--tb-sidebar-active-text) !important; }

/* Profile menu in the header (style.css paints it in the brand colour). */
html[data-tb] .app-header .navbar-nav .dropdown-menu-right:not(.noti_drop) { background: var(--tb-header-bg); }
html[data-tb] .app-header .navbar-nav .dropdown-menu-right:not(.noti_drop) a { color: var(--tb-header-text); border-top-color: color-mix(in srgb, var(--tb-header-text) 18%, transparent); }
html[data-tb] .app-header .navbar-nav .dropdown-menu-right:not(.noti_drop) a:is(:hover, :focus-visible, .active) { color: var(--tb-header-text) !important; background: color-mix(in srgb, var(--tb-header-text) 16%, var(--tb-header-bg)); }
html[data-tb] .app-header .navbar-nav .dropdown-menu-right:not(.noti_drop) a:is(:hover, .active) i { color: var(--tb-header-text); }
html[data-tb] .app-header .navbar-nav .dropdown-menu-right:not(.noti_drop) a:focus-visible { outline: 2px solid var(--tb-header-text); outline-offset: -2px; }

/* Admin dashboard (AdminDashboard.blade.php): its --dsh-* design tokens re-pointed.
   Panel headers use the Sections & cards header colours when set, otherwise a
   gradient from the theme colour to the accent. */
[data-tb] .dashboard_sectin {
  --dsh-surface: var(--tb-section-bg);
  --dsh-line: var(--tb-section-border);
  --dsh-line-soft: color-mix(in srgb, var(--tb-section-border) 55%, var(--tb-section-bg));
  --dsh-line-strong: color-mix(in srgb, var(--tb-primary) 22%, var(--tb-section-border));
  --dsh-tint: color-mix(in srgb, var(--tb-primary) 4%, var(--tb-section-bg));
  --dsh-ink: var(--tb-text);
  --dsh-ink-2: var(--tb-muted-text);
  --dsh-muted: var(--tb-muted-text);
  --dsh-primary: var(--tb-primary);
  --dsh-primary-deep: color-mix(in srgb, var(--tb-primary) 62%, var(--tb-text));
  --dsh-accent: var(--tb-accent);
  --dsh-warn: var(--tb-warning);
  --dsh-danger: var(--tb-danger);
  --dsh-ok: var(--tb-success);
  --dsh-grad-1: var(--tb-primary);
  --dsh-grad-2: color-mix(in srgb, var(--tb-primary) 70%, var(--tb-accent));
  --dsh-head-bg: var(--app-section-header-bg, linear-gradient(120deg, var(--dsh-grad-1) 0%, var(--dsh-grad-2) 55%, var(--dsh-accent) 100%));
  --dsh-on-head: var(--app-section-header-text, var(--tb-button-text));
  --dsh-on-primary: var(--tb-button-text);
  --dsh-icon-bg: color-mix(in srgb, var(--tb-primary) 9%, var(--tb-section-bg));
  --dsh-icon-line: color-mix(in srgb, var(--tb-primary) 14%, var(--tb-section-border));
  --dsh-panel-bg: color-mix(in srgb, var(--tb-primary) 4%, var(--tb-section-bg));
  --dsh-track: color-mix(in srgb, var(--tb-primary) 7%, var(--tb-section-bg));
  --dsh-chip: color-mix(in srgb, var(--tb-primary) 11%, var(--tb-section-bg));
  --dsh-row-alt: var(--tb-table-row-alt);
  --dsh-row-hover: color-mix(in srgb, var(--tb-primary) 8%, var(--tb-section-bg));
  --dsh-danger-soft: color-mix(in srgb, var(--tb-danger) 12%, var(--tb-section-bg));
  --dsh-ok-tint: color-mix(in srgb, var(--tb-success) 6%, var(--tb-section-bg));
  --dsh-ok-soft: color-mix(in srgb, var(--tb-success) 14%, var(--tb-section-bg));
}

/* Employee dashboard (DashboardPisEmployee_new.blade.php, colours from custom_emp.css). */
[data-tb] .emp_dashboard :is(.activity_log, .emp_attendance_log, .emp_roster, .leave_balance, .calendar_433, .emp_request_sec .card) { background: var(--tb-section-bg); color: var(--tb-text); }
[data-tb] .emp_dashboard :is(.activity_log h4, .emp_attendance_log h4, .emp_roster h4, .b_wrap_433 h4, .b_box h4, .emp_request_sec h4, .emp_request_sec .card .card-footer em) { color: color-mix(in srgb, var(--tb-primary) 62%, var(--tb-text)); }
[data-tb] .emp_dashboard :is(.activity_log h4 small, .emp_roster h4 small, .activity .activity-item .activite-label, .leave_balance .leave_box .number h5, .notice_info_dtl h5 small, .b_box .small) { color: var(--tb-muted-text); }
[data-tb] .emp_dashboard :is(.activity .activity-item .activity-content .notice_short_desc, .req_live_info_plus ul li span, .req_live_info_plus ul li em, .history_box ul li em, .notice_info_dtl p, .history_box_data .row_data .label) { color: var(--tb-text); }
[data-tb] .emp_dashboard :is(.b_box .emp_info_box, .b_wrap_433 ul li, .bday_div, .history_box ul li, .req_live_info_plus ul li, .emp_request_sec ul.req_live_info li, .activity .activity-item, .payslip_list ul li a, .branch_info, .sticky_link li a) { border-color: var(--tb-section-border); }
[data-tb] .emp_dashboard .activity .activity-item .activite-label::before { background-color: color-mix(in srgb, var(--tb-primary) 12%, var(--tb-section-bg)); }
[data-tb] .emp_dashboard :is(.activity .activity-item:hover, .b_wrap_433 ul li:hover, .atten_check_div, .bday_div:hover) { background: color-mix(in srgb, var(--tb-primary) 6%, var(--tb-section-bg)); }
[data-tb] .emp_dashboard .activity .activity-item .activity-content a:hover { color: var(--tb-link); }
[data-tb] .emp_dashboard :is(.leave_balance .leave_box_1, .roster_download, .payslip_list ul li a:hover) { background: color-mix(in srgb, var(--tb-primary) 14%, var(--tb-section-bg)); }
[data-tb] .emp_dashboard .payslip_list ul li a { background: color-mix(in srgb, var(--tb-primary) 3%, var(--tb-section-bg)); }
[data-tb] .emp_dashboard .emp_request_sec ul.req_live_info li span.l_type { color: var(--tb-primary); }
[data-tb] .emp_dashboard .twm-card-blocks .twm-icon { background-color: color-mix(in srgb, var(--tb-primary) 10%, var(--tb-section-bg)); color: var(--tb-primary); }
[data-tb] .emp_dashboard .twm-card-blocks .twm-content .tw-count-number { color: color-mix(in srgb, var(--tb-primary) 70%, var(--tb-text)); }
[data-tb] .emp_dashboard :is(.wishes_list strong, .custom_table .gridtable tbody tr td a:hover) { color: var(--tb-link); }
[data-tb] .emp_dashboard .custom_table .gridtable tbody tr:hover td { background: var(--tb-table-row-hover-bg); }
[data-tb] .emp_dashboard :is(.alt_table thead th, .custom_table .gridtable .alt_table thead tr th) { background: var(--tb-table-header-bg); color: var(--tb-table-header-text); border-color: var(--tb-table-border); }
[data-tb] .emp_dashboard :is(.overview_notices, .notice_board) { background: var(--tb-section-bg); border-color: var(--tb-section-border); }
[data-tb] .emp_dashboard :is(.overview_notices h2, .pro_link h4, .quick_link h4) { background-color: var(--tb-section-header-bg); color: var(--tb-section-header-text); border-bottom-color: var(--tb-section-border); }