/* Apex Company OS: staff screens. Apex Knock chrome style system:
   near-black graphite panels, brushed-chrome edges, polished chrome for the one primary action,
   Apex blue (#2B9BFF, from the logo) for links, focus and selection, neon pink for alerts only.
   Michroma = wordmark and screen titles; Chakra Petch = labels, buttons and numbers; Barlow = everything people read.
   Customer-facing proposals and contracts keep their own print style (navy + cyan brand). */
:root {
  --ground: #05070B; --panel: #0E131B; --panel-2: #131A25; --well: #0B0F16; --raise: #18202C;
  --line: #222B37; --line-2: #2A333F; --edge-hi: #F2F6FA;
  --text: #EEF3F8; --text-2: #C9D2DC; --text-3: #9BA8B8;
  --blue: #2B9BFF; --blue-ink: #7CC4FF; --blue-soft: rgba(43, 155, 255, .14); --blue-glow: rgba(43, 155, 255, .4);
  --pink: #FF2D7A;
  --ok: #1FE08F; --ok-soft: rgba(31, 224, 143, .12); --warn: #FFB224; --warn-soft: rgba(255, 178, 36, .12);
  --bad: #FF4D5E; --bad-ink: #FF8090; --bad-soft: rgba(255, 77, 94, .1);
  --chrome: linear-gradient(180deg, #FDFEFF 0%, #D3DAE2 42%, #8E99A6 54%, #E8EDF2 100%);
  --chrome-edge: linear-gradient(160deg, #F2F6FA, #7D8895 40%, #2B323D 62%, #B9C3CE);
  --radius: 14px; --radius-s: 10px;
  --f-word: "Michroma", "Chakra Petch", sans-serif;
  --f-label: "Chakra Petch", "Barlow", "Segoe UI", sans-serif;
  --f-body: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
  /* older names used by a few templates */
  --cyan: var(--blue); --ink-3: var(--text-3);
  font-family: var(--f-body); font-size: 16px; color: var(--text); color-scheme: dark;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--ground); line-height: 1.45; }
a { color: var(--blue-ink); text-decoration: none; }
a:hover { color: #B5DDFF; text-decoration: underline; }
h1 { font-family: var(--f-word); font-weight: 400; font-size: 21px; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 6px;
  background: linear-gradient(180deg, #FFFFFF 10%, #AEB8C4 55%, #F2F5F8 90%); -webkit-background-clip: text; background-clip: text; color: transparent; }
h2 { font-family: var(--f-label); font-size: 17px; font-weight: 700; letter-spacing: .03em; margin: 0 0 10px; color: var(--text); }
h3 { font-family: var(--f-label); font-size: 13px; font-weight: 700; margin: 0 0 8px; text-transform: uppercase; letter-spacing: .14em; color: var(--text-3); }
p { margin: 0 0 10px; }
small, .muted { color: var(--text-3); }
code, .mono { font-family: ui-monospace, "Cascadia Mono", Menlo, monospace; font-size: 13px; color: var(--blue-ink); }

/* layout */
.shell { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; }
td.name, th.name { white-space: nowrap; }
.side { background: linear-gradient(180deg, #0A0E15, #05070B); border-right: 1px solid var(--line); color: var(--text-2);
  padding: 18px 12px; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.brand { display: flex; align-items: center; gap: 12px; padding: 4px 8px 18px; font-family: var(--f-word); font-size: 15px; letter-spacing: .14em; color: var(--text); }
.brand .mark { width: 34px; height: 34px; border-radius: 10px; background: var(--chrome); display: grid; place-items: center; color: var(--ground);
  font-family: var(--f-word); font-size: 15px; box-shadow: 0 0 0 1px var(--ground), 0 6px 18px var(--blue-glow); }
.brand small { display: block; font-family: var(--f-body); letter-spacing: 0; color: var(--text-3); font-size: 12px; margin-top: 2px; }
.side nav a { display: flex; justify-content: space-between; align-items: center; color: var(--text-2); padding: 9px 12px; min-height: 40px;
  border-radius: var(--radius-s); font-family: var(--f-label); font-weight: 600; font-size: 14px; letter-spacing: .02em; border: 1px solid transparent; }
.side nav a:hover { background: var(--panel); color: var(--text); text-decoration: none; }
.side nav a.on { color: var(--text); border: 1px solid transparent;
  background: linear-gradient(180deg, #131A25, #0A0E15) padding-box, var(--chrome-edge) border-box; box-shadow: 0 0 16px rgba(43, 155, 255, .18); }
.side .group { font-family: var(--f-label); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .16em; color: #7E8B9B; margin: 16px 12px 6px; }
.side .who { border-top: 1px solid var(--line); margin-top: 18px; padding: 12px 12px 0; font-size: 14px; color: var(--text-2); }
.side .who form { margin-top: 6px; }
.side .who button { background: none; border: 0; color: var(--blue-ink); padding: 0; cursor: pointer; font: inherit; min-height: 32px; }
main { padding: 24px 30px 64px; max-width: 1420px; width: 100%;
  background: radial-gradient(80% 50% at 20% 0%, #0E1622 0%, transparent 60%); }
.top { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.top .actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* cards & grids */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; margin-bottom: 16px; }
.card.tight { padding: 0; overflow: hidden; }
.card.tight > h2, .card.tight > .card-head, .card.tight > .top { padding: 16px 18px 0; }
.card.tight > p { padding: 0 18px; }
.card.tight > .btn, .card.tight > form > .btn { margin: 0 18px 16px; }
.grid { display: grid; gap: 16px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-main { grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 16px; }
.stat { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; color: var(--text); }
.stat .n { font-family: var(--f-label); font-size: 30px; font-weight: 700; color: var(--text); line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat .l { font-family: var(--f-label); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.stat.alert { border-color: rgba(255, 45, 122, .5); box-shadow: 0 0 18px rgba(255, 45, 122, .18); }
.stat.alert .n { color: var(--pink); }
a.stat:hover { border-color: var(--blue); text-decoration: none; }

/* tables */
table { width: 100%; border-collapse: collapse; font-size: 15px; }
th { text-align: left; font-family: var(--f-label); font-weight: 700; color: var(--text-3); font-size: 12px; text-transform: uppercase;
  letter-spacing: .1em; padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--well); white-space: nowrap; }
td { padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td.num { font-family: var(--f-label); font-weight: 600; }
tbody tr:hover { background: rgba(255, 255, 255, .025); }
tr.muted td { color: var(--text-3); }
.table-wrap { overflow-x: auto; }

/* forms */
label { display: block; font-family: var(--f-label); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); margin: 0 0 6px; }
input[type=text], input[type=email], input[type=password], input[type=tel], input[type=number], input[type=date],
input[type=datetime-local], input[type=time], input[type=search], input[type=url], select, textarea {
  width: 100%; min-height: 44px; padding: 9px 12px; border: 1px solid var(--line-2); border-radius: var(--radius-s); font: inherit; font-size: 16px;
  background: var(--well); color: var(--text); }
input::placeholder, textarea::placeholder { color: #6B7787; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(43, 155, 255, .25); }
input[type=file] { color: var(--text-2); font: inherit; }
input[type=checkbox], input[type=radio] { accent-color: var(--blue); width: 18px; height: 18px; }
input:disabled, select:disabled, textarea:disabled, fieldset:disabled input, fieldset:disabled select { opacity: .7; }
textarea { min-height: 80px; }
td input[type=text], td select { min-height: 38px; padding: 6px 10px; font-size: 15px; }
.field { margin-bottom: 14px; }
.row { display: flex; gap: 12px; flex-wrap: wrap; }
.row > .field { flex: 1 1 160px; }
.checks { display: flex; gap: 16px; flex-wrap: wrap; }
.checks label { display: flex; gap: 8px; align-items: center; font-family: var(--f-body); font-size: 15px; font-weight: 500; letter-spacing: 0;
  text-transform: none; color: var(--text); margin: 0; min-height: 36px; }
.inline { display: inline; }
.err { color: var(--bad-ink); font-size: 14px; margin-top: 4px; }

/* buttons: chrome edge by default, polished chrome for the primary action */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 18px; border-radius: 12px;
  border: 1px solid transparent; background: linear-gradient(180deg, #131A25, #0A0E15) padding-box, var(--chrome-edge) border-box;
  color: var(--text); font-family: var(--f-label); font-size: 14px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  cursor: pointer; white-space: nowrap; text-decoration: none; }
.btn:hover { color: #fff; text-decoration: none; box-shadow: 0 0 14px rgba(43, 155, 255, .25); }
.btn.primary { background: var(--chrome); border: 1px solid rgba(255, 255, 255, .7); color: var(--ground);
  box-shadow: 0 0 0 1px var(--ground), 0 8px 22px var(--blue-glow); }
.btn.primary:hover { color: var(--ground); filter: brightness(1.05); }
.btn.accent { background: var(--blue); border: 1px solid var(--blue); color: #04101C; box-shadow: 0 0 18px var(--blue-glow); }
.btn.danger { background: var(--bad-soft); border: 1px solid rgba(255, 77, 94, .6); color: var(--bad-ink); }
.btn.danger:hover { box-shadow: 0 0 14px rgba(255, 77, 94, .3); }
.btn.small { min-height: 36px; padding: 0 12px; font-size: 12px; border-radius: 10px; }
.btn.big { min-height: 58px; padding: 0 28px; font-size: 16px; letter-spacing: .1em; border-radius: 16px; }
.btn[disabled] { opacity: .45; cursor: not-allowed; box-shadow: none; }

/* badges & flashes */
.badge { display: inline-block; padding: 2px 9px; border-radius: 99px; font-family: var(--f-label); font-size: 12px; font-weight: 700;
  letter-spacing: .04em; background: var(--raise); color: var(--text-2); white-space: nowrap; border: 1px solid var(--line-2); }
.badge.cyan { background: var(--blue-soft); color: var(--blue-ink); border-color: rgba(43, 155, 255, .4); }
.badge.ok { background: var(--ok-soft); color: var(--ok); border-color: rgba(31, 224, 143, .4); }
.badge.warn { background: var(--warn-soft); color: var(--warn); border-color: rgba(255, 178, 36, .4); }
.badge.bad { background: rgba(255, 45, 122, .12); color: #FF6FA3; border-color: rgba(255, 45, 122, .5); }
.badge.navy { background: var(--chrome); color: var(--ground); border-color: transparent; }
.flash { padding: 12px 16px; border-radius: var(--radius-s); margin-bottom: 14px; border: 1px solid; font-size: 15px; }
.flash.ok { background: var(--ok-soft); border-color: rgba(31, 224, 143, .45); color: #9FF5CF; }
.flash.warn { background: var(--warn-soft); border-color: rgba(255, 178, 36, .45); color: #FFD78A; }
.flash.error { background: rgba(255, 45, 122, .1); border-color: rgba(255, 45, 122, .55); color: #FF9CC0; box-shadow: 0 0 16px rgba(255, 45, 122, .15); }
.notice { background: var(--blue-soft); border: 1px solid rgba(43, 155, 255, .4); color: #CBE6FF; padding: 12px 16px; border-radius: var(--radius-s); font-size: 15px; margin-bottom: 14px; }

/* lead detail */
.kv { display: grid; grid-template-columns: 140px 1fr; gap: 8px 12px; font-size: 15px; }
.kv dt { color: var(--text-3); font-family: var(--f-label); font-size: 13px; font-weight: 600; letter-spacing: .04em; }
.kv dd { margin: 0; }
.phone-line { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 0; border-bottom: 1px dashed var(--line-2); }
.phone-line:last-child { border-bottom: 0; }
.big-phone { font-family: var(--f-label); font-size: 22px; font-weight: 700; color: var(--text); letter-spacing: .02em; }
.outcomes { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; margin-bottom: 12px; }
.outcomes button { text-align: left; white-space: normal; line-height: 1.25; justify-content: flex-start; min-height: 52px; padding: 8px 14px; }
.outcome-group { font-family: var(--f-label); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: var(--text-3); margin: 6px 0 8px; }
.timeline { list-style: none; margin: 0; padding: 0; font-size: 15px; }
.timeline li { padding: 8px 0 8px 18px; border-left: 2px solid var(--line-2); position: relative; margin-left: 6px; }
.timeline li::before { content: ""; position: absolute; left: -6px; top: 13px; width: 10px; height: 10px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 8px var(--blue-glow); }
.timeline .when { font-size: 13px; color: var(--text-3); }

/* slot picker */
.slots { display: grid; gap: 6px; max-height: 440px; overflow-y: auto; padding-right: 4px; }
.slot-day { display: grid; grid-template-columns: 120px 1fr; gap: 8px; align-items: start; padding: 6px 0; border-bottom: 1px dashed var(--line-2); }
.slot-day:last-child { border-bottom: 0; }
.slot-day h4 { margin: 10px 0 0; font-family: var(--f-label); font-size: 13px; color: var(--text-2); }
.slot-day .opts { display: flex; flex-wrap: wrap; gap: 6px; }
.slot-opt input { position: absolute; opacity: 0; }
.slot-opt span { display: inline-block; min-height: 44px; padding: 7px 12px; border: 1px solid var(--line-2); border-radius: var(--radius-s);
  font-family: var(--f-label); font-weight: 600; font-size: 14px; cursor: pointer; background: var(--well); color: var(--text); }
.slot-opt input:focus-visible + span { box-shadow: 0 0 0 3px rgba(43, 155, 255, .35); }
.slot-opt input:checked + span { background: var(--chrome); color: var(--ground); border-color: rgba(255, 255, 255, .7); box-shadow: 0 6px 18px var(--blue-glow); }
.slot-opt.rec span { border-color: var(--blue); box-shadow: inset 0 -3px 0 var(--blue); }
.slot-opt small { display: block; font-size: 11px; color: inherit; opacity: .85; }

/* calendar */
.cal { display: grid; gap: 8px; }
.cal-col { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-s); padding: 8px; min-height: 160px; }
.cal-col h4 { margin: 0 0 6px; font-family: var(--f-label); font-size: 13px; color: var(--text-2); }
.appt-chip { display: block; border-left: 3px solid var(--blue); background: var(--panel-2); padding: 6px 8px; margin-bottom: 6px; border-radius: 6px; font-size: 13px; color: var(--text); }
.appt-chip.confirmed { border-color: var(--ok); }
.appt-chip.unissued { border-color: var(--warn); }

/* rep tablet view */
.rep-appt { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.rep-appt:last-child { border-bottom: 0; }
.rep-appt .t { font-family: var(--f-label); font-size: 20px; font-weight: 700; color: var(--text); min-width: 96px; }
.result-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.result-grid label { display: flex; gap: 10px; align-items: center; border: 1px solid var(--line-2); border-radius: 12px; padding: 14px; min-height: 56px;
  font-family: var(--f-body); font-size: 16px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--text); cursor: pointer; margin: 0; background: var(--well); }
.result-grid label:has(input:checked) { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(43, 155, 255, .25); }
.result-grid input:checked + span { font-weight: 700; color: #fff; }

.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 16px;
  background: radial-gradient(90% 70% at 15% 0%, #0E1622 0%, #05070B 55%); }
.login { width: 100%; max-width: 400px; padding: 30px; border-radius: 18px; border: 1px solid transparent;
  background: linear-gradient(180deg, #131A25, #0A0E15) padding-box, var(--chrome-edge) border-box; }
.login .brand { padding: 0 0 22px; }
.login .btn { width: 100%; }

.bar { height: 8px; background: var(--raise); border-radius: 99px; overflow: hidden; }
.bar > span { display: block; height: 100%; background: var(--blue); box-shadow: 0 0 10px var(--blue-glow); }
.pill-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.pill-tabs a { display: inline-flex; align-items: center; min-height: 38px; padding: 0 14px; border-radius: 99px; border: 1px solid var(--line-2);
  background: var(--panel); font-family: var(--f-label); font-weight: 600; font-size: 13px; color: var(--text-2); }
.pill-tabs a:hover { text-decoration: none; color: var(--text); }
.pill-tabs a.on { background: var(--chrome); color: var(--ground); border-color: rgba(255, 255, 255, .7); }
.secret { font-family: ui-monospace, Menlo, monospace; background: var(--well); border: 1px solid rgba(43, 155, 255, .4); color: var(--blue-ink); padding: 12px 14px; border-radius: var(--radius-s); word-break: break-all; }
.hide { display: none !important; }
.thumbs { display: flex; flex-wrap: wrap; gap: 8px; }
.thumbs img { width: 96px; height: 96px; object-fit: cover; border-radius: var(--radius-s); border: 1px solid var(--line-2); display: block; }
.file-chip { display: inline-block; padding: 8px 12px; border: 1px solid var(--line-2); border-radius: var(--radius-s); font-size: 14px; background: var(--well); }
details summary { cursor: pointer; font-family: var(--f-label); font-weight: 700; color: var(--blue-ink); min-height: 32px; }
hr { border: 0; border-top: 1px solid var(--line); margin: 16px 0; }
::selection { background: rgba(43, 155, 255, .35); }

@media (max-width: 1100px) {
  .g-main, .g3 { grid-template-columns: 1fr; }
}
@media (max-width: 1180px) {
  .shell { grid-template-columns: 1fr; }
  .side { position: static; height: auto; padding: 12px; border-right: 0; border-bottom: 1px solid var(--line); }
  .side nav { display: flex; flex-wrap: wrap; gap: 4px; }
  .side .group { display: none; }
  .side .who { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; padding-top: 8px; }
  main { padding: 18px 16px 48px; }
}
@media (max-width: 760px) {
  .g2 { grid-template-columns: 1fr; }
  .kv { grid-template-columns: 110px 1fr; }
  .slot-day { grid-template-columns: 1fr; }
  h1 { font-size: 17px; }
}

/* estimate builder */
.tier-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-bottom: 16px; }
.tier { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.tier.blocked { border-color: rgba(255, 178, 36, .45); }
.tier-head h2 { margin: 0; }
.tier-total { font-family: var(--f-label); font-size: 34px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.tier .cost { border-top: 1px dashed var(--line-2); margin-top: 6px; padding-top: 8px; }
.cost-row { display: flex; justify-content: space-between; font-size: 15px; }
.bad-ink { color: var(--bad-ink); }
.blocking { margin: 6px 0 0; padding-left: 18px; color: var(--warn); font-size: 14px; }
.add-tier { border-style: dashed; }
.card-inner { padding: 14px 18px; border-top: 1px solid var(--line); background: var(--panel-2); }
details.card-inner > summary { margin-bottom: 8px; }
.row-actions { white-space: nowrap; text-align: right; }
.row-actions form, .row-actions .btn { margin: 2px 0 2px 4px; }
table.openings td { vertical-align: middle; }
tr.edit-row > td { padding: 0; background: var(--panel-2); }
.ui-out { display: flex; align-items: center; min-height: 44px; font-family: var(--f-label); font-weight: 700; font-size: 18px; color: var(--blue-ink); }
label.btn { margin: 0; }
body.hide-cost .cost { display: none !important; }
.sig-list { display: grid; gap: 8px; }
.price-card { margin-bottom: 16px; }
.price-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 320px); gap: 18px; align-items: end; }
.price-main .cost { border-top: 0; border-left: 1px dashed var(--line-2); margin: 0; padding: 0 0 0 16px; }
@media (max-width: 760px) { .price-main { grid-template-columns: 1fr; } .price-main .cost { border-left: 0; padding: 0; } }

/* sales calendar */
.sit-grid th[scope=row] { white-space: nowrap; font-family: var(--f-label); color: var(--text-2); font-size: 14px; text-transform: none; letter-spacing: 0; background: none; }
.sit-grid td { padding: 6px 8px; }
.sit { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: var(--radius-s); font-family: var(--f-label);
  font-size: 13px; font-weight: 700; letter-spacing: .04em; }
.sit.off { color: #6B7787; border: 1px dashed var(--line-2); }
.sit.full { color: var(--warn); border: 1px solid rgba(255, 178, 36, .4); background: var(--warn-soft); }
.sit.open { color: var(--blue-ink); border: 1px solid rgba(43, 155, 255, .45); background: var(--blue-soft); }
.cal-grid { width: 100%; border-collapse: separate; border-spacing: 6px; }
.cal-grid th { background: none; border: 0; padding: 4px 6px; }
.cal-grid td { border: 1px solid var(--line); border-radius: 12px; background: var(--panel); padding: 8px; vertical-align: top; min-width: 120px; }
.cal-grid td.off { background: transparent; border-style: dashed; color: #6B7787; }
.cal-grid td.need { border-color: rgba(43, 155, 255, .5); background: var(--blue-soft); }
.cal-grid td.today-col { box-shadow: inset 0 0 0 1px rgba(43, 155, 255, .35); }
.chip { display: block; padding: 6px 8px; border-radius: 8px; background: var(--raise); border-left: 3px solid var(--blue); margin-bottom: 4px;
  color: var(--text); font-size: 13px; line-height: 1.3; text-decoration: none; }
.chip:hover { text-decoration: none; background: #1E2836; }
.chip.confirmed { border-left-color: var(--ok); }
.chip.ran { border-left-color: var(--text-3); opacity: .8; }
.chip.sold { border-left-color: var(--ok); box-shadow: inset 0 0 0 1px rgba(31, 224, 143, .35); }
.chip.unassigned { border-left-color: var(--pink); }
.chip small { display: block; color: var(--text-3); }
.cell-label { font-family: var(--f-label); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.heat { text-align: center; font-family: var(--f-label); font-weight: 700; font-size: 18px; }
.heat small { display: block; font-size: 11px; color: var(--text-3); font-weight: 600; letter-spacing: .06em; }
.month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.month .dow { font-family: var(--f-label); font-size: 12px; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: .1em; padding: 4px; }
.month a.day { display: block; min-height: 92px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); padding: 8px; color: var(--text); text-decoration: none; }
.month a.day:hover { border-color: var(--blue); }
.month a.day.other { opacity: .35; }
.month a.day.today { box-shadow: inset 0 0 0 1px var(--blue); }
.month .num-day { font-family: var(--f-label); font-weight: 700; }
.month .stat-line { font-size: 13px; color: var(--text-2); }
.req-grid td { text-align: center; }
.req-grid input[type=checkbox] { width: 26px; height: 26px; }
.req-grid label.req { display: inline-flex; align-items: center; justify-content: center; min-width: 52px; min-height: 44px; border-radius: 10px;
  border: 1px solid var(--line-2); cursor: pointer; margin: 0; }
.req-grid label.req:has(input:checked) { border-color: var(--blue); background: var(--blue-soft); }
.req-grid label.req.booked { border-color: var(--ok); background: var(--ok-soft); }
/* wide tables scroll inside their card instead of widening the page */
.shell > main, .shell > aside { min-width: 0; }
.grid > * { min-width: 0; }

/* Manager calendar drag and drop */
.dnd-hint { margin: 0 0 10px; }
[data-dnd] [data-appt] { position: relative; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; padding-right: 30px; }
[data-dnd] .grip { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; border: 0; text-align: center; border-radius: 6px; background: transparent;
  color: var(--text-3); font-size: 15px; line-height: 24px; cursor: pointer; padding: 0; }
[data-dnd] .grip:hover, [data-dnd] .grip:focus-visible { background: rgba(255, 255, 255, .08); color: var(--text); }
.chip.dragging { opacity: .35; }
.chip.moving { opacity: .6; }
.chip.picked { box-shadow: 0 0 0 2px var(--blue); }
.chip.ghost { position: fixed; z-index: 1000; pointer-events: none; margin: 0; opacity: .95; transform: rotate(-1.5deg);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .5); cursor: grabbing; }
body.is-dragging, body.is-dragging * { cursor: grabbing !important; }
body.is-dragging [data-drop], .picking [data-drop] { outline: 1px dashed rgba(43, 155, 255, .45); outline-offset: -3px; }
[data-drop].drop-over { outline: 2px solid var(--blue) !important; background: var(--blue-soft); }
.picking [data-drop] { cursor: pointer; }
[data-drop]:focus-visible { outline: 2px solid var(--blue); }
.cal-grid tr.no-rep-row td { border-color: rgba(255, 45, 122, .35); border-style: dashed; min-height: 44px; }
.flash.dnd-toast { background-color: #121A24; }
.dnd-toast { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 1001; max-width: min(560px, calc(100vw - 32px));
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45); background: var(--panel); }