/* DrainBrain: brand layer over Color Admin 6 (material theme).
   Palette from the DrainBrain logo (assets/img/drainbrain-logo.png): green #009B7E (the brain and "Brain"), navy #0A1A3A ("Drain"
   and the pipe joints). Green is the main action (the Color Admin theme colour uses #007A63 so white text reaches 5.3:1); navy is
   Bootstrap primary, so links, tabs, the top menu and structural buttons follow it. Inter throughout.
   Components are native Color Admin / Bootstrap; this file only sets their variables and fixes what the template hard-codes. */

@font-face { font-family: 'Inter'; font-weight: 400; font-style: normal; font-display: swap; src: url(../fonts/inter/inter-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 500; font-style: normal; font-display: swap; src: url(../fonts/inter/inter-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 600; font-style: normal; font-display: swap; src: url(../fonts/inter/inter-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 700; font-style: normal; font-display: swap; src: url(../fonts/inter/inter-latin-700-normal.woff2) format('woff2'); }

:root, [data-bs-theme=light] {
    /* Tokens also read by assets/css/modules/*.css. */
    --db-green: #009B7E;
    --db-green-rgb: 0, 155, 126;
    --db-green-dark: #007A63;
    --db-green-dark-rgb: 0, 122, 99;
    --db-green-tint: #E3F5F0;
    --db-navy: #0A1A3A;
    --db-navy-rgb: 10, 26, 58;
    --db-navy-dark: #071330;
    --db-navy-active: #040C22;
    --db-navy-soft: #1B3570;
    --db-ink: #06102A;
    --db-ink-rgb: 6, 16, 42;
    --db-sky: #E8EEF6;
    --db-gold: #DCA848;
    --db-blue-state: #1E5BD8;
    --db-green-state: #128A47;

    --bs-font-sans-serif: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --bs-body-color: #1C2433;
    --bs-body-bg: #EEF2F4;
    --bs-border-color: #DFE5EA;
    --bs-border-color-rgb: 223, 229, 234;
    --bs-component-border-color: #DFE5EA;
    --bs-component-border-color-rgb: 223, 229, 234;
    --bs-component-table-border-color: #DFE5EA;

    /* Bootstrap primary is the brand navy, so links, active tabs, selected items and form controls follow it. */
    --bs-primary: #0A1A3A;
    --bs-primary-rgb: 10, 26, 58;
    --bs-primary-bg-subtle: #E8EEF6;
    --bs-primary-border-subtle: #C3CCDB;
    --bs-primary-text-emphasis: #071330;
    --bs-link-color: #0A1A3A;
    --bs-link-color-rgb: 10, 26, 58;
    --bs-link-hover-color: #007A63;
    --bs-link-hover-color-rgb: 0, 122, 99;
    --bs-focus-ring-color: rgba(10, 26, 58, .25);
    --bs-component-active-bg: #0A1A3A;
    --bs-component-active-bg-rgb: 10, 26, 58;

    /* Color Admin theme colour: the main action. btn-theme, bg-theme and text-theme read these.
       A shade darker than the logo green so white button text reaches 4.5:1 (#009B7E gives 3.5:1). */
    --bs-app-theme: #007A63;
    --bs-app-theme-rgb: 0, 122, 99;
    --bs-app-theme-hover: #006B57;
    --bs-app-theme-hover-border-color: #006B57;
    --bs-app-theme-active: #005C4B;
    --bs-app-theme-active-border-color: #005C4B;
    --bs-app-theme-disabled: #7FCDBE;
    --bs-app-theme-disabled-border-color: #7FCDBE;

    --bs-app-header-color: #0A1A3A;
    --bs-app-header-color-rgb: 10, 26, 58;
}

/* ---------- base ---------- */
body.modal-open { overflow: hidden; padding-right: var(--db-scrollbar-gap, 0px); }
body.modal-open .app-header, body.modal-open .app-top-nav { padding-right: var(--db-scrollbar-gap, 0px); }
body.modal-open .call-panel, body.modal-open .toast-container { margin-right: var(--db-scrollbar-gap, 0px); }
.num { font-variant-numeric: tabular-nums; }
.text-alert { color: #B42318 !important; } /* Alarm text: losses, lost calls, late and missing items. */

/* Keyboard focus: one navy outline (white on dark surfaces) for links, buttons, tabs and clickable rows. The template removes the
   default outline on a:focus and gives buttons a pale ring; form controls keep their own ring, set to navy below. */
a:focus-visible, button:focus-visible, summary:focus-visible, tr[tabindex]:focus-visible, .btn:focus-visible, .btn-close:focus-visible, .nav-link:focus-visible, .page-link:focus-visible, .app-header .menu-toggler:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
    box-shadow: none;
}
[data-bs-theme=dark] :focus-visible, .widget-stats :focus-visible { outline-color: #fff; }
.dropdown-item:focus-visible, .page-link:focus-visible, .nav-link:focus-visible, tr[tabindex]:focus-visible { outline-offset: -2px; }
.page-link:focus-visible { z-index: 3; }
.skip-link:focus { z-index: 2000; }
#content:focus { outline: 0; }

/* ---------- buttons ---------- */
/* btn-theme (green) is the main action. Color Admin sets its active state from the disabled variables and leaves its disabled state unset. */
.btn-theme {
    --bs-btn-border-color: var(--bs-app-theme);
    --bs-btn-active-color: var(--bs-app-theme-color);
    --bs-btn-active-bg: var(--bs-app-theme-active);
    --bs-btn-active-border-color: var(--bs-app-theme-active-border-color);
    --bs-btn-disabled-color: var(--bs-app-theme-color);
    --bs-btn-disabled-bg: var(--bs-app-theme);
    --bs-btn-disabled-border-color: var(--bs-app-theme);
}
/* btn-primary (navy) is the structural action; the template hard-codes its blue. */
.btn-primary {
    --bs-btn-bg: var(--db-navy);
    --bs-btn-border-color: var(--db-navy);
    --bs-btn-hover-bg: var(--db-navy-dark);
    --bs-btn-hover-border-color: var(--db-navy-dark);
    --bs-btn-focus-shadow-rgb: var(--db-navy-rgb);
    --bs-btn-active-bg: var(--db-navy-active);
    --bs-btn-active-border-color: var(--db-navy-active);
    --bs-btn-disabled-bg: var(--db-navy);
    --bs-btn-disabled-border-color: var(--db-navy);
}
.btn-outline-primary {
    --bs-btn-color: var(--db-navy);
    --bs-btn-border-color: var(--db-navy);
    --bs-btn-hover-bg: var(--db-navy);
    --bs-btn-hover-border-color: var(--db-navy);
    --bs-btn-focus-shadow-rgb: var(--db-navy-rgb);
    --bs-btn-active-bg: var(--db-navy);
    --bs-btn-active-border-color: var(--db-navy);
    --bs-btn-disabled-color: var(--db-navy);
    --bs-btn-disabled-border-color: var(--db-navy);
}
.btn-link {
    --bs-btn-color: var(--db-navy);
    --bs-btn-hover-color: var(--db-green-dark);
    --bs-btn-active-color: var(--db-green-dark);
    --bs-btn-focus-shadow-rgb: var(--db-navy-rgb);
}

/* ---------- form controls: the template hard-codes its blue focus ring and checked colour ---------- */
.form-control:focus, .form-select:focus, .form-check-input:focus { border-color: var(--bs-primary); box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .25); }
.form-check-input:checked, .form-check-input[type=checkbox]:indeterminate { background-color: var(--bs-primary); border-color: var(--bs-primary); }
.form-switch .form-check-input:focus:not(:checked) { --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%230A1A3A'/%3e%3c/svg%3e"); }
.progress { --bs-progress-bar-bg: var(--bs-primary); }
/* Color Admin fades inactive tabs to 50%, which fails AA on white. */
.nav-tabs { --bs-nav-link-color: rgba(var(--bs-component-color-rgb), .75); scrollbar-width: thin; }

/* ---------- header ---------- */
.app-header .brand { width: auto; }
.app-header .refs-toggle .menu-link { height: 40px; padding: 0 .75rem; border-radius: .5rem; }
.app-header .refs-toggle.active .menu-link { background: rgba(var(--bs-primary-rgb), .12); color: var(--bs-primary); }
.app-header .brand .brand-logo { display: flex; }
.app-header .brand .brand-logo img { height: 36px; width: auto; }
.dropdown-alerts { width: 22rem; max-width: calc(100vw - 1rem); }
.dropdown-users { width: 20rem; max-width: calc(100vw - 1rem); }
.dropdown-menu { --bs-dropdown-header-color: var(--bs-secondary-color); max-height: calc(100vh - 5rem); max-height: calc(100dvh - 5rem); overflow-y: auto; }
.dropdown-menu .dropdown-header { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }

/* ---------- top menu: Color Admin top nav in its dark scope, on the brand navy ---------- */
.app-top-nav[data-bs-theme=dark] {
    --bs-app-top-nav-bg: var(--db-navy);
    --bs-app-top-nav-menu-submenu-bg: var(--db-navy-dark);
    --bs-app-sidebar-menu-link-color: rgba(255, 255, 255, .85);
    --bs-app-sidebar-menu-link-hover-color: #fff;
    --bs-app-sidebar-menu-submenu-link-color: rgba(255, 255, 255, .85);
    --bs-app-sidebar-menu-submenu-link-hover-color: #fff;
    --bs-app-sidebar-menu-badge-bg: var(--bs-app-theme);
    --bs-app-sidebar-menu-badge-color: #fff;
}
.app-top-nav .menu .menu-item.active > .menu-link .menu-icon { color: inherit; }
/* The template leaves each top item 45.6px high in a 50px bar, so the buttons sat 4px above centre. */
.app-top-nav .menu { align-items: stretch; height: 50px; }
.app-top-nav .menu > .menu-item { display: flex; padding: .35rem .15rem; }
.app-top-nav .menu > .menu-item > .menu-link { flex: 1; align-items: center; }
.app-top-nav .menu .menu-submenu { overflow-y: auto; overflow-x: hidden; }
/* The submenu opens .3rem below the item, so a slow move down left the hover; this strip bridges the gap. */
.app-top-nav .menu > .menu-item.has-sub::after { content: ""; position: absolute; inset-inline: 0; top: 100%; height: .5rem; }
.app-top-nav .menu .menu-submenu .menu-link { align-items: flex-start; padding-top: .45rem; padding-bottom: .45rem; }
.app-top-nav .menu .menu-submenu .menu-link i { margin-top: .2rem; }
.app-top-nav .menu .menu-submenu .menu-link .menu-text { white-space: normal; min-width: 0; }
.app-top-nav .menu .menu-submenu .menu-hint { display: block; font-size: 11px; font-weight: 400; opacity: .7; }
.app-top-nav .menu .menu-submenu .menu-badge { margin-inline-start: auto; }
/* The template only opens a submenu on hover; keyboard focus opens it too. */
.app-top-nav .menu > .menu-item.has-sub:has(:focus-visible) > .menu-submenu { display: block; }

/* Between 1024 and 1279px the seven items fit with a little less padding, even with a three digit Jobs badge. */
@media (min-width: 1024px) and (max-width: 1279.98px) {
    .app-top-nav .menu { gap: .25rem; padding: 0 .5rem; }
    .app-top-nav .menu > .menu-item > .menu-link { padding-inline: .6rem; gap: .5rem; }
    .app-top-nav .menu > .menu-item > .menu-link .menu-text { gap: .5rem; }
}

/* Below 1024px the menu lives in the drawer. The template switches at 768px and leaves 768 to 991px with a menu that is fixed over the page and clipped. */
@media (max-width: 1023.98px) {
    .app-top-nav { display: none; }
    .app-with-top-nav.app-header-fixed { padding-top: 3.75rem; }
    .app-header .mobile-toggler { display: block; }
}

/* ---------- mobile drawer: Bootstrap offcanvas ---------- */
.offcanvas .nav { --bs-nav-link-color: rgba(255, 255, 255, .85); --bs-nav-link-hover-color: #fff; }
.offcanvas .nav-link { display: flex; align-items: center; gap: .75rem; padding: .6rem 1.25rem; border-radius: 0; }
.offcanvas .nav-link:hover, .offcanvas .nav-link.active { color: #fff; background: rgba(255, 255, 255, .1); }
.offcanvas .nav-link.active { box-shadow: inset 3px 0 0 var(--bs-app-theme); }
.offcanvas .nav-group { padding: .75rem 1.25rem .25rem; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: rgba(255, 255, 255, .65); }
.modal-backdrop, .offcanvas-backdrop { --bs-backdrop-bg: var(--db-ink); --bs-backdrop-opacity: .55; }

/* ---------- content ---------- */
.app-without-sidebar .app-content { max-width: 1680px; margin-inline: auto; }

/* KPI tile: widget-stats from Color Admin. The icon floats so text can never run under it. */
.widget-stats .stats-icon { position: static; float: right; width: 2.75rem; height: 2.75rem; margin: 0 0 .25rem .5rem; font-size: 1.75rem; line-height: 2.75rem; }
.widget-stats .stats-info .h4 { color: rgba(var(--bs-white-rgb), .9); }
.widget-stats .stats-info p { overflow-wrap: anywhere; }
.widget-stats.bg-theme { --bs-app-theme-rgb: var(--db-green-dark-rgb); }
.widget-stats.bg-white { color: var(--bs-body-color); box-shadow: inset 0 0 0 1px var(--bs-border-color); }
.widget-stats.bg-white .stats-info .h4 { color: var(--bs-secondary-color); }
.widget-stats.bg-white .stats-icon { color: rgba(var(--bs-primary-rgb), .25); }
.widget-stats.bg-white .stats-link a { background: rgba(var(--bs-primary-rgb), .08); color: var(--bs-primary); }
.widget-stats.bg-white .stats-link a:hover, .widget-stats.bg-white .stats-link a:focus { background: rgba(var(--bs-primary-rgb), .16); color: var(--db-navy-dark); }
.widget-stats.bg-white :focus-visible { outline-color: var(--bs-primary); }
.widget-stats .stats-link a:focus-visible { outline-offset: -3px; }

/* Bootstrap's absolutely positioned helpers (visually-hidden) would otherwise escape the scroll wrapper and widen the page. */
.table-responsive { position: relative; }

/* data-table toolbar: filters passed in the tools slot size to their content. */
.table-tools .form-control, .table-tools .form-select { width: auto; min-width: 150px; }
.table-tools .input-group .form-control { min-width: 0; }

/* ---------- incoming call panel ---------- */
.call-panel { position: fixed; top: 7.75rem; right: 1rem; width: 22.5rem; max-width: calc(100% - 2rem); max-height: calc(100vh - 9rem); max-height: calc(100dvh - 9rem); overflow-y: auto; z-index: 1019; }
@media (max-width: 1023.98px) { .call-panel { top: 4.5rem; max-height: calc(100vh - 6rem); max-height: calc(100dvh - 6rem); } }
.call-ring { animation: dbring 1.2s infinite; }
@keyframes dbring { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-12deg); } 40% { transform: rotate(12deg); } 60% { transform: rotate(-8deg); } }
@media (prefers-reduced-motion: reduce) { .call-ring { animation: none; } }

/* ---------- project helpers with no Color Admin equivalent ---------- */
.dl-grid { display: grid; grid-template-columns: max-content 1fr; gap: .45rem 1rem; margin: 0; }
.dl-grid dt { color: var(--bs-secondary-color); font-weight: 500; }
.dl-grid dd { margin: 0; font-weight: 500; }
.timeline-mini { list-style: none; padding: 0; margin: 0; }
.timeline-mini li { position: relative; padding: 0 0 .9rem 1.25rem; border-left: 2px solid var(--bs-border-color); margin-left: .35rem; }
.timeline-mini li::before { content: ''; position: absolute; left: -6px; top: 3px; width: 10px; height: 10px; border-radius: 50%; background: #fff; border: 2px solid var(--bs-primary); }
.timeline-mini li:last-child { border-left-color: transparent; }
.timeline-mini .when { font-size: 11.5px; color: var(--bs-secondary-color); }
.media-tile { aspect-ratio: 4 / 3; border-radius: .6rem; background: linear-gradient(135deg, #DCE1EE, #F1F3F8); display: flex; align-items: center; justify-content: center; color: #8A93AD; font-size: 1.4rem; position: relative; overflow: hidden; }
.media-tile .cap { position: absolute; left: .4rem; bottom: .35rem; font-size: 10.5px; font-weight: 600; color: #4B5563; background: rgba(255, 255, 255, .85); border-radius: .3rem; padding: 0 .35rem; }
.sig-box { border: 1px dashed var(--bs-border-color); border-radius: .6rem; padding: .6rem .75rem; display: flex; align-items: center; gap: .6rem; }
.sig-box .script { font-family: 'Segoe Script', 'Brush Script MT', cursive; font-size: 1.2rem; color: var(--bs-primary); }
.sticky-top-110 { position: sticky; top: 7.875rem; }
@media (max-width: 1023.98px) { .sticky-top-110 { top: 4.75rem; } }

/* Color Admin underlines links by default; the DrainBrain screens use colour, not underlines, for links. */
a { text-decoration: none; }
/* Pulse for the diary cards still waiting for the day-before check (modules/operations.css). */
@keyframes dbpulse { 0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .6); } 70% { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); } 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); } }

/* KPI tile for losses and failures: a deep red that keeps white text above 4.5:1, so bad news never wears the brand green. */
.widget-stats.bg-alert { background: #B42318; color: #fff; }
.widget-stats.bg-alert .stats-link a { background: rgba(0, 0, 0, .15); color: #fff; }