/* Operations: neutral working surfaces, charcoal navigation, original brand green. */
:root {
  --ink: #202a36;
  --muted: #647082;
  --green: #246c3a;
  --mint: #eff8ef;
  --paper: #f3f5f8;
  --line: #dce1e8;
  --red: #b42336;
  --brand: #7ce779;
}
body.operations { font-family: Inter, "Segoe UI", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
.ops-header {
  display: grid;
  grid-template-columns: auto minmax(220px, 1fr) auto auto;
  gap: 16px 24px;
  padding: 14px 4vw 0;
  background: #171d26;
  color: #fff;
}
.ops-header .brand { gap: 18px; letter-spacing: 0; }
.brand img { display: block; width: 184px; height: auto; }
.brand > .workspace-label {
  padding: 8px 0 8px 18px;
  border-color: #414955;
  color: #c9d1dc;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.ops-header .global-search { max-width: none; min-width: 0; }
.global-search input { background: #2a3340; color: #fff; border: 1px solid #434c59; border-radius: 9px; }
.global-search input::placeholder { color: #b8c2ce; }
.global-search button { color: #e2e8f0; }
.pos-button { background: var(--brand) !important; border-color: var(--brand); color: #17251b !important; }
.account-actions { justify-self: end; }
.quiet { border-color: #485260; color: #dbe2eb; border-radius: 8px; }
.ops-nav {
  grid-column: 1 / -1;
  margin: 0 -4vw;
  padding: 11px 4vw;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: #fff;
  gap: 30px;
  min-width: 0;
}
.ops-nav > a, .ops-nav summary { color: #475366; font-size: 13px; font-weight: 600; padding: 5px 0; }
.ops-nav > a:hover, .ops-nav summary:hover, .ops-nav details[open] summary { color: #172331; }
.ops-nav details > div { border-color: var(--line); box-shadow: 0 15px 40px #1c28341f; top: 38px; }
.ops-nav details > div a { color: var(--ink); }
.ops-nav details > div a:hover { background: #f0f3f7; }
.ops-header > .light { margin-bottom: 14px; color: #cbd5e1; font-size: 13px; grid-column: 2 / -1; justify-self: end; }
main { padding-top: 34px; }
h1, h2, h3 { font-family: Inter, "Segoe UI", system-ui, sans-serif; letter-spacing: -.035em; }
h1 { font-size: clamp(28px, 3vw, 38px); }
h2 { font-size: 21px; }
.eyebrow { color: #627085; letter-spacing: .12em; }
.card { border-radius: 12px; box-shadow: 0 3px 12px #15233604; }
.accent { border-color: #cee5d0; }
.stats { gap: 16px; }
.stats > div { border-radius: 12px; padding: 21px 23px; }
.stats strong { color: #202a36; font-weight: 650; }
.stats small { letter-spacing: .08em; }
button, .button { background: #263242; border-color: #263242; border-radius: 8px; font-family: inherit; font-weight: 600; }
button:hover, .button:hover { filter: none; background: #3b485a; border-color: #3b485a; }
.secondary { background: #fff; color: #364357; border-color: #d2d9e2; }
.secondary:hover { background: #f3f5f8; border-color: #b6c1d0; }
.quiet, .global-search button { background: transparent; }
.quiet:hover { background: #2a3340; }
.global-search button:hover { background: transparent; border: 0; }
.pos-button:hover { background: #90ed8d !important; border-color: #90ed8d; }
input, select, textarea { border-color: #cbd3df; }
input:focus, select:focus, textarea:focus { outline-color: #4e7da7; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid #4e7da7; outline-offset: 3px; }
.quantity, .infobar { background: #f4f6f9; }
td { border-color: #ebeff4; }
tbody tr:hover { background: #fafbfd; }
th { color: #6a7586; font-size: 10px; letter-spacing: .07em; background: #fafbfd; }
.badge { background: #edf1f6; color: #516074; }
.badge.scheduled { background: #e5effc; color: #245d97; }
.badge.closed { background: #e4f3e7; color: #276439; }
.badge.requested, .badge.review { background: #fff1d6; color: #88600a; }
.notice { background: #eaf4ec; color: #2d6238; border: 1px solid #cfe4d3; }
.notice.error { background: #fff0f0; border-color: #f2d1d6; color: var(--red); }
.login { margin: 48px auto; max-width: 460px; padding: 34px; }
.login h1 { font-size: 29px; }
.login > p { font-size: 14px; }
.result { border-color: var(--line); }
.result span { color: var(--muted); }
.calendar-day { background: #f8fafc; }
.calendar-day.is-today { background: #edf3fc; border-color: #6390c4; }
.calendar-job { background: #e7effb; border-left-color: #4277b0; color: #2b4e7c; }
.calendar-job small { color: #587094; }
.preview-visit { border-color: var(--line); }
.preview-visit span { color: var(--muted); }
.queue-tabs a span { background: #eef2f7; color: #637084; }
.queue-tabs a.selected { background: #263242; border-color: #263242; }
.queue-tabs a.selected span { background: #485669; color: white; }
.shop-progress progress, .shop-progress progress::-webkit-progress-bar { background: #e9edf3; }
.check-mark { background: #edf1f6; color: #6a7788; }
.done .check-mark { background: #e0f1e3; color: #28633a; }
.ops-footer { background: #171d26; border-top: 0; color: #aab5c4; align-items: center; padding-block: 20px; gap: 24px; }
.ops-footer img { display: block; width: 132px; height: auto; }
.ops-footer span { font-size: 12px; }
@media (max-width: 1180px) {
  .ops-header { grid-template-columns: auto 1fr auto; }
  .account-actions { grid-column: 3; grid-row: 2; }
  .ops-nav { grid-column: 1 / -1; grid-row: 3; }
  .ops-header .global-search { grid-column: 2 / -1; }
  .ops-header .pos-button { grid-column: 1 / 3; grid-row: 2; justify-self: start; }
}
@media (max-width: 800px) {
  .ops-header { grid-template-columns: 1fr auto; gap: 14px; }
  .brand img { width: 160px; }
  .brand > .workspace-label { font-size: 10px; padding-left: 12px; }
  .ops-header .brand { gap: 12px; grid-column: 1 / -1; }
  .ops-header .global-search { grid-column: 1 / -1; grid-row: 2; }
  .ops-header .pos-button { grid-column: 1; grid-row: 3; font-size: 12px; }
  .account-actions { grid-column: 2; grid-row: 3; }
  .ops-nav { grid-row: 4; gap: 14px 24px; }
  .ops-header > .light { grid-column: 1 / -1; margin: 0 0 14px; justify-self: start; }
  .shop-action { background: #f4f6f9; }
}
@media (max-width: 600px) {
  .ops-header { padding: 14px 16px 0; }
  .ops-nav { margin-inline: -16px; padding: 12px 16px; }
  .ops-header form { margin-left: 0; }
  .quiet { font-size: 11px; }
  .ops-footer { padding: 20px 16px; }
  .ops-footer span { display: block; text-align: right; max-width: 150px; }
  .login { padding: 24px; margin-block: 24px; }
}