/* ============================================================================
   OpenBaraza — Tabler BRAND layer
   ----------------------------------------------------------------------------
   Brand-only overrides on top of Tabler. Adopts the OpenBaraza brand by
   overriding Tabler CSS variables (--tblr-*) and adds brand-specific component
   styling (dark sidebar, status pills, AG Grid colours).

   This file is layered AFTER assets/css/baraza_layout.css, which owns the
   layout + legacy-Metronic compat shim (portlet→card, tabs, full-screen flex,
   dashboard tiles, page footer). Keep those concerns in baraza_layout.css and
   keep ONLY brand concerns here to avoid duplication.

   Load order in JSP:
     tabler.min.css -> (plugins) -> baraza_layout.css -> THIS FILE

   Brand reference: build/webapps/baraza/openbaraza-hcm-employees.html
   Tabler version : v1.0.0-beta21 (assets/tabler/)
   ============================================================================ */

/* ----------------------------------------------------------------------------
   0. Inter web font (self-hosted — see assets/fonts/inter/)
   Falls back to the system stack if the woff2 files are not present.
---------------------------------------------------------------------------- */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/inter/Inter-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/inter/Inter-Medium.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/inter/Inter-SemiBold.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/inter/Inter-Bold.woff2") format("woff2");
}

/* ----------------------------------------------------------------------------
   1. Brand tokens — override Tabler/Bootstrap variables
   These cascade into native components at runtime:
     .btn-primary  uses  --tblr-btn-bg: var(--tblr-primary)
     .text-primary / .bg-primary  use  --tblr-primary-rgb
     links         use  --tblr-link-color(-rgb)
---------------------------------------------------------------------------- */
:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {
  /* Accent — OpenBaraza blue (#1f77cc) replaces Tabler default #066fd1 */
  --tblr-primary: #1f77cc;
  --tblr-primary-rgb: 31, 119, 204;
  --tblr-link-color: #1f77cc;
  --tblr-link-color-rgb: 31, 119, 204;

  /* Typography */
  --tblr-font-sans-serif: "Inter", system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;

  /* Slightly softer corners to match the mockup (Tabler default = 4px) */
  --tblr-border-radius: 0.5rem;

  /* OpenBaraza brand palette (mirrors the mockup's --ob-* tokens) */
  --ob-accent: #1f77cc;
  --ob-accent-lt: #dbeafe;
  --ob-accent-active: #74b5f9;
  --ob-sidebar: #0d1b2e;
  --ob-sidebar-hover: rgba(255, 255, 255, 0.06);
  --ob-sidebar-active: rgba(31, 119, 204, 0.30);
  --ob-green: #15803d;
  --ob-green-lt: #dcfce7;
  /* #b45309 landed at exactly 4.50:1 on both amber tints — passing only by
     rounding. Darkened one step for real margin; still the same amber. */
  --ob-amber: #a84d08;
  --ob-amber-lt: #fef3c7;
  --ob-red: #b91c1c;
  --ob-red-lt: #fee2e2;
  --ob-purple: #6d28d9;
  --ob-purple-lt: #ede9fe;
  --ob-border: #e8eaed;

  /* Semantic colours — point Tabler's success/warning/danger at the brand
     palette above. Tabler ships #2fb344 / #f76707 / #d63939, which are tuned
     for solid fills; as foreground text (.text-success, .badge.bg-*-lt) they
     land at 2.5-3.0:1 on their own tint and fail WCAG AA. The --ob-* values
     are the same hues darkened to clear 4.5:1, so soft badges, status text
     and progress ticks become readable without changing the colour language.
     Solid .bg-success / .btn-success simply read a shade deeper. */
  --tblr-success: var(--ob-green);
  --tblr-success-rgb: 21, 128, 61;
  --tblr-warning: var(--ob-amber);
  --tblr-warning-rgb: 168, 77, 8;
  --tblr-danger: var(--ob-red);
  --tblr-danger-rgb: 185, 28, 28;

  /* Table headers and .datagrid-title render at 10px in this colour. Tabler's
     #6c7a91 gives 4.35:1 on white and 4.09:1 on the tertiary surface behind
     table heads — under AA for text that small. Same grey-blue, one step down. */
  --tblr-secondary: #5b6880;
  --tblr-secondary-rgb: 91, 104, 128;
}

body.antialiased,
body {
  font-family: var(--tblr-font-sans-serif);
}

/* Focus border colour follows the accent (Tabler ships a literal #83b7e8) */
.form-control:focus,
.form-select:focus {
  border-color: var(--ob-accent);
}
.col-form-label,
.form-label {
  font-weight: 500;
}

/* ----------------------------------------------------------------------------
   2. Sidebar (aside.navbar-vertical.navbar-dark[data-bs-theme=dark])
   Brand dark sidebar + accent active/hover states.
---------------------------------------------------------------------------- */
.navbar-vertical.navbar-dark,
.navbar-vertical[data-bs-theme="dark"] {
  background-color: var(--ob-sidebar) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.07);
}

.navbar-vertical .navbar-nav .nav-link {
  color: rgba(255, 255, 255, 0.6);
  border-radius: 0;
  margin: 0;
  /* Match Tabler combo layout: no margin, horizontal padding = page padding (~1rem) */
  padding: 0.5rem var(--tblr-page-padding, 1rem);
  transition: background-color 0.15s ease, color 0.15s ease;
}
.navbar-vertical .navbar-nav .nav-link:hover {
  background-color: var(--ob-sidebar-hover);
  color: rgba(255, 255, 255, 0.9);
}
.navbar-vertical .nav-item.active > .nav-link,
.navbar-vertical .navbar-nav .nav-link.active {
  background-color: var(--ob-sidebar-active);
  color: var(--ob-accent-active) !important;
  box-shadow: inset 3px 0 0 0 var(--ob-accent-active);
}
.navbar-vertical .nav-link .nav-link-icon {
  opacity: 0.85;
}

/* --- Menu hierarchy: depth indentation, drill-down chevrons, icon sizing ---
   Markup (BWeb.getSubMenu): parents emit a.nav-link[data-bs-toggle=collapse]
   followed by a sibling div.navbar-nav.collapse; nesting depth = nested .collapse. */

/* Top-level icons: larger and fully opaque */
#sideBarMenuAuth > .nav-item > .nav-link .nav-link-icon i {
  font-size: 1.35rem;
  opacity: 1;
}

/* Default top-level icon when the configured icon isn't a Tabler glyph — i.e. it's
   empty OR a legacy Font-Awesome/`icon` class that doesn't render (we load only
   Tabler icons). Guarantees every top-level item shows an icon so it stays
   distinguishable from icon-less inner items. (Real `ti ti-*` icons are untouched.) */
#sideBarMenuAuth > .nav-item > .nav-link .nav-link-icon i:not([class*="ti-"]) {
  font-family: "tabler-icons";
  font-style: normal;
  font-weight: 400;
}
#sideBarMenuAuth > .nav-item > .nav-link .nav-link-icon i:not([class*="ti-"])::before {
  content: "\ea6b"; /* ti-circle — matches the framework's default menu icon */
}

/* Icons are TOP-LEVEL only. The server emitter (BWeb.getSubMenu) no longer emits a
   .nav-link-icon span for nested (level > 0) items, so no CSS hide is needed here —
   nested items are icon-less in the markup and simply indent (see below). */

/* Clear per-level indentation for SUBMENU items only (top-level keeps base padding).
   L1 aligns just under the parent's text label; deeper levels step in further. */
.navbar-vertical .navbar-nav:is(.collapse, .collapsing) .nav-link {
  padding-left: 2.75rem !important;
}
.navbar-vertical .navbar-nav:is(.collapse, .collapsing) .navbar-nav:is(.collapse, .collapsing) .nav-link {
  padding-left: 3.5rem !important;
}
.navbar-vertical .navbar-nav:is(.collapse, .collapsing) .navbar-nav:is(.collapse, .collapsing) .navbar-nav:is(.collapse, .collapsing) .nav-link {
  padding-left: 4.25rem !important;
}

/* Drill-down chevron on parent (collapsible) items — border-drawn, font-independent */
.navbar-vertical .nav-link[data-bs-toggle="collapse"] {
  position: relative;
}
.navbar-vertical .nav-link[data-bs-toggle="collapse"]::after {
  content: "";
  flex-shrink: 0;
  width: 0.42em;
  height: 0.42em;
  margin-left: auto;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  opacity: 0.5;
  transition: transform 0.15s ease;
}
/* Rotate to point down when the group is expanded */
.navbar-vertical .nav-link[data-bs-toggle="collapse"][aria-expanded="true"]::after,
.navbar-vertical .nav-item:has(> .collapse.show) > .nav-link[data-bs-toggle="collapse"]::after {
  transform: rotate(45deg);
}

/* Active trail: a parent group that contains the active item is emphasised so
   users can see where they are in the hierarchy (chevron already rotates above). */
.navbar-vertical .nav-item:has(.nav-link.active) > .nav-link[data-bs-toggle="collapse"] {
  color: rgba(255, 255, 255, 0.95);
}
.navbar-vertical .nav-item:has(.nav-link.active) > .nav-link[data-bs-toggle="collapse"]::after {
  opacity: 0.85;
}

/* Keyboard focus (a11y) — visible accent ring on menu links */
.navbar-vertical .nav-link:focus-visible {
  outline: 2px solid var(--ob-accent-active);
  outline-offset: -2px;
}

/* Thin scrollbar for the (long) sidebar, tuned for the dark surface */
.navbar-vertical,
.navbar-vertical .navbar-collapse {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}
.navbar-vertical::-webkit-scrollbar,
.navbar-vertical .navbar-collapse::-webkit-scrollbar {
  width: 8px;
}
.navbar-vertical::-webkit-scrollbar-thumb,
.navbar-vertical .navbar-collapse::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.16);
  border-radius: 8px;
}
.navbar-vertical::-webkit-scrollbar-thumb:hover,
.navbar-vertical .navbar-collapse::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.28);
}
.navbar-vertical::-webkit-scrollbar-track,
.navbar-vertical .navbar-collapse::-webkit-scrollbar-track {
  background: transparent;
}

/* Sidebar search box (filters the menu — see assets/js/sidebar_menu.js) */
.sidebar-search {
  padding: 0.5rem var(--tblr-page-padding, 1rem) 0.75rem;
}
.sidebar-search .input-icon .form-control {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
  color: #fff;
}
.sidebar-search .form-control::placeholder {
  color: rgba(255, 255, 255, 0.4);
}
.sidebar-search .input-icon .input-icon-addon {
  color: rgba(255, 255, 255, 0.4);
}
.navbar-vertical .nav-item.search-hidden,
.navbar-vertical .navbar-nav.collapse .nav-link.search-hidden {
  display: none !important;
}

/* ----------------------------------------------------------------------------
   3. Buttons — legacy colour classes mapped to BRAND colours
   The Java layer still emits btn blue/green/red (slated for removal — see
   docs/ui-migration/backend-change-requests.md). baraza_layout.css maps these
   with the --bs-* prefix (inert under Tabler); the --tblr-* overrides below are
   the functional ones and align them to the brand.
---------------------------------------------------------------------------- */
.btn.green,
.btn-green {
  --tblr-btn-bg: var(--ob-green);
  --tblr-btn-border-color: var(--ob-green);
  --tblr-btn-color: #fff;
  --tblr-btn-hover-bg: #126a33;
  --tblr-btn-hover-border-color: #126a33;
  --tblr-btn-hover-color: #fff;
}
.btn.blue,
.btn-blue {
  --tblr-btn-bg: var(--ob-accent);
  --tblr-btn-border-color: var(--ob-accent);
  --tblr-btn-color: #fff;
  --tblr-btn-hover-bg: #1565b5;
  --tblr-btn-hover-border-color: #1565b5;
  --tblr-btn-hover-color: #fff;
}
.btn.red,
.btn-red {
  --tblr-btn-bg: var(--ob-red);
  --tblr-btn-border-color: var(--ob-red);
  --tblr-btn-color: #fff;
  --tblr-btn-hover-bg: #991b1b;
  --tblr-btn-hover-border-color: #991b1b;
  --tblr-btn-hover-color: #fff;
}

/* ----------------------------------------------------------------------------
   4. Status pills / badges
   Soft-tint badge language from the mockup. Native Tabler `.badge bg-*`
   keeps working; these add the tinted variants.
---------------------------------------------------------------------------- */
.pill {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
  line-height: 1.4;
}
.pill-green  { background: var(--ob-green-lt);  color: var(--ob-green); }
.pill-amber  { background: var(--ob-amber-lt);  color: var(--ob-amber); }
.pill-red    { background: var(--ob-red-lt);    color: var(--ob-red); }
.pill-blue   { background: var(--ob-accent-lt); color: var(--ob-accent); }
.pill-purple { background: var(--ob-purple-lt); color: var(--ob-purple); }
.pill-gray   { background: #f3f4f6; color: #374151; }

/* ----------------------------------------------------------------------------
   4b. Comfortable small buttons  (opt-in: .ob-roomy on a container)
   Tabler's stock .btn-sm is padding .125rem/.25rem at 12px with a 2px radius —
   sized for dense grid toolbars, where it is the right call. On the content
   pages it reads as unstyled markup and the hit area is well under any usable
   target, so those pages opt in here instead of the size changing app-wide.
---------------------------------------------------------------------------- */
.ob-roomy .btn-sm,
.dashboard-container .btn-sm {
  --tblr-btn-padding-y: 0.375rem;
  --tblr-btn-padding-x: 0.75rem;
  --tblr-btn-font-size: 0.8125rem;
  --tblr-btn-border-radius: 0.375rem;
  --tblr-btn-icon-size: 0.875rem;
  font-weight: 500;
}

/* ----------------------------------------------------------------------------
   5. AG Grid — brand colours for the alpine theme
   (baraza_layout.css owns font-size + height; this owns brand colours)
---------------------------------------------------------------------------- */
.ag-theme-alpine,
#jqlist.ag-theme-alpine {
  --ag-font-family: var(--tblr-font-sans-serif);
  --ag-foreground-color: #374151;
  --ag-header-foreground-color: #6b7280;
  --ag-header-background-color: #f9fafb;
  /* Subtle zebra: odd rows get a faint tint, even rows stay white (--ag-background-color).
     Aids row scanning in dense data grids while staying close to Tabler's clean tables. */
  --ag-odd-row-background-color: #fafbfc;
  --ag-row-hover-color: #f1f6fd;
  --ag-selected-row-background-color: var(--ob-accent-lt);
  --ag-border-color: var(--ob-border);
  --ag-row-border-color: #f3f4f6;
  --ag-header-column-separator-color: var(--ob-border);
  --ag-alpine-active-color: var(--ob-accent);
  --ag-range-selection-border-color: var(--ob-accent);
  --ag-input-focus-border-color: var(--ob-accent);
  --ag-checkbox-checked-color: var(--ob-accent);
}
.ag-theme-alpine .ag-header-cell-text {
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0;
  font-weight: 600;
  line-height: 1.3;
  /* Wrap header labels at spaces only — never break a word mid-character
     (AG's wrap default would split "ATTENDANCE" into "ATTENDANC/E"). The small
     uppercase size keeps long single words (e.g. ATTENDANCE) on one line in
     narrow columns instead of clipping. */
  word-break: normal;
  overflow-wrap: normal;
}

/* Drill / comparison picker tree (BDrillWeb .ui-tree): clean Tabler tree — no disc bullets,
   indented branches with a guide line, year as a heading, months as hover/selectable chips. */
.ui-tree ul { list-style: none; margin: 0; padding-left: 1.25rem; }
.ui-tree > ul { padding-left: 0; }
.ui-tree li { margin: .075rem 0; }
.ui-tree > ul > li { font-weight: 600; color: var(--tblr-body-color, #1d273b); padding: .25rem 0; }
.ui-tree > ul > li > ul {
  border-left: 1px solid var(--tblr-border-color, #dadfe5);
  margin: .125rem 0 .25rem .35rem; padding-left: .85rem;
}
.ui-tree a {
  display: inline-block; padding: .2rem .6rem; border-radius: var(--tblr-border-radius, 6px);
  color: var(--tblr-primary, #066fd1); font-weight: 400; text-decoration: none; line-height: 1.35;
}
.ui-tree a:hover, .ui-tree a:focus {
  background: var(--tblr-active-bg, rgba(6, 111, 209, .06)); color: var(--tblr-primary, #066fd1);
  text-decoration: none;
}
/* selected item — clear, high-contrast feedback so the user sees their choice before Report */
.ui-tree a.is-selected, .ui-tree a.is-selected:hover, .ui-tree a.is-selected:focus {
  background: var(--tblr-primary, #066fd1); color: #fff; font-weight: 600;
}
/* Fold toggle (wrapped around each parent label by enhanceDrillTrees in index.jsp): a clickable
   chevron + label. The chevron points right when collapsed and rotates down when expanded; a
   collapsed branch hides its nested <ul>. Tabler tokens keep it legible in light and dark. */
.ui-tree-toggle {
  display: inline-flex; align-items: center; gap: .35rem; cursor: pointer; user-select: none;
}
.ui-tree-caret {
  color: var(--tblr-secondary, #667382); font-size: .85em; line-height: 1;
  transition: transform .15s ease;
}
.ui-tree li:not(.is-collapsed) > .ui-tree-toggle .ui-tree-caret { transform: rotate(90deg); }
.ui-tree-toggle:hover .ui-tree-caret { color: var(--tblr-primary, #066fd1); }
.ui-tree li.is-collapsed > ul { display: none; }

/* AG Grid server-side search: the global quick-search box above the grid. Per-column filtering
   uses AG's native column funnel (wired to the server in index.jsp), so it needs no extra CSS.
   The box lives in the page chrome — let Tabler's .form-control theme it (light/dark); only
   constrain its size. */
.ob-grid-search { max-width: 22rem; margin-bottom: .5rem; margin-left: auto; }

/* Custom comparison funnel (ObComparisonFilter in index.jsp) for numeric/date columns: an operator
   dropdown + typed input + Apply/Clear, shown inside the AG funnel popup. Sized so the popup is
   comfortable; controls inherit Tabler's .form-select/.form-control theming (light/dark). */
.ob-cmp-filter { padding: .5rem; min-width: 13rem; }
.ob-cmp-filter .ob-cmp-btns { display: flex; justify-content: flex-end; gap: .25rem; }

/* Legacy Metronic .table-scrollable (still emitted by BCrossTab / TABLEVIEW fallback) had no
   BS5 equivalent, so wide tables overflowed the card. Restore horizontal scroll inside the
   container — mirror of Bootstrap .table-responsive. */
.table-scrollable {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;  /* momentum scroll on touch */
}

/* CROSSTAB pivot: keep numeric cells on one line so the scroll (not wrapping) absorbs the width,
   and pin the header row while scrolling vertically through long pivots. */
#crosstab th, #crosstab td { white-space: nowrap; }
#crosstab thead th { position: sticky; top: 0; z-index: 1; background: var(--tblr-bg-surface, #fff); }

/* APPROVALFORM/FORMVIEW key-value detail table: drop the orphan empty header strip (two empty <th>
   emitted by BWebBody) and let the Tabler .table-striped styling read cleanly; steady, lightly-muted
   label column (replaces the lost <th width> hints once the header is hidden). */
.viewform thead { display: none; }
.viewform table.table { margin-bottom: 0; }
.viewform table.table td:first-child { width: 240px; color: var(--tblr-secondary, #667382); }

/* Modal close button — the server emitter (BWebData.getModalForm) ships a
   dual-compat close button: `btn-close close` with both data-bs-dismiss (BS5/Tabler)
   and data-dismiss (BS3/legacy Metronic pages), plus a legacy `<span>&times;</span>`.
   This theme CSS only loads on Tabler pages, so here we hide the legacy × glyph and
   let Tabler's .btn-close SVG render cleanly. (Legacy pages keep the × via .close.) */
.modal .btn-close > span {
  display: none;
}

/* ──────────────────────────────────────────────────────────────────────────
   Condensed display personalization (orgs.display_type = 2 -> body.ob-condensed,
   set in index.jsp from web.getDisplayType()). A compact density layer: horizontal
   (label-beside-field) forms + tighter grids, tables and cards. Everything is scoped
   under .ob-condensed so the default (display_type = 1) layout is byte-for-byte
   unchanged. Density only — base font size and the sidebar/topbar chrome are untouched.
   ────────────────────────────────────────────────────────────────────────── */

/* Horizontal forms: each field row (.form-body .mb-3 = label + control) becomes a flex
   row with a fixed, right-aligned label column and a flexible control. align-items:
   flex-start keeps the label aligned to the top of tall controls (textarea/editor). */
.ob-condensed .form-body .mb-3 {
  display: flex; align-items: flex-start; gap: .75rem; margin-bottom: .45rem;
}
.ob-condensed .form-body .mb-3 > .form-label {
  flex: 0 0 9rem; max-width: 9rem; text-align: right;
  margin: .4rem 0 0; font-weight: 500;
}
.ob-condensed .form-body .mb-3 > :not(.form-label) {
  flex: 1 1 auto; min-width: 0;          /* control fills the rest (input/select/input-group/textarea/.form-check) */
}
/* CHECKBOX fields render as a .form-label (the title) + a .form-check control, so the
   .form-check is just the flex control above — it sits at the control-column left edge,
   left-aligned with the other inputs. (No extra indent: the box must line up with them.)
   Vertically centre the box with its short label (:has scopes this to checkbox rows so
   tall controls — textarea/editor — keep their top alignment). */
.ob-condensed .form-body .mb-3:has(> .form-check) { align-items: center; }
.ob-condensed .form-body .mb-3:has(> .form-check) > .form-label { margin-top: 0; }

/* Compact AG Grid: shorter rows/header and tighter cells. More specific than the
   normal Alpine override above, so it wins under .ob-condensed. */
.ob-condensed #jqlist.ag-theme-alpine {
  --ag-row-height: 30px;
  --ag-header-height: 32px;
  --ag-cell-horizontal-padding: 8px;
}

/* Compact tables (FORMVIEW/APPROVALFORM .viewform key-value, CrossTab pivot, generic
   .table) + tighter card padding and content spacing. */
.ob-condensed .table > :not(caption) > * > * { padding: .3rem .5rem; }
.ob-condensed #crosstab th, .ob-condensed #crosstab td { padding: .3rem .5rem; }
.ob-condensed .portlet-body { padding-top: .6rem; padding-bottom: .6rem; }
.ob-condensed .portlet-body .mb-2 { margin-bottom: .3rem; }