/* app.css — SKELETON. The shared look: fonts, tokens (defaults), the shell,
 * and the components every Vue screen uses (js/App/app.js). Loaded after
 * rsflow.css; css/brand.css (the PROJECT's palette) and custom.css load after it.
 * A project never edits this file — it overrides tokens in brand.css.
 */

/* ═══════════════════════════════════════════════════════════════════════
   OPEN SANS  (self-hosted from /fonts/open-sans, no Google Fonts CDN)
   ═══════════════════════════════════════════════════════════════════════ */
@font-face {
  font-family: 'Open Sans'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/open-sans/open-sans-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Open Sans'; font-style: italic; font-weight: 400; font-display: swap;
  src: url('../fonts/open-sans/open-sans-400-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Open Sans'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/open-sans/open-sans-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Open Sans'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/open-sans/open-sans-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Open Sans'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/open-sans/open-sans-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Open Sans'; font-style: normal; font-weight: 800; font-display: swap;
  src: url('../fonts/open-sans/open-sans-800.woff2') format('woff2');
}


/* ═══════════════════════════════════════════════════════════════════════
   BRAND TOKENS + FONT STACK
   ═══════════════════════════════════════════════════════════════════════ */
:root {
  /* DEFAULT PALETTE — a neutral navy. A PROJECT DOES NOT EDIT THIS BLOCK:
     css/brand.css (the project's file, loaded after this one) redefines the
     tokens it wants. Everything downstream reads these tokens, so a rebrand is
     one small file. Rules that cost real time before:
       - white text must read on --app-fill (keep 4.5:1 or more, or record the
         client's decision to accept less in brand.css, as dsbmms did);
       - brand-coloured TEXT on white needs the same 4.5:1;
       - BRAND_COLOR in config/app.php must equal --app-brand (the sign-in page
         and the PDFs cannot read a CSS variable). */
  --app-brand:       #1F4E79;   /* brand TEXT: links, labels, outline-button text */
  --app-brand-dark:  #163A5B;   /* pressed text */
  --app-fill:        #1F4E79;   /* buttons, active menu item, ticked boxes */
  --app-fill-dark:   #163A5B;   /* pressed / hovered fill */
  --app-brand-light: #3A7BC8;   /* accents nothing sits on: rules, focus rings, chart fills */
  --app-ground:      #F1F3F5;   /* light grey page ground */
  --app-border:      #DEE2E6;   /* hairline rule */
  --app-text:        #1F2329;   /* deep neutral ink */
  --app-muted:       #6B7280;   /* neutral slate for secondary text */
  --app-tint:        #E8F0F8;   /* pale brand tint for hover / active bg */

  /* Callout and panel surfaces. */
  --app-surface:     #F8F9FA;   /* panel / callout ground, one step off white */
  --app-surface-2:   #EDF0F2;   /* a second step, for a panel inside a panel */
  --app-note-bg:     #F8F9FA;   /* informational callout */
  --app-note-edge:   #ADB5BD;   /* its left rule — neutral, it is not a warning */
  --app-warn-bg:     #FFF4E5;   /* a REAL warning is amber: it carries meaning */
  --app-warn-edge:   #F0A020;

  /* Override rsflow's dark-sidebar default so the whole chrome goes
     pale minimal. Every --rs-* here retargets an inherited rsflow token. */
  --rs-accent:        var(--app-brand);
  --rs-accent-light:  var(--app-tint);
  --rs-accent-dark:   var(--app-brand-dark);
  --rs-brand:         var(--app-brand);
  --rs-text:          var(--app-text);
  --rs-text-muted:    var(--app-muted);
  --rs-border:        var(--app-border);
  --rs-bg:            var(--app-ground);       /* page ground */
  --rs-sidebar-bg:    #FFFFFF;                     /* was #2c3a4a — dark sidebar killed */
  --rs-sidebar-txt:   var(--app-text);          /* dark ink for light sidebar */
  --rs-sidebar-sec:   var(--app-muted);        /* section headers */
  --rs-topbar-bg:     #FFFFFF;
  --rs-card-bg:       #FFFFFF;
}

/* ── Sidebar chrome overrides for the pale minimal treatment ───────────
   rsflow.css paints a linear-gradient with a hardcoded #1a2636 stop, so
   the flat #FFFFFF background needs !important to beat it. */
.rs-sidebar {
    background: #FFFFFF !important;
    border-right: 1px solid var(--app-border);
    color: var(--app-text);
}
.rs-sidebar::-webkit-scrollbar-thumb { background: var(--app-border); }
.rs-sidebar-brand { border-bottom: 1px solid var(--app-border); background: #FFFFFF; }
.rs-sidebar-brand img { height: 36px; }
.rs-sidebar-brand .brand-name { color: var(--app-brand); }
.rs-sidebar-brand .brand-sub  { color: var(--app-muted); }

.rs-nav-link {
    color: var(--app-text);
    border-left: 2px solid transparent;
}
.rs-nav-link:hover {
    background: var(--app-tint);
    color: var(--app-brand);
    border-left-color: transparent;
}
.rs-nav-link.active {
    background: var(--app-fill);
    color: #fff;
    border-left-color: var(--app-fill-dark);
    font-weight: 600;
}
.rs-nav-link i { opacity: .7; }
.rs-nav-link:hover i { opacity: 1; color: var(--app-brand); }
.rs-nav-link.active i, .rs-nav-link.active:hover i { opacity: 1; color: #fff; }
.rs-nav-link.active:hover { background: var(--app-fill-dark); color: #fff; }

.rs-nav-section {
    color: var(--app-muted);
    font-size: .74rem;
    font-weight: 600;
}

/* Override rsflow.css:135 which paints section labels white on hover —
   the sidebar is light, so white-on-white made the label vanish.
   Darken to the primary text colour instead. */
.rs-nav-section:hover { color: var(--app-text); }

.rs-nav-search {
    background: var(--app-ground);
    border: 1px solid var(--app-border);
    color: var(--app-text);
}
.rs-nav-search input {
    background: transparent;
    color: var(--app-text);
}
.rs-nav-search input::placeholder { color: var(--app-muted); }
.rs-nav-search-ico { color: var(--app-muted); }

.rs-topbar {
    border-bottom: 1px solid var(--app-border);
}
.rs-topbar .page-title { color: var(--app-text); font-weight: 600; }

/* User avatar / footer chips inside the sidebar */
.rs-sidebar-footer {
    border-top: 1px solid var(--app-border);
}
.rs-sidebar-footer .avatar {
    background: var(--app-tint);
    color: var(--app-brand);
    font-weight: 600;
}

html, body {
  font-family: 'Open Sans', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  color: var(--app-text);
  overflow-x: hidden;                     /* belt-and-braces: no horizontal scroll on the whole page */
  -webkit-text-size-adjust: 100%;         /* iOS Safari: don't inflate text after orientation change */
}

/* Brand accents on primary UI chrome */
.rs-sidebar-brand .brand-name { color: var(--app-brand); font-weight: 700; }
.btn-primary:focus  { box-shadow: 0 0 0 .2rem rgba(0, 0, 0, .12); box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--app-brand-light) 40%, transparent); }
a       { color: var(--app-brand); }
a:hover { color: var(--app-brand-dark); }

.money, td.money, th.money { text-align: right; font-variant-numeric: tabular-nums; }
img[loading="lazy"] { background: var(--app-ground); }


/* ═══════════════════════════════════════════════════════════════════════
   MOBILE SIDEBAR — off-canvas drawer with backdrop
   ═══════════════════════════════════════════════════════════════════════ */

.rs-sidebar-toggle {
  display: none;                          /* desktop: hidden */
  background: none; border: none; cursor: pointer;
  color: #4b5563; padding: .45rem .6rem;
  border-radius: 6px; font-size: 1.1rem; line-height: 1;
  min-width: 44px; min-height: 44px;      /* touch target */
}
.rs-sidebar-toggle:hover,
.rs-sidebar-toggle:focus { background: var(--app-tint); color: var(--app-brand); outline: none; }

.rs-sidebar { transition: transform .25s ease; }

.rs-sidebar-backdrop {
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, .48);
  z-index: 998;
  opacity: 0; visibility: hidden;
  transition: opacity .2s ease, visibility 0s linear .2s;
}
.rs-sidebar-backdrop.show {
  opacity: 1; visibility: visible;
  transition: opacity .2s ease;
}

.rs-topbar { z-index: 900; }


/* ═══════════════════════════════════════════════════════════════════════
   MOBILE-FIRST UX POLISH
   Breakpoints follow Bootstrap 5:
     xs  < 576px    (phones portrait)
     sm  ≥ 576px    (phones landscape)
     md  ≥ 768px    (tablets)
     lg  ≥ 992px    (desktops)
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Tablet + phone: drawer sidebar, tighter chrome ─────────────────── */
@media (max-width: 991.98px) {
  /* Sidebar becomes an off-canvas drawer */
  .rs-sidebar-toggle    { display: inline-flex; align-items: center; justify-content: center; }
  .rs-sidebar           { position: fixed; top: 0; left: 0; z-index: 999; box-shadow: 0 8px 40px rgba(0,0,0,.25); transform: translateX(-100%); }
  .rs-sidebar.mobile-open { transform: translateX(0); }
  .rs-main              { margin-left: 0 !important; }
  body.rs-drawer-open   { overflow: hidden; }         /* lock page scroll while drawer open */

  /* Notifications & other topnav dropdowns must fit the viewport */
  .rs-topbar .dropdown-menu {
    max-width: calc(100vw - 20px) !important;
    width: min(340px, calc(100vw - 20px));
  }

  /* Page-level breathing room reduces */
  .rs-content { padding: 12px !important; }

  /* Card padding gets tighter */
  .card-body { padding: .9rem !important; }
}

/* ── Phone (portrait) — density + touch targets ─────────────────────── */
@media (max-width: 767.98px) {
  /* Page headers scale down + wrap cleanly */
  .rs-content h5 { font-size: 1rem; }

  /* Tables: smaller font + tighter cells, but keep horizontal scroll usable */
  .table-responsive { -webkit-overflow-scrolling: touch; }
  .table > thead > tr > th,
  .table > tbody > tr > td {
    padding: .4rem .5rem;
    font-size: .78rem;
    white-space: nowrap;                  /* rows scroll horizontally rather than exploding vertically */
  }
  /* Table row action buttons — enlarge tap area */
  .table .btn-sm { padding: .38rem .55rem; min-width: 32px; }

  /* Filter cards: compact but readable */
  .card > .card-body.py-2 { padding: .6rem .75rem !important; }

  /* Buttons in header rows do not truncate */
  .d-flex.gap-2 > .btn, .d-flex.flex-wrap > .btn { white-space: nowrap; }

  /* Topnav: tighter padding, larger icons for touch */
  .rs-topbar        { padding: 0 8px !important; gap: 8px !important; }
  .rs-topbar i.fas  { font-size: 1.05rem; }
  .rs-topbar a      { padding: 6px; min-width: 36px; min-height: 36px; display: inline-flex; align-items: center; justify-content: center; }
}

/* ── Small phone — form density ─────────────────────────────────────── */
@media (max-width: 575.98px) {
  .form-label       { margin-bottom: .2rem; font-size: .82rem; }
  .form-control,
  .form-select      { font-size: .88rem; }
  .card-body        { padding: .8rem .75rem !important; }

  /* Numeric badges + status chips shrink slightly */
  .badge            { font-size: .68rem; }

  /* dl rows in view screens stack better */
  dl.row > dt, dl.row > dd { padding-top: 2px; padding-bottom: 2px; }
}

/* ── jQuery-confirm modal — full-width preview on mobile ────────────── */
@media (max-width: 767.98px) {
  .jconfirm .jconfirm-box.xlarge,
  .jconfirm-holder .jconfirm-box.xlarge {
    max-width: calc(100vw - 16px) !important;
    margin: 8px !important;
    width: calc(100vw - 16px);
  }
  .jconfirm .jconfirm-content iframe { height: 55vh !important; }
  /* Wrap the footer buttons so 4 buttons don't overflow */
  .jconfirm-buttons        { display: flex !important; flex-wrap: wrap; gap: 6px; }
  .jconfirm-buttons button { flex: 1 1 45%; min-width: 45%; margin: 0 !important; }
}

/* ── Sidebar-drawer polish (visible only when drawer is open) ───────── */
@media (max-width: 991.98px) {
  /* Slightly larger tap targets inside the drawer */
  .rs-nav-link           { padding: 11px 16px; font-size: .82rem; }
  .rs-nav-section        { padding: 12px 16px 6px; font-size: .78rem; }
  .rs-sidebar-brand      { padding: 14px 16px; }
  .rs-sidebar-brand .brand-name { font-size: .88rem; }
  .rs-sidebar-brand .brand-sub  { font-size: .74rem; }
}

/* ── Login page: sane on tiny screens ───────────────────────────────── */
@media (max-width: 400px) {
  .rs-login-card { padding: 1.4rem 1.1rem; }
}

/* ── Utility: hide desktop-only, mobile-only helpers ────────────────── */
.desktop-only { display: block; }
.mobile-only  { display: none; }
@media (max-width: 767.98px) {
  .desktop-only { display: none; }
  .mobile-only  { display: block; }
}

/* The main column is a flex item: without this it grows to fit its widest
   child, so one wide table (the import's column guide) pushed the whole page
   sideways instead of scrolling inside its own .table-responsive box. */
.rs-main { min-width: 0; }

/* A heading inside a menu section — Transport, inside Procurement. Quieter
   than a section label, so the section still reads as one group. */
.rs-nav-subhead {
    font-size: .7rem;
    color: var(--app-muted); padding: 8px 14px 2px 34px; font-weight: 600;
}
.rs-nav.is-searching .rs-nav-subhead { display: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   Favourites — a user's own shortlist at the top of the sidebar, and the star
   in the top bar that fills it. Ported from rsflow; recoloured for
   Domaka's light sidebar (rsflow's is dark), and the collapsed state here is
   body.rs-sidebar-rail, with .rs-hover-preview expanding it again.
   ═══════════════════════════════════════════════════════════════════════════ */

.rs-nav-quick { padding: 2px 0 6px; border-bottom: 1px solid var(--app-border); margin-bottom: 4px; }
/* An empty box with a heading over it is clutter. The star is how it fills. */
.rs-nav-quick.is-empty { display: none; }

.rs-nav-quick-hd {
    display: flex; align-items: center; gap: 7px;
    font-size: .72rem; font-weight: 600;
    color: var(--app-muted);
    padding: 8px 14px 4px;
}
.rs-nav-quick-hd i { font-size: .6rem; color: #f0ad2e; }

.rs-quick-row { display: flex; align-items: stretch; }
.rs-quick-link {
    flex: 1; min-width: 0;
    display: flex; align-items: center; gap: 9px;
    padding: 6px 4px; color: var(--app-text);
    text-decoration: none; font-size: .76rem;
    border-left: 2px solid transparent;
    transition: background .12s, color .12s;
}
.rs-quick-link:hover { background: var(--app-tint); color: var(--app-brand); }
.rs-quick-link i     { width: 14px; text-align: center; font-size: .76rem; opacity: .7; flex-shrink: 0; }
.rs-quick-link:hover i { opacity: 1; color: var(--app-brand); }
.rs-quick-link span  { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* The × earns its place only when the pointer is on the row: a column of
   delete buttons beside a list of links invites the wrong click. */
.rs-quick-x {
    background: none; border: 0; padding: 0 12px 0 6px;
    color: var(--app-muted); font-size: .62rem;
    cursor: pointer; opacity: 0; transition: opacity .15s, color .15s;
}
.rs-quick-row:hover .rs-quick-x { opacity: 1; }
.rs-quick-x:hover, .rs-quick-x:focus-visible { color: var(--app-brand); opacity: 1; }

.rs-quick-grip {
    background: none; border: 0; padding: 0 2px 0 8px;
    color: #C5CAD1; font-size: .62rem;
    cursor: grab; opacity: 0; transition: opacity .15s, color .15s;
}
.rs-quick-row:hover .rs-quick-grip { opacity: 1; }
.rs-quick-grip:hover               { color: var(--app-muted); }
/* Always visible on keyboard focus — the only way in without a mouse. */
.rs-quick-grip:focus-visible { opacity: 1; color: var(--app-text); outline: 2px solid var(--app-brand); outline-offset: 1px; }
.rs-quick-grip:active        { cursor: grabbing; }
.rs-quick-row.is-dragging    { opacity: .45; }
.rs-quick-row.is-dragging .rs-quick-grip { opacity: 1; }

/* On the rail the labels go, like every other label, and the × and the grip
   with them. Hover-preview expands the rail and brings them back. */
body.rs-sidebar-rail:not(.rs-hover-preview) .rs-nav-quick-hd span,
body.rs-sidebar-rail:not(.rs-hover-preview) .rs-quick-link span,
body.rs-sidebar-rail:not(.rs-hover-preview) .rs-quick-x,
body.rs-sidebar-rail:not(.rs-hover-preview) .rs-quick-grip { display: none; }
body.rs-sidebar-rail:not(.rs-hover-preview) .rs-nav-quick-hd { justify-content: center; padding: 8px 0 3px; }
body.rs-sidebar-rail:not(.rs-hover-preview) .rs-quick-link   { justify-content: center; padding: 9px 0; gap: 0; }
body.rs-sidebar-rail:not(.rs-hover-preview) .rs-quick-link i { width: 100%; margin: 0; font-size: 15px; }

/* ── The star in the top bar ─────────────────────────────────────────────── */
.rs-pin {
    background: none; border: 0; cursor: pointer;
    color: var(--app-muted); font-size: .95rem;
    padding: .2rem .35rem; line-height: 1;
    transition: color .15s, transform .15s;
}
.rs-pin:hover      { color: #f0ad2e; transform: scale(1.12); }
.rs-pin.is-pinned  { color: #f0ad2e; }
.rs-pin:disabled   { opacity: .45; cursor: default; transform: none; }


/* ═══════════════════════════════════════════════════════════════════════
   COMPONENTS — shared by every Vue screen (js/App/app.js)
   ═══════════════════════════════════════════════════════════════════════ */
.app-page-title { font-weight: 600; font-size: 1.15rem; color: var(--app-text); }
.app-card-head {
  background: var(--app-surface); border-bottom: 1px solid var(--app-border);
  font-weight: 600; font-size: .82rem; color: var(--app-text); padding: .5rem .85rem;
}
.app-badge { font-weight: 600; font-size: .66rem; letter-spacing: .02em; }
.app-muted { color: var(--app-muted); }
.app-kv { font-size: .8rem; }
.app-kv dt { color: var(--app-muted); font-weight: 500; }
.app-kv dd { margin-bottom: .35rem; }
.app-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.app-table th { font-size: .78rem; color: var(--app-muted); font-weight: 600; white-space: nowrap; }
.app-table td { font-size: .82rem; }
.app-table tr.clickable { cursor: pointer; }
.app-table tr.clickable:hover td { background: var(--app-tint); }
.app-empty { text-align: center; color: var(--app-muted); padding: 2rem 1rem; font-size: .85rem; }

/* table.app-cards — on a phone (under 576 px) each row becomes a small card, so no
   column hides past the right edge. The header row goes; a cell with data-label
   shows that name in a left column beside its value; a cell without one (the
   row's name) spans the card; .app-cards-act (the buttons) sits at the card's foot,
   right; Bootstrap's d-none d-sm-table-cell drops a cell on a phone only. */
@media (max-width: 575.98px) {
  table.app-cards, table.app-cards tbody, table.app-cards tfoot, table.app-cards tr, table.app-cards td { display: block; width: 100%; }
  table.app-cards thead { display: none; }
  table.app-cards tr { padding: .6rem .8rem; border-bottom: 1px solid var(--app-border); }
  table.app-cards tr:last-child { border-bottom: 0; }
  table.app-cards td { border: 0 !important; padding: .1rem 0 !important; text-align: left !important; white-space: normal !important; background: transparent !important; }
  table.app-cards td[data-label] { position: relative; padding-left: 38% !important; min-height: 1.45em; }
  table.app-cards td[data-label]::before { content: attr(data-label); position: absolute; left: 0; top: .1rem; width: 35%; color: var(--app-muted);
                                           font-size: .78rem; font-weight: 400; overflow-wrap: anywhere; }
  table.app-cards td.app-cards-act { text-align: right !important; padding-top: .35rem !important; }
  table.app-cards td.app-cards-act:empty, table.app-cards td[data-label]:empty { display: none; }
  table.app-cards td[colspan] { text-align: center !important; padding: .8rem 0 !important; }
}
.app-filter-bar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: .75rem; }
.app-filter-bar .form-control, .app-filter-bar .form-select { max-width: 220px; }
.app-warn { background: var(--app-warn-bg); border-left: 3px solid var(--app-warn-edge); padding: .5rem .75rem; font-size: .78rem; border-radius: 4px; }
.app-note { background: var(--app-note-bg); border-left: 3px solid var(--app-note-edge); padding: .5rem .75rem; font-size: .78rem; border-radius: 4px; }
/* Filled controls take --app-fill with white text (rsflow.css sets these with !important). */
.btn-primary, .btn-primary:disabled { background: var(--app-fill) !important; border-color: var(--app-fill) !important; color: #fff !important; font-weight: 600; }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active { background: var(--app-fill-dark) !important; border-color: var(--app-fill-dark) !important; color: #fff !important; }
.btn-outline-primary { color: var(--app-brand) !important; border-color: var(--app-fill) !important; }
.btn-outline-primary:hover, .btn-outline-primary:active { background: var(--app-fill) !important; border-color: var(--app-fill) !important; color: #fff !important; }
.badge.bg-primary, .text-bg-primary { background-color: var(--app-fill) !important; color: #fff !important; }
.form-check-input:checked { background-color: var(--app-fill); border-color: var(--app-fill); }
.form-check-input:focus { border-color: var(--app-fill); box-shadow: 0 0 0 .2rem rgba(0, 0, 0, .1); box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--app-brand-light) 35%, transparent); }
.page-item.active .page-link { background-color: var(--app-fill); border-color: var(--app-fill); color: #fff; }
.text-brand { color: var(--app-brand) !important; }

/* No label in capitals (user, 2026-10-02): jquery-confirm sets its dialog buttons in
   capitals ("CANCEL") — undone here, whatever its theme. */
.jconfirm .jconfirm-box .jconfirm-buttons button { text-transform: none !important; letter-spacing: normal !important; }

/* Dialog (app-dialog) */
.app-overlay { position: fixed; inset: 0; background: rgba(15, 18, 32, .45); z-index: 1050; display: flex; align-items: flex-start; justify-content: center; padding: 5vh 12px; overflow-y: auto; }
.app-dialog { background: #fff; border-radius: 8px; width: 100%; max-width: 560px; box-shadow: 0 18px 50px rgba(15, 18, 32, .25); }
.app-dialog.wide { max-width: 900px; }
.app-dialog-head { display: flex; align-items: center; justify-content: space-between; padding: .7rem 1rem; border-bottom: 1px solid var(--app-border); font-weight: 600; }
.app-dialog-body { padding: 1rem; }
.app-dialog-foot { padding: .65rem 1rem; border-top: 1px solid var(--app-border); display: flex; justify-content: flex-end; gap: .5rem; background: var(--app-surface); border-radius: 0 0 8px 8px; }
.app-dialog label.form-label { font-size: .74rem; font-weight: 600; margin-bottom: .2rem; color: var(--app-text); }

/* SLA chips */
.sla-chip { display: inline-block; font-size: .66rem; font-weight: 600; padding: .1rem .45rem; border-radius: 10px; white-space: nowrap; }
.sla-ok { background: #E6F4EA; color: #1E6B34; }
.sla-warn { background: #FFF4E5; color: #8A5300; }
.sla-late { background: #FDE8E8; color: #A61B1B; }

/* Stat tiles */
.app-tile { background: #fff; border: 1px solid var(--app-border); border-radius: 8px; padding: .75rem .9rem; height: 100%; }
.app-tile .t-label { font-size: .78rem; color: var(--app-muted); font-weight: 600; }
.app-tile .t-value { font-size: 1.35rem; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.app-tile .t-sub { font-size: .72rem; color: var(--app-muted); }
.app-tile.rag-green { border-left: 4px solid #1E8E3E; }
.app-tile.rag-amber { border-left: 4px solid #E8A33D; }
.app-tile.rag-red   { border-left: 4px solid #C5221F; }
/* Bootstrap's progress bars in the brand colour, not Bootstrap's blue. */
.progress { --bs-progress-bar-bg: var(--app-brand); }
.app-progress { height: 8px; border-radius: 4px; background: var(--app-surface-2); overflow: hidden; }
.app-progress > span { display: block; height: 100%; background: var(--app-brand-light); }
.app-progress > span.over { background: #C5221F; }

/* Timeline */
.app-timeline { list-style: none; padding: 0; margin: 0; }
.app-timeline li { position: relative; padding: 0 0 .75rem 1.1rem; font-size: .78rem; border-left: 2px solid var(--app-border); margin-left: .35rem; }
.app-timeline li::before { content: ''; position: absolute; left: -6px; top: 3px; width: 10px; height: 10px; border-radius: 50%; background: var(--app-brand-light); border: 2px solid #fff; }
.app-timeline .when { color: var(--app-muted); font-size: .7rem; }

/* Photo grid */
.app-photos { display: flex; flex-wrap: wrap; gap: 8px; }
.app-photos img { width: 96px; height: 96px; object-fit: cover; border-radius: 6px; border: 1px solid var(--app-border); cursor: zoom-in; }

/* Attachment thumbnails (app-files) */
.app-thumb { width: 2.5rem; height: 2.5rem; object-fit: cover; border-radius: .3rem; border: 1px solid var(--app-border, #e5e7eb); cursor: zoom-in; }

/* ── Checklist builder ────────────────────────────────────────────────── */
.cb-item { border: 1px solid var(--app-border); border-radius: .4rem; margin-bottom: .4rem; background: #fff; }
.cb-item.open { border-color: var(--app-brand-light); box-shadow: 0 0 0 2px color-mix(in srgb, var(--app-brand-light) 18%, transparent); }
.cb-item-head { display: flex; align-items: center; gap: .4rem; padding: .45rem .6rem; cursor: pointer; font-size: .875rem; }
.cb-item-head:hover { background: var(--app-surface); }
.cb-item-body { padding: .6rem .75rem .75rem; border-top: 1px dashed var(--app-border); }
.cb-types { display: flex; flex-wrap: wrap; gap: .3rem; }
.cb-phone-wrap { position: sticky; top: 1rem; }
.cb-phone { width: 100%; max-width: 380px; margin: 0 auto; border: 10px solid #1f2329; border-radius: 28px; overflow: hidden; background: var(--app-surface); }
.cb-phone-head { background: var(--app-fill); color: #fff; padding: .6rem .8rem; font-weight: 600; font-size: .9rem; }
.cb-phone-body { max-height: 70vh; overflow-y: auto; padding: .6rem; }
.cb-ph-sec { font-weight: 700; font-size: .85rem; color: var(--app-muted); margin: .7rem 0 .3rem; }
.cb-ph-help { font-size: .75rem; color: var(--app-muted); margin-bottom: .3rem; }
.cb-ph-item { background: #fff; border: 1px solid var(--app-border); border-radius: .5rem; padding: .5rem .6rem; margin-bottom: .4rem; }
.cb-ph-item.fail { border-color: #dc3545; background: #fff5f5; }
.cb-ph-label { font-size: .85rem; font-weight: 600; margin-bottom: .3rem; }
.cb-ph-btns { display: flex; gap: .3rem; }
.cb-ph-btns.wrap { flex-wrap: wrap; }
.cb-ph-btns .btn { flex: 1 1 auto; }
.cb-ph-sign { border: 1px dashed var(--app-border); border-radius: .4rem; height: 3.5rem; display: flex; align-items: center; justify-content: center; font-size: .75rem; color: var(--app-muted); }
.cb-ph-need { font-size: .72rem; color: #b02a37; margin-top: .3rem; }
/* A walk-around stop: its sticker opens its checks */
.cb-ph-stop { font-size: .75rem; color: var(--app-brand); background: var(--app-surface-2); border: 1px dashed var(--app-fill); border-radius: .4rem; padding: .35rem .5rem; margin-bottom: .4rem; }
.cb-copy { background: var(--app-surface-2); border-radius: .5rem; padding: .6rem; }
/* A stop on a run page */
.run-stop { border-left: 4px solid var(--app-border); background: var(--app-surface-2); border-radius: .4rem; padding: .45rem .7rem; margin-bottom: .5rem; }
.run-stop.scanned { border-left-color: #198754; }
.run-stop.no_sticker { border-left-color: var(--app-fill); }
.run-stop.skipped { border-left-color: #6c757d; opacity: .85; }

/* A tick-list of people inside a dialog */
.cb-pick { max-height: 15rem; overflow-y: auto; border: 1px solid var(--app-border); border-radius: .4rem; padding: .25rem .6rem; }

/* ── Job board ─────────────────────────────────────────────────────────── */
.wo-board { display: grid; grid-template-columns: repeat(6, minmax(200px, 1fr)); gap: .6rem; overflow-x: auto; padding-bottom: .5rem; }
.wo-col { background: var(--app-surface-2); border-radius: .5rem; padding: .4rem; min-height: 10rem; }
.wo-col-head { display: flex; justify-content: space-between; align-items: center; font-size: .82rem; font-weight: 700; color: var(--app-muted); padding: .2rem .3rem .4rem; }
.wo-card { display: block; background: #fff; border-radius: .4rem; padding: .45rem .55rem; margin-bottom: .4rem; font-size: .78rem; color: inherit; text-decoration: none; border-left: 4px solid var(--app-border); box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.wo-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,.12); color: inherit; }
.wo-card.prio-emergency { border-left-color: #dc3545; }
.wo-card.prio-urgent { border-left-color: #fd7e14; }
.wo-card-title { font-weight: 600; margin: .15rem 0; }
@media (max-width: 991px) { .wo-board { grid-template-columns: repeat(6, 220px); } }

/* Signature pad (job sign-off) */
.sig-pad { width: 100%; height: 160px; border: 1px dashed var(--app-border); border-radius: .4rem; background: #fff; touch-action: none; cursor: crosshair; }

/* ── Attendance month grid ─────────────────────────────────────────────── */
.att-grid th, .att-grid td { font-size: .78rem; }
.att-grid .att-name { min-width: 11rem; position: sticky; left: 0; background: #fff; z-index: 1; }
.att-grid .att-day { width: 1.9rem; min-width: 1.9rem; text-align: center; padding: .25rem 0; position: relative; font-weight: 600; }
.att-grid thead .att-day div { font-weight: 400; color: var(--app-muted, #6c757d); font-size: .66rem; }
.att-grid .att-off { background: #f3f4f6; }
.att-grid .att-click { cursor: pointer; }
.att-grid .att-click:hover { outline: 2px solid var(--app-brand, #B86B00); outline-offset: -2px; }
.att-PRESENT { background: #d1e7dd; color: #0f5132; }
.att-HALF    { background: #cff4fc; color: #055160; }
.att-ABSENT  { background: #f8d7da; color: #842029; }
.att-LEAVE   { background: #e2e3e5; color: #41464b; }
.att-grid .att-missing { background: repeating-linear-gradient(45deg, #fff, #fff 3px, #fdecee 3px, #fdecee 6px); }
.att-grid .att-flag { position: absolute; top: 1px; right: 1px; font-size: .5rem; color: #dc3545; }
.att-grid .att-pen  { position: absolute; bottom: 1px; right: 1px; font-size: .45rem; opacity: .6; }
.att-key { display: inline-block; width: 1.3rem; text-align: center; border-radius: .2rem; font-weight: 600; }

/* ── Register pages, domaka's way ──────────────────────────────────────────
   A short title with the count, one line of help at most, buttons right;
   status tabs; filters in a white card with labels; the table in a card. */
.app-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; flex-wrap: wrap; margin-bottom: .75rem; }
.app-head-text { min-width: 0; flex: 1 1 320px; }
.app-head-title { margin: 0; font-weight: 600; font-size: 1.15rem; color: var(--app-text); }
.app-head-count { color: var(--app-muted); font-weight: 400; font-size: .95rem; margin-left: .25rem; }
.app-head-sub { color: var(--app-muted); font-size: .78rem; margin-top: .15rem; max-width: 72ch; }
.app-head-actions { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }
.app-head-actions .btn { white-space: nowrap; }
.app-tabs .nav-link { color: var(--app-muted); padding: .4rem .8rem; }
.app-tabs .nav-link:hover { color: var(--app-brand); }
.app-tabs .nav-link.active { color: var(--app-text); font-weight: 600; border-bottom-color: #fff; }
.app-filter-card .card-body { padding: .6rem .9rem; }
.app-filter-card .form-label { font-size: .72rem; color: var(--app-muted); margin-bottom: .2rem; }
.app-table thead th { background: var(--app-surface); }
.app-table a { text-decoration: none; font-weight: 600; }
.app-table a:hover { text-decoration: underline; }
.app-figure { border: 0; box-shadow: 0 1px 2px rgba(16,24,40,.06); }
.app-figure .card-body { padding: .85rem 1rem; }
.app-figure .label { font-size: .82rem; color: var(--app-muted); }
.app-figure .value { font-size: 1.35rem; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; color: var(--app-text); }
.app-figure .hint { font-size: .72rem; color: var(--app-muted); }
.app-figure .icon { color: var(--app-muted); }

/* A detail page's label-over-value pairs (Expenses/view, CashAdvances/view, Invoices/view). */
.app-kv-label { font-size: .76rem; color: var(--app-muted); font-weight: 600; margin-bottom: .1rem; }

/* PM calendar: one colour per state of a due date (PmPlans::calendar). */
.pm-cal td.pm-cell { min-width: 4.2rem; vertical-align: top; }
.pm-chip { display: inline-block; min-width: 1.45rem; padding: 0 .2rem; margin: 1px; border-radius: 4px; font-size: .7rem; font-weight: 600; text-align: center; text-decoration: none; color: #fff; }
.pm-dot { display: inline-block; width: .7rem; height: .7rem; border-radius: 2px; margin-right: .3rem; vertical-align: -1px; }
.pm-bar { display: flex; height: .45rem; border-radius: 3px; overflow: hidden; background: var(--app-border); margin-bottom: 2px; }
.pm-done { background: #0E9F6E; } .pm-done_late { background: #F59E0B; } .pm-open { background: #2563EB; } .pm-overdue { background: #DC2626; }
.pm-planned { background: #CBD5E1; color: #334155 !important; } .pm-not_made { background: #fff; color: #DC2626 !important; box-shadow: inset 0 0 0 1px #DC2626; }
.pm-cancelled { background: #E5E7EB; color: #9CA3AF !important; text-decoration: line-through; }

/* <app-picker>: a strict searchable picker for a long list (js/App/app.js). */
.app-picker { position: relative; }
.app-picker input { padding-right: 1.8rem; text-overflow: ellipsis; }
.app-picker-icon { position: absolute; right: .6rem; top: 50%; transform: translateY(-50%); font-size: .75rem; color: var(--app-muted, #6b7280); pointer-events: none; }
.app-picker-menu { position: absolute; z-index: 1085; left: 0; right: 0; min-width: 18rem; max-height: 19rem; overflow-y: auto; margin-top: 2px;
                   background: #fff; border: 1px solid var(--app-border, #dee2e6); border-radius: .35rem; box-shadow: 0 .4rem 1rem rgba(0,0,0,.12); }
.app-picker-item { padding: .35rem .65rem; cursor: pointer; font-size: .85rem; line-height: 1.25; border-bottom: 1px solid #f3f4f6; }
.app-picker-item:last-child { border-bottom: 0; }
.app-picker-item.active { background: #fdf3e6; }
.app-picker-item.chosen { box-shadow: inset 3px 0 0 var(--app-brand, #a85f00); }