/* SM-Style UI (whichui=3).
   Our own stylesheet throughout: values are measurements taken from a live reference
   session (see docs/superpowers/specs/2026-09-04-sm-style-ui-design.md), re-expressed
   here by hand. Tokens marked CALIBRATE are eyeballed from screenshots and get exact
   values next capture session. Everything is self-hosted -- no CDN, no remote fonts. */

@font-face {
  font-family: 'Roboto';
  src: url('../fonts/roboto-var.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --smui-nav-bg: #1f64ae;          /* measured rgb(31,100,174) */
  --smui-nav-top: transparent;     /* measured: NOT a darker block; just a hairline below */
  --smui-nav-active: #407bbb;      /* measured rgb(64,123,187) */
  --smui-muted: #64738d;           /* measured rgb(100,115,141) */
  --smui-link: #2674c8;            /* measured rgb(38,116,200) */
  --smui-green: #167d4d;           /* measured rgb(22,125,77) */
  --smui-card-shadow: rgba(0, 0, 0, 0.13) 0 2px 18px 0;
  --smui-text: #000;
  --smui-bg: #fff;
}

.smui, .smui body { margin: 0; }
.smui {
  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 16px;
  color: var(--smui-text);
  background: var(--smui-bg);
}

/* ---- frame: fixed sidebar + fluid content, measured 194.84px ---- */
.smui-frame { display: grid; grid-template-columns: 195px 1fr; min-height: 100vh; }

.smui-nav { background: var(--smui-nav-bg); color: #fff; display: flex; flex-direction: column; }
/* The sidebar's own line height and box sizing, so the page around it cannot change its size: the Classic pages in
   the Flow frame load Bootstrap (flowlink.php), whose body line-height 1.5 and border-box made every item 3px taller
   there and the whole menu ~60px longer than on Flow's own pages. revert = the browser default, as on those pages. */
.smui-nav { line-height: normal; }
.smui-nav, .smui-nav *, .smui-nav *::before, .smui-nav *::after { box-sizing: revert; }
.smui-nav-logo {
  background: var(--smui-nav-top);
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);   /* measured */
  height: 56px; display: flex; align-items: center; padding: 0 16px;
  font-weight: 500; letter-spacing: .3px; font-size: 17px; color: #fff; gap: 9px;
}
.smui-nav-mark { flex: 0 0 auto; width: 26px; height: 26px; display: block; }
.smui-nav a.smui-nav-item {
  display: flex; align-items: center; gap: 12px;
  color: #fff; text-decoration: none; font-size: 16px;
  padding: 12px 0 12px 12px; border-radius: 100px 0 0 100px; margin-left: 8px;   /* measured */
}
.smui-nav a.smui-nav-item .fa { width: 18px; text-align: center; font-size: 16px; }
.smui-nav a.smui-nav-item:hover { background: rgba(255, 255, 255, 0.10); }
.smui-nav a.smui-nav-item.active { background: var(--smui-nav-active); }
/* The Jobs area's sections, grouped under Jobs in the sidebar (was a tab strip above the list). */
.smui-nav-sub { display: flex; flex-direction: column; gap: 1px; margin: 2px 10px 8px 28px; padding-left: 8px; border-left: 2px solid rgba(255, 255, 255, 0.35); }
.smui-nav a.smui-nav-subitem { display: flex; align-items: center; gap: 9px; padding: 7px 10px; color: rgba(255, 255, 255, 0.85); text-decoration: none; font-size: 13.5px; border-radius: 6px; }
.smui-nav a.smui-nav-subitem .fa { width: 16px; text-align: center; font-size: 13px; }
.smui-nav a.smui-nav-subitem:hover { background: rgba(255, 255, 255, 0.10); color: #fff; }
.smui-nav a.smui-nav-subitem.active { background: rgba(255, 255, 255, 0.22); color: #fff; font-weight: 500; }
.smui-nav a.smui-nav-subitem.new { color: #d7f5e3; margin-top: 4px; }
.smui-nav a.smui-nav-subitem.new .fa { color: #7ee2a8; }
.smui-nav-spacer { flex: 1; }
.smui-nav-collapse { color: #cfe0f2; padding: 14px 18px; cursor: pointer; }
/* a character on the icon's line: Classic pages that print a <style> before their doctype render in quirks mode, where
   a line holding only an icon loses the text line height and this row came out 5px short */
.smui-nav-collapse::before { content: "\200b"; }

/* ---- content ---- */
.smui-main { padding: 28px 32px 0; display: flex; flex-direction: column; min-height: 100vh; box-sizing: border-box; }
.smui-title { font-size: 23.4px; font-weight: 500; margin: 0 0 4px; }
.smui-subtitle { color: var(--smui-muted); margin: 0 0 22px; }
.smui-subtitle .smui-live { color: var(--smui-green); font-weight: 500; }

/* ---- the 8 stat cards, 3-column grid ---- */
.smui-cards {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  max-width: 1420px;
}
@media (max-width: 1100px) { .smui-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px)  { .smui-cards { grid-template-columns: 1fr; } }

.smui-cards-intro { padding: 12px 16px 0 0; }

.smui-card {
  background: #fff; border-radius: 4px; box-shadow: var(--smui-card-shadow);
  padding: 12px 16px; min-height: 142px;
  display: flex; justify-content: space-between; gap: 12px;
}
.smui-card-label { color: var(--smui-muted); font-size: 16px; }
.smui-card-big { font-size: 23.4px; font-weight: 500; margin-top: 2px; }
a.smui-card-big { color: var(--smui-text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.smui-card-sub { margin-top: 2px; font-size: 15px; }
.smui-card-sub a { color: var(--smui-link); text-decoration: none; }
.smui-card-sub a:hover { text-decoration: underline; }

.smui-card-rows { display: table; border-spacing: 0 2px; align-self: flex-start; }
.smui-card-row { display: table-row; }
.smui-card-row > * { display: table-cell; padding: 1px 0; }
.smui-card-row .n { text-align: right; padding-right: 10px; min-width: 44px; }
.smui-card-row .n a { color: var(--smui-text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.smui-card-row .p { color: var(--smui-text); white-space: nowrap; }


/* ---- SM-style list pages (smjobs.php) ---- */
.smui-listhead { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 14px; }
.smui-search { display: flex; align-items: center; gap: 8px; border: 1px solid #d5dae2; border-radius: 4px; padding: 7px 12px; min-width: 300px; color: var(--smui-muted); }
.smui-search input { border: 0; outline: 0; font: inherit; flex: 1; color: var(--smui-text); }
.smui-chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.smui-chip { background: #eef3f9; color: #2c4258; border-radius: 14px; padding: 4px 12px; font-size: 14px; }
.smui-clear { color: var(--smui-muted); font-size: 14px; text-decoration: none; }
.smui-clear:hover { color: var(--smui-text); }
.smui-liststrip { display: flex; gap: 14px; align-items: center; color: var(--smui-text); margin: 6px 0 10px; flex-wrap: wrap; }
.smui-count { font-weight: 500; }
.smui-muted-inline { color: var(--smui-muted); }
.smui-bulkselect { font: inherit; padding: 5px 10px; border: 1px solid #cfd4dd; border-radius: 4px; color: var(--smui-text); }
.smui-bulkselect:disabled { color: #9aa4b2; }
.smui-export { color: var(--smui-link); text-decoration: none; font-size: 14.4px; }
.smui-export:hover { text-decoration: underline; }
.smui-sortwrap { display: inline-flex; align-items: center; gap: 6px; }
.smui-sortlbl { color: var(--smui-muted); font-size: 14.4px; }
.smui-strip-pager { margin-left: auto; }   /* pager to the right; Rob also has the top pager on the left via count */
/* filter panel */
.smui-filtertoggle { color: var(--smui-link); text-decoration: none; cursor: pointer; font-size: 14.4px; }
.smui-filtertoggle:hover { text-decoration: underline; }
.smui-switchui { margin-left: auto; color: var(--smui-muted); text-decoration: none; cursor: pointer; font-size: 13.5px; white-space: nowrap; }
.smui-switchui:hover { color: var(--smui-link); }
.smui-uilist { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.smui-uiopt { display: flex; align-items: center; gap: 9px; padding: 9px 11px; border: 1px solid #e4e7ec; border-radius: 6px; cursor: pointer; font-size: 14px; }
.smui-uiopt:hover { background: #f7f9fc; }
.smui-uiopt.cur { border-color: var(--smui-green); background: #eef7f0; }
.smui-uisave { font: inherit; color: #fff; background: var(--smui-green); border: 0; border-radius: 4px; padding: 8px 18px; cursor: pointer; }
.smui-uisave:disabled { background: #b9c2cf; }
.smui-filterpanel[hidden] { display: none; }
.smui-filterpanel { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; margin: 4px 0 16px; padding: 16px; background: #f7f9fb; border: 1px solid #e4e7ec; border-radius: 6px; }
.smui-fp-label { color: var(--smui-muted); font-weight: 500; font-size: 14.4px; margin-bottom: 6px; }
.smui-fp-sep { margin-top: 12px; border-top: 1px solid #e4e7ec; padding-top: 8px; }
.smui-fp label { display: block; font-size: 14.4px; padding: 2px 0; cursor: pointer; }
.smui-fp-hr { border: 0; border-top: 1px solid #e4e7ec; margin: 6px 0; }
.smui-fp select, .smui-fp input[type=date] { font: inherit; width: 100%; box-sizing: border-box; padding: 5px 8px; border: 1px solid #cfd4dd; border-radius: 4px; margin-top: 4px; }
.smui-fp-date input[type=date] { margin-top: 6px; }
/* status column + shared icons */
.smui-served { color: #167d4d; font-weight: 500; }
.smui-nonserved { color: #8a5a00; font-weight: 500; }
.smui-noservice { color: #d21f4d; font-weight: 700; }
.smui-svctype { color: var(--smui-muted); font-size: 12px; margin-top: 2px; }
.smui-jstatus { color: var(--smui-muted); }
.smui-pripill { display: inline-block; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 10px; margin-right: 6px; vertical-align: middle; }
.smui-recaddr { color: var(--smui-muted); font-size: 12px; margin-top: 2px; }
.smui-subserver { color: var(--smui-muted); font-size: 12px; }
.smui-shared-out { color: #2674c8; margin-left: 5px; }
.smui-shared-in { color: #167d4d; margin-left: 5px; }

.smui-srcnote { color: var(--smui-muted); font-size: 13px; }
.smui-table { border-collapse: collapse; width: 100%; background: #fff; border-top: 2px solid var(--smui-nav-bg); }
.smui-table th { text-align: left; color: var(--smui-muted); font-weight: 400; font-size: 15px; padding: 10px 12px; border-bottom: 1px solid #e4e7ec; }
.smui-table td { padding: 12px; border-bottom: 1px solid #eef1f5; vertical-align: top; }
.smui-table tbody tr:nth-child(even) { background: #fafbfc; }
a.smui-joblink { color: var(--smui-link); text-decoration: none; }
a.smui-joblink:hover { text-decoration: underline; }
tr.smui-hirow > td { background: #fff3cd !important; }
.smui-jobicons { margin-top: 3px; display: flex; gap: 10px; }
.smj-jn { white-space: nowrap; }
.smj-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; vertical-align: 1px; }
.smj-dot-hold { background: #f79009; }
.smj-dot-billed { background: #d92d20; }
a.smui-jobicon { color: var(--smui-muted); font-size: 13px; text-decoration: none; }
a.smui-jobicon:hover { color: var(--smui-link); }
.smui-overdue { color: #d21f4d; font-weight: 500; }
.smui-empty { color: var(--smui-muted); text-align: center; padding: 32px 0 !important; }
.smui-pager { display: inline-flex; gap: 14px; align-items: baseline; }
.smui-pager a { color: var(--smui-link); text-decoration: none; }
.smui-pager a:hover { text-decoration: underline; }
.smui-liststrip .smui-pager { margin-left: auto; }   /* top copy sits right of the count */
.smui-pagerrow { padding: 14px 0; }
.smui-pagerrow:empty, .smui-pagerrow .smui-pager:empty { display: none; }

/* ---- archive radio + bulk bar (jobs list) ---- */
.smui-radios { display: inline-flex; border: 1px solid #cfd4dd; border-radius: 4px; overflow: hidden; }
.smui-radio { padding: 5px 14px; color: var(--smui-muted); text-decoration: none; font-size: 14.4px; }
.smui-radio + .smui-radio { border-left: 1px solid #cfd4dd; }
.smui-radio.on { background: var(--smui-nav-bg); color: #fff; }
.smui-bulk { margin-left: auto; display: inline-flex; gap: 12px; align-items: center; color: var(--smui-muted); font-size: 14.4px; }
.smui-bulkbtn { font: inherit; color: #fff; background: var(--smui-green); border: 0; border-radius: 4px; padding: 6px 16px; cursor: pointer; }
.smui-bulkbtn:disabled { background: #b9c2cf; cursor: default; }
.smui-ck { width: 30px; }


/* ---- bulk modal ---- */
.smui-modal { position: fixed; inset: 0; background: rgba(0,0,0,.35); display: flex; align-items: center; justify-content: center; z-index: 2000; }
.smui-modal[hidden] { display: none; }   /* hidden attr must beat display:flex */
.smui-modalbox { background: #fff; border-radius: 8px; min-width: 340px; max-width: 92vw; box-shadow: 0 8px 40px rgba(0,0,0,.25); }
.smui-modaltitle { font-size: 17px; font-weight: 500; padding: 16px 20px; border-bottom: 1px solid #e4e7ec; }
.smui-modalbody { padding: 18px 20px; }
.smui-pane label.smui-fp-label { display: block; margin-bottom: 6px; }
.smui-pane select, .smui-pane input[type=date] { font: inherit; width: 100%; padding: 7px 10px; border: 1px solid #cfd4dd; border-radius: 4px; }
.smui-modalchk { display: block; margin: 12px 0 6px; font-size: 14.4px; cursor: pointer; }
.smui-modalfoot { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 20px; border-top: 1px solid #e4e7ec; }
.smui-btn-plain { font: inherit; background: none; border: 1px solid #cfd4dd; border-radius: 4px; padding: 6px 16px; cursor: pointer; color: var(--smui-muted); }
/* ---- Dates column ---- */
.smui-dates { font-size: 13px; line-height: 1.5; }
.smui-drow { white-space: nowrap; }
.smui-dlbl { display: inline-block; min-width: 42px; color: var(--smui-muted); font-size: 11px; text-transform: uppercase; }

.smui-boards { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 14px; padding: 10px 14px; background: #eef3f9; border-radius: 6px; }
.smui-boards > .fa { color: var(--smui-nav-bg); }
.smui-boardsel { min-width: 160px; }
.smui-boardgear { color: var(--smui-muted); cursor: pointer; font-size: 15px; }
.smui-boardgear:hover { color: var(--smui-text); }
.smui-boardtbl { width: 100%; border-collapse: collapse; }
.smui-boardtbl th { text-align: left; color: var(--smui-muted); font-weight: 400; font-size: 13px; padding: 6px 10px; border-bottom: 1px solid #e4e7ec; }
.smui-boardtbl td { padding: 8px 10px; border-bottom: 1px solid #eef1f5; font-size: 14px; }
.smui-boardtbl td a { color: var(--smui-link); text-decoration: none; }
.smui-boardlink { color: var(--smui-link); text-decoration: none; font-size: 14px; cursor: pointer; }
.smui-boardlink:hover { text-decoration: underline; }
.smui-boarddel { color: #d21f4d; }

/* ---- footer ---- */
.smui-footer {
  margin-top: auto; padding: 18px 0 14px; margin-left: -32px; margin-right: -32px;
  border-top: 1px solid #e4e7ec;
  display: flex; justify-content: space-between; color: var(--smui-muted); font-size: 14px;
  padding-left: 32px; padding-right: 32px;
}
.smui-footer a { color: var(--smui-muted); text-decoration: none; }
.smui-footer a:hover { text-decoration: underline; }
.smui-footer .sep { margin: 0 8px; color: #c4cbd6; }

/* ---- Flow customer/server hub header + tabs (fcu-) ---- */
.fcu-head { background:#fff; border:1px solid #e4e7ec; border-radius:10px; padding:16px 20px 0; margin-bottom:16px; }
.fcu-back { font-size:13px; color:var(--smui-muted); text-decoration:none; display:inline-flex; align-items:center; gap:6px; }
.fcu-back:hover { color:var(--smui-link); }
.fcu-eyebrow { font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--smui-muted); font-weight:700; margin-top:8px; }
.fcu-titlebar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:2px 0 10px; }
.fcu-name { font-size:22px; font-weight:600; margin:0; color:#1d2733; display:flex; align-items:center; gap:9px; }
.fcu-name .fa { color:var(--smui-muted); font-size:18px; }
.fcu-actions { display:flex; align-items:center; gap:10px; }
.fcu-owed { font-size:13px; font-weight:600; color:#384150; background:#f2f4f7; border-radius:7px; padding:6px 11px; }
.fcu-owed.due { color:#b42318; background:#fef3f2; }
.fcu-btn { font:inherit; font-size:14px; padding:8px 15px; border-radius:7px; border:1px solid transparent; cursor:pointer; display:inline-flex; align-items:center; gap:7px; text-decoration:none; }
.fcu-btn.primary { background:var(--smui-green,#1f7a3d); color:#fff; }
.fcu-btn.ghost { background:#fff; border:1px solid #d0d5dd; color:#384150; }
.fcu-btn.ghost:hover { border-color:#cfd4dc; }
.fcu-meta { display:flex; flex-wrap:wrap; gap:6px 26px; font-size:14px; color:#384150; margin-bottom:14px; }
.fcu-meta .k { color:var(--smui-muted); font-size:12px; margin-right:6px; }
.fcu-meta a { color:var(--smui-link); text-decoration:none; }
.fcu-tabs { display:flex; gap:2px; border-bottom:1px solid #e4e7ec; margin:0 -20px; padding:0 12px; overflow-x:auto; }
.fcu-tab { font-size:14px; font-weight:600; color:var(--smui-muted); text-decoration:none; padding:11px 14px; border-bottom:2px solid transparent; white-space:nowrap; }
.fcu-tab:hover { color:#1d2733; }
.fcu-tab.active { color:var(--smui-link,#2563eb); border-bottom-color:var(--smui-link,#2563eb); }

/* ================= responsive =================
   Every Flow page shares this frame, so the breakpoints live here rather than in
   flowskin.css (which only the settings destinations load). All rules below are inside
   media queries except the min-width fix, so the desktop rendering cannot change.

   min-width:auto is the default for a grid item, meaning it will not shrink below its
   min-content width. Wide content -- a 13-column settings table, a long invoice row --
   therefore sets a floor on the content column and pushes the entire frame past the
   viewport, carrying the sidebar and footer out of view. */
.smui-frame > .smui-main { min-width: 0; }

/* Small laptop / tablet: the 195px sidebar costs more than it is worth, so it collapses
   to an icon rail. Labels are hidden with font-size, not display:none, so they stay in
   the accessibility tree; smui_nav.php carries a title on each item for a tooltip. */
@media (max-width: 1100px) {
  .smui-frame { grid-template-columns: 62px 1fr; }
  .smui-nav-logo { font-size: 0; justify-content: center; padding: 0; }
  .smui-nav-logo::after { content: "L"; font-size: 18px; font-weight: 500; }
  .smui-nav a.smui-nav-item {
    justify-content: center; padding: 13px 0; margin-left: 0;
    border-radius: 0; gap: 0; font-size: 0;
  }
  .smui-nav a.smui-nav-item .fa { font-size: 17px; width: auto; }
  .smui-nav-sub { margin: 0 0 6px; padding: 0; border-left: 0; }
  .smui-nav a.smui-nav-subitem { justify-content: center; padding: 10px 0; gap: 0; font-size: 0; border-radius: 0; }
  .smui-nav a.smui-nav-subitem .fa { font-size: 14px; width: auto; }
  .smui-main { padding: 22px 18px 0; }
  .smui-footer { margin-left: -18px; margin-right: -18px; padding-left: 18px; padding-right: 18px; }
  .smui-cards { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}

/* Phone: the rail becomes a horizontal strip above the content, scrollable if the eight
   items do not fit. min-height is released because the strip plus a 100vh main would
   overflow the viewport vertically. */
@media (max-width: 720px) {
  .smui-frame { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .smui-nav { flex-direction: row; overflow-x: auto; align-items: center; }
  .smui-nav-logo, .smui-nav-spacer, .smui-nav-collapse { display: none; }
  .smui-nav a.smui-nav-item { flex: 0 0 auto; padding: 13px 15px; }
  .smui-nav-sub { flex-direction: row; margin: 0; padding: 0; border-left: 0; }
  .smui-nav a.smui-nav-subitem { flex: 0 0 auto; padding: 13px 12px; gap: 6px; font-size: 13px; }
  .smui-main { padding: 16px 14px 0; min-height: 0; }
  .smui-footer {
    flex-direction: column; gap: 6px; align-items: flex-start;
    margin-left: -14px; margin-right: -14px; padding-left: 14px; padding-right: 14px;
  }
  .smui-cards { grid-template-columns: 1fr; }
  .smui-listhead, .smui-liststrip { gap: 10px; }
  .smui-search { min-width: 0; width: 100%; }
}

/* The list tables (jobs, cases, invoices) have more columns than a narrow screen can
   hold. Making the table itself the scroll container keeps the surrounding page fixed
   -- the alternative, scrolling the whole frame, drags the sidebar off-screen. Cells
   still wrap normally, so the table only scrolls when it genuinely cannot fit. */
@media (max-width: 900px) {
  .smui-table { display: block; overflow-x: auto; }
}
/* ---- Jobs area tab strip (SM: Jobs / Attempts / Documents / Notes / Map / Routes / Activity) ---- */
.smui-jobtabs { display: flex; gap: 2px; border-bottom: 1px solid #d9dee6; margin: -4px 0 16px; flex-wrap: wrap; }
.smui-jobtab { padding: 9px 16px 8px; color: var(--smui-text); text-decoration: none; font-size: 14.4px; border: 1px solid transparent; border-bottom: 0; border-radius: 6px 6px 0 0; margin-bottom: -1px; }
.smui-jobtab:hover { background: #eef3f9; }
.smui-jobtab.active { background: #fff; border-color: #d9dee6; color: var(--smui-link); font-weight: 600; }
.smui-comingsoon { background: #fff; border: 1px solid #d9dee6; border-radius: 8px; padding: 40px; text-align: center; color: var(--smui-muted); font-size: 16px; }
.smui-src { color: var(--smui-muted); font-size: 12px; margin-left: auto; }
.smui-note { white-space: normal; max-width: 560px; min-width: 260px; }
.smui-note p { margin: 0 0 4px; }
.smui-note p:last-child { margin-bottom: 0; }
.smui-fp-showall { display: inline-block; margin-top: 4px; font-size: 13px; color: var(--smui-link); text-decoration: none; }
.smui-fp-showall:hover { text-decoration: underline; }
.smui-fp-more[hidden] { display: none; }
.smui-sorth { color: inherit; text-decoration: none; }
.smui-sorth:hover { text-decoration: underline; }
.smui-sorth.active { color: var(--smui-link); font-weight: 600; }
.smui-map { height: calc(100vh - 260px); min-height: 420px; border: 1px solid #d9dee6; border-radius: 8px; }
.smui-feed-day { font-size: 12px; font-weight: 700; letter-spacing: .5px; color: var(--smui-muted); margin: 18px 0 8px; }
.smui-feed-job { background: #fff; border: 1px solid #d9dee6; border-radius: 8px; padding: 10px 14px; margin-bottom: 10px; }
.smui-feed-head { display: flex; gap: 14px; flex-wrap: wrap; font-size: 14px; padding-bottom: 6px; border-bottom: 1px solid #edf2f9; margin-bottom: 6px; }
.smui-feed-ev { display: grid; grid-template-columns: 150px 1fr 160px; gap: 10px; font-size: 13.5px; padding: 4px 0; }
.smui-feed-ev .t { color: var(--smui-muted); white-space: nowrap; } .smui-feed-ev .u { color: var(--smui-muted); text-align: right; }
@media (max-width: 800px) { .smui-feed-ev { grid-template-columns: 1fr; } .smui-feed-ev .u { text-align: left; } }

/* --- Map tab (the Operations map, in Flow) --- */
/* The map sits above its own job list now, so it no longer takes the whole viewport. */
.smui-mapwrap { position: relative; }
.smui-mapwrap .smui-map { height: 520px; min-height: 320px; }
.smui-maplegend { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; font-size: 12.5px; color: var(--smui-text); margin: 8px 0 12px; }
.smui-maplegend a { color: var(--smui-link); text-decoration: none; }
.smui-maplegend a:hover { text-decoration: underline; }
/* One teardrop, drawn in CSS so the list and the legend use the very same shape and
   palette the SVG map pins do (R8: no marker PNGs from a third-party CDN). */
.smui-pin { display: inline-block; width: 11px; height: 11px; background: var(--pin, #00B707); border: 1px solid rgba(0,0,0,.35);
            border-radius: 50% 50% 50% 0; transform: rotate(-45deg); vertical-align: -1px; }
.smui-pin-rush { box-shadow: 0 0 0 2px #F90000; }
.smui-pin-sel { box-shadow: 0 0 0 2px #1b6ec2; }
/* The Leaflet divIcon wrapper: no chrome of its own, the SVG inside is the marker. */
.smui-divpin { background: none; border: 0; }
.smui-divpin svg { display: block; }
.smui-priocust { color: #004dff; font-size: 10px; margin-left: 4px; }
.smui-maplist-wrap { max-height: 60vh; overflow: auto; }
#smGeoLog { font-size: 12.5px; }
#smGeoLog td { padding: 3px 6px; }
/* ---- Map tab, SM layout: two equal columns (map+legend | job list), map 691x534 ---- */
.smui-mapgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.smui-mapcol .smui-mapwrap .smui-map { height: 534px; min-height: 320px; max-width: 691px; }
.smui-mapcol .smui-maplegend { margin: 10px 0 8px; gap: 12px 18px; }
.smui-mapnote { font-size: 12.5px; color: var(--smui-muted); line-height: 1.7; }
.smui-mapnote a { color: var(--smui-link); text-decoration: none; }
.smui-mapnote a:hover { text-decoration: underline; }
.smui-listcol { min-width: 0; }
.smui-listhead-compact { margin-top: 0; }
.smui-maplist th:first-child, .smui-maplist td.smui-mapck { width: 36px; text-align: center; vertical-align: top; padding-top: 12px; }
.smui-maplist td.smui-mapjob { padding: 8px 12px 10px; white-space: normal; line-height: 1.45; }
.smui-mapjob-head { font-size: 17.6px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.smui-mapjob-num { font-weight: 600; }
.smui-mapjob-servee { font-size: 15px; }
.smui-mapjob-addr { font-size: 14.4px; margin: 2px 0 4px; }
.smui-mapjob-meta { font-size: 13px; color: var(--smui-text); display: flex; gap: 6px 18px; flex-wrap: wrap; }
.smui-mapjob-meta b { font-weight: 500; color: var(--smui-muted); }
@media (max-width: 1100px) { .smui-mapgrid { grid-template-columns: minmax(0, 1fr); } .smui-mapcol .smui-mapwrap .smui-map { max-width: none; } }
/* ---- Map geocode dialog (like the original Operations map's) ---- */
.smui-geobox { min-width: 760px; max-width: 96vw; }
.smui-geogrid { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 20px; }
.smui-geocount { font-size: 13px; color: var(--smui-muted); margin-bottom: 10px; }
.smui-geolabel { font-size: 13px; color: var(--smui-muted); margin-bottom: 6px; }
.smui-geobtns { display: flex; flex-direction: column; gap: 8px; }
.smui-btn { font: inherit; font-size: 13.5px; padding: 7px 12px; border-radius: 5px; border: 1px solid transparent; color: #fff; cursor: pointer; text-align: left; }
.smui-btn:disabled { opacity: .55; cursor: default; }
.smui-btn-mq { background: #d9534f; } .smui-btn-osm { background: #28a745; } .smui-btn-goog { background: #17a2b8; }
.smui-geosummary { margin-top: 14px; font-size: 13px; } .smui-geosummary .mt-1 { margin-top: 4px; }
.smui-geonote { margin-top: 10px; color: var(--smui-muted); }
.smui-geologwrap { max-height: 420px; overflow: auto; border: 1px solid #e3e6ea; border-radius: 6px; }
.smui-geolog th, .smui-geolog td { font-size: 12.5px; padding: 6px 10px; white-space: normal; }
@media (max-width: 900px) { .smui-geobox { min-width: 0; } .smui-geogrid { grid-template-columns: minmax(0, 1fr); } }
/* ---- Assign Server picker (assets/js/flow_serverpicker.js): job screen + Bulk Options ---- */
/* ---- Assign Server picker (assets/js/flow_serverpicker.js), redesigned 2026-10-20 ---- */
.fjsrv-modal { position: fixed; inset: 0; background: rgba(16,24,40,.45); display: none; align-items: flex-start; justify-content: center; z-index: 2100; padding: 40px 16px; overflow-y: auto; }
.fjsrv-modal.open { display: flex; }
.fjsrv-modal [hidden] { display: none !important; }
.fjsrv-box { background: #fff; border-radius: 12px; width: 100%; max-width: 680px; box-shadow: 0 12px 40px rgba(16,24,40,.2); min-width: 0; }
.fjsrv-hd { padding: 15px 20px 13px; border-bottom: 1px solid #eef0f3; font-size: 17px; font-weight: 600; display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.fjsrv-hd .x { cursor: pointer; color: var(--smui-muted); font-size: 22px; line-height: 1; background: none; border: 0; }
.fjsrv-job { font-size: 13px; font-weight: 400; color: var(--smui-muted); margin-top: 3px; display: flex; flex-wrap: wrap; gap: 3px 12px; }
.fjsrv-job i { margin-right: 4px; color: #98a2b3; }
.fjsrv-bd { padding: 16px 20px; min-width: 0; }
.fjsrv-ft { padding: 13px 20px; border-top: 1px solid #eef0f3; display: flex; justify-content: flex-end; align-items: center; gap: 10px; background: #fcfcfd; border-radius: 0 0 12px 12px; flex-wrap: wrap; }
.fjsrv-legend { flex: 1 1 0; min-width: 0; margin-right: auto; color: var(--smui-muted); font-size: 12.5px; line-height: 1.4; }
.fjsrv-btn { font: inherit; padding: 8px 16px; border-radius: 7px; font-size: 14px; border: 1px solid transparent; cursor: pointer; white-space: nowrap; }
.fjsrv-btn.primary { background: var(--smui-link); color: #fff; }
.fjsrv-btn.primary[disabled] { opacity: .5; cursor: default; }
.fjsrv-btn.primary.net, body .fjsrv-btn.primary.net { background: #7a5af8; border-color: #7a5af8; color: #fff; }
body .fjsrv-btn.primary.net:hover { background: #6941c6; border-color: #6941c6; color: #fff; }
.fjsrv-btn.ghost { background: #fff; border-color: #d0d5dd; color: #384150; }
.fjsrv-toolbar { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; }
.fjsrv-searchwrap { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; border: 1px solid #d0d5dd; border-radius: 8px; padding: 0 10px; color: #98a2b3; }
.fjsrv-searchwrap:focus-within { border-color: var(--smui-link); box-shadow: 0 0 0 3px rgba(38,116,200,.12); }
.fjsrv-search { font: inherit; flex: 1; min-width: 0; padding: 9px 0; border: 0; outline: 0; font-size: 14px; background: none; color: #1d2733; }
.fjsrv-searchwrap kbd { font: 11px/1 ui-monospace, Menlo, monospace; color: #98a2b3; border: 1px solid #e4e7ec; border-radius: 4px; padding: 3px 5px; }
.fjsrv-tabs { display: flex; gap: 4px; border-bottom: 1px solid #eef0f3; margin-bottom: 12px; }
.fjsrv-tab { font: inherit; font-size: 14px; font-weight: 500; padding: 8px 12px; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; cursor: pointer; color: var(--smui-muted); }
.fjsrv-tab.active { color: #1d2733; border-bottom-color: var(--smui-green); }
.fjsrv-tab.net.active { color: #4a2fa8; border-bottom-color: #7a5af8; }
.fjsrv-tab .n { font-size: 11.5px; background: #f2f4f7; color: #475467; border-radius: 10px; padding: 1px 7px; margin-left: 3px; }
.fjsrv-tab .n:empty { display: none; }
.fjsrv-hint { font-size: 12.5px; color: var(--smui-muted); margin: -4px 0 10px; }
.fjsrv-banner { display: flex; gap: 10px; align-items: flex-start; border-radius: 8px; padding: 10px 13px; font-size: 13.5px; margin-bottom: 12px; line-height: 1.45; }
.fjsrv-banner.info { border: 1px dashed #d0d5dd; background: #fcfcfd; color: #475467; }
.fjsrv-banner.info i { color: #98a2b3; margin-top: 2px; }
.fjsrv-banner.warn { background: #fef0c7; color: #7a2e0e; }
.fjsrv-sub { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #98a2b3; margin: 12px 0 6px; }
.fjsrv-sub:first-child { margin-top: 0; }
.fjsrv-sort { text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 12.5px; color: var(--smui-muted); display: inline-flex; gap: 6px; align-items: center; }
.fjsrv-sort select { font: inherit; font-size: 12.5px; border: 1px solid #d0d5dd; border-radius: 6px; padding: 2px 6px; background: #fff; color: #344054; }
.fjsrv-list { max-height: 360px; overflow-y: auto; border: 1px solid #eef0f3; border-radius: 10px; }
.fjsrv-row { display: flex; align-items: center; gap: 11px; padding: 10px 13px; border-top: 1px solid #f2f4f7; cursor: pointer; }
.fjsrv-row:first-child { border-top: 0; }
.fjsrv-row:hover { background: #fafbfc; }
.fjsrv-row:focus-visible { outline: 2px solid var(--smui-link); outline-offset: -2px; }
.fjsrv-row.sel { background: #f3faf6; box-shadow: inset 3px 0 0 var(--smui-green); }
.fjsrv-row.net.sel { background: #f7f5ff; box-shadow: inset 3px 0 0 #7a5af8; }
.fjsrv-row.off { opacity: .55; cursor: default; }
.fjsrv-radio { flex: 0 0 auto; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid #98a2b3; box-sizing: border-box; }
.fjsrv-row.sel .fjsrv-radio { border: 5px solid var(--smui-green); }
.fjsrv-row.net.sel .fjsrv-radio { border-color: #7a5af8; }
.fjsrv-av { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; background: #dbeafe; color: #1e40af; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 13px; }
.fjsrv-av.fwd { background: #f4ebff; color: #6941c6; }
.fjsrv-av.net { background: #7a5af8; color: #fff; }
.fjsrv-info { min-width: 0; flex: 1; }
.fjsrv-nm { font-size: 14.5px; font-weight: 600; color: #1d2733; }
.fjsrv-loc { font-size: 12.5px; color: var(--smui-muted); margin-top: 1px; }
.fjsrv-notes { font-size: 12.5px; color: red; margin-top: 1px; white-space: pre-line; }   /* the server's notes (ps.enotes) */
.fjsrv-pills { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.fjsrv-why { font-size: 12px; color: var(--smui-muted); margin-top: 4px; }
.fjsrv-pill { font-size: 11.5px; font-weight: 600; padding: 2px 7px; border-radius: 5px; background: #f2f4f7; color: #344054; white-space: nowrap; }
.fjsrv-pill.free, .fjsrv-pill.ok { background: #dcfae6; color: #067647; }
.fjsrv-pill.busy { background: #fef0c7; color: #93370d; }
.fjsrv-pill.bad { background: #fee4e2; color: #b42318; }
.fjsrv-pill.cov { background: #e0eaff; color: #3538cd; }
.fjsrv-pill.near { background: #e0f2fe; color: #026aa2; }
.fjsrv-pill.fwd, .fjsrv-pill.netp { background: #f4ebff; color: #6941c6; }
.fjsrv-empty { color: var(--smui-muted); font-size: 14px; padding: 12px 13px; border: 1px solid #eef0f3; border-radius: 10px; line-height: 1.5; }
.fjsrv-empty a { color: var(--smui-link); }
.fjsrv-netnote { font-size: 12.5px; color: var(--smui-muted); margin: 10px 0 0; line-height: 1.5; }
.fjsrv-opts { margin-top: 14px; padding-top: 13px; border-top: 1px solid #eef0f3; display: grid; gap: 10px; }
.fjsrv-opt { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 10px; align-items: center; font-size: 13.5px; }
.fjsrv-opt > b { font-weight: 500; color: #475467; }
.fjsrv-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.fjsrv-chip { font: inherit; font-size: 13px; padding: 5px 11px; border-radius: 100px; border: 1px solid #d0d5dd; background: #fff; color: #344054; cursor: pointer; }
.fjsrv-chip.on { background: #1d2733; border-color: #1d2733; color: #fff; }
.fjsrv-chips input[type=date] { font: inherit; font-size: 13px; padding: 4px 8px; border: 1px solid #d0d5dd; border-radius: 6px; }
.fjsrv-chk { cursor: pointer; display: inline-flex; gap: 7px; align-items: center; }
.fjsrv-opt[data-fjsrv=espwrap] { align-items: start; } .fjsrv-opt[data-fjsrv=espwrap] > b { padding-top: 1px; }
.fjsrv-espwarn { margin-top: 6px; background: #fef0c7; color: #7a2e0e; border-radius: 6px; padding: 7px 10px; font-size: 12.5px; line-height: 1.45; }
.fjsrv-note { font: inherit; font-size: 13.5px; width: 100%; box-sizing: border-box; border: 1px solid #d0d5dd; border-radius: 8px; padding: 7px 10px; resize: vertical; min-height: 36px; }
.fjsrv-msg { margin-top: 10px; font-size: 13px; min-height: 1em; color: var(--smui-muted); }
.fjsrv-msg.err { color: #b42318; } .fjsrv-msg.warn { color: #93370d; } .fjsrv-msg.ok { color: #067647; }
.fjsrv-fld { margin-bottom: 12px; }
.fjsrv-fld label { display: block; font-size: 12.5px; color: var(--smui-muted); margin-bottom: 4px; }
.fjsrv-fld input[type=text] { width: 100%; padding: 8px 10px; border: 1px solid #d0d5dd; border-radius: 6px; font-size: 14px; box-sizing: border-box; }
.fjsrv-fldrow { display: flex; gap: 10px; }
.fjsrv-fld.grow { flex: 1; } .fjsrv-fld.w140 { max-width: 140px; } .fjsrv-fld.w110 { max-width: 110px; } .fjsrv-fld.w70 { max-width: 70px; }
@media (max-width: 560px) {
  .fjsrv-modal { padding: 12px 8px; }
  .fjsrv-bd, .fjsrv-hd, .fjsrv-ft { padding-left: 14px; padding-right: 14px; }
  .fjsrv-opt { grid-template-columns: 1fr; gap: 5px; }
  .fjsrv-legend { flex-basis: 100%; }
  .fjsrv-list { max-height: 48vh; }
}
/* ---- New Job button on the Jobs tab strip ---- */
.smui-jobtabs-new { margin-left: auto; align-self: center; margin-bottom: 4px; font-size: 13.5px; font-weight: 600; color: #fff; background: var(--smui-green); border-radius: 6px; padding: 7px 14px; text-decoration: none; white-space: nowrap; }
.smui-jobtabs-new:hover { filter: brightness(1.08); }
/* ---- New Job screen (flownewjob.php) ---- */
/* the hidden attribute must beat the grid/flex displays below */
.fnj-layout [hidden], .smui-jobtabs [hidden] { display: none !important; }
.fnj-layout { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 28px; align-items: start; }
.fnj-side { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 2px; }
.fnj-side a { padding: 7px 10px; border-left: 3px solid transparent; color: var(--smui-text); text-decoration: none; font-size: 14px; }
.fnj-side a:hover { background: #f2f4f7; border-left-color: #cfd4dd; }
.fnj-form { max-width: 900px; }
.fnj-sec { padding: 6px 0 26px; border-bottom: 1px solid #e4e7ec; margin-bottom: 22px; }
.fnj-sec h2 { font-size: 18px; font-weight: 600; margin: 0 0 14px; }
.fnj-sec h3 { font-size: 14.5px; font-weight: 600; margin: 18px 0 10px; color: #384150; }
.fnj-help { font-size: 13px; color: var(--smui-muted); margin: -6px 0 12px; }
.fnj-help-inline { font-size: 12.5px; color: var(--smui-muted); }
.fnj-cslink { background: none; border: 0; padding: 9px 0 0; font: inherit; font-size: 13.5px; color: var(--smui-link); cursor: pointer; }
.fnj-cslink:hover { text-decoration: underline; }
#fnjCaseStyle { font-family: inherit; line-height: 1.35; resize: vertical; margin-bottom: 4px; text-transform: none; }
.fnj-row { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 12px; align-items: start; margin-bottom: 12px; }
.fnj-row > label { padding-top: 9px; font-size: 14px; color: #384150; }
.fnj-ctl { position: relative; min-width: 0; }
.fnj-ctl input[type=text], .fnj-ctl input[type=date], .fnj-ctl input[type=time], .fnj-ctl select, .fnj-ctl textarea { font: inherit; font-size: 14px; padding: 8px 10px; border: 1px solid #d0d5dd; border-radius: 6px; box-sizing: border-box; width: 100%; background: #fff; }
.fnj-ctl textarea { resize: vertical; margin-top: 6px; }
/* Case No label picker in front of the case number (includes/casenolabels.php) */
.fnj-cnlrow { display: flex; gap: 8px; }
.fnj-ctl .fnj-cnlrow > select { flex: 0 0 auto; width: auto; max-width: 150px; }
.fnj-cnlrow > .fnj-pick { flex: 1; min-width: 0; }
.fnj-ctl select.fnj-helper { width: auto; max-width: 100%; color: var(--smui-muted); }
.fnj-withbtn { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.fnj-withbtn > input, .fnj-withbtn > select { flex: 1; min-width: 160px; width: auto; }
.fnj-withbtn > input[type=date], .fnj-withbtn > input[type=time] { flex: 0 0 auto; }
.fnj-withbtn .fnj-inline { flex-basis: 100%; }
.fnj-party { display: grid; grid-template-columns: minmax(0, 1fr) 180px; gap: 8px; }
.fnj-csz { display: grid; grid-template-columns: minmax(0, 1fr) 70px 120px; gap: 8px; }
.fnj-radios { display: flex; gap: 16px; align-items: center; padding-top: 8px; font-size: 14px; }
.fnj-radios label { display: flex; align-items: center; gap: 5px; cursor: pointer; }
.fnj-pick { display: flex; gap: 8px; align-items: center; position: relative; }
.fnj-pick input { flex: 1; }
.fnj-suggest { position: absolute; left: 0; right: 0; top: 100%; z-index: 30; background: #fff; border: 1px solid #d0d5dd; border-radius: 6px; box-shadow: 0 8px 24px rgba(16,24,40,.12); max-height: 300px; overflow-y: auto; margin-top: 3px; }
.fnj-sug { padding: 8px 12px; cursor: pointer; border-bottom: 1px solid #f0f2f5; }
.fnj-sug:last-child { border-bottom: 0; } .fnj-sug:hover { background: #f5f8fc; } .fnj-sug.on { background: #eaf2fd; }
.fnj-sug-nm { font-size: 14px; font-weight: 600; color: #1d2733; }
.fnj-sug-sub { font-size: 12.5px; color: var(--smui-muted); }
.fnj-sug-tag { font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 10px; background: #eef4ff; color: var(--smui-link); margin-left: 6px; vertical-align: middle; }
.fnj-sug-empty { padding: 10px 12px; font-size: 13px; color: var(--smui-muted); }
.fnj-sug-note { padding: 8px 12px; font-size: 12.5px; color: var(--smui-muted); background: #f9fafb; border-bottom: 1px solid #eaecf0; }
.fnj-sug-note:last-child { border-bottom: 0; border-top: 1px solid #eaecf0; }
.fnj-sug-note:first-child { border-top: 0; border-bottom: 1px solid #eaecf0; position: sticky; top: 0; z-index: 1; }
.fnj-chosen { display: flex; gap: 6px; align-items: baseline; padding: 9px 0; font-size: 14.5px; flex-wrap: wrap; }
.fnj-chosen-name { font-weight: 600; color: #1d2733; }
.fnj-chosen-sub { color: var(--smui-muted); }
.fnj-chosen a { color: var(--smui-link); font-size: 13px; margin-left: 8px; }
.fnj-pick > a { color: var(--smui-link); font-size: 13px; white-space: nowrap; }
.fnj-inline { margin-top: 10px; padding: 14px; border: 1px solid #e4e7ec; border-radius: 8px; background: #fafbfc; }
.fnj-inline-foot { display: flex; gap: 8px; margin-top: 8px; }
.fnj-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fnj-fld label { display: block; font-size: 12.5px; color: var(--smui-muted); margin-bottom: 4px; }
.fnj-fld.span2 { grid-column: span 2; }
.fnj-fld.fnj-sz { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 6px 8px; align-items: end; }
.fnj-fld.fnj-sz label { margin: 0; grid-row: 1; }
.fnj-fld.fnj-sz input { grid-row: 2; }
.fnj-chk { display: flex; gap: 6px; align-items: center; font-size: 13.5px; color: #384150 !important; cursor: pointer; }
.fnj-existing { border: 1px solid #cfe3d6; background: #f2faf5; border-radius: 8px; padding: 12px 14px; margin: 0 0 14px 182px; font-size: 14px; }
.fnj-existing-hd { margin-bottom: 4px; } .fnj-existing-hd a { margin-left: 10px; font-size: 13px; color: var(--smui-link); }
.fnj-muted { color: var(--smui-muted); }
.fnj-minor { font-size: 12.5px; color: var(--smui-link); margin-left: 8px; text-decoration: none; }
.fnj-btn { font: inherit; font-size: 13.5px; padding: 8px 14px; border-radius: 6px; border: 1px solid transparent; cursor: pointer; white-space: nowrap; text-decoration: none; display: inline-flex; align-items: center; }
.fnj-btn.primary { background: var(--smui-link); color: #fff; }
.fnj-btn.ghost { background: #fff; border-color: #d0d5dd; color: #384150; }
.fnj-btn.big { font-size: 15px; padding: 10px 22px; }
.fnj-btn.big.primary { background: var(--smui-green); }
.fnj-btn[disabled] { opacity: .6; cursor: default; }
/* z-index: above the .fnj-suggest lists (30), so an open list can never sit over Save Job / Cancel */
.fnj-savebar { position: sticky; bottom: 0; z-index: 40; display: flex; gap: 10px; align-items: center; justify-content: flex-end; padding: 14px 0; background: linear-gradient(to top, #fff 75%, rgba(255,255,255,0)); }
.fnj-msg { margin-right: auto; font-size: 13.5px; color: var(--smui-muted); }
.fnj-msg.err { color: #b42318; font-weight: 600; }
.fnj-keyhint { font-size: 12px; color: var(--smui-muted); }
.fnj-ctl .mq-place-search { display: block; width: 100%; position: relative; }
@media (max-width: 860px) { .fnj-layout { grid-template-columns: minmax(0, 1fr); } .fnj-side { display: none; } .fnj-row { grid-template-columns: minmax(0, 1fr); } .fnj-row > label { padding-top: 0; } .fnj-existing { margin-left: 0; } }
.smui-apprline { font-size: 12px; color: #5b6573; margin-top: 2px; }
.smui-appr-yes { color: #167d4d; font-weight: 700; }
.smui-appr-no { color: #d21f4d; font-weight: 700; }
.smui-unappr { font-size: 12px; color: #b35c00; font-weight: 600; margin-top: 2px; white-space: nowrap; }
.smui-unappr .fa { color: #e08a00; }

/* ---- Jobs list, 2026-09 redesign (flowjobs.php + includes/smui_jobfilterpanel.php) ----
   Everything is under .smj / .smj-* so the other list pages keep their look. The Map tab
   shares the form, so it gets the new header and panel too. */
.smj .smj-head { gap: 10px; margin-bottom: 18px; }
.smj-title { display: flex; align-items: center; gap: 10px; font-size: 26px; font-weight: 700; margin: 0 6px 0 0; }
.smj-title .fa { font-size: 23px; color: #1d2733; }
.smj .smj-search { flex: 1 1 320px; max-width: 540px; min-width: 220px; border: 1px solid #d0d5dd; border-radius: 8px; padding: 9px 12px; background: #fff; }
.smj .smj-search input { font-size: 14px; background: transparent; }
.smj-views { display: inline-flex; align-items: center; gap: 8px; border: 1px solid #d0d5dd; border-radius: 8px; padding: 0 6px 0 12px; background: #fff; color: #344054; }
.smj-views select { border: 0; outline: 0; padding: 8px 4px; font-size: 14px; background: transparent; min-width: 150px; }
.smj-btn { font: inherit; font-size: 14px; font-weight: 500; display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 8px; border: 1px solid transparent; cursor: pointer; text-decoration: none; white-space: nowrap; background: #fff; line-height: 1.25; }
.smj-btn-line { border-color: #c7d7ee; color: var(--smui-link); }
.smj-btn-line:hover { background: #f3f7fd; }
.smj-btn-greenline { border-color: var(--smui-green); color: var(--smui-green); background: #eef8f2; }
.smj-btn-greenline:hover { background: #e1f3e8; }
.smj .smui-filtertoggle { font-size: 14px; }
.smj .smui-filtertoggle:hover { text-decoration: none; }

.smj-qhead { display: flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 600; margin: 0 0 10px; }
.smj-qhead .fa { color: var(--smui-muted); font-size: 14px; cursor: help; }
/* The row has --qk equal slots: the number of showing cards, but never fewer than 5. Five or
   more cards split the row and fill it edge to edge; one to four keep the width of a fifth of
   the row, lined up on the left, instead of each stretching across half the page. auto-fill
   (not auto-fit) keeps the empty slots, so those few cards do not grow into them. Slots under
   118px wrap onto another row, all the same width. The -0.5px keeps rounding from ever
   leaving room for one slot fewer than --qk. */
.smj-queues { --qk: 9; display: grid; grid-template-columns: repeat(auto-fill, minmax(max(118px, calc((100% - (var(--qk) - 1) * 10px) / var(--qk) - 0.5px)), 1fr)); gap: 10px; margin-bottom: 16px; }
.smj-queues[hidden] { display: none; }
.smj-q.smj-q-off { display: none; }
.smj-qcustom-wrap { margin-left: auto; position: relative; font-size: 13px; font-weight: 500; }
.smj-qcustom { color: var(--smui-link); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.smj-qcustom:hover { text-decoration: underline; }
.smj-qhead .smj-qcustom .fa { color: inherit; cursor: pointer; font-size: 13px; }
.smj-qmenu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 230px; background: #fff; border: 1px solid #e4e7ec; border-radius: 8px; box-shadow: 0 8px 24px rgba(16, 24, 40, .14); padding: 8px 6px; }
.smj-qmenu[hidden] { display: none; }
.smj-qmenu-hd { font-size: 12px; color: var(--smui-muted); padding: 2px 8px 6px; font-weight: 500; }
.smj-qmenu label { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 5px; cursor: pointer; font-weight: 400; color: #344054; }
.smj-qmenu label:hover { background: #f5f8fc; }
.smj-qmenu input { accent-color: var(--smui-link); margin: 0; }
.smj-qnone { color: var(--smui-muted); font-size: 13.5px; margin: 0 0 16px; }
.smj-qnone[hidden] { display: none; }
.smj-qpaused { font-size: 13px; color: #7a4a00; background: #fff8e6; border-left: 3px solid #e6a100; border-radius: 6px; padding: 7px 10px; margin: 0 0 10px; }
.smj-qpaused .fa { margin-right: 4px; }
.smj-qhideall { margin-left: 12px; color: var(--smui-muted); font-size: 14px; font-weight: 500; }
.smj-qhideall:hover { color: var(--smui-link); }
.smj-qhideall[hidden], .smj-qhead[hidden] { display: none; }
.smj-qshowall { margin-left: 8px; color: var(--smui-link); text-decoration: none; font-weight: 600; }
.smj-qmenu-all { display: flex; gap: 14px; padding: 2px 2px 8px; margin-bottom: 6px; border-bottom: 1px solid #eef0f3; font-size: 13px; }
.smj-qmenu-all a { color: var(--smui-link); text-decoration: none; font-weight: 600; }
.smj-q { --qbg: #f2f4f7; --qbd: #e4e7ec; --qfg: #344054; display: flex; gap: 10px; align-items: flex-start; padding: 12px; min-height: 74px; box-sizing: border-box;
         border-radius: 10px; background: var(--qbg); border: 1px solid var(--qbd); text-decoration: none; color: #101828;
         box-shadow: 0 1px 2px rgba(16, 24, 40, .05); transition: border-color .15s, box-shadow .15s; }
.smj-q:hover { border-color: var(--qfg); }
.smj-q.on { border-color: var(--qfg); box-shadow: 0 0 0 2px var(--qfg); }
.smj-q-ic { color: var(--qfg); font-size: 18px; width: 22px; text-align: center; padding-top: 1px; flex: 0 0 auto; }
.smj-q-txt { min-width: 0; }
.smj-q-lbl { display: block; color: var(--qfg); font-size: 13.5px; font-weight: 500; line-height: 1.25; }
.smj-q-lbl small { display: block; font-size: 12px; font-weight: 400; opacity: .85; }
.smj-q-n { display: block; font-size: 22px; font-weight: 700; margin-top: 5px; color: #101828; font-variant-numeric: tabular-nums; }
.smj-t-slate  { --qbg: #f2f4f7; --qbd: #e4e7ec; --qfg: #344054; }
.smj-t-blue   { --qbg: #eef4ff; --qbd: #c7d7fe; --qfg: #3538cd; }
.smj-t-red    { --qbg: #fef3f2; --qbd: #fecdca; --qfg: #b42318; }
.smj-t-orange { --qbg: #fff4ed; --qbd: #f9dbaf; --qfg: #c4320a; }
.smj-t-amber  { --qbg: #fffaeb; --qbd: #fedf89; --qfg: #b54708; }
.smj-t-purple { --qbg: #f4f3ff; --qbd: #d9d6fe; --qfg: #5925dc; }
.smj-t-green  { --qbg: #ecfdf3; --qbd: #abefc6; --qfg: #067647; }
.smj-t-sky    { --qbg: #eff8ff; --qbd: #b2ddff; --qfg: #175cd3; }
.smj-t-pink   { --qbg: #fdf2fa; --qbd: #fcceee; --qfg: #c11574; }

.smj-chipbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; background: #fff; border: 1px solid #e4e7ec; border-radius: 10px; padding: 10px 14px; margin-bottom: 10px; }
.smj-chipbar-lbl { font-weight: 600; font-size: 14.5px; margin-right: 6px; }
.smj-nochips { color: var(--smui-muted); font-size: 14px; }
.smj-chip { display: inline-flex; align-items: center; gap: 6px; background: #ecfdf3; border: 1px solid #abefc6; color: #085d3a; border-radius: 6px; padding: 5px 4px 5px 10px; font-size: 13.5px; font-weight: 500; }
.smj-chip a { color: inherit; opacity: .65; text-decoration: none; padding: 0 5px; border-radius: 4px; }
.smj-chip a:hover { opacity: 1; background: rgba(8, 93, 58, .1); }
.smj-clearall { display: inline-flex; align-items: center; gap: 6px; color: #d92d20; font-size: 14px; text-decoration: none; margin-left: 6px; }
.smj-clearall:hover { text-decoration: underline; }
.smj-chipbar-end { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

.smj .smj-panel { position: relative; background: #fff; border: 1px solid #e4e7ec; border-radius: 10px; padding: 16px 44px 16px 0;
                  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px 0; margin: 0 0 14px; box-shadow: 0 1px 3px rgba(16, 24, 40, .06); }
.smj .smj-panel .smui-fp { padding: 0 16px; border-left: 1px solid #eef1f5; min-width: 0; }
.smj .smj-panel .smui-fp:first-of-type { border-left: 0; }
.smj .smj-panel .smui-fp-label { color: #101828; font-weight: 600; font-size: 14px; margin-bottom: 8px; }
.smj-sub { font-size: 12.5px; color: var(--smui-muted); font-weight: 500; margin: 12px 0 4px; }
.smj .smui-fp-label + .smj-sub { margin-top: 0; }
.smj .smj-panel .smui-fp label { display: flex; align-items: center; gap: 7px; font-size: 13.5px; padding: 3px 0; color: #344054; }
.smj .smj-panel input[type=checkbox], .smj .smj-panel input[type=radio] { accent-color: var(--smui-link); margin: 0; }
/* long option lists (job types, service types, document types) scroll inside their column; the new layout's pop-ups scroll on their own */
.smj .smj-panel .smj-long { max-height: 240px; overflow-y: auto; }
.smj .smj-panel .smui-fp label.smj-not { color: var(--smui-muted); }
.smj .smj-panel select, .smj .smj-panel input[type=date] { border-radius: 6px; border-color: #d0d5dd; padding: 7px 8px; font-size: 13.5px; background: #fff; }
.smj .smj-panel .smj-srvsearch { position: relative; display: block; padding: 0; }
.smj-srvsearch input { font: inherit; font-size: 13.5px; width: 100%; box-sizing: border-box; padding: 7px 30px 7px 10px; border: 1px solid #d0d5dd; border-radius: 6px; }
.smj-srvsearch .fa { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: var(--smui-muted); font-size: 13px; }
.smj-priarrow { font-size: 12px; }
.smj-presets { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.smj-preset { font: inherit; font-size: 13px; padding: 6px 10px; border: 1px solid #d0d5dd; border-radius: 6px; background: #fff; color: #344054; cursor: pointer; }
.smj-preset:hover { border-color: var(--smui-green); }
.smj-preset.on { background: #ecfdf3; border-color: var(--smui-green); color: #085d3a; font-weight: 600; }
.smj-custom { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.smj-custom[hidden] { display: none; }
.smj .smj-date input[type=date] { margin-top: 0; }
.smj-panel-x { position: absolute; top: 10px; right: 12px; border: 0; background: none; color: var(--smui-muted); font-size: 18px; cursor: pointer; padding: 4px 6px; }
.smj-panel-x:hover { color: #101828; }

.smj-strip { gap: 12px; margin: 14px 0 10px; }
.smj-strip .smui-count { font-size: 17px; font-weight: 700; }
.smj-strip .smui-bulkselect { padding: 8px 10px; border-radius: 8px; border-color: #d0d5dd; background: #fff; font-size: 14px; }
.smj-strip .smui-export:hover { text-decoration: none; }
.smj-pager { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
.smj-pager > span:first-child { margin-right: 6px; }
.smj-pgbtn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; box-sizing: border-box; border: 1px solid #d0d5dd; border-radius: 8px; background: #fff; color: #344054; text-decoration: none; font-size: 12px; }
a.smj-pgbtn:hover { border-color: var(--smui-link); color: var(--smui-link); text-decoration: none; }
.smj-pgbtn.off { opacity: .4; }

.smj-tablewrap { background: #fff; border: 1px solid #e4e7ec; border-radius: 10px; overflow-x: auto; }
.smj-table { border-top: 0; font-size: 14px; }
.smj-table th { font-weight: 600; color: #344054; font-size: 13.5px; background: #f9fafb; white-space: nowrap; padding: 11px 12px; }
.smj-table td { padding: 11px 12px; vertical-align: middle; }
.smj-table tbody tr:nth-child(even) { background: transparent; }
.smj-table tbody tr:hover > td { background: #f9fbff; }
.smj-table tr:last-child > td { border-bottom: 0; }
.smj-num { text-align: center; }
.smj-dash { color: #98a2b3; }
.smj-addr { font-size: 13px; color: #344054; line-height: 1.4; min-width: 150px; }
.smj-due { font-size: 13.5px; white-space: nowrap; }
.smj-due.late { color: #d92d20; font-weight: 500; }
.smj-pill { display: inline-block; font-size: 12.5px; font-weight: 500; padding: 3px 10px; border-radius: 6px; white-space: nowrap; line-height: 1.3; }
.smj-p-open  { background: #eff8ff; color: #175cd3; }
.smj-p-amber { background: #fffaeb; color: #b54708; }
.smj-p-hold  { background: #f4f3ff; color: #5925dc; }
.smj-p-skip  { background: #fdf2fa; color: #c11574; }
.smj-p-good  { background: #ecfdf3; color: #067647; }
.smj-p-warn  { background: #fff4ed; color: #c4320a; }
.smj-p-bad   { background: #fef3f2; color: #b42318; font-weight: 700; }
.smj-tint0 { background: #fff4ed; color: #c4320a; }
.smj-tint1 { background: #ecfdf3; color: #067647; }
.smj-tint2 { background: #f4f3ff; color: #5925dc; }
.smj-tint3 { background: #eff8ff; color: #175cd3; }
.smj-tint4 { background: #fdf2fa; color: #c11574; }
.smj-tint5 { background: #fffaeb; color: #b54708; }
.smj-jstatus { font-size: 12px; margin-top: 3px; }
.smj-pri { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 500; padding: 3px 9px; border-radius: 6px; white-space: nowrap; }
.smj-pri .fa { font-size: 10.5px; }
@media (max-width: 720px) {
  .smj .smj-search { max-width: none; }
  .smj-chipbar-end { margin-left: 0; }
  .smj .smj-panel { padding-left: 0; }
}

/* Flow New Job: frequent plaintiffs (chips under the Plaintiff box, type-ahead, star-to-pin) */
.fnj-plfwrap { position: relative; min-width: 0; }
.fnj-plfwrap input { width: 100%; padding-right: 34px; }
.fnj-plfstar { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: 0; background: none; font-size: 18px; line-height: 1; color: #98a2b3; cursor: pointer; padding: 2px 4px; }
.fnj-plfstar:hover { color: #f59e0b; }
.fnj-plfstar.on { color: #f59e0b; }
.fnj-plfchips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; align-items: center; }
.fnj-chip-lbl { font-size: 12px; color: var(--smui-muted); margin-right: 2px; }
.fnj-chip { border: 1px solid #d0d5dd; background: #fff; border-radius: 14px; padding: 3px 10px; font-size: 12.5px; color: #1d2733; cursor: pointer; max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fnj-chip:hover { border-color: var(--smui-link); background: #f5f8fc; }
.fnj-chip.pinned { border-color: #f5c451; background: #fffaeb; }
.fnj-chip .n { color: var(--smui-muted); font-size: 11px; margin-left: 5px; }
.fnj-chip .x { display: inline-block; width: 16px; height: 16px; line-height: 15px; text-align: center; border-radius: 50%; margin: 0 -5px 0 4px; color: #98a2b3; font-size: 13px; visibility: hidden; }
.fnj-chip:hover .x { visibility: visible; }
.fnj-chip .x:hover { background: #fee4e2; color: #b3261e; }
/* filter-panel counts (ClickHouse tier only) */
.smui-fc { color: var(--smui-muted); font-size: 12px; margin-left: auto; padding-left: 6px; font-variant-numeric: tabular-nums; }
/* New Job: Documents -- frequent chips + "Save to list" (flow_newjob.js) */
.fnj-docsave { display: inline-block; margin-top: 6px; font-size: 12.5px; color: var(--smui-link); text-decoration: none; }
.fnj-docsave:hover { text-decoration: underline; }
.fnj-docsavepanel { margin-top: 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; background: #f7f9fc; border: 1px solid #e4e7ec; border-radius: 6px; padding: 8px 10px; }
.fnj-docsavepanel label { color: var(--smui-muted); }
.fnj-docsavepanel input { flex: 1; min-width: 200px; font: inherit; padding: 5px 8px; border: 1px solid #d0d5dd; border-radius: 5px; }
#fnjDocSaveMsg { font-size: 12.5px; }

/* ---- Jobs list: Attempts to Review queue (assets/js/flow_attreview.js) ---- */
.smj-review { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0 0 14px; padding: 14px 16px;
  border: 1px solid #e9d7fe; border-radius: 12px; background: linear-gradient(100deg, #f9f5ff 0%, #ffffff 70%);
  box-shadow: 0 1px 2px rgba(16,24,40,.04); transition: background .5s, border-color .5s; }
.smj-review-ic { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  background: #7f56d9; color: #fff; font-size: 17px; box-shadow: 0 4px 10px rgba(127,86,217,.28); }
.smj-review-txt { flex: 1 1 280px; min-width: 0; }
.smj-review-h { font-weight: 600; font-size: 15.5px; color: #42307d; }
.smj-review-sub { font-size: 13.5px; color: var(--smui-muted); margin-top: 2px; }
.smj-review-sub strong { color: #42307d; }
.smj-review-ok { color: #067647; font-weight: 600; }
.smj-review-sel { font: inherit; font-size: 13.5px; padding: 8px 13px; border-radius: 8px; border: 1px solid #d6bbfb; background: #fff; color: #6941c6; cursor: pointer; }
.smj-review-sel:hover { background: #f9f5ff; }
.smj-review-go { font: inherit; font-size: 14px; font-weight: 600; padding: 9px 16px; border-radius: 8px; border: 0; background: var(--smui-green, #12b76a);
  color: #fff; cursor: pointer; box-shadow: 0 2px 6px rgba(18,183,106,.3); transition: background .2s, transform .1s; }
.smj-review-go:hover:not(:disabled) { transform: translateY(-1px); }
.smj-review-go:disabled { background: #c9d2dc; box-shadow: none; cursor: default; }
.smj-review-go.armed { background: #f79009; box-shadow: 0 0 0 4px rgba(247,144,9,.18); animation: smjArm 1s ease-in-out infinite; }
@keyframes smjArm { 50% { box-shadow: 0 0 0 7px rgba(247,144,9,.10); } }
.smj-review.smj-review-done { background: linear-gradient(100deg, #ecfdf3 0%, #ffffff 70%); border-color: #abefc6; }

.smj-huamode tr.smj-attrow td { border-top: 0; padding-top: 0; padding-bottom: 14px; background: #fcfbff; }
.smj-huamode tr:has(.smui-rowck:checked) td, .smj-huamode tr:has(.smui-rowck:checked) + tr.smj-attrow td { background: #f4f0ff; }
.smj-att { display: flex; flex-direction: column; gap: 6px; margin-left: 2px; padding-left: 16px; border-left: 2px dashed #d9c9fb; }
.smj-att-wait, .smj-att-none { font-size: 13px; color: var(--smui-muted); padding: 4px 0; }
.smj-att-none .fa { color: #17b26a; }
.smj-att-card { position: relative; display: grid; grid-template-columns: 74px 30px 1fr; gap: 12px; align-items: start; max-width: 980px;
  background: #fff; border: 1px solid #ece7f7; border-radius: 10px; padding: 9px 12px;
  animation: smjAttIn .35s ease both; animation-delay: calc(var(--i, 0) * 45ms); }
.smj-att-card::before { content: ""; position: absolute; left: -22px; top: 15px; width: 10px; height: 10px; border-radius: 50%;
  background: #fff; border: 2px solid #9e77ed; }
@keyframes smjAttIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.smj-att-when { display: flex; flex-direction: column; line-height: 1.2; }
.smj-att-when .d { font-weight: 600; font-size: 13.5px; color: #1d2733; }
.smj-att-when .y, .smj-att-when .t { font-size: 12px; color: var(--smui-muted); }
.smj-att-av { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 11.5px; font-weight: 700; letter-spacing: .02em;
  color: #fff; background: linear-gradient(135deg, #9e77ed, #6941c6); }
.smj-att-meta { font-size: 12.5px; color: #475467; font-weight: 600; }
.smj-att-meta span { font-weight: 400; color: var(--smui-muted); }
.smj-att-note { font-size: 13.5px; color: #1d2733; margin-top: 2px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.smj-att-note em { color: var(--smui-muted); }
tr.smj-gone td { background: #dcfae6 !important; transition: background .25s, opacity .5s .35s; opacity: 0; }
@media (max-width: 720px) { .smj-att-card { grid-template-columns: 60px 1fr; } .smj-att-av { display: none; } }
.smj-att-early { display: none; }
.smj-att.smj-att-open .smj-att-early { display: grid; }
.smj-att-more { align-self: flex-start; font: inherit; font-size: 12.5px; color: #6941c6; background: #f4f0ff; border: 1px solid #e9d7fe; border-radius: 100px; padding: 3px 11px; cursor: pointer; }
.smj-att-more:hover { background: #ebe4ff; }

/* Work Queue cards that need somebody today (Overdue, Due Today, JEN, ServeManager) pulse while their count is not 0 */
.smj-q.smj-q-flash { animation: smjQFlash 1.6s ease-in-out infinite; }
.smj-q.smj-q-flash .smj-q-n { animation: smjQNum 1.6s ease-in-out infinite; }
@keyframes smjQFlash { 0%, 100% { box-shadow: 0 0 0 0 rgba(240,68,56,0); } 50% { box-shadow: 0 0 0 4px rgba(240,68,56,.28); border-color: #f97066; } }
@keyframes smjQNum { 50% { color: #d92d20; } }
@media (prefers-reduced-motion: reduce) { .smj-q.smj-q-flash, .smj-q.smj-q-flash .smj-q-n { animation: none; } .smj-q.smj-q-flash { box-shadow: 0 0 0 3px rgba(240,68,56,.3); } }

/* Jobs list: back to top (flowjobs.php) -- round button once scrolled, and a one-off note by the job you came back to.
   Bottom-left, beside the Job # column (flowjobs.php sets left to the list's edge; 227px = sidebar + page padding until
   then), clear of the Help button and the peek panel on the right. */
.smj-totop { position: fixed; left: 227px; bottom: 26px; z-index: 1500; width: 46px; height: 46px; border-radius: 50%; border: 0;
  background: var(--smui-nav-bg, #1f64ae); color: #fff; font-size: 17px; cursor: pointer; box-shadow: 0 6px 18px rgba(16,24,40,.22);
  opacity: 0; transform: translateY(12px) scale(.9); pointer-events: none; transition: opacity .2s, transform .2s; }
.smj-totop.show { opacity: 1; transform: none; pointer-events: auto; }
.smj-totop:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(16,24,40,.28); }
.smj-totop.pulse { animation: smjTopPulse 1s ease-out 3; }
@keyframes smjTopPulse { 0% { box-shadow: 0 0 0 0 rgba(31,100,174,.45), 0 6px 18px rgba(16,24,40,.22); } 100% { box-shadow: 0 0 0 16px rgba(31,100,174,0), 0 6px 18px rgba(16,24,40,.22); } }
.smj-backnote { display: inline-flex; align-items: center; gap: 5px; margin-left: 8px; padding: 2px 10px; border-radius: 100px; border: 1px solid #b2ccff;
  background: #eff4ff; color: #1d4ed8; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; vertical-align: middle;
  animation: smjNoteIn .3s ease both; transition: opacity .5s; }
.smj-backnote:hover { background: #dbe7ff; }
.smj-backnote.fade { opacity: 0; }
@keyframes smjNoteIn { from { opacity: 0; transform: translateX(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .smj-totop, .smj-totop.pulse, .smj-backnote { transition: none; animation: none; } }
@media print { .smj-totop, .smj-backnote { display: none !important; } }

/* New Job at the top of the sidebar (the new Jobs layout, includes/smui_nav.php): one button in the theme's colour */
.smui-nav a.smui-nav-newjob { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 12px 12px 8px; padding: 10px 12px; border-radius: 10px; background: var(--smui-newjob-bg, var(--smui-btn, #c2410c)); color: var(--smui-newjob-fg, #ffffff); font-size: 15px; font-weight: 600; text-decoration: none; box-shadow: 0 1px 2px rgba(22, 25, 29, 0.18); }
.smui-nav a.smui-nav-newjob:hover { filter: brightness(0.92); }
.smui-nav a.smui-nav-newjob.active { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.55), 0 0 0 5px var(--smui-btn, #c2410c); }
@media (max-width: 1100px) {
  .smui-nav a.smui-nav-newjob { margin: 10px 8px; padding: 10px 0; font-size: 0; gap: 0; }
  .smui-nav a.smui-nav-newjob .fa { font-size: 16px; }
}
@media (max-width: 720px) {
  .smui-nav a.smui-nav-newjob { flex: 0 0 auto; margin: 6px 8px; padding: 8px 14px; font-size: 14px; gap: 6px; }
}

/* New Job: the Charges section (flownewjob.php) */
.fnj-chg { max-width: 860px; }
.fnj-chg-hd, .fnj-chg-row { display: grid; grid-template-columns: minmax(0, 2.2fr) 64px 96px minmax(0, 1.6fr) 84px 22px; gap: 8px; align-items: center; }
.fnj-chg-hd { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--smui-muted); margin-bottom: 6px; }
.fnj-chg-hd .r, .fnj-chg-tot { text-align: right; }
.fnj-chg-row { margin-bottom: 8px; }
.fnj-chg-row select, .fnj-chg-row input { width: 100%; box-sizing: border-box; font: inherit; font-size: 14px; padding: 8px 9px; border: 1px solid #d0d5dd; border-radius: 6px; background: #fff; }
.fnj-chg-tot { font-weight: 600; font-variant-numeric: tabular-nums; }
.fnj-chg-x { color: var(--smui-muted); text-decoration: none; font-size: 18px; text-align: center; }
.fnj-chg-x:hover { color: #b42318; }
.fnj-chg-ft { display: flex; justify-content: space-between; gap: 12px; margin-top: 6px; font-size: 13.5px; color: #384150; }
.fnj-chg-ft a { color: var(--smui-link); text-decoration: none; }
@media (max-width: 760px) { .fnj-chg-hd { display: none; } .fnj-chg-row { grid-template-columns: 1fr 64px 90px; } .fnj-chg-desc { grid-column: 1 / -2; } }

/* ---- the new layout's sidebar (includes/smui_nav_v2.php) ---- */
.smui-nav2-new { position: relative; display: flex; margin: 12px 12px 8px; border-radius: 10px; box-shadow: 0 1px 2px rgba(22, 25, 29, .18); }
.smui-nav a.smui-nav2-newbtn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 12px; border-radius: 10px 0 0 10px; background: var(--smui-newjob-bg, var(--smui-btn, #c2410c)); color: var(--smui-newjob-fg, #fff); font-size: 15px; font-weight: 600; text-decoration: none; }
.smui-nav2-newmore { width: 38px; border: 0; border-left: 1px solid rgba(255, 255, 255, .35); border-radius: 0 10px 10px 0; background: var(--smui-newjob-bg, var(--smui-btn, #c2410c)); color: var(--smui-newjob-fg, #fff); cursor: pointer; font-size: 12px; }
.smui-nav a.smui-nav2-newbtn:hover, .smui-nav2-newmore:hover, .smui-nav2-newmore[aria-expanded="true"] { filter: brightness(.92); }
.smui-nav2-menu { position: fixed; z-index: 1500; left: 210px; top: 60px; width: 300px; padding: 8px; border-radius: 14px; background: #fff; border: 1px solid #e3dfd6; box-shadow: 0 16px 40px rgba(22, 25, 29, .18); display: flex; flex-direction: column; gap: 2px; }
.smui-nav2-menu[hidden] { display: none; }
.smui-nav2-menu.up { top: auto; bottom: 12px; }
body .smui-nav2-menu a { display: flex; gap: 11px; align-items: flex-start; padding: 9px 10px; border-radius: 10px; color: #16191d; text-decoration: none; }
body .smui-nav2-menu a:hover { background: #faf8f4; }
.smui-nav2-menu a > .fa { width: 30px; height: 30px; flex: 0 0 auto; border-radius: 8px; background: var(--smui-btn-tint, #fff4ed); color: var(--smui-btn, #c2410c); display: flex; align-items: center; justify-content: center; font-size: 14px; }
.smui-nav2-menu a b { display: block; font-size: 14px; } .smui-nav2-menu a small, .smui-nav2-menu .hd small { display: block; font-size: 12.5px; color: #5b6168; }
.smui-nav2-menu .hd { padding: 6px 10px 10px; border-bottom: 1px solid #f0ece3; margin-bottom: 4px; color: #16191d; }
.smui-nav2-sec { padding: 14px 20px 4px; font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--smui-nav-fg, #2b3036); opacity: .6; }
.smui-nav2-aka { margin-left: auto; margin-right: 10px; font-size: 11px; opacity: .6; }
.smui-nav2-spacer { flex: 1 1 auto; min-height: 16px; }
/* QwikPrint in your menu (includes/smui_top.php): the bolt shows the mode; qwikprint.js colours the whole link, so the label keeps its own */
body .smui-nav2-menu a#qwikprintNav[data-on="1"] > .fa { background: #e3f4ef; color: #0e7c6b; }
body .smui-nav2-menu a#qwikprintNav b { color: #16191d; }
body .smui-nav2-menu a#qwikprintNavUnset { opacity: .7; }
@media (max-width: 1100px) {
  .smui-nav2-new { margin: 10px 8px; } .smui-nav a.smui-nav2-newbtn span, .smui-nav2-newmore, .smui-nav2-sec, .smui-nav2-aka { display: none; }
  .smui-nav a.smui-nav2-newbtn { border-radius: 10px; }
  .smui-nav a.smui-nav-item .smui-nav-lbl { font-size: 0; }
}
@media (max-width: 720px) {
  .smui-nav2-spacer { display: none; } .smui-nav2-new { flex: 0 0 auto; margin: 6px; }
  .smui-nav2-menu { position: fixed; left: 12px; right: 12px; top: 60px; width: auto; } .smui-nav2-menu.up { bottom: auto; }
}
/* a sidebar with its New job button (the requestor portal's) stays on screen */
@media (min-width: 721px) {
  .smui-nav:has(.smui-nav2-new) { position: sticky; top: 0; height: 100vh; overflow-y: auto; overflow-x: visible; align-self: start; }
}
.smui-nav:has(.smui-nav2-new) a.smui-nav-item { white-space: nowrap; }
/* ---- Flow's header (includes/smui_top.php): the first row of .smui-frame, across both columns, always on screen ----
   Its own line height and box sizing, like the sidebar's, so the Classic pages in the Flow frame (Bootstrap) and the
   quirks-mode ones cannot change its size. */
.smui-top { grid-column: 1 / -1; position: sticky; top: 0; z-index: 1200; height: 56px; box-sizing: border-box; display: flex; align-items: center; gap: 10px; padding: 0 16px; background: var(--smui-top-bg, #fff); border-bottom: 1px solid #e3dfd6; color: #16191d; line-height: normal; font-size: 14px; }
.smui-top *, .smui-top *::before, .smui-top *::after { box-sizing: revert; }
/* Bootstrap modals of the Classic pages shown in the Flow frame (Settings > Special Mailing Types and the other
   settingsresults.php tables): above the sticky top bar -- Bootstrap's own 1060 / 1040 put the dialog's title and
   first boxes under it -- and the dialog starts below the bar, so a tall editor (the mailing type's Wording) is
   never cut off at the top (Rob 2026-10-30). Flow's own overlays stay above these (.smui-modal 2000, menus 1500). */
body.smui .modal { z-index: 1300; }
body.smui .modal-backdrop { z-index: 1290; }
body.smui:not(.smui-bare) .modal-dialog { margin-top: 72px; }
.smui-top-mark { flex: 0 0 auto; display: block; width: 28px; height: 28px; }
.smui-top a.smui-top-logo { flex: 0 0 auto; width: 167px; display: flex; align-items: center; gap: 9px; color: #16191d; font-size: 17px; font-weight: 600; text-decoration: none; }
.smui-top-find { flex: 0 1 380px; min-width: 150px; height: 36px; margin: 0; padding: 0 10px; display: flex; align-items: center; gap: 8px; border: 1px solid #d9d4c7; border-radius: 10px; background: #faf8f4; color: #5b6168; }
.smui-top-find:focus-within { border-color: var(--smui-btn, #c2410c); background: #fff; }
.smui-top-find .fa { font-size: 13px; opacity: .7; }
.smui-top-find input[type=search] { flex: 1; min-width: 0; height: auto; margin: 0; padding: 0; border: 0; outline: 0; box-shadow: none; background: none; font: inherit; font-size: 14px; color: #16191d; }
.smui-top-find kbd { font: inherit; font-size: 11.5px; padding: 1px 6px; border-radius: 5px; background: #e9e5da; color: #16191d; box-shadow: none; white-space: nowrap; }
.smui-top-new { flex: 0 0 auto; display: flex; border-radius: 10px; box-shadow: 0 1px 2px rgba(22, 25, 29, .18); }
.smui-top a.smui-top-newbtn { display: flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border-radius: 10px 0 0 10px; background: var(--smui-newjob-bg, var(--smui-btn, #c2410c)); color: var(--smui-newjob-fg, #fff); font-size: 14px; font-weight: 600; text-decoration: none; }
.smui-top a.smui-top-newbtn.solo { border-radius: 10px; }
.smui-top-newmore { width: 36px; height: 36px; padding: 0; border: 0; border-left: 1px solid rgba(255, 255, 255, .35); border-radius: 0 10px 10px 0; background: var(--smui-newjob-bg, var(--smui-btn, #c2410c)); color: var(--smui-newjob-fg, #fff); cursor: pointer; font-size: 12px; }
.smui-top a.smui-top-newbtn:hover, .smui-top-newmore:hover, .smui-top-newmore[aria-expanded="true"] { filter: brightness(.92); }
.smui-top-sp { flex: 1 1 auto; min-width: 8px; }
.smui-top a.smui-top-it { flex: 0 0 auto; display: flex; align-items: center; gap: 7px; height: 38px; padding: 0 10px; border-radius: 10px; color: #16191d; font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.smui-top a.smui-top-it:hover { background: #f5f3ee; }
.smui-top a.smui-top-it.on { background: var(--smui-nav-active, #16191d); color: #fff; }
.smui-top-it .fa { font-size: 15px; }
.smui-top-n { min-width: 10px; padding: 1px 7px; border-radius: 999px; background: #16191d; color: #fff; font-size: 12px; font-weight: 700; line-height: 16px; text-align: center; }
.smui-top-n[hidden] { display: none; }
.smui-top-it.on .smui-top-n { background: #fff; color: #16191d; }
.smui-top-n.smui-top-n-red, .smui-top-it.on .smui-top-n.smui-top-n-red { background: #d92d20; color: #fff; }
.smui-top-pro { padding: 1px 6px; border-radius: 9px; background: #efe9fb; color: #5b3fa6; font-size: 10px; font-weight: 600; line-height: 14px; white-space: nowrap; cursor: help; }   /* Chase: a Pro feature in preview */
.smui-top-it.on .smui-top-pro { background: rgba(255, 255, 255, .2); color: #fff; }
.smui-top-sep { flex: 0 0 auto; width: 1px; height: 24px; margin: 0 2px; background: #e3dfd6; }
.smui-top-ib { flex: 0 0 auto; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 10px; background: none; color: #16191d; font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.smui-top-ib:hover { background: #f5f3ee; }
.smui-top-ib[hidden] { display: none; }
.smui-top-av { flex: 0 0 auto; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: var(--smui-nav-active, #16191d); color: #fff; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.smui-top-av:hover, .smui-top-av[aria-expanded="true"], .smui-top-av.active { box-shadow: 0 0 0 3px #e3dfd6; }
/* the page and the sidebar start under the header */
.smui-frame:has(> .smui-top) > .smui-main { min-height: calc(100vh - 56px); }
@media (min-width: 721px) {
  .smui-frame > .smui-top ~ .smui-nav { position: sticky; top: 56px; height: calc(100vh - 56px); overflow-y: auto; overflow-x: visible; align-self: start; }
}
.smui-frame > .smui-top ~ .smui-nav a.smui-nav-item { white-space: nowrap; }
.smui-frame > .smui-top ~ .smui-nav > .smui-nav2-sec:first-child { padding-top: 16px; }
@media (max-width: 1100px) {
  .smui-top a.smui-top-logo { width: auto; } .smui-top a.smui-top-logo span, .smui-top-lbl, .smui-top-pro { display: none; }
  .smui-top-find { flex-basis: 280px; } .smui-top a.smui-top-it { padding: 0 8px; }
}
@media (max-width: 720px) {
  .smui-frame:has(> .smui-top) { grid-template-rows: auto auto 1fr; }
  .smui-frame:has(> .smui-top) > .smui-main { min-height: 0; }
  .smui-top { gap: 4px; padding: 0 8px; overflow-x: auto; }
  .smui-top a.smui-top-logo, .smui-top-find, .smui-top-sep, .smui-top-ib { display: none; }
  .smui-top a.smui-top-newbtn span { display: none; } .smui-top a.smui-top-newbtn { padding: 0 12px; }
  .smui-top a.smui-top-it { padding: 0 7px; gap: 5px; }
}
/* Review's views: Review, Tracking map, GPS analysis (includes/flow_reviewtabs.php) -- the Jobs view pills' look */
.smui-rtabs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 18px; padding: 5px; border-radius: 14px; background: #ebe6db; width: fit-content; max-width: 100%; box-sizing: border-box; }
.smui-rtabs a.smui-rtab { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; border-radius: 10px; color: #3d434a; font-size: 13.5px; font-weight: 600; text-decoration: none; }
.smui-rtabs a.smui-rtab .fa { font-size: 12px; color: #6b7178; }
.smui-rtabs a.smui-rtab:hover { background: #f5f3ee; color: #16191d; }
.smui-rtabs a.smui-rtab.on { background: #fff; color: #16191d; box-shadow: 0 1px 3px rgba(22, 25, 29, .14); }
.smui-rtabs a.smui-rtab.on .fa { color: var(--smui-btn, #c2410c); }
/* nav item count (Messages: unread customer messages, includes/smui_nav_v2.php) -- on the icon when the sidebar is narrow */
.smui-nav a.smui-nav-item { position: relative; }
.smui-nav-badge { margin-left: auto; min-width: 18px; padding: 0 6px; border-radius: 9px; background: #f79009; color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
.smui-nav-badge[hidden] { display: none; }
.smui-nav-badge-red { background: #d92d20; }   /* Alerts: critical + high */
@media (max-width: 1100px) { .smui-nav-badge { position: absolute; top: 2px; right: 4px; margin: 0; } }
/* Flow Jobs list: the job's documents under the recipient's case number (includes/flowjobs_rows.php) */
.smj-docs .smj-docs-f { white-space: pre-line; }
.smj-docs-tg { font: inherit; font-size: 12px; font-weight: 700; line-height: 1; min-width: 18px; padding: 1px 4px; margin-left: 2px; border: 1px solid var(--smui-border, #d0d5dd); border-radius: 4px; background: #fff; color: var(--smui-text, #344054); cursor: pointer; vertical-align: baseline; }
.smj-docs-tg:hover { background: #f2f4f7; }