/* CM001 kit — global.css  ·  the platform styling FLOOR
 * ---------------------------------------------------------------------------
 * Loaded LAST in the kit, but every rule lives in a LOW-priority @layer, so it
 * can only ever fill a gap — never fight the legacy unlayered base.css, a
 * component class, or an inline style. Two jobs:
 *
 *   1. cm.tokens — define the custom properties that pages CONSUME but nothing
 *      DEFINES, so those references stop resolving to `initial` / transparent.
 *      `--surface-1` alone is read by 11 card / input backgrounds and was set
 *      nowhere: every one of them rendered a transparent background. The rest
 *      already carry an inline / scoped value or a fallback — those lines are
 *      pure backstops and change nothing where a real value is present.
 *
 *   2. cm.base — a default look for bare, class-less HTML the legacy base only
 *      styles when it carries a class (a plain <table>, <button>, <hr>), for the
 *      headings h4–h6 it never styled, and for the disabled / read-only /
 *      invalid field states that had no global standard. Any component rule
 *      (cm.components / cm.grid) or the unlayered legacy base outranks all of
 *      this, so an already-styled element is never disturbed.
 *
 * Layer order (from theme.css.php + cm/base.css, earlier = weaker):
 *   cm.reset < cm.tokens < cm.base < cm.components < cm.grid < cm.override
 * -------------------------------------------------------------------------- */
@layer cm.reset, cm.tokens, cm.base, cm.components, cm.grid, cm.pages, cm.override;

/* ============================ 1 · TOKEN FLOOR ============================= */
@layer cm.tokens {
  :root {
    /* Confirmed broken (defined nowhere, no fallback at the use site). */
    --surface-1:      var(--surface);              /* card / input backgrounds  */
    --faint:          var(--text-3);               /* facility-tree separators  */

    /* Backstops for tokens normally set inline or on a component; they only
       bite if that local value is ever missing. Harmless when it is present. */
    --font:           var(--font-base, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
    --focus-ring:     var(--brand);
    --brand-contrast: var(--on-brand, #fff);
    --internal:       var(--info, var(--brand));
    --spin-size:      20px;
    --accent:         var(--brand);
    --acc:            var(--brand);                /* announcement / landing accent */
    --tc:             var(--brand);                /* authority-map tier colour  */
    --c:              var(--brand);                /* filter-chip accent         */
    --um-acc:         var(--brand);
    --ann-accent:     var(--brand);
    --pwa-accent:     var(--brand);
    --cal-cell-min:   120px;
    --pf-gap:         var(--space-3, 12px);
    --rail-w:         4px;
    --rail-c:         var(--brand);
    /* Sidebar group-title highlight band. Root recolours this in Design Suite → Theme Studio;
       this is only the default so the band is visible even before a theme overrides it. */
    --nav-group-bg:   color-mix(in srgb, var(--brand) 10%, var(--surface));
  }
}

/* ============================ 2 · ELEMENT FLOOR ========================== */
@layer cm.base {

  /* — Typography the legacy base never reached (it stops at h1–h3) — */
  h4, h5, h6 { margin: 0 0 .4em; line-height: 1.25; font-weight: 700; color: var(--text); }
  h4 { font-size: 13.5px; }
  h5 { font-size: 12.5px; }
  h6 { font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); }

  p:not([class]) { margin: 0 0 .75em; }
  small { font-size: var(--fs-sm, 12px); color: var(--text-2); }
  a:not([class]) { color: var(--brand); text-decoration: none; }
  a:not([class]):hover { text-decoration: underline; }

  /* — Lists (keep the native indent, calm the rhythm) — */
  ul:not([class]), ol:not([class]) { margin: 0 0 .75em; padding-inline-start: 1.4em; }
  ul:not([class]) li, ol:not([class]) li { margin: .15em 0; }
  dl:not([class]) { margin: 0 0 .75em; }
  dl:not([class]) dt { font-weight: 600; color: var(--text-2); }
  dl:not([class]) dd { margin: 0 0 .5em; color: var(--text); }

  /* — Quotes, code, keys — */
  blockquote:not([class]) {
    margin: 0 0 .75em; padding: .4em 1em; color: var(--text-2);
    border-inline-start: 3px solid var(--line-2, var(--line)); background: var(--surface-2);
    border-radius: var(--radius-sm, 8px);
  }
  code, kbd, samp { font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace); font-size: .92em; }
  :not(pre) > code:not([class]) {
    background: var(--surface-2); color: var(--text);
    padding: .1em .4em; border-radius: var(--radius-sm, 6px); border: 1px solid var(--line);
  }
  pre:not([class]) {
    margin: 0 0 .75em; padding: 12px 14px; overflow-x: auto;
    background: var(--surface-2); color: var(--text);
    border: 1px solid var(--line); border-radius: var(--radius-md, 10px);
    font-family: var(--font-mono, ui-monospace, monospace); font-size: 12.5px; line-height: 1.5;
  }
  kbd:not([class]) {
    background: var(--surface); color: var(--text);
    border: 1px solid var(--line-2, var(--line)); border-bottom-width: 2px;
    border-radius: var(--radius-sm, 6px); padding: .05em .4em; font-size: .85em;
  }
  mark { background: color-mix(in srgb, var(--warn) 30%, transparent); color: inherit; padding: 0 .15em; border-radius: 3px; }

  /* — A bare rule (legacy only styles hr.sep) — */
  hr:not([class]) { border: 0; border-top: 1px solid var(--line); margin: 16px 0; }

  /* — A class-less table gets the settings-table look instead of raw browser default — */
  table:not([class]) { width: 100%; border-collapse: collapse; font-size: 13px; color: var(--text); }
  table:not([class]) th { text-align: start; font-weight: 700; color: var(--text-2); padding: 8px 10px; border-bottom: 1px solid var(--line); }
  table:not([class]) td { padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
  caption { caption-side: top; text-align: start; color: var(--text-3); font-size: 12px; padding: 0 0 6px; }

  /* — A class-less button gets the neutral .btn look (legacy styles .btn, not the element) — */
  button:not([class]) {
    display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px;
    border-radius: var(--radius-md, 10px); border: 1px solid var(--line-2, var(--line));
    background: var(--surface); color: var(--text); font: inherit; font-weight: 600; font-size: 13px;
    cursor: pointer; line-height: 1;
  }
  button:not([class]):hover { background: var(--surface-2); }

  /* — Grouping controls — */
  fieldset:not([class]) { border: 1px solid var(--line); border-radius: var(--radius-md, 10px); padding: 12px 14px; margin: 0 0 12px; }
  legend:not([class]) { padding: 0 6px; font-weight: 700; color: var(--text-2); font-size: 12.5px; }

  /* — Native disclosure — */
  details:not([class]) { border: 1px solid var(--line); border-radius: var(--radius-md, 10px); padding: 8px 12px; margin: 0 0 10px; background: var(--surface); }
  details:not([class]) > summary { cursor: pointer; font-weight: 600; color: var(--text); }

  figure:not([class]) { margin: 0 0 .75em; }
  figcaption { color: var(--text-3); font-size: 12px; margin-top: 4px; }

  /* — Media never blows the layout — */
  img, svg, video, canvas { max-width: 100%; }
  img { height: auto; }

  /* — Field STATES that had no global standard (legacy styles the resting field only).
       :where() keeps specificity at 0 so component form.css always wins. — */
  :where(input, select, textarea):disabled,
  :where(button):disabled,
  :where(.btn)[disabled], :where(.btn).is-disabled {
    opacity: .6; cursor: not-allowed;
  }
  :where(input, select, textarea)[readonly] {
    background: var(--surface-2); color: var(--text-2); cursor: default;
  }
  :where(input, select, textarea)[aria-invalid="true"],
  :where(input, select, textarea).is-invalid {
    border-color: var(--danger);
  }
  :where(input, select, textarea)[aria-invalid="true"]:focus,
  :where(input, select, textarea).is-invalid:focus {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 22%, transparent);
  }
  ::placeholder { color: var(--text-3); opacity: 1; }

  /* — Selection matches the brand — */
  ::selection { background: color-mix(in srgb, var(--brand) 22%, transparent); }
}

/* ===================== 3 · TABLE CHROME STANDARD ========================= */
/* ONE toolbar + footer for EVERY table, shared by the client enhancer (.cm-tbl-*,
 * assets/js/cm/tableenhance.js) and the server pager (.cm-pager, core/cm001/pager.php).
 * global.css loads LAST, so these cm.components rules are authoritative. Never
 * restyle a table's search / count / pager per page — extend THIS block. */
@layer cm.components {

  .cm-tbl-wrap { display: flex; flex-direction: column; gap: 10px; }

  /* — top toolbar: search box at the start, range count at the end — */
  .cm-tbl-bar {
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px;
    padding-block-end: 10px; border-block-end: 1px solid var(--line);
  }
  .cm-tbl-search {
    position: relative; display: inline-flex; align-items: center;
    flex: 1 1 240px; min-inline-size: 180px; max-inline-size: 380px;
  }
  .cm-tbl-search input {
    inline-size: 100%; block-size: var(--control-h, 36px);
    padding-block: 0; padding-inline: 32px 30px;   /* room for the search icon and the clear × */
    border: 1px solid var(--line-2, var(--line)); border-radius: var(--radius-md, 10px);
    background: var(--surface); color: var(--text); font: inherit; font-size: var(--fs-sm, 13px);
  }
  .cm-tbl-search input::-webkit-search-cancel-button { display: none; }  /* our own × instead */
  .cm-tbl-search input:focus {
    outline: none; border-color: var(--brand);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent);
  }
  .cm-tbl-ic {
    position: absolute; inset-inline-start: 11px; inline-size: 14px; block-size: 14px; pointer-events: none;
    background: var(--text-3);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M10 2a8 8 0 105.29 14.03l5.34 5.34 1.41-1.41-5.34-5.34A8 8 0 0010 2zm0 2a6 6 0 110 12 6 6 0 010-12z'/%3E%3C/svg%3E") center/contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M10 2a8 8 0 105.29 14.03l5.34 5.34 1.41-1.41-5.34-5.34A8 8 0 0010 2zm0 2a6 6 0 110 12 6 6 0 010-12z'/%3E%3C/svg%3E") center/contain no-repeat;
  }
  .cm-tbl-clear {
    position: absolute; inset-inline-end: 6px; display: none;
    inline-size: 20px; block-size: 20px; padding: 0; border: 0; border-radius: 50%;
    background: var(--surface-2); color: var(--text-2); cursor: pointer; line-height: 18px; font-size: 15px;
  }
  .cm-tbl-clear:hover { background: var(--line-2, var(--line)); color: var(--text); }
  .cm-tbl-search.has-text .cm-tbl-clear { display: inline-block; }
  .cm-tbl-filter {
    block-size: var(--control-h, 36px); border: 1px solid var(--line-2, var(--line));
    border-radius: var(--radius-md, 10px); background: var(--surface); color: var(--text);
    font: inherit; font-size: var(--fs-sm, 13px); padding-inline: 10px; max-inline-size: 200px;
  }
  .cm-tbl-count { margin-inline-start: auto; color: var(--text-2); font-size: var(--fs-sm, 13px); white-space: nowrap; }

  /* — footer: ONE standard for client (.cm-tbl-foot) and server (.cm-pager) — */
  .cm-tbl-foot, .cm-pager {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 8px 14px;
    margin-block-start: 12px; padding-block-start: 12px; border-block-start: 1px solid var(--line);
  }
  .cm-pager .p-range { color: var(--text-2); font-size: var(--fs-sm, 13px); white-space: nowrap; }

  /* rows-per-page chooser: client <select> and server size pills */
  .cm-tbl-size, .cm-pager .p-sizes { display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); font-size: var(--fs-sm, 13px); }
  .cm-tbl-size select {
    block-size: var(--control-h-sm, 32px); border: 1px solid var(--line-2, var(--line));
    border-radius: var(--radius-sm, 8px); background: var(--surface); color: var(--text);
    font: inherit; font-size: var(--fs-sm, 13px); padding-inline: 8px;
  }
  .cm-pager .p-size {
    min-inline-size: 30px; padding: 4px 9px; text-align: center; text-decoration: none;
    border: 1px solid var(--line-2, var(--line)); border-radius: var(--radius-sm, 8px);
    background: var(--surface); color: var(--text-2); font-size: var(--fs-sm, 13px);
  }
  .cm-pager .p-size:hover { background: var(--surface-2); color: var(--text); }
  .cm-pager .p-size.is-on { background: var(--brand); border-color: var(--brand); color: var(--on-brand, #fff); }

  /* prev / page-of-n / next */
  .cm-tbl-pager, .cm-pager .p-nav { display: inline-flex; align-items: center; gap: 6px; margin-inline-start: auto; }
  .cm-tbl-pg {
    min-inline-size: 32px; block-size: 32px; padding: 0 8px;
    border: 1px solid var(--line-2, var(--line)); border-radius: var(--radius-sm, 8px);
    background: var(--surface); color: var(--text); font: inherit; font-size: var(--fs-sm, 13px); cursor: pointer;
  }
  .cm-tbl-pg:hover:not(:disabled):not(.is-current) { background: var(--surface-2); }
  .cm-tbl-pg.is-current { background: var(--brand); border-color: var(--brand); color: var(--on-brand, #fff); cursor: default; }
  .cm-tbl-pg:disabled { opacity: .45; cursor: not-allowed; }

  tr.cm-tbl-empty td { text-align: center; color: var(--text-3); padding: 22px; font-size: var(--fs-sm, 13px); }

  /* ================== SIDEBAR GROUP TITLES ==================== */
  /* A highlight band behind each nav group title so it reads as a heading, clearly
   * distinct from the sub-menu items beneath it. Recolour via --nav-group-bg
   * (Design Suite → Theme Studio). global.css loads last, so this wins over base.css. */
  .sidebar .nav-group > .nav-title {
    background: var(--nav-group-bg, var(--surface-2));
    color: var(--text-2);
    margin-block-end: 4px;
  }
  .sidebar .nav-group > .nav-title:hover { filter: brightness(0.97); color: var(--text); }

  /* ================== CARD / SECTION CONSISTENCY ==================== */
  /* Every surface card carries the SAME border, radius, shadow and background,
   * so sections stop looking slightly different from one page to the next. */
  .panel, .cm-block, .kpi {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg, 14px);
    box-shadow: var(--shadow-sm);
  }
  .panel, .cm-block { margin-block-end: var(--space-4, 16px); }

  /* ================== PLATFORM MAP (CM051) ==================== */
  /* A smaller chip, and the workflow step-chain: clickable steps joined by arrows. */
  .chip--sm { padding: 1px 7px; font-size: var(--fs-xs, 11px); line-height: 1.6; }
  .cm-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
  .cm-flow-step {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 12px; border: 1px solid var(--line-2, var(--line)); border-radius: var(--radius-md, 10px);
    background: var(--surface); color: var(--text); text-decoration: none; font-size: var(--fs-sm, 13px); font-weight: 600;
    transition: background .15s, border-color .15s, color .15s;
  }
  .cm-flow-step:hover { background: var(--brand); border-color: var(--brand); color: var(--on-brand, #fff); }
  .cm-flow-step:focus-visible { outline: 2px solid var(--focus-ring, var(--brand)); outline-offset: 2px; }
  .cm-flow-arrow { display: inline-flex; color: var(--text-3); }

  /* ================== CHECKLIST EVIDENCE PHOTOS (CM014b) ==================== */
  /* Background-attached photo thumbnails from chkphoto.js — pick/snap a photo and it lands here. */
  .cm-chkph-strip { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
  .cm-chkph-item {
    display: inline-flex; align-items: center; justify-content: center;
    min-inline-size: 56px; block-size: 56px; padding: 0 8px;
    border: 1px solid var(--line-2, var(--line)); border-radius: var(--radius-sm, 8px);
    background: var(--surface-2); color: var(--text-2); font-size: var(--fs-xs, 11px); text-align: center; overflow: hidden;
  }
  .cm-chkph-item.is-ok { border-color: var(--ok); padding: 0; }
  .cm-chkph-item.is-err { border-color: var(--danger); color: var(--danger); }
  .cm-chkph-img { inline-size: 56px; block-size: 56px; object-fit: cover; display: block; }
  .cm-chkph-spin {
    inline-size: 16px; block-size: 16px; border: 2px solid var(--line-2, var(--line));
    border-top-color: var(--brand); border-radius: 50%; animation: cm-chkph-spin .7s linear infinite;
  }
  @keyframes cm-chkph-spin { to { transform: rotate(360deg); } }
  @media (prefers-reduced-motion: reduce) { .cm-chkph-spin { animation: none; } }

  /* ================== FIELD PICKERS (CM052) ==================== */
  /* Opt-in via data-cm on a text input (pickers.js). Colour swatch + searchable icon popover. */
  .cm-colorpick { display: inline-flex; align-items: stretch; inline-size: 100%; }
  .cm-colorpick > input:not([type="color"]) { flex: 1; border-start-start-radius: 0; border-end-start-radius: 0; }
  .cm-colorpick-sw {
    inline-size: 42px; padding: 2px; flex: none; cursor: pointer;
    border: 1px solid var(--line-2, var(--line)); border-inline-end: 0;
    border-start-start-radius: var(--radius-md, 10px); border-end-start-radius: var(--radius-md, 10px); background: var(--surface);
  }
  .cm-colorpick-sw::-webkit-color-swatch-wrapper { padding: 0; }
  .cm-colorpick-sw::-webkit-color-swatch { border: 0; border-radius: 6px; }

  .cm-iconpick { position: relative; display: inline-flex; align-items: stretch; inline-size: 100%; }
  .cm-iconpick > input { flex: 1; padding-inline-start: 38px; }
  .cm-iconpick-prev {
    position: absolute; inset-inline-start: 11px; inset-block: 0; display: inline-flex; align-items: center;
    color: var(--brand); font-size: 16px; pointer-events: none;
  }
  .cm-iconpick-pop {
    position: absolute; inset-block-start: calc(100% + 4px); inset-inline: 0; z-index: 40; padding: 8px; max-inline-size: 440px;
    background: var(--surface); border: 1px solid var(--line-2, var(--line)); border-radius: var(--radius-md, 10px);
    box-shadow: var(--shadow-md, 0 8px 24px rgba(15, 23, 42, .14));
  }
  .cm-iconpick-q { inline-size: 100%; margin-block-end: 8px; }
  .cm-iconpick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); gap: 4px; max-block-size: 240px; overflow-y: auto; }
  .cm-iconpick-cell {
    display: inline-flex; align-items: center; justify-content: center; block-size: 38px; cursor: pointer;
    border: 1px solid transparent; border-radius: var(--radius-sm, 8px); background: transparent; color: var(--text); font-size: 18px;
  }
  .cm-iconpick-cell:hover { background: var(--brand); color: var(--on-brand, #fff); }

  /* CM009e — bulk action bar for the asset register (multi-select). Sticky so it stays reachable while
   * paging a long list; hidden until ≥1 row is checked (bulkselect.js toggles the [hidden] attribute,
   * which the display rule below has to beat because display:flex would otherwise un-hide it). */
  .cm-bulkbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 0 0 12px; padding: 10px 12px;
    border: 1px solid var(--line); border-radius: var(--radius-md, 12px);
    background: var(--surface-2, var(--surface-1, #f1f5f9));
    position: sticky; top: 8px; z-index: 5; box-shadow: var(--shadow-sm, 0 1px 2px rgba(15, 23, 42, .06)); }
  .cm-bulkbar[hidden] { display: none; }
  .cm-bulkbar-count { font-weight: 700; }
  .cm-bulkbar-spacer { flex: 1 1 auto; }
  .cm-bulkbar-move { display: flex; gap: 6px; align-items: flex-end; flex-wrap: wrap; }
  .cm-bulkbar-move .field, .cm-bulkbar-move .cm-field { margin: 0; }

  /* Suite link-tabs (cm_suite_tabs) — bind sibling admin pages into one tabbed area. A tab bar of
   * <a>s; the active one sits flush with the content below it. */
  /* Row/cell action cluster — the standard right-aligned group of icon action buttons in a table row
     (Open, Assets, Facilities, …). Block-level so it right-aligns without an inline text-align on the cell. */
  .cm-row-actions { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
  /* view↔edit lock (editlock.js) — a profile form shows its saved values read-only until "Edit" is clicked. */
  [data-cm-editlock-edit] { display: none; }
  .cm-editlock.is-locked [data-cm-editlock-edit] { display: inline-flex; }
  .cm-editlock.is-locked [data-cm-editlock-when="edit"] { display: none !important; }
  .cm-editlock.is-locked form { pointer-events: none; }
  .cm-editlock.is-locked .field input:not([type="checkbox"]):not([type="radio"]),
  .cm-editlock.is-locked .field select,
  .cm-editlock.is-locked .field textarea {
    border-color: transparent; background: transparent; box-shadow: none;
    padding-inline-start: 0; resize: none; -webkit-appearance: none; appearance: none;
  }
  .cm-editlock.is-locked .field select { background-image: none; }
  /* enhanced selects (select.js → .cm-select) render as a button+caret; flatten them to plain value text when locked. */
  .cm-editlock.is-locked .field .cm-select-btn { border-color: transparent; background: transparent; box-shadow: none; padding-inline-start: 0; }
  .cm-editlock.is-locked .field .cm-select-caret { display: none; }
  /* A date/time input keeps the browser's calendar-picker icon even when the field is flattened, which
     reads as still-editable next to the plain text fields around it. Hide the indicator while locked. */
  .cm-editlock.is-locked .field input::-webkit-calendar-picker-indicator { display: none; }
  .cm-suite-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin: 0 0 16px; border-bottom: 1px solid var(--line); }
  .cm-suite-tab { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; margin-bottom: -1px;
    border: 1px solid transparent; border-bottom: 0;
    border-radius: var(--radius-md, 10px) var(--radius-md, 10px) 0 0;
    color: var(--text-2); font-weight: 600; font-size: 13px; text-decoration: none; }
  .cm-suite-tab:hover { color: var(--text); background: var(--surface-2, var(--surface-1)); }
  .cm-suite-tab.is-active { color: var(--brand); background: var(--surface, var(--surface-1));
    border-color: var(--line); border-bottom-color: var(--surface, var(--surface-1)); }

  /* Workforce "My work" (admin/myjobs.php): a row of urgency filter buttons over a stack of job cards.
     Everything is driven by theme tokens so it re-skins with the rest of the platform. */
  .cm-mj-filters { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 14px; }
  /* Three side-by-side; flex:1 min-width:0 lets them share the row and shrink to fit a phone without the
     count badge spilling. The label truncates as a last resort rather than overflowing the button. */
  .cm-mj-filter { flex: 1 1 0; min-width: 0; display: inline-flex; align-items: center; gap: 6px;
    justify-content: center; padding: 10px 8px; border: 1px solid var(--line);
    border-radius: var(--radius-md, 10px); background: var(--surface, var(--surface-1)); color: var(--text);
    text-decoration: none; font-weight: 600; font-size: 13px; line-height: 1.1; white-space: nowrap;
    transition: background .15s, border-color .15s, color .15s; }
  .cm-mj-filter:hover { background: var(--surface-2, var(--surface-1)); }
  .cm-mj-filter > .ic { flex: none; }
  .cm-mj-filter > span:not(.cm-mj-count) { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .cm-mj-filter .cm-mj-count { flex: none; font-size: 12px; font-weight: 700;
    min-width: 18px; text-align: center; padding: 1px 6px; border-radius: 999px;
    background: color-mix(in srgb, var(--text) 9%, transparent); color: var(--text-2, var(--text)); }
  .cm-mj-filter.is-active { border-color: var(--brand); color: var(--brand);
    background: color-mix(in srgb, var(--brand) 9%, var(--surface)); }
  .cm-mj-filter.is-active .cm-mj-count { background: var(--brand); color: #fff; }
  .cm-mj-filter.is-overdue.is-active { border-color: var(--danger); color: var(--danger);
    background: color-mix(in srgb, var(--danger) 9%, var(--surface)); }
  .cm-mj-filter.is-overdue.is-active .cm-mj-count { background: var(--danger); color: #fff; }

  .cm-mj-list { display: flex; flex-direction: column; gap: 10px; }
  .cm-mj-empty { padding: 22px; text-align: center; }
  .cm-mj-card { display: block; border: 1px solid var(--line); border-inline-start: 4px solid var(--brand);
    border-radius: var(--radius-md, 10px); background: var(--surface, var(--surface-1)); color: var(--text);
    text-decoration: none; padding: 12px 14px; transition: background .15s, border-color .15s, box-shadow .15s; }
  .cm-mj-card:hover { background: var(--surface-2, var(--surface-1)); box-shadow: 0 1px 4px color-mix(in srgb, var(--text) 12%, transparent); }
  .cm-mj-card.is-p1 { border-inline-start-color: var(--danger); }
  .cm-mj-card.is-p2 { border-inline-start-color: var(--warn); }
  .cm-mj-card.is-p3 { border-inline-start-color: var(--info, var(--brand)); }
  .cm-mj-card.is-p4 { border-inline-start-color: var(--line); }
  .cm-mj-card-top { display: flex; align-items: flex-start; gap: 10px; }
  .cm-mj-card-title { flex: 1; min-width: 0; margin: 0; font-weight: 700; font-size: 14.5px; line-height: 1.3; }
  .cm-mj-card-ref { margin-top: 2px; font-family: var(--font-mono, ui-monospace, monospace); font-size: 11.5px; color: var(--text-2); }
  .cm-mj-card-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin-top: 9px; font-size: 12px; color: var(--text-2); }
  .cm-mj-card-meta .m { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
  .cm-mj-card-meta .m > .ic { flex: none; opacity: .8; }

  /* Check-in gate panels (permit blocked / approved / none) */
  .cm-mj-gate { border: 1px solid var(--line); border-radius: var(--radius-lg, 14px); padding: 16px 18px; margin: 14px 0; background: var(--surface, var(--surface-1)); }
  .cm-mj-gate.is-blocked { border-color: color-mix(in srgb, var(--danger) 45%, var(--line)); background: color-mix(in srgb, var(--danger) 7%, var(--surface)); }
  .cm-mj-gate.is-ok { border-color: color-mix(in srgb, var(--ok) 45%, var(--line)); background: color-mix(in srgb, var(--ok) 7%, var(--surface)); }
  .cm-mj-gate-h { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 15px; margin-bottom: 8px; }
  .cm-mj-gate.is-blocked .cm-mj-gate-h { color: var(--danger); }
  .cm-mj-gate.is-ok .cm-mj-gate-h { color: var(--ok); }
  .cm-mj-permit { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding: 9px 0; border-top: 1px solid color-mix(in srgb, var(--text) 8%, transparent); font-size: 13px; }
  .cm-mj-permit:first-of-type { border-top: 0; }
}