/* ============================================================================
   TMX — Compact-Premium Design System
   ----------------------------------------------------------------------------
   The additive design-system layer for the plugin facelift. Ported verbatim
   (values-wise) from the approved mockup, namespaced to --tmx-* tokens and
   .tmx-* component classes so it NEVER collides with existing .tm-* / WP core
   selectors. Enqueued after tm-global.css (wins ties without !important).

   PHASE 0 SAFETY: this file is opt-in. It does NOT restyle any existing class
   and applies NO global <body>/reset. Canvas + base typography live on the
   .tmx-page wrapper, so a page only adopts the new look once it adds .tmx-page
   / .tmx-* classes. Nothing on un-converted live pages changes.

   All existing colours + meanings preserved (brand #33363d, accent #4a90e2,
   success #28a745, danger #dc3545, and the allocation cell-state palette).
   ============================================================================ */

:root{
  /* ---- surfaces / canvas ---- */
  --tmx-bg:#eceef1;
  --tmx-surface:#ffffff;
  --tmx-surface-inset:#f7f8fa;
  --tmx-surface-sunken:#f1f3f6;

  /* ---- ink ---- */
  --tmx-ink:#1d2027;
  --tmx-ink-2:#565b66;
  --tmx-ink-3:#8b909b;

  /* ---- hairlines ---- */
  --tmx-line:rgba(20,23,30,.10);
  --tmx-line-2:rgba(20,23,30,.17);

  /* ---- brand + accents (PRESERVED hexes) ---- */
  --tmx-brand:#33363d; --tmx-brand-2:#2b2e34; --tmx-brand-hover:#1f2125;
  --tmx-accent:#4a90e2; --tmx-accent-hover:#3a7bc8; --tmx-accent-soft:#eaf2fc; --tmx-accent-line:#cfe1f7;
  --tmx-success:#28a745; --tmx-success-hover:#218838; --tmx-success-soft:#e8f6ed;
  --tmx-danger:#dc3545; --tmx-danger-hover:#c82333; --tmx-danger-soft:#fdeced;
  --tmx-warn:#f59e0b; --tmx-warn-soft:#fff6e6; --tmx-warn-ink:#78350f;
  --tmx-info-bg:#e7f3ff; --tmx-info-line:#4a90e2;

  /* ---- allocation cell states (PRESERVED exactly) ---- */
  --tmx-c-na-bg:#ffe9d6;
  --tmx-c-empty-bg:#fff9c4;
  --tmx-c-filled-bg:#d0f0c0;
  --tmx-c-enroute-bg:#fbe0f0; --tmx-c-enroute-ink:#b91c52;
  --tmx-c-onsite-bg:#e0f5ff;  --tmx-c-onsite-ink:#0066c2;
  --tmx-c-complete-bg:#e5dbff;--tmx-c-complete-ink:#4b2991;
  --tmx-c-alert-bg:#dc2929;   --tmx-c-alert-ink:#ffffff;
  --tmx-c-locked-bg:#fff3cd;

  /* ---- radii / shadow / motion (subtle) ---- */
  --tmx-r-xs:4px; --tmx-r-sm:6px; --tmx-r:8px; --tmx-r-lg:10px; --tmx-r-pill:999px;
  --tmx-sh-sm:0 1px 1px rgba(20,23,30,.04);
  --tmx-sh:0 1px 2px rgba(20,23,30,.05);
  --tmx-sh-lg:0 6px 20px rgba(20,23,30,.09);
  --tmx-ease:.16s cubic-bezier(.4,0,.2,1);

  /* ---- type scale (compact — matches the dense real page) ---- */
  --tmx-fs-micro:10px; --tmx-fs-sm:11px; --tmx-fs:12px; --tmx-fs-md:13px;
  --tmx-fs-h3:13px; --tmx-fs-h2:14px; --tmx-fs-h1:16px;
  --tmx-ff:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

/* ---------- page wrapper (opt-in canvas + base type; add to a converted page's .wrap) ---------- */
.tmx-page{background:var(--tmx-bg);color:var(--tmx-ink);font-family:var(--tmx-ff);font-size:var(--tmx-fs);line-height:1.45;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.tmx-page *{box-sizing:border-box}
.tmx-page h1,.tmx-page h2,.tmx-page h3{margin:0;letter-spacing:-.012em}
.tmx-page a{text-decoration:none}
.tmx-page a:not(.tmx-btn){color:inherit} /* links inherit ink; buttons keep their own colour */
.tmx-mono{font-variant-numeric:tabular-nums}
.tmx-muted{color:var(--tmx-ink-3)}
.tmx-eyebrow{font-size:var(--tmx-fs-micro);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--tmx-ink-3)}

/* ---------- section title (page-level heading with accent tick) ---------- */
.tmx-section-title{display:flex;align-items:center;gap:10px;margin:22px 0 10px}
.tmx-section-title h2{font-size:var(--tmx-fs-h2);font-weight:700}
.tmx-section-title .tmx-tick{width:4px;height:18px;border-radius:2px;background:var(--tmx-accent)}
/* compact page header — page name + active tab as ONE breadcrumb block (replaces the double heading) */
.tmx-pagehead{display:flex;align-items:center;gap:9px;margin:2px 0 10px}
/* pagehead sharing a flex row with a sync pill / actions — the row carries the bottom gap */
.tmx-pagehead-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.tmx-pagehead-row .tmx-pagehead{margin:0}
/* WP's notice-anchor <hr class="wp-header-end"> (echoed on some pages, not others) must not
   add its own space under a TMX breadcrumb — so the 10px gap is identical on every page/tab */
.tmx-page hr.wp-header-end{margin:0;height:0;border:0;padding:0}
.tmx-pagehead .tmx-tick{width:4px;height:18px;border-radius:2px;background:var(--tmx-accent);flex:none}
.tmx-pagehead h2{margin:0;font-size:var(--tmx-fs-h2);font-weight:700;color:var(--tmx-ink);display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;line-height:1.2}
.tmx-pagehead .ph-crumb{font-size:var(--tmx-fs-md);font-weight:600;color:var(--tmx-ink-3)}
.tmx-pagehead .ph-sep{color:var(--tmx-ink-3);font-weight:400}

/* ---------- card ---------- */
.tmx-card{background:var(--tmx-surface);border:1px solid var(--tmx-line);border-radius:var(--tmx-r);box-shadow:var(--tmx-sh);overflow:hidden}
.tmx-card + .tmx-card{margin-top:16px}
.tmx-card-head{display:flex;align-items:center;gap:9px;padding:9px 14px;border-bottom:1px solid var(--tmx-line)}
.tmx-card-head h3{font-size:var(--tmx-fs-h3);font-weight:600;margin:0} /* margin 0: also in ThickBox popups, which sit outside the page wrapper (TMX sweep P4) */
.tmx-card-head .tmx-tick{width:3px;height:14px;border-radius:2px;background:var(--tmx-accent)}
.tmx-card-head .tmx-tick.is-success{background:var(--tmx-success)}
.tmx-card-body{padding:13px}

/* dark section header variant (kept for parity where a filled bar is wanted) */
.tmx-sec-head{display:flex;align-items:center;gap:8px;background:var(--tmx-brand);color:#fff;font-size:var(--tmx-fs-sm);font-weight:600;padding:7px 14px;letter-spacing:.01em}
.tmx-sec-head .sh-note{font-weight:400;color:#b8bcc4;font-size:var(--tmx-fs-micro)}
.tmx-sec-head .sh-right{margin-left:auto}

/* ---------- buttons (exact colours, soft premium pills) ---------- */
.tmx-btn{display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:var(--tmx-fs-sm);font-weight:600;line-height:1;padding:6px 11px;border-radius:var(--tmx-r-sm);border:1px solid transparent;cursor:pointer;transition:var(--tmx-ease);white-space:nowrap;box-shadow:var(--tmx-sh-sm);text-decoration:none}
.tmx-btn:active{transform:translateY(.5px)}
.tmx-btn-sm{padding:5px 9px;font-size:var(--tmx-fs-micro)}
.tmx-btn-accent{background:var(--tmx-accent);color:#fff;border-color:rgba(0,0,0,.04)}
.tmx-btn-accent:hover{background:var(--tmx-accent-hover);color:#fff}
.tmx-btn-success{background:var(--tmx-success);color:#fff}
.tmx-btn-success:hover{background:var(--tmx-success-hover);color:#fff}
.tmx-btn-danger{background:var(--tmx-danger);color:#fff}
.tmx-btn-danger:hover{background:var(--tmx-danger-hover);color:#fff}
.tmx-btn-ghost{background:var(--tmx-surface);color:var(--tmx-ink);border-color:var(--tmx-line-2)}
.tmx-btn-ghost:hover{background:var(--tmx-surface-inset)}
.tmx-btn-dark{background:var(--tmx-brand);color:#fff}
.tmx-btn-dark:hover{background:var(--tmx-brand-hover);color:#fff}
.tmx-btn:disabled,.tmx-btn[disabled]{opacity:.5;cursor:not-allowed;box-shadow:none;transform:none}

/* ---------- status pills (reuse the status-badge palette) ---------- */
.tmx-pill{display:inline-flex;align-items:center;gap:4px;font-size:var(--tmx-fs-micro);font-weight:600;line-height:1;padding:3px 8px;border-radius:var(--tmx-r-pill);white-space:nowrap}
.tmx-pill::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.9}
.tmx-pill.green{color:var(--tmx-success-hover);background:var(--tmx-success-soft)}
.tmx-pill.blue{color:var(--tmx-accent-hover);background:var(--tmx-accent-soft)}
.tmx-pill.grey{color:var(--tmx-ink-2);background:var(--tmx-surface-sunken)}
.tmx-pill.amber{color:#a15c07;background:var(--tmx-warn-soft)}
.tmx-pill.orange{color:#c2410c;background:#ffe7d4}
.tmx-pill.red{color:var(--tmx-danger-hover);background:var(--tmx-danger-soft)}
/* pink + purple reuse the frozen allocation en-route / complete hexes (booking-status pills) */
.tmx-pill.pink{color:#b91c52;background:#fbe0f0}
.tmx-pill.purple{color:#4b2991;background:#e5dbff}

/* ---------- status = coloured dot + dark text ---------- */
.tmx-st{display:inline-flex;align-items:center;gap:6px;font-size:var(--tmx-fs-sm);font-weight:600;color:var(--tmx-ink-2);white-space:nowrap}
.tmx-st::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--tmx-c,#8b909b);box-shadow:0 0 0 3px color-mix(in srgb,var(--tmx-c,#8b909b) 14%, transparent)}
.tmx-st.active{--tmx-c:var(--tmx-success)}
.tmx-st.pending,.tmx-st.draft,.tmx-st.quote{--tmx-c:var(--tmx-warn)}
.tmx-st.complete{--tmx-c:#8b909b}
.tmx-st.cancelled{--tmx-c:var(--tmx-danger)}
.tmx-st.on-dark{color:var(--tmx-ink-2)} /* status label on a dark surface */

/* ---------- info callout ---------- */
.tmx-callout{display:flex;gap:10px;background:var(--tmx-info-bg);border:1px solid var(--tmx-accent-line);border-left:3px solid var(--tmx-info-line);border-radius:var(--tmx-r-sm);padding:11px 14px;font-size:var(--tmx-fs-sm);color:#274156;margin-bottom:14px}
.tmx-callout b{color:#1c3a52}
/* callouts join the card vertical rhythm: gap when one follows a card */
.tmx-card + .tmx-callout{margin-top:16px}

/* ---------- stat bar (KPI figures) — compact CENTERED segments split by hairlines,
   each with a Lucide icon inline-left of the value + a tiny UPPERCASE label under.
   Mirrors the .tmx-hero .jh-meta header row. Wrap in a .tmx-card (+ tick .tmx-card-head)
   so the card supplies the border/heading — .tmx-statrow is the card body.
   Reusable across profile tabs (completed shifts, feedback, quizzes, …). ---------- */
.tmx-statrow{display:flex;flex-wrap:wrap}
.tmx-stat{flex:1 1 0;min-width:130px;padding:11px 16px;border-left:1px solid var(--tmx-line);text-align:center}
.tmx-stat:first-child{border-left:0}
.tmx-stat-top{display:flex;align-items:center;justify-content:center;gap:7px;margin-bottom:4px}
.tmx-stat-ic{width:16px;height:16px;flex:none;color:var(--tmx-ink-3)} /* <i data-lucide> → <svg>, stroke:currentColor */
.tmx-stat-num{font-size:16px;font-weight:700;line-height:1;color:var(--tmx-ink)}
.tmx-stat.accent  .tmx-stat-num,.tmx-stat.accent  .tmx-stat-ic{color:var(--tmx-accent)}
.tmx-stat.success .tmx-stat-num,.tmx-stat.success .tmx-stat-ic{color:var(--tmx-success)}
.tmx-stat.danger  .tmx-stat-num,.tmx-stat.danger  .tmx-stat-ic{color:var(--tmx-danger)}
.tmx-stat.warn    .tmx-stat-num,.tmx-stat.warn    .tmx-stat-ic{color:var(--tmx-warn)}
.tmx-stat-label{font-size:9px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--tmx-ink-3)}
.tmx-stat-sub{margin-top:3px;font-size:9px;font-weight:500;color:var(--tmx-ink-3);line-height:1.25}

/* ---------- dashboard kit — reusable module-dashboard widgets ----------
   One component set every module "home" dashboard (HSEQ / Fleet / HR / Main /
   Applications) adopts: the headline figures use the .tmx-statrow bar above;
   below that, quick-ACTION rows, a metric LIST, and a recent-activity FEED.
   Colours preserved (semantic green/red kept; icon badges reuse frozen tints). */
/* quick-action rows — replaces the legacy .tm-action-btn */
.tmx-actions{display:flex;flex-direction:column;gap:8px}
.tmx-action{display:flex;align-items:center;gap:11px;padding:9px 11px;border:1px solid var(--tmx-line);border-radius:var(--tmx-r-sm);background:var(--tmx-surface);box-shadow:var(--tmx-sh-sm);transition:var(--tmx-ease);text-decoration:none}
.tmx-action:hover{border-color:var(--tmx-accent-line);background:var(--tmx-accent-soft);transform:translateY(-1px)}
.tmx-action-ic{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;flex:none;border-radius:var(--tmx-r-sm);background:var(--tmx-accent-soft);color:var(--tmx-accent-hover)}
.tmx-action-ic svg{width:16px;height:16px}
.tmx-action-txt{flex:1;display:flex;flex-direction:column;gap:1px;min-width:0}
.tmx-action-txt strong{font-size:var(--tmx-fs-md);font-weight:600;color:var(--tmx-ink)}
.tmx-action-txt small{font-size:var(--tmx-fs-sm);color:var(--tmx-ink-3)}
.tmx-action-arrow{color:var(--tmx-ink-3);font-size:15px;font-weight:700}
.tmx-action:hover .tmx-action-arrow{color:var(--tmx-accent)}

/* metric list — the "System Overview" breakdown: coloured icon badge + label +
   bold figure + a status chip (.tmx-pill.*) per row */
.tmx-mlist{display:flex;flex-direction:column}
.tmx-mlist .ml-row{display:flex;align-items:center;gap:12px;padding:13px 16px;border-bottom:1px solid var(--tmx-line)}
.tmx-mlist .ml-row:last-child{border-bottom:0}
.tmx-mlist .ml-ic{width:30px;height:30px;flex:none;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--tmx-r-sm);background:var(--tmx-surface-sunken);color:var(--tmx-ink-2)}
.tmx-mlist .ml-ic svg{width:16px;height:16px}
.tmx-mlist .ml-ic.accent{background:var(--tmx-accent-soft);color:var(--tmx-accent-hover)}
.tmx-mlist .ml-ic.success{background:var(--tmx-success-soft);color:var(--tmx-success-hover)}
.tmx-mlist .ml-ic.danger{background:var(--tmx-danger-soft);color:var(--tmx-danger-hover)}
.tmx-mlist .ml-ic.purple{background:#e5dbff;color:#4b2991}
.tmx-mlist .ml-k{flex:1;font-size:var(--tmx-fs-md);font-weight:600;color:var(--tmx-ink)}
.tmx-mlist .ml-v{font-size:16px;font-weight:700;color:var(--tmx-ink);font-variant-numeric:tabular-nums;white-space:nowrap}

/* recent-activity feed — Recent Documents / Signatures list rows */
.tmx-feed{display:flex;flex-direction:column}
.tmx-feed .feed-row{display:flex;align-items:center;gap:11px;padding:9px 16px;border-bottom:1px solid var(--tmx-line)}
.tmx-feed .feed-row:last-child{border-bottom:0}
.tmx-feed .feed-ic{width:16px;height:16px;flex:none;color:var(--tmx-ink-3)}
.tmx-feed .feed-ic svg{width:16px;height:16px}
.tmx-feed .feed-ic.ok{color:var(--tmx-success)}
.tmx-feed .feed-main{flex:1;min-width:0}
.tmx-feed .feed-main .t{font-size:var(--tmx-fs-md);font-weight:600;color:var(--tmx-ink)}
.tmx-feed .feed-main .s{font-size:var(--tmx-fs-micro);color:var(--tmx-ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tmx-feed .feed-right{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex:none}
.tmx-feed .feed-date{font-size:var(--tmx-fs-micro);color:var(--tmx-ink-3)}
.tmx-feed .feed-empty{padding:26px 16px;text-align:center;color:var(--tmx-ink-3);font-size:var(--tmx-fs-sm)}

/* card footer — a bordered-top row for a "go to full view →" link (dashboard cards) */
.tmx-card-foot{padding:9px 14px;border-top:1px solid var(--tmx-line);font-size:var(--tmx-fs-sm);font-weight:600}
.tmx-card-foot a{color:var(--tmx-accent-hover);text-decoration:none}
.tmx-card-foot a:hover{color:var(--tmx-accent)}

/* compact "what this page does" info bar — sits under a tab's nav. Slimmer than the
   callout (no heavy left stripe); the leading Lucide icon (via <i data-lucide>, swapped
   to <svg> client-side) picks up the accent through stroke:currentColor. */
.tmx-infobar{display:flex;align-items:center;gap:8px;background:var(--tmx-info-bg);border:1px solid var(--tmx-accent-line);border-left:3px solid var(--tmx-info-line);border-radius:var(--tmx-r-sm);padding:7px 12px;font-size:var(--tmx-fs-sm);color:#274156;margin-bottom:14px}
.tmx-infobar b,.tmx-infobar strong{color:#1c3a52;font-weight:600}
.tmx-infobar .tmx-ib-icon{width:15px;height:15px;flex:none;color:var(--tmx-accent)}

/* ---------- tab bars ---------- */
.tmx-tabbar{display:flex;gap:2px;border-bottom:1px solid var(--tmx-line);padding:0 4px;margin-bottom:14px;overflow-x:auto}
.tmx-tabbar a{position:relative;font-size:var(--tmx-fs);font-weight:600;color:var(--tmx-ink-3);padding:9px 13px;border-radius:var(--tmx-r-xs) var(--tmx-r-xs) 0 0;white-space:nowrap;transition:var(--tmx-ease);cursor:pointer}
.tmx-tabbar a:hover{color:var(--tmx-ink-2)}
.tmx-tabbar a.active{color:var(--tmx-ink)}
.tmx-tabbar a.active::after{content:"";position:absolute;left:10px;right:10px;bottom:-1px;height:2px;border-radius:2px;background:var(--tmx-accent)}
.tmx-tabbar a .tmx-badge{margin-left:6px;font-size:10px;font-weight:700;background:var(--tmx-accent-soft);color:var(--tmx-accent-hover);border-radius:var(--tmx-r-pill);padding:1px 7px}
/* dark brand variant — top-level page nav (brand anchor) */
.tmx-tabbar.dark{background:var(--tmx-brand);border:1px solid var(--tmx-brand-2);border-radius:var(--tmx-r-sm);padding:3px;gap:2px;box-shadow:var(--tmx-sh-sm);border-bottom:1px solid var(--tmx-brand-2)}
.tmx-tabbar.dark a{color:#b8bcc4;border-radius:var(--tmx-r-xs);padding:6px 13px;font-size:var(--tmx-fs-sm)}
.tmx-tabbar.dark a:hover{color:#fff;background:rgba(255,255,255,.07)}
.tmx-tabbar.dark a.active{color:var(--tmx-ink);background:#fff;box-shadow:inset 0 -3px 0 var(--tmx-accent)}
.tmx-tabbar.dark a.active::after{display:none}
.tmx-tabbar.dark a .tmx-badge{background:var(--tmx-accent);color:#fff}
.tmx-tabbar.dark a.active .tmx-badge{background:var(--tmx-accent-soft);color:var(--tmx-accent-hover)}

/* editor sub-tabs (light underline, smaller than page tabs) */
.tmx-subtabs{display:flex;gap:2px;border-bottom:1px solid var(--tmx-line);margin:0 0 14px}
.tmx-subtabs a{position:relative;font-size:var(--tmx-fs-sm);font-weight:600;color:var(--tmx-ink-3);padding:8px 12px;cursor:pointer}
.tmx-subtabs a.active{color:var(--tmx-ink)}
.tmx-subtabs a.active::after{content:"";position:absolute;left:8px;right:8px;bottom:-1px;height:2px;border-radius:2px;background:var(--tmx-accent)}
/* the same sub tabs as <button>s (a switcher run by JS, e.g. the resource picker's Day / Week / Crew); .is-active or .active.
   A .tmx-btn inside the strip (e.g. a right-aligned action, margin-left:auto) keeps its own button look. */
.tmx-subtabs button:not(.tmx-btn){position:relative;display:inline-flex;align-items:center;gap:6px;border:0;background:none;box-shadow:none;margin:0;font:inherit;font-size:var(--tmx-fs-sm);font-weight:600;line-height:1.2;color:var(--tmx-ink-3);padding:8px 12px;cursor:pointer}
.tmx-subtabs button:not(.tmx-btn):hover{color:var(--tmx-ink-2)}
.tmx-subtabs button:not(.tmx-btn) svg{width:14px;height:14px}
.tmx-subtabs button.active:not(.tmx-btn),.tmx-subtabs button.is-active:not(.tmx-btn){color:var(--tmx-ink)}
.tmx-subtabs button.active:not(.tmx-btn)::after,.tmx-subtabs button.is-active:not(.tmx-btn)::after{content:"";position:absolute;left:8px;right:8px;bottom:-1px;height:2px;border-radius:2px;background:var(--tmx-accent)}

/* ---------- filter bar + inputs ---------- */
.tmx-filterbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tmx-field{display:inline-flex;align-items:center;gap:7px}
.tmx-field label{font-size:var(--tmx-fs-sm);font-weight:600;color:var(--tmx-ink-2)}
.tmx-filterbar .tmx-sel{width:180px} /* fixed so filter selects are identical size whether disabled or populated */
.tmx-inp,.tmx-sel{font:inherit;font-size:var(--tmx-fs);height:32px;padding:0 10px;background:var(--tmx-surface);border:1px solid var(--tmx-line-2);border-radius:var(--tmx-r-sm);color:var(--tmx-ink);box-shadow:var(--tmx-sh-sm);transition:var(--tmx-ease)}
.tmx-inp:focus,.tmx-sel:focus{outline:none;border-color:var(--tmx-accent);box-shadow:0 0 0 3px var(--tmx-accent-soft)}
.tmx-inp.search{min-width:230px}
.tmx-sel{padding-right:26px;appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--tmx-ink-3) 50%),linear-gradient(135deg,var(--tmx-ink-3) 50%,transparent 50%);background-position:calc(100% - 13px) 15px,calc(100% - 8px) 15px;background-size:5px 5px;background-repeat:no-repeat}
/* Legacy HR filter form (.tm-hr-filter) reused as a .tmx-filterbar — strip its
   own white box/border/padding + label & field chrome so it matches the standard
   TMX filter bar (continuity). The class stays on the <form> purely as the
   hr-admin.js change→submit hook; here it just loses its legacy styling. */
.tmx-filterbar.tm-hr-filter{background:transparent;border:0;border-radius:0;padding:0;margin:0}
.tmx-filterbar.tm-hr-filter label{color:var(--tmx-ink-2)}
.tmx-filterbar.tm-hr-filter select,
.tmx-filterbar.tm-hr-filter input[type="search"],
.tmx-filterbar.tm-hr-filter input[type="text"],
.tmx-filterbar.tm-hr-filter input[type="date"]{padding:0 10px;min-height:0;color:var(--tmx-ink)}

/* segmented status filter */
.tmx-segfilter{display:inline-flex;background:var(--tmx-surface-sunken);border:1px solid var(--tmx-line);border-radius:var(--tmx-r-pill);padding:3px;gap:2px}
.tmx-segfilter a{font-size:var(--tmx-fs-micro);font-weight:650;color:var(--tmx-ink-2);padding:5px 12px;border-radius:var(--tmx-r-pill);transition:var(--tmx-ease);cursor:pointer}
.tmx-segfilter a:hover{color:var(--tmx-ink)}
.tmx-segfilter a.active{background:var(--tmx-accent);color:#fff;box-shadow:var(--tmx-sh-sm)}
/* Squared segmented choice (payroll-financials, user 2026-10-14: "too rounded — keep the radius but more rectangle"): the
   same control as a small-radius group; options never wrap. Used by the resource picker's check panel. */
.tmx-segfilter.is-rect{border-radius:var(--tmx-r-sm);padding:2px;white-space:nowrap}
.tmx-segfilter.is-rect a{border-radius:var(--tmx-r-xs);white-space:nowrap;padding:5px 10px}

/* ---------- data table ---------- */
.tmx-tbl-wrap{overflow-x:auto}
/* self-contained table box — border + rounded corners; overflow:hidden clips the light
   header to the radius (rounded th corners) for a .tmx-tbl that is NOT filling a .tmx-card
   (e.g. the assigned-qualifications banks sitting on a bare panel). */
.tmx-tbl-box{border:1px solid var(--tmx-line);border-radius:var(--tmx-r-sm);overflow:hidden;background:var(--tmx-surface);box-shadow:var(--tmx-sh-sm)}
table.tmx-tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--tmx-fs-sm)}
table.tmx-tbl thead th{text-align:left;font-size:var(--tmx-fs-sm);font-weight:600;color:var(--tmx-ink-3);background:var(--tmx-surface-inset);padding:8px 12px;border-bottom:1px solid var(--tmx-line)}
table.tmx-tbl tbody td{padding:8px 12px;border-bottom:1px solid var(--tmx-line);vertical-align:middle}
table.tmx-tbl tbody tr:last-child td{border-bottom:0}
table.tmx-tbl tbody tr{transition:background var(--tmx-ease)}
table.tmx-tbl tbody tr:nth-child(even){background:#f8f9fb}
table.tmx-tbl tbody tr:hover{background:#eef2f7}
/* section/group band row (e.g. product type headers) — reusable for any grouped .tmx-tbl */
table.tmx-tbl tbody tr.tmx-grouprow>td{background:var(--tmx-surface-inset);color:var(--tmx-ink-2);font-weight:700;font-size:var(--tmx-fs-sm);letter-spacing:.03em;text-transform:uppercase;padding:6px 12px}
table.tmx-tbl tbody tr.tmx-grouprow:hover>td{background:var(--tmx-surface-inset)}
/* completed / closed rows — soft-green tint (a lighter hue than the state fills,
   in the family of the zebra stripe) to flag a row as done. Placed after the zebra
   so it wins the tie for both odd + even rows. */
table.tmx-tbl tbody tr.tmx-row-done{background:var(--tmx-success-soft)}
table.tmx-tbl tbody tr.tmx-row-done:hover{background:#dcefe3}
table.tmx-tbl .tmx-ref{font-weight:600;color:var(--tmx-ink);font-variant-numeric:tabular-nums}
table.tmx-tbl .tmx-sub{color:var(--tmx-ink-3);font-size:var(--tmx-fs-micro)}
/* opt-in dark header (brand bar, matches the allocation grid) — for tables whose
   faint light header reads poorly, e.g. the Billing tab + its nested detail table */
table.tmx-tbl.tmx-thead-dark thead th{background:var(--tmx-brand);color:#eef0f3;font-weight:500;border-bottom:0}
/* rounded top corners on the dark header bar (border-spacing:0 lets the th bg round) */
table.tmx-tbl.tmx-thead-dark thead th:first-child{border-top-left-radius:var(--tmx-r-sm)}
table.tmx-tbl.tmx-thead-dark thead th:last-child{border-top-right-radius:var(--tmx-r-sm)}
.tmx-detail-inner table.tmx-tbl.tmx-thead-dark{background:var(--tmx-surface);border:1px solid var(--tmx-line);border-radius:var(--tmx-r-sm);overflow:hidden}
/* sub-products table (Add-Job per-job billing) — rows are JS-rendered with old inline
   styles, so restyle the qty inputs + tfoot here (!important + .tmx-tbl.tm-sub-products-table
   specificity beats both the field normaliser and the JS inline styles) */
.tmx-tbl.tm-sub-products-table td input.qty-input{
  width:100% !important;height:28px !important;min-height:28px !important;padding:2px 8px !important;
  border:1px solid var(--tmx-line-2) !important;border-radius:var(--tmx-r-xs) !important;
  background:var(--tmx-surface) !important;color:var(--tmx-ink) !important;
  font-size:var(--tmx-fs-sm) !important;text-align:right !important;box-shadow:none !important
}
.tmx-tbl.tm-sub-products-table td input.qty-input:focus{border-color:var(--tmx-accent) !important;box-shadow:0 0 0 2px var(--tmx-accent-soft) !important}
.tmx-tbl.tm-sub-products-table td.line-total{text-align:right !important;font-weight:700 !important;color:var(--tmx-ink) !important;font-variant-numeric:tabular-nums;font-size:var(--tmx-fs-sm) !important}
.tmx-tbl.tm-sub-products-table tfoot td{padding:8px 12px;font-size:var(--tmx-fs-sm)}
.tmx-rowcount{display:inline-flex;min-width:22px;height:20px;align-items:center;justify-content:center;padding:0 6px;border-radius:var(--tmx-r-pill);background:var(--tmx-accent-soft);color:var(--tmx-accent-hover);font-size:var(--tmx-fs-micro);font-weight:700}
/* inputs inside data tables (day rates, sub-products, crew rows). Two classes
   (.tmx-tbl .tmx-inp) out-specify the plugin-wide field normaliser. */
table.tmx-tbl .tmx-inp,table.tmx-tbl .tmx-sel{height:28px;font-size:var(--tmx-fs-sm);box-shadow:none}
table.tmx-tbl td .tmx-inp.money{width:84px;text-align:right}
table.tmx-tbl td .tmx-inp.qty{width:56px;text-align:center}
table.tmx-tbl td .tmx-inp.time{width:100px}
table.tmx-tbl td .tmx-sel.rate{width:170px}
.tmx-trow-total td{font-weight:700;background:var(--tmx-surface-inset)}

/* ---------- job hero header ---------- */
.tmx-hero{background:var(--tmx-surface);color:var(--tmx-ink);border:1px solid var(--tmx-line);border-radius:var(--tmx-r);box-shadow:var(--tmx-sh);margin-bottom:16px;overflow:hidden}
.tmx-hero .jh-main{padding:14px 18px 11px}
.tmx-hero .jh-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.tmx-hero .jh-id{font-size:var(--tmx-fs-h1);font-weight:700;letter-spacing:-.01em}
.tmx-hero .jh-actions{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.tmx-hero .jh-meta{display:flex;gap:6px 30px;flex-wrap:wrap;margin-top:9px;padding-top:9px;border-top:1px solid var(--tmx-line)}
.tmx-hero .jh-meta .m{display:flex;flex-direction:column;gap:1px}
.tmx-hero .jh-meta .k{font-size:9px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--tmx-ink-3)}
.tmx-hero .jh-meta .v{font-size:var(--tmx-fs);font-weight:600;color:var(--tmx-ink)}
/* mini hero — the same header in a popup (e.g. the resource picker's slot): tighter, a slightly smaller title (14px) */
.tmx-hero.is-mini{margin-bottom:12px}
.tmx-hero.is-mini .jh-main{padding:11px 14px 9px}
.tmx-hero.is-mini .jh-top{gap:8px}
.tmx-hero.is-mini .jh-id{font-size:var(--tmx-fs-h2)}
.tmx-hero.is-mini .jh-meta{gap:4px 22px;margin-top:7px;padding-top:7px}
.tmx-hero.is-mini .jh-meta .v{font-size:var(--tmx-fs)}
.tmx-btn-hero{background:var(--tmx-surface);color:var(--tmx-ink);border-color:var(--tmx-line-2)}
.tmx-btn-hero:hover{background:var(--tmx-surface-inset)}

/* ---------- live SYNC indicator (Phase 3 wires the JS to these classes) ---------- */
.tmx-sync{display:inline-flex;align-items:center;gap:6px;font-size:10px;font-weight:600;padding:3px 10px;border-radius:var(--tmx-r-pill);border:1px solid #cde7d2;background:var(--tmx-success-soft);color:var(--tmx-success-hover);transition:var(--tmx-ease)}
.tmx-sync .d{width:6px;height:6px;border-radius:50%;background:var(--tmx-success);transition:var(--tmx-ease)}
.tmx-sync.checking{background:#fff8e1;border-color:#f0d075;color:#8a6d00}
.tmx-sync.checking .d{background:#e0a800;animation:tmx-syncpulse 1s ease-in-out infinite}
.tmx-sync.syncing{background:#e0f7fa;border-color:#7fd6e2;color:#0d7a8a}
.tmx-sync.syncing .d{background:#26c6da;animation:tmx-syncpulse .7s ease-in-out infinite}
@keyframes tmx-syncpulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.65)}}

/* ---------- details field rows ---------- */
.tmx-grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:stretch}
/* side-by-side cards must be equal height: cancel the stacked-card top margin that
   the adjacent-sibling rule (.tmx-card + .tmx-card) wrongly applies to the 2nd column,
   which otherwise pushes it down + breaks the stretch alignment */
.tmx-grid2 > .tmx-card{margin-top:0;height:100%}
@media(max-width:820px){.tmx-grid2{grid-template-columns:1fr}}
.tmx-frow{display:flex;gap:14px;padding:9px 16px;border-bottom:1px solid var(--tmx-line);font-size:var(--tmx-fs-sm)}
.tmx-frow:last-child{border-bottom:0}
.tmx-frow .k{width:150px;flex-shrink:0;color:var(--tmx-ink-3);font-weight:600}
.tmx-frow .v{color:var(--tmx-ink);font-weight:500}
/* reskin legacy .tm-field-row read-only sections as TMX rows by wrapping the section
   body in .tmx-frows — no per-row markup change. Specialist blocks (RTW/medical pills,
   colour-coded widgets) simply OMIT the wrapper and keep their own layout. Use in place
   of .tmx-card-body (the rows carry their own 9/16 padding). Inline colour spans win. */
.tmx-frows .tm-field-row{display:flex;gap:14px;padding:9px 16px;margin:0;border:0;border-bottom:1px solid var(--tmx-line);font-size:var(--tmx-fs-sm)}
.tmx-frows .tm-field-row:last-child{border-bottom:0}
.tmx-frows .tm-field-label{width:150px;min-width:150px;flex-shrink:0;margin:0;padding:0;color:var(--tmx-ink-3);font-weight:600;background:none}
.tmx-frows .tm-field-value{margin:0;padding:0;color:var(--tmx-ink);font-weight:500}
/* non-row content inside a .tmx-frows block (e.g. RTW/medical action buttons) aligns to the row inset */
.tmx-frows .tm-rtw-actions{padding:2px 16px 14px}

/* ---------- forms (Add Job / Booking editor) ---------- */
.tmx-form-row{display:flex;align-items:center;gap:14px;padding:8px 16px;border-bottom:1px solid var(--tmx-line)}
.tmx-form-row:last-child{border-bottom:0}
.tmx-form-row>label{width:150px;flex-shrink:0;color:var(--tmx-ink-2);font-weight:600;font-size:var(--tmx-fs-sm)}
.tmx-form-row .req{color:var(--tmx-danger)}
.tmx-form-row .ctl{flex:1;display:flex;align-items:center;gap:8px;max-width:470px}
.tmx-form-row .ctl .tmx-inp,.tmx-form-row .ctl .tmx-sel{width:100%}
.tmx-form-row .ctl .tmx-inp.time{width:112px;flex:0 0 auto}
.tmx-form-row .ctl .tmx-inp.money{width:96px;flex:0 0 auto;text-align:right}
.tmx-form-row .ro{font-weight:600;font-size:var(--tmx-fs-sm)}
.tmx-form-row textarea.tmx-inp{height:auto;min-height:60px;padding:8px 10px;resize:vertical}
.tmx-form-hint{font-size:var(--tmx-fs-micro);color:var(--tmx-ink-3)}
/* A field with its hint on the line below (2026-10-13, TMX sweep): <div class="ctl has-hint">field <span class="tmx-form-hint">…</span></div> */
.tmx-form-row .ctl.has-hint{flex-wrap:wrap;row-gap:4px}
.tmx-form-row .ctl.has-hint>.tmx-form-hint{flex-basis:100%}
/* Stacked choices (radios one per line) and read-only values in a form row */
.tmx-form-row .ctl.stack{flex-direction:column;align-items:flex-start;gap:6px}
.tmx-form-row .ctl.stack>label{display:flex;align-items:center;gap:6px;font-size:var(--tmx-fs-sm);color:var(--tmx-ink);cursor:pointer}
.tmx-form-row .ctl.stack>label input{margin:0}
.tmx-form-foot{display:flex;justify-content:flex-end;gap:8px;padding:11px 16px;border-top:1px solid var(--tmx-line);background:var(--tmx-surface-inset)}
/* (2026-10-13, TMX sweep P3) a short number field with its unit after it: <input class="tmx-inp num"> <span class="tmx-unit">%</span>;
   a control that may use the full row width (grids of fields); a wrapper that spaces cards / grids stacked inside it */
.tmx-form-row .ctl .tmx-inp.num{width:96px;flex:0 0 auto;text-align:right}
.tmx-unit{font-size:var(--tmx-fs-sm);color:var(--tmx-ink-3);white-space:nowrap}
.tmx-form-row .ctl.wide{max-width:none}
.tmx-form-row .ctl .tmx-inline{display:inline-flex;align-items:center;gap:6px;font-size:var(--tmx-fs-sm);color:var(--tmx-ink-2);font-weight:600}
.tmx-form-row .ctl .tmx-inline .tmx-inp.num{width:72px}
.tmx-stack>*+*{margin-top:16px}
.tmx-card-head .tmx-tick.is-danger{background:var(--tmx-danger)}
.tmx-toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.tmx-day-active{display:inline-flex;align-items:center;gap:5px;font-size:var(--tmx-fs-micro);font-weight:600;color:var(--tmx-success-hover);white-space:nowrap}

/* ---------- bookings mini rows + expansion ---------- */
.tmx-mini{cursor:pointer}
.tmx-mini td .tmx-chev{display:inline-block;color:var(--tmx-ink-3);transition:transform var(--tmx-ease);margin-right:6px}
.tmx-mini.open td .tmx-chev{transform:rotate(90deg);color:var(--tmx-accent)}
.tmx-detail-row > td{padding:0;background:var(--tmx-surface-sunken)}
.tmx-detail-inner{padding:16px;border-top:1px solid var(--tmx-accent-line);border-bottom:1px solid var(--tmx-accent-line)}

/* ---------- allocation crew grid (cell states PRESERVED, presented premium) ---------- */
.tmx-alloc-card{background:var(--tmx-surface);border:1px solid var(--tmx-accent-line);border-radius:var(--tmx-r);box-shadow:var(--tmx-sh);overflow:hidden}
.tmx-alloc-scroll{overflow-x:auto}
table.tmx-alloc{width:100%;table-layout:fixed;border-collapse:separate;border-spacing:0;font-size:var(--tmx-fs-micro);min-width:940px}
table.tmx-alloc thead th{background:var(--tmx-brand);color:#eef0f3;font-weight:500;font-size:var(--tmx-fs-sm);padding:7px 8px;text-align:center;white-space:nowrap;letter-spacing:.01em}
table.tmx-alloc thead th:first-child{text-align:left;width:110px;padding-left:14px}
table.tmx-alloc thead th:nth-child(2){text-align:left;width:180px}
table.tmx-alloc td{border-bottom:1px solid var(--tmx-line);border-right:1px solid var(--tmx-line);padding:3px 4px;text-align:center;vertical-align:middle}
table.tmx-alloc td:last-child{border-right:0}
table.tmx-alloc tbody tr:last-child td{border-bottom:0}
table.tmx-alloc tbody tr:nth-child(even) td{background:#fafbfc}
table.tmx-alloc .tmx-c-type{text-align:left;font-weight:500;color:var(--tmx-ink-2);white-space:nowrap;padding-left:14px}
table.tmx-alloc .tmx-c-req{text-align:left;font-weight:600;color:var(--tmx-ink);white-space:nowrap}

/* the state cell — colour is an ACCENT (edge + tint), not a solid block */
.tmx-cell{position:relative;display:flex;align-items:center;justify-content:center;gap:4px;width:100%;min-height:25px;padding:3px 7px 3px 10px;border-radius:4px;background:var(--tmx-surface);border:1px solid var(--tmx-line-2);font-weight:500;font-size:var(--tmx-fs-sm);color:var(--tmx-ink);cursor:pointer;transition:var(--tmx-ease);overflow:hidden}
.tmx-cell::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--tmx-edge,transparent)}
.tmx-cell:hover{border-color:var(--tmx-accent);box-shadow:0 0 0 2px var(--tmx-accent-soft)}
.tmx-cell.filled{--tmx-edge:var(--tmx-success);background:#e7f5e9;border-color:#cde7d2}
.tmx-cell.enroute{--tmx-edge:#b91c52;background:#fae6ef;border-color:#eecadb}
.tmx-cell.onsite{--tmx-edge:#0066c2;background:#e5f2fc;border-color:#c8e0f5}
.tmx-cell.complete{--tmx-edge:#4b2991;background:#eee8f9;border-color:#dbd0ef;color:var(--tmx-ink-2)}
.tmx-cell.empty{--tmx-edge:transparent;border-style:dashed;border-color:#d9c76a;background:#fffbe6;color:#8a6d00;font-weight:500;box-shadow:none;padding-left:8px}
.tmx-cell.empty:hover{color:var(--tmx-accent);border-color:var(--tmx-accent);box-shadow:none}
.tmx-cell.na{background:#f3f4f6;border-color:transparent;box-shadow:none;color:var(--tmx-ink-3);opacity:.75;font-style:italic;font-weight:400;cursor:default;padding-left:8px}
.tmx-cell.alert{--tmx-edge:#dc2929;background:#fbe2e2;border-color:#f1bfbf;color:#a51818}
.tmx-cell .tmx-veh-reg{font-weight:700}
.tmx-cell .tmx-veh-div{opacity:.35;margin:0 4px;font-weight:300}
.tmx-cell .tmx-veh-drv{font-size:9px;color:var(--tmx-ink-3)}
.tmx-cell.alert .tmx-veh-drv{color:#b91c1c;font-weight:700;text-transform:uppercase;letter-spacing:.02em}

/* colour key (shown ONCE per container, not per sub-table) */
.tmx-legend{display:flex;flex-wrap:wrap;gap:14px;padding:8px 16px;border-top:1px solid var(--tmx-line);background:var(--tmx-surface-inset)}
.tmx-legend.bare{border:0;background:transparent;padding:0;margin-left:auto;gap:12px}
.tmx-legend .tmx-lg{display:inline-flex;align-items:center;gap:6px;font-size:10px;font-weight:600;color:var(--tmx-ink-2)}
.tmx-legend .tmx-sw{width:8px;height:8px;border-radius:2px;border:0}

/* ---------- PHASE 4: reskin the JS-managed .booking-cell-* into premium chips ----------
   The cell STATE lives on the <td> as .booking-cell-* — a hard JS contract
   (refreshAllBookingGrids / picker save / jobs-admin.js toggle these live on the
   <td>, they do NOT re-render from PHP). We keep those classes and restyle here.
   Everything is scoped to table.tmx-alloc so the labour-schedule grid + the booking
   editor (same classes, different container) are untouched until their own phase.
   .open-resource-picker, .veh-reg/.veh-divider/.veh-driver are all JS-rebuilt on
   refresh, so they are preserved and styled by name (not the .tmx-* equivalents). */
table.tmx-alloc{border-collapse:separate;border-spacing:0}
/* neutralise the old solid <td> background so only the chip carries colour */
/* table.tmx-labour-grid is added to every scope below so inline allocation grids (a flat table
   whose day columns ARE .booking-cell-* cells, e.g. the Labour tab) reuse this EXACT chip mechanism
   + frozen --tmx-cell-* palette — no colour duplication. Requires explicit user go-ahead per page. */
table.tmx-alloc td[class*="booking-cell-"],table.tmx-labour-grid td[class*="booking-cell-"]{background:transparent;padding:3px 4px}
/* The interactive cell button IS the chip. resource-picker.css forces
   background/border/colour with !important (doubled-class, 0,2,1), so the chip
   fill/edge/ink run through per-state CSS variables that the !important base +
   hover rules read — mine win on specificity (0,2,2 / 0,3,2 > theirs). This also
   keeps the state tint on hover (their :hover forces grey too). */
table.tmx-alloc td .open-resource-picker,
.tmx-crew td.select-cell .open-resource-picker,
table.tmx-labour-grid td .open-resource-picker{
  display:flex;align-items:center;justify-content:center;gap:4px;width:100%;min-height:24px;
  position:relative;overflow:hidden;border-radius:4px;
  background:var(--tmx-cell-bg,var(--tmx-surface)) !important;
  border:1px solid var(--tmx-cell-bd,var(--tmx-line-2)) !important;
  color:var(--tmx-cell-fg,var(--tmx-ink)) !important;
  font-weight:500 !important;cursor:pointer;transition:var(--tmx-ease)
}
table.tmx-alloc td .open-resource-picker::before,
.tmx-crew td.select-cell .open-resource-picker::before,
table.tmx-labour-grid td .open-resource-picker::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--tmx-edge,transparent)}
table.tmx-alloc td .open-resource-picker:hover,
.tmx-crew td.select-cell .open-resource-picker:hover,
table.tmx-labour-grid td .open-resource-picker:hover{
  background:var(--tmx-cell-bg,var(--tmx-surface)) !important;
  border-color:var(--tmx-accent) !important;box-shadow:0 0 0 2px var(--tmx-accent-soft)
}
/* per-state fill / edge / ink (colours PRESERVED from the cell-state palette) */
table.tmx-alloc .booking-cell-filled   .open-resource-picker,.tmx-crew .booking-cell-filled   .open-resource-picker,table.tmx-labour-grid .booking-cell-filled   .open-resource-picker{--tmx-cell-bg:#e7f5e9;--tmx-cell-bd:#cde7d2;--tmx-edge:var(--tmx-success)}
table.tmx-alloc .booking-cell-enroute  .open-resource-picker,.tmx-crew .booking-cell-enroute  .open-resource-picker,table.tmx-labour-grid .booking-cell-enroute  .open-resource-picker{--tmx-cell-bg:#fae6ef;--tmx-cell-bd:#eecadb;--tmx-edge:#b91c52}
table.tmx-alloc .booking-cell-onsite   .open-resource-picker,.tmx-crew .booking-cell-onsite   .open-resource-picker,table.tmx-labour-grid .booking-cell-onsite   .open-resource-picker{--tmx-cell-bg:#e5f2fc;--tmx-cell-bd:#c8e0f5;--tmx-edge:#0066c2}
table.tmx-alloc .booking-cell-complete .open-resource-picker,.tmx-crew .booking-cell-complete .open-resource-picker,table.tmx-labour-grid .booking-cell-complete .open-resource-picker{--tmx-cell-bg:#eee8f9;--tmx-cell-bd:#dbd0ef;--tmx-edge:#4b2991;--tmx-cell-fg:var(--tmx-ink-2)}
table.tmx-alloc .booking-cell-offroad    .open-resource-picker,
table.tmx-alloc .booking-cell-unavailable .open-resource-picker,
.tmx-crew .booking-cell-offroad .open-resource-picker,
.tmx-crew .booking-cell-unavailable .open-resource-picker,
table.tmx-labour-grid .booking-cell-offroad .open-resource-picker,
table.tmx-labour-grid .booking-cell-unavailable .open-resource-picker{--tmx-cell-bg:#fbe2e2;--tmx-cell-bd:#f1bfbf;--tmx-edge:#dc2929;--tmx-cell-fg:#a51818}
table.tmx-alloc .booking-cell-unfilled .open-resource-picker,.tmx-crew .booking-cell-unfilled .open-resource-picker,table.tmx-labour-grid .booking-cell-unfilled .open-resource-picker{--tmx-cell-bg:#fffbe6;--tmx-cell-bd:#d9c76a;--tmx-cell-fg:#8a6d00;--tmx-edge:transparent;border-style:dashed !important}
/* text-only cells (no button): Not required */
table.tmx-alloc td.booking-cell-not-required,table.tmx-labour-grid td.booking-cell-not-required{color:var(--tmx-ink-3) !important;font-style:italic;font-size:var(--tmx-fs-sm);opacity:.75}

/* Neutralise the legacy blue chrome of the kept JS-hook classes so the grid
   matches the mockup's subtle card. jobs-admin.css sets a strong blue on
   .mini-booking-details > td (#f4faff + 3px #b3d8f3) and a blue border + 12px
   padding on .booking-preview-wrapper, and forces the header font to 12px!important.
   Co-class scopes (.booking-preview-wrapper.tmx-alloc-card etc.) always out-specify. */
.booking-preview-wrapper.tmx-alloc-card{padding:0;margin:0;border:1px solid var(--tmx-accent-line);background:var(--tmx-surface);box-shadow:var(--tmx-sh)}
.mini-booking-details.tmx-detail-row > td{padding:0;background:var(--tmx-surface-sunken);border-top:0;border-bottom:0}
/* G5 (2026-10-14): a shift-approved booking — its row + the allocation table under it in light TMX green, a small
   "Shift approved" tag by the Booking ID, and a key swatch. Only backgrounds change: the day buttons / chips keep their
   colours (the resource picker shows its own read-only view for a locked booking). Beats the row hover rules. */
table.tmx-tbl tbody tr.tmx-shift-approved,table.tmx-tbl tbody tr.mini-booking-details.tmx-shift-approved>td{background:var(--tmx-success-soft)}
table.tmx-tbl tbody tr.mini-booking-row.tmx-shift-approved:hover{background:#dcefe3}
tr.tmx-shift-approved .tmx-detail-inner{border-color:#b9e2c6}
tr.tmx-shift-approved .tmx-detail-inner table.tmx-tbl{background:#f3fbf5}
tr.tmx-shift-approved .tmx-detail-inner table.tmx-tbl tbody tr:hover{background:#e6f5ea}
.tmx-approved-tag{display:inline-flex;align-items:center;justify-content:center;margin-left:6px;color:#1e7a37;vertical-align:-2px}
.tmx-approved-tag[title]{cursor:help}
.tmx-approved-tag .tmx-ic{width:15px;height:15px;flex:none}
.tmx-sw.tmx-sw-approved{background:var(--tmx-success-soft);border:1px solid #b9e2c6}
/* Grid-containing list tables keep .tm-bookings-table (JS swap hook + resource-picker chip context)
   alongside .tmx-tbl. Neutralise the legacy per-cell borders (#ccc, all 4 sides) + dark thead so the
   OUTER table reads as clean TMX hairlines; direct-child (>) scoped so the nested allocation grid is untouched. */
table.tm-bookings-table.tmx-tbl>thead>tr>th,table.tm-bookings-table.tmx-tbl>tbody>tr>td,
table.tm-standard-table.tmx-tbl>thead>tr>th,table.tm-standard-table.tmx-tbl>tbody>tr>td{border-left:0;border-right:0;border-top:0}
table.tm-bookings-table.tmx-tbl>thead,table.tm-standard-table.tmx-tbl>thead{background:transparent}
.tmx-alloc-card table.tmx-alloc{border-collapse:separate;border-spacing:0;font-size:var(--tmx-fs-micro)}
.tmx-alloc-card table.tmx-alloc thead th{font-size:var(--tmx-fs-sm) !important;color:#eef0f3 !important;background:var(--tmx-brand);padding:7px 8px;font-weight:500}
.tmx-alloc-card table.tmx-alloc td{font-size:var(--tmx-fs-micro)}
/* compact chip text on the Bookings-tab allocation grid (beats resource-picker.css's 11px!important) */
.tmx-alloc-card table.tmx-alloc td .open-resource-picker{font-size:9px !important}

/* ---------- PHASE 5: booking editor (job_build_allocation_form) ---------- */
/* crew mini-table: the Select cell chip is handled by the shared .tmx-crew rules
   above; here we cover the surrounding bits + the vehicle reg|driver split. */
.tmx-crew td.select-cell{padding:3px 5px}
.tmx-crew td.select-cell > em,.tmx-crew td.tm-day-enabled > em{color:var(--tmx-ink-3);font-size:var(--tmx-fs-sm);font-style:italic}
.tmx-crew .open-resource-picker .veh-reg{font-weight:700}
.tmx-crew .open-resource-picker .veh-divider{opacity:.35;margin:0 3px;font-weight:300}
.tmx-crew .open-resource-picker .veh-driver{font-size:9px;color:var(--tmx-ink-3)}
.tmx-crew .open-resource-picker .veh-driver-none{font-size:9px;color:var(--tmx-ink-3);font-style:italic}
.tmx-crew td .tm-day-extra{display:inline-flex;align-items:center;gap:3px}
/* day-active checkbox label (charge + crew rows) */
.tmx-daychk{display:inline-flex;align-items:center;gap:5px;font-size:var(--tmx-fs-micro);font-weight:600;color:var(--tmx-success-hover);white-space:nowrap}
.tmx-daychk input{margin:0}
/* total booking-charge row */
tr.tmx-total td{font-weight:700 !important;border-top:2px solid var(--tmx-line-2) !important;background:var(--tmx-surface-inset)}
tr.tmx-total .tmx-total-val{color:var(--tmx-success-hover);font-size:var(--tmx-fs-md);font-weight:700}
/* inline £ prefix before money inputs */
.tmx-money-prefix{color:var(--tmx-ink-3);font-size:var(--tmx-fs-sm)}
/* neutralise the legacy solid <td> tint in the editor crew tables so ONLY the chip
   carries colour (matches the grid). Covers the select cells AND stock text cells. */
.tmx-crew td[class*="booking-cell-"]{background:transparent}

/* ---------- ThickBox chrome → TMX (rounded window, compact dark header, grey canvas)
   Applies to every modal on the plugin's pages so they match the design ethos.
   ThickBox sets #TB_window / #TB_ajaxContent width+height inline; we only skin. ---------- */
#TB_window{border-radius:var(--tmx-r-lg) !important;overflow:hidden !important;box-shadow:var(--tmx-sh-lg) !important;border:0 !important}
#TB_title{background:var(--tmx-brand) !important;height:auto !important;min-height:0 !important;border-bottom:2px solid var(--tmx-accent) !important;position:relative !important;padding:0 !important}
#TB_ajaxWindowTitle{color:#fff !important;font-size:var(--tmx-fs-md) !important;font-weight:600 !important;padding:8px 44px 8px 14px !important;line-height:1.4 !important;float:none !important;margin:0 !important}
/* close X — absolutely centred on the right, no box/border/outline */
#TB_closeAjaxWindow{position:absolute !important;top:0 !important;bottom:0 !important;right:8px !important;margin:0 !important;padding:0 !important;display:flex !important;align-items:center !important;border:0 !important;background:none !important;box-shadow:none !important}
#TB_closeWindowButton{border:0 !important;background:none !important;box-shadow:none !important;outline:0 !important;padding:4px !important;line-height:1 !important}
#TB_closeWindowButton:focus{outline:0 !important;box-shadow:none !important}
#TB_closeWindowButton .tb-close-icon,#TB_closeWindowButton:before,.tb-close-icon{color:#b8bcc4 !important}
#TB_closeWindowButton:hover .tb-close-icon,#TB_closeWindowButton:hover:before{color:#fff !important}
#TB_ajaxContent{background:var(--tmx-bg) !important;padding:14px !important;box-sizing:border-box !important;color:var(--tmx-ink)}
#TB_ajaxContent.TB_modal{padding:14px !important}

/* ---------- Popup content (2026-10-09). A popup = one or more .tmx-card on the grey canvas (form rows .tmx-form-row,
   read-only rows .tmx-frow), then .tmx-modal-actions. Open popups with height=auto so the window fits its content
   (it caps at the screen height and the content scrolls). No page title inside — the title bar already has it. ---------- */
.tmx-modal-actions{display:flex;justify-content:flex-end;align-items:center;gap:8px;margin-top:14px}
.tmx-modal-actions .spinner{float:none;margin:0}
.tmx-modal-hint{padding:9px 16px;margin:0;font-size:var(--tmx-fs-micro);color:var(--tmx-ink-3)}
/* a popup's own error line (a refused save), between its cards and .tmx-modal-actions; hidden until filled (TMX sweep P4) */
.tmx-modal-error{margin-top:14px;padding:8px 12px;border:1px solid var(--tmx-danger);border-left-width:3px;border-radius:var(--tmx-r-sm);background:var(--tmx-danger-soft);color:var(--tmx-danger-hover);font-size:var(--tmx-fs-sm);line-height:1.4}
/* calendar booking summary rows (.tooltip-row, shared with the hover tooltip) as TMX rows inside a .tmx-frows card */
.tmx-frows .tooltip-row{display:flex;gap:14px;padding:9px 16px;margin:0;border:0;border-bottom:1px solid var(--tmx-line);font-size:var(--tmx-fs-sm);align-items:flex-start}
.tmx-frows .tooltip-row:last-child{border-bottom:0}
.tmx-frows .tooltip-label{width:120px;min-width:120px;flex-shrink:0;color:var(--tmx-ink-3);font-weight:600;font-size:var(--tmx-fs-sm);text-transform:none;letter-spacing:0}
.tmx-frows .tooltip-value{color:var(--tmx-ink);font-weight:500;font-size:var(--tmx-fs-sm)}
.tmx-frows .tooltip-divider{border:0;border-top:2px solid var(--tmx-line-2);margin:0}
/* inline radio / checkbox choices inside a .tmx-form-row .ctl */
.tmx-choices{flex-wrap:wrap;gap:6px 18px !important}
.tmx-choices>label{display:inline-flex;align-items:center;gap:6px;font-size:var(--tmx-fs-sm);font-weight:600;color:var(--tmx-ink);cursor:pointer}
.tmx-choices input{margin:0}
/* a scrolling pick-list inside a card: one radio / checkbox per row */
.tmx-picklist{max-height:300px;overflow-y:auto}
.tmx-picklist>label{display:flex;align-items:flex-start;gap:9px;padding:8px 16px;border-bottom:1px solid var(--tmx-line);cursor:pointer;font-size:var(--tmx-fs-sm);color:var(--tmx-ink);margin:0}
.tmx-picklist>label:last-child{border-bottom:0}
.tmx-picklist>label:hover{background:var(--tmx-surface-sunken)}
.tmx-picklist>label:has(input:checked){background:var(--tmx-accent-soft)}
.tmx-picklist input{margin:2px 0 0;flex-shrink:0}
.tmx-picklist .code{font-weight:700;color:var(--tmx-accent-hover)}
.tmx-picklist .sub{display:block;margin-top:2px;font-size:var(--tmx-fs-micro);color:var(--tmx-ink-3)}
.tmx-picklist-msg{padding:16px;margin:0;text-align:center;font-size:var(--tmx-fs-sm);color:var(--tmx-ink-3)}
.tmx-picklist-msg.err{color:var(--tmx-danger)}
.tmx-card-head .tmx-head-actions{margin-left:auto;display:flex;gap:6px}
/* answer review rows (quiz result) */
.tmx-frow .v .tmx-pill{vertical-align:middle}
.tmx-qa{padding:9px 16px;border-bottom:1px solid var(--tmx-line);font-size:var(--tmx-fs-sm)}
.tmx-qa:last-child{border-bottom:0}
.tmx-qa-head{display:flex;align-items:center;gap:8px;margin-bottom:4px;font-weight:600}
.tmx-qa-line{color:var(--tmx-ink-2);margin-top:2px}
.tmx-qa-line b{color:var(--tmx-ink-3);font-weight:600;margin-right:4px}

/* vehicle REG | driver split (JS rebuilds these exact classes on refresh) */
table.tmx-alloc .open-resource-picker .veh-reg{font-weight:700}
table.tmx-alloc .open-resource-picker .veh-divider{opacity:.35;margin:0 3px;font-weight:300}
table.tmx-alloc .open-resource-picker .veh-driver{font-size:9px;color:var(--tmx-ink-3)}
table.tmx-alloc .open-resource-picker .veh-driver-none{font-size:9px;color:var(--tmx-ink-3);font-style:italic}
table.tmx-alloc .booking-cell-offroad .open-resource-picker .veh-driver,
table.tmx-alloc .booking-cell-unavailable .open-resource-picker .veh-driver{color:#b91c1c;font-weight:700}

/* ---------- notes ---------- */
.tmx-note{border:1px solid var(--tmx-line);border-radius:var(--tmx-r-sm);padding:11px 13px;background:var(--tmx-surface)}
.tmx-note + .tmx-note{margin-top:8px}
.tmx-note .nh{display:flex;justify-content:space-between;font-size:var(--tmx-fs-micro);color:var(--tmx-ink-3);margin-bottom:4px}

/* ============================================================================
   Overrides vs tm-global's plugin-wide field normaliser
   (`body[class*="_page_tm_"] input/select/textarea { …32px… !important }`,
   tm-global.css:2149-2200). Standalone .tmx-inp/.tmx-sel intentionally INHERIT
   that clean 32px look. Here we only reclaim COMPACT inputs inside data tables
   — higher specificity + !important (matches the codebase's own robustness
   pattern) so dense day-charge / crew / sub-product rows stay tight.
   ============================================================================ */
body[class*="_page_tm_"] table.tmx-tbl .tmx-inp,
body[class*="_page_tm_"] table.tmx-tbl input.tmx-inp,
body[class*="_page_tm_"] table.tmx-tbl .tmx-sel,
body[class*="_page_tm_"] table.tmx-tbl select.tmx-sel{
  height:28px !important;min-height:28px !important;padding:2px 8px !important;
  font-size:var(--tmx-fs-sm) !important;border-radius:4px !important;
}

/* Standalone .tmx-inp / .tmx-sel — reclaim the mockup look from the normaliser
   (rounded 6px, hairline border, accent focus ring, custom select chevron). */
body[class*="_page_tm_"] input.tmx-inp,
body[class*="_page_tm_"] select.tmx-sel,
body[class*="_page_tm_"] textarea.tmx-inp{
  border:1px solid var(--tmx-line-2) !important;
  border-radius:var(--tmx-r-sm) !important;
  box-shadow:var(--tmx-sh-sm) !important;
}
body[class*="_page_tm_"] input.tmx-inp:focus,
body[class*="_page_tm_"] select.tmx-sel:focus,
body[class*="_page_tm_"] textarea.tmx-inp:focus{
  border-color:var(--tmx-accent) !important;
  box-shadow:0 0 0 3px var(--tmx-accent-soft) !important;
}
body[class*="_page_tm_"] select.tmx-sel{
  -webkit-appearance:none !important;-moz-appearance:none !important;appearance:none !important;
  padding-right:26px !important;
  background-image:linear-gradient(45deg,transparent 50%,var(--tmx-ink-3) 50%),
                   linear-gradient(135deg,var(--tmx-ink-3) 50%,transparent 50%) !important;
  background-position:calc(100% - 13px) 15px,calc(100% - 8px) 15px !important;
  background-size:5px 5px !important;background-repeat:no-repeat !important;
}

/* ----------------------------------------------------------------------------
   PHASE 2 — single-job view (render-ALL-panels JS-toggle page).
   The dark tabbar replaces .tm-tab-nav; the panel wrapper keeps .tm-tab-content
   (JS show/hide hook) but drops the hard white box so converted panels sit on
   the grey canvas. Panels NOT yet converted keep a soft white card surface;
   a converted panel opts out by adding .tmx-bare to its wrapper div.
   ---------------------------------------------------------------------------- */
.tmx-page .tm-tab-content{background:transparent;border:0;border-radius:0;padding:0;box-shadow:none;min-height:0}
.tmx-page .tm-tab-content > div{
  background:var(--tmx-surface);border:1px solid var(--tmx-line);
  border-radius:var(--tmx-r);padding:18px;box-shadow:var(--tmx-sh-sm)
}
.tmx-page .tm-tab-content > div.tmx-bare{
  background:transparent;border:0;border-radius:0;padding:0;box-shadow:none
}

/* Supplier profile panels (JS-toggle .tm-supplier-tab, no .tm-tab-content wrapper) —
   same treatment: unconverted tabs get a soft white card (overriding the hard
   #2b2e34 box from tm-global.css); a converted panel opts out with .tmx-bare. */
.tmx-page .tm-supplier-tab{
  background:var(--tmx-surface);border:1px solid var(--tmx-line);
  border-radius:var(--tmx-r);padding:18px;box-shadow:var(--tmx-sh-sm);min-height:0
}
.tmx-page .tm-supplier-tab.tmx-bare{
  background:transparent;border:0;border-radius:0;padding:0;box-shadow:none
}

/* HSEQ tab panels (nav-tab shell, .tm-hseq-tab wrapper — no .tm-tab-content) — same
   treatment: un-converted tabs get a soft white card (overriding the hard #2b2e34 box
   from tm-global.css); a converted panel opts out with .tmx-bare. */
.tmx-page .tm-hseq-tab{
  background:var(--tmx-surface);border:1px solid var(--tmx-line);
  border-radius:var(--tmx-r);padding:18px;box-shadow:var(--tmx-sh-sm);min-height:0
}
.tmx-page .tm-hseq-tab.tmx-bare{
  background:transparent;border:0;border-radius:0;padding:0;box-shadow:none
}

/* Remaining JS-toggle / direct-render tab panels (Products, Applications, Customer,
   User, Master Rates) that also carry the hard #2b2e34 box from tm-global.css — same
   treatment: an unconverted panel gets a soft white card; a converted panel opts out
   with .tmx-bare so its own cards float on the grey canvas. */
.tmx-page .tm-products-tab,
.tmx-page .tm-applications-tab,
.tmx-page .tm-customer-tab,
.tmx-page .tm-user-tab,
.tmx-page .tm-master-rates-tab{
  background:var(--tmx-surface);border:1px solid var(--tmx-line);
  border-radius:var(--tmx-r);padding:18px;box-shadow:var(--tmx-sh-sm);min-height:0
}
.tmx-page .tm-products-tab.tmx-bare,
.tmx-page .tm-applications-tab.tmx-bare,
.tmx-page .tm-customer-tab.tmx-bare,
.tmx-page .tm-user-tab.tmx-bare,
.tmx-page .tm-master-rates-tab.tmx-bare{
  background:transparent;border:0;border-radius:0;padding:0;box-shadow:none
}

/* Inline Lucide icons (tm_tmx_icon) — default size; components set their own. */
.tmx-ic{width:16px;height:16px;flex:none;vertical-align:-3px}

/* G5 (2026-10-14): the lock panel — a locked booking / job (View / Edit booking, Edit Job) and the resource picker's
   locked view (.tmx-lockpanel-centred). Amber = locked but can be adjusted / un-approved, red = no changes (submitted,
   approved, invoiced, paid), blue = adjusting now. Fact chips link to their page when the viewer may open it. */
.tmx-lockpanel{display:flex;gap:14px;align-items:flex-start;border:1px solid;border-left-width:4px;border-radius:var(--tmx-r,8px);padding:14px 16px;margin:0 0 14px;font-family:var(--tmx-ff);font-size:13px;line-height:1.45}
.tmx-lockpanel .tmx-lp-ic{width:38px;height:38px;border-radius:9px;display:grid;place-items:center;flex:none}
.tmx-lockpanel .tmx-lp-ic .tmx-ic{width:20px;height:20px}
.tmx-lockpanel .tmx-lp-body{flex:1;min-width:0}
.tmx-lockpanel .tmx-lp-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tmx-lockpanel .tmx-lp-title{font-size:14px;font-weight:700;margin:0}
.tmx-lockpanel .tmx-lp-state{margin-left:auto;display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;border-radius:999px;padding:3px 10px;white-space:nowrap}
.tmx-lockpanel .tmx-lp-state .tmx-ic{width:12px;height:12px}
.tmx-lockpanel .tmx-lp-facts{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0 6px}
.tmx-lockpanel .tmx-lp-fact{display:inline-flex;align-items:center;gap:5px;background:var(--tmx-surface,#fff);border:1px solid var(--tmx-line);border-radius:999px;padding:2px 9px;font-size:11.5px;color:var(--tmx-ink);text-decoration:none}
.tmx-lockpanel .tmx-lp-fact .tmx-ic{width:12px;height:12px;color:var(--tmx-ink-3)}
.tmx-lockpanel .tmx-lp-fact b{font-weight:600}
.tmx-lockpanel a.tmx-lp-fact{cursor:pointer;transition:border-color .12s,box-shadow .12s}
.tmx-lockpanel a.tmx-lp-fact .tmx-lp-go{width:11px;height:11px;color:var(--tmx-accent)}
.tmx-lockpanel a.tmx-lp-fact:hover{border-color:var(--tmx-accent);box-shadow:0 0 0 2px rgba(74,144,226,.15)}
.tmx-lockpanel a.tmx-lp-fact:hover b{color:var(--tmx-accent)}
.tmx-lockpanel .tmx-lp-text{margin:0;font-size:12.5px}
.tmx-lockpanel .tmx-lp-actions{margin-top:10px;display:flex;gap:8px;flex-wrap:wrap}
.tmx-lockpanel .tmx-lp-actions .tmx-btn .tmx-ic{width:14px;height:14px;margin-right:4px}
.tmx-lockpanel.is-adjustable{background:var(--tmx-warn-soft);border-color:#f5d48a;border-left-color:var(--tmx-warn);color:var(--tmx-warn-ink)}
.tmx-lockpanel.is-adjustable .tmx-lp-ic{background:#fde7b8;color:#b45309}
.tmx-lockpanel.is-adjustable .tmx-lp-state{background:#fde7b8;color:#92400e}
.tmx-lockpanel.is-frozen{background:var(--tmx-danger-soft);border-color:#f2c2c7;border-left-color:var(--tmx-danger);color:#7a1d26}
.tmx-lockpanel.is-frozen .tmx-lp-ic{background:#f9d0d5;color:#b4232f}
.tmx-lockpanel.is-frozen .tmx-lp-state{background:#f9d0d5;color:#9b1c28}
.tmx-lockpanel.is-adjusting{background:#eaf2fc;border-color:#c5dbf5;border-left-color:var(--tmx-accent);color:#1f3f66}
.tmx-lockpanel.is-adjusting .tmx-lp-ic{background:#d4e5f9;color:#2a6cb8}
.tmx-lockpanel.is-adjusting .tmx-lp-state{background:#d4e5f9;color:#1f5596}
/* centred (resource picker): big icon in a soft ring, everything centred */
.tmx-lockpanel.tmx-lockpanel-centred{display:block;text-align:center;border:0;border-radius:0;background:transparent;color:var(--tmx-ink);padding:30px 24px 24px;margin:0}
.tmx-lockpanel-centred .tmx-lp-ic{width:76px;height:76px;border-radius:50%;margin:0 auto 14px}
.tmx-lockpanel-centred .tmx-lp-ic .tmx-ic{width:36px;height:36px}
.tmx-lockpanel-centred.is-adjustable .tmx-lp-ic{box-shadow:0 0 0 8px var(--tmx-warn-soft)}
.tmx-lockpanel-centred.is-frozen .tmx-lp-ic{box-shadow:0 0 0 8px var(--tmx-danger-soft)}
.tmx-lockpanel-centred .tmx-lp-title{font-size:18px;margin:0 0 6px}
.tmx-lockpanel-centred .tmx-lp-state{margin:0 0 12px;display:inline-flex}
.tmx-lockpanel-centred .tmx-lp-text{max-width:470px;margin:0 auto 14px;font-size:13px;color:var(--tmx-ink-2,#3b434d)}
.tmx-lockpanel-centred .tmx-lp-facts{justify-content:center;margin:0 0 18px}
.tmx-lockpanel-centred .tmx-lp-actions{justify-content:center}
.tmx-lp-slot{background:var(--tmx-surface,#fff);border:1px solid var(--tmx-line);border-radius:10px;max-width:470px;margin:0 auto 20px;text-align:left;overflow:hidden}
.tmx-lp-slot .tmx-lp-slot-h{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--tmx-ink-3);padding:8px 14px;border-bottom:1px solid var(--tmx-line);background:var(--tmx-surface-sunken)}
.tmx-lp-slot .tmx-lp-slot-row{display:flex;align-items:center;gap:10px;padding:10px 14px}
.tmx-lp-slot .tmx-lp-av{width:30px;height:30px;border-radius:50%;background:var(--tmx-success-soft);color:#1e7a37;display:grid;place-items:center;font-weight:700;font-size:12px;flex:none}
.tmx-lp-slot .tmx-lp-name{font-weight:600}
.tmx-lp-slot .tmx-lp-meta{margin-left:auto;color:var(--tmx-ink-3);font-size:12px;display:flex;gap:12px;flex-wrap:wrap}
.tmx-lp-slot .tmx-lp-meta span{display:inline-flex;align-items:center;gap:4px}
.tmx-lp-slot .tmx-lp-meta .tmx-ic{width:12px;height:12px}
.tmx-lp-slot .tmx-lp-empty{padding:10px 14px;color:var(--tmx-ink-3)}
/* amber button (Unlock to adjust) */
.tmx-btn.tmx-btn-warn{background:var(--tmx-warn);border-color:var(--tmx-warn);color:#1d2327}
.tmx-btn.tmx-btn-warn:hover{background:#e08e00;border-color:#e08e00;color:#1d2327}
/* the picker's old locked-view rule dims every button (opacity .4) — the lock panel's own buttons stay clear */
.tm-resource-picker-locked .tmx-lockpanel-centred .tmx-btn{opacity:1;cursor:pointer}