/* ==========================================================================
   Metrics Plus ERP Dashboard — design system
   Palette: AlmaCon brand (Brand Manual) — deep blue sidebar (#18495C),
   gold/yellow accent (#EAAB21), clean white topbar.
   Typefaces: Nunito (body), Russo One (headings/titles).
   ========================================================================== */

:root {
    /* AlmaCon official brand tokens (Brand Manual) — kept verbatim so the
       source-of-truth values are visible here; the --erp-* tokens below
       drive the actual UI and reference these. */
    --almacon-primary: #18495C;
    --almacon-primary-rgb: 24, 73, 92;
    --almacon-primary-hover: #123746;
    --almacon-primary-light: #EBF3F6;

    --almacon-accent: #EAAB21;
    --almacon-accent-rgb: 234, 171, 33;
    --almacon-accent-hover: #C99118;
    --almacon-accent-light: #FDF6E8;

    --almacon-black: #000000;
    --almacon-text-main: #000000;

    --almacon-bg-canvas: #F8FAFC;
    --almacon-bg-surface: #FFFFFF;
    --almacon-border: #E2E8F0;
    --almacon-text-muted: #64748B;

    --erp-sidebar-bg: var(--almacon-primary);
    --erp-sidebar-bg-deep: var(--almacon-primary-hover);
    --erp-sidebar-border: rgba(255, 255, 255, 0.07);
    /* rgb(147,163,172) (the previous muted tone) measures under 4.5:1 against
       this brand-blue sidebar once lightened from the old near-black teal --
       reusing this file's own already-audited AA-safe tone (see
       .erp-nav-section-title below) instead of guessing a new one. */
    --erp-sidebar-text: rgb(170, 190, 198);
    --erp-sidebar-text-active: #FFFFFF;
    --erp-accent-gold: var(--almacon-accent);
    --erp-accent-gold-soft: rgba(var(--almacon-accent-rgb), 0.12);
    --erp-topbar-bg: var(--almacon-bg-surface);
    --erp-topbar-height: 64px;
    --erp-sidebar-width: 260px;
    --erp-sidebar-width-collapsed: 72px;
    --erp-content-bg: var(--almacon-bg-canvas);
    --erp-transition: 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    --erp-scrollbar-thumb: rgba(147, 163, 172, 0.35);
    --erp-scrollbar-track: transparent;
}

[data-bs-theme="dark"] {
    --erp-topbar-bg: #16222B;
    --erp-content-bg: #101A21;
    --erp-sidebar-bg: #0F3241;
    --erp-sidebar-bg-deep: #0A252F;
}

body {
    background-color: var(--erp-content-bg);
}

/* --------------------------------------------------------------------------
   Typography — AlmaCon Brand Manual: Nunito for body copy, Russo One for
   headings/titles. Fonts are vendored locally, no CDN (see
   apps/core/static/vendor/fonts/fonts.css, loaded in templates/layouts/base_erp.html).
   -------------------------------------------------------------------------- */
:root {
    --bs-body-font-family: 'Nunito', var(--bs-font-sans-serif);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: 'Russo One', var(--bs-font-sans-serif);
    /* Russo One ships one weight only; browsers would otherwise synthesize
       a fake bold from it. */
    font-weight: 400;
}

/* Heading color follows the brand primary -- light theme only. In dark
   theme the page background is near-black, so brand-blue text would be
   almost unreadable; headings keep the theme's own (near-white) body color
   there instead. */
:root:not([data-bs-theme="dark"]) h1,
:root:not([data-bs-theme="dark"]) h2,
:root:not([data-bs-theme="dark"]) h3,
:root:not([data-bs-theme="dark"]) h4,
:root:not([data-bs-theme="dark"]) h5,
:root:not([data-bs-theme="dark"]) h6,
:root:not([data-bs-theme="dark"]) .h1,
:root:not([data-bs-theme="dark"]) .h2,
:root:not([data-bs-theme="dark"]) .h3,
:root:not([data-bs-theme="dark"]) .h4,
:root:not([data-bs-theme="dark"]) .h5,
:root:not([data-bs-theme="dark"]) .h6 {
    color: var(--almacon-primary);
}

/* Primary system labels -- the card/section header used to title every
   list, detail, and report page across every module (apps/core's
   .erp-section-card / includes/_action_bar.html pattern, ~85 templates),
   plus the module-hub card titles ("Accounting", "HR", ...). Both read as
   headers even though they aren't literal h1-h6 tags, so they get the same
   display face. Sized 1rem+ here, unlike the nav/stat microcopy below,
   which stays in Nunito -- Russo One's heavy geometric letterforms lose
   legibility under ~0.85rem. */
.card-header,
.hub-card-title {
    font-family: 'Russo One', var(--bs-font-sans-serif);
    font-weight: 400;
}

/* Card/section headers filled solid with the AlmaCon primary blue --
   replacing Bootstrap's neutral grey -- light theme only, since the dark
   theme's surfaces are already brand-dark and a second solid navy bar would
   flatten the hierarchy there (it keeps Bootstrap's own dark-mode
   background instead). White text/icon for contrast against the fill.
   Doesn't touch .hub-card-title: that's inline text next to an icon in a
   flex row, not a header bar, so a solid fill there would read as a text
   highlight rather than a header treatment. */
:root:not([data-bs-theme="dark"]) .card-header {
    background-color: var(--almacon-primary);
    color: #fff;
    transition: color 0.15s ease;
}

:root:not([data-bs-theme="dark"]) .card-header:hover {
    color: var(--almacon-accent);
}

/* .card-header's solid blue fill above collides with utility classes
   nested inside it across ~85 existing templates (every ported module's
   section-card headers, e.g. `<i class="bi ... text-primary">`):
   - .text-primary icons are now the exact same hue as the fill -- invisible
   - .text-secondary/.text-body-secondary/.text-muted are tuned for a light
     surface and unreadable on a dark one
   - .btn-outline-secondary/.btn-outline-primary (e.g. messaging's message
     detail "back" button) have border/text colors tuned for a light surface
   Recolor all three when nested in a light-theme .card-header instead of
   editing every template. !important matches the specificity of the
   Bootstrap utility classes being overridden, which are !important
   themselves -- a plain override can't win against that regardless of
   selector specificity. */
:root:not([data-bs-theme="dark"]) .card-header .text-primary {
    color: var(--almacon-accent) !important;
}

:root:not([data-bs-theme="dark"]) .card-header .text-secondary,
:root:not([data-bs-theme="dark"]) .card-header .text-body-secondary,
:root:not([data-bs-theme="dark"]) .card-header .text-muted {
    color: rgba(255, 255, 255, 0.75) !important;
}

:root:not([data-bs-theme="dark"]) .card-header .btn-outline-secondary,
:root:not([data-bs-theme="dark"]) .card-header .btn-outline-primary {
    --bs-btn-color: #fff;
    --bs-btn-border-color: rgba(255, 255, 255, 0.55);
    --bs-btn-hover-color: var(--almacon-primary);
    --bs-btn-hover-bg: #fff;
    --bs-btn-hover-border-color: #fff;
}

/* Table header row (<thead><tr><th>, the "Code / Name / Email / ..."
   column-header pattern used by every list page system-wide, ~139
   templates) -- same solid brand fill as .card-header above, light theme
   only. Bootstrap's own .table>:not(caption)>*>* rule reads --bs-table-bg
   for BOTH header and body cells (they're not visually distinguished by
   default); this selector is specific enough (3 type selectors vs.
   Bootstrap's 1) to win the cascade for header cells only, leaving body
   rows untouched. */
:root:not([data-bs-theme="dark"]) .table > thead > tr > th {
    background-color: var(--almacon-primary);
    color: #fff;
    transition: color 0.15s ease;
}

:root:not([data-bs-theme="dark"]) .table > thead > tr > th:hover {
    color: var(--almacon-accent);
}

/* Bootstrap's default secondary (#6c757d) color is calibrated for a
   pure-white background; against this app's --erp-content-bg
   (--almacon-bg-canvas, #F8FAFC, even lighter than the #F4F6F8 this was
   originally tuned against) it still falls under WCAG AA's 4.5:1 minimum
   for normal text (axe-core scan, Phase 10). Root-cause fix: darken the
   Bootstrap rgb variable that utilities like text-secondary and
   border-secondary read from, for the light theme only (the dark theme's
   much darker background already clears AA with a wide margin).
   btn-outline-secondary sets --bs-btn-color as a literal hex in the
   component rule rather than from this variable, so it needs its own
   override alongside it. --bs-primary-rgb below is the AlmaCon brand color,
   not an accessibility fix -- see the AlmaCon contrast note further down. */
:root:not([data-bs-theme="dark"]) {
    --bs-secondary-rgb: 97, 105, 116;
    --bs-primary: var(--almacon-primary);
    --bs-primary-rgb: var(--almacon-primary-rgb);
    --bs-link-color-rgb: var(--almacon-primary-rgb);
    --bs-link-hover-color-rgb: 18, 55, 70;
    --bs-border-color: var(--almacon-border);
}

:root:not([data-bs-theme="dark"]) .btn-outline-secondary {
    --bs-btn-color: #616974;
    --bs-btn-border-color: #616974;
}

:root:not([data-bs-theme="dark"]) .btn-outline-primary {
    --bs-btn-color: var(--almacon-primary);
    --bs-btn-border-color: var(--almacon-primary);
    --bs-btn-hover-bg: var(--almacon-primary);
    --bs-btn-hover-border-color: var(--almacon-primary);
    --bs-btn-active-bg: var(--almacon-primary-hover);
    --bs-btn-active-border-color: var(--almacon-primary-hover);
}

/* AlmaCon primary blue as the brand's primary action color, replacing
   Bootstrap's default blue for filled primary buttons app-wide (this
   vendored build compiles .btn-primary's colors as literal hex rather than
   var(--bs-primary), so it needs its own override alongside the root
   custom properties above -- same technique as .btn-outline-primary). */
:root:not([data-bs-theme="dark"]) .btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--almacon-primary);
    --bs-btn-border-color: var(--almacon-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--almacon-primary-hover);
    --bs-btn-hover-border-color: var(--almacon-primary-hover);
    --bs-btn-focus-shadow-rgb: var(--almacon-primary-rgb);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--almacon-primary-hover);
    --bs-btn-active-border-color: var(--almacon-primary-hover);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--almacon-primary);
    --bs-btn-disabled-border-color: var(--almacon-primary);
}

:root:not([data-bs-theme="dark"]) .form-control:focus,
:root:not([data-bs-theme="dark"]) .form-select:focus {
    border-color: #6a93a3;
    box-shadow: 0 0 0 .25rem rgba(var(--almacon-primary-rgb), .25);
}

:root:not([data-bs-theme="dark"]) .form-check-input:checked {
    background-color: var(--almacon-primary);
    border-color: var(--almacon-primary);
}

:root:not([data-bs-theme="dark"]) .form-check-input:focus {
    border-color: #6a93a3;
    box-shadow: 0 0 0 .25rem rgba(var(--almacon-primary-rgb), .25);
}

.erp-topbar ~ main,
.erp-main {
    min-height: calc(100vh - var(--erp-topbar-height));
}

/* --------------------------------------------------------------------------
   Topbar
   -------------------------------------------------------------------------- */
.erp-topbar {
    position: fixed;
    top: 0;
    left: var(--erp-sidebar-width);
    right: 0;
    z-index: 1030;
    height: var(--erp-topbar-height);
    background: var(--erp-topbar-bg);
    border-bottom: 1px solid var(--bs-border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
    transition: left var(--erp-transition);
}

.erp-topbar .btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 0.5rem;
    color: var(--bs-body-color);
    background: transparent;
    border: 1px solid transparent;
    font-size: 1.15rem;
    text-decoration: none;
}

.erp-topbar .btn-icon:hover,
.erp-topbar .btn-icon:focus-visible {
    background: var(--bs-secondary-bg);
    color: var(--erp-accent-gold);
}

.erp-topbar .dropdown-toggle::after {
    display: none;
}

.erp-user-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--erp-sidebar-bg);
    color: var(--erp-accent-gold);
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
}

/* Topbar layout: breadcrumb (start), search (grows), actions (end). The
   breadcrumb trail truncates instead of wrapping so a long manifest path
   (Operations > Accounting > Financial Reports > ...) never grows the bar. */
.erp-topbar-start {
    min-width: 0;
    flex: 0 1 auto;
}

.erp-topbar-breadcrumb {
    min-width: 0;
    overflow: hidden;
}

.erp-topbar-breadcrumb .breadcrumb {
    flex-wrap: nowrap;
    margin: 0;
    font-size: 0.85rem;
    white-space: nowrap;
}

.erp-topbar-breadcrumb .breadcrumb-item.active {
    overflow: hidden;
    text-overflow: ellipsis;
}

.erp-topbar-search {
    flex: 1 1 14rem;
    max-width: 30rem;
    margin: 0 1.25rem;
}

.erp-topbar-actions {
    flex: 0 0 auto;
}

/* Bootstrap's <kbd> inverts the body colors (a light chip in dark theme), so
   a muted text color on it disappears; use theme tokens on a neutral chip. */
.erp-kbd {
    font-family: var(--bs-font-monospace);
    font-size: 0.7rem;
    padding: 0.1rem 0.35rem;
    color: var(--bs-secondary-color);
    background-color: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.25rem;
}

/* Dropdowns take the same theme-aware elevation tokens as cards, so in dark
   mode they read as a raised surface (stronger shadow + the lighter dark
   surface layer) instead of blending into the bar behind them. */
.erp-topbar .dropdown-menu {
    box-shadow: var(--erp-shadow-3);
}

.erp-user-menu {
    min-width: 14rem;
}

.erp-notification-menu {
    width: 20rem;
    max-width: calc(100vw - 1.5rem);
    max-height: 26rem;
    overflow-y: auto;
}

.erp-notification-item {
    white-space: normal;
    padding: 0.55rem 1rem;
}

.erp-bell-badge {
    position: absolute;
    top: 3px;
    right: 1px;
    font-size: 0.6rem;
    line-height: 1;
    padding: 0.28em 0.45em;
}

/* --------------------------------------------------------------------------
   Sidebar shell
   -------------------------------------------------------------------------- */
.erp-shell {
    display: grid;
    grid-template-columns: var(--erp-sidebar-width) 1fr;
    min-height: 100vh;
}

.erp-sidebar {
    background: var(--erp-sidebar-bg);
    color: var(--erp-sidebar-text);
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: var(--erp-sidebar-width);
    z-index: 1040;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    transition: width var(--erp-transition);
}

/* Sidebar scrollbar — slim, unobtrusive */
.erp-sidebar::-webkit-scrollbar {
    width: 6px;
}

.erp-sidebar::-webkit-scrollbar-track {
    background: var(--erp-scrollbar-track);
}

.erp-sidebar::-webkit-scrollbar-thumb {
    background: var(--erp-scrollbar-thumb);
    border-radius: 3px;
}

.erp-sidebar {
    scrollbar-width: thin;
    scrollbar-color: var(--erp-scrollbar-thumb) var(--erp-scrollbar-track);
}

.erp-brand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.9rem 1rem;
    background: var(--erp-sidebar-bg-deep);
    border-bottom: 1px solid var(--erp-sidebar-border);
}

.erp-brand-link {
    display: flex;
    align-items: center;
    min-width: 0;
    overflow: hidden;
    color: var(--erp-sidebar-text-active);
    text-decoration: none;
    white-space: nowrap;
}

.erp-brand-link:hover {
    color: var(--erp-sidebar-text-active);
}

.erp-brand-toggle {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 0.5rem;
    color: var(--erp-sidebar-text-active);
    background: transparent;
    border: 1px solid transparent;
    font-size: 1.05rem;
}

.erp-brand-toggle:hover,
.erp-brand-toggle:focus-visible {
    background: rgba(255, 255, 255, 0.08);
    color: var(--erp-accent-gold);
}

.erp-sidebar-toggle-icon-list {
    display: none;
}

.erp-brand-logo {
    flex: 0 0 auto;
    display: block;
}

.erp-brand-logo-landscape {
    height: 28px;
    width: auto;
}

.erp-brand-logo-portrait {
    display: none;
    height: 34px;
    width: auto;
}

/* --------------------------------------------------------------------------
   Sidebar navigation
   -------------------------------------------------------------------------- */
.erp-nav {
    flex: 1 1 auto;
    padding: 0.75rem 0.5rem 1.5rem;
}

.erp-nav-section-title {
    display: block;
    padding: 1rem 0.75rem 0.35rem;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    /* rgba(147,163,172,0.65) measured 2.83:1 against the #1b3b48 sidebar
       background -- fails WCAG AA's 4.5:1 minimum for small text (axe-core
       scan, Phase 10). rgb(170,190,198) at full opacity measures 6.17:1. */
    color: rgb(170, 190, 198);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.erp-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.erp-nav-item {
    margin-bottom: 2px;
}

.erp-nav-link {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    color: var(--erp-sidebar-text);
    text-decoration: none;
    font-size: 0.85rem;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.erp-nav-link .erp-nav-icon {
    flex: 0 0 auto;
    font-size: 1.02rem;
    width: 1.35rem;
    text-align: center;
}

.erp-nav-link:hover,
.erp-nav-link:focus-visible {
    color: var(--erp-sidebar-text-active);
    background: rgba(255, 255, 255, 0.06);
    outline: none;
}

.erp-nav-link.active {
    color: var(--erp-sidebar-text-active);
    background: var(--erp-accent-gold-soft);
    border-left: 3px solid var(--erp-accent-gold);
    font-weight: 600;
}

.erp-nav-link.active .erp-nav-icon {
    color: var(--erp-accent-gold);
}

.erp-nav-chevron {
    margin-left: auto;
    font-size: 0.7rem;
    transition: transform var(--erp-transition);
}

.erp-nav-link:not(.collapsed) .erp-nav-chevron {
    transform: rotate(90deg);
}

/* Generic collapse-toggle chevron (form "Additional Details" panels, etc.) --
   same rotate-on-expand behavior as the sidebar's own chevron above, scoped
   to any [data-bs-toggle="collapse"] trigger using a bi-chevron-right icon
   rather than duplicated per-feature. */
[data-bs-toggle="collapse"] .bi-chevron-right {
    display: inline-block;
    transition: transform var(--erp-transition);
}

[data-bs-toggle="collapse"]:not(.collapsed) .bi-chevron-right {
    transform: rotate(90deg);
}

.erp-nav-placeholder {
    opacity: 0.55;
    cursor: not-allowed;
    position: relative;
}

.erp-nav-placeholder::after {
    content: "";
    position: absolute;
    inset: 0;
}

/* Submenu */
.erp-nav-sublist {
    list-style: none;
    margin: 0;
    padding: 0.15rem 0 0.25rem 1.9rem;
}

.erp-nav-sublink {
    display: block;
    padding: 0.38rem 0.75rem;
    border-left: 1px solid var(--erp-sidebar-border);
    color: var(--erp-sidebar-text);
    text-decoration: none;
    font-size: 0.8rem;
    border-radius: 0 0.4rem 0.4rem 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.erp-nav-sublink:hover,
.erp-nav-sublink:focus-visible {
    color: var(--erp-sidebar-text-active);
    background: rgba(255, 255, 255, 0.06);
    outline: none;
}

.erp-nav-sublink.active {
    color: var(--erp-sidebar-text-active);
    border-left: 2px solid var(--erp-accent-gold);
    background: var(--erp-accent-gold-soft);
    margin-left: -1px;
}

.erp-nav-sublist .collapse.show {
    transition: height var(--erp-transition);
}

.erp-nav-group-label {
    padding: 0.7rem 0.75rem 0.2rem;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--erp-accent-gold);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.erp-nav-group-label:first-child {
    padding-top: 0.15rem;
}

/* --------------------------------------------------------------------------
   Collapsed sidebar (icon-only)
   -------------------------------------------------------------------------- */
.erp-shell.erp-sidebar-collapsed {
    grid-template-columns: var(--erp-sidebar-width-collapsed) 1fr;
}

.erp-shell.erp-sidebar-collapsed .erp-sidebar {
    width: var(--erp-sidebar-width-collapsed);
}

.erp-shell.erp-sidebar-collapsed .erp-topbar {
    left: var(--erp-sidebar-width-collapsed);
}

.erp-shell.erp-sidebar-collapsed .erp-brand {
    flex-direction: column;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 0.5rem;
}

.erp-shell.erp-sidebar-collapsed .erp-brand-logo-landscape,
.erp-shell.erp-sidebar-collapsed .erp-nav-section-title,
.erp-shell.erp-sidebar-collapsed .erp-nav-link span:not(.erp-nav-icon),
.erp-shell.erp-sidebar-collapsed .erp-nav-chevron {
    display: none;
}

.erp-shell.erp-sidebar-collapsed .erp-brand-logo-portrait {
    display: block;
}

.erp-shell.erp-sidebar-collapsed .erp-sidebar-toggle-icon-list {
    display: inline-flex;
}

.erp-shell.erp-sidebar-collapsed .erp-sidebar-toggle-icon-close {
    display: none;
}

.erp-shell.erp-sidebar-collapsed .erp-nav-link,
.erp-shell.erp-sidebar-collapsed .erp-nav-link .erp-nav-icon {
    justify-content: center;
}

.erp-shell.erp-sidebar-collapsed .erp-nav-link.active {
    border-left: none;
    border-radius: 0.5rem;
}

.erp-shell.erp-sidebar-collapsed .erp-nav-link.active .erp-nav-icon {
    background: var(--erp-accent-gold-soft);
    border-radius: 0.375rem;
    padding: 0.15rem;
}

.erp-shell.erp-sidebar-collapsed .erp-nav-item {
    position: relative;
}

.erp-shell.erp-sidebar-collapsed .collapse.erp-nav-submenu {
    display: none !important;
}

/* --------------------------------------------------------------------------
   Page content
   -------------------------------------------------------------------------- */
.erp-page-content {
    grid-column: 2;
    padding-top: var(--erp-topbar-height);
    min-width: 0;
}

.erp-page-content main {
    background: var(--erp-content-bg);
}

/* --------------------------------------------------------------------------
   Responsive — sidebar becomes off-canvas overlay
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .erp-shell {
        grid-template-columns: 1fr;
    }

    .erp-sidebar {
        transform: translateX(-100%);
        box-shadow: 0 0 24px rgba(0, 0, 0, 0.35);
    }

    .erp-shell.erp-sidebar-open .erp-sidebar {
        transform: translateX(0);
    }

    /* The drawer's own in-panel X (#sidebarToggle) closes it once open, so
       the topbar's open-trigger sits underneath the (higher z-index) sidebar
       -- hide it from keyboard/AT too, not just visually. */
    .erp-shell.erp-sidebar-open #sidebarOpenMobile {
        visibility: hidden;
    }

    .erp-topbar,
    .erp-shell.erp-sidebar-collapsed .erp-topbar {
        left: 0;
    }

    .erp-shell.erp-sidebar-collapsed {
        grid-template-columns: 1fr;
    }

    .erp-shell.erp-sidebar-collapsed .erp-sidebar {
        width: var(--erp-sidebar-width);
    }

    .erp-shell.erp-sidebar-collapsed .erp-brand {
        flex-direction: row;
        justify-content: space-between;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .erp-shell.erp-sidebar-collapsed .erp-brand-logo-landscape,
    .erp-shell.erp-sidebar-collapsed .erp-nav-section-title,
    .erp-shell.erp-sidebar-collapsed .erp-nav-link span:not(.erp-nav-icon),
    .erp-shell.erp-sidebar-collapsed .erp-nav-chevron {
        display: block;
    }

    .erp-shell.erp-sidebar-collapsed .erp-brand-logo-portrait {
        display: none;
    }

    .erp-shell.erp-sidebar-collapsed .erp-sidebar-toggle-icon-list {
        display: none;
    }

    .erp-shell.erp-sidebar-collapsed .erp-sidebar-toggle-icon-close {
        display: inline-flex;
    }

    .erp-shell.erp-sidebar-collapsed .erp-nav-link,
    .erp-shell.erp-sidebar-collapsed .erp-nav-link .erp-nav-icon {
        justify-content: flex-start;
    }

    .erp-shell.erp-sidebar-collapsed .collapse.erp-nav-submenu {
        display: block !important;
    }

    .erp-page-content {
        grid-column: 1;
    }
}

/* --------------------------------------------------------------------------
   Dashboard sample widgets
   -------------------------------------------------------------------------- */
.erp-stat-card {
    border: none;
    border-radius: 0.75rem;
    box-shadow: 0 1px 3px rgba(15, 30, 40, 0.08);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.erp-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(15, 30, 40, 0.1);
}

.erp-stat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 0.6rem;
    font-size: 1.25rem;
    background: var(--erp-accent-gold-soft);
    color: var(--erp-accent-gold);
}

.erp-stat-value {
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1.1;
}

.erp-stat-label {
    font-size: 0.78rem;
    color: var(--bs-secondary-color);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.erp-quote-status {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
}

/* --------------------------------------------------------------------------
   Module hub landing page
   -------------------------------------------------------------------------- */
.hub-card {
    --hub-accent: var(--erp-accent-gold);
    --hub-accent-soft: var(--erp-accent-gold-soft);
    animation: hub-fade-in 0.3s ease both;
}

@keyframes hub-fade-in {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hub-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 0.6rem;
    font-size: 1.15rem;
    background: var(--hub-accent-soft);
    color: var(--hub-accent);
}

.hub-card-head {
    min-width: 0;
}

.hub-card-title {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hub-signals {
    margin: 0;
    padding: 0;
}

.hub-signals li + li {
    border-top: 1px solid var(--bs-border-color-translucent);
}

.hub-value {
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--bs-body-color);
}

.hub-zero {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--bs-secondary-color);
    font-style: italic;
}

.hub-card-footer {
    border-top: 1px solid var(--bs-border-color-translucent);
}

.hub-quick {
    flex-shrink: 0;
}

.hub-activity .hub-activity-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--erp-accent-gold);
}

/* Module Hub card accents -- previously a 10-hue qualitative palette
   (green/blue/purple/teal/slate/indigo/orange/cyan/rose) with no relation
   to the brand, kept only for at-a-glance module differentiation. That
   made the Module Hub's main content (the dominant visual element on the
   page) look completely unbranded. Collapsed to the two AlmaCon colors:
   gold for the class already named for it, primary blue for every other
   module -- module identity still comes from the icon/name/description,
   not the border hue. Class names (and module_hub.html's
   hub-tone-{{ card.tone }} templating) are unchanged, only the values. */
.hub-tone-gold {
    --hub-accent: var(--almacon-accent-hover);
    --hub-accent-soft: rgba(var(--almacon-accent-rgb), 0.12);
    border-top: 3px solid var(--almacon-accent);
}

.hub-tone-green,
.hub-tone-blue,
.hub-tone-purple,
.hub-tone-teal,
.hub-tone-slate,
.hub-tone-indigo,
.hub-tone-orange,
.hub-tone-cyan,
.hub-tone-rose {
    --hub-accent: var(--almacon-primary);
    --hub-accent-soft: rgba(var(--almacon-primary-rgb), 0.12);
    border-top: 3px solid var(--almacon-primary);
}

/* ==========================================================================
   Fluent-Style Elevation & Corner Radius System (Microsoft Fluent Design)
   ========================================================================== */
:root {
    --erp-border-radius: 0.75rem;
    --erp-shadow-1: 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.03);
    --erp-shadow-2: 0 6px 16px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
    --erp-shadow-3: 0 16px 40px rgba(0, 0, 0, 0.12), 0 6px 16px rgba(0, 0, 0, 0.08);
}

[data-bs-theme="dark"] {
    --erp-shadow-1: 0 1px 3px rgba(0, 0, 0, 0.3);
    --erp-shadow-2: 0 8px 24px rgba(0, 0, 0, 0.4);
    --erp-shadow-3: 0 16px 48px rgba(0, 0, 0, 0.6);
}

.erp-elevation-1 {
    box-shadow: var(--erp-shadow-1);
}

.erp-elevation-2 {
    box-shadow: var(--erp-shadow-2);
}

.erp-elevation-3 {
    box-shadow: var(--erp-shadow-3);
}

/* Plain Bootstrap cards that predate .erp-section-card -- list-page filter
   bars, dashboard stat cards -- take the same dark surface layer and
   elevation tokens, so in dark mode no card sits flat, or in a different
   grey, beside the layered ones. Light theme is unchanged. Kanban columns
   and cards keep their own tertiary layering. */
[data-bs-theme="dark"] .erp-page-content .card:where(:not(.erp-section-card, .erp-kanban-column, .erp-kanban-card)) {
    background-color: #16222B;
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: var(--erp-shadow-1);
}

[data-bs-theme="dark"] .erp-page-content .erp-stat-card:hover {
    box-shadow: var(--erp-shadow-2);
}

/* ==========================================================================
   ERP form/detail-view layout system — shared across every module
   (apps/core/templatetags/erp_forms.py, templates/includes/_field.html,
   _action_bar.html, _breadcrumb.html). Replaces per-app copies such as
   accounting's .acc-card / hr's .hr-card.
   ========================================================================== */

.erp-section-card {
    border: 1px solid var(--bs-border-color);
    border-radius: var(--erp-border-radius);
    background-color: var(--bs-card-bg, var(--almacon-bg-surface));
    box-shadow: var(--erp-shadow-1);
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s ease;
}

[data-bs-theme="dark"] .erp-section-card {
    background-color: #16222B;
    border-color: rgba(255, 255, 255, 0.08);
}

.erp-section-card:hover,
.erp-section-card:focus-within {
    box-shadow: var(--erp-shadow-2);
    transform: translateY(-1px);
}

[data-bs-theme="dark"] .erp-section-card:hover,
[data-bs-theme="dark"] .erp-section-card:focus-within {
    background-color: #1B2A36;
}

.erp-section-card > .card-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Optional trailing count badge inside a card-header, e.g. "12 records". */
.erp-section-card > .card-header .card-count {
    margin-left: auto;
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--bs-secondary-color);
    background: var(--bs-tertiary-bg);
    border-radius: 999px;
    padding: 0.15rem 0.6rem;
}

@media print {
    .erp-section-card {
        box-shadow: none;
        border-color: #dee2e6;
    }
}

.erp-action-bar {
    position: sticky;
    bottom: 0;
    z-index: 5;
    background-color: var(--bs-body-bg);
    border-top: 1px solid var(--bs-border-color);
    padding: 0.75rem 1rem;
    margin-top: 1rem;
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

/* Visually hidden but still exposed to assistive tech — used to give a
   repeated-row/formset cell a real <label> without duplicating the
   column header visually (AUDIT_REPORT.md F4-7 fix, generalized from
   accounting/journal/form.html's original .acc-table-scoped version). */
.erp-visually-hidden-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Financial fields: right-aligned value, currency/unit context visible
   via input-group prepend/append (AUDIT_REPORT.md Part 1.1). */
.erp-field-money .input-group-text {
    min-width: 3.25rem;
    justify-content: center;
}

.erp-field-money input {
    text-align: right;
}

/* A `.btn-group` filter bar (e.g. accounting's account-type tabs) has a
   fixed number of joined buttons with no built-in wrap behavior; as a flex
   item it won't shrink below its own content width by default, so on a
   narrow viewport it pushes the page into horizontal overflow instead of
   wrapping or scrolling on its own (found via a mobile-viewport Playwright
   check, Phase 10). Letting it shrink and scroll internally keeps the rest
   of the page contained without losing the joined-button look on desktop. */
[role="group"].btn-group {
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
}

/* Print / reduced motion */
@media (prefers-reduced-motion: reduce) {
    .erp-sidebar,
    .erp-shell,
    .erp-nav-chevron {
        transition: none;
    }
    .hub-card {
        animation: none;
    }
}

/* Ethiopian date picker popup (static/js/ethiopian-datepicker.js) --
   rides Bootstrap's own theme variables so it follows the light/dark
   toggle with no separate dark-mode rules needed here. */
.erp-datepicker-popup {
    position: fixed;
    z-index: 1080;
    width: 260px;
    padding: 0.75rem;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.25);
    user-select: none;
}

.erp-datepicker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.erp-datepicker-nav {
    background: none;
    border: none;
    border-radius: 4px;
    padding: 2px 8px;
    line-height: 1;
    font-size: 0.9rem;
    color: var(--bs-primary);
    cursor: pointer;
}

.erp-datepicker-nav:hover {
    background: var(--bs-tertiary-bg);
}

.erp-datepicker-title {
    display: flex;
    gap: 6px;
    font-weight: 600;
    font-size: 0.9rem;
}

.erp-datepicker-title-part {
    padding: 0 2px;
    border-radius: 3px;
    cursor: pointer;
}

.erp-datepicker-title-part:hover {
    background: var(--bs-tertiary-bg);
}

.erp-datepicker-dow-row,
.erp-datepicker-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
}

.erp-datepicker-grid.months,
.erp-datepicker-grid.years {
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
}

.erp-datepicker-dow {
    padding: 4px 0;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--bs-secondary-color);
}

.erp-datepicker-cell {
    padding: 6px 2px;
    border: none;
    border-radius: 4px;
    background: none;
    font-size: 0.85rem;
    color: var(--bs-body-color);
    cursor: pointer;
    transition: background 0.1s;
}

.erp-datepicker-cell:hover:not(:disabled) {
    background: var(--bs-tertiary-bg);
}

.erp-datepicker-cell:disabled {
    color: var(--bs-secondary-color);
    opacity: 0.4;
    cursor: default;
}

.erp-datepicker-cell.today {
    font-weight: 700;
    color: var(--bs-primary);
}

.erp-datepicker-cell.selected,
.erp-datepicker-cell.selected:hover {
    background: var(--bs-primary);
    color: #fff;
    font-weight: 600;
}

.erp-datepicker-time-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--bs-border-color);
}

.erp-datepicker-time-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--bs-secondary-color);
    margin-right: 2px;
}

.erp-datepicker-time-input {
    width: 44px;
    padding: 2px 4px;
    text-align: center;
    font-size: 0.85rem;
    color: var(--bs-body-color);
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 4px;
}

.erp-datepicker-time-sep {
    font-weight: 600;
    color: var(--bs-secondary-color);
}

.erp-datepicker-time-apply {
    margin-left: auto;
    padding: 3px 10px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #fff;
    background: var(--bs-primary);
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.erp-datepicker-time-apply:hover {
    filter: brightness(0.92);
}

/* Ethiopian time picker popup (static/js/ethiopian-timepicker.js) --
   reuses .erp-datepicker-* chrome above; this is the one addition. */
.erp-timepicker-period-row {
    display: flex;
    gap: 6px;
    margin-top: 0.5rem;
}

.erp-timepicker-period {
    flex: 1;
    padding: 4px 0;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--bs-body-color);
    background: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 4px;
    cursor: pointer;
}

.erp-timepicker-period.selected {
    background: var(--bs-primary);
    color: #fff;
    border-color: var(--bs-primary);
}

.erp-kanban-column {
    width: 300px;
    max-height: 640px;
}

.erp-kanban-column-body {
    overflow-y: auto;
    max-height: 560px;
}

.erp-kanban-card {
    background: var(--bs-tertiary-bg);
}

/* --------------------------------------------------------------------------
   Auth pages (login, etc.) — unlike the sidebar (always a dark navy panel),
   these sit on the page's own light/dark canvas, so the logo genuinely needs
   both color pairs: blue in light theme, gold in dark theme. Landscape
   (wordmark) on wide screens, portrait (stacked mark) below 576px.
   -------------------------------------------------------------------------- */
.erp-auth-logo-wrap {
    display: flex;
    justify-content: center;
    margin: 0 auto 1.5rem;
}

.erp-auth-logo {
    display: none;
    width: auto;
}

.erp-auth-logo-landscape {
    height: 40px;
}

.erp-auth-logo-portrait {
    height: 64px;
}

:root:not([data-bs-theme="dark"]) .erp-auth-logo-light.erp-auth-logo-landscape,
:root[data-bs-theme="dark"] .erp-auth-logo-dark.erp-auth-logo-landscape {
    display: block;
}

@media (max-width: 575.98px) {
    :root:not([data-bs-theme="dark"]) .erp-auth-logo-light.erp-auth-logo-landscape,
    :root[data-bs-theme="dark"] .erp-auth-logo-dark.erp-auth-logo-landscape {
        display: none;
    }

    :root:not([data-bs-theme="dark"]) .erp-auth-logo-light.erp-auth-logo-portrait,
    :root[data-bs-theme="dark"] .erp-auth-logo-dark.erp-auth-logo-portrait {
        display: block;
    }
}