/* ==========================================================================
   PPMS - Design Direction D4 "Soft Professional"
   --------------------------------------------------------------------------
   The single source of truth for the PPMS visual language. Loaded from
   layouts/_d4-theme.blade.php right after bootstrap.min.css / app.min.css in
   every top-level layout, so it cascades over the stock admin theme on every
   page of every module without editing 400+ views.

   It replaces the earlier _global-3color-theme.blade.php override (blue /
   amber / emerald), which is left on disk untouched so the change is a
   one-line revert per layout.

   PRESENTATION ONLY. No markup, route, controller or DB change depends on
   anything in this file - every rule here is colour, type, spacing, radius
   or shadow. Bootstrap's semantic class names (.btn-primary, .badge-success,
   .card, .table ...) are what the app already uses everywhere, so restyling
   what THOSE render as is what reaches every screen in one change.

   Why some selectors are prefixed `html body` / `body`:
   app.blade.php (and its four sibling layouts) carry a large inline <style>
   block that the browser parses AFTER this file and that leans on
   !important. Beating it needs higher specificity, not later order - hence
   the extra element on the left of those selectors. Where a rule does not
   collide with that block, it is written plainly.
   ========================================================================== */

/* ==========================================================================
   1. Design tokens
   ========================================================================== */
:root {
    /* Ink - text, in descending emphasis */
    --d4-ink:        #1f2733;
    --d4-ink-2:      #52616f;
    --d4-ink-muted:  #93a0ad;

    /* Surfaces */
    --d4-canvas:     #f2f5f8;   /* page background */
    --d4-card:       #ffffff;   /* raised surface */
    --d4-line:       #e4e9ee;   /* hairline divider */
    --d4-line-2:     #cfd8e0;   /* control border */
    --d4-hover:      #f7fafc;   /* row / item hover */

    /* Accent - Fluent blue. One accent for the whole product. */
    --d4-accent:      #0f6cbd;
    --d4-accent-soft: #e8f2fb;
    --d4-accent-dark: #0b559a;

    /* Meaning colours - used for status, never as decoration */
    --d4-good:      #107c41;  --d4-good-soft: #e5f3ec;
    --d4-warn:      #9a6700;  --d4-warn-soft: #fbf0d9;
    --d4-bad:       #c23934;  --d4-bad-soft:  #fceceb;
    --d4-info:      #0f6cbd;  --d4-info-soft: #e8f2fb;

    /* Radii */
    --d4-r:    14px;   /* cards, panels */
    --d4-r-s:  10px;   /* buttons, inputs, nav items */
    --d4-r-xs: 7px;    /* small chips, icon tiles */

    /* Elevation - exactly one shadow, used everywhere */
    --d4-shadow:    0 2px 6px rgba(31,45,61,.06), 0 8px 24px rgba(31,45,61,.06);
    --d4-shadow-lg: 0 12px 48px rgba(31,45,61,.14);

    /* Type */
    --d4-font: "Nunito Sans", "Noto Sans Bengali", "Segoe UI", Nikosh, NikoshBAN, system-ui, -apple-system, Arial, sans-serif;

    /* Shell metrics - mirrored by the inline style block in the layouts */
    --d4-sidebar-w: 248px;   /* rail width; drives .main-content margin too (section 16) */
    --d4-topbar-h:  57px;    /* account chip measures 37px + 10 above + 10 below */

    /* Dark navigation rail (see section 14). The rail colour is app.min.css's
       own body[data-sidebar=dark] .vertical-menu background; the rest are D4
       ink values re-cut for legibility against it. */
    --d4-rail:          #2a3042;
    --d4-rail-ink:      #d7dae0;
    --d4-rail-ink-mute: #9aa3b2;
    --d4-rail-hover:    rgba(255,255,255,.06);
    --d4-rail-tile:     rgba(255,255,255,.08);
    --d4-rail-tile-ink: #9fc6ec;
    --d4-rail-line:     rgba(255,255,255,.10);

    /* Legacy aliases: the three-colour override and the executive dashboard
       partials still read these names. Repointed at the D4 palette so those
       screens follow the new direction without being edited. */
    --brand-1: #0f6cbd;   --brand-1-soft: #e8f2fb;
    --brand-2: #9a6700;   --brand-2-soft: #fbf0d9;
    --brand-3: #107c41;   --brand-3-soft: #e5f3ec;
}

/* ==========================================================================
   2. Base
   ========================================================================== */
html body,
html body[data-sidebar=dark] {
    font-family: var(--d4-font);
    font-size: 15px;
    line-height: 1.6;
    color: var(--d4-ink);
    background-color: var(--d4-canvas);
    -webkit-font-smoothing: antialiased;
}

html body h1, html body h2, html body h3,
html body h4, html body h5, html body h6,
html body .h1, html body .h2, html body .h3,
html body .h4, html body .h5, html body .h6 {
    font-family: var(--d4-font);
    color: var(--d4-ink);
    font-weight: 800;
    letter-spacing: -.2px;
}

html body a { color: var(--d4-accent); text-decoration: none; }
html body a:hover { color: var(--d4-accent-dark); text-decoration: underline; }

/* The underline is reserved for hover, so link-dense tables stay quiet at rest. */
html body .btn:hover,
html body #sidebar-menu a:hover,
html body .nav-link:hover,
html body .dropdown-item:hover,
html body .badge:hover,
html body .page-link:hover { text-decoration: none; }

::selection { background: #e8f2fb; color: #1f2733; }

/* Numbers line up in columns - every figure here is money, a percentage or a count. */
html body .count-numbers,
html body td.num, html body th.num,
html body .d4-num { font-variant-numeric: tabular-nums; }

/* Scrollbars, so the many scroll panes read as part of the design */
html body ::-webkit-scrollbar { width: 10px; height: 10px; }
html body ::-webkit-scrollbar-track { background: transparent; }
html body ::-webkit-scrollbar-thumb { background: #cdd6de; border-radius: 999px; border: 2px solid #f2f5f8; }
html body ::-webkit-scrollbar-thumb:hover { background: #b3c0cb; }

/* ==========================================================================
   3. Topbar
   ========================================================================== */
html body #page-topbar {
    background: var(--d4-card) !important;
    box-shadow: 0 1px 0 var(--d4-line), 0 2px 8px rgba(31,45,61,.04) !important;
    border-bottom: 0 !important;
}

html body #page-topbar .navbar-header {
    height: var(--d4-topbar-h) !important;
    padding: 0 20px 0 0 !important;
    align-items: center;
}

html body .navbar-brand-box {
    width: var(--d4-sidebar-w) !important;
    height: var(--d4-topbar-h) !important;
    background-color: var(--d4-card) !important;
    background-image: none !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 18px !important;
    text-align: left !important;
}

/* Brand lockup (seal + wordmark) inside the topbar's brand box */
html body .d4-brand { display: flex; align-items: center; gap: 11px; text-decoration: none !important; }
html body .d4-brand img { height: 34px; width: auto; flex-shrink: 0; }
html body .d4-brand .d4-brand-t { font-size: 16px; font-weight: 800; color: var(--d4-ink); line-height: 1.15; letter-spacing: -.3px; }
html body .d4-brand .d4-brand-s { font-size: 10.5px; font-weight: 600; color: var(--d4-ink-muted); line-height: 1.25; letter-spacing: .02em; }

/* Product name shown beside the sidebar toggle */
html body .d4-topbar-title { font-size: 14.5px; font-weight: 700; color: var(--d4-ink-2); letter-spacing: -.1px; white-space: nowrap; }
html body .d4-topbar-title .d4-topbar-sep { color: var(--d4-line-2); margin: 0 8px; font-weight: 400; }
html body .d4-topbar-title .d4-topbar-sub { font-weight: 600; color: var(--d4-ink-muted); }
@media (max-width: 1280px) { html body .d4-topbar-title .d4-topbar-sep, html body .d4-topbar-title .d4-topbar-sub { display: none; } }

html body #vertical-menu-btn,
html body .header-item {
    height: auto !important;
    border-radius: var(--d4-r-s) !important;
    color: var(--d4-ink-2) !important;
    box-shadow: none !important;
}

html body #vertical-menu-btn {
    padding: 7px 11px !important;
    font-size: 16px !important;
    margin-left: 12px !important;
}

html body #vertical-menu-btn:hover,
html body .header-item:hover { background-color: var(--d4-canvas) !important; }

/* Account button, right-hand side */
html body #page-header-user-dropdown {
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    padding: 4px 12px 4px 4px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--d4-ink) !important;
    border-radius: 999px !important;
    border: 1px solid var(--d4-line) !important;
}

html body .header-profile-user {
    height: 32px !important;
    width: 32px !important;
    object-fit: cover;
    border: 1px solid var(--d4-line);
    background: var(--d4-accent-soft);
}

html body .dropdown-menu {
    border: 1px solid var(--d4-line) !important;
    border-radius: var(--d4-r-s) !important;
    box-shadow: var(--d4-shadow) !important;
    padding: 6px !important;
}

html body .dropdown-item {
    border-radius: var(--d4-r-xs) !important;
    padding: 9px 12px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--d4-ink-2) !important;
}

html body .dropdown-item:hover { background-color: var(--d4-canvas) !important; color: var(--d4-ink) !important; }
html body .dropdown-item.text-danger { color: var(--d4-bad) !important; }
html body .dropdown-item.text-danger:hover { background-color: var(--d4-bad-soft) !important; }

/* ==========================================================================
   4. Sidebar
   D4's signature: a white, rounded rail with a filled "you are here" pill,
   so an occasional user can never lose their place.
   ========================================================================== */
html body .vertical-menu {
    width: var(--d4-sidebar-w) !important;
    top: var(--d4-topbar-h) !important;
    background: var(--d4-card) !important;
    border-right: 1px solid var(--d4-line) !important;
    box-shadow: none !important;
}

html body .vertical-menu > .h-100 {
    background-color: var(--d4-card) !important;
    padding-bottom: 8px;
}

html body #sidebar_timing_menu {
    background-color: var(--d4-card) !important;
    border-top: 1px solid var(--d4-line) !important;
}

html body #sidebar-menu { padding: 10px 12px !important; }
html body #sidebar-menu ul { padding: 0 !important; }
html body #sidebar-menu ul li { list-style: none; }

/* Top-level items */
html body #sidebar-menu ul li a {
    display: flex !important;
    align-items: center !important;
    gap: 11px !important;
    padding: 9px 12px !important;
    margin-bottom: 2px !important;
    border-radius: var(--d4-r-s) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--d4-ink-2) !important;
    line-height: 1.35 !important;
    transition: background-color .14s ease, color .14s ease;
}

html body #sidebar-menu ul li a:hover {
    background-color: var(--d4-canvas) !important;
    color: var(--d4-ink) !important;
}

/* Icons sit in a soft tile - one accent, not one colour per section. */
html body #side-menu > li.sb-item > a > i,
html body[data-sidebar=dark] #side-menu > li.sb-item > a > i,
html body #sidebar-menu ul li a > i {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: var(--d4-r-xs) !important;
    font-size: 12px !important;
    background: var(--d4-accent-soft) !important;
    color: var(--d4-accent) !important;
    transition: background-color .14s ease, color .14s ease;
}

/* Sub-menu icons are quieter than their parent's */
html body #sidebar-menu ul li ul.sub-menu li a > i {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    font-size: 10px !important;
    background: transparent !important;
    color: var(--d4-ink-muted) !important;
}

/* The filled "you are here" pill */
html body #side-menu > li.sb-item.mm-active > a,
html body[data-sidebar=dark] #side-menu > li.sb-item.mm-active > a,
html body #sidebar-menu ul li a.active,
html body #sidebar-menu ul li .mm-active > a {
    background: var(--d4-accent) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(15,108,189,.28) !important;
}

html body #side-menu > li.sb-item.mm-active > a span,
html body[data-sidebar=dark] #side-menu > li.sb-item.mm-active > a span,
html body #sidebar-menu ul li a.active span { color: #ffffff !important; }

html body #side-menu > li.sb-item.mm-active > a > i,
html body[data-sidebar=dark] #side-menu > li.sb-item.mm-active > a > i,
html body #sidebar-menu ul li a.active > i {
    background: rgba(255,255,255,.24) !important;
    color: #ffffff !important;
}

/* The previous direction's per-section colour bars and gradients are retired:
   D4 is a single-accent system. */
html body #side-menu > li.sb-item,
html body #side-menu > li.sb-item.mm-active {
    border-left: 0 !important;
    background: transparent !important;
}

html body #side-menu > li.sb-item > a:hover,
html body[data-sidebar=dark] #side-menu > li.sb-item > a:hover {
    color: var(--d4-ink) !important;
    background-color: var(--d4-canvas) !important;
}

html body #side-menu > li.sb-item > a:hover > i,
html body[data-sidebar=dark] #side-menu > li.sb-item > a:hover > i {
    background: var(--d4-accent-soft) !important;
    color: var(--d4-accent) !important;
}

/* Sub-menus: indented, hairline-guided, no icons competing with the parent */
html body #sidebar-menu ul li ul.sub-menu {
    padding: 2px 0 6px 12px !important;
    margin-left: 12px !important;
    border-left: 1.5px solid var(--d4-line) !important;
}

html body #sidebar-menu ul li ul.sub-menu li a {
    padding: 7px 11px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: var(--d4-ink-2) !important;
}

html body #sidebar-menu ul li ul.sub-menu li ul.sub-menu li a {
    padding-left: 11px !important;
    font-size: 13px !important;
}

html body #sidebar-menu ul li ul.sub-menu li a.active,
html body #sidebar-menu ul li ul.sub-menu li .active {
    background: var(--d4-accent-soft) !important;
    color: var(--d4-accent-dark) !important;
    font-weight: 700 !important;
    box-shadow: none !important;
}

html body #sidebar-menu ul li ul.sub-menu li a.active > i,
html body #sidebar-menu ul li ul.sub-menu li .active > i { color: var(--d4-accent) !important; background: transparent !important; }

/* The expand chevron */
html body #sidebar-menu .has-arrow:after {
    float: none !important;
    margin-left: auto !important;
    font-size: 12px;
    color: var(--d4-ink-muted);
    transform: rotate(-45deg);
    transition: transform .18s ease;
}

html body #sidebar-menu .mm-active > .has-arrow:after,
html body #sidebar-menu .has-arrow[aria-expanded=true]:after { transform: rotate(-135deg); }
html body #side-menu > li.sb-item.mm-active > a.has-arrow:after { color: #ffffff; }

/* The tutorials and manual links used to sit loose at the foot of the nav and
   were picked out with their own size, weight and tint. They are ordinary
   items inside the Tutorial submenu now, so this is retired - it was still
   firing on them and leaving those two rows heavier and tinted while every
   other sub-item was plain. Kept commented in case they move back out.
   (Its dark-rail counterpart in section 14 is retired for the same reason.)
html body #sidebar-menu ul > li:not(.sb-item) > a[href*="Manual"],
html body #sidebar-menu ul > li:not(.sb-item) > a[data-target="#ppmsVideoTutorialModal"] {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--d4-accent) !important;
    background: var(--d4-accent-soft) !important;
}
*/

/* Department block pinned under the nav */
html body #sidebar_timing_menu { padding: 12px 16px 10px !important; }
html body #sidebar_timing_menu img { height: 38px !important; margin-top: 0 !important; margin-bottom: 6px; }
html body #sidebar_timing_menu > center > span { display: block; font-size: 12px; line-height: 1.45; }
html body #sidebar_timing_menu > center > span:nth-of-type(1) { color: var(--d4-ink) !important; font-weight: 800; }
html body #sidebar_timing_menu > center > span:nth-of-type(2) { color: var(--d4-ink-muted) !important; font-weight: 600; }
html body .display-date span { display: inline !important; font-size: inherit !important; font-weight: inherit !important; color: inherit !important; }

html body .display-time {
    display: inline-block;
    color: var(--d4-ink) !important;
    background: var(--d4-canvas);
    border: 1px solid var(--d4-line) !important;
    border-radius: var(--d4-r-xs) !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    font-variant-numeric: tabular-nums;
    padding: 2px 12px;
    margin-top: 8px !important;
    -webkit-box-reflect: unset !important;
}

html body .display-time:hover { background: var(--d4-accent-soft); box-shadow: none; color: var(--d4-accent-dark) !important; cursor: default; }

html body .display-date {
    color: var(--d4-ink-muted) !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    margin-top: 4px;
    margin-bottom: 0 !important;
}

/* ==========================================================================
   5. Page canvas
   ========================================================================== */
html body .main-content {
    margin-left: var(--d4-sidebar-w) !important;
    background-color: var(--d4-canvas) !important;
}

/* Clearing the fixed topbar is done on .main-content, not here. Two views
   (dashboards/home.blade.php) set `style="padding-top:40px !important"` inline
   on .page-content, and an inline !important cannot be overridden from a
   stylesheet - so any clearance put here is simply ignored on those pages and
   the page heading slides under the bar. Sitting it on the parent works
   whatever a child's inline padding says. */
html body .main-content { padding-top: var(--d4-topbar-h) !important; }

/* The footer sits at the bottom of the SCREEN or the bottom of the PAGE,
   whichever is further down - on every page. Content half a screen tall: the
   footer stays pinned at the screen's foot. Content taller than the screen:
   the footer follows the content's end, as it always did.

   Done structurally, not with a guessed pixel constant - a first cut used
   min-height: calc(100vh - 56px) with 56 standing in for the footer's own
   box, and measured wrong: the footer sat ~80px below the fold on a short
   page. Instead the body becomes a flex column a screen tall at minimum, and
   the footer's own margin-top:auto is what pushes it to the bottom of that
   column. No constant to drift.

   Safe because the topbar, the sidebar rail, modals, Select2's dropped menus
   and every datepicker are fixed or absolute - out of flow, untouched by the
   body becoming a flex container. The in-flow children are the page's
   .main-content block(s) and the footer, which is exactly the pair this rule
   is about. */
html body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
/* The content and the footer do not sit directly in body - the theme wraps
   them in #layout-wrapper, the body's one in-flow child. The chain has to
   pass through it: the wrapper fills the body's screenful, becomes a column
   itself, and only then can the footer's margin-top:auto reach the bottom.
   Pages without the wrapper fall through to the body's own flex above. */
html body > #layout-wrapper {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
}

html body .page-content {
    padding: 18px 24px 56px 24px !important;
}

html body .vertical-collpsed .main-content { margin-left: 0 !important; }

@media (max-width: 992px) {
    html body .main-content { margin-left: 0 !important; }
    html body .page-content { padding-left: 14px !important; padding-right: 14px !important; }

    /* The layouts collapse the brand box below this width
       (app*.blade.php: `.navbar-brand-box { width: 0 }`), but that rule is a
       single class and loses to this file's `html body .navbar-brand-box`
       width - media queries add no specificity. Without restating it here the
       brand box keeps its full rail width on phones and sits next to the
       hamburger as a dead navy block. */
    html body .navbar-brand-box,
    html body[data-sidebar=dark] .navbar-brand-box {
        width: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        background-image: none !important;
    }
}

/* Page header strip */
html body .page-title-box {
    padding: 0 0 16px 0 !important;
    background: transparent !important;
    border-bottom: 0 !important;
}

html body .page-title-box h4,
html body .page-title-box .page-title {
    font-size: 21px !important;
    font-weight: 800 !important;
    color: var(--d4-ink) !important;
    letter-spacing: -.3px;
    text-transform: none !important;
}

html body .page-title-box .breadcrumb {
    padding: 0 !important;
    margin-bottom: 0 !important;
    background: transparent !important;
    font-size: 13px !important;
    font-weight: 600;
}

html body .page-title-box .breadcrumb-item,
html body .page-title-box .breadcrumb-item a { color: var(--d4-ink-muted) !important; }
html body .page-title-box .breadcrumb-item.active { color: var(--d4-ink-2) !important; font-weight: 700; }
html body .breadcrumb-item + .breadcrumb-item::before { color: var(--d4-line-2) !important; }

/* ==========================================================================
   6. Cards / panels
   ========================================================================== */
html body .card {
    background-color: var(--d4-card) !important;
    border: 0 !important;
    border-radius: var(--d4-r) !important;
    box-shadow: var(--d4-shadow) !important;
    margin-top: 0 !important;
    margin-bottom: 18px !important;
}

html body .card-body { padding: 20px 22px !important; }

html body .card-header {
    background-color: transparent !important;
    border-bottom: 1px solid var(--d4-line) !important;
    padding: 16px 22px !important;
    font-weight: 800;
    font-size: 15.5px;
    color: var(--d4-ink) !important;
    border-radius: var(--d4-r) var(--d4-r) 0 0 !important;
}

html body .card-title {
    font-size: 15.5px !important;
    font-weight: 800 !important;
    color: var(--d4-ink) !important;
    letter-spacing: -.2px;
    margin-bottom: 2px;
}

html body .card-title-desc { font-size: 13px !important; color: var(--d4-ink-muted) !important; }
html body .card-footer { background: transparent !important; border-top: 1px solid var(--d4-line) !important; padding: 14px 22px !important; }

/* ==========================================================================
   7. Buttons
   ========================================================================== */
html body .btn {
    font-family: var(--d4-font);
    font-size: 14px !important;
    font-weight: 700 !important;
    padding: 8px 16px !important;
    border-radius: var(--d4-r-s) !important;
    border-width: 1px !important;
    line-height: 1.45 !important;
    box-shadow: none !important;
    transition: background-color .14s ease, border-color .14s ease, box-shadow .14s ease, color .14s ease;
}

html body .btn:focus, html body .btn.focus { box-shadow: 0 0 0 3px var(--d4-accent-soft) !important; }

html body .btn-sm { font-size: 12.5px !important; padding: 5px 11px !important; border-radius: var(--d4-r-xs) !important; }
html body .btn-lg { font-size: 15px !important; padding: 11px 22px !important; }
html body .btn-block { width: 100% !important; }
html body .btn-rounded { border-radius: 999px !important; }

/* Primary - the only filled accent button */
html body .btn-primary,
html body .btn-info {
    background-color: var(--d4-accent) !important;
    border-color: var(--d4-accent) !important;
    color: #fff !important;
    box-shadow: 0 3px 10px rgba(15,108,189,.26) !important;
}

html body .btn-primary:hover, html body .btn-primary:focus, html body .btn-primary:active,
html body .btn-info:hover, html body .btn-info:focus, html body .btn-info:active {
    background-color: var(--d4-accent-dark) !important;
    border-color: var(--d4-accent-dark) !important;
    color: #fff !important;
}

html body .btn-success {
    background-color: var(--d4-good) !important;
    border-color: var(--d4-good) !important;
    color: #fff !important;
    box-shadow: 0 3px 10px rgba(16,124,65,.24) !important;
}
html body .btn-success:hover, html body .btn-success:focus, html body .btn-success:active {
    background-color: #0c6234 !important; border-color: #0c6234 !important; color: #fff !important;
}

html body .btn-warning {
    background-color: var(--d4-warn) !important;
    border-color: var(--d4-warn) !important;
    color: #fff !important;
    box-shadow: 0 3px 10px rgba(154,103,0,.22) !important;
}
html body .btn-warning:hover, html body .btn-warning:focus, html body .btn-warning:active {
    background-color: #7d5400 !important; border-color: #7d5400 !important; color: #fff !important;
}

html body .btn-danger {
    background-color: var(--d4-bad) !important;
    border-color: var(--d4-bad) !important;
    color: #fff !important;
    box-shadow: 0 3px 10px rgba(194,57,52,.24) !important;
}
html body .btn-danger:hover, html body .btn-danger:focus, html body .btn-danger:active {
    background-color: #a12e2a !important; border-color: #a12e2a !important; color: #fff !important;
}

/* Secondary / light / dark read as neutral "second action" buttons */
html body .btn-secondary,
html body .btn-light,
html body .btn-default {
    background-color: var(--d4-card) !important;
    border-color: var(--d4-line-2) !important;
    color: var(--d4-ink-2) !important;
}
html body .btn-secondary:hover, html body .btn-light:hover, html body .btn-default:hover {
    background-color: var(--d4-canvas) !important;
    border-color: var(--d4-line-2) !important;
    color: var(--d4-ink) !important;
}

html body .btn-dark {
    background-color: var(--d4-ink) !important; border-color: var(--d4-ink) !important; color: #fff !important;
}
html body .btn-dark:hover { background-color: #131a23 !important; border-color: #131a23 !important; }

/* Outline family */
html body .btn-outline-primary, html body .btn-outline-info { color: var(--d4-accent) !important; border-color: var(--d4-accent) !important; background-color: transparent !important; }
html body .btn-outline-primary:hover, html body .btn-outline-info:hover { background-color: var(--d4-accent) !important; color: #fff !important; }
html body .btn-outline-success { color: var(--d4-good) !important; border-color: var(--d4-good) !important; background-color: transparent !important; }
html body .btn-outline-success:hover { background-color: var(--d4-good) !important; color: #fff !important; }
html body .btn-outline-warning { color: var(--d4-warn) !important; border-color: var(--d4-warn) !important; background-color: transparent !important; }
html body .btn-outline-warning:hover { background-color: var(--d4-warn) !important; color: #fff !important; }
html body .btn-outline-danger { color: var(--d4-bad) !important; border-color: var(--d4-bad) !important; background-color: transparent !important; }
html body .btn-outline-danger:hover { background-color: var(--d4-bad) !important; color: #fff !important; }
html body .btn-outline-secondary, html body .btn-outline-light, html body .btn-outline-dark { color: var(--d4-ink-2) !important; border-color: var(--d4-line-2) !important; background-color: transparent !important; }
html body .btn-outline-secondary:hover, html body .btn-outline-light:hover, html body .btn-outline-dark:hover { background-color: var(--d4-canvas) !important; color: var(--d4-ink) !important; border-color: var(--d4-line-2) !important; }

html body .btn-link { color: var(--d4-accent) !important; box-shadow: none !important; font-weight: 700 !important; }
html body .btn.disabled, html body .btn:disabled { opacity: .5 !important; box-shadow: none !important; }

/* ==========================================================================
   8. Forms
   ========================================================================== */
html body label,
html body .col-form-label {
    color: var(--d4-ink-2) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    margin-bottom: 5px !important;
    letter-spacing: .005em;
}

html body .form-control,
html body .custom-select,
html body textarea.form-control,
html body input[type=text], html body input[type=email], html body input[type=password],
html body input[type=number], html body input[type=date], html body input[type=search],
html body input[type=tel], html body input[type=url], html body select, html body textarea {
    font-family: var(--d4-font);
    font-size: 14px !important;
    color: var(--d4-ink) !important;
    background-color: #fbfcfe !important;
    border: 1px solid var(--d4-line-2) !important;
    border-radius: var(--d4-r-s) !important;
    padding: 8px 13px !important;
    height: auto !important;
    min-height: 38px;
    box-shadow: none !important;
    transition: border-color .14s ease, box-shadow .14s ease, background-color .14s ease;
}

html body textarea.form-control, html body textarea { min-height: 84px; }

html body .form-control:focus,
html body .custom-select:focus,
html body select:focus, html body textarea:focus,
html body input[type=text]:focus, html body input[type=email]:focus,
html body input[type=password]:focus, html body input[type=number]:focus,
html body input[type=date]:focus, html body input[type=search]:focus {
    background-color: var(--d4-card) !important;
    border-color: var(--d4-accent) !important;
    box-shadow: 0 0 0 3px var(--d4-accent-soft) !important;
    outline: none !important;
}

html body .form-control::placeholder { color: var(--d4-ink-muted) !important; opacity: 1; }
html body .form-control:disabled, html body .form-control[readonly] { background-color: #eef2f6 !important; color: var(--d4-ink-2) !important; }
html body .form-control-sm { font-size: 13px !important; padding: 5px 10px !important; min-height: 32px; }
html body .form-text, html body small.text-muted { color: var(--d4-ink-muted) !important; font-size: 12.5px !important; }
html body .is-invalid, html body .form-control.is-invalid { border-color: var(--d4-bad) !important; }
html body .invalid-feedback { color: var(--d4-bad) !important; font-size: 12.5px !important; font-weight: 700; }

html body .input-group-text {
    background-color: var(--d4-canvas) !important;
    border: 1px solid var(--d4-line-2) !important;
    border-radius: var(--d4-r-s) !important;
    color: var(--d4-ink-2) !important;
    font-size: 13.5px !important;
}

html body .custom-control-label { font-weight: 600 !important; color: var(--d4-ink-2) !important; font-size: 14px !important; }
html body .custom-control-input:checked ~ .custom-control-label::before { background-color: var(--d4-accent) !important; border-color: var(--d4-accent) !important; }
html body .custom-control-input:focus ~ .custom-control-label::before { box-shadow: 0 0 0 3px var(--d4-accent-soft) !important; }
html body input[type=checkbox], html body input[type=radio] { accent-color: var(--d4-accent); }

/* Select2, used across nearly every filter and form in the app */
html body .select2-container--default .select2-selection--single,
html body .select2-container--default .select2-selection--multiple {
    background-color: #fbfcfe !important;
    border: 1px solid var(--d4-line-2) !important;
    border-radius: var(--d4-r-s) !important;
    min-height: 38px !important;
    padding: 3px 4px !important;
}

html body .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--d4-ink) !important;
    font-size: 14px !important;
    line-height: 30px !important;
    padding-left: 9px !important;
}

html body .select2-container--default .select2-selection--single .select2-selection__arrow { height: 36px !important; }
html body .select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--d4-ink-muted) !important; }

html body .select2-container--default.select2-container--focus .select2-selection--single,
html body .select2-container--default.select2-container--open .select2-selection--single,
html body .select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: var(--d4-accent) !important;
    box-shadow: 0 0 0 3px var(--d4-accent-soft) !important;
}

html body .select2-dropdown {
    border: 1px solid var(--d4-line) !important;
    border-radius: var(--d4-r-s) !important;
    box-shadow: var(--d4-shadow) !important;
    overflow: hidden;
}

html body .select2-container--default .select2-results__option { font-size: 14px !important; padding: 8px 12px !important; color: var(--d4-ink-2) !important; }
html body .select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: var(--d4-accent-soft) !important; color: var(--d4-accent-dark) !important; }
html body .select2-container--default .select2-results__option[aria-selected=true] { background-color: var(--d4-accent) !important; color: #fff !important; }
html body .select2-container--default .select2-results__option[aria-selected=true]:hover { background-color: var(--d4-accent-dark) !important; color: #fff !important; }
html body .select2-container--default .select2-search--dropdown .select2-search__field { border: 1px solid var(--d4-line-2) !important; border-radius: var(--d4-r-xs) !important; padding: 7px 10px !important; font-size: 14px !important; }
html body .select2-container--default .select2-selection--multiple .select2-selection__choice { background-color: var(--d4-accent-soft) !important; border: 1px solid #cfe3f5 !important; color: var(--d4-accent-dark) !important; border-radius: var(--d4-r-xs) !important; font-size: 13px !important; font-weight: 700; padding: 2px 9px !important; }

/* The type-into field inside a multi-select. Select2 renders it as
   <input type="search">, which the form-field block above catches - so every
   multi-select in the app was drawing a small empty white box beside its
   pills, and an entirely empty one looked like a stray control sitting in the
   cell. It is a caret position, not a field: no box of its own. */
html body .select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field,
html body .select2-container .select2-selection--multiple .select2-search__field {
    height: 26px !important;
    min-height: 0 !important;
    margin: 2px 0 !important;
    padding: 0 4px !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    font-family: var(--d4-font);
    font-size: 13.5px !important;
    font-weight: 600;
    color: var(--d4-ink) !important;
}
html body .select2-container .select2-selection--multiple .select2-search__field::placeholder { color: var(--d4-ink-muted) !important; }

/* Datepicker */
html body .datepicker { border-radius: var(--d4-r-s) !important; border: 1px solid var(--d4-line) !important; box-shadow: var(--d4-shadow) !important; padding: 10px !important; font-family: var(--d4-font); }
html body .datepicker table tr td, html body .datepicker table tr th { border-radius: var(--d4-r-xs) !important; font-size: 13px; }
html body .datepicker table tr td.active, html body .datepicker table tr td.active:hover,
html body .datepicker table tr td span.active { background-image: none !important; background-color: var(--d4-accent) !important; color: #fff !important; text-shadow: none !important; }
html body .datepicker table tr td.today { background-image: none !important; background-color: var(--d4-accent-soft) !important; color: var(--d4-accent-dark) !important; }
html body .datepicker table tr td.day:hover { background-color: var(--d4-canvas) !important; }

/* ==========================================================================
   9. Tables + DataTables
   ========================================================================== */
html body .table {
    color: var(--d4-ink) !important;
    font-size: 13.5px !important;
    margin-bottom: 0;
}

/* A table needs a surface of its own. Since the project page dropped its
   card, tables there sit straight on the page canvas - and the header used
   the canvas tone too, so it vanished into the background. Everywhere else it
   was legible but so quiet it barely read as a header at all. */
html body .table {
    background-color: var(--d4-card);
    border: 1px solid var(--d4-line-2);
}

html body .table thead th,
html body .table th {
    /* A step darker than the canvas, so the row reads as a header whether the
       table is on a white card or straight on the page. */
    background-color: #e7edf3 !important;
    color: var(--d4-ink) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    letter-spacing: .045em;
    border-top: 0 !important;
    border-bottom: 2px solid var(--d4-line-2) !important;
    padding: 11px 12px !important;
    vertical-align: middle !important;
    white-space: nowrap;
}

html body .table td {
    border-top: 0 !important;
    border-bottom: 1px solid var(--d4-line) !important;
    padding: 10px 12px !important;
    vertical-align: middle !important;
    color: var(--d4-ink) !important;
}

html body .table tbody tr:last-child td { border-bottom: 0 !important; }
html body .table tbody tr:hover > td { background-color: var(--d4-hover) !important; }
html body .table-striped tbody tr:nth-of-type(odd) { background-color: #fafcfd !important; }

html body .table-bordered, html body .table-bordered th, html body .table-bordered td {
    border-color: var(--d4-line) !important;
}

html body .table-sm td, html body .table-sm th { padding: 7px 10px !important; font-size: 13px !important; }

/* A table dropped straight into a .card gets the card's rounded corners */
html body .card > .table-responsive:first-child > .table thead th:first-child,
html body .card > .table > thead > tr > th:first-child { border-top-left-radius: var(--d4-r); }
html body .card > .table-responsive:first-child > .table thead th:last-child,
html body .card > .table > thead > tr > th:last-child { border-top-right-radius: var(--d4-r); }

/* DataTables chrome */
html body .dataTables_wrapper .dataTables_length,
html body .dataTables_wrapper .dataTables_filter,
html body .dataTables_wrapper .dataTables_info,
html body .dataTables_wrapper .dataTables_paginate { font-size: 13px !important; color: var(--d4-ink-2) !important; }

html body .dataTables_wrapper .dataTables_length select,
html body .dataTables_wrapper .dataTables_filter input {
    border: 1px solid var(--d4-line-2) !important;
    border-radius: var(--d4-r-s) !important;
    padding: 6px 11px !important;
    background-color: #fbfcfe !important;
    min-height: 34px;
}

html body .dataTables_wrapper .dataTables_filter input { min-width: 220px; }
html body .dataTables_wrapper .dataTables_filter input:focus,
html body .dataTables_wrapper .dataTables_length select:focus { border-color: var(--d4-accent) !important; box-shadow: 0 0 0 3px var(--d4-accent-soft) !important; outline: none !important; }

html body table.dataTable thead .sorting,
html body table.dataTable thead .sorting_asc,
html body table.dataTable thead .sorting_desc { cursor: pointer; }

html body .pagination { margin-bottom: 0; }
html body .page-link {
    border: 1px solid var(--d4-line) !important;
    color: var(--d4-ink-2) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    padding: 6px 12px !important;
    margin: 0 2px !important;
    border-radius: var(--d4-r-xs) !important;
    background-color: var(--d4-card) !important;
}
html body .page-link:hover { background-color: var(--d4-canvas) !important; color: var(--d4-ink) !important; }
html body .page-item.active .page-link { background-color: var(--d4-accent) !important; border-color: var(--d4-accent) !important; color: #fff !important; box-shadow: 0 3px 10px rgba(15,108,189,.24) !important; }
html body .page-item.disabled .page-link { color: var(--d4-ink-muted) !important; background-color: var(--d4-card) !important; }

/* ==========================================================================
   10. Badges / status chips
   D4 rule: a status always carries its word, never colour alone.
   ========================================================================== */
html body .badge {
    display: inline-block;
    font-family: var(--d4-font);
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.5 !important;
    padding: 3px 11px !important;
    border-radius: 999px !important;
    letter-spacing: .01em;
    background: var(--d4-canvas);
    color: var(--d4-ink-2);
}

html body .badge-primary, html body .badge-info { background-color: var(--d4-accent-soft) !important; color: var(--d4-accent-dark) !important; }
html body .badge-success { background-color: var(--d4-good-soft) !important; color: var(--d4-good) !important; }
html body .badge-warning { background-color: var(--d4-warn-soft) !important; color: var(--d4-warn) !important; }
html body .badge-danger { background-color: var(--d4-bad-soft) !important; color: var(--d4-bad) !important; }
html body .badge-secondary, html body .badge-light { background-color: var(--d4-canvas) !important; color: var(--d4-ink-2) !important; }
html body .badge-dark { background-color: #e2e8ee !important; color: var(--d4-ink) !important; }
html body .badge-pill { border-radius: 999px !important; }

/* Text + background utilities, repointed at the D4 palette */
html body .text-primary, html body .text-info { color: var(--d4-accent) !important; }
html body .text-success { color: var(--d4-good) !important; }
html body .text-warning { color: var(--d4-warn) !important; }
html body .text-danger { color: var(--d4-bad) !important; }
html body .text-muted { color: var(--d4-ink-muted) !important; }
html body .text-dark { color: var(--d4-ink) !important; }
html body .bg-primary, html body .bg-info { background-color: var(--d4-accent) !important; }
html body .bg-success { background-color: var(--d4-good) !important; }
html body .bg-warning { background-color: var(--d4-warn) !important; }
html body .bg-danger { background-color: var(--d4-bad) !important; }
html body .bg-light { background-color: var(--d4-canvas) !important; }
html body .bg-white { background-color: var(--d4-card) !important; }
html body .bg-soft-primary { background-color: var(--d4-accent-soft) !important; }
html body .bg-soft-success { background-color: var(--d4-good-soft) !important; }
html body .bg-soft-warning { background-color: var(--d4-warn-soft) !important; }
html body .bg-soft-danger  { background-color: var(--d4-bad-soft) !important; }

/* ==========================================================================
   11. Tabs - rendered as a soft segmented control
   ========================================================================== */
html body .nav-tabs,
html body .nav-pills {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 2px;
    background: var(--d4-canvas);
    border: 0 !important;
    border-radius: 12px;
    padding: 4px;
    margin-bottom: 16px;
}

html body .nav-tabs .nav-item, html body .nav-pills .nav-item { margin-bottom: 0 !important; }

html body .nav-tabs .nav-link,
html body .nav-pills .nav-link {
    border: 0 !important;
    border-radius: 9px !important;
    padding: 7px 15px !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: var(--d4-ink-2) !important;
    background: transparent !important;
}

html body .nav-tabs .nav-link:hover, html body .nav-pills .nav-link:hover { background: rgba(255,255,255,.7) !important; color: var(--d4-ink) !important; }

html body .nav-tabs .nav-link.active,
html body .nav-pills .nav-link.active {
    background: var(--d4-card) !important;
    color: var(--d4-accent) !important;
    box-shadow: 0 2px 6px rgba(31,45,61,.12) !important;
}

html body .nav-tabs-custom { border-bottom: 0 !important; }

/* ==========================================================================
   12. Modals
   ========================================================================== */
html body .modal-content {
    border: 0 !important;
    border-radius: var(--d4-r) !important;
    box-shadow: var(--d4-shadow-lg) !important;
    overflow: hidden;
}

html body .modal-header {
    background: var(--d4-card) !important;
    border-bottom: 1px solid var(--d4-line) !important;
    padding: 14px 20px !important;
    align-items: center;
}

html body .modal-header h5, html body .modal-title {
    font-size: 16px !important;
    font-weight: 800 !important;
    color: var(--d4-ink) !important;
    padding-top: 0 !important;
}

html body .modal-body { padding: 20px !important; }
html body .modal-footer { border-top: 1px solid var(--d4-line) !important; padding: 12px 20px !important; gap: 8px; }
html body .modal-backdrop.show { opacity: .38; background: #1f2733; }

html body .modalCloseButton {
    background-color: var(--d4-canvas) !important;
    color: var(--d4-ink-2) !important;
    font-size: 22px !important;
    width: 32px !important;
    height: 32px !important;
    line-height: 28px !important;
    padding: 0 !important;
    margin-right: 0 !important;
    border-radius: 50% !important;
}
html body .modalCloseButton:hover { background-color: var(--d4-bad-soft) !important; color: var(--d4-bad) !important; }

html body .modalBackBtn { border-radius: var(--d4-r-xs) !important; background-color: var(--d4-bad) !important; padding: 5px 12px !important; font-size: 13px !important; font-weight: 700 !important; }
html body .modalFooterButton { border-radius: var(--d4-r-xs) !important; padding: 6px 14px !important; }
html body .modalHeaderCustom { font-size: 16px !important; font-weight: 800 !important; }
html body .modalExtraButton { border-radius: var(--d4-r-xs) !important; font-size: 12.5px !important; font-weight: 700 !important; }

/* ==========================================================================
   13. Alerts
   ========================================================================== */
html body .alert {
    border: 0 !important;
    border-left: 4px solid transparent !important;
    border-radius: var(--d4-r-s) !important;
    padding: 13px 17px !important;
    font-size: 14px !important;
    font-weight: 600;
}
html body .alert-success { background-color: var(--d4-good-soft) !important; color: var(--d4-good) !important; border-left-color: var(--d4-good) !important; }
html body .alert-danger  { background-color: var(--d4-bad-soft) !important;  color: var(--d4-bad) !important;  border-left-color: var(--d4-bad) !important; }
html body .alert-warning { background-color: var(--d4-warn-soft) !important; color: var(--d4-warn) !important; border-left-color: var(--d4-warn) !important; }
html body .alert-info, html body .alert-primary { background-color: var(--d4-accent-soft) !important; color: var(--d4-accent-dark) !important; border-left-color: var(--d4-accent) !important; }

/* SweetAlert toast, fired app-wide by alertMessage() */
html body .swal2-container .swal2-popup { border-radius: var(--d4-r) !important; box-shadow: var(--d4-shadow-lg) !important; padding: 4px 0 1em !important; }
html body .swal2-container .swal2-title { font-family: var(--d4-font); font-size: 16px !important; font-weight: 800 !important; }

/* ==========================================================================
   14. Progress
   ========================================================================== */
html body .progress { background-color: var(--d4-canvas) !important; border-radius: 999px !important; height: 9px !important; overflow: hidden; }
html body .progress-bar { background-color: var(--d4-accent) !important; border-radius: 999px !important; font-size: 10px; font-weight: 700; }
html body .progress-bar.bg-success { background-color: var(--d4-good) !important; }
html body .progress-bar.bg-warning { background-color: var(--d4-warn) !important; }
html body .progress-bar.bg-danger  { background-color: var(--d4-bad) !important; }

/* ==========================================================================
   15. Footer
   ========================================================================== */
/* The footer flows at the end of the page rather than being pinned to the
   bottom of the window. It used to sit fixed, which cost a strip of every
   screen permanently to a copyright line nobody needs in view while working.

   The <footer> carries an inline `style="position:fixed"` in the layout.
   That is beatable: an inline declaration without !important loses to an
   author rule that has one. Once it is static, the left/bottom offsets stop
   applying on their own, so the collapsed-sidebar and small-screen overrides
   that used to chase the rail are gone with them. */
html body .footer {
    position: static !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: auto !important;
    height: auto !important;
    /* The <footer> is a sibling of .main-content, not a child of it - the
       layout closes the content section before it - so at `static` it starts
       at x=0 and its first words disappear behind the fixed rail. It needs
       the same left offset the content column has. */
    margin-left: var(--d4-sidebar-w) !important;
    /* auto, not a fixed gap: the body is a flex column a screen tall at
       minimum (section 2), and this margin is what pushes a short page's
       footer to the screen's foot. On a long page there is no free space to
       absorb, so it behaves as the old 8px did. */
    margin-top: auto !important;
    padding: 14px 24px !important;
    background-color: transparent !important;
    border-top: 1px solid var(--d4-line) !important;
    color: var(--d4-ink-muted) !important;
    font-size: 12.5px !important;
    font-weight: 600;
}

html body .footer span { color: var(--d4-ink-muted) !important; }

/* ...and no offset when there is no rail to clear. */
html body.vertical-collpsed .footer,
html body .vertical-collpsed .footer { margin-left: 0 !important; }
@media (max-width: 992px) { html body .footer { margin-left: 0 !important; padding: 14px 16px !important; } }

/* Nothing is pinned over the content now, so the page no longer needs to
   reserve room at its foot for it. */
html body .page-content { padding-bottom: 8px !important; }

/* ==========================================================================
   16. Loading overlay
   ========================================================================== */
html body .overlay { background-color: rgba(242,245,248,.82) !important; backdrop-filter: blur(1.5px); }

/* ==========================================================================
   17. Print - report and statement pages must stay print-faithful.
   Everything that is screen chrome is removed; the sheet stays black on white.
   ========================================================================== */
@media print {
    html body { background: #fff !important; font-size: 12px !important; }
    html body #page-topbar,
    html body .vertical-menu,
    html body .footer,
    html body .overlay { display: none !important; }
    html body .main-content { margin-left: 0 !important; }
    html body .page-content { padding: 0 !important; }
    html body .card { box-shadow: none !important; border: 0 !important; border-radius: 0 !important; margin: 0 !important; }
    html body .table th { background-color: #f2f5f8 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    html body .table th, html body .table td { border: 1px solid #cfd8e0 !important; }
}

/* ==========================================================================
   18. Legacy component adapters
   --------------------------------------------------------------------------
   A handful of hand-rolled components predate the redesign and are declared
   inline, page by page, across dozens of views - the old tab bars (.tab /
   .tabMain, 23 views), the dashboard counter tiles (.card-counter), the
   filter strips (.searchDivStyle, 35 views), the right-click row menus
   (.custom-menu family).

   Restyling them here rather than in each view means one rule reaches every
   copy, and no page's markup or JS is touched - the class names, and the
   .active class the tab JS toggles, are exactly as they were.

   These need `html body` (and sometimes an extra element) because the page
   blocks that declare them are pushed into @stack('styles'), which the
   browser parses AFTER this file and which uses !important throughout.
   Specificity is what wins here, not source order.
   ========================================================================== */

/* --- Old tab bars -> D4 segmented control --------------------------------- */
html body .tab,
html body .tabMain {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    overflow: visible !important;
    height: auto !important;
    border: 0 !important;
    border-radius: 12px !important;
    background-color: var(--d4-canvas) !important;
    padding: 4px !important;
    margin-bottom: 14px;
}

html body .tab button,
html body .tabMain button,
html body .tab .tablinks,
html body .tabMain .tablinks {
    float: none !important;
    border: 0 !important;
    outline: none !important;
    border-radius: 9px !important;
    background-color: transparent !important;
    color: var(--d4-ink-2) !important;
    font-family: var(--d4-font);
    font-size: 13.5px !important;
    font-weight: 700 !important;
    padding: 7px 15px !important;
    line-height: 1.4 !important;
    cursor: pointer;
    transition: background-color .14s ease, color .14s ease;
}

html body .tab button:hover,
html body .tabMain button:hover {
    background-color: rgba(255,255,255,.75) !important;
    color: var(--d4-ink) !important;
}

html body .tab button.active,
html body .tabMain button.active,
html body .activeColor {
    background-color: var(--d4-card) !important;
    color: var(--d4-accent) !important;
    box-shadow: 0 2px 6px rgba(31,45,61,.12) !important;
}

html body .tabcontent,
html body .tabcontentMain {
    border: 0 !important;
    border-top: 0 !important;
    border-radius: var(--d4-r) !important;
    background: var(--d4-card);
    padding: 18px 20px !important;
}

/* --- Dashboard counter tiles -> D4 KPI card ------------------------------- */
html body .card-counter {
    position: relative;
    height: auto !important;
    min-height: 96px;
    padding: 18px 20px !important;
    background-color: var(--d4-card) !important;
    color: var(--d4-ink) !important;
    border: 0 !important;
    border-radius: var(--d4-r) !important;
    box-shadow: var(--d4-shadow) !important;
    margin-bottom: 18px !important;
    overflow: hidden;
    transition: box-shadow .15s ease, transform .15s ease;
}

html body .card-counter:hover {
    box-shadow: 0 4px 10px rgba(31,45,61,.10), 0 14px 32px rgba(31,45,61,.10) !important;
    transform: translateY(-2px);
}

/* The tile's meaning is a 4px top edge, not a saturated fill - a dashboard of
   eight solid-colour tiles was the loudest screen in the product. */
html body .card-counter::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: var(--d4-accent);
}

html body .card-counter.success::before,
html body .card-counter.completed::before,
html body .card-counter.mbillrequest::before,
html body .card-counter.tbillpaid::before { background: var(--d4-good); }

html body .card-counter.danger::before,
html body .card-counter.mbillapproved::before,
html body .card-counter.tbillapproved::before { background: var(--d4-bad); }

html body .card-counter.info::before,
html body .card-counter.mbillpaid::before { background: var(--d4-warn); }

html body .card-counter.ongoing::before,
html body .card-counter.primary::before,
html body .card-counter.tbillrequest::before { background: var(--d4-accent); }

/* The decorative oversized watermark icon is dropped - it sat under the
   figures and made them harder to read. */
html body .card-counter i {
    font-size: 20px !important;
    opacity: 1 !important;
    color: var(--d4-ink-muted) !important;
    margin-top: 0 !important;
}

html body .card-counter .count-numbers {
    position: static !important;
    display: block !important;
    right: auto !important;
    top: auto !important;
    font-size: 30px !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    letter-spacing: -.6px;
    color: var(--d4-ink) !important;
    font-variant-numeric: tabular-nums;
}

html body .card-counter .count-name {
    position: static !important;
    display: block !important;
    right: auto !important;
    top: auto !important;
    font-style: normal !important;
    text-transform: none !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--d4-ink-2) !important;
    margin-top: 2px;
}

/* .display-1 was white text sized for the old solid tiles. */
html body .card-counter .display-1,
html body .display-1 {
    font-size: 30px !important;
    font-weight: 800 !important;
    color: var(--d4-ink) !important;
    letter-spacing: -.6px;
    font-variant-numeric: tabular-nums;
}

/* --- Filter strips -------------------------------------------------------- */
html body .searchDivStyle {
    display: flex !important;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
    padding: 14px 16px !important;
    background: var(--d4-canvas);
    border: 1px solid var(--d4-line);
    border-radius: var(--d4-r);
    margin-bottom: 16px;
}

html body .searchDivStyle .select2-container .select2-selection--single {
    height: 38px !important;
    border-radius: var(--d4-r-s) !important;
    border: 1px solid var(--d4-line-2) !important;
    background: #fff !important;
}

html body .searchDivStyle .select2-container .select2-selection--single .select2-selection__rendered { line-height: 30px !important; font-size: 14px !important; }
html body .searchDivStyle .select2-container .select2-selection--single .select2-selection__arrow { height: 36px !important; }
html body .searchDivStyle .form-control { min-height: 38px !important; background: #fff !important; }
html body .searchDivStyle label { margin-bottom: 4px !important; }

/* --- Right-click / row context menus -------------------------------------- */
html body .custom-menu,
html body .customT-menu,
html body .custom-menuT {
    border: 1px solid var(--d4-line) !important;
    border-radius: var(--d4-r-s) !important;
    box-shadow: var(--d4-shadow) !important;
    background: var(--d4-card) !important;
    padding: 6px !important;
    overflow: hidden !important;
}

html body .custom-menu li,
html body .customT-menu li,
html body .custom-menuT li {
    border-radius: var(--d4-r-xs) !important;
    padding: 8px 12px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--d4-ink-2) !important;
    list-style: none;
}

html body .custom-menu li:hover,
html body .customT-menu li:hover,
html body .custom-menuT li:hover { background: var(--d4-canvas) !important; color: var(--d4-ink) !important; }

/* --- Scroll panes --------------------------------------------------------- */
html body .table-scroll-container,
html body .tbodyDiv,
html body .tbodyDivforProject {
    border-radius: var(--d4-r-s);
    border: 1px solid var(--d4-line);
    background: var(--d4-card);
}

/* --- Odds and ends the old theme left behind ------------------------------ */
/* A leftover rule painted every .bg-light emerald green. */
html body .bg-light { background-color: var(--d4-canvas) !important; }

/* The old dark table skin. */
html body .table-dark { background-color: var(--d4-ink) !important; color: #fff !important; border-color: var(--d4-ink) !important; }
html body .table-dark th, html body .table-dark td { border-color: rgba(255,255,255,.12) !important; color: #fff !important; }

/* jsTree (the organogram) picks up the accent for its selected node. */
html body .jstree-default .jstree-clicked { background: var(--d4-accent-soft) !important; border-radius: var(--d4-r-xs); box-shadow: none !important; color: var(--d4-accent-dark) !important; }
html body .jstree-default .jstree-hovered { background: var(--d4-canvas) !important; border-radius: var(--d4-r-xs); box-shadow: none !important; }


/* ==========================================================================
   19. Work-plan gantt bars (the "AyatAlif" chart)
   --------------------------------------------------------------------------
   The plan bar's colour lives in public/barchart1/ayatalif-chart.css, which is
   not our file - so it is overridden from here rather than edited, keeping
   that file untouched (ground rule 6). `html body` beats its plain
   `.phaseDurationBar` selector whatever the load order.

   Three bars, three hue families, unchanged in meaning:
     plan      -> D4 good    (was green)
     actual    -> D4 bad     (set inline in the view's JS)
     extension -> D4 accent  (set inline in the view's JS)

   They are also told apart without colour: plan and actual sit on separate
   rows, and each carries a title tooltip naming its phase and dates.
   ========================================================================== */
html body .phaseDurationBar { background-color: var(--d4-good); border-radius: 3px; }
html body .chartTable { border-collapse: collapse; font-size: 12.5px; }
html body .chartTable .chartTdTh { border: 1px solid var(--d4-line); padding: 4px 6px; }

/* ==========================================================================
   14. Dark navigation rail  (adaptation, added on the ppms_ui_ux_v1 replay)
   --------------------------------------------------------------------------
   D4 as originally drawn used a WHITE 248px rail and a 56px white topbar.
   Between that work and this replay the lead developer restyled the shell
   dark - navy gradient brand box at 70px, 180px rail, light menu text
   (see the inline <style> blocks in layouts/app*.blade.php and
   layouts/headers.blade.php). The owner chose to keep his shell and adapt
   D4 to it rather than override it.

   So this section re-cuts sections 3 and 4 for a dark rail. Everything else
   in D4 - canvas, cards, tables, buttons, forms, badges, print - is
   unchanged: the content area is still D4 "Soft Professional". What stays
   from D4 here is the GEOMETRY and the signature filled "you are here"
   pill; what changes is only the palette it is drawn in.

   These selectors carry `html body[data-sidebar=dark]` (0,2,2) so they beat
   both D4's own `html body` rules (0,1,2) earlier in this file AND the
   layouts' inline `body[data-sidebar=dark]` rules (0,2,1), which are parsed
   after this stylesheet and use !important.

   To go back to the white rail: delete this section and reset
   --d4-sidebar-w to 248px / --d4-topbar-h to 56px. Nothing else references
   the --d4-rail-* tokens.
   ========================================================================== */

/* --- Rail surface ------------------------------------------------------- */
html body[data-sidebar=dark] .vertical-menu,
html body[data-sidebar=dark] .vertical-menu > .h-100 {
    background: var(--d4-rail) !important;
    border-right: 0 !important;
}

html body[data-sidebar=dark] #sidebar_timing_menu {
    background-color: var(--d4-rail) !important;
    border-top: 1px solid var(--d4-rail-line) !important;
}

/* The brand box keeps the developer's navy gradient. D4's section 3 sets
   `background-image: none` for the white shell, so it has to be restated
   here - value copied from layouts/app.blade.php's inline block. */
html body[data-sidebar=dark] .navbar-brand-box {
    background-color: transparent !important;
    background-image: linear-gradient(to right, #141e30, #243b55) !important;
    padding: 0 !important;
    justify-content: center !important;
    text-align: center !important;
}

/* --- Top-level items ---------------------------------------------------- */
html body[data-sidebar=dark] #sidebar-menu ul li a {
    color: var(--d4-rail-ink) !important;
}

html body[data-sidebar=dark] #sidebar-menu ul li a:hover,
html body[data-sidebar=dark] #side-menu > li.sb-item > a:hover {
    background-color: var(--d4-rail-hover) !important;
    color: #ffffff !important;
}

/* Icon tiles: the light-blue chip of the white rail would glare here, so the
   tile becomes a translucent white wash with a light-blue glyph. */
html body[data-sidebar=dark] #side-menu > li.sb-item > a > i,
html body[data-sidebar=dark] #sidebar-menu ul li a > i,
html body[data-sidebar=dark] #side-menu > li.sb-item > a:hover > i {
    background: var(--d4-rail-tile) !important;
    color: var(--d4-rail-tile-ink) !important;
}

/* --- The filled "you are here" pill - D4's signature, kept as-is --------- */
html body[data-sidebar=dark] #side-menu > li.sb-item.mm-active > a,
html body[data-sidebar=dark] #sidebar-menu ul li a.active,
html body[data-sidebar=dark] #sidebar-menu ul li .mm-active > a {
    background: var(--d4-accent) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(15,108,189,.34) !important;
}

html body[data-sidebar=dark] #side-menu > li.sb-item.mm-active > a > i,
html body[data-sidebar=dark] #sidebar-menu ul li a.active > i {
    background: rgba(255,255,255,.24) !important;
    color: #ffffff !important;
}

/* --- Sub-menus ---------------------------------------------------------- */
html body[data-sidebar=dark] #sidebar-menu ul li ul.sub-menu {
    border-left: 1.5px solid var(--d4-rail-line) !important;
}

html body[data-sidebar=dark] #sidebar-menu ul li ul.sub-menu li a {
    color: var(--d4-rail-ink-mute) !important;
}

html body[data-sidebar=dark] #sidebar-menu ul li ul.sub-menu li a:hover {
    color: #ffffff !important;
    background-color: var(--d4-rail-hover) !important;
}

html body[data-sidebar=dark] #sidebar-menu ul li ul.sub-menu li a > i {
    background: transparent !important;
    color: var(--d4-rail-ink-mute) !important;
}

/* Active sub-item: a tinted bar rather than a second filled pill, so one
   pill per rail still means "this is the page you are on". */
html body[data-sidebar=dark] #sidebar-menu ul li ul.sub-menu li a.active,
html body[data-sidebar=dark] #sidebar-menu ul li ul.sub-menu li .active {
    background: rgba(15,108,189,.26) !important;
    color: #ffffff !important;
}

html body[data-sidebar=dark] #sidebar-menu ul li ul.sub-menu li a.active > i,
html body[data-sidebar=dark] #sidebar-menu ul li ul.sub-menu li .active > i {
    color: #ffffff !important;
}

/* --- Chevron ------------------------------------------------------------ */
html body[data-sidebar=dark] #sidebar-menu .has-arrow:after {
    color: var(--d4-rail-ink-mute);
}

html body[data-sidebar=dark] #side-menu > li.sb-item.mm-active > a.has-arrow:after {
    color: #ffffff;
}

/* The manual and video-tutorial links used to sit loose at the foot of the
   rail and were tinted to mark them out. They are inside the Tutorial submenu
   now, so they take the ordinary sub-item styling and that treatment is
   retired - kept here commented in case they are ever moved back out. */
/*
html body[data-sidebar=dark] #sidebar-menu ul > li:not(.sb-item) > a[href*="Manual"],
html body[data-sidebar=dark] #sidebar-menu ul > li:not(.sb-item) > a[data-target="#ppmsVideoTutorialModal"] {
    color: #bfdcf7 !important;
    background: rgba(15,108,189,.20) !important;
}
*/

/* --- Department block pinned under the nav ------------------------------ */
html body[data-sidebar=dark] #sidebar_timing_menu > center > span:nth-of-type(1) {
    color: #ffffff !important;
}

html body[data-sidebar=dark] #sidebar_timing_menu > center > span:nth-of-type(2) {
    color: var(--d4-rail-ink-mute) !important;
}

html body[data-sidebar=dark] .display-time {
    color: #ffffff !important;
    background: rgba(255,255,255,.08) !important;
    border: 1px solid var(--d4-rail-line) !important;
}

/* --- Rail scrollbar -----------------------------------------------------
   The nav genuinely can overflow on a short window, so the bar cannot simply
   be removed - overflow:hidden would put those rows out of reach. It is there
   but invisible: no track, no border, and a thumb that only fades in while
   the rail is hovered, in the rail's own colour rather than the browser grey. */
html body[data-sidebar=dark] .vertical-menu > .h-100 {
    scrollbar-width: thin;                       /* Firefox */
    scrollbar-color: transparent transparent;
}
html body[data-sidebar=dark] .vertical-menu:hover > .h-100 {
    scrollbar-color: rgba(255,255,255,.26) transparent;
}

html body[data-sidebar=dark] .vertical-menu > .h-100::-webkit-scrollbar {
    width: 6px;
    background: transparent !important;
}
html body[data-sidebar=dark] .vertical-menu > .h-100::-webkit-scrollbar-track {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}
html body[data-sidebar=dark] .vertical-menu > .h-100::-webkit-scrollbar-thumb {
    background: transparent !important;
    border: 0 !important;
    border-radius: 999px;
    transition: background-color .2s ease;
}
html body[data-sidebar=dark] .vertical-menu:hover > .h-100::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.26) !important;
}
html body[data-sidebar=dark] .vertical-menu > .h-100::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,.42) !important;
}

/* ==========================================================================
   15. Font Awesome 4 legacy name aliases
   --------------------------------------------------------------------------
   icons.min.css is Font Awesome 5, which renamed a batch of FA4 icons. Six
   FA4 names are still used across the app and have been rendering as blank
   squares - a pre-existing fault on master, not introduced by the redesign,
   but very visible now that D4 gives icons a tinted tile to sit in:

     fa-money        -> Total DPP Cost tile, executive dashboard
     fa-line-chart   -> Current Year Expenditure tile, executive dashboard
     fa-clock-o      -> dashboards/home.blade.php
     fa-external-link-> package-show, procurement-plan stage-5, photos/index
     fa-refresh      -> package-show ("Update from e-GP")
     fa-down         -> Users profile_page (not an FA name in any version)

   Aliasing them here rather than editing six Blade files keeps every one of
   those views untouched - including two the lead developer authored - and
   fixes any other view that reaches for the same legacy names later.
   .fa already carries `font-family:'Font Awesome 5 Free';font-weight:900`,
   so only the glyph needs supplying.
   ========================================================================== */
html body .fa-clock-o:before       { content: "\f017"; }  /* -> fa-clock */
html body .fa-external-link:before { content: "\f35d"; }  /* -> fa-external-link-alt */
html body .fa-money:before         { content: "\f0d6"; }  /* -> fa-money-bill */
html body .fa-refresh:before       { content: "\f021"; }  /* -> fa-sync */
html body .fa-line-chart:before    { content: "\f201"; }  /* -> fa-chart-line */
html body .fa-down:before          { content: "\f063"; }  /* -> fa-arrow-down */


/* ==========================================================================
   17. Dashboard-reference shell  (owner's second reference, 2026-08-24)
   --------------------------------------------------------------------------
   From ui_ideas/stitch_bangladesh_government_login_portal.zip. Its palette is
   the Monument Red system; the owner asked to keep the product's own colours,
   so only the STRUCTURE is taken from it:

     - a wider rail that runs the full height of the window, with the
       department brand at its head instead of in the topbar;
     - roomier nav rows with plain icons rather than tinted icon tiles;
     - the alert banner carrying a thick accent bar on its leading edge.

   Two things in that reference were deliberately not built:
     - the notification bell. PPMS has no notification feature, and a bell
       that never rings is a dead control (same reasoning as the login's
       e-Nothi button).
     - the "Public Works Department Portal" title in the topbar. With the
       brand now at the head of the rail it would be the same identity twice
       on one screen.

   Nothing here edits top_nav_item.blade.php: the topbar's brand box is
   collapsed in CSS and the bar is inset instead, so the developer's markup
   stays exactly as he left it.
   ========================================================================== */

/* --- Rail runs full height, brand at its head --------------------------- */
html body .vertical-menu,
html body[data-sidebar=dark] .vertical-menu {
    top: 0 !important;
    height: 100% !important;
    z-index: 1005 !important;      /* above #page-topbar, which is 1002 */
    flex-direction: column !important;
}

/* `display:flex` is deliberately confined to the desktop breakpoint. Below
   992px app.min.css hides the rail with `.vertical-menu{display:none}` and
   reveals it with `body.sidebar-enable .vertical-menu{display:block}`; an
   unscoped `display:flex !important` here beats both and leaves the drawer
   permanently open on top of the page. */
@media (min-width: 993px) {
    html body .vertical-menu,
    html body[data-sidebar=dark] .vertical-menu { display: flex !important; }
}

/* The rail owns the top-left corner now, so the topbar's own brand box is
   collapsed and the bar is inset by the rail width instead. */
html body .navbar-brand-box,
html body[data-sidebar=dark] .navbar-brand-box {
    width: 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background-image: none !important;
}

html body #page-topbar { padding-left: var(--d4-sidebar-w) !important; }

html body .d4-railbrand {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 18px 16px 16px;
    border-bottom: 1px solid var(--d4-rail-line);
    text-decoration: none !important;
    flex: 0 0 auto;
}
html body .d4-railbrand:hover { background: var(--d4-rail-hover); }

html body .d4-railbrand-seal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px; height: 58px;
    margin-bottom: 10px;
    background: #fff;
    border-radius: 50%;
    padding: 5px;
}
html body .d4-railbrand-seal img { width: 100%; height: 100%; object-fit: contain; }

html body .d4-railbrand-t {
    display: block;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.3;
    color: #fff;
    letter-spacing: -.1px;
}
html body .d4-railbrand-s {
    display: block;
    margin-top: 3px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--d4-rail-ink-mute);
}

/* The scrolling nav takes the space between brand and department block.
   NB the layout sets `style="height:70% !important"` inline on this div, and
   an inline !important cannot be overridden from a stylesheet. Giving the
   item an explicit flex-basis of 0 sidesteps it: in a column flex container
   the main size comes from flex-basis, and `height` is only consulted when
   the basis is `auto`. Same reason `min-height:0` is needed - without it a
   flex item refuses to shrink below its content and the last nav row gets
   clipped by the block underneath. */
html body .vertical-menu > .h-100 {
    flex: 1 1 0% !important;
    min-height: 0 !important;
    overflow-y: auto !important;
}
/* The clock-and-date block at the foot of the rail is hidden entirely, per
   request. Nothing is removed: #sidebar_timing_menu and its markup stay in
   headers.blade.php and updateDate() keeps running against them harmlessly,
   so deleting this one rule brings the block straight back.

   `display` is what does it. The element carries `style="height:30%
   !important"` inline, and an inline !important cannot be overridden from a
   stylesheet - but that declaration only pins height, not display, so this
   still takes. The earlier rules that capped its height and hid the
   duplicated seal inside it are now moot and have gone with it. */
html body #sidebar_timing_menu,
html body[data-sidebar=dark] #sidebar_timing_menu {
    display: none !important;
}

/* The nav list separates its last two utility links with bare <br> tags;
   they cost ~60px of rail for nothing now that the rows have real spacing. */
html body #side-menu > br { display: none !important; }

/* --- Roomier nav rows, plain icons -------------------------------------- */
html body #sidebar-menu { padding: 12px 10px !important; }

html body #sidebar-menu ul li a {
    gap: 13px !important;
    padding: 11px 14px !important;
    margin-bottom: 3px !important;
    font-size: 14px !important;
}

/* The reference uses plain icons, not the tinted tile D4 drew for the white
   rail. On a dark rail the tile reads as clutter at this row height. */
html body[data-sidebar=dark] #side-menu > li.sb-item > a > i,
html body[data-sidebar=dark] #sidebar-menu ul li a > i,
html body[data-sidebar=dark] #side-menu > li.sb-item > a:hover > i {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    font-size: 14px !important;
    background: transparent !important;
    color: var(--d4-rail-ink-mute) !important;
    border-radius: 0 !important;
}

html body[data-sidebar=dark] #side-menu > li.sb-item > a:hover > i { color: #fff !important; }

html body[data-sidebar=dark] #side-menu > li.sb-item.mm-active > a > i,
html body[data-sidebar=dark] #sidebar-menu ul li a.active > i {
    background: transparent !important;
    color: #fff !important;
}

/* --- Alert banners get a leading accent bar ----------------------------- */
html body .xd-alarm {
    border-left: 4px solid var(--d4-bad) !important;
    border-top-left-radius: 4px !important;
    border-bottom-left-radius: 4px !important;
}

/* On a short window (a 768px-tall laptop is the common one here) the brand
   block and the clock together squeeze the nav enough that its last row is
   sliced in half. Trim both so the list ends on a whole item. */
@media (max-height: 820px) {
    html body .d4-railbrand { padding: 12px 16px 10px; }
    html body .d4-railbrand-seal { width: 46px; height: 46px; margin-bottom: 7px; }
    html body .d4-railbrand-t { font-size: 13px; }
}

/* --- Below the shell breakpoint, put everything back -------------------- */
@media (max-width: 992px) {
    html body .vertical-menu,
    html body[data-sidebar=dark] .vertical-menu { top: 0 !important; display: none !important; }

    /* ...and the drawer still opens on the hamburger, as a flex column so the
       brand / nav / clock stack keeps working inside it. */
    html body.sidebar-enable .vertical-menu,
    html body.sidebar-enable[data-sidebar=dark] .vertical-menu { display: flex !important; }

    html body #page-topbar { padding-left: 0 !important; }

    /* The drawer is fixed at z-index 1005 and the topbar sits at 1002, so once
       the drawer is open it covers the top-left corner - and the toggle with
       it. You could open the menu but not close it again; the brand block was
       swallowing the tap.

       Rather than fight the stacking order (raising the bar above the drawer
       would paint the bar across the drawer's own brand block), the toggle
       follows the same rule it does on desktop: it sits immediately to the
       right of the rail whenever the rail is open, and hard left when it is
       not. Same declaration, same transition, so the button visibly slides
       out from behind the drawer as it opens. */
    html body.sidebar-enable #page-topbar { padding-left: var(--d4-sidebar-w) !important; }

    html body .d4-railbrand { padding: 14px 16px 12px; }
    html body .d4-railbrand-seal { width: 48px; height: 48px; }
}


/* ==========================================================================
   18. Topbar: height, toggle placement, site name
   --------------------------------------------------------------------------
   The bar is now exactly as tall as the account chip plus 10px of air above
   and below - the chip measures 37px, so 57px. Everything that keyed off the
   old 70px follows automatically, because .page-content's top padding is
   calc(var(--d4-topbar-h) + 18px).
   ========================================================================== */

/* The layouts set `.navbar-header{align-items:flex-start!important}`, which
   made the toggle stretch the full height of the bar instead of centring in
   it. Beaten here on specificity, not source order. */
html body #page-topbar .navbar-header {
    height: var(--d4-topbar-h) !important;
    min-height: var(--d4-topbar-h) !important;
    align-items: center !important;
    padding: 0 20px 0 0 !important;
}

/* The toggle sits flush against whichever edge the rail leaves behind: hard
   against the rail while it is open, hard against the window once it is
   collapsed. #page-topbar's own padding does the moving, so the button never
   needs its own offset. */
html body #vertical-menu-btn {
    width: var(--d4-topbar-h) !important;
    height: var(--d4-topbar-h) !important;
    min-width: var(--d4-topbar-h) !important;
    margin-left: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 0 !important;
    font-size: 16px !important;
    color: var(--d4-ink-2) !important;
    flex: 0 0 auto;
}
html body #vertical-menu-btn:hover { background-color: var(--d4-canvas) !important; }

html body #page-topbar { transition: padding-left .3s ease; }
html body.vertical-collpsed #page-topbar,
html body .vertical-collpsed #page-topbar { padding-left: 0 !important; }

/* --- Site name ---------------------------------------------------------- */
html body .d4-topbar-title {
    display: inline-flex;
    align-self: center;
    align-items: baseline;
    gap: 7px;
    margin-left: 16px;
    padding-left: 16px;
    border-left: 1px solid var(--d4-line);
    white-space: nowrap;
    line-height: 1;
}

html body .d4-topbar-title .d4-topbar-mark {
    font-size: 17px;
    font-weight: 800;
    letter-spacing: .04em;
    color: var(--d4-accent);
}

html body .d4-topbar-title .d4-topbar-name {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -.1px;
    color: var(--d4-ink);
}

@media (max-width: 700px) {
    html body .d4-topbar-title { margin-left: 10px; padding-left: 10px; }
    html body .d4-topbar-title .d4-topbar-name { display: none; }
}


/* ==========================================================================
   19. Narrow phones with the drawer open
   --------------------------------------------------------------------------
   With the toggle now sitting to the right of an open drawer, a 360px phone
   has only ~110px left for the bar. Two adjustments keep the toggle and the
   account button from being squeezed off the edge.
   ========================================================================== */
@media (max-width: 600px) {
    /* A slightly narrower drawer. The topbar inset reads the same token, so
       the toggle keeps hugging the drawer's edge automatically. */
    :root { --d4-sidebar-w: 220px; }
}

@media (max-width: 700px) {
    /* The site name already collapses to just the mark at this width; with the
       drawer open even that is more than the space allows. */
    html body.sidebar-enable .d4-topbar-title { display: none !important; }
}


/* ==========================================================================
   20. Modals - one treatment, applied to every dialog in the product
   --------------------------------------------------------------------------
   There are 340 modal elements across 79 views. Rather than dress them one at
   a time, this styles the Bootstrap structure they all share, so a dialog
   written anywhere in the app comes out looking like every other one without
   its author doing anything.

   The frosted backdrop was built for the Edit Project Info dialog; it is the
   house style for all of them now.
   ========================================================================== */

/* --- Backdrop ----------------------------------------------------------- */
html body .modal-backdrop,
html body .modal-backdrop.show {
    background-color: rgba(14, 20, 29, .55) !important;
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
    opacity: 1 !important;
}

/* --- Centred, whatever the markup says ----------------------------------
   Only 116 of those 340 carry .modal-dialog-centered, so most dialogs open
   pinned to the top of the window while a few float in the middle. This is
   what that Bootstrap class does, applied to all of them. */
html body .modal-dialog {
    display: flex;
    align-items: center;
    min-height: calc(100% - 3.5rem);
}
html body .modal-dialog > .modal-content { width: 100%; }

/* --- Surface ------------------------------------------------------------ */
html body .modal-content {
    background-color: var(--d4-card) !important;
    border: 0 !important;
    border-radius: var(--d4-r) !important;
    box-shadow: var(--d4-shadow-lg) !important;
}

/* --- Header ------------------------------------------------------------- */
html body .modal-header {
    align-items: center;
    padding: 16px 22px !important;
    background: transparent !important;
    border-bottom: 1px solid var(--d4-line);
    border-top-left-radius: var(--d4-r) !important;
    border-top-right-radius: var(--d4-r) !important;
}
html body .modal-title {
    font-size: 16px !important;
    font-weight: 800 !important;
    line-height: 1.4;
    color: var(--d4-ink) !important;
}
html body .modal-title > i { color: var(--d4-accent); }

/* The dismiss control: a proper button rather than Bootstrap's bare glyph,
   with a hit area big enough to be worth aiming at. */
html body .modal-header .close {
    width: 32px; height: 32px;
    padding: 0 !important;
    margin: 0 0 0 auto !important;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--d4-r-s);
    font-size: 21px; font-weight: 400; line-height: 1;
    color: var(--d4-ink-muted);
    text-shadow: none;
    opacity: 1;
    transition: background-color .14s ease, color .14s ease;
}
html body .modal-header .close:hover,
html body .modal-header .close:focus {
    background-color: var(--d4-canvas);
    color: var(--d4-ink);
    opacity: 1;
}

/* --- Body and footer ---------------------------------------------------- */
html body .modal-body { padding: 20px 22px !important; }

html body .modal-footer {
    padding: 14px 22px !important;
    background: transparent !important;
    border-top: 1px solid var(--d4-line);
    border-bottom-left-radius: var(--d4-r) !important;
    border-bottom-right-radius: var(--d4-r) !important;
}
/* Bootstrap 4 spaces footer buttons with per-child margins, which double up
   once the footer is a flex row with a gap. */
html body .modal-footer { gap: 8px; }
html body .modal-footer > * { margin: 0 !important; }