/* theme vars - single source of truth for light/dark colors. toggleTheme() in
   api.js just adds/removes .dark-version on body, no js ever writes a color
   directly. use these vars instead of a new hardcoded hex somewhere */
:root {
  --surface-input: #ffffff;       /* form-control/select2 background */
  --surface-input-border: #d2d6da;
  --surface-input-disabled: #e9ecef;
  --text-placeholder: rgba(0, 0, 0, 0.35);
  --text-secondary: #8392ab;      /* Bootstrap .text-secondary's own color */
  --text-icon-dark: #252f40;      /* Bootstrap .text-dark's own color, as an icon glyph */
  --border-subtle: rgba(0, 0, 0, 0.08);
  --icon-whatsapp: #1da851;       /* WhatsApp contact action - darkened from the brand's #25D366 to clear 3:1 against white (measured ~3.07:1) */
  /* Task F3 - task urgency badges (tasks.html). Argon's own --bs-warning IS
     orange (no separate yellow ships with this theme - see .bg-gradient-
     yellow's own comment below), and --bs-danger's rose #f5365c isn't dark/
     severe enough to read as distinct from a genuinely "overdue" state -
     two new tokens, not two hardcoded hexes in a page. Both computed
     (WCAG relative-luminance contrast, not eyeballed) against this file's
     real backgrounds - light: #ffffff card / #f8f9fa page; dark:
     --dark-surface #282828 / --dark-bg-body #202020 - a single hex could
     not clear 3:1 (WCAG 1.4.11, non-text/icon content) in both modes for
     either color, so each is a genuine light/dark pair, not one value
     reused. */
  --urgency-yellow: #997404;  /* dark goldenrod - 4.33:1 on card/4.10:1 on page. A brighter yellow (e.g. f5c026 below) drops to ~1.6:1 on light backgrounds - fails outright */
  --urgency-overdue: #8b0000; /* dark red/maroon - 10.01:1 on card/9.50:1 on page. Deliberately far from --bs-danger's rose f5365c in hue, not just darker, so the two don't read as shades of the same red */
}
.dark-version {
  /* dark-only surface tokens - navy-to-gray recolor. light-mode surfaces are
     Bootstrap/argon defaults and are intentionally not tokenized. */
  --dark-bg-body:        #202020;
  --dark-surface:        #282828;
  --dark-surface-raised: #323232;
  --dark-surface-sunken: #2a2a2a;
  --dark-border:         #3f3f3f;
  --dark-gradient-from:  #323232;
  --dark-gradient-to:    #202020;

  --surface-input: var(--dark-surface-raised);          /* was #1e2a5e */
  --surface-input-border: var(--dark-border);           /* was #2d3a68 */
  --surface-input-disabled: var(--dark-surface-sunken); /* was #17224d */
  --text-placeholder: rgba(255, 255, 255, 0.5);
  --text-secondary: rgba(255, 255, 255, 0.6);
  --text-icon-dark: #ffffff;
  --border-subtle: rgba(255, 255, 255, 0.08);
  --icon-whatsapp: #25d366;       /* full brand green - dark card surfaces give it comfortably >3:1 */
  --urgency-yellow: #f5c026;  /* already this file's own .bg-gradient-yellow start color (its own "argon has no yellow" note below) - 8.74:1 on dark-surface/9.66:1 on dark-body, reused rather than picking a fresh hex */
  --urgency-overdue: #ff3131; /* pure saturated red, hue deliberately far from --bs-danger's rose f5365c - 4.03:1 on dark-surface/4.45:1 on dark-body. #8b0000 (the light-mode value) drops to ~1.5:1 here - fails outright */
}

/* WhatsApp contact action - shared by every row action / detail modal that
   renders one (see static/js/phone.js's renderWhatsappButton()). Disabled
   state (no valid phone) reuses --text-secondary, matching every other
   disabled icon button in the app rather than a bespoke gray. */
.whatsapp-action {
  color: var(--icon-whatsapp);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.whatsapp-action:hover,
.whatsapp-action:focus {
  color: var(--icon-whatsapp);
}

/* Task urgency badge icon colors (tasks.html, F3) - same .text-* utility
   naming convention Bootstrap already uses for .text-warning/.text-danger/
   .text-secondary (all three of which the other three urgency stages reuse
   directly, no new class needed for them). Only "approaching" and
   "overdue" need a new class, since only those two need a token this
   theme doesn't already ship. */
.text-urgency-yellow {
  color: var(--urgency-yellow);
}
.text-urgency-overdue {
  color: var(--urgency-overdue);
}
.whatsapp-action:disabled {
  color: var(--text-secondary);
  opacity: 0.65;
  cursor: not-allowed;
}

/* z-index scale - single source of truth for stacking order, lowest to highest.
   No component may write a raw z-index number; add a variable here instead.
   Bootstrap's own layers (--bs-backdrop-zindex:1040, --bs-modal-zindex:1050,
   --bs-popover-zindex:1060, --bs-tooltip-zindex:1070, .dropdown-menu's literal
   1000) are left untouched so native components keep layering correctly against
   each other - we only add variables for OUR OWN overlays, aliasing bootstrap's
   where one already exists, and placing new layers to fit around them:
   content -> sidebar -> sticky header -> [bootstrap dropdown: 1000] ->
   modal backdrop -> modal/drawer -> toasts/validation alerts ->
   [bootstrap popover: 1060] -> tooltips */
:root {
  --z-content: 1;              /* in-place sticky bits, e.g. a table's own header row */
  --z-sidebar: 100;             /* well under dropdowns/modals */
  --z-sticky-header: 500;       /* under bootstrap's own dropdown (1000) */
  --z-modal-backdrop: var(--bs-backdrop-zindex, 1040);
  --z-modal: var(--bs-modal-zindex, 1050);
  --z-toast: 1065;              /* above modal (1050) and popover (1060), under tooltip (1070) */
  --z-tooltip: var(--bs-tooltip-zindex, 1070);
  /* overlays that live INSIDE an open modal (the @ reference picker): the modal is
     already its own stacking context, so this only has to clear the modal's own
     content - it never competes with the page-level layers above */
  --z-in-modal-popup: 20;
}

.tableFixHead,
thead,
th {
  position: sticky !important;
  top: 0;
  z-index: var(--z-content);
}

/* Argon's own .navbar-vertical.navbar-expand-xs{z-index:9999} (argon-dashboard.css)
   is a more specific selector than that same file's .sidenav{z-index:999} and wins
   on specificity regardless of load order - our sidebar carries both classes, so
   its REAL computed z-index was 9999, an order of magnitude above bootstrap's own
   modal(1050)/backdrop(1040). That's the entire root cause of the sidebar rendering
   (and staying clickable) on top of every modal in the app - confirmed live via
   getComputedStyle and a click-hit-test that landed on a sidebar .nav-link instead
   of the modal backdrop. #sidenav-main's ID gives this enough specificity to win
   regardless of which of argon's breakpoint variants (xs/sm/md/lg/xl/xxl) matches. */
#sidenav-main {
  z-index: var(--z-sidebar) !important;
}

.navbar-main {
  z-index: var(--z-sticky-header);
}

@media print {
  body *:not(#info-report):not(#info-report *) {
    visibility: hidden;
    background-color: black;
  }
  
  #info-report {
    position: fixed !important;
    visibility: visible !important;
    top: 0;
    left: 0;
    width: 99.9%;
    height: 100%;
    background-color: #ffffff;
    overflow: auto;
    padding: 1rem;
    box-shadow: 0 0 9px rgba(0, 0, 0, 0.5);
  }
}
    /* CSS التنبيه نفسه يظل زي ما هو عشان يظهر فوق */
    .alert-box {
      border-radius: 4px;
      box-shadow: 20px;
      display: none;
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      /* toast layer - above modals (so an alert triggered from inside a modal, e.g.
         a wizard validation message, still shows), below tooltips. see the z-index
         scale at the top of this file - was a raw 2147483647 before. */
      z-index: var(--z-toast) !important;
    }

    .blurred {
      /* هنا قوة الضباب، 5px كويسة */
      filter: blur(10px);
      /* عشان الشكل يكون حلو أثناء البلور */
      transition: filter 0.3s ease-out;
      /* عشان ما تقدر تضغط على شي ورا */
      pointer-events: none;
    }

    /* الكود حق المحتوى الأساسي (اختياري) */
    body {
      transition: filter 0.3s ease-out;
      /* عشان حركة البلور تكون ناعمة */
    }

    /* argon-dashboard.css themes cards/modals for dark mode but not form inputs,
       they'd stay plain white against a dark card without this */
    .dark-version .form-control,
    .dark-version select.form-control {
      background-color: var(--surface-input);
      border-color: var(--surface-input-border);
      color: #fff;
    }

    .dark-version .form-control:focus,
    .dark-version select.form-control:focus {
      background-color: var(--surface-input);
      border-color: #5e72e4;
      color: #fff;
      box-shadow: none;
    }

    .dark-version .form-control::placeholder {
      color: var(--text-placeholder);
    }

    .dark-version .form-control:disabled,
    .dark-version .form-control[readonly] {
      background-color: var(--surface-input-disabled);
      color: var(--text-secondary);
    }

    .dark-version select.form-control option {
      background-color: var(--surface-input);
      color: #fff;
    }

    /* select.form-control inherits appearance:none with no arrow, looks like a
       disabled text field otherwise. positioned for RTL (left side) since
       .form-select's arrow doesn't flip in this build - that bug is why we use
       .form-control for selects everywhere instead. text/date inputs untouched */
    select.form-control {
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
      background-repeat: no-repeat;
      background-position: left 0.75rem center;
      background-size: 16px 12px;
      padding-left: 2.25rem;
    }

    .dark-version select.form-control {
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    }

    /* select2's popup renders outside .form-control/.card, appended to body or
       nearest modal/offcanvas, so its theme's light-only colors ignored .dark-version
       entirely. selectors below match select2-bootstrap-5-theme's own specificity
       so they win without !important, same palette as .form-control above */
    .dark-version .select2-container--bootstrap-5 .select2-selection {
      background-color: var(--surface-input);
      border-color: var(--surface-input-border);
      color: #fff;
    }
    .dark-version .select2-container--bootstrap-5 .select2-selection--single {
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    }
    .dark-version .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
      color: #fff;
    }
    .dark-version .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered .select2-selection__placeholder {
      color: var(--text-placeholder);
    }
    .dark-version .select2-container--bootstrap-5.select2-container--focus .select2-selection,
    .dark-version .select2-container--bootstrap-5.select2-container--open .select2-selection {
      border-color: #5e72e4;
      box-shadow: none;
    }
    .dark-version .select2-container--bootstrap-5 .select2-dropdown {
      background-color: var(--surface-input);
      border-color: var(--surface-input-border);
      color: #fff;
    }
    .dark-version .select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field {
      background-color: var(--surface-input-disabled);
      border-color: var(--surface-input-border);
      color: #fff;
    }
    .dark-version .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option {
      color: #fff;
    }
    .dark-version .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__message,
    .dark-version .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--disabled,
    .dark-version .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option[aria-disabled="true"] {
      color: var(--text-placeholder);
    }
    .dark-version .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--highlighted {
      background-color: var(--surface-input-border);
      color: #fff;
    }
    .dark-version .select2-container--bootstrap-5.select2-container--disabled .select2-selection,
    .dark-version .select2-container--bootstrap-5.select2-container--disabled.select2-container--focus .select2-selection {
      background-color: var(--surface-input-disabled);
      color: var(--text-secondary);
      border-color: var(--surface-input-border);
    }

    /* date input's calendar icon is its own element, stays dark-gray regardless
       of the input's own bg - near invisible once dark. webkit-only but fine,
       we only target chromium here */
    .dark-version input[type="date"].form-control::-webkit-calendar-picker-indicator {
      filter: invert(1);
    }

    .dark-version .input-group-text {
      background-color: var(--surface-input);
      border-color: var(--surface-input-border);
      color: #fff;
    }

    /* .text-secondary/.text-dark aren't theme-aware on their own (single literal
       color each). used all over - KPI captions, table headers, sidebar icons.
       used to be "fixed" by darkMode() renaming the class at toggle time, but
       that's a one-way mutation that breaks on revert (see toggleTheme() in
       api.js for the full story). this is the actual fix, pure css cascade */
    .dark-version .text-secondary {
      color: var(--text-secondary) !important;
    }
    .dark-version .text-dark {
      color: var(--text-icon-dark) !important;
    }

    /* sidenav-main keeps its literal bg-white class, and since this file loads
       before argon-dashboard.css, at equal specificity argon's own dark-mode rule
       loses the tie and stays white. the #id here gives enough specificity to win */
    .dark-version #sidenav-main {
      background: var(--dark-surface) !important;
    }

    /* active nav item's pill stays near-white (#f6f9fc) in dark mode, and its text
       goes white too (a broader argon rule wins that tie) - white on near-white.
       reuses the translucent highlight argon's own non-white sidenav themes use */
    .dark-version #sidenav-main .nav-link.active {
      background-color: rgba(255, 255, 255, 0.13) !important;
    }
    .dark-version #sidenav-main .nav-link.active .nav-link-text {
      color: #fff !important;
      opacity: 1 !important;
    }

    /* .form-switch inherits LTR margins from .form-check (negative margin-left
       meant for float layout, irrelevant once flexed) - drags the switch into
       the label in RTL. neither side is RTL-aware by default */
    .rtl .form-switch {
      padding-left: 0;
    }
    .rtl .form-switch .form-check-input {
      margin-left: 0;
      margin-right: 0;
    }
    .rtl .form-switch .form-check-label {
      margin-left: 0;
      margin-right: .5rem;
    }

    /* fills the sidenav-header box with our (wide) logo - argon's default sizing
       is for its own small square mark, way too tight. object-fit:contain keeps
       the aspect ratio instead of stretching it */
    .sidenav-header {
      padding: 0 !important;
    }
    #sidenav-main .navbar-brand {
      padding: 0 !important;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    #sidenav-main .navbar-brand-img.brand-logo-img {
      max-width: 100% !important;
      max-height: 100% !important;
      width: 100%;
      height: 100%;
      object-fit: contain;
    }

    /* site font is Tajawal, replacing argon's default Open Sans. redefining the
       --bs-font-sans-serif var covers most of it for free. .card .card-body and
       .text-sans-serif hardcode "Open Sans" as a literal though, need direct overrides */
    :root {
      --bs-font-sans-serif: 'Tajawal', sans-serif !important;
    }
    .card .card-body {
      font-family: 'Tajawal', sans-serif !important;
    }
    body .text-sans-serif {
      font-family: 'Tajawal', sans-serif !important;
    }

    /* argon has no purple/yellow gradient (its "warning" is orange). used to live
       page-scoped in config.html, but passengers/repairshops needed it too and
       weren't loading that stylesheet - icons were rendering with no bg at all.
       centralized here so every page actually gets it */
    .bg-gradient-purple {
      background-image: linear-gradient(310deg, #7928ca 0%, #a56eff 100%);
    }
    .bg-gradient-yellow {
      background-image: linear-gradient(310deg, #f5c026 0%, #ffe066 100%);
    }

    /* argon's .icon-shape i has a hardcoded top:14px meant for non-flex usage,
       shifts our already flex-centered icons off-center. centralized here (not
       just adding flex classes per-page) so every icon-shape is centered
       regardless, including screens built later. !important needed since this
       file loads before argon-dashboard.css */
    .icon-shape {
      display: flex;
      align-items: center;
      justify-content: center;
      /* argon's own width/height:48px (argon-dashboard.css) set flex-basis
         only, not a floor - inside a flex row (every KPI card's icon sits
         next to a title+value block), the default flex-shrink:1 lets long
         card content squeeze this circle into an oval. flex-shrink:0 plus a
         reinforced min-width/height (belt and suspenders, in case a future
         card nests this inside a DIFFERENT flex context with its own
         cross-axis stretch) keeps every icon-shape a true circle regardless
         of sibling content length. */
      flex-shrink: 0;
      min-width: 48px;
      min-height: 48px;
    }

    .icon-shape i {
      position: static !important;
      top: 0 !important;
      line-height: 1;
    }

    /* Uniform badge width per status GROUP (2026-09-01) - every badge within
       one status family (task status, trip status, maintenance status, backup
       type, backup result) shares ONE width, sized to that family's own
       longest label, so a table column of them reads as a straight edge
       instead of ragged. min-width, not width: never clips a label that
       turns out longer than measured here, and .badge's own existing
       text-align:center (Bootstrap default, argon-dashboard.css) centers
       shorter labels within it - nothing to add for that part. One rule per
       family, all defined here, never redefined per-page. Every family gets
       its OWN width, deliberately NOT one universal width for every status
       badge everywhere - forcing trip status (longest rendered label
       "مخططة") to match task status (longest "قيد التنفيذ", ~11 chars incl.
       space) would make short labels look adrift in unnecessary padding.
       Values below are each the longest real label's live-measured
       rendered width (Playwright, both themes) rounded UP past it, not the
       naive rem-per-character guess - a floor set exactly at that label's
       own natural width still clips it by a sub-pixel under real font
       metrics, so every value here clears its own longest label with
       visible margin, not just meets it.
       Existing marker class .status-badge (already applied by tasks.html/
       trips.html/car_maintenance.html, previously carrying zero CSS of its
       own) stays a plain hook - the width-bearing class is one of the five
       below, added alongside it. */
    .badge-status-task { min-width: 5.5rem; }
    .badge-status-trip { min-width: 4.5rem; }
    .badge-status-maint { min-width: 6rem; }
    .badge-status-backup-type { min-width: 4.5rem; }
    .badge-status-backup-result { min-width: 4.5rem; }

    /* every <hr class="horizontal dark"> hardcodes the light-background variant.
       darkMode() used to rename it to .light at toggle time, reproduced here as
       a plain cascade override instead since the toggle doesn't touch classes anymore */
    .dark-version hr.horizontal.dark {
      background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));
    }

/* dark-mode navy-to-gray recolor - overrides argon-dashboard.css's remaining
   hardcoded navy surfaces (.dark-version rules starting at argon-dashboard.css:25114).
   custem.css loads BEFORE argon-dashboard.css, so every selector here is prefixed
   with `body` to beat the inverted load order at equal-or-higher specificity, and
   carries !important wherever argon's own original rule does. Surfaces only - text
   color, opacity, and translucent rgba(255,255,255,...) values are untouched. */
body.dark-version {
  background-color: var(--dark-bg-body) !important;
}
body.dark-version > div[class*='bg-'] {
  background-color: var(--dark-bg-body) !important;
}
body.dark-version .sidenav {
  background: var(--dark-surface) !important;
}
body.dark-version .card,
body.dark-version .swal2-popup,
body.dark-version .dropdown .dropdown-menu,
body.dark-version .kanban-board {
  background: var(--dark-surface);
}
body.dark-version .bg-gradient-dark {
  background-image: linear-gradient(195deg, var(--dark-gradient-from), var(--dark-gradient-to));
}

/* brand logo, dark-mode variant swap - background-image on a non-replaced
   element (never content: on <img>, never JS-assigned src - both defeat the
   cascade / break in Firefox). paths are relative to THIS file (frontend/
   static/css/custem.css), so they resolve correctly for every page regardless
   of subfolder depth. */
:root {
  --brand-logo-src: url("../img/Deafah-logo/deafahLogo.png");
}
.dark-version {
  --brand-logo-src: url("../img/Deafah-logo/deafahLogo-dark.png");
}
.brand-logo-img {
  background-image: var(--brand-logo-src);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  display: inline-block;
  width: 100%;
  height: 100%;
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}

/* bidi isolation for any inline value that mixes a date + a 12h time (or any
   other run starting with Latin digits) inside RTL text - without this, the
   browser's bidi algorithm can visually reorder the two runs (e.g. render
   "12:42 م 2026-08-24" as time-then-date even though the source string is
   date-then-time). isolate, not a fixed dir, so the run still renders in its
   own natural order regardless of what surrounds it. theme/color-neutral,
   safe in both :root and .dark-version. */
.bidi-isolate {
  unicode-bidi: isolate;
}

/* ══════ audit trail (activity feed) + @[type:id] reference chips / picker ══════
   Shared by all five module pages through static/js/activity-feed.js. Moved here
   from tasks.html's own <style> (Task G2), where the chip colours were hardcoded
   hex and the picker carried a raw z-index:1070 - both fixed in the move. Every
   colour pair was chosen by computed WCAG contrast (>= 4.5:1, text on its own
   tint over the real card surface: #ffffff light / --dark-surface #282828 dark),
   not by eye - the previous chip colours measured 1.86-3.64:1 and failed. */
:root {
  --ref-car-fg: #4458cb;  --ref-car-bg: rgba(68, 88, 203, 0.12);    /* 5.06:1 on its tint */
  --ref-user-fg: #0f7040; --ref-user-bg: rgba(15, 112, 64, 0.12);   /* 5.17:1 */
  --ref-task-fg: #a63a0c; --ref-task-bg: rgba(166, 58, 12, 0.12);   /* 5.38:1 */
  --ref-missing-fg: #64748b;                                        /* 4.76:1 on white */
  --ref-picker-hover: rgba(68, 88, 203, 0.10);
  --feed-system-fg: #5b6b82;                                        /* 5.43:1 on white */
  --feed-system-bg: rgba(91, 107, 130, 0.07);
  --feed-system-accent: #5b6b82;
  --feed-note-accent: #4458cb;
  --feed-state-accent: #8392ab;
  --diff-ins-fg: #14532d; --diff-ins-bg: rgba(20, 83, 45, 0.16);    /* 6.93:1 */
  --diff-del-fg: #991b1b; --diff-del-bg: rgba(153, 27, 27, 0.16);   /* 6.26:1 */
  --feed-moved-bg: rgba(68, 88, 203, 0.14);
  /* every detail view's labels (the five detail modals' <dt>, the driver actuals modal's <dt>,
     the trip stop meta line). Was #94a3b8 = 2.56:1 on white, under WCAG AA; #627693 is the
     same hue darkened to 4.63:1 on the measured #fff modal surface - visibly heavier, accepted
     (owner ruling, 3a). Dark mode keeps #94a3b8, which already clears. */
  --detail-label-fg: #627693;
}
body.dark-version {
  --ref-car-fg: #a5b1ff;  --ref-car-bg: rgba(165, 177, 255, 0.12);  /* 5.72:1 */
  --ref-user-fg: #5ee0a0; --ref-user-bg: rgba(94, 224, 160, 0.12);  /* 6.80:1 */
  --ref-task-fg: #ff9a73; --ref-task-bg: rgba(255, 154, 115, 0.12); /* 5.61:1 */
  --ref-missing-fg: #a3aec2;                                        /* 6.59:1 on #282828 */
  --ref-picker-hover: rgba(165, 177, 255, 0.12);
  --feed-system-fg: #b4bfd1;                                        /* 7.94:1 */
  --feed-system-bg: rgba(180, 191, 209, 0.07);
  --feed-system-accent: #b4bfd1;
  --feed-note-accent: #a5b1ff;
  --feed-state-accent: rgba(255, 255, 255, 0.35);
  --diff-ins-fg: #86efac; --diff-ins-bg: rgba(134, 239, 172, 0.16); /* 6.93:1 */
  --diff-del-fg: #fca5a5; --diff-del-bg: rgba(252, 165, 165, 0.16); /* 5.52:1 */
  --feed-moved-bg: rgba(165, 177, 255, 0.16);
  --detail-label-fg: #94a3b8;   /* 5.75:1 on --dark-surface (measured) */
}

/* reference chips - server-rendered by the shared resolver (references.py),
   inserted via .html(); ref-missing (deleted OR out of scope, identical on
   purpose) is muted, dashed and never clickable */
.ref-chip { display: inline-flex; align-items: center; gap: .25rem; padding: .1rem .5rem; border-radius: 1rem;
  font-size: .85em; cursor: pointer; text-decoration: none; white-space: nowrap; }
.ref-chip.ref-car { background: var(--ref-car-bg); color: var(--ref-car-fg); }
.ref-chip.ref-user { background: var(--ref-user-bg); color: var(--ref-user-fg); }
.ref-chip.ref-task { background: var(--ref-task-bg); color: var(--ref-task-fg); }
.ref-chip.ref-missing { background: transparent; color: var(--ref-missing-fg); border: 1px dashed var(--ref-missing-fg); cursor: default; }
.ref-chip.ref-missing .ref-missing-marker { font-size: .85em; }

/* @ picker - a DOM descendant of the modal that opens it (Bootstrap's focus
   trap makes any input outside the open modal unfocusable), position:fixed so
   .modal-content's position:relative never becomes its containing block.
   `body` prefix REQUIRED: the picker carries Bootstrap's .card class, and this
   file loads BEFORE argon-dashboard.css, whose `.card{position:relative}` (same
   specificity) otherwise wins - found by the Phase 3C real-click verification,
   where the picker rendered ~440px/620px away from its textarea, unclickable.
   (In tasks.html's inline <style>, loaded after argon, the plain selector won.) */
body .ref-picker { position: fixed; z-index: var(--z-in-modal-popup); width: 260px; }
.ref-picker-results { max-height: 220px; overflow-y: auto; }
.ref-picker-results .ref-picker-item { padding: .35rem .5rem; border-radius: .35rem; cursor: pointer; font-size: .9em; }
.ref-picker-results .ref-picker-item:hover { background: var(--ref-picker-hover); }
.ref-picker-results .ref-picker-empty { padding: .5rem; color: var(--text-secondary); font-size: .85em; text-align: center; }
.ref-car-body dt { color: var(--text-secondary); font-size: .8rem; font-weight: 700; margin-top: .75rem; }
.ref-car-body dd { margin-bottom: 0; }

/* the user-reference popover: Bootstrap's own popover custom properties, fed
   from this file's tokens (moved from tasks.html unchanged) */
.dark-version .popover {
  --bs-popover-bg: var(--surface-input);
  --bs-popover-border-color: var(--border-subtle);
  --bs-popover-body-color: var(--text-icon-dark);
}

/* the feed: one card per save; system entries (automatic transitions, cascades)
   are tinted, notes carry the accent colour, full-state entries a neutral edge */
.af-tabs { margin-bottom: .75rem; }
.af-composer { margin-bottom: 1rem; position: relative; }
.af-composer-foot { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-top: .35rem; }
.af-counter { color: var(--text-secondary); font-size: .75rem; }
.af-event { border: 1px solid var(--border-subtle); border-inline-start-width: 3px; border-radius: .75rem; padding: .6rem .75rem; margin-bottom: .6rem; }
.af-event.af-kind-note { border-inline-start-color: var(--feed-note-accent); }
.af-event.af-kind-state { border-inline-start-color: var(--feed-state-accent); }
.af-event.af-kind-system { background: var(--feed-system-bg); border-inline-start-color: var(--feed-system-accent); }
.af-event-head { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; flex-wrap: wrap; font-size: .8125rem; }
.af-actor { font-weight: 700; }
.af-title { color: var(--text-secondary); }
.af-time { color: var(--text-secondary); font-size: .75rem; white-space: nowrap; }
.af-caption { color: var(--feed-system-fg); font-size: .8125rem; }
.af-record-label { color: var(--text-secondary); font-size: .75rem; }
.af-lines { margin-top: .35rem; }
.af-line { font-size: .875rem; padding: .1rem 0; overflow-wrap: anywhere; }
.af-label { color: var(--text-secondary); }
.af-dash { color: var(--text-secondary); }
.af-group-head { font-weight: 700; font-size: .8125rem; margin-top: .35rem; }
.af-group-head + .af-line, .af-group .af-line { padding-inline-start: .75rem; }
.af-note-body { white-space: pre-wrap; font-size: .875rem; margin-top: .35rem; overflow-wrap: anywhere; }
.af-auto { margin-top: .5rem; padding: .45rem .6rem; border-radius: .5rem; background: var(--feed-system-bg);
  border-inline-start: 3px solid var(--feed-system-accent); }
.af-toggle { font-size: .8125rem; padding: 0; border: 0; background: none; color: var(--ref-car-fg); cursor: pointer; }
.af-toggle:hover, .af-toggle:focus { text-decoration: underline; }
.af-diff { white-space: pre-wrap; font-size: .875rem; margin-top: .25rem; overflow-wrap: anywhere; }
.af-diff ins { background: var(--diff-ins-bg); color: var(--diff-ins-fg); text-decoration: none; border-radius: .2rem; }
.af-diff del { background: var(--diff-del-bg); color: var(--diff-del-fg); border-radius: .2rem; }
.af-full { white-space: pre-wrap; font-size: .8125rem; margin-top: .25rem; padding: .4rem .5rem; border: 1px solid var(--border-subtle); border-radius: .5rem; }
.af-order { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-top: .25rem; font-size: .875rem; }
.af-order-col-head { color: var(--text-secondary); font-size: .75rem; font-weight: 700; }
.af-order ol { margin: 0; padding-inline-start: 1.25rem; }
.af-order li.af-moved { background: var(--feed-moved-bg); border-radius: .25rem; }
.af-more-wrap { text-align: center; margin: .5rem 0; }
.af-empty, .af-end-marker { color: var(--text-secondary); font-size: .8125rem; text-align: center; padding: .75rem .5rem; }
.af-archive-item { cursor: pointer; }
body .af-archive-item:hover { background: var(--ref-picker-hover); }   /* body: beats argon's later .list-group-item-action:hover */