/* ============================================================================
   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;
  --ob-amber: #b45309;
  --ob-amber-lt: #fef3c7;
  --ob-red: #b91c1c;
  --ob-red-lt: #fee2e2;
  --ob-purple: #6d28d9;
  --ob-purple-lt: #ede9fe;
  --ob-border: #e8eaed;
}

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; }

/* ----------------------------------------------------------------------------
   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; }