/* Work Order Insight (web). Colours are charts.THEMES, set on :root by app.js; these are the light
   defaults so the page looks right before Python has loaded. Mirrors app.py's Qt stylesheet. */
:root {
  --surface:#ffffff; --page:#eef1f5; --zebra:#f6f8fb; --select:#dfe7f5; --ink:#0f1729; --ink2:#4a5265;
  --muted:#5f6779; --grid:#e8ecf1; --axis:#c3cad6; --line:#dde2ea; --bar:#16213a; --bar2:#2c3a5c;
  --bar_ink:#ffffff; --bar_muted:#b4bdd0; --primary:#16213a; --accent:#16213a; --accent_tile:#16213a;
  --unfav:#e34948; --fav:#2a78d6; --unfav_text:#b42828; --fav_text:#1c5cab; --warn:#c88a00;
  --font: system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface:#182031; --page:#0f1420; --zebra:#1c2538; --select:#2a3756; --ink:#eef1f6; --ink2:#c4cad6;
    --muted:#97a0b2; --grid:#263046; --axis:#3a4560; --line:#2a3449; --bar:#0b1020; --bar2:#22304f;
    --primary:#3d5a99; --accent:#a9c1ff; --accent_tile:#2c3d66; --unfav:#e66767; --fav:#3987e5;
    --unfav_text:#f29a9a; --fav_text:#8dbaf2; --warn:#e0a72a; color-scheme: dark;
  }
}
:root[data-theme="dark"] { color-scheme: dark; }

* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--page); color: var(--ink); font: 14px/1.4 var(--font); min-height: 100vh;
       display: flex; flex-direction: column; }
button, input, select { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.grow { flex: 1 1 auto; min-width: 0; }

/* app bar */
.appbar { background: var(--bar); color: var(--bar_muted); display: flex; align-items: center; gap: 12px;
          padding: 0 16px; min-height: 44px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 10px; padding-right: 8px; }
.mark { width: 24px; height: 24px; flex: none; }
.mark.big { width: 48px; height: 48px; }
.mark-bg { fill: var(--bar2); }
.brand .sub { font-size: 12px; }
.brand .title { color: var(--bar_ink); font-weight: 600; }
.menus { display: flex; gap: 2px; }
.menu { position: relative; }
.menu-btn { background: none; border: 0; color: var(--bar_muted); padding: 11px 10px; border-radius: 4px; cursor: pointer; }
.menu-btn:hover, .menu.open .menu-btn { background: var(--bar2); color: var(--bar_ink); }
.menu-list { display: none; position: absolute; top: 100%; left: 0; z-index: 30; min-width: 260px; padding: 6px;
             background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 8px;
             box-shadow: 0 8px 24px rgba(0,0,0,.18); }
.menu.open .menu-list { display: block; }
.menu-list button { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 7px 10px;
                    border-radius: 5px; cursor: pointer; }
.menu-list button:hover { background: var(--select); }
.menu-list label { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 10px; }
.menu-list hr { border: 0; border-top: 1px solid var(--line); margin: 4px 0; }
.pill { margin-left: auto; max-width: min(680px, 100%); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        padding: 4px 12px; border-radius: 11px; background: #26324f; color: #d5dbe7; font-size: 13px; }
.pill.warn { background: #3b3322; color: #f6c96a; }
.pill.error { background: #3a1d1f; color: #f29a9a; }
.pill:empty { display: none; }

/* control bar and range panel */
.controlbar { background: var(--surface); border-bottom: 1px solid var(--line); display: flex; align-items: center;
              gap: 10px; padding: 8px 20px; flex-wrap: wrap; }
.step { background: transparent; border: 1px solid var(--line); border-radius: 6px; width: 30px; padding: 4px 0;
        color: var(--ink2); font-size: 15px; cursor: pointer; }
.step:hover:not(:disabled) { border-color: var(--accent); color: var(--ink); }
.step:disabled { color: var(--line); cursor: default; }
.range-btn { background: var(--surface); border: 1px solid var(--axis); border-radius: 6px; padding: 6px 12px;
             font-weight: 600; cursor: pointer; text-align: left; }
.range-btn[aria-expanded="true"] { border-color: var(--accent); }
.sep { width: 1px; align-self: stretch; background: var(--line); }
.part { display: flex; align-items: center; gap: 8px; }
.part input { width: 260px; max-width: 60vw; }
input[type=text], input:not([type]), input[type=number], input[type=date], input[type=password], select {
  background: var(--surface); border: 1px solid var(--axis); border-radius: 6px; padding: 5px 8px; }
input[type=number] { width: 70px; }
.chip { background: var(--surface); border: 1px solid var(--accent); border-radius: 12px; padding: 3px 12px;
        color: var(--accent); font-weight: 600; cursor: pointer; margin-right: 6px; }
.primary { background: var(--primary); color: #fff; border: 0; border-radius: 6px; padding: 8px 18px; font-weight: 600;
           cursor: pointer; }
.primary:hover { background: var(--bar2); }
.primary:disabled { background: var(--axis); cursor: default; }
.ghost { background: var(--surface); border: 1px solid var(--axis); border-radius: 6px; padding: 6px 12px; cursor: pointer; }
.ghost:disabled { color: var(--muted); cursor: default; }
.ghost[aria-pressed="true"] { border-color: var(--accent); }
.range-panel { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; margin: 12px 20px 0;
               padding: 12px 16px; display: grid; gap: 8px; }
.range-panel .row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lbl { width: 70px; color: var(--ink2); }
.lbl2 { margin-left: 16px; color: var(--ink2); }
.presets { display: flex; gap: 6px; flex-wrap: wrap; }
.preset { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 5px 14px;
          color: var(--ink2); cursor: pointer; }
.preset:hover { border-color: var(--accent); color: var(--ink); }
.preset.on { background: var(--accent); border-color: var(--accent); color: var(--surface); font-weight: 600; }
.check { display: inline-flex; align-items: center; gap: 5px; margin-right: 10px; }

/* body */
main { padding: 12px 20px 8px; display: flex; flex-direction: column; gap: 12px; flex: 1; min-width: 0; }
.tiles { display: grid; grid-template-columns: repeat(2, 1fr) repeat(2, 1fr) 1.5fr 1fr; gap: 10px; }
.tiles.four { grid-template-columns: repeat(4, 1fr); }
.tile { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 9px 14px; text-align: left;
        min-width: 0; }
.tile .tl { color: var(--ink2); font-size: 12px; }
.tile .tv { font-size: 20px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile .tn { color: var(--muted); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile.accent { background: var(--accent_tile); border-color: var(--accent_tile); cursor: pointer; font: inherit; }
.tile.accent .tl, .tile.accent .tn { color: var(--bar_muted); }
.tile.accent .tv { color: var(--bar_ink); }
.split { display: flex; height: 5px; gap: 2px; margin: 3px 0; }
.split span { display: block; height: 100%; }
.tabs { display: flex; gap: 0; border-bottom: 1px solid var(--line); overflow-x: auto; }
.tabs button { background: none; border: 0; border-bottom: 2px solid transparent; color: var(--ink2); padding: 9px 16px;
               cursor: pointer; white-space: nowrap; }
.tabs button:hover { color: var(--ink); }
.tabs button.on { color: var(--ink); font-weight: 600; border-bottom-color: var(--accent); }
.tabs .count { color: var(--muted); font-weight: 400; }
.tab { display: flex; flex-direction: column; gap: 10px; }
.bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bar label { display: inline-flex; align-items: center; gap: 6px; }
.item-pick select { width: min(620px, 80vw); }

/* answer card */
.answer { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 14px 20px;
          display: flex; gap: 16px; align-items: center; }
.answer .col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.answer .top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.eyebrow { color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase;
           white-space: nowrap; }
.tagx { border-radius: 9px; padding: 2px 9px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.headline { font-size: 19px; font-weight: 600; }
.detail { color: var(--ink2); font-size: 13px; }
.facts { color: var(--muted); font-size: 12px; }
.answer .line { display: none; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.answer .toggle { color: var(--muted); border: 1px solid var(--line); background: none; border-radius: 6px; padding: 4px 10px;
                  font-size: 12px; cursor: pointer; white-space: nowrap; }
body.compact .answer { padding: 6px 12px 6px 16px; }
body.compact .answer .eyebrow, body.compact .answer .headline, body.compact .answer .detail,
body.compact .answer .facts { display: none; }
body.compact .answer .line { display: block; }

/* charts, tables, cards */
.chart-card { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 10px; min-width: 0; }
.chart { width: 100%; height: var(--h, 360px); }
.chart-card.share { padding: 12px 16px; display: grid; gap: 6px; }
.sharebar { display: flex; height: 18px; gap: 1px; cursor: pointer; }
.sharebar span { display: block; height: 100%; transition: opacity .1s; }
.sharebar.hot span:not(.hot) { opacity: .35; }
.legend { display: flex; justify-content: space-between; gap: 12px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin: 0; }
.card:empty { display: none; }
details.tbl summary { cursor: pointer; display: inline-block; background: var(--surface); border: 1px solid var(--axis);
                      border-radius: 6px; padding: 6px 12px; list-style: none; }
details.tbl summary::-webkit-details-marker { display: none; }
details.tbl[open] summary { margin-bottom: 10px; }
.table { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; overflow: auto; max-height: 460px; }
.table.tall { max-height: min(62vh, 640px); }
table { border-collapse: collapse; width: 100%; font-size: 13px; }
th { position: sticky; top: 0; background: var(--surface); color: var(--ink2); text-align: left; font-weight: 600;
     padding: 6px 8px; border-bottom: 1px solid var(--line); cursor: pointer; white-space: nowrap; user-select: none; }
th.sorted::after { content: " ▾"; }
th.sorted.asc::after { content: " ▴"; }
td { padding: 5px 8px; white-space: nowrap; max-width: 420px; overflow: hidden; text-overflow: ellipsis; }
tr:nth-child(even) td { background: var(--zebra); }
tr.sel td { background: var(--select); }
tr.quiet td { color: var(--muted); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tbody tr { cursor: default; }
.sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.more { padding: 8px; color: var(--muted); }
.status { color: var(--muted); padding: 4px 20px 8px; font-size: 12px; min-height: 24px; }

/* loading, dialogs */
.overlay { position: fixed; inset: 0; background: var(--page); display: grid; place-items: center; z-index: 50; }
.loading-card { text-align: center; max-width: 440px; padding: 24px; }
.loading-card h1 { font-size: 20px; margin: 12px 0 16px; }
.steps { text-align: left; list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 6px; }
.steps li { display: flex; justify-content: space-between; gap: 16px; color: var(--muted); }
.steps li.doing { color: var(--ink); font-weight: 600; }
.steps li.done { color: var(--ink2); }
.steps li.done::before { content: "✓ "; color: var(--fav); }
.steps li.fail { color: var(--unfav_text); }
dialog { background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 12px; padding: 20px 24px;
         max-width: min(560px, 92vw); }
dialog::backdrop { background: rgba(10, 15, 30, .5); }
dialog h2 { margin: 0 0 8px; font-size: 17px; }
dialog menu { display: flex; justify-content: flex-end; padding: 0; margin: 14px 0 0; }
dialog input { width: 100%; }
#text_body { white-space: pre-wrap; color: var(--ink2); max-height: 60vh; overflow: auto; }
.err { color: var(--unfav_text); min-height: 1em; }

@media (max-width: 1100px) {
  .tiles { grid-template-columns: repeat(3, 1fr); }
  .tiles.four { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .controlbar, main { padding-left: 16px; padding-right: 16px; }
  .range-panel { margin: 12px 16px 0; }
  .tiles, .tiles.four { grid-template-columns: repeat(2, 1fr); }
  .answer { flex-direction: column; align-items: stretch; padding: 12px 14px; }
  .headline { font-size: 16px; }
  .pill { margin-left: 0; }
  .part input { width: 100%; }
}