/* ==========================================================================
   Truelove Services — portal design system
   --------------------------------------------------------------------------
   One stylesheet for the whole portal. It sits on top of Bootstrap 5.3 and
   re-tunes Bootstrap's own variables, so existing markup (cards, tables,
   forms, bg-dark, text-light…) picks up the same look everywhere.

   Palette: evergreen ground, bone text, brass for the main action.
   Type:    Cinzel for the nameplate + page titles (echoes the sign logo),
            Atkinson Hyperlegible for everything else (built for legibility,
            which matters on a phone in a truck cab).
   ========================================================================== */

:root {
    /* Core palette */
    --tlc-ground:     #0f1915;   /* sidebar, deepest layer          */
    --tlc-ink:        #14211c;   /* page background                 */
    --tlc-surface:    #1b2b25;   /* cards, panels                   */
    --tlc-surface-2:  #23362f;   /* raised: headers, hovers         */
    --tlc-inset:      #111c18;   /* inputs, wells                   */
    --tlc-line:       #34493f;   /* borders                         */
    --tlc-line-soft:  #283c34;   /* quiet dividers                  */

    --tlc-text:       #ebefe6;   /* bone                            */
    --tlc-muted:      #9db0a5;   /* secondary text                  */
    --tlc-faint:      #6f857a;   /* tertiary / placeholders         */

    --tlc-brass:      #c99b52;   /* primary action, nameplate       */
    --tlc-brass-hi:   #ddb46e;
    --tlc-brass-ink:  #20170a;   /* text on brass                   */

    --tlc-leaf:       #6cba86;   /* success / clocked in            */
    --tlc-ember:      #e07a63;   /* danger                          */
    --tlc-sun:        #ecca5c;   /* warning                         */
    --tlc-sky:        #7aaac8;   /* info                            */

    --tlc-radius-lg:  14px;      /* cards, panels                   */
    --tlc-radius:     9px;       /* buttons, inputs                 */
    --tlc-radius-sm:  6px;       /* nameplate, small chips          */

    --tlc-font:   "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
    --tlc-serif:  "Cinzel", "Trajan Pro", Georgia, serif;

    --tlc-sidebar-w: 268px;
    --tlc-topbar-h:  60px;
}

/* --------------------------------------------------------------------------
   Bootstrap re-tune (dark theme)
   -------------------------------------------------------------------------- */
[data-bs-theme=dark] {
    color-scheme: dark;

    --bs-body-font-family: var(--tlc-font);
    --bs-body-font-size: 1rem;
    --bs-body-line-height: 1.55;
    --bs-body-bg: var(--tlc-ink);
    --bs-body-bg-rgb: 20, 33, 28;
    --bs-body-color: var(--tlc-text);
    --bs-body-color-rgb: 235, 239, 230;
    --bs-emphasis-color: #fff;
    --bs-emphasis-color-rgb: 255, 255, 255;
    --bs-secondary-color: var(--tlc-muted);
    --bs-secondary-color-rgb: 157, 176, 165;
    --bs-tertiary-color: var(--tlc-faint);
    --bs-secondary-bg: var(--tlc-surface-2);
    --bs-tertiary-bg: var(--tlc-surface);
    --bs-tertiary-bg-rgb: 27, 43, 37;
    --bs-heading-color: #fff;
    --bs-border-color: var(--tlc-line);
    --bs-border-color-translucent: rgba(157, 176, 165, .18);
    --bs-border-radius: var(--tlc-radius);
    --bs-border-radius-lg: var(--tlc-radius-lg);
    --bs-border-radius-sm: var(--tlc-radius-sm);

    --bs-link-color: var(--tlc-brass-hi);
    --bs-link-color-rgb: 221, 180, 110;
    --bs-link-hover-color: #f0d099;
    --bs-link-hover-color-rgb: 240, 208, 153;

    --bs-primary: var(--tlc-brass);
    --bs-primary-rgb: 201, 155, 82;
    --bs-success: var(--tlc-leaf);
    --bs-success-rgb: 108, 186, 134;
    --bs-danger: var(--tlc-ember);
    --bs-danger-rgb: 224, 122, 99;
    --bs-warning: var(--tlc-sun);
    --bs-warning-rgb: 236, 202, 92;
    --bs-info: var(--tlc-sky);
    --bs-info-rgb: 122, 170, 200;
    --bs-secondary: #4a6057;
    --bs-secondary-rgb: 74, 96, 87;
    --bs-dark: var(--tlc-surface);
    --bs-dark-rgb: 27, 43, 37;       /* .bg-dark => a card surface, not black */
    --bs-black-rgb: 15, 25, 21;
    --bs-light: var(--tlc-text);
    --bs-light-rgb: 235, 239, 230;
    --bs-white-rgb: 255, 255, 255;

    --bs-primary-text-emphasis: var(--tlc-brass-hi);
    --bs-success-text-emphasis: #93d3a8;
    --bs-danger-text-emphasis: #f0a493;
    --bs-warning-text-emphasis: #f2d987;
    --bs-info-text-emphasis: #a6c9de;
    --bs-primary-bg-subtle: rgba(201, 155, 82, .14);
    --bs-success-bg-subtle: rgba(108, 186, 134, .13);
    --bs-danger-bg-subtle: rgba(224, 122, 99, .14);
    --bs-warning-bg-subtle: rgba(236, 202, 92, .13);
    --bs-info-bg-subtle: rgba(122, 170, 200, .13);
    --bs-secondary-bg-subtle: rgba(157, 176, 165, .1);
    --bs-primary-border-subtle: rgba(201, 155, 82, .4);
    --bs-success-border-subtle: rgba(108, 186, 134, .38);
    --bs-danger-border-subtle: rgba(224, 122, 99, .42);
    --bs-warning-border-subtle: rgba(236, 202, 92, .38);
    --bs-info-border-subtle: rgba(122, 170, 200, .38);
    --bs-secondary-border-subtle: var(--tlc-line);

    --bs-focus-ring-color: rgba(201, 155, 82, .35);
    --bs-form-valid-color: var(--tlc-leaf);
    --bs-form-valid-border-color: var(--tlc-leaf);
    --bs-form-invalid-color: var(--tlc-ember);
    --bs-form-invalid-border-color: var(--tlc-ember);
}

body {
    background: var(--tlc-ink);
    color: var(--tlc-text);
    font-family: var(--tlc-font);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* ---------- Type ---------- */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--tlc-font);
    font-weight: 700;
    letter-spacing: -0.005em;
    line-height: 1.2;
    color: #fff;
}
h1, .h1 { font-size: 1.75rem; }
h2, .h2 { font-size: 1.5rem; }
h3, .h3 { font-size: 1.25rem; }
h4, .h4 { font-size: 1.125rem; }
h5, .h5 { font-size: 1rem; }
h6, .h6 { font-size: .9rem; }

/* The page's main heading reads like the sign out front. */
.page-title,
.tlc-page > h1:first-child,
.tlc-page > h2:first-child,
.tlc-page > .container > h1:first-child,
.tlc-page > .container > h2:first-child,
.tlc-page > .container-fluid > h1:first-child,
.tlc-page > .container-fluid > h2:first-child {
    font-family: var(--tlc-serif);
    font-weight: 600;
    font-size: clamp(1.45rem, 1.1rem + 1.2vw, 2rem);
    letter-spacing: .02em;
    line-height: 1.15;
    color: #fff;
    margin-bottom: 1.25rem;
}

.text-muted, .text-body-secondary { color: var(--tlc-muted) !important; }
.text-secondary { color: var(--tlc-muted) !important; }
.text-light, .text-white { color: var(--tlc-text) !important; }
/* "Dark text" only makes sense on the bright fills (warning/info/success badges and buttons).
   Everywhere else the page is dark, so it falls back to the normal light text color. */
.text-dark, .text-black { color: var(--tlc-text) !important; }
.bg-warning.text-dark, .bg-info.text-dark, .bg-success.text-dark, .bg-primary.text-dark,
.text-bg-warning.text-dark, .text-bg-info.text-dark, .text-bg-success.text-dark, .text-bg-primary.text-dark,
.btn-warning.text-dark, .btn-info.text-dark, .btn-success.text-dark, .btn-primary.text-dark,
.bg-warning .text-dark, .bg-info .text-dark { color: var(--tlc-brass-ink) !important; }
.text-primary { color: var(--tlc-brass-hi) !important; }
small, .small { font-size: .875em; }
code { color: var(--tlc-brass-hi); }
hr { border-color: var(--tlc-line); opacity: 1; }
::selection { background: rgba(201, 155, 82, .35); }

/* ---------- Surfaces ---------- */
.bg-dark   { background-color: var(--tlc-surface) !important; }
.bg-black  { background-color: var(--tlc-ground) !important; }
.bg-secondary { background-color: var(--tlc-surface-2) !important; }
.bg-light, .bg-white { background-color: var(--tlc-surface-2) !important; color: var(--tlc-text) !important; }
.bg-body-tertiary { background-color: var(--tlc-surface) !important; }
.border-secondary, .border-dark, .border-light { border-color: var(--tlc-line) !important; }
.border { border-color: var(--tlc-line) !important; }
.shadow, .shadow-sm, .shadow-lg { box-shadow: 0 1px 0 rgba(255,255,255,.03) inset, 0 8px 24px -16px rgba(0,0,0,.6) !important; }

.card {
    --bs-card-bg: var(--tlc-surface);
    --bs-card-color: var(--tlc-text);
    --bs-card-border-color: var(--tlc-line-soft);
    --bs-card-border-radius: var(--tlc-radius-lg);
    --bs-card-inner-border-radius: calc(var(--tlc-radius-lg) - 1px);
    --bs-card-cap-bg: var(--tlc-surface-2);
    --bs-card-cap-color: #fff;
    --bs-card-cap-padding-y: .8rem;
    --bs-card-cap-padding-x: 1.1rem;
    --bs-card-spacer-x: 1.1rem;
    --bs-card-spacer-y: 1.1rem;
    --bs-card-title-color: #fff;
    box-shadow: none;
}
.card-header { font-weight: 700; border-bottom-color: var(--tlc-line-soft); }
.card-header h1, .card-header h2, .card-header h3, .card-header h4, .card-header h5, .card-header h6 {
    font-size: 1.02rem; margin: 0;
}
.card-footer { background: transparent; border-top-color: var(--tlc-line-soft); }
.card.bg-dark, .card.bg-black, .card.bg-secondary { background-color: var(--tlc-surface) !important; }
.card .card { --bs-card-bg: var(--tlc-surface-2); }

/* ---------- Buttons ---------- */
.btn {
    --bs-btn-font-weight: 700;
    --bs-btn-border-radius: var(--tlc-radius);
    --bs-btn-padding-y: .5rem;
    --bs-btn-padding-x: 1rem;
    --bs-btn-focus-box-shadow: 0 0 0 .2rem rgba(201, 155, 82, .4);
    letter-spacing: .005em;
    transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.btn-sm { --bs-btn-padding-y: .3rem; --bs-btn-padding-x: .65rem; --bs-btn-border-radius: 7px; --bs-btn-font-size: .85rem; }
.btn-lg { --bs-btn-padding-y: .8rem; --bs-btn-padding-x: 1.4rem; --bs-btn-border-radius: 11px; }

.btn-primary {
    --bs-btn-color: var(--tlc-brass-ink); --bs-btn-bg: var(--tlc-brass); --bs-btn-border-color: var(--tlc-brass);
    --bs-btn-hover-color: var(--tlc-brass-ink); --bs-btn-hover-bg: var(--tlc-brass-hi); --bs-btn-hover-border-color: var(--tlc-brass-hi);
    --bs-btn-active-color: var(--tlc-brass-ink); --bs-btn-active-bg: #b8883f; --bs-btn-active-border-color: #b8883f;
    --bs-btn-disabled-color: var(--tlc-brass-ink); --bs-btn-disabled-bg: var(--tlc-brass); --bs-btn-disabled-border-color: var(--tlc-brass);
}
.btn-success {
    --bs-btn-color: #0d2316; --bs-btn-bg: var(--tlc-leaf); --bs-btn-border-color: var(--tlc-leaf);
    --bs-btn-hover-color: #0d2316; --bs-btn-hover-bg: #84cb9b; --bs-btn-hover-border-color: #84cb9b;
    --bs-btn-active-color: #0d2316; --bs-btn-active-bg: #5aa874; --bs-btn-active-border-color: #5aa874;
    --bs-btn-disabled-color: #0d2316; --bs-btn-disabled-bg: var(--tlc-leaf); --bs-btn-disabled-border-color: var(--tlc-leaf);
}
.btn-danger {
    --bs-btn-color: #2a0e07; --bs-btn-bg: var(--tlc-ember); --bs-btn-border-color: var(--tlc-ember);
    --bs-btn-hover-color: #2a0e07; --bs-btn-hover-bg: #ec917c; --bs-btn-hover-border-color: #ec917c;
    --bs-btn-active-color: #2a0e07; --bs-btn-active-bg: #cf6650; --bs-btn-active-border-color: #cf6650;
    --bs-btn-disabled-color: #2a0e07; --bs-btn-disabled-bg: var(--tlc-ember); --bs-btn-disabled-border-color: var(--tlc-ember);
}
.btn-warning {
    --bs-btn-color: #2a2006; --bs-btn-bg: var(--tlc-sun); --bs-btn-border-color: var(--tlc-sun);
    --bs-btn-hover-color: #2a2006; --bs-btn-hover-bg: #f3d77c; --bs-btn-hover-border-color: #f3d77c;
    --bs-btn-active-color: #2a2006; --bs-btn-active-bg: #dcb946; --bs-btn-active-border-color: #dcb946;
}
.btn-info {
    --bs-btn-color: #0b1d28; --bs-btn-bg: var(--tlc-sky); --bs-btn-border-color: var(--tlc-sky);
    --bs-btn-hover-color: #0b1d28; --bs-btn-hover-bg: #95bcd5; --bs-btn-hover-border-color: #95bcd5;
    --bs-btn-active-color: #0b1d28; --bs-btn-active-bg: #6898b6; --bs-btn-active-border-color: #6898b6;
}
.btn-secondary, .btn-dark, .btn-light {
    --bs-btn-color: var(--tlc-text); --bs-btn-bg: var(--tlc-surface-2); --bs-btn-border-color: var(--tlc-line);
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #2c4239; --bs-btn-hover-border-color: #46604f;
    --bs-btn-active-color: #fff; --bs-btn-active-bg: #2c4239; --bs-btn-active-border-color: #46604f;
    --bs-btn-disabled-color: var(--tlc-muted); --bs-btn-disabled-bg: var(--tlc-surface-2); --bs-btn-disabled-border-color: var(--tlc-line);
}
.btn-outline-secondary, .btn-outline-light, .btn-outline-dark {
    --bs-btn-color: var(--tlc-text); --bs-btn-border-color: var(--tlc-line); --bs-btn-bg: transparent;
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--tlc-surface-2); --bs-btn-hover-border-color: #4a6358;
    --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--tlc-surface-2); --bs-btn-active-border-color: #4a6358;
    --bs-btn-disabled-color: var(--tlc-faint); --bs-btn-disabled-border-color: var(--tlc-line-soft);
}
.btn-outline-primary {
    --bs-btn-color: var(--tlc-brass-hi); --bs-btn-border-color: rgba(201,155,82,.55);
    --bs-btn-hover-color: var(--tlc-brass-ink); --bs-btn-hover-bg: var(--tlc-brass); --bs-btn-hover-border-color: var(--tlc-brass);
    --bs-btn-active-color: var(--tlc-brass-ink); --bs-btn-active-bg: var(--tlc-brass); --bs-btn-active-border-color: var(--tlc-brass);
}
.btn-outline-success {
    --bs-btn-color: #93d3a8; --bs-btn-border-color: rgba(108,186,134,.55);
    --bs-btn-hover-color: #0d2316; --bs-btn-hover-bg: var(--tlc-leaf); --bs-btn-hover-border-color: var(--tlc-leaf);
    --bs-btn-active-color: #0d2316; --bs-btn-active-bg: var(--tlc-leaf); --bs-btn-active-border-color: var(--tlc-leaf);
}
.btn-outline-danger {
    --bs-btn-color: #f0a493; --bs-btn-border-color: rgba(224,122,99,.55);
    --bs-btn-hover-color: #2a0e07; --bs-btn-hover-bg: var(--tlc-ember); --bs-btn-hover-border-color: var(--tlc-ember);
    --bs-btn-active-color: #2a0e07; --bs-btn-active-bg: var(--tlc-ember); --bs-btn-active-border-color: var(--tlc-ember);
}
.btn-outline-warning {
    --bs-btn-color: #f2d987; --bs-btn-border-color: rgba(236,202,92,.5);
    --bs-btn-hover-color: #2a2006; --bs-btn-hover-bg: var(--tlc-sun); --bs-btn-hover-border-color: var(--tlc-sun);
    --bs-btn-active-color: #2a2006; --bs-btn-active-bg: var(--tlc-sun); --bs-btn-active-border-color: var(--tlc-sun);
}
.btn-outline-info {
    --bs-btn-color: #a6c9de; --bs-btn-border-color: rgba(122,170,200,.5);
    --bs-btn-hover-color: #0b1d28; --bs-btn-hover-bg: var(--tlc-sky); --bs-btn-hover-border-color: var(--tlc-sky);
}
.btn-link { --bs-btn-color: var(--tlc-brass-hi); --bs-btn-hover-color: #f0d099; font-weight: 700; }
.btn-close { filter: invert(1) grayscale(1) brightness(1.6); }

/* ---------- Forms ---------- */
.form-control, .form-select {
    background-color: var(--tlc-inset);
    border-color: var(--tlc-line);
    color: var(--tlc-text);
    border-radius: var(--tlc-radius);
    padding: .55rem .8rem;
}
.form-control-sm, .form-select-sm { padding: .35rem .6rem; border-radius: 7px; }
.form-control-lg, .form-select-lg { padding: .75rem 1rem; border-radius: 11px; }
.form-control::placeholder { color: var(--tlc-faint); opacity: 1; }
.form-control:focus, .form-select:focus {
    background-color: var(--tlc-inset);
    border-color: var(--tlc-brass);
    color: #fff;
    box-shadow: 0 0 0 .2rem rgba(201, 155, 82, .25);
}
.form-control:disabled, .form-control[readonly], .form-select:disabled {
    background-color: var(--tlc-surface-2);
    color: var(--tlc-muted);
}
.form-control.bg-dark, .form-select.bg-dark, .form-control.bg-secondary { background-color: var(--tlc-inset) !important; }
.form-label, .col-form-label { font-weight: 700; font-size: .9rem; color: var(--tlc-text); margin-bottom: .35rem; }
.form-text { color: var(--tlc-muted); }
.form-check-input { background-color: var(--tlc-inset); border-color: #4a6358; }
.form-check-input:checked { background-color: var(--tlc-brass); border-color: var(--tlc-brass); }
.form-check-input:focus { box-shadow: 0 0 0 .2rem rgba(201, 155, 82, .25); border-color: var(--tlc-brass); }
.form-switch .form-check-input:checked { background-color: var(--tlc-leaf); border-color: var(--tlc-leaf); }
.input-group-text { background: var(--tlc-surface-2); border-color: var(--tlc-line); color: var(--tlc-muted); }
input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"] { color-scheme: dark; }

/* ---------- Tables ---------- */
.table, .table-dark {
    --bs-table-color: var(--tlc-text);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--tlc-line-soft);
    --bs-table-striped-color: var(--tlc-text);
    --bs-table-striped-bg: rgba(235, 239, 230, .025);
    --bs-table-hover-color: #fff;
    --bs-table-hover-bg: rgba(201, 155, 82, .07);
    --bs-table-active-bg: rgba(201, 155, 82, .1);
    --bs-table-active-color: #fff;
    border-color: var(--tlc-line-soft);
    margin-bottom: 0;
}
.table-light, .table-secondary {
    --bs-table-color: var(--tlc-text);
    --bs-table-bg: var(--tlc-surface-2);
    --bs-table-border-color: var(--tlc-line);
}
.table > :not(caption) > * > * { padding: .7rem .8rem; }
.table-sm > :not(caption) > * > * { padding: .4rem .55rem; }
.table > thead > tr > th, .table > thead > tr > td {
    background: var(--tlc-surface-2);
    color: var(--tlc-muted);
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .01em;
    border-bottom: 1px solid var(--tlc-line);
    white-space: nowrap;
}
.table > thead > tr > th:first-child { border-top-left-radius: 8px; }
.table > thead > tr > th:last-child  { border-top-right-radius: 8px; }
.table-bordered > :not(caption) > * > * { border-color: var(--tlc-line-soft); }
.table-responsive {
    border: 1px solid var(--tlc-line-soft);
    border-radius: var(--tlc-radius-lg);
    background: var(--tlc-surface);
    margin-bottom: 1.25rem;
}
.table-responsive > .table > thead > tr > th { border-radius: 0; }
.card .table-responsive { border: 0; background: transparent; border-radius: 0; margin-bottom: 0; }

/* A table sitting straight on the page gets the panel treatment too */
.tlc-page > .table, .tlc-page > .container > .table, .tab-pane > .table, .panel-section > .table {
    background: var(--tlc-surface);
    border-radius: var(--tlc-radius-lg);
    overflow: hidden;
    border: 1px solid var(--tlc-line-soft);
    margin-bottom: 1.25rem;
}

/* ---------- Alerts, badges, lists ---------- */
.alert {
    --bs-alert-border-radius: var(--tlc-radius);
    border-left-width: 4px;
    padding: .8rem 1rem;
}
.alert-primary   { --bs-alert-color: var(--bs-primary-text-emphasis); --bs-alert-bg: var(--bs-primary-bg-subtle); --bs-alert-border-color: var(--bs-primary-border-subtle); }
.alert-success   { --bs-alert-color: var(--bs-success-text-emphasis); --bs-alert-bg: var(--bs-success-bg-subtle); --bs-alert-border-color: var(--bs-success-border-subtle); }
.alert-danger    { --bs-alert-color: var(--bs-danger-text-emphasis);  --bs-alert-bg: var(--bs-danger-bg-subtle);  --bs-alert-border-color: var(--bs-danger-border-subtle); }
.alert-warning   { --bs-alert-color: var(--bs-warning-text-emphasis); --bs-alert-bg: var(--bs-warning-bg-subtle); --bs-alert-border-color: var(--bs-warning-border-subtle); }
.alert-info      { --bs-alert-color: var(--bs-info-text-emphasis);    --bs-alert-bg: var(--bs-info-bg-subtle);    --bs-alert-border-color: var(--bs-info-border-subtle); }
.alert-secondary, .alert-light, .alert-dark { --bs-alert-color: var(--tlc-text); --bs-alert-bg: var(--tlc-surface-2); --bs-alert-border-color: var(--tlc-line); }
.alert .alert-link { color: inherit; }

.badge { font-weight: 700; letter-spacing: .01em; padding: .38em .62em; border-radius: 999px; }
.badge.bg-primary  { color: var(--tlc-brass-ink) !important; }
.badge.bg-success  { color: #0d2316 !important; }
.badge.bg-warning  { color: #2a2006 !important; }
.badge.bg-info     { color: #0b1d28 !important; }
.badge.bg-danger   { color: #2a0e07 !important; }
.badge.bg-secondary, .badge.bg-dark, .badge.bg-light { color: var(--tlc-text) !important; background: var(--tlc-surface-2) !important; border: 1px solid var(--tlc-line); }

.list-group {
    --bs-list-group-bg: var(--tlc-surface);
    --bs-list-group-color: var(--tlc-text);
    --bs-list-group-border-color: var(--tlc-line-soft);
    --bs-list-group-border-radius: var(--tlc-radius-lg);
    --bs-list-group-action-hover-bg: var(--tlc-surface-2);
    --bs-list-group-action-hover-color: #fff;
    --bs-list-group-active-bg: var(--tlc-brass);
    --bs-list-group-active-border-color: var(--tlc-brass);
    --bs-list-group-active-color: var(--tlc-brass-ink);
}
.list-group-item.bg-dark, .list-group-item.bg-secondary { background: var(--tlc-surface) !important; }

/* ---------- Tabs & pills: one look everywhere ---------- */
.nav-tabs {
    --bs-nav-tabs-border-color: var(--tlc-line);
    --bs-nav-tabs-link-hover-border-color: transparent;
    --bs-nav-tabs-link-active-color: #fff;
    --bs-nav-tabs-link-active-bg: transparent;
    --bs-nav-tabs-link-active-border-color: transparent;
    gap: .25rem;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
}
.nav-tabs .nav-link {
    color: var(--tlc-muted);
    font-weight: 700;
    border: 0;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    padding: .6rem .9rem;
    white-space: nowrap;
}
.nav-tabs .nav-link:hover { color: #fff; }
.nav-tabs .nav-link.active { color: #fff; border-bottom-color: var(--tlc-brass); background: transparent; }
.nav-pills {
    --bs-nav-pills-border-radius: 999px;
    --bs-nav-pills-link-active-bg: var(--tlc-brass);
    --bs-nav-pills-link-active-color: var(--tlc-brass-ink);
    gap: .35rem;
}
.nav-pills .nav-link { color: var(--tlc-muted); font-weight: 700; padding: .4rem .9rem; }
.nav-pills .nav-link:hover { color: #fff; background: var(--tlc-surface-2); }
.nav-link { color: var(--tlc-brass-hi); }

/* ---------- Overlays ---------- */
.modal {
    --bs-modal-bg: var(--tlc-surface);
    --bs-modal-color: var(--tlc-text);
    --bs-modal-border-color: var(--tlc-line);
    --bs-modal-border-radius: var(--tlc-radius-lg);
    --bs-modal-header-border-color: var(--tlc-line-soft);
    --bs-modal-footer-border-color: var(--tlc-line-soft);
}
.modal-content.bg-dark { background: var(--tlc-surface) !important; }
.dropdown-menu {
    --bs-dropdown-bg: var(--tlc-surface-2);
    --bs-dropdown-border-color: var(--tlc-line);
    --bs-dropdown-link-color: var(--tlc-text);
    --bs-dropdown-link-hover-bg: #2c4239;
    --bs-dropdown-link-hover-color: #fff;
    --bs-dropdown-link-active-bg: var(--tlc-brass);
    --bs-dropdown-link-active-color: var(--tlc-brass-ink);
}
.accordion {
    --bs-accordion-bg: var(--tlc-surface);
    --bs-accordion-color: var(--tlc-text);
    --bs-accordion-btn-color: var(--tlc-text);
    --bs-accordion-border-color: var(--tlc-line-soft);
    --bs-accordion-border-radius: var(--tlc-radius-lg);
    --bs-accordion-inner-border-radius: calc(var(--tlc-radius-lg) - 1px);
    --bs-accordion-button-active-bg: var(--tlc-surface-2);
    --bs-accordion-button-active-color: #fff;
    --bs-accordion-btn-focus-box-shadow: 0 0 0 .2rem rgba(201,155,82,.25);
}
.progress { --bs-progress-bg: var(--tlc-inset); --bs-progress-bar-bg: var(--tlc-brass); }
.pagination {
    --bs-pagination-bg: var(--tlc-surface); --bs-pagination-border-color: var(--tlc-line); --bs-pagination-color: var(--tlc-text);
    --bs-pagination-hover-bg: var(--tlc-surface-2); --bs-pagination-hover-color: #fff; --bs-pagination-hover-border-color: var(--tlc-line);
    --bs-pagination-active-bg: var(--tlc-brass); --bs-pagination-active-border-color: var(--tlc-brass); --bs-pagination-active-color: var(--tlc-brass-ink);
    --bs-pagination-disabled-bg: var(--tlc-surface); --bs-pagination-disabled-border-color: var(--tlc-line-soft);
}

:focus-visible { outline: 2px solid var(--tlc-brass-hi); outline-offset: 2px; }
.btn:focus-visible, .form-control:focus-visible, .form-select:focus-visible { outline: none; }

/* ==========================================================================
   App shell
   ========================================================================== */
.tlc-skip {
    position: absolute; left: -999px; top: .5rem; z-index: 3000;
    background: var(--tlc-brass); color: var(--tlc-brass-ink); padding: .5rem .9rem; border-radius: var(--tlc-radius); font-weight: 700;
}
.tlc-skip:focus { left: .5rem; }

.tlc-app {
    display: grid;
    grid-template-columns: var(--tlc-sidebar-w) minmax(0, 1fr);
    min-height: 100vh;
    min-height: 100dvh;
    background: linear-gradient(to right, var(--tlc-ground) var(--tlc-sidebar-w), transparent var(--tlc-sidebar-w));
}

/* ---------- Sidebar ---------- */
.tlc-sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--tlc-ground);
    border-right: 1px solid var(--tlc-line-soft);
    padding: 1.1rem .85rem .85rem;
    overflow: hidden;
}

/* The nameplate: a small version of the sign logo, double rule and all. */
.tlc-plaque {
    display: block;
    text-align: center;
    text-decoration: none;
    color: var(--tlc-text);
    padding: .85rem .75rem .7rem;
    margin: 0 .2rem 1rem;
    border: 1px solid rgba(201, 155, 82, .7);
    border-radius: var(--tlc-radius-sm);
    box-shadow: inset 0 0 0 3px var(--tlc-ground), inset 0 0 0 4px rgba(201, 155, 82, .45);
    background:
        linear-gradient(180deg, rgba(201,155,82,.06), rgba(201,155,82,0) 70%),
        var(--tlc-ground);
    transition: border-color .15s ease;
}
.tlc-plaque:hover { color: #fff; border-color: var(--tlc-brass-hi); }
.tlc-plaque-name {
    display: block;
    font-family: var(--tlc-serif);
    font-weight: 600;
    font-size: 1.22rem;
    line-height: 1.08;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #f4efe2;
}
.tlc-plaque-rule {
    display: block;
    height: 1px;
    margin: .5rem auto .4rem;
    width: 82%;
    background: linear-gradient(90deg, transparent, rgba(201,155,82,.8), transparent);
}
.tlc-plaque-tag {
    display: block;
    font-size: .72rem;
    font-weight: 700;
    color: var(--tlc-brass-hi);
    letter-spacing: .01em;
}

.tlc-nav {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    margin: 0 -.35rem;
    padding: 0 .35rem .5rem;
    scrollbar-width: thin;
    scrollbar-color: var(--tlc-line) transparent;
}

.tlc-nav-link {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .5rem .65rem;
    margin: 1px 0;
    border-radius: 8px;
    color: #c4d1c9;
    text-decoration: none;
    font-size: .92rem;
    line-height: 1.25;
    position: relative;
}
.tlc-nav-link i { font-size: 1rem; width: 1.15rem; text-align: center; color: var(--tlc-faint); flex-shrink: 0; }
.tlc-nav-link:hover { background: rgba(235, 239, 230, .05); color: #fff; }
.tlc-nav-link:hover i { color: var(--tlc-muted); }
.tlc-nav-link.is-active {
    background: var(--tlc-surface-2);
    color: #fff;
    font-weight: 700;
}
.tlc-nav-link.is-active::before {
    content: "";
    position: absolute;
    left: -.35rem; top: .45rem; bottom: .45rem;
    width: 3px;
    border-radius: 3px;
    background: var(--tlc-brass);
}
.tlc-nav-link.is-active i { color: var(--tlc-brass-hi); }
.tlc-nav-home { margin-bottom: .35rem; }

.tlc-nav-group { margin-top: .15rem; }
.tlc-nav-group > summary {
    list-style: none;
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .55rem .65rem;
    border-radius: 8px;
    cursor: pointer;
    color: var(--tlc-muted);
    font-weight: 700;
    font-size: .86rem;
    user-select: none;
}
.tlc-nav-group > summary::-webkit-details-marker { display: none; }
.tlc-nav-group > summary > i:first-child { width: 1.15rem; text-align: center; color: var(--tlc-faint); }
.tlc-nav-group > summary:hover { color: #fff; background: rgba(235, 239, 230, .04); }
.tlc-nav-group[open] > summary { color: var(--tlc-text); }
.tlc-nav-count {
    margin-left: auto;
    font-size: .72rem;
    color: var(--tlc-faint);
    font-weight: 700;
}
.tlc-nav-caret { font-size: .7rem; color: var(--tlc-faint); transition: transform .15s ease; }
.tlc-nav-group[open] .tlc-nav-caret { transform: rotate(180deg); }
.tlc-nav-items {
    margin: .1rem 0 .4rem .95rem;
    padding-left: .55rem;
    border-left: 1px solid var(--tlc-line-soft);
}
.tlc-nav-items .tlc-nav-link { font-size: .9rem; padding: .42rem .6rem; }
.tlc-nav-items .tlc-nav-link.is-active::before { left: calc(-.55rem - 2px); }

.tlc-user {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .75rem .4rem 0;
    margin-top: .5rem;
    border-top: 1px solid var(--tlc-line-soft);
}
.tlc-avatar {
    width: 38px; height: 38px;
    border-radius: 50%;
    display: grid; place-items: center;
    background: var(--tlc-surface-2);
    border: 1px solid rgba(201, 155, 82, .55);
    color: var(--tlc-brass-hi);
    font-weight: 700;
    font-size: .82rem;
    flex-shrink: 0;
}
.tlc-user-meta { min-width: 0; flex: 1; display: flex; flex-direction: column; line-height: 1.2; }
.tlc-user-name { color: #fff; font-weight: 700; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tlc-user-role { color: var(--tlc-muted); font-size: .76rem; }

.tlc-icon-btn {
    display: inline-grid; place-items: center;
    width: 40px; height: 40px;
    border-radius: 10px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--tlc-muted);
    font-size: 1.15rem;
    text-decoration: none;
    flex-shrink: 0;
}
.tlc-icon-btn:hover { color: #fff; background: var(--tlc-surface-2); border-color: var(--tlc-line); }
.tlc-user .tlc-icon-btn:hover { color: var(--tlc-ember); }

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

.tlc-topbar {
    position: sticky;
    top: 0;
    z-index: 1020;
    height: var(--tlc-topbar-h);
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 0 clamp(1rem, 3vw, 2rem);
    background: rgba(20, 33, 28, .9);
    backdrop-filter: saturate(140%) blur(8px);
    -webkit-backdrop-filter: saturate(140%) blur(8px);
    border-bottom: 1px solid var(--tlc-line-soft);
}
.tlc-menu-btn { display: none; margin-left: -.4rem; }
.tlc-crumb {
    display: flex; align-items: center; gap: .5rem;
    min-width: 0;
    font-size: .92rem;
}
.tlc-crumb-group { color: var(--tlc-muted); white-space: nowrap; }
.tlc-crumb > .bi { color: var(--tlc-faint); font-size: .7rem; }
.tlc-crumb-title { color: #fff; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tlc-topbar-home { display: none; margin-left: auto; color: var(--tlc-muted); font-size: 1.15rem; width: 40px; height: 40px; place-items: center; border-radius: 10px; }
.tlc-topbar-home:hover { color: #fff; background: var(--tlc-surface-2); }

.tlc-content { flex: 1; padding: clamp(1.1rem, 3vw, 2rem) clamp(1rem, 3vw, 2rem) 2.5rem; }
.tlc-page { max-width: 1240px; margin: 0 auto; }

/* Pages wrap themselves in Bootstrap containers; inside the shell those
   should just fill the column, not add a second set of margins. */
.tlc-page .container, .tlc-page .container-fluid,
.tlc-page .container-sm, .tlc-page .container-md, .tlc-page .container-lg, .tlc-page .container-xl {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}
.tlc-page > :first-child,
.tlc-page > .container:first-child > :first-child { margin-top: 0 !important; }
.tlc-page > .container:first-child, .tlc-page > .container-fluid:first-child { margin-top: 0 !important; }

.tlc-footer {
    padding: 1.1rem clamp(1rem, 3vw, 2rem) 1.4rem;
    color: var(--tlc-faint);
    font-size: .8rem;
    border-top: 1px solid var(--tlc-line-soft);
}

.tlc-scrim { position: fixed; inset: 0; background: rgba(6, 11, 9, .6); z-index: 1039; }

@media (max-width: 991.98px) {
    .tlc-app { grid-template-columns: minmax(0, 1fr); background: none; }
    .tlc-sidebar {
        position: fixed;
        left: 0; top: 0; bottom: 0;
        width: min(86vw, 300px);
        z-index: 1040;
        transform: translateX(-102%);
        transition: transform .22s ease;
        padding-top: max(1.1rem, env(safe-area-inset-top));
        box-shadow: 20px 0 40px -20px rgba(0,0,0,.6);
    }
    .tlc-sidebar.is-open { transform: none; }
    .tlc-menu-btn, .tlc-topbar-home { display: inline-grid; }
    .tlc-topbar { padding-top: env(safe-area-inset-top); height: calc(var(--tlc-topbar-h) + env(safe-area-inset-top)); }
    body.tlc-menu-open { overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) {
    .tlc-sidebar, .tlc-nav-caret { transition: none; }
}

/* ---------- Bare layout (login, kiosk) ---------- */
.tlc-bare { min-height: 100vh; min-height: 100dvh; }
.tlc-bare-main { min-height: 100vh; min-height: 100dvh; }

.tlc-auth {
    min-height: 100vh; min-height: 100dvh;
    display: grid;
    place-items: center;
    padding: 2rem 1rem;
    background:
        radial-gradient(1200px 500px at 50% -10%, rgba(201,155,82,.10), transparent 60%),
        var(--tlc-ink);
}
.tlc-auth-card { width: 100%; max-width: 380px; }
.tlc-auth .tlc-plaque { margin: 0 auto 1.75rem; max-width: 300px; padding: 1.2rem 1rem 1rem; }
.tlc-auth .tlc-plaque-name { font-size: 1.85rem; }
.tlc-auth .tlc-plaque-tag { font-size: .8rem; }

/* PIN entry used by login + kiosk */
.tlc-pin-input {
    font-size: 2rem !important;
    letter-spacing: .6em;
    text-align: center;
    font-weight: 700;
    padding: .7rem .5rem .7rem 1.1rem !important;
}

/* ---------- Reminder overlay ---------- */
.tlc-reminders {
    position: fixed; inset: 0; z-index: 2000;
    background: rgba(6, 11, 9, .62);
    display: flex; align-items: center; justify-content: center;
    padding: 1rem;
}
.tlc-reminders.d-none { display: none !important; }
.tlc-reminders-box {
    width: 100%; max-width: 440px; max-height: 80vh;
    display: flex; flex-direction: column;
    background: var(--tlc-surface);
    border: 1px solid var(--tlc-line);
    border-top: 4px solid var(--tlc-sun);
    border-radius: var(--tlc-radius-lg);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
}
.tlc-reminders-head {
    display: flex; align-items: center; gap: .55rem;
    padding: 1rem 1.2rem;
    font-weight: 700; font-size: 1.05rem;
    color: var(--tlc-sun);
    border-bottom: 1px solid var(--tlc-line-soft);
}
.tlc-reminders-list { overflow-y: auto; padding: .9rem 1.2rem 1.2rem; display: grid; gap: .75rem; }
.tlc-reminder { background: var(--tlc-surface-2); border-radius: 10px; padding: .85rem 1rem; }
.tlc-reminder-time { font-size: .78rem; font-weight: 700; color: var(--tlc-sun); margin-bottom: .3rem; }
.tlc-reminder-msg { white-space: pre-wrap; margin-bottom: .7rem; }

/* ==========================================================================
   Reusable page pieces
   ========================================================================== */

/* Page header: title + optional actions on the right */
.tlc-pagehead {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}
.tlc-pagehead .page-title { margin-bottom: 0; }
.tlc-pagehead p { color: var(--tlc-muted); margin: .35rem 0 0; max-width: 60ch; }
.tlc-pagehead-actions { display: flex; gap: .5rem; flex-wrap: wrap; }

/* A plain panel when a .card would be overkill */
.tlc-panel {
    background: var(--tlc-surface);
    border: 1px solid var(--tlc-line-soft);
    border-radius: var(--tlc-radius-lg);
    padding: 1.1rem 1.2rem;
}
.tlc-panel-title {
    display: flex; align-items: center; gap: .55rem;
    font-size: 1rem; font-weight: 700; color: #fff;
    margin: 0 0 .9rem;
}
.tlc-panel-title .bi { color: var(--tlc-brass-hi); }

/* Section heading inside a page */
.tlc-section-title {
    font-size: 1.05rem; font-weight: 700; color: #fff;
    margin: 2rem 0 .85rem;
    display: flex; align-items: center; gap: .55rem;
}
.tlc-section-title .bi { color: var(--tlc-brass-hi); }

/* Empty states */
.tlc-empty {
    text-align: center;
    padding: 2.25rem 1rem;
    color: var(--tlc-muted);
    border: 1px dashed var(--tlc-line);
    border-radius: var(--tlc-radius-lg);
}
.tlc-empty .bi { font-size: 1.6rem; color: var(--tlc-faint); display: block; margin-bottom: .5rem; }

/* Status dot (clocked in / out etc.) */
.tlc-dot { display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; background: var(--tlc-faint); vertical-align: middle; }
.tlc-dot.is-on { background: var(--tlc-leaf); box-shadow: 0 0 0 4px rgba(108,186,134,.18); }

/* Vertical sub-navigation used by big multi-section pages (admin panel) */
.tlc-subnav-layout { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.tlc-subnav { position: sticky; top: calc(var(--tlc-topbar-h) + 1rem); display: flex; flex-direction: column; gap: 2px; }
.tlc-subnav button, .tlc-subnav a {
    display: flex; align-items: center; gap: .6rem;
    text-align: left;
    background: transparent; border: 0;
    padding: .55rem .75rem;
    border-radius: 8px;
    color: var(--tlc-muted);
    font-weight: 700; font-size: .92rem;
    text-decoration: none;
}
.tlc-subnav button .bi, .tlc-subnav a .bi { width: 1.1rem; text-align: center; color: var(--tlc-faint); }
.tlc-subnav button:hover, .tlc-subnav a:hover { color: #fff; background: var(--tlc-surface); }
.tlc-subnav .active { color: #fff; background: var(--tlc-surface-2); }
.tlc-subnav .active .bi { color: var(--tlc-brass-hi); }
@media (max-width: 991.98px) {
    .tlc-subnav-layout { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
    .tlc-subnav {
        position: static; flex-direction: row; overflow-x: auto; scrollbar-width: none;
        border-bottom: 1px solid var(--tlc-line); padding-bottom: .4rem; gap: .25rem;
    }
    .tlc-subnav button, .tlc-subnav a { white-space: nowrap; }
}

/* ==========================================================================
   Home (dashboard.php)
   ========================================================================== */
.tlc-home-head {
    display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
    gap: 1rem 2rem;
    padding-bottom: 1.5rem;
    margin-bottom: 1.75rem;
    border-bottom: 1px solid var(--tlc-line-soft);
}
.tlc-home-date { color: var(--tlc-muted); font-weight: 700; font-size: .95rem; margin-bottom: .3rem; }
.tlc-home-head h1 {
    font-family: var(--tlc-serif);
    font-weight: 600;
    font-size: clamp(1.7rem, 1.2rem + 2vw, 2.6rem);
    letter-spacing: .02em;
    margin: 0;
}

.tlc-clockcard {
    display: flex; align-items: center; gap: 1rem;
    background: var(--tlc-surface);
    border: 1px solid var(--tlc-line-soft);
    border-radius: var(--tlc-radius-lg);
    padding: .75rem .8rem .75rem 1.1rem;
    min-width: min(100%, 340px);
}
.tlc-clockcard.is-in { border-color: rgba(108,186,134,.45); }
.tlc-clockcard-text { line-height: 1.25; flex: 1; }
.tlc-clockcard-text strong { display: block; color: #fff; }
.tlc-clockcard-text span { color: var(--tlc-muted); font-size: .88rem; }

.tlc-home-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 2rem; align-items: start; }
@media (max-width: 1099.98px) { .tlc-home-grid { grid-template-columns: minmax(0, 1fr); } }

/* Directory of everything the role can open, grouped like the sidebar */
.tlc-directory { columns: 2 280px; column-gap: 1.25rem; }
.tlc-dir-group {
    break-inside: avoid;
    margin-bottom: 1.25rem;
    background: var(--tlc-surface);
    border: 1px solid var(--tlc-line-soft);
    border-radius: var(--tlc-radius-lg);
    padding: .5rem;
}
.tlc-dir-group h2 {
    display: flex; align-items: center; gap: .55rem;
    font-size: .95rem;
    margin: .45rem .55rem .5rem;
    color: var(--tlc-muted);
}
.tlc-dir-group h2 .bi { color: var(--tlc-brass-hi); }
.tlc-dir-link {
    display: flex; align-items: center; gap: .75rem;
    padding: .7rem .65rem;
    border-radius: 9px;
    color: var(--tlc-text);
    text-decoration: none;
    font-weight: 700;
}
.tlc-dir-link .bi:first-child {
    width: 34px; height: 34px;
    display: grid; place-items: center;
    border-radius: 8px;
    background: var(--tlc-surface-2);
    color: var(--tlc-brass-hi);
    font-size: 1.02rem;
    flex-shrink: 0;
}
.tlc-dir-link .tlc-dir-go { margin-left: auto; color: var(--tlc-faint); font-size: .8rem; }
.tlc-dir-link:hover { background: var(--tlc-surface-2); color: #fff; }
.tlc-dir-link:hover .bi:first-child { background: var(--tlc-brass); color: var(--tlc-brass-ink); }
.tlc-dir-link:hover .tlc-dir-go { color: var(--tlc-muted); }

.tlc-news { position: sticky; top: calc(var(--tlc-topbar-h) + 1.25rem); }
.tlc-news-item { padding: .85rem 0; border-top: 1px solid var(--tlc-line-soft); }
.tlc-news-item:first-of-type { border-top: 0; padding-top: 0; }
.tlc-news-date { font-size: .8rem; font-weight: 700; color: var(--tlc-brass-hi); margin-bottom: .2rem; }
.tlc-news-body { font-size: .95rem; color: var(--tlc-text); }

.tlc-preview {
    display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
    padding: .6rem .8rem;
    margin-bottom: 1.5rem;
    background: var(--bs-warning-bg-subtle);
    border: 1px solid var(--bs-warning-border-subtle);
    border-radius: var(--tlc-radius);
    color: var(--bs-warning-text-emphasis);
    font-weight: 700; font-size: .9rem;
}
.tlc-preview .form-select { width: auto; min-width: 180px; }

/* ==========================================================================
   Print: drop the shell
   ========================================================================== */
@media print {
    .tlc-sidebar, .tlc-topbar, .tlc-footer, .tlc-scrim, .tlc-reminders { display: none !important; }
    .tlc-app { display: block; }
    body, .tlc-content { background: #fff !important; color: #000 !important; }
}

/* Contextual "up one level" link (e.g. a request back to the mechanic panel).
   Going home is always in the menu, so pages don't need their own home button. */
.tlc-back {
    display: inline-flex; align-items: center; gap: .4rem;
    color: var(--tlc-muted);
    font-weight: 700; font-size: .9rem;
    text-decoration: none;
    margin-bottom: .75rem;
}
.tlc-back:hover { color: #fff; }
.tlc-back .bi { font-size: .85rem; }

/* Bootstrap's text-bg-* helpers, matched to the palette */
.text-bg-primary   { color: var(--tlc-brass-ink) !important; background-color: var(--tlc-brass) !important; }
.text-bg-success   { color: #0d2316 !important; background-color: var(--tlc-leaf) !important; }
.text-bg-danger    { color: #2a0e07 !important; background-color: var(--tlc-ember) !important; }
.text-bg-warning   { color: #2a2006 !important; background-color: var(--tlc-sun) !important; }
.text-bg-info      { color: #0b1d28 !important; background-color: var(--tlc-sky) !important; }
.text-bg-secondary, .text-bg-dark, .text-bg-light { color: var(--tlc-text) !important; background-color: var(--tlc-surface-2) !important; }

/* Stat tiles (hours, counts) */
.tlc-stat { background: var(--tlc-surface); border: 1px solid var(--tlc-line-soft); border-radius: var(--tlc-radius-lg); padding: 1rem 1.1rem; height: 100%; }
.tlc-stat-label { color: var(--tlc-muted); font-size: .88rem; font-weight: 700; }
.tlc-stat-value { font-size: 1.9rem; font-weight: 700; color: #fff; line-height: 1.15; margin-top: .2rem; font-variant-numeric: tabular-nums; }
.tlc-stat.is-accent { border-color: rgba(201,155,82,.5); }
.tlc-stat.is-accent .tlc-stat-value { color: var(--tlc-brass-hi); }

/* Clock in / out (clock.php) */
.tlc-punch { max-width: 440px; margin: 0 auto; padding-top: clamp(0rem, 4vh, 2.5rem); }
.tlc-punch-card {
    background: var(--tlc-surface);
    border: 1px solid var(--tlc-line-soft);
    border-radius: 18px;
    padding: 1.6rem 1.4rem 1.4rem;
    text-align: center;
}
.tlc-punch-card.is-in { border-color: rgba(108,186,134,.45); }
.tlc-punch-status { color: var(--tlc-muted); font-weight: 700; display: inline-flex; align-items: center; gap: .5rem; }
.tlc-punch-status strong { color: #fff; }
.tlc-punch-time { font-size: clamp(2.6rem, 2rem + 3vw, 3.4rem); font-weight: 700; color: #fff; line-height: 1.1; margin-top: .6rem; font-variant-numeric: tabular-nums; }
.tlc-punch-date { color: var(--tlc-muted); font-weight: 700; }
.tlc-punch-btn { min-height: 64px; font-size: 1.25rem; display: inline-flex; align-items: center; justify-content: center; gap: .55rem; }

.accordion-button::after { filter: grayscale(1) brightness(1.7); }
.accordion-button:not(.collapsed)::after { filter: sepia(1) saturate(2.5) hue-rotate(-12deg) brightness(1.05); }

/* Long-form public pages (privacy policy) */
.tlc-legal { max-width: 720px; margin: 0 auto; padding: clamp(1.5rem, 5vw, 3rem) 1rem 3rem; line-height: 1.65; }
.tlc-legal .tlc-plaque { display: inline-block; margin: 0 0 1.75rem; }
.tlc-legal h2 { font-size: 1.15rem; margin: 2rem 0 .6rem; }
.tlc-legal ul { padding-left: 1.2rem; }
.tlc-legal li { margin-bottom: .4rem; }

/* Push notification settings grid */
.tlc-push-grid th[scope="row"] { min-width: 240px; }
.tlc-push-grid tbody + thead th { border-top: 1px solid var(--tlc-line); }
.tlc-push-grid .form-check-input { width: 1.25em; height: 1.25em; margin: 0; }

/* Toggle chips (pick employees) — selected chips are filled */
.btn-check:checked + .btn-outline-secondary,
.btn-check:checked + .btn-outline-light {
    background: var(--tlc-brass);
    border-color: var(--tlc-brass);
    color: var(--tlc-brass-ink);
}
.btn-check:focus-visible + .btn { outline: 2px solid var(--tlc-brass-hi); outline-offset: 2px; }

/* ---------------------------------------------------------------------------
   Messages — admin inbox (admin/messages.php) and employee view (my_messages.php)
   --------------------------------------------------------------------------- */
.tlc-inbox {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 1.25rem;
    align-items: stretch;
    min-height: min(72vh, 760px);
}
.tlc-inbox.is-single { grid-template-columns: minmax(0, 860px); }
.tlc-inbox-list,
.tlc-inbox-thread {
    background: var(--tlc-surface);
    border: 1px solid var(--tlc-line-soft);
    border-radius: var(--tlc-radius-lg);
    min-width: 0;
}
.tlc-inbox-list { padding: 1rem; display: flex; flex-direction: column; gap: 1rem; }
.tlc-inbox-list .tlc-empty { border: 0; padding: 1.5rem .5rem; }
.tlc-inbox-thread { display: flex; flex-direction: column; overflow: hidden; }
.tlc-inbox-thread > .tlc-empty { border: 0; }

.tlc-convos { list-style: none; margin: 0 -.5rem; padding: 0; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; }
.tlc-convo {
    display: flex; align-items: center; gap: .7rem;
    padding: .6rem .6rem;
    border-radius: var(--tlc-radius);
    color: var(--tlc-text);
    text-decoration: none;
}
.tlc-convo:hover { background: var(--tlc-surface-2); color: var(--tlc-text); }
.tlc-convo.is-active { background: var(--tlc-surface-2); box-shadow: inset 3px 0 0 var(--tlc-brass); }
.tlc-convo-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.tlc-convo-top { display: flex; align-items: baseline; gap: .5rem; }
.tlc-convo-name { font-weight: 700; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tlc-convo-when { font-size: .75rem; color: var(--tlc-faint); white-space: nowrap; }
.tlc-convo-preview { font-size: .85rem; color: var(--tlc-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tlc-convo.is-unread .tlc-convo-preview { color: var(--tlc-text); }
.tlc-convo-badge {
    min-width: 1.4rem; height: 1.4rem; padding: 0 .4rem;
    border-radius: 999px;
    background: var(--tlc-brass); color: var(--tlc-brass-ink);
    font-size: .75rem; font-weight: 700;
    display: grid; place-items: center;
}

.tlc-thread-head {
    display: flex; align-items: center; gap: .9rem;
    padding: .9rem 1.1rem;
    border-bottom: 1px solid var(--tlc-line-soft);
    background: var(--tlc-surface-2);
}
.tlc-thread-name { font-weight: 700; font-size: 1.05rem; }
.tlc-thread-back { color: var(--tlc-brass-hi); text-decoration: none; font-weight: 600; white-space: nowrap; }

.tlc-chat {
    flex: 1;
    overflow-y: auto;
    padding: 1.1rem;
    display: flex; flex-direction: column; gap: .7rem;
    max-height: 62vh;
    min-height: 260px;
}
.tlc-bubble {
    max-width: min(78%, 560px);
    padding: .65rem .85rem;
    border-radius: 14px;
    line-height: 1.45;
    overflow-wrap: anywhere;
}
.tlc-bubble.is-in  { align-self: flex-start; background: var(--tlc-surface-2); border: 1px solid var(--tlc-line); border-bottom-left-radius: 4px; }
.tlc-bubble.is-out { align-self: flex-end; background: rgba(201, 155, 82, .16); border: 1px solid rgba(201, 155, 82, .42); border-bottom-right-radius: 4px; }
.tlc-bubble.is-announcement { border-style: dashed; }
.tlc-bubble-tag { font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--tlc-brass-hi); margin-bottom: .25rem; }
.tlc-bubble-meta { font-size: .75rem; color: var(--tlc-muted); margin-top: .35rem; }
.tlc-bubble-meta a { color: var(--tlc-brass-hi); font-weight: 700; }

.tlc-composer {
    border-top: 1px solid var(--tlc-line-soft);
    padding: .9rem 1.1rem 1rem;
    display: flex; flex-direction: column; gap: .6rem;
    background: var(--tlc-surface);
}
.tlc-composer-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.tlc-composer-quote {
    display: flex; align-items: flex-start; gap: .75rem;
    font-size: .85rem; color: var(--tlc-muted);
    padding: .5rem .75rem;
    border-left: 3px solid var(--tlc-brass);
    background: var(--tlc-inset);
    border-radius: var(--tlc-radius-sm);
}
.tlc-composer-quote span { flex: 1; min-width: 0; }
.tlc-composer-quote a { color: var(--tlc-muted); }

/* Phones and tablets: list OR conversation, not both */
@media (max-width: 991.98px) {
    .tlc-inbox, .tlc-inbox.is-single { grid-template-columns: minmax(0, 1fr); min-height: 0; }
    .tlc-inbox.has-thread:not(.is-single) .tlc-inbox-list { display: none; }
    .tlc-inbox:not(.has-thread) .tlc-inbox-thread { display: none; }
    .tlc-bubble { max-width: 88%; }
    .tlc-chat { max-height: none; }
}

/* Announcement reply counts (announcements.php) */
.tlc-ann-stats { display: flex; flex-wrap: wrap; gap: .35rem .9rem; font-size: .8rem; color: var(--tlc-muted); }
.tlc-ann-stats a { color: var(--tlc-brass-hi); }
.tlc-nav-badge {
    margin-left: auto;
    min-width: 1.3rem; height: 1.3rem; padding: 0 .35rem;
    border-radius: 999px;
    background: var(--tlc-brass); color: var(--tlc-brass-ink);
    font-size: .72rem; font-weight: 700; line-height: 1.3rem; text-align: center;
}
.tlc-news-reply { display: inline-flex; align-items: center; gap: .3rem; margin-top: .35rem; font-size: .82rem; font-weight: 700; color: var(--tlc-brass-hi); text-decoration: none; }
.tlc-news-reply:hover { color: var(--tlc-brass); text-decoration: underline; }

/* "Can't show this" page (includes/fail.php) */
.tlc-fail { max-width: 460px; margin: clamp(2rem, 10vh, 6rem) auto; text-align: center; padding: 2rem 1.5rem; background: var(--tlc-surface); border: 1px solid var(--tlc-line-soft); border-radius: var(--tlc-radius-lg); }
.tlc-fail > .bi { font-size: 2rem; color: var(--tlc-brass); display: block; margin-bottom: .5rem; }
.tlc-fail .page-title { font-size: 1.5rem; margin-bottom: .5rem; }
.tlc-fail p { color: var(--tlc-muted); margin-bottom: 1.25rem; }

/* Narrow single-form pages */
.tlc-narrow { max-width: 760px; }
/* Inline help note */
.tlc-note { display: flex; gap: .6rem; align-items: flex-start; padding: .7rem .85rem; border-radius: var(--tlc-radius); background: var(--tlc-inset); border: 1px solid var(--tlc-line-soft); color: var(--tlc-muted); font-size: .9rem; }
.tlc-note > .bi { color: var(--tlc-sky); margin-top: .1rem; }
.tlc-note strong { color: var(--tlc-text); }

/* Grouped lists (equipment, parts, vehicle documents) */
.tlc-group + .tlc-group { margin-top: 1.5rem; }
.tlc-group-title { font-family: var(--tlc-font); font-size: .82rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tlc-brass-hi); margin: 0 0 .5rem; display: flex; align-items: center; gap: .5rem; }
.tlc-group-count { font-size: .72rem; color: var(--tlc-muted); background: var(--tlc-surface-2); border-radius: 999px; padding: .05rem .5rem; letter-spacing: 0; }
.tlc-list-table { table-layout: fixed; }
.tlc-list-table > :not(caption) > * > * { padding: .7rem 1rem; }
.tlc-list-table tbody tr:last-child > * { border-bottom: 0; }
.tlc-row-link { color: var(--tlc-text); text-decoration: none; }
.tlc-row-link:hover { color: var(--tlc-brass-hi); text-decoration: underline; }
@media (max-width: 767.98px) { .d-md-table-column { display: none; } }
@media (min-width: 768px) { .d-none.d-md-table-column { display: table-column !important; } }

/* Time punches editor */
.tlc-punch-table { table-layout: fixed; }
.tlc-pt { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.tlc-pt-time { font-weight: 700; font-variant-numeric: tabular-nums; }
.tlc-pt-actions { display: flex; gap: .35rem; }
.tlc-pt.is-missing > span { color: var(--tlc-sun); font-weight: 600; font-size: .9rem; }
.btn-icon { width: 2rem; height: 2rem; padding: 0; display: inline-grid; place-items: center; }
.tlc-punch-table tr.collapse > td, .tlc-punch-table tr.collapsing > td { background: var(--tlc-inset); }

/* Contact request cards */
.tlc-request-list { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); }
.tlc-request-head { display: flex; justify-content: space-between; align-items: flex-start; gap: .75rem; }
.tlc-request-msg { margin-top: .65rem; padding-top: .65rem; border-top: 1px solid var(--tlc-line-soft); color: var(--tlc-text); }

/* Menu & permissions item cards */
.tlc-menuitem-icon { width: 2.1rem; height: 2.1rem; flex: none; display: grid; place-items: center; border-radius: var(--tlc-radius-sm); background: var(--tlc-surface-2); color: var(--tlc-brass-hi); }
.tlc-menuitem.is-off { opacity: .62; }
.min-w-0 { min-width: 0; }
/* Native file pickers that don't use .form-control */
.tlc-page input[type="file"]::file-selector-button { background: var(--tlc-surface-2); color: var(--tlc-text); border: 1px solid var(--tlc-line); border-radius: var(--tlc-radius-sm); padding: .3rem .75rem; margin-right: .6rem; font: inherit; cursor: pointer; }
.tlc-page input[type="file"].form-control::file-selector-button { border: 0; border-radius: 0; border-right: 1px solid var(--tlc-line); margin: -.375rem .75rem -.375rem -.75rem; padding: .375rem .75rem; }

/* Big tap-target choice tiles (snow truck entry) */
.tlc-choice-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.tlc-choice { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem; min-height: 88px; border-radius: var(--tlc-radius-lg); border: 2px solid var(--tlc-line); background: var(--tlc-inset); color: var(--tlc-muted); font-weight: 700; font-size: 1.05rem; cursor: pointer; transition: border-color .15s, color .15s, background .15s; }
.tlc-choice .bi { font-size: 1.6rem; }
.tlc-choice:hover { border-color: var(--tlc-brass); color: var(--tlc-text); }
.btn-check:checked + .tlc-choice { border-color: var(--tlc-brass); background: rgba(201,155,82,.14); color: var(--tlc-brass-hi); }
.btn-check:focus-visible + .tlc-choice { outline: 2px solid var(--tlc-brass-hi); outline-offset: 2px; }
.tlc-truck legend { font-size: inherit; }

/* Push settings grid: keep role columns compact so all of them fit */
.tlc-push-grid th[scope="row"] { min-width: 200px; }
.tlc-push-grid thead th:not(:first-child) { white-space: normal; width: 74px; text-align: center; line-height: 1.2; }
.tlc-push-grid td { text-align: center; }
.tlc-push-grid td:first-child, .tlc-push-grid th[scope="row"] { text-align: left; }