/* === agent a6: Dispatch in the Solar Gain estimate-builder language ===
   Warm cream + muted gold accents, deep navy headings, restrained blue, pale neutral surfaces, fine borders.
   Almost square: 4px controls, 6px panels. The planning canvas stays neutral; cream-to-blue only in the header strip. */
:root {
  --sg-blue: #243D90; --sg-blue-lift: #3552B5; --sg-blue-rgb: 36, 61, 144;
  --sg-gold: #FCB537; --sg-gold-deep: #E39A17; --sg-ink: #10162B;
  --sg-cream: #FBF7EE; --sg-cream-2: #F6EFDF; --sg-surface: #FFFFFF; --sg-canvas: #F7F8FA;
  --sg-line: rgba(var(--sg-blue-rgb), .16); --sg-line-2: rgba(var(--sg-blue-rgb), .26);
  --dx-ctl-r: 4px; --dx-pan-r: 6px;
}
:root[data-theme="dark"] { --sg-ink: #EEF1FA; --sg-cream: #1D2233; --sg-cream-2: #232A40; --sg-surface: #161B2B; --sg-canvas: #11151F; --sg-line: rgba(150,175,255,.16); --sg-line-2: rgba(150,175,255,.26); }

/* ---- shared Solar Gain sun avatar (web/sun.js) ---- */
.sun-av { display: inline-flex; align-items: center; gap: 6px; min-width: 0; vertical-align: middle; line-height: 1.15; }
.sun-av-img { flex: 0 0 auto; width: calc(var(--sun) + 4px); height: calc(var(--sun) + 4px); border-radius: 50%; display: grid; place-items: center;
  background: #fff; box-shadow: 0 0 0 2px var(--crew), 0 0 0 3px #fff; }
.sun-av-img img { width: var(--sun); height: var(--sun); display: block; object-fit: contain; }
.sun-av-tx { display: inline-flex; flex-direction: column; min-width: 0; }
.sun-av-name { font-weight: 650; color: var(--sg-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 16ch; }
.sun-av-sub { font-size: 11px; color: var(--muted, #5b6478); white-space: nowrap; }
.sun-av-st.t-ok { color: #1f7a3d; } .sun-av-st.t-off, .sun-av-st.t-bad { color: #a12a1f; } .sun-av-st.t-warn { color: #8a5a00; } .sun-av-st.t-unknown { color: #5b6478; font-style: italic; }
.sun-list { display: inline-flex; flex-wrap: wrap; gap: 4px 10px; }

/* ---- Dispatch workspace ---- */
.dxp, .dispatch, .dx-board { --radius: var(--dx-ctl-r); }
.dxp .btn, .dispatch .btn, .dxp .ibtn, .dispatch .ibtn, .dxp input, .dxp select, .dispatch input, .dispatch select { border-radius: var(--dx-ctl-r); }
.dxp .tcard, .dispatch .tcard, .dxp .notice, .dispatch .notice, .meet-agenda, .meet-main, .plan-grid-wrap { border-radius: var(--dx-pan-r) !important; }
.dxp-head { background: linear-gradient(90deg, var(--sg-cream) 0%, #fff 60%, rgba(var(--sg-blue-rgb), .05) 100%); border-bottom: 1px solid var(--sg-line); }
.dx-tabs a, .dx-tooltab button { border-radius: var(--dx-ctl-r) !important; }
.dxp h1, .dxp h2, .dxp h3, .dispatch h2, .dispatch h3 { color: var(--sg-blue); }
:root[data-theme="dark"] .dxp h1, :root[data-theme="dark"] .dxp h2, :root[data-theme="dark"] .dxp h3 { color: #93B0F5; }
.dxp .btn-primary, .dispatch .btn-primary { background: var(--sg-gold); border-color: var(--sg-gold-deep); color: #241e13; }
.dxp .btn-primary:hover, .dispatch .btn-primary:hover { background: var(--sg-gold-deep); }
.dxp-embedded { padding: 0; }
.dxp-embedded .dxp-head { background: none; border: 0; padding: 0 0 8px; }
/* ---- Meeting Mode on the real Crew Plan ---- */
.meet { display: grid; grid-template-columns: minmax(220px, 280px) 1fr; gap: 12px; align-items: start; }
.meet-agenda { background: var(--sg-surface); border: 1px solid var(--sg-line); padding: 10px 12px; box-shadow: none !important; }
.meet-main { min-width: 0; }
.mm-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 0 8px; }
.mm-week { color: var(--sg-blue); font-size: 15px; min-width: 150px; text-align: center; }
.mm-run { font-size: 12px; color: var(--sg-blue); padding: 0 6px; }
.mm-state { font-size: 12px; font-weight: 650; padding: 3px 8px; border-radius: var(--dx-ctl-r); border: 1px solid var(--sg-line); background: var(--sg-surface); white-space: nowrap; }
.mm-state.t-saved { color: #1f7a3d; border-color: rgba(31,122,61,.35); background: #eef8f1; }
.mm-state.t-saving { color: var(--sg-blue); border-color: var(--sg-line-2); background: rgba(var(--sg-blue-rgb), .05); }
.mm-state.t-elsewhere { color: #8a5a00; border-color: rgba(227,154,23,.5); background: var(--sg-cream); }
.mm-state.t-attention { color: #a12a1f; border-color: rgba(161,42,31,.4); background: #fdf1ef; }
.mm-state.t-off { color: #5b6478; }
.plan-grid-wrap { background: var(--sg-surface); border: 1px solid var(--sg-line); overflow: auto; max-height: calc(100vh - 240px); }
.plan-grid.sheet { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 12.5px; }
.plan-grid.sheet th { position: sticky; top: 0; background: var(--sg-cream); color: var(--sg-blue); font-weight: 650; text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--sg-line-2); z-index: 1; white-space: nowrap; }
.plan-grid.sheet tbody th { position: sticky; left: 0; background: var(--sg-cream); z-index: 0; width: 92px; border-right: 1px solid var(--sg-line); vertical-align: top; }
.plan-grid.sheet td { vertical-align: top; padding: 4px; border-bottom: 1px solid var(--sg-line); border-right: 1px solid var(--sg-line); min-width: 112px; }
.plan-grid.sheet td.off { background: #fbf3f2; }
.plan-line { display: block; width: 100%; text-align: left; font: inherit; color: var(--sg-ink); background: transparent; border: 1px solid transparent; border-radius: var(--dx-ctl-r); padding: 2px 5px; cursor: pointer; line-height: 1.3; }
.plan-line:hover:not(:disabled), .plan-line:focus-visible { border-color: var(--sg-line-2); background: rgba(var(--sg-blue-rgb), .04); outline: none; }
.plan-line.job { font-weight: 650; }
.plan-line.helper { color: #5b6478; font-weight: 500; padding-left: 14px; }
.plan-line:disabled { cursor: default; color: #5b6478; font-style: italic; }
.plan-add { display: block; width: 100%; margin-top: 2px; border: 1px dashed var(--sg-line); background: none; color: #8792a8; border-radius: var(--dx-ctl-r); font: inherit; line-height: 1.4; cursor: pointer; opacity: 0; }
.plan-grid.sheet td:hover .plan-add, .plan-add:focus-visible { opacity: 1; }
@media (max-width: 900px) { .meet { grid-template-columns: 1fr; } .plan-grid-wrap { max-height: none; } }
/* No decorative AI motifs in Dispatch: the assistant stays one contextual entry. */
.dxp .ai-badge, .dxp .sparkle, .dispatch .ai-badge, .dispatch .sparkle, .dispatch .ai-banner, .dxp .ai-banner { display: none !important; }

/* ---- the board: almost square, neutral canvas, gold for the one primary action, navy text ---- */
.dx-head, .dx-tabsrow { background: transparent; }
.dx-stepper, .dx-range, .dx-nav, .seg.dx-seg, .dx-qtabs, .dx-chip, .dx-head .btn, .dx-tabsrow .btn, .dx-head input, .dx-qtools input, .dx-qtools select { border-radius: var(--dx-ctl-r) !important; box-shadow: none !important; }
.seg.dx-seg, .dxp .seg, .dispatch .seg, .dx-qtabs { background: var(--sg-surface); border: 1px solid var(--sg-line); padding: 2px; }
.seg.dx-seg button, .dxp .seg button, .dx-qtabs button { border-radius: 3px !important; color: var(--sg-ink); }
.seg.dx-seg button.on, .dxp .seg button.on, .dx-qtabs button.on { background: var(--sg-blue) !important; color: #fff !important; box-shadow: none !important; }
.dx-queue, .dx-grid-wrap, .dx-attn, .dx-next, .dx-q, .dx-pop, .dx-card, .dx-pickbar, .dx-orphan, .dx-month { border-radius: var(--dx-pan-r) !important; }
.dx-queue, .dx-grid-wrap { background: var(--sg-surface) !important; border: 1px solid var(--sg-line) !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.dx-grid-wrap { background: var(--sg-canvas) !important; }
.dx-day, .dx-corner { background: var(--sg-cream) !important; color: var(--sg-blue); border-bottom: 1px solid var(--sg-line-2) !important; }
.dx-crew { background: var(--sg-surface) !important; }
.dx-next { background: var(--sg-cream) !important; border: 1px solid rgba(227,154,23,.45) !important; box-shadow: none !important; }
.dx-next-hd { color: var(--sg-gold-deep) !important; }
.dx-next .btn-primary, .dx-next button.btn-primary { background: var(--sg-blue) !important; border-color: var(--sg-blue) !important; color: #fff !important; border-radius: var(--dx-ctl-r) !important; }
.dx-card { box-shadow: 0 1px 0 rgba(var(--sg-blue-rgb), .08) !important; border: 1px solid var(--sg-line) !important; background: var(--sg-surface) !important; }
.dx-dsp, .dx-card .btn, .dx-q .btn, .dx-q button.link { border-radius: var(--dx-ctl-r) !important; }
.dx-dsp { background: var(--sg-blue) !important; color: #fff !important; }
.dx-attn { background: #fff8ec !important; border: 1px solid rgba(227,154,23,.45) !important; box-shadow: none !important; }
.dx-q { border-radius: var(--dx-pan-r) !important; box-shadow: none !important; border: 1px solid var(--sg-line) !important; background: var(--sg-surface) !important; }
.dx-q .btn, .dx-q button.sched, .dx-q a.btn { border-radius: var(--dx-ctl-r) !important; }
.dx-crewbtn { gap: 8px; }
.dx-crewtx b { color: var(--sg-ink); }
.dx-tabs a.on, .dx-tabs a[aria-current] { background: var(--sg-surface) !important; color: var(--sg-blue) !important; box-shadow: inset 0 -2px 0 var(--sg-gold) !important; border-radius: var(--dx-ctl-r) !important; }
.mod-tile { border-radius: var(--dx-ctl-r) !important; background: var(--sg-blue) !important; }
/* queue widths (compact / normal / expanded), remembered per person */
.dx-body.qw-compact { --dx-q-w: 220px; } .dx-body.qw-normal { --dx-q-w: 300px; } .dx-body.qw-expanded { --dx-q-w: 420px; }
@media (min-width: 1101px) { .dx-body.qw-compact, .dx-body.qw-normal, .dx-body.qw-expanded { grid-template-columns: var(--dx-q-w) minmax(0, 1fr) auto; position: relative; } }
.dx-body { position: relative; }
.dx-qwidth { display: inline-flex; align-self: center; border: 1px solid var(--sg-line); border-radius: var(--dx-ctl-r); background: var(--sg-surface); overflow: hidden; }
.dx-qwidth button { border: 0; background: none; font: inherit; font-size: 11px; font-weight: 650; color: #5b6478; padding: 2px 8px; cursor: pointer; }
.dx-qwidth button.on { background: var(--sg-blue); color: #fff; }
@media (max-width: 1100px) { .dx-qwidth { display: none; } }

/* ---- Tools menu + contextual panels (web/dispatchtools.js): beside the ready queue, over the calendar ---- */
.dt-menuwrap { position: relative; }
.a6-btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border: 1px solid var(--sg-line-2); border-radius: var(--dx-ctl-r); background: var(--sg-surface); color: var(--sg-ink); font: inherit; font-weight: 650; cursor: pointer; text-decoration: none; white-space: nowrap; }
.a6-btn:hover { border-color: var(--sg-blue); color: var(--sg-blue); }
.a6-btn.ghost { border-color: transparent; background: none; }
.a6-btn.primary { background: var(--sg-gold); border-color: var(--sg-gold-deep); color: #241e13; }
.a6-ibtn { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid transparent; border-radius: var(--dx-ctl-r); background: none; color: var(--sg-ink); cursor: pointer; }
.a6-ibtn:hover { border-color: var(--sg-line-2); }
.dt-menu { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 8px; padding: 4px; min-width: 520px; }
.dt-mg button { display: flex; gap: 8px; align-items: flex-start; width: 100%; text-align: left; background: none; border: 0; border-radius: var(--dx-ctl-r); padding: 6px 8px; font: inherit; color: var(--sg-ink); cursor: pointer; }
.dt-mg button:hover, .dt-mg button.on { background: rgba(var(--sg-blue-rgb), .06); }
.dt-mg button small { display: block; color: #5b6478; font-size: 11.5px; font-weight: 400; }
.dt-mg .menu-head { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--sg-gold-deep); padding: 6px 8px 2px; }
.dt-panel { position: absolute; z-index: 30; top: 0; bottom: 14px; background: var(--sg-surface); border: 1px solid var(--sg-line-2); border-radius: var(--dx-pan-r); box-shadow: 0 10px 30px rgba(var(--sg-blue-rgb), .16); display: flex; flex-direction: column; min-height: 0; }
.dt-panel.wide { left: calc(var(--dx-q-w, 318px) + 30px); right: 16px; }
.dt-panel.side { right: 16px; width: min(440px, calc(100% - var(--dx-q-w, 318px) - 46px)); }
.dt-head { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-bottom: 1px solid var(--sg-line); background: linear-gradient(90deg, var(--sg-cream), #fff); border-radius: var(--dx-pan-r) var(--dx-pan-r) 0 0; }
.dt-ic { width: 28px; height: 28px; display: grid; place-items: center; border-radius: var(--dx-ctl-r); background: var(--sg-blue); color: #fff; }
.dt-tt h2 { margin: 0; font-size: 15px; color: var(--sg-blue); outline: none; }
.dt-wk { font-size: 12px; color: #5b6478; }
.dt-body { overflow: auto; padding: 10px 12px; min-height: 0; flex: 1; }
.a6-sec { border: 1px solid var(--sg-line); border-radius: var(--dx-pan-r); padding: 8px 10px; margin: 0 0 10px; }
.a6-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.a6-note { font-size: 12px; color: #5b6478; }
.a6-tag { display: inline-block; font-size: 11px; font-weight: 650; padding: 1px 6px; border-radius: 3px; border: 1px solid var(--sg-line); }
.a6-tag.good, .a6-tag.ok { color: #1f7a3d; border-color: rgba(31,122,61,.35); } .a6-tag.bad, .a6-tag.danger { color: #a12a1f; border-color: rgba(161,42,31,.35); }
.a6-table, .dt-teamgrid { width: 100%; border-collapse: collapse; font-size: 12.5px; } .a6-table th, .a6-table td, .dt-teamgrid th, .dt-teamgrid td { border-bottom: 1px solid var(--sg-line); padding: 4px 6px; text-align: left; vertical-align: top; }
.a6-keys kbd { border: 1px solid var(--sg-line-2); border-radius: 3px; padding: 0 4px; font-size: 11px; background: var(--sg-cream); }
@media (max-width: 1100px) { .dt-panel.wide, .dt-panel.side { position: fixed; left: 8px; right: 8px; width: auto; top: calc(var(--topbar-h, 48px) + 8px); bottom: 8px; } .dt-menu { grid-template-columns: 1fr; min-width: 260px; } }
.dt-teamgrid { display: block; }
.dt-tr { display: grid; grid-template-columns: minmax(150px, 1.6fr) repeat(5, minmax(66px, 1fr)) 84px; gap: 4px; align-items: center; padding: 5px 0; border-bottom: 1px solid var(--sg-line); }
.dt-th { font-size: 12px; font-weight: 700; color: var(--sg-blue); background: var(--sg-cream); padding: 4px 0; position: sticky; top: -10px; z-index: 1; }
.dt-th button { border: 0; background: none; font: inherit; color: var(--sg-blue); cursor: pointer; padding: 0; text-align: left; }
.dt-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dt-day select { width: 100%; min-height: 28px; padding: 2px 4px; font-size: 12px; border-radius: var(--dx-ctl-r); }
.dt-day.off select { background: #fdf1ef; color: #a12a1f; border-color: rgba(161,42,31,.35); }
.dt-hrs { font-size: 12px; text-align: right; padding-right: 4px; }
.a6-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.a6-pick { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--sg-line); border-radius: var(--dx-ctl-r); padding: 3px 8px; cursor: pointer; }
.a6-pick.on { border-color: var(--sg-blue); background: rgba(var(--sg-blue-rgb), .05); }
.a6-pick input { width: auto; min-height: 0; margin: 0; }
.a6-field label, .a6-lbl { display: block; font-size: 12px; font-weight: 650; color: #5b6478; margin: 4px 0 2px; }
.a6-row input[type=date] { width: auto; }
.a6-list { list-style: none; margin: 4px 0; padding: 0; } .a6-list li { padding: 4px 0; border-bottom: 1px solid var(--sg-line); }
.a6-link { border: 0; background: none; color: var(--sg-blue); cursor: pointer; font: inherit; padding: 0; text-decoration: underline; } .a6-link.danger { color: #a12a1f; }