/*
 * ehs.css — EHS brand overrides and component styles.
 * Loaded after msc.css. Overrides the MSCore brand surface and Bootstrap's
 * semantic token layer. Never edit msc.css directly.
 *
 * Load order: bootstrap.min.css → msc.css → ehs.css
 *
 * Design direction: Industrial / Safety
 *   Base:    Deep navy-charcoal — authority, seriousness
 *   Primary: Steel blue — professional, trustworthy
 *   Accent:  Safety yellow — attention, caution indicators
 *   Warning: Burn orange — findings, open issues
 *   Status colors follow industrial safety conventions (red/orange/green/grey)
 */


/* ── A: EHS design tokens — light (default) ─────────────────────────── */

:root {
    /* Primary — steel blue */
    --color-primary:          #2E6A8E;
    --color-primary-btn:      #255F80;
    --color-primary-light:    #D0E6F0;   /* chip / badge tint */
    --color-primary-bg:       #F2F6FA;   /* cool page wash */

    /* Safety yellow accent */
    --color-accent:           #F5C400;
    --color-accent-dark:      #C9A000;
    --color-accent-light:     #FEF6CC;

    /* Text */
    --color-text-primary:     #1A2535;
    --color-text-secondary:   #64748B;
    --color-text-steel:       #2E6A8E;   /* links, active labels */
    --color-text-navy:        #0F1E2D;   /* headings, section titles */

    /* Secondary — charcoal */
    --color-secondary-btn:    #2D3748;
    --color-secondary-light:  #E2E8F0;

    /* Warning — burn orange (findings, open work items) */
    --color-warning:          #D4580A;
    --color-warning-light:    #FAE0D0;

    /* Status */
    --color-danger:           #B91C1C;
    --color-danger-light:     #FEE2E2;
    --color-success:          #15803D;
    --color-success-light:    #DCFCE7;
    --color-info:             #0369A1;
    --color-info-light:       #E0F2FE;

    /* Surfaces */
    --color-white:            #FFFFFF;   /* card / modal fill */
    --color-background:       #F5F7FA;   /* default page bg */
    --color-background-alt:   #EEF2F7;   /* sidebar, alternate panels */
    --color-surface:          #FFFFFF;   /* input fill, inner card */
    --color-surface-alt:      #F8F9FB;   /* raised surface / hover */
    --color-border:           #D8DFE8;
    --color-divider:          #E8EDF3;

    /* Shadows */
    --shadow-card:            0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-subtle:          0 1px 4px rgba(0, 0, 0, 0.05);

    /* Spacing */
    --spacing-xs:  5px;
    --spacing-sm:  10px;
    --spacing-md:  20px;
    --spacing-lg:  30px;
    --spacing-xl:  40px;

    /* Radius — mode-invariant */
    --radius-sm:   4px;
    --radius-md:   8px;
    --radius-lg:   14px;
    --radius-full: 100px;

    /* EHS Workflow status colors */
    --ehs-status-open:            #D4580A;   /* burn orange */
    --ehs-status-in_progress:     #2E6A8E;   /* steel blue */
    --ehs-status-submitted:       #7B68C8;   /* violet */
    --ehs-status-pending_review:  #B8860B;   /* dark amber */
    --ehs-status-approved:        #15803D;   /* green */
    --ehs-status-rejected:        #B91C1C;   /* red */
    --ehs-status-void:            #6B7280;   /* slate */
    --ehs-status-overdue:         #7F1D1D;   /* dark red */
    --ehs-status-closed:          #15803D;   /* green — alias for approved */
    --ehs-status-draft:           #64748B;   /* muted slate */
    --ehs-status-active:          #2E6A8E;   /* steel blue — alias for in_progress */
    --ehs-status-archived:        #9CA3AF;   /* light grey */

    /* Severity colors (findings, risks) */
    --ehs-severity-critical:   #7F1D1D;
    --ehs-severity-high:       #B91C1C;
    --ehs-severity-medium:     #D4580A;
    --ehs-severity-low:        #B8860B;
    --ehs-severity-negligible: #64748B;

    /* EHS purple — for training, MOC notification types */
    --ehs-color-purple:       #6D57B8;
    --ehs-color-purple-light: #EDE9F9;
}


/* ── B: EHS design tokens — dark overrides ──────────────────────────── */

[data-bs-theme="dark"] {
    /* Primary */
    --color-primary:          #4A8DB0;   /* lighter steel for dark */
    --color-primary-light:    #0F2D3E;
    --color-primary-bg:       #0A1520;

    /* Safety accent */
    --color-accent:           #F5C400;
    --color-accent-light:     #2A2200;

    /* Text */
    --color-text-primary:     #E2E8F0;
    --color-text-secondary:   #8A9AB5;
    --color-text-steel:       #5AABCF;
    --color-text-navy:        #B0C4D8;

    /* Secondary */
    --color-secondary-btn:    #4A5568;
    --color-secondary-light:  #2D3748;

    /* Warning */
    --color-warning:          #E07B3A;
    --color-warning-light:    #2A1500;

    /* Status */
    --color-danger:           #EF4444;
    --color-danger-light:     #2A0000;
    --color-success:          #22C55E;
    --color-success-light:    #001A0A;
    --color-info:             #38BDF8;
    --color-info-light:       #001A26;

    /* Surfaces */
    --color-white:            #1A2233;
    --color-background:       #0D1219;
    --color-background-alt:   #111827;
    --color-surface:          #1A2233;
    --color-surface-alt:      #1E293B;
    --color-border:           #2D3F52;
    --color-divider:          #243347;

    /* Shadows */
    --shadow-card:            0 4px 12px rgba(0, 0, 0, 0.40);
    --shadow-subtle:          0 2px 6px  rgba(0, 0, 0, 0.30);

    /* EHS workflow status — dark adjustments */
    --ehs-status-overdue:     #DC2626;
    --ehs-status-void:        #9CA3AF;
    --ehs-severity-critical:  #DC2626;
    --ehs-color-purple:       #9D87E0;
    --ehs-color-purple-light: #1E1840;
}


/* ── C: MSCore brand surface ─────────────────────────────────────────── */

/* Landing page hero — override MSCore brand tokens for the home page */
.home-page {
    --brand-primary:      #2E6A8E;
    --brand-primary-dark: #1D4E6A;
}

/* MSCore sidebar, mobile toggle, nav pills — read these two tokens */
:root {
    --msc-brand:      #2E6A8E;
    --msc-brand-dark: #1D4E6A;
}


/* ── D: Bootstrap semantic token overrides ───────────────────────────── */

:root,
[data-bs-theme="light"] {
    /* Brand */
    --bs-primary:         var(--color-primary);
    --bs-primary-rgb:     46, 106, 142;

    /* Body */
    --bs-body-bg:         var(--color-background);
    --bs-body-color:      var(--color-text-primary);
    --bs-secondary-color: var(--color-text-secondary);

    /* Borders */
    --bs-border-color:    var(--color-border);

    /* Links */
    --bs-link-color:       var(--color-text-steel);
    --bs-link-hover-color: var(--color-text-navy);

    /* Surfaces — bg-body-tertiary (sidebar, list groups, table stripes) */
    --bs-tertiary-bg:     var(--color-background-alt);

    /* Radius */
    --bs-border-radius:      var(--radius-md);
    --bs-border-radius-sm:   var(--radius-sm);
    --bs-border-radius-lg:   var(--radius-lg);
    --bs-border-radius-pill: var(--radius-full);
    --bs-border-radius-xl:   var(--radius-lg);
    --bs-border-radius-xxl:  var(--radius-lg);
}

[data-bs-theme="dark"] {
    /* Brand */
    --bs-primary:         var(--color-primary);
    --bs-primary-rgb:     74, 141, 176;

    /* Body */
    --bs-body-bg:         var(--color-background);
    --bs-body-color:      var(--color-text-primary);
    --bs-secondary-color: var(--color-text-secondary);

    /* Borders */
    --bs-border-color:    var(--color-border);

    /* Links */
    --bs-link-color:       var(--color-text-steel);
    --bs-link-hover-color: var(--color-text-navy);

    /* Surfaces */
    --bs-tertiary-bg:     var(--color-surface);

    /* Radius */
    --bs-border-radius:      var(--radius-md);
    --bs-border-radius-sm:   var(--radius-sm);
    --bs-border-radius-lg:   var(--radius-lg);
    --bs-border-radius-pill: var(--radius-full);
    --bs-border-radius-xl:   var(--radius-lg);
    --bs-border-radius-xxl:  var(--radius-lg);
}


/* ── E: Button overrides ─────────────────────────────────────────────── */

/* btn-xs — extra-small, one step below btn-sm */
.btn-xs {
    --bs-btn-padding-y:     0.15rem;
    --bs-btn-padding-x:     0.4rem;
    --bs-btn-font-size:     0.7rem;
    --bs-btn-border-radius: var(--radius-sm);
    line-height: 1.4;
}

/* btn-primary: steel blue */
.btn-primary {
    --bs-btn-bg:           var(--color-primary-btn);
    --bs-btn-border-color: var(--color-primary-btn);
    --bs-btn-hover-bg:            #1D5270;
    --bs-btn-hover-border-color:  #1D5270;
    --bs-btn-active-bg:           #174460;
    --bs-btn-active-border-color: #174460;
    --bs-btn-color:        #ffffff;
    --bs-btn-hover-color:  #ffffff;
    --bs-btn-active-color: #ffffff;
}

/* btn-ehs: alias — use where Bootstrap's btn-primary doesn't fit */
.btn-ehs {
    --bs-btn-bg:           var(--color-primary-btn);
    --bs-btn-border-color: var(--color-primary-btn);
    --bs-btn-hover-bg:            #1D5270;
    --bs-btn-hover-border-color:  #1D5270;
    --bs-btn-active-bg:           #174460;
    --bs-btn-active-border-color: #174460;
    --bs-btn-color:        #ffffff;
    --bs-btn-hover-color:  #ffffff;
    --bs-btn-active-color: #ffffff;
    --bs-btn-disabled-bg:           var(--color-primary-btn);
    --bs-btn-disabled-border-color: var(--color-primary-btn);
    --bs-btn-disabled-color: #ffffff;
    --bs-btn-disabled-opacity: 0.65;
}

/* btn-outline-ehs: steel blue outline */
.btn-outline-ehs {
    --bs-btn-color:               var(--color-primary-btn);
    --bs-btn-border-color:        var(--color-primary-btn);
    --bs-btn-hover-bg:            var(--color-primary-btn);
    --bs-btn-hover-border-color:  var(--color-primary-btn);
    --bs-btn-hover-color:         #ffffff;
    --bs-btn-active-bg:           #174460;
    --bs-btn-active-border-color: #174460;
    --bs-btn-active-color:        #ffffff;
    --bs-btn-bg:                  transparent;
    --bs-btn-disabled-color:      var(--color-primary-btn);
    --bs-btn-disabled-border-color: var(--color-primary-btn);
    --bs-btn-disabled-bg:         transparent;
}

/* btn-secondary: charcoal */
.btn-secondary {
    --bs-btn-bg:           var(--color-secondary-btn);
    --bs-btn-border-color: var(--color-secondary-btn);
    --bs-btn-hover-bg:            #1A2535;
    --bs-btn-hover-border-color:  #1A2535;
    --bs-btn-active-bg:           #141D2B;
    --bs-btn-active-border-color: #141D2B;
    --bs-btn-color:        #ffffff;
    --bs-btn-hover-color:  #ffffff;
    --bs-btn-active-color: #ffffff;
}

[data-bs-theme="dark"] .btn-secondary {
    --bs-btn-hover-bg:           #5A6A80;
    --bs-btn-hover-border-color: #5A6A80;
    --bs-btn-active-bg:          #4A5A70;
}

/* btn-warning-ehs: burn orange — for findings, open actions */
.btn-warning-ehs {
    --bs-btn-bg:           var(--color-warning);
    --bs-btn-border-color: var(--color-warning);
    --bs-btn-hover-bg:            #B04A07;
    --bs-btn-hover-border-color:  #B04A07;
    --bs-btn-color:        #ffffff;
    --bs-btn-hover-color:  #ffffff;
    --bs-btn-active-color: #ffffff;
}

/* btn-danger */
.btn-danger {
    --bs-btn-bg:           var(--color-danger);
    --bs-btn-border-color: var(--color-danger);
    --bs-btn-hover-bg:            #991B1B;
    --bs-btn-hover-border-color:  #991B1B;
    --bs-btn-color:        #ffffff;
    --bs-btn-hover-color:  #ffffff;
}


/* ── F: Checkboxes and radios ────────────────────────────────────────── */

.form-check-input:checked {
    background-color: var(--color-primary);
    border-color:     var(--color-primary);
}

.form-check-input[type="checkbox"]:indeterminate {
    background-color: var(--color-primary);
    border-color:     var(--color-primary);
}

.form-check-input:focus {
    border-color: var(--color-primary);
    box-shadow:   0 0 0 0.2rem rgba(46, 106, 142, 0.25);
}


/* ── G: Form controls ────────────────────────────────────────────────── */

[data-bs-theme="light"] { color-scheme: light; }
[data-bs-theme="dark"]  { color-scheme: dark;  }

.form-control,
.form-select {
    background-color: var(--color-surface);
    border-color:     var(--color-border);
    border-radius:    var(--radius-md);
    color:            var(--color-text-primary);
}

/* Autofill override — light */
[data-bs-theme="light"] input:-webkit-autofill,
[data-bs-theme="light"] input:-webkit-autofill:hover,
[data-bs-theme="light"] input:-webkit-autofill:focus,
[data-bs-theme="light"] textarea:-webkit-autofill,
[data-bs-theme="light"] select:-webkit-autofill {
    -webkit-box-shadow:      0 0 0 1000px #FFFFFF inset !important;
    -webkit-text-fill-color: #1A2535 !important;
    caret-color:             #1A2535;
    border-color:            #D8DFE8 !important;
    transition:              background-color 5000s ease-in-out 0s;
}

/* Autofill override — dark */
[data-bs-theme="dark"] input:-webkit-autofill,
[data-bs-theme="dark"] input:-webkit-autofill:hover,
[data-bs-theme="dark"] input:-webkit-autofill:focus,
[data-bs-theme="dark"] textarea:-webkit-autofill,
[data-bs-theme="dark"] select:-webkit-autofill {
    -webkit-box-shadow:      0 0 0 1000px #1A2233 inset !important;
    -webkit-text-fill-color: #E2E8F0 !important;
    caret-color:             #E2E8F0;
    border-color:            #2D3F52 !important;
    transition:              background-color 5000s ease-in-out 0s;
}

.form-control:focus,
.form-select:focus {
    background-color: var(--color-surface);
    border-color:     var(--color-primary);
    border-width:     1.5px;
    box-shadow:       0 0 0 0.2rem rgba(46, 106, 142, 0.20);
    color:            var(--color-text-primary);
}

.form-control::placeholder,
.form-select::placeholder {
    color: var(--color-text-secondary);
}

.form-floating > .form-control,
.form-floating > .form-select {
    border-radius: var(--radius-md);
}

/* Validation */
.form-control.is-invalid,
.form-select.is-invalid {
    border-color: var(--color-danger);
}

.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
    box-shadow: 0 0 0 0.2rem rgba(185, 28, 28, 0.20);
}

/* Input label / error helpers */
.input-label {
    font-size:     0.75rem;
    font-weight:   500;
    color:         var(--color-text-primary);
    margin-bottom: 0.25rem;
}

.input-error {
    font-size:  0.6875rem;
    color:      var(--color-danger);
    margin-top: 0.25rem;
}


/* ── H: Cards ────────────────────────────────────────────────────────── */

.card .list-group-item {
    --bs-list-group-bg: transparent;
}

.card {
    --bs-card-bg:           var(--color-white);
    --bs-card-border-width: 0;
    box-shadow: var(--shadow-card);
}

.ehs-card {
    --bs-card-spacer-y:     var(--spacing-md);
    --bs-card-spacer-x:     var(--spacing-md);
    --bs-card-bg:           var(--color-white);
    --bs-card-border-width: 0;
    box-shadow:    var(--shadow-card);
    border-radius: var(--radius-md);
}

.ehs-card .ehs-card-header {
    background:    var(--color-primary-light);
    padding:       0.625rem var(--spacing-md);
    font-weight:   600;
    font-size:     0.875rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color:         var(--color-text-navy);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}

/* Hazard / alert card — yellow left-border accent */
.ehs-card-hazard {
    border-left: 4px solid var(--color-accent);
}

/* Critical card — red left-border accent */
.ehs-card-critical {
    border-left: 4px solid var(--color-danger);
}


/* ── I: EHS workflow status badges ───────────────────────────────────── */
/*
 * Usage: <span class="ehs-badge ehs-badge-open">Open</span>
 * Each modifier sets the foreground and a tinted background via color-mix().
 */

.ehs-badge {
    display:        inline-flex;
    align-items:    center;
    gap:            0.25rem;
    padding:        0.2em 0.65em;
    border-radius:  var(--radius-full);
    font-size:      0.72rem;
    font-weight:    600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space:    nowrap;
}

.ehs-badge-open {
    background: color-mix(in srgb, var(--ehs-status-open) 15%, transparent);
    color:      var(--ehs-status-open);
}
.ehs-badge-in_progress {
    background: var(--color-primary-light);
    color:      var(--color-primary-btn);
}
.ehs-badge-submitted {
    background: color-mix(in srgb, var(--ehs-status-submitted) 15%, transparent);
    color:      var(--ehs-status-submitted);
}
.ehs-badge-pending_review {
    background: color-mix(in srgb, var(--ehs-status-pending_review) 18%, transparent);
    color:      var(--ehs-status-pending_review);
}
.ehs-badge-approved {
    background: color-mix(in srgb, var(--ehs-status-approved) 15%, transparent);
    color:      var(--ehs-status-approved);
}
.ehs-badge-rejected {
    background: var(--color-danger-light);
    color:      var(--color-danger);
}
.ehs-badge-void {
    background: color-mix(in srgb, var(--ehs-status-void) 15%, transparent);
    color:      var(--ehs-status-void);
}
.ehs-badge-overdue {
    background: var(--color-danger-light);
    color:      var(--ehs-status-overdue);
}
.ehs-badge-closed {
    background: color-mix(in srgb, var(--ehs-status-closed) 15%, transparent);
    color:      var(--ehs-status-closed);
}
.ehs-badge-draft {
    background: color-mix(in srgb, var(--ehs-status-draft) 15%, transparent);
    color:      var(--ehs-status-draft);
}
.ehs-badge-active {
    background: var(--color-primary-light);
    color:      var(--color-primary-btn);
}
.ehs-badge-archived {
    background: color-mix(in srgb, var(--ehs-status-archived) 15%, transparent);
    color:      var(--ehs-status-archived);
}


/* ── J: Severity badges ──────────────────────────────────────────────── */

.ehs-severity {
    display:        inline-flex;
    align-items:    center;
    gap:            0.25rem;
    padding:        0.2em 0.65em;
    border-radius:  var(--radius-sm);
    font-size:      0.72rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space:    nowrap;
}

.ehs-severity-critical {
    background: color-mix(in srgb, var(--ehs-severity-critical) 15%, transparent);
    color:      var(--ehs-severity-critical);
    border:     1px solid var(--ehs-severity-critical);
}
.ehs-severity-high {
    background: var(--color-danger-light);
    color:      var(--ehs-severity-high);
}
.ehs-severity-medium {
    background: var(--color-warning-light);
    color:      var(--ehs-severity-medium);
}
.ehs-severity-low {
    background: color-mix(in srgb, var(--ehs-severity-low) 15%, transparent);
    color:      var(--ehs-severity-low);
}
.ehs-severity-negligible {
    background: color-mix(in srgb, var(--ehs-severity-negligible) 12%, transparent);
    color:      var(--ehs-severity-negligible);
}


/* ── K: General-purpose badge chips ─────────────────────────────────── */

.badge-primary {
    background:    var(--color-primary-light);
    color:         var(--color-primary-btn);
    border-radius: var(--radius-full);
    padding:       0.2em 0.65em;
    font-size:     0.75rem;
    font-weight:   600;
}
.badge-warning {
    background:    var(--color-warning-light);
    color:         var(--color-warning);
    border-radius: var(--radius-full);
    padding:       0.2em 0.65em;
    font-size:     0.75rem;
    font-weight:   600;
}
.badge-danger {
    background:    var(--color-danger-light);
    color:         var(--color-danger);
    border-radius: var(--radius-full);
    padding:       0.2em 0.65em;
    font-size:     0.75rem;
    font-weight:   600;
}
.badge-success {
    background:    var(--color-success-light);
    color:         var(--color-success);
    border-radius: var(--radius-full);
    padding:       0.2em 0.65em;
    font-size:     0.75rem;
    font-weight:   600;
}
.badge-purple {
    background:    var(--ehs-color-purple-light);
    color:         var(--ehs-color-purple);
    border-radius: var(--radius-full);
    padding:       0.2em 0.65em;
    font-size:     0.75rem;
    font-weight:   600;
}
.badge-accent {
    background:    var(--color-accent-light);
    color:         var(--color-accent-dark);
    border-radius: var(--radius-full);
    padding:       0.2em 0.65em;
    font-size:     0.75rem;
    font-weight:   600;
}


/* ── L: Section heading ──────────────────────────────────────────────── */

.ehs-section-title {
    font-size:      0.75rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color:          var(--color-text-secondary);
    margin-bottom:  var(--spacing-sm);
}

.ehs-page-title {
    font-size:     1.25rem;
    font-weight:   700;
    color:         var(--color-text-navy);
    margin-bottom: var(--spacing-md);
}


/* ── M: Divider ──────────────────────────────────────────────────────── */

.ehs-divider {
    border:     none;
    border-top: 1px solid var(--color-divider);
    margin:     var(--spacing-md) 0;
}


/* ── N: Spinners ─────────────────────────────────────────────────────── */

.spinner-border,
.spinner-grow {
    color: var(--color-primary);
}


/* ── O: HTMX request indicator ───────────────────────────────────────── */

.ehs-btn-spinner { display: none; }
.htmx-request .ehs-btn-spinner { display: inline-block; }
.htmx-request .ehs-btn-text    { display: none; }


/* ── P: Typography utilities ─────────────────────────────────────────── */

.ehs-text-header {
    font-size:   1.125rem;
    font-weight: 700;
    color:       var(--color-text-primary);
}
.ehs-text-subheader {
    font-size:   0.9375rem;
    font-weight: 600;
    color:       var(--color-text-primary);
}
.ehs-text-body {
    font-size: 0.875rem;
    color:     var(--color-text-primary);
}
.ehs-text-body-secondary {
    font-size: 0.875rem;
    color:     var(--color-text-secondary);
}
.ehs-text-small {
    font-size: 0.75rem;
    color:     var(--color-text-secondary);
}
.ehs-text-label {
    font-size:   0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color:       var(--color-text-secondary);
}
.ehs-text-link {
    color:           var(--color-text-steel);
    text-decoration: none;
}
.ehs-text-link:hover { color: var(--color-text-navy); }

.ehs-text-navy    { color: var(--color-text-navy); }
.ehs-text-muted   { color: var(--color-text-secondary); }
.ehs-text-accent  { color: var(--color-accent-dark); }
.ehs-text-warning { color: var(--color-warning); }
.ehs-text-danger  { color: var(--color-danger); }
.ehs-text-success { color: var(--color-success); }
.ehs-text-purple  { color: var(--ehs-color-purple); }

/* Bootstrap doesn't define text-purple — add it so notification icon resolver works */
.text-purple { color: var(--ehs-color-purple) !important; }


/* ── Q: Compliance progress bar ─────────────────────────────────────── */
/* Used on inspection summary cards, dashboard KPI widgets. */

.ehs-progress {
    height:        8px;
    border-radius: var(--radius-full);
    background:    var(--color-background-alt);
    overflow:      hidden;
}

.ehs-progress-bar {
    height:        100%;
    border-radius: var(--radius-full);
    background:    var(--color-primary);
    transition:    width 0.4s ease;
}

.ehs-progress-bar.overdue   { background: var(--color-danger); }
.ehs-progress-bar.warning   { background: var(--color-warning); }
.ehs-progress-bar.complete  { background: var(--color-success); }


/* ── R: KPI metric tile ──────────────────────────────────────────────── */
/* Dashboard summary tiles for compliance counts. */

.ehs-kpi {
    padding:       var(--spacing-md);
    background:    var(--color-white);
    border-radius: var(--radius-md);
    box-shadow:    var(--shadow-card);
}

.ehs-kpi-value {
    font-size:   2rem;
    font-weight: 700;
    color:       var(--color-text-navy);
    line-height: 1;
}

.ehs-kpi-label {
    font-size:      0.72rem;
    font-weight:    600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color:          var(--color-text-secondary);
    margin-top:     0.25rem;
}

.ehs-kpi-delta {
    font-size:   0.75rem;
    font-weight: 600;
    margin-top:  0.5rem;
}

.ehs-kpi-delta.positive { color: var(--color-success); }
.ehs-kpi-delta.negative { color: var(--color-danger);  }
.ehs-kpi-delta.neutral  { color: var(--color-text-secondary); }

/* KPI accent bar — thin colored stripe at the top */
.ehs-kpi-accent {
    height:        3px;
    border-radius: var(--radius-full) var(--radius-full) 0 0;
    margin:        calc(-1 * var(--spacing-md)) calc(-1 * var(--spacing-md)) var(--spacing-sm);
    background:    var(--color-primary);
}

.ehs-kpi-accent.warning { background: var(--color-warning); }
.ehs-kpi-accent.danger  { background: var(--color-danger);  }
.ehs-kpi-accent.success { background: var(--color-success); }
.ehs-kpi-accent.accent  { background: var(--color-accent);  }


/* ── S: Inspection / finding list rows ──────────────────────────────── */

.ehs-list-row {
    padding:       0.75rem var(--spacing-md);
    border-bottom: 1px solid var(--color-divider);
    transition:    background 0.12s;
    cursor:        pointer;
}

.ehs-list-row:last-child {
    border-bottom: none;
}

.ehs-list-row:hover {
    background: var(--color-surface-alt);
}

.ehs-list-row.overdue {
    border-left: 3px solid var(--color-danger);
}

.ehs-list-row.due-soon {
    border-left: 3px solid var(--color-accent);
}


/* ── T: Safety yellow accent elements ───────────────────────────────── */
/* Use sparingly — for caution alerts, required-action banners. */

.ehs-alert-caution {
    background:    var(--color-accent-light);
    border:        1px solid var(--color-accent);
    border-left:   4px solid var(--color-accent);
    border-radius: var(--radius-md);
    padding:       0.75rem var(--spacing-md);
    color:         var(--color-text-navy);
    font-size:     0.875rem;
}

.ehs-alert-critical {
    background:    var(--color-danger-light);
    border:        1px solid var(--color-danger);
    border-left:   4px solid var(--color-danger);
    border-radius: var(--radius-md);
    padding:       0.75rem var(--spacing-md);
    color:         var(--color-danger);
    font-size:     0.875rem;
}


/* ── U: Toast ────────────────────────────────────────────────────────── */

.ehs-toast {
    min-width:     300px;
    max-width:     380px;
    border:        1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg);
    box-shadow:    0 8px 24px rgba(0, 0, 0, 0.10);
    background:    var(--bs-body-bg);
}

.ehs-toast-icon {
    color:     var(--color-primary);
    font-size: 1rem;
}

.ehs-toast-body {
    color:       var(--bs-body-color);
    line-height: 1.45;
}


/* ── V: Print overrides ──────────────────────────────────────────────── */
/* Inspection reports and permit records may be printed. */

@media print {
    .ehs-badge,
    .ehs-severity {
        border: 1px solid currentColor;
        background: transparent !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .ehs-kpi {
        box-shadow: none;
        border: 1px solid #D8DFE8;
    }

    .ehs-card {
        box-shadow: none;
        border: 1px solid #D8DFE8;
    }
}