/*
 * "Gulf Petrol & Pearl" design system -- Phase 1 UI/UX redesign.
 *
 * Loaded AFTER Bootstrap's own CSS (bootstrap.min.css / bootstrap.rtl.min.css,
 * swapped per-locale in layouts/partials/head.blade.php) and BEFORE any
 * page-specific styles. Reskins Bootstrap 5.3 entirely through its own CSS
 * custom-property theming API (--bs-*) -- no !important overrides, no
 * fighting Bootstrap's classes -- so every page that extends
 * layouts/app.blade.php or layouts/guest.blade.php inherits the new look
 * automatically.
 *
 * Zero external network dependencies: fonts are vendored locally under
 * public/vendor/fonts/ (IBM Plex, SIL OFL) and the Sadu motif is inline SVG
 * encoded as data: URIs -- no CDN, no Google Fonts link, nothing fetched at
 * runtime beyond this app's own origin.
 */

/* ==========================================================================
   1. Font vendoring -- self-hosted IBM Plex family (Latin + Arabic + Mono)
   ========================================================================== */

@font-face {
    font-family: 'IBM Plex Sans';
    src: url('/vendor/fonts/ibm-plex-sans/IBMPlexSans-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'IBM Plex Sans';
    src: url('/vendor/fonts/ibm-plex-sans/IBMPlexSans-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'IBM Plex Sans';
    src: url('/vendor/fonts/ibm-plex-sans/IBMPlexSans-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'IBM Plex Sans';
    src: url('/vendor/fonts/ibm-plex-sans/IBMPlexSans-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* IBM Plex Sans Arabic -- same family role, Arabic script. Latin text uses
   'IBM Plex Sans' above; the browser falls through to this face per-glyph
   for any Arabic-script character (Plex Sans carries no Arabic glyphs), so
   a single font-family stack (see Base typography, below) renders mixed
   content like "EMP-0001" next to an Arabic name in one coherent voice
   instead of pairing a Latin sans against a mismatched system fallback. */
@font-face {
    font-family: 'IBM Plex Sans Arabic';
    src: url('/vendor/fonts/ibm-plex-sans-arabic/IBMPlexSansArabic-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'IBM Plex Sans Arabic';
    src: url('/vendor/fonts/ibm-plex-sans-arabic/IBMPlexSansArabic-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'IBM Plex Sans Arabic';
    src: url('/vendor/fonts/ibm-plex-sans-arabic/IBMPlexSansArabic-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'IBM Plex Sans Arabic';
    src: url('/vendor/fonts/ibm-plex-sans-arabic/IBMPlexSansArabic-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'IBM Plex Mono';
    src: url('/vendor/fonts/ibm-plex-mono/IBMPlexMono-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'IBM Plex Mono';
    src: url('/vendor/fonts/ibm-plex-mono/IBMPlexMono-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'IBM Plex Mono';
    src: url('/vendor/fonts/ibm-plex-mono/IBMPlexMono-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'IBM Plex Mono';
    src: url('/vendor/fonts/ibm-plex-mono/IBMPlexMono-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ==========================================================================
   2. Color tokens -- "Gulf Petrol & Pearl"
   ========================================================================== */

:root {
    /* Brand */
    --brand-primary: #0E5C63;
    --brand-primary-hover: #0A454A;
    --brand-primary-darker: #0A3D42;
    --brand-accent: #C89B3C;
    --brand-accent-soft: #EFE3C4;

    /* Surfaces */
    --surface-bg: #F6F8F7;
    --surface-card: #FFFFFF;

    /* Ink */
    --ink-primary: #16232A;
    --ink-secondary: #4B5D63;
    --ink-on-brand: #F6F8F7;

    --border-subtle: #E1E6E5;

    /* Status */
    --status-success: #2F8F5B;
    --status-warning: #C88A2E;
    --status-danger: #B84C3E;
    --status-info: #3B7C99;

    /* Sadu motif tiles (see section 6) -- defined here so both themes can
       swap the card-top tile for a brighter one in dark mode. */
    --sadu-topbar-tile: url("data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2216%22 height%3D%2210%22 viewBox%3D%220 0 16 10%22%3E%3Cpolygon points%3D%220%2C10 8%2C0 16%2C10%22 fill%3D%22%23C89B3C%22%2F%3E%3Cpolygon points%3D%224%2C10 8%2C3.2 12%2C10%22 fill%3D%22%230A3D42%22%2F%3E%3C%2Fsvg%3E");
    --sadu-card-top-tile: url("data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2210%22 height%3D%225%22 viewBox%3D%220 0 10 5%22%3E%3Cpolygon points%3D%220%2C5 5%2C0 10%2C5%22 fill%3D%22%23C89B3C%22%2F%3E%3C%2Fsvg%3E");
    --sadu-login-bg-tile: url("data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22%3E%3Cpolygon points%3D%220%2C24 12%2C0 24%2C24%22 fill%3D%22%23F6F8F7%22 fill-opacity%3D%220.055%22%2F%3E%3Cpolygon points%3D%220%2C0 12%2C24 24%2C0%22 fill%3D%22%23C89B3C%22 fill-opacity%3D%220.10%22%2F%3E%3C%2Fsvg%3E");
}

:root[data-bs-theme="dark"] {
    --surface-bg: #0E1517;
    --surface-card: #16211F;
    --brand-primary: #1B8A93;
    --brand-primary-hover: #24A0AA;
    --brand-primary-darker: #0A2528;
    --ink-primary: #E7EDEC;
    --ink-secondary: #A9BBBA;
    --border-subtle: #24312F;
    /* Accent/status stay legible on the darker surface as-is; the card-top
       Sadu tile is swapped for a slightly brighter gold so it still reads
       against a dark card instead of disappearing. */
    --sadu-card-top-tile: url("data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2210%22 height%3D%225%22 viewBox%3D%220 0 10 5%22%3E%3Cpolygon points%3D%220%2C5 5%2C0 10%2C5%22 fill%3D%22%23D9AE55%22%2F%3E%3C%2Fsvg%3E");
}

/* ==========================================================================
   3. Map onto Bootstrap 5.3's own CSS custom-property theming API
   ========================================================================== */

:root {
    --bs-primary: var(--brand-primary);
    --bs-primary-rgb: 14, 92, 99;
    --bs-link-color: var(--brand-primary);
    --bs-link-color-rgb: 14, 92, 99;
    --bs-link-hover-color: var(--brand-primary-hover);
    --bs-link-hover-color-rgb: 10, 69, 74;

    --bs-body-bg: var(--surface-bg);
    --bs-body-bg-rgb: 246, 248, 247;
    --bs-body-color: var(--ink-primary);
    --bs-body-color-rgb: 22, 35, 42;
    --bs-secondary-color: var(--ink-secondary);
    --bs-tertiary-bg: var(--surface-card);

    --bs-border-color: var(--border-subtle);
    --bs-border-color-translucent: var(--border-subtle);
    --bs-border-radius: 0.5rem;
    --bs-border-radius-sm: 0.375rem;
    --bs-border-radius-lg: 0.625rem;
    --bs-border-radius-xl: 0.875rem;
    --bs-box-shadow: 0 0.5rem 1.25rem rgba(10, 61, 66, 0.08), 0 0.125rem 0.25rem rgba(10, 61, 66, 0.06);
    --bs-box-shadow-sm: 0 0.125rem 0.5rem rgba(10, 61, 66, 0.06);

    --bs-card-bg: var(--surface-card);
    --bs-card-border-color: var(--border-subtle);
    --bs-card-cap-bg: var(--surface-card);

    --bs-success: var(--status-success);
    --bs-success-rgb: 47, 143, 91;
    --bs-warning: var(--status-warning);
    --bs-warning-rgb: 200, 138, 46;
    --bs-danger: var(--status-danger);
    --bs-danger-rgb: 184, 76, 62;
    --bs-info: var(--status-info);
    --bs-info-rgb: 59, 124, 153;

    --bs-font-sans-serif: 'IBM Plex Sans', 'IBM Plex Sans Arabic', system-ui, sans-serif;
    --bs-body-font-family: var(--bs-font-sans-serif);
    --bs-emphasis-color: var(--ink-primary);
}

:root[data-bs-theme="dark"] {
    --bs-primary-rgb: 27, 138, 147;
    --bs-body-bg-rgb: 14, 21, 23;
    --bs-body-color-rgb: 231, 237, 236;
    --bs-emphasis-color: var(--ink-primary);

    /* --brand-primary (#1B8A93) is already brightened for the dark surface
       per spec, but measured only 4.01:1 as plain TEXT against the dark
       card background (--surface-card #16211F) -- just under WCAG AA's
       4.5:1 for normal-size text, verified by computing contrast ratios
       against the actual token values, not eyeballed. Buttons are fine
       (white-on-teal already checked separately, see the .btn-primary dark
       override below), but link-colored text needed a brighter tone. Only
       `--bs-link-color`/`--bs-link-hover-color` get this dedicated tint
       (6.9:1) -- `--bs-primary` itself stays the spec's exact #1B8A93 so
       badges/buttons/borders keep the intended hue. */
    --bs-link-color: #4fa8b0;
    --bs-link-color-rgb: 79, 168, 176;
    --bs-link-hover-color: #76b9be;
    --bs-link-hover-color-rgb: 118, 185, 190;
}

/* ==========================================================================
   3b. Component-level overrides
   ==========================================================================
   IMPORTANT NOTE (deviation from a literal reading of the task brief):
   Bootstrap 5.3's compiled CSS does NOT cascade a root `--bs-primary`
   override through to derived tokens the way the brief's phrasing implies.
   Verified directly against the vendored bootstrap.min.css: things like
   `.btn-primary`'s `--bs-btn-bg`, `.form-control:focus`'s border/box-shadow,
   and every color's `-text-emphasis`/`-bg-subtle`/`-border-subtle` triad
   (which `.alert-*`/`.badge`/`.list-group-item.active`/`.dropdown-item.active`
   etc. read from) are compiled to literal hex values, not
   `var(--bs-primary)` references -- confirmed by grepping the compiled
   file for the literal `#0d6efd` string, which appears hardcoded inside
   `.btn-primary`, `.form-control:focus`, `.form-check-input:checked`, and
   the root `-text-emphasis`/`-bg-subtle`/`-border-subtle` custom properties
   themselves. Only the root tokens set in section 3 above (used by
   `.text-primary`, `.bg-primary`, `.border-primary`, links) and `.card`/
   table variables actually reference the root custom properties directly.
   Overriding only `--bs-primary` therefore left buttons, form-focus rings,
   alerts, and badges rendering in Bootstrap's stock blue/gray -- caught by
   inspecting an actual rendered screenshot's pixel colors, not by reading
   the CSS alone. This section still uses pure CSS custom-property
   overrides (zero `!important`, same selectors Bootstrap itself defines)
   -- it just targets the component-scoped variables Bootstrap 5.3 actually
   wires its components to, which is the correct (if less widely known)
   place to do this. Derived subtle/emphasis tones below are computed with
   Bootstrap's own tint/shade-color formulas (mix toward white/black by a
   fixed weight) against this project's brand/status hex values, not
   guessed.
*/

:root {
    --bs-success-text-emphasis: #133924;
    --bs-success-bg-subtle: #d5e9de;
    --bs-success-border-subtle: #acd2bd;
    --bs-warning-text-emphasis: #503712;
    --bs-warning-bg-subtle: #f4e8d5;
    --bs-warning-border-subtle: #e9d0ab;
    --bs-danger-text-emphasis: #4a1e19;
    --bs-danger-bg-subtle: #f1dbd8;
    --bs-danger-border-subtle: #e3b7b2;
    --bs-info-text-emphasis: #18323d;
    --bs-info-bg-subtle: #d8e5eb;
    --bs-info-border-subtle: #b1cbd6;
    --bs-primary-text-emphasis: #062528;
    --bs-primary-bg-subtle: #cfdee0;
    --bs-primary-border-subtle: #9fbec1;

    --bs-focus-ring-color: rgba(14, 92, 99, 0.25);
    --bs-form-valid-color: var(--status-success);
    --bs-form-valid-border-color: var(--status-success);
    --bs-form-invalid-color: var(--status-danger);
    --bs-form-invalid-border-color: var(--status-danger);

    --bs-list-group-active-bg: var(--brand-primary);
    --bs-list-group-active-border-color: var(--brand-primary);
    --bs-dropdown-link-active-bg: var(--brand-primary);
    --bs-nav-pills-link-active-bg: var(--brand-primary);
    --bs-pagination-active-bg: var(--brand-primary);
    --bs-pagination-active-border-color: var(--brand-primary);
    --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(14, 92, 99, 0.25);
}

:root[data-bs-theme="dark"] {
    --bs-primary-text-emphasis: #76b9be;
    --bs-primary-bg-subtle: #051c1d;
    --bs-primary-border-subtle: #105358;
    --bs-success-text-emphasis: #82bc9d;
    --bs-success-bg-subtle: #091d12;
    --bs-success-border-subtle: #1c5637;
    --bs-warning-text-emphasis: #deb982;
    --bs-warning-bg-subtle: #281c09;
    --bs-warning-border-subtle: #78531c;
    --bs-danger-text-emphasis: #d4948b;
    --bs-danger-bg-subtle: #250f0c;
    --bs-danger-border-subtle: #6e2e25;
    --bs-info-text-emphasis: #89b0c2;
    --bs-info-bg-subtle: #0c191f;
    --bs-info-border-subtle: #234a5c;
    --bs-focus-ring-color: rgba(27, 138, 147, 0.35);
}

/* Buttons -- Bootstrap compiles each `.btn-*` variant's colors as literal
   hex on component-scoped custom properties (`--bs-btn-bg` etc.), so each
   variant needs its own override block; this is Bootstrap 5.3's own
   documented extension point for exactly this purpose. */
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--brand-primary);
    --bs-btn-border-color: var(--brand-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--brand-primary-hover);
    --bs-btn-hover-border-color: var(--brand-primary-hover);
    --bs-btn-focus-shadow-rgb: 14, 92, 99;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--brand-primary-hover);
    --bs-btn-active-border-color: var(--brand-primary-hover);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--brand-primary);
    --bs-btn-disabled-border-color: var(--brand-primary);
}
:root[data-bs-theme="dark"] .btn-primary {
    --bs-btn-bg: #197f87;
    --bs-btn-border-color: #197f87;
    --bs-btn-hover-bg: #156c73;
    --bs-btn-hover-border-color: #156c73;
    --bs-btn-active-bg: #156c73;
    --bs-btn-active-border-color: #156c73;
    --bs-btn-disabled-bg: #197f87;
    --bs-btn-disabled-border-color: #197f87;
    --bs-btn-focus-shadow-rgb: 27, 138, 147;
}

.btn-outline-primary {
    --bs-btn-color: var(--brand-primary);
    --bs-btn-border-color: var(--brand-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--brand-primary);
    --bs-btn-hover-border-color: var(--brand-primary);
    --bs-btn-focus-shadow-rgb: 14, 92, 99;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--brand-primary);
    --bs-btn-active-border-color: var(--brand-primary);
    --bs-btn-disabled-color: var(--brand-primary);
    --bs-btn-disabled-border-color: var(--brand-primary);
}

.btn-success {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--status-success);
    --bs-btn-border-color: var(--status-success);
    --bs-btn-hover-bg: #287a4d;
    --bs-btn-hover-border-color: #287a4d;
    --bs-btn-active-bg: #267249;
    --bs-btn-active-border-color: #267249;
    --bs-btn-focus-shadow-rgb: 47, 143, 91;
    --bs-btn-disabled-bg: var(--status-success);
    --bs-btn-disabled-border-color: var(--status-success);
}
.btn-outline-success {
    --bs-btn-color: var(--status-success);
    --bs-btn-border-color: var(--status-success);
    --bs-btn-hover-bg: var(--status-success);
    --bs-btn-hover-border-color: var(--status-success);
    --bs-btn-active-bg: var(--status-success);
    --bs-btn-active-border-color: var(--status-success);
    --bs-btn-focus-shadow-rgb: 47, 143, 91;
}

.btn-danger {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--status-danger);
    --bs-btn-border-color: var(--status-danger);
    --bs-btn-hover-bg: #9c4135;
    --bs-btn-hover-border-color: #9c4135;
    --bs-btn-active-bg: #933d32;
    --bs-btn-active-border-color: #933d32;
    --bs-btn-focus-shadow-rgb: 184, 76, 62;
    --bs-btn-disabled-bg: var(--status-danger);
    --bs-btn-disabled-border-color: var(--status-danger);
}
.btn-outline-danger {
    --bs-btn-color: var(--status-danger);
    --bs-btn-border-color: var(--status-danger);
    --bs-btn-hover-bg: var(--status-danger);
    --bs-btn-hover-border-color: var(--status-danger);
    --bs-btn-active-bg: var(--status-danger);
    --bs-btn-active-border-color: var(--status-danger);
    --bs-btn-focus-shadow-rgb: 184, 76, 62;
}

.btn-warning {
    --bs-btn-color: var(--ink-primary);
    --bs-btn-bg: var(--status-warning);
    --bs-btn-border-color: var(--status-warning);
    --bs-btn-hover-color: var(--ink-primary);
    --bs-btn-hover-bg: #aa7527;
    --bs-btn-hover-border-color: #aa7527;
    --bs-btn-active-color: var(--ink-primary);
    --bs-btn-active-bg: #a06e25;
    --bs-btn-active-border-color: #a06e25;
    --bs-btn-focus-shadow-rgb: 200, 138, 46;
    --bs-btn-disabled-bg: var(--status-warning);
    --bs-btn-disabled-border-color: var(--status-warning);
}
.btn-outline-warning {
    --bs-btn-color: var(--status-warning);
    --bs-btn-border-color: var(--status-warning);
    --bs-btn-hover-color: var(--ink-primary);
    --bs-btn-hover-bg: var(--status-warning);
    --bs-btn-hover-border-color: var(--status-warning);
    --bs-btn-active-color: var(--ink-primary);
    --bs-btn-active-bg: var(--status-warning);
    --bs-btn-active-border-color: var(--status-warning);
    --bs-btn-focus-shadow-rgb: 200, 138, 46;
}

.btn-info {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--status-info);
    --bs-btn-border-color: var(--status-info);
    --bs-btn-hover-bg: #326982;
    --bs-btn-hover-border-color: #326982;
    --bs-btn-active-bg: #2f637a;
    --bs-btn-active-border-color: #2f637a;
    --bs-btn-focus-shadow-rgb: 59, 124, 153;
    --bs-btn-disabled-bg: var(--status-info);
    --bs-btn-disabled-border-color: var(--status-info);
}
.btn-outline-info {
    --bs-btn-color: var(--status-info);
    --bs-btn-border-color: var(--status-info);
    --bs-btn-hover-bg: var(--status-info);
    --bs-btn-hover-border-color: var(--status-info);
    --bs-btn-active-bg: var(--status-info);
    --bs-btn-active-border-color: var(--status-info);
    --bs-btn-focus-shadow-rgb: 59, 124, 153;
}

/* Form controls -- focus ring + checked states are hardcoded in the
   compiled CSS the same way buttons are. */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 0.25rem rgba(14, 92, 99, 0.25);
}
.form-check-input:checked {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
}
:root[data-bs-theme="dark"] .form-control:focus,
:root[data-bs-theme="dark"] .form-select:focus,
:root[data-bs-theme="dark"] .form-check-input:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 0.25rem rgba(27, 138, 147, 0.35);
}

/* ==========================================================================
   4. Base typography
   ========================================================================== */

body {
    font-family: var(--bs-font-sans-serif);
    background-color: var(--surface-bg);
    color: var(--ink-primary);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: 600;
    color: var(--ink-primary);
}

.text-secondary {
    color: var(--ink-secondary) !important;
}

/* Tabular/numeric utility -- employee numbers, KWD amounts, dates. IBM Plex
   Mono is the deliberate signature choice for anything meant to line up in
   a column or be scanned digit-by-digit. */
.font-mono,
.text-mono {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-feature-settings: 'tnum' 1;
}

/* ==========================================================================
   5. App shell -- sidebar + topbar
   ========================================================================== */

.app-shell {
    display: flex;
    align-items: stretch;
    min-height: 100vh;
}

/* Sidebar: Bootstrap's offcanvas-lg component. Below the lg breakpoint it is
   a real off-canvas drawer (Bootstrap's own fixed/transform/backdrop
   machinery); at lg+ Bootstrap resets it to a static, transparent-background
   element (see bootstrap.min.css's `@media (min-width:992px){.offcanvas-lg`
   rule) which then behaves as a normal flex child here. Using the logical
   `offcanvas-start` class (not `-end`) means the vendored RTL stylesheet
   (bootstrap.rtl.min.css) mirrors it to the *right* edge automatically for
   Arabic, with zero direction-specific CSS of our own. Flexbox row layout
   below reorders visually for `dir="rtl"` the same way: the sidebar is
   first in DOM order, which flexbox places at the inline-start edge --
   left in LTR, right in RTL -- with no extra rule needed. */
.app-sidebar {
    --bs-offcanvas-width: 17rem;
    --bs-offcanvas-bg: var(--brand-primary-darker);
    flex: 0 0 17rem;
    width: 17rem;
}

.app-sidebar .offcanvas-body {
    display: flex;
    flex-direction: column;
    padding: 0;
}

/* Real visible fill -- see the comment in
   layouts/partials/sidebar.blade.php for why this can't live on
   `.app-sidebar`/`.offcanvas-body` themselves (Bootstrap's own
   `.offcanvas-lg` CSS forces `background-color: transparent !important`
   on both once the viewport reaches the lg breakpoint). */
.app-sidebar-fill {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: var(--brand-primary-darker);
    color: var(--ink-on-brand);
}

.app-sidebar-brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 1.1rem 1.25rem;
    color: var(--ink-on-brand);
    text-decoration: none;
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: 0.01em;
    border-bottom: 1px solid rgba(246, 248, 247, 0.1);
}

.app-sidebar-brand:hover {
    color: var(--ink-on-brand);
}

.app-sidebar-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--bs-border-radius-sm);
    background: var(--brand-accent);
    color: var(--brand-primary-darker);
    font-weight: 700;
    flex: 0 0 auto;
}

.app-sidebar-nav {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 0.75rem 0.75rem 1.5rem;
}

.app-nav-group + .app-nav-group {
    margin-top: 1.1rem;
}

.app-nav-group-label {
    display: block;
    padding: 0 0.6rem 0.35rem;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: rgba(246, 248, 247, 0.55);
}

.app-nav-link {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.6rem;
    margin-bottom: 0.1rem;
    border-radius: var(--bs-border-radius-sm);
    color: rgba(246, 248, 247, 0.85);
    text-decoration: none;
    font-size: 0.9rem;
    line-height: 1.3;
    /* Logical border so it flips sides automatically under dir="rtl". */
    border-inline-start: 3px solid transparent;
    transition: background-color 0.12s ease, color 0.12s ease;
}

.app-nav-link:hover {
    background-color: rgba(246, 248, 247, 0.08);
    color: var(--ink-on-brand);
}

.app-nav-link.active {
    background-color: rgba(200, 155, 60, 0.16);
    border-inline-start-color: var(--brand-accent);
    color: var(--ink-on-brand);
    font-weight: 600;
}

/* Main column */
.app-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.app-topbar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 1.25rem;
    background-color: var(--surface-card);
    border-bottom: 1px solid var(--border-subtle);
}

.app-topbar-title {
    font-weight: 600;
    font-size: 1rem;
    margin: 0;
    color: var(--ink-primary);
}

/* Signature element -- Sadu accent strip #1: a thin textured band running
   the full width immediately under the top bar. Built from a small
   two-tone (gold + dark petrol) triangle tile repeated horizontally --
   reads as an abstracted woven band, not a decorative divider line. */
.app-sadu-strip {
    height: 6px;
    background-image: var(--sadu-topbar-tile);
    background-repeat: repeat-x;
    background-size: 16px 6px;
    background-position: center;
}

.app-content {
    flex: 1 1 auto;
    padding: 1.5rem;
}

@media (max-width: 991.98px) {
    .app-content {
        padding: 1rem;
    }
}

/* Dark-mode toggle + mobile hamburger are plain Bootstrap buttons; no extra
   rules needed beyond the token remap above. */

/* ==========================================================================
   6. Signature element -- the Sadu accent, stat-card top border
   ========================================================================== */

.stat-card {
    position: relative;
    overflow: hidden;
    border-top: 0 !important;
}

.stat-card::before {
    content: "";
    display: block;
    height: 5px;
    background-image: var(--sadu-card-top-tile);
    background-repeat: repeat-x;
    background-size: 10px 5px;
    background-position: center;
    opacity: 0.85;
}

/* ==========================================================================
   7. Login split layout
   ========================================================================== */

.auth-split {
    min-height: 100vh;
    display: flex;
}

.auth-split-form {
    flex: 1 1 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.25rem;
    background-color: var(--surface-bg);
}

.auth-split-form-inner {
    width: 100%;
    max-width: 26rem;
}

.auth-split-brand {
    flex: 1 1 50%;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 3rem;
    color: var(--ink-on-brand);
    background: linear-gradient(155deg, var(--brand-primary) 0%, var(--brand-primary-darker) 100%);
    overflow: hidden;
}

/* Signature element -- Sadu accent #3: a large-scale, very-low-opacity
   tessellation of the same triangle motif used at #1/#2, covering the whole
   branded panel as a subtle background texture rather than a literal
   decoration. */
.auth-split-brand::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--sadu-login-bg-tile);
    background-repeat: repeat;
    background-size: 96px 96px;
    pointer-events: none;
}

.auth-split-brand-content {
    position: relative;
    z-index: 1;
    max-width: 24rem;
}

.auth-split-brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: var(--bs-border-radius);
    background: var(--brand-accent);
    color: var(--brand-primary-darker);
    font-weight: 700;
    font-size: 1.25rem;
    margin-bottom: 1.5rem;
}

.auth-split-brand h1 {
    color: var(--ink-on-brand);
    font-size: 1.75rem;
    margin-bottom: 0.75rem;
}

.auth-split-brand p {
    color: rgba(246, 248, 247, 0.82);
    font-size: 1rem;
    margin-bottom: 0;
}

@media (max-width: 767.98px) {
    .auth-split-brand {
        display: none;
    }
    .auth-split-form {
        flex: 1 1 100%;
    }
}

/* ==========================================================================
   8. Misc refinements
   ========================================================================== */

.card {
    /* Bootstrap's own .card rule redeclares --bs-card-bg/--bs-card-cap-bg
       scoped to --bs-body-bg/--bs-body-color directly on the .card selector
       itself (see bootstrap.min.css), which shadows the root-level token
       overrides in section 3 above -- a same-specificity declaration on the
       element always wins over one only inherited from :root. Re-overriding
       them here, on .card itself, participates in the same cascade Bootstrap
       uses (same technique as the .btn-primary/.form-control:focus overrides
       in section 3b). */
    --bs-card-bg: var(--surface-card);
    --bs-card-cap-bg: var(--surface-card);
    box-shadow: var(--bs-box-shadow-sm);
}

.btn-primary {
    --bs-btn-hover-bg: var(--brand-primary-hover);
    --bs-btn-hover-border-color: var(--brand-primary-hover);
    --bs-btn-active-bg: var(--brand-primary-hover);
    --bs-btn-active-border-color: var(--brand-primary-hover);
}

/* Selected/highlighted table row -- gold-soft tint, per spec, used sparingly. */
.table-accent-row {
    --bs-table-bg: var(--brand-accent-soft);
}

::selection {
    background-color: var(--brand-accent-soft);
    color: var(--ink-primary);
}

/* ==========================================================================
   9. Leave Calendar (Timeline/Gantt + Month-Grid views)
   ==========================================================================
   Seven leave-type color tokens, deliberately DERIVED from tokens already
   defined above (section 2) rather than picked from scratch, so the
   calendar reads as part of the same "Gulf Petrol & Pearl" system instead
   of introducing a second palette:

     --leave-annual      = var(--brand-primary)   the module's own brand
                            teal -- Annual is the most common/default type.
     --leave-sick         = var(--status-danger)   existing "unwell"-coded
                            status color, reused for its semantic fit.
     --leave-unpaid       = var(--status-warning)  existing cautionary/
                            financial-impact tone.
     --leave-hajj         = var(--brand-accent)    the design system's own
                            gold accent -- fitting for a religious-pilgrimage
                            leave type, and already the palette's "special
                            occasion" highlight color.
     --leave-paternity    = var(--status-info)     existing calm/informational
                            blue -- family-related, kept a cool, distinct hue
                            from Maternity below.
     --leave-maternity    NEW dusty-rose, mixed from --brand-accent (gold)
                            toward --status-danger (terracotta) at roughly
                            equal weight -- stays inside the same warm/muted
                            family as the rest of the palette while reading
                            as clearly distinct from Sick/Unpaid/Hajj.
     --leave-bereavement  NEW muted slate, a desaturated tint of
                            --ink-secondary -- deliberately the most subdued
                            of the seven, fitting its solemn subject.

   Four of the seven reference existing tokens directly, so they inherit
   this file's existing dark-mode remaps (section 2/3) automatically; only
   the two genuinely new hues (Maternity, Bereavement) get their own
   explicit dark-mode override below, brightened the same way section 2's
   --brand-primary/--sadu-card-top-tile already are for a dark surface.
   Paternity reuses --status-info as-is in both themes (no existing dark
   override for that token; verified it still reads clearly as a filled
   bar against the dark card surface). */
:root {
    --leave-annual: var(--brand-primary);
    --leave-sick: var(--status-danger);
    --leave-maternity: #A85C7C;
    --leave-paternity: var(--status-info);
    --leave-hajj: var(--brand-accent);
    --leave-bereavement: #6B6F76;
    --leave-unpaid: var(--status-warning);
}

:root[data-bs-theme="dark"] {
    --leave-maternity: #C97FA0;
    --leave-bereavement: #8B8F97;
}

.leave-type-annual { --leave-color: var(--leave-annual); }
.leave-type-sick { --leave-color: var(--leave-sick); }
.leave-type-maternity { --leave-color: var(--leave-maternity); }
.leave-type-paternity { --leave-color: var(--leave-paternity); }
.leave-type-hajj { --leave-color: var(--leave-hajj); }
.leave-type-bereavement { --leave-color: var(--leave-bereavement); }
.leave-type-unpaid { --leave-color: var(--leave-unpaid); }

/* Color-key/legend swatch. */
.leave-legend-swatch {
    display: inline-block;
    width: 0.85rem;
    height: 0.85rem;
    border-radius: 3px;
    background-color: var(--leave-color, var(--brand-primary));
    flex: 0 0 auto;
}
.leave-legend-swatch.is-pending {
    background-image: repeating-linear-gradient(135deg, var(--leave-color) 0 3px, rgba(255, 255, 255, 0.55) 3px 6px);
    border: 1px dashed var(--leave-color);
}

/* Timeline/Gantt view. `--lc-days` (set inline per-grid) keeps the header
   row and every employee row's column template in sync from one source of
   value, instead of repeating the day count in Blade for each row. Grid
   line numbering follows the container's inline direction automatically
   under dir="rtl" (verified visually, not assumed -- see the feature's
   design report for the RTL screenshot walkthrough), so no mirrored
   left/right rules are needed here. */
.leave-timeline {
    overflow-x: auto;
}
.leave-timeline-inner {
    min-width: max-content;
}
.leave-timeline-row {
    display: grid;
    grid-template-columns: 12rem repeat(var(--lc-days), minmax(1.75rem, 1fr));
    align-items: stretch;
    border-bottom: 1px solid var(--border-subtle);
}
.leave-timeline-row:last-child {
    border-bottom: 0;
}
.leave-timeline-header {
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: var(--surface-card);
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--ink-secondary);
}
.leave-timeline-employee {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.6rem;
    /* Sticky label column so it stays visible while the day columns
       scroll horizontally -- inset-inline-start is the logical property so
       it sticks to the correct edge under RTL automatically. */
    position: sticky;
    inset-inline-start: 0;
    z-index: 1;
    background-color: var(--surface-card);
    border-inline-end: 1px solid var(--border-subtle);
    font-size: 0.82rem;
    font-weight: 500;
    min-width: 0;
}
.leave-timeline-employee-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.leave-timeline-day {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.35rem 0.15rem;
    border-inline-start: 1px solid var(--border-subtle);
    font-size: 0.68rem;
    color: var(--ink-secondary);
}
.leave-timeline-day.is-weekend {
    background-color: var(--surface-bg);
}
.leave-timeline-day-cell {
    border-inline-start: 1px solid var(--border-subtle);
}
.leave-timeline-day-cell.is-weekend {
    background-color: var(--surface-bg);
}
/* One grid per employee row holding BOTH the day-cell backgrounds (auto-
   placed, one per column, row 1) and the leave bars (explicitly placed at
   `grid-column: start / span length; grid-row: 1`) -- CSS Grid allows
   explicitly-positioned items to deliberately overlap auto-placed ones, so
   a bar always paints over its underlying day cells without a second,
   separately-positioned overlay layer. Occupies columns 2..end of the
   parent `.leave-timeline-row` grid. Business rule this relies on:
   `LeaveRequestService::submit()` already rejects a new request that
   overlaps another pending/approved request for the SAME employee, so two
   bars in one employee's row never need to share grid-row 1 at the same
   columns. */
.leave-timeline-bars {
    grid-column: 2 / -1;
    display: grid;
    grid-template-columns: repeat(var(--lc-days), minmax(1.75rem, 1fr));
    grid-auto-rows: 2.25rem;
    align-items: center;
}
.leave-bar {
    grid-row: 1;
    align-self: center;
    margin: 0 2px;
    border-radius: var(--bs-border-radius-sm);
    background-color: var(--leave-color, var(--brand-primary));
    color: #fff;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding-inline: 0.35rem;
    font-size: 0.68rem;
    font-weight: 600;
    overflow: hidden;
    white-space: nowrap;
    box-shadow: var(--bs-box-shadow-sm);
}
.leave-bar.is-pending {
    background-color: var(--leave-color, var(--brand-primary));
    background-image: repeating-linear-gradient(135deg, transparent 0 5px, rgba(255, 255, 255, 0.45) 5px 10px);
    border: 1px dashed rgba(255, 255, 255, 0.85);
    opacity: 0.92;
}

/* Month-grid view. */
.leave-month-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 1px;
    background-color: var(--border-subtle);
    border: 1px solid var(--border-subtle);
    border-radius: var(--bs-border-radius);
    overflow: hidden;
}
.leave-month-weekday {
    background-color: var(--surface-bg);
    padding: 0.4rem 0.5rem;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ink-secondary);
    text-align: center;
}
.leave-month-weekday.is-weekend {
    color: var(--brand-accent);
}
.leave-month-cell {
    background-color: var(--surface-card);
    min-height: 6.5rem;
    padding: 0.35rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.leave-month-cell.is-weekend {
    background-color: var(--surface-bg);
}
.leave-month-cell.is-outside {
    background-color: var(--surface-bg);
    opacity: 0.5;
}
.leave-month-cell-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.leave-month-daynum {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--ink-secondary);
}
.leave-month-cell.is-today .leave-month-daynum {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 50%;
    background-color: var(--brand-primary);
    color: #fff;
}
.leave-month-entries {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    overflow-y: auto;
}
.leave-month-entry {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.1rem 0.3rem;
    border-radius: var(--bs-border-radius-sm);
    background-color: var(--leave-color, var(--brand-primary));
    color: #fff;
    font-size: 0.68rem;
    font-weight: 500;
    line-height: 1.3;
}
.leave-month-entry.is-pending {
    background-image: repeating-linear-gradient(135deg, transparent 0 4px, rgba(255, 255, 255, 0.45) 4px 8px);
    border: 1px dashed rgba(255, 255, 255, 0.85);
    opacity: 0.92;
}
.leave-month-entry-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Headcount badge -- "simple ... showing how many people are on leave that
   day" per the feature spec, no conflict/warning coloring, just a count. */
.leave-headcount-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.15rem;
    height: 1.15rem;
    padding: 0 0.3rem;
    border-radius: 999px;
    background-color: var(--brand-accent-soft);
    color: var(--brand-primary-darker);
    font-size: 0.66rem;
    font-weight: 700;
}

/* Avatars -- real photo (route('employees.photo', $id), private storage,
   already authorized by EmployeePolicy::view()) or an initials fallback
   when no photo is uploaded, per the feature spec ("do not leave a broken
   image or blank space"). */
.leave-avatar {
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
    background-color: var(--surface-bg);
}
.leave-avatar-initials {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    flex: 0 0 auto;
    font-size: 0.62rem;
    font-weight: 700;
    color: #fff;
    background-color: var(--avatar-bg, var(--brand-primary));
}
.leave-avatar-sm,
.leave-avatar-sm.leave-avatar-initials {
    width: 1.3rem;
    height: 1.3rem;
    font-size: 0.56rem;
}

/* ==========================================================================
   10. Phase 2 Batch C -- Leave (non-calendar) + Attendance modules
   ==========================================================================
   Bespoke polish on top of the inherited Bootstrap baseline, reusing only
   tokens already defined above (section 2's brand/status colors, the
   leave-type palette from section 9). No new colors introduced.
*/

/* -- Leave type picker (Submit Leave Request form) -- reuses the exact
   `--leave-color` custom property + `.leave-type-*` classes already
   established for the calendar legend/bars (section 9), so a leave type
   reads as the same color whether it's on the calendar or on this form. */
.leave-type-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.leave-type-option {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.8rem;
    border-radius: 999px;
    border: 1.5px solid var(--border-subtle);
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--ink-secondary);
    background-color: var(--surface-card);
    transition: border-color 0.12s ease, background-color 0.12s ease, color 0.12s ease;
}
.leave-type-option-swatch {
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    background-color: var(--leave-color, var(--brand-primary));
    flex: 0 0 auto;
}
.leave-type-option:hover {
    border-color: var(--leave-color, var(--brand-primary));
}
.leave-type-option:focus-within {
    box-shadow: 0 0 0 0.2rem var(--bs-focus-ring-color);
}
.leave-type-option.is-selected {
    border-color: var(--leave-color, var(--brand-primary));
    background-color: var(--leave-color, var(--brand-primary));
    color: #fff;
}
.leave-type-option.is-selected .leave-type-option-swatch {
    background-color: #fff;
}

/* -- Two-stage approval step indicator (Leave show view) -- a quick-glance
   summary of Department Head -> HR sitting above the detailed
   approval-history table, per the polish checklist ("consider a simple
   step-indicator ... rather than a plain text dump"). Flexbox row order
   reverses automatically under dir="rtl" the same way `.leave-timeline-row`
   etc. already rely on elsewhere in this file -- no mirrored left/right
   rules needed. */
.approval-steps {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
}
.approval-step {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex: 0 0 auto;
}
.approval-step-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    font-weight: 700;
    font-size: 0.85rem;
    flex: 0 0 auto;
    border: 2px solid var(--border-subtle);
    color: var(--ink-secondary);
    background-color: var(--surface-card);
}
.approval-step.is-approved .approval-step-dot {
    background-color: var(--status-success);
    border-color: var(--status-success);
    color: #fff;
}
.approval-step.is-rejected .approval-step-dot {
    background-color: var(--status-danger);
    border-color: var(--status-danger);
    color: #fff;
}
.approval-step.is-pending .approval-step-dot {
    border-color: var(--status-warning);
    color: var(--status-warning);
}
.approval-step.is-skipped .approval-step-dot {
    border-style: dashed;
    color: var(--ink-secondary);
    opacity: 0.6;
}
.approval-step-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ink-primary);
    line-height: 1.25;
}
.approval-step-connector {
    flex: 1 1 2rem;
    min-width: 1.5rem;
    height: 2px;
    background-color: var(--border-subtle);
    align-self: center;
    margin-inline: 0.5rem;
}
.approval-step-connector.is-complete {
    background-color: var(--status-success);
}

/* -- Simple, reusable empty-state block for working queues/lists (Leave
   Approvals queue, Attendance corrections/unmatched/manual/devices) --
   deliberately text-only, matching the Dashboard's existing
   `dashboard.no_data` presentation rather than introducing a new
   icon/illustration system this codebase doesn't otherwise use. */
.empty-state {
    text-align: center;
    color: var(--ink-secondary);
    padding: 2.5rem 1rem;
}
.empty-state-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background-color: var(--surface-bg);
    color: var(--ink-secondary);
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
}

/* -- Security-sensitive callout for a one-time-shown device token
   (Attendance Devices) -- built on Bootstrap's own `.alert-warning`
   (already remapped to this system's --status-warning token), just with a
   clearer heading/icon treatment for a value the admin must copy now. */
.token-reveal-callout .token-reveal-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background-color: var(--status-warning);
    color: #fff;
    font-weight: 700;
    flex: 0 0 auto;
}

/* ==========================================================================
   11. Payroll + Indemnity + Reports + Notifications (Phase 2 Batch D)
   ==========================================================================
   Bespoke polish on top of the inherited Bootstrap theming -- every color
   used below is one of section 2's existing tokens (or an existing Bootstrap
   `-subtle`/`-emphasis` pair already remapped in section 3b); nothing new is
   introduced here. */

/* -- Shared "hero total" treatment ----------------------------------------
   Reused by the Payslip's Net Pay figure (Payroll) and the Indemnity
   breakdown's Total End-of-Service Payout: both are real-money totals that
   must read as the unmistakable focal point of their page. This is the same
   brand gradient already used for the login split panel (.auth-split-brand
   in section 7), applied to a card instead of a full-page panel, so the
   "this is the important number" treatment stays visually consistent with
   an existing pattern rather than inventing a new one. Pair with
   `.stat-card` (section 6) for the Sadu top accent. */
.finance-hero-total {
    position: relative;
    overflow: hidden;
    background: linear-gradient(155deg, var(--brand-primary) 0%, var(--brand-primary-darker) 100%);
    color: var(--ink-on-brand);
}
.finance-hero-total .finance-hero-total-label {
    color: rgba(246, 248, 247, 0.8);
    letter-spacing: 0.04em;
}
.finance-hero-total .finance-hero-total-amount {
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1.15;
}
.finance-hero-total .finance-hero-total-sub {
    color: rgba(246, 248, 247, 0.78);
}
.finance-hero-total .finance-hero-total-sub .font-mono {
    color: var(--ink-on-brand);
}
@media (max-width: 575.98px) {
    .finance-hero-total .finance-hero-total-amount {
        font-size: 1.65rem;
    }
}

/* -- Payroll period lifecycle stepper --------------------------------------
   open -> processing -> locked -> paid. Sits alongside (not instead of) the
   existing `badge text-bg-*` status pill already used on periods/index and
   periods/show, so the two never disagree. Complete/current/upcoming use a
   simple, universally-understood progression coloring (success / brand /
   muted) rather than trying to carry each step's individual badge hue
   (secondary for "locked", primary for "paid") into a left-to-right
   progress metaphor, where that mapping reads ambiguously. */
.payroll-stepper {
    display: flex;
    align-items: flex-start;
}
.payroll-stepper-step {
    flex: 1 1 0;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.payroll-stepper-step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 0.85rem;
    inset-inline-start: 50%;
    width: 100%;
    height: 3px;
    background-color: var(--border-subtle);
    z-index: 0;
}
.payroll-stepper-step.is-complete:not(:last-child)::after {
    background-color: var(--status-success);
}
.payroll-stepper-dot {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background-color: var(--surface-card);
    border: 3px solid var(--border-subtle);
    color: var(--ink-secondary);
    font-size: 0.85rem;
    font-weight: 700;
}
.payroll-stepper-step.is-complete .payroll-stepper-dot {
    background-color: var(--status-success);
    border-color: var(--status-success);
    color: #fff;
}
.payroll-stepper-step.is-complete .payroll-stepper-dot::before {
    content: "\2713";
}
.payroll-stepper-step.is-current .payroll-stepper-dot {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
    color: #fff;
    box-shadow: 0 0 0 4px rgba(14, 92, 99, 0.18);
}
:root[data-bs-theme="dark"] .payroll-stepper-step.is-current .payroll-stepper-dot {
    box-shadow: 0 0 0 4px rgba(27, 138, 147, 0.28);
}
.payroll-stepper-label {
    margin-top: 0.4rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ink-secondary);
}
.payroll-stepper-step.is-current .payroll-stepper-label {
    color: var(--brand-primary);
}
.payroll-stepper-step.is-complete .payroll-stepper-label {
    color: var(--status-success);
}
.payroll-stepper-step.is-failed .payroll-stepper-dot {
    background-color: var(--status-danger);
    border-color: var(--status-danger);
    color: #fff;
}
.payroll-stepper-step.is-failed .payroll-stepper-label {
    color: var(--status-danger);
}

/* -- Notifications ---------------------------------------------------------
   Unread items get a bold indicator dot (in addition to the existing bold
   text + tinted row background already in index.blade.php/bell.blade.php)
   so unread status reads at a glance even in a dense list, not just via
   font-weight. */
.notification-unread-dot {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background-color: var(--brand-accent);
    flex: 0 0 auto;
}
.notification-empty-state {
    padding: 2.5rem 1rem;
    text-align: center;
    color: var(--ink-secondary);
}

/* -- Desktop sidebar collapse -----------------------------------------------
   The sidebar (.app-sidebar, see the "Sidebar: Bootstrap's offcanvas-lg
   component" comment above) already collapses to a real off-canvas drawer
   below the lg breakpoint via Bootstrap's own machinery. At lg+ it resets
   to a permanently-fixed flex column with no way to retract it -- this
   adds that. Toggled by #sidebarCollapseToggle (topbar.blade.php) +
   public/js/sidebar.js, persisted in localStorage, applied via a
   data-sidebar-collapsed attribute on <html> (mirrors the existing
   data-bs-theme dark-mode pattern exactly, including the early-apply
   script in head.blade.php that avoids a flash of the expanded sidebar).
   Scoped to the lg+ media query only -- below lg the sidebar is Bootstrap's
   own offcanvas with independent show/hide, untouched here. */
@media (min-width: 992px) {
    .app-sidebar {
        transition: flex-basis 0.2s ease, width 0.2s ease;
    }
    html[data-sidebar-collapsed="true"] .app-sidebar {
        flex-basis: 0;
        width: 0;
        min-width: 0;
        overflow: hidden;
        border: 0;
    }
}
@media (prefers-reduced-motion: reduce) {
    .app-sidebar {
        transition: none;
    }
}