/* AxelMotions CRM — own stylesheet. Navy frame, brick-red tabs, warm paper content (familiar to PowerDispatch users). */
:root {
  --navy: #2c3e50; --navy2: #34495e; --red: #ad4136; --red2: #8f3329; --paper: #e9e5dc; --paper2: #f5f2ec; --card: #fff;
  --ink: #1f2328; --muted: #48505a; --line: #c9c3b6; --blue: #1a5296; --blue2: #12406f; --green: #2e7d32; --orange: #d98a00; --danger: #b3261e;
  --focus: #1a73e8; --r: 6px; --shadow: 0 1px 3px rgba(0,0,0,.18);
  font-size: 15px;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; color: var(--ink); background: var(--navy); line-height: 1.4; -webkit-text-size-adjust: 100%; }
a { color: var(--blue); }
a:hover { color: var(--blue2); }
h1 { font-size: 1.45rem; margin: 0; font-weight: 600; }
h2 { font-size: 1.2rem; margin: 0 0 .5rem; font-weight: 600; }
h3 { font-size: 1.05rem; margin: 0 0 .4rem; }
.i { width: 1.05em; height: 1.05em; vertical-align: -.16em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.skip { position: absolute; left: -999px; top: 0; background: #fff; padding: 8px 12px; z-index: 100; }
.skip:focus { left: 8px; top: 8px; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.center { text-align: center; }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }

/* ---------- top bar ---------- */
.topbar { max-width: 1400px; margin: 0 auto; }
.tb-in { display: flex; align-items: flex-end; gap: 10px; padding: 8px 10px 0; }
.brand { display: flex; align-items: center; gap: 8px; color: #fff; text-decoration: none; font-weight: 700; font-size: 1.05rem; padding-bottom: 6px; margin-right: 6px; }
.brand:hover { color: #fff; }
.logo-mark { width: 34px; height: 34px; }
.tabs { display: flex; gap: 4px; flex: 1; flex-wrap: wrap; }
.tab { display: flex; align-items: center; gap: 6px; padding: 7px 14px; background: var(--red); color: #fff; text-decoration: none; font-weight: 600; font-size: .92rem; border-radius: 8px 8px 0 0; }
.tab:hover { background: var(--red2); color: #fff; }
.tab.on { background: #56636f; color: #fff; }
.acct { text-align: right; color: #fff; padding-bottom: 6px; font-size: .85rem; }
.acct-name { font-weight: 700; }
.acct-user { font-size: .78rem; opacity: .85; margin-bottom: 3px; }
.acct .btn { background: var(--red); color: #fff; border-color: var(--red2); }
.hamb { display: none; background: none; border: 0; color: #fff; font-size: 1.5rem; padding: 6px 8px; cursor: pointer; }
.subtabs { display: flex; flex-wrap: wrap; gap: 3px 4px; background: #56636f; padding: 6px 10px 0; border-radius: 0 6px 0 0; }
.stab { display: flex; align-items: center; gap: 6px; padding: 6px 13px; background: var(--red); color: #fff; text-decoration: none; font-weight: 600; font-size: .86rem; border-radius: 7px 7px 0 0; white-space: nowrap; }
.stab:hover { background: var(--red2); color: #fff; }
.stab.on { background: var(--paper); color: var(--red); }
.badge { background: var(--blue); color: #fff; border-radius: 9px; padding: 0 6px; font-size: .75rem; }
main { display: block; max-width: 1400px; margin: 0 auto; background: var(--paper); padding: 16px; min-height: 60vh; outline: none; }
.foot { max-width: 1400px; margin: 0 auto 0; background: var(--paper); border-top: 1px solid var(--line); padding: 16px; text-align: center; font-size: .85rem; color: var(--muted); display: grid; gap: 4px; }
.foot-logo { width: 38px; height: 38px; }
.bottombar { display: none; }
.drawer { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 60; }
.drawer-in { position: absolute; top: 0; right: 0; bottom: 0; width: min(320px, 88vw); background: #fff; overflow-y: auto; padding: 12px; box-shadow: -2px 0 12px rgba(0,0,0,.3); }
.drawer-head { display: flex; gap: 10px; align-items: center; padding-bottom: 10px; border-bottom: 1px solid #eee; margin-bottom: 6px; }
.dgroup { border-bottom: 1px solid #eee; padding: 4px 0; }
.dtop { display: flex; gap: 8px; align-items: center; padding: 10px 6px; font-weight: 700; color: var(--ink); text-decoration: none; }
.dtop.on { color: var(--red); }
.dsubs { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 0 8px 28px; }
.dsubs a { padding: 6px 10px; border-radius: 14px; background: #f1eee8; color: var(--ink); text-decoration: none; font-size: .88rem; }
.dsubs a.on { background: var(--red); color: #fff; }
.drawer .btn.block { margin-top: 12px; }

/* ---------- generic ---------- */
.phead { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.phead p { margin: 2px 0 0; }
.phead-r { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.card { background: var(--card); border-radius: var(--r); box-shadow: var(--shadow); padding: 14px; }
.panel { background: var(--paper2); border: 1px solid var(--line); border-radius: var(--r); padding: 12px; margin-bottom: 12px; }
fieldset { border: 1px solid #9aa3ad; border-radius: var(--r); padding: 10px 12px 12px; margin: 0 0 12px; background: rgba(255,255,255,.35); min-width: 0; }
legend { color: var(--blue); font-weight: 700; padding: 0 6px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font: inherit; font-size: .92rem; padding: 7px 13px; border: 1px solid #a9a39a; background: #fff; color: var(--ink); border-radius: var(--r); cursor: pointer; text-decoration: none; min-height: 36px; line-height: 1.1; }
.btn:hover { background: #f3f1ec; color: var(--ink); }
.btn.primary { background: var(--blue); border-color: var(--blue2); color: #fff; }
.btn.primary:hover { background: var(--blue2); color: #fff; }
.btn.go { background: var(--green); border-color: #215a24; color: #fff; }
.btn.danger { color: var(--danger); border-color: #d9a29e; }
.btn.danger:hover { background: #fbeceb; }
.btn.sm { padding: 4px 9px; min-height: 30px; font-size: .84rem; }
.btn.block { width: 100%; }
.btn.on { background: var(--navy2); color: #fff; border-color: var(--navy); }
.btn[disabled], .btn[aria-disabled=true] { opacity: .45; cursor: default; }
.linkbtn { background: none; border: 0; color: var(--blue); cursor: pointer; font: inherit; padding: 2px 4px; text-decoration: underline; }
input, select, textarea { font: inherit; font-size: .93rem; color: var(--ink); border: 1px solid #a9a39a; border-radius: 5px; padding: 6px 8px; background: #fff; min-height: 34px; max-width: 100%; }
textarea { min-height: 70px; resize: vertical; width: 100%; }
input[type=checkbox], input[type=radio] { min-height: 0; width: 17px; height: 17px; vertical-align: -3px; accent-color: var(--blue); }
input:focus, select:focus, textarea:focus { border-color: var(--focus); outline: 2px solid rgba(26,115,232,.25); outline-offset: 0; }
input[readonly] { background: #f0eee9; }
label { font-weight: 600; font-size: .86rem; }
label.chk { font-weight: 500; display: inline-flex; gap: 6px; align-items: center; cursor: pointer; }
.req::after { content: " *"; color: var(--danger); }
.fld { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fld > input, .fld > select, .fld > textarea { width: 100%; }
.grid { display: grid; gap: 10px 14px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.span2 { grid-column: span 2; }
.span3 { grid-column: span 3; }
.spanall { grid-column: 1 / -1; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.row.end { justify-content: flex-end; }
.row.between { justify-content: space-between; }
.inline-in { display: flex; gap: 6px; }
.inline-in > input, .inline-in > select { flex: 1; min-width: 0; }
.pill { display: inline-block; padding: 2px 9px; border-radius: 11px; font-size: .78rem; font-weight: 600; border: 1px solid rgba(0,0,0,.15); white-space: nowrap; color: #222; }
.err { color: var(--danger); font-weight: 600; margin: 6px 0; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: #222; color: #fff; padding: 10px 18px; border-radius: 8px; z-index: 300; display: none; max-width: 90vw; box-shadow: 0 4px 16px rgba(0,0,0,.35); }
.empty { text-align: center; padding: 34px 14px; color: var(--muted); }
.empty .i { width: 34px; height: 34px; opacity: .55; }
.empty h3 { margin: 8px 0 4px; color: var(--ink); }
.empty.big { padding: 60px 14px; }
.avatar { display: inline-flex; width: 30px; height: 30px; border-radius: 50%; color: #fff; font-size: .74rem; font-weight: 700; align-items: center; justify-content: center; flex: none; }
.avatar.lg { width: 56px; height: 56px; font-size: 1.15rem; }

/* ---------- modal ---------- */
.modal-bg { position: fixed; inset: 0; background: rgba(20,25,30,.55); display: flex; align-items: flex-start; justify-content: center; z-index: 200; padding: 6vh 12px 12px; overflow-y: auto; }
.modal { background: #fff; border-radius: 8px; width: min(520px, 100%); box-shadow: 0 10px 40px rgba(0,0,0,.4); }
.modal.wide { width: min(860px, 100%); }
.mh { display: flex; justify-content: space-between; align-items: center; padding: 11px 14px; background: var(--navy2); color: #fff; border-radius: 8px 8px 0 0; font-weight: 700; }
.mh button { background: none; border: 0; color: #fff; font-size: 1.5rem; cursor: pointer; line-height: 1; padding: 0 4px; }
.mb { padding: 14px; }
.mf { display: flex; gap: 8px; justify-content: flex-end; padding: 10px 14px; border-top: 1px solid #eee; flex-wrap: wrap; }
.mb label { display: block; margin: 8px 0 3px; }
.mb input:not([type=checkbox]):not([type=radio]), .mb select, .mb textarea { width: 100%; }
.mb label.chk { display: inline-flex; margin: 8px 12px 0 0; }

/* ---------- multiselect ---------- */
.ms { position: relative; }
.ms > button { width: 100%; text-align: left; font: inherit; font-size: .93rem; background: #fff; border: 1px solid #a9a39a; border-radius: 5px; padding: 6px 26px 6px 8px; min-height: 34px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: relative; }
.ms > button::after { content: "\25BE"; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); color: #666; }
.ms .menu { position: absolute; z-index: 50; background: #fff; border: 1px solid #999; border-radius: 6px; box-shadow: 0 6px 20px rgba(0,0,0,.25); min-width: 100%; width: max-content; max-width: 320px; max-height: 300px; overflow-y: auto; padding: 6px; top: calc(100% + 2px); left: 0; }
.ms .menu input[type=search] { width: 100%; margin-bottom: 4px; }
.ms .menu label { display: flex; gap: 6px; padding: 5px 4px; font-weight: 500; cursor: pointer; border-radius: 4px; }
.ms .menu label:hover { background: #f1f4f9; }
.ms .tools { display: flex; justify-content: space-between; border-bottom: 1px solid #eee; margin-bottom: 4px; }

/* ---------- tables ---------- */
.tbl-wrap { overflow-x: auto; background: #fff; border-radius: var(--r); box-shadow: var(--shadow); }
table.tbl { width: 100%; border-collapse: collapse; font-size: .88rem; background: #fff; }
.tbl th { background: var(--blue); color: #fff; text-align: left; padding: 7px 8px; font-weight: 600; white-space: nowrap; position: sticky; top: 0; z-index: 1; }
.tbl th.sortable { cursor: pointer; user-select: none; }
.tbl th.sortable:hover { background: var(--blue2); }
.tbl th .arrow { margin-left: 4px; font-size: .7rem; }
.tbl td { padding: 6px 8px; border-bottom: 1px solid #e3ded4; vertical-align: top; }
.tbl tbody tr:hover td { filter: brightness(.97); }
.tbl td.num, .tbl th.num { text-align: right; white-space: nowrap; }
.tbl tfoot td { font-weight: 700; background: #f3f0e9; border-top: 2px solid #bbb; }
.tbl .grp td { background: var(--navy2); color: #fff; font-weight: 700; font-size: .95rem; text-align: center; }
.tbl a.rowlink { font-weight: 700; text-decoration: none; }
.tbl.clickable tbody tr[data-href] { cursor: pointer; }
.pager { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 10px 0; flex-wrap: wrap; }
.pbtns { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.pager .btn.on { background: var(--blue); color: #fff; border-color: var(--blue2); }
.gap { padding: 0 4px; color: var(--muted); }

/* ---------- login ---------- */
body.bare { background: linear-gradient(160deg, #2c3e50, #1d2833); min-height: 100vh; }
.bare-main { background: none; max-width: none; padding: 0; }
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; }
.login { width: min(400px, 100%); padding: 26px 24px; display: flex; flex-direction: column; gap: 6px; }
.login label:not(.chk) { margin-top: 8px; }
.login input:not([type=checkbox]) { width: 100%; min-height: 42px; font-size: 1rem; }
.login .btn.primary { margin-top: 12px; min-height: 44px; font-size: 1rem; }
.login-logo { text-align: center; }
.logo-big { width: 74px; height: 74px; }
.login h1 { font-size: 1.6rem; margin-top: 6px; }
.login h1 span { color: var(--red); }
.pw { position: relative; }
.pw .showpw { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); text-decoration: none; color: #666; }

/* ---------- dashboard ---------- */
.filters { background: var(--paper2); border: 1px solid #555; border-radius: 4px; padding: 10px 12px; margin-bottom: 14px; }
.filters .grid { align-items: end; }
.stats { display: grid; gap: 14px; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 14px; }
.stats.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stat { background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,.2); border-left: 7px solid var(--blue); padding: 14px 16px; text-align: right; text-decoration: none; color: var(--ink); display: block; border-radius: 2px; }
a.stat:hover { box-shadow: 0 3px 10px rgba(0,0,0,.28); color: var(--ink); }
.stat .v { font-size: 2rem; font-weight: 300; line-height: 1.1; }
.stat .v small { font-size: .95rem; color: #555; font-style: italic; margin-right: 6px; }
.stat .l { color: #6b6b6b; letter-spacing: .06em; font-size: .9rem; margin-top: 4px; }
.stat.c-orange { border-color: var(--orange); }
.stat.c-green { border-color: var(--green); }
.stat.c-red { border-color: #8b0000; }
.stat.c-blue { border-color: #1515c9; }
.section-title { font-size: 1.15rem; font-weight: 400; border-bottom: 1px solid #333; padding-bottom: 4px; margin: 18px 0 12px; display: flex; justify-content: space-between; align-items: baseline; }
.people { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.person { background: #fff; border-left: 7px solid #111; box-shadow: 0 2px 5px rgba(0,0,0,.2); padding: 12px 14px; display: flex; gap: 12px; align-items: flex-start; text-decoration: none; color: var(--ink); }
.person .pr { flex: 1; text-align: right; }
.person .cnt { font-size: 1.6rem; font-weight: 300; }
.person .sales { color: var(--green); font-size: 1.3rem; }
.person .sub { color: #555; font-style: italic; font-size: .85rem; margin-right: 6px; }
.person .nm { color: #555; letter-spacing: .06em; font-size: .85rem; }
.bars { display: grid; gap: 6px; }
.bar { display: grid; grid-template-columns: 130px 1fr 70px; gap: 8px; align-items: center; font-size: .86rem; }
.bar .track { background: #eee; border-radius: 4px; height: 14px; overflow: hidden; }
.bar .fill { height: 100%; background: var(--blue); border-radius: 4px; }
.dash-cols { display: grid; grid-template-columns: 2fr 1fr; gap: 14px; }
.today-list { list-style: none; margin: 0; padding: 0; }
.today-list li { display: flex; gap: 10px; padding: 8px 4px; border-bottom: 1px solid #eee; align-items: center; }
.today-list li:last-child { border-bottom: 0; }
.today-list .t { font-weight: 700; width: 70px; flex: none; font-size: .85rem; }
.today-list a { text-decoration: none; color: var(--ink); flex: 1; min-width: 0; }
.today-list .s { color: var(--muted); font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- jobs list ---------- */
.jl-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.jl-top .count { font-weight: 700; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { display: inline-flex; gap: 6px; align-items: center; padding: 4px 10px; border-radius: 16px; border: 1px solid #a9a39a; background: #fff; cursor: pointer; font: inherit; font-size: .84rem; min-height: 32px; }
.chip.on { background: var(--navy2); color: #fff; border-color: var(--navy); }
.chip .n { background: rgba(0,0,0,.12); border-radius: 9px; padding: 0 6px; font-size: .75rem; }
.chip .sw { width: 10px; height: 10px; border-radius: 50%; border: 1px solid rgba(0,0,0,.3); }
.jobs-tbl td.dt { background: #8f3329; color: #fff; white-space: nowrap; font-size: .82rem; }
.jobs-tbl td.dt .ap { color: #ffd54a; display: block; }
.jobs-tbl td.age { white-space: nowrap; font-weight: 700; }
.jobs-tbl td .ph { display: block; color: #333; }
.jobs-tbl td .ct { display: block; color: var(--blue2); font-weight: 700; }
.jobs-tbl td.notes { max-width: 220px; color: #333; }
.jobs-tbl td.notes span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.jobs-tbl td.metro { color: #8a1c15; font-weight: 700; }
.jobs-tbl td.metro small { display: block; color: #444; font-weight: 400; font-size: .72rem; }
.jobs-tbl td .tp { display: flex; align-items: center; gap: 6px; }
.jobs-tbl .flag { width: 12px; height: 12px; display: inline-block; clip-path: polygon(0 0, 100% 20%, 0 45%); margin-right: 2px; }
.jobs-tbl tr.grp td { text-align: left; padding: 9px 12px; }
.jobs-tbl tr.grp td .i { margin-right: 6px; }
.jcards { display: none; }
.jcard { display: block; background: #fff; border-radius: 8px; box-shadow: var(--shadow); margin-bottom: 8px; padding: 10px 12px; text-decoration: none; color: var(--ink); border-left: 6px solid #999; }
.jcard .l1 { display: flex; justify-content: space-between; gap: 8px; font-weight: 700; }
.jcard .l2, .jcard .l3 { font-size: .86rem; color: #444; margin-top: 2px; }
.jcard .l3 { display: flex; justify-content: space-between; gap: 6px; flex-wrap: wrap; }
.jgroup-h { font-weight: 700; padding: 8px 4px 6px; display: flex; gap: 6px; align-items: center; }

/* ---------- job form ---------- */
.job-head { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
.job-head .meta { display: flex; gap: 16px; flex-wrap: wrap; font-size: .9rem; }
.job-head .meta b { color: var(--red); }
.job-grid { display: grid; grid-template-columns: 1fr 1fr 300px; gap: 14px; }
.job-grid .colmap { grid-row: span 2; }
.mini-map { background: #dfe7d6; border: 1px solid #9aa; border-radius: 6px; height: 230px; position: relative; overflow: hidden; }
.mini-map svg { width: 100%; height: 100%; display: block; }
.swatches { display: flex; gap: 6px; flex-wrap: wrap; }
.swatch { width: 30px; height: 30px; border-radius: 5px; border: 1px solid rgba(0,0,0,.25); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; background: #fff; }
.swatch[aria-pressed=true] { outline: 3px solid var(--navy2); outline-offset: 1px; }
.swatch .flag { width: 16px; height: 16px; clip-path: polygon(10% 0, 100% 20%, 10% 50%, 10% 100%, 0 100%, 0 0); }
.paybtns { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0; }
.paylist { width: 100%; border-collapse: collapse; font-size: .9rem; }
.paylist td { padding: 4px 6px; border-bottom: 1px solid #ddd; }
.paylist input { width: 100%; min-height: 30px; padding: 3px 6px; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rates .rh { margin: 0 0 6px; background: var(--red); color: #fff; padding: 5px 8px; border-radius: 4px; font-size: .9rem; display: flex; gap: 6px; align-items: center; justify-content: center; }
.rates .rr { display: grid; grid-template-columns: 1fr 90px; gap: 4px; align-items: center; margin-bottom: 4px; font-size: .86rem; }
.rates .rr input { min-height: 28px; padding: 3px 6px; }
.totals { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; margin-top: 10px; }
.totals div { background: #fff; border-radius: 6px; padding: 8px 10px; box-shadow: var(--shadow); }
.totals b { display: block; font-size: 1.1rem; }
.totals span { font-size: .78rem; color: var(--muted); }
.comments { list-style: none; padding: 0; margin: 0 0 10px; }
.comments li { background: #fff; border-radius: 6px; padding: 8px 10px; margin-bottom: 6px; box-shadow: var(--shadow); }
.comments .ch { display: flex; justify-content: space-between; gap: 8px; font-size: .8rem; color: var(--muted); flex-wrap: wrap; }
.comments .ct { font-weight: 700; color: var(--blue2); }
.comments p { margin: 4px 0 0; white-space: pre-wrap; }
.actionbar { position: sticky; bottom: 0; background: rgba(233,229,220,.96); border-top: 1px solid var(--line); padding: 10px 0; display: flex; gap: 8px; justify-content: space-between; flex-wrap: wrap; z-index: 20; margin-top: 12px; }
.actionbar .grp { display: flex; gap: 8px; flex-wrap: wrap; }
.locked-note { background: #fff4d6; border: 1px solid #e5c56a; padding: 8px 10px; border-radius: 6px; margin-bottom: 10px; }
.dirty-dot { color: var(--orange); font-weight: 700; }

/* ---------- search ---------- */
.lbl-grid { display: grid; grid-template-columns: 140px minmax(0, 360px); gap: 6px 10px; align-items: center; }
.lbl-grid label { text-align: left; }


/* ---------- calendar ---------- */
.cal-bar { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.cal-title { font-size: 1.2rem; text-align: center; }
.cal-bar input[type=date] { min-height: 30px; padding: 3px 6px; }
.cal { background: #fff; border-radius: var(--r); box-shadow: var(--shadow); overflow: hidden; }
.cal.week, .cal.techs { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: #c9c3b6; }
.cal.techs { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.cal-col { background: #fff; min-height: 240px; padding: 4px; display: flex; flex-direction: column; gap: 4px; }
.cal-col.today { background: #fffbe6; }
.cal-ch { background: var(--blue); color: #fff; font-weight: 700; text-align: center; padding: 6px; border: 0; font: inherit; font-size: .9rem; cursor: pointer; border-radius: 3px; display: flex; gap: 6px; align-items: center; justify-content: center; }
.cal-ch .muted { color: #fff; }
div.cal-ch { cursor: default; }
.cj { display: block; border: 1px solid #5b87b8; border-radius: 4px; padding: 3px 5px; font-size: .78rem; text-decoration: none; color: #111; line-height: 1.25; overflow: hidden; }
.cj:hover { box-shadow: 0 1px 4px rgba(0,0,0,.35); color: #111; }
.cj span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cj-t { font-weight: 700; font-size: .72rem; }
.cj-a { font-weight: 600; }
.cj-tech { color: #8b1a10; font-weight: 700; }
.cal.month .cal-row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: #c9c3b6; }
.cal.month .cal-h div { background: var(--blue); color: #fff; text-align: center; font-weight: 700; padding: 5px; }
.cal-cell { background: #fff; min-height: 110px; padding: 3px; display: flex; flex-direction: column; gap: 3px; }
.cal-cell.other { background: #f4f2ee; opacity: .7; }
.cal-cell.today { background: #fffbe6; }
.cal-d { background: none; border: 0; text-align: left; font: inherit; font-weight: 700; cursor: pointer; padding: 2px; }
.cal.day .hour { display: grid; grid-template-columns: 70px 1fr; border-bottom: 1px solid #eee; min-height: 44px; }
.cal.day .hl { font-weight: 700; color: var(--muted); padding: 6px; border-right: 1px solid #eee; font-size: .85rem; }
.cal.day .hj { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 4px; padding: 4px; }

/* ---------- map ---------- */
.map-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 12px; align-items: start; }
.map-box { padding: 0; overflow: hidden; position: relative; }
.zoombtns { position: absolute; top: 8px; right: 8px; z-index: 2; display: flex; flex-direction: column; gap: 4px; }
.zoombtns .btn { width: 36px; font-size: 1.2rem; font-weight: 700; padding: 0; }
.zoomarea { overflow: auto; max-height: 70vh; }
.zoomarea svg { display: block; max-width: none; }
.map-box svg { width: 100%; height: auto; display: block; }
.map-box .pin:focus { outline: none; }
.map-box .pin:focus circle, .map-box .pin:hover circle { stroke: #000; stroke-width: 3; }
.map-side { max-height: 560px; overflow-y: auto; }
.map-list ol { list-style: none; padding: 0; margin: 0; }
.map-list li a { display: block; padding: 7px 8px; background: #fff; border-radius: 6px; margin-bottom: 5px; text-decoration: none; color: var(--ink); box-shadow: var(--shadow); }
.map-list li a.hl, .map-list li a:hover { outline: 2px solid var(--blue); }
.legend { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: .8rem; }
.legend i { display: inline-block; width: 11px; height: 11px; border-radius: 50%; margin-right: 4px; vertical-align: -1px; border: 1px solid #333; }

/* ---------- feeds (messages / activity) ---------- */
.day-h { text-align: center; font-size: 1.15rem; margin: 18px 0 10px; display: flex; gap: 6px; align-items: center; justify-content: center; }
.feed { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; max-width: 920px; margin: 0 auto 12px; align-items: start; }
.feed-av { padding-top: 6px; }
.feed-card { background: #fff; border-radius: 8px; box-shadow: 0 1px 4px rgba(0,0,0,.25); overflow: hidden; }
.feed-h { background: #dedede; padding: 7px 12px; display: flex; gap: 8px; align-items: center; }
.feed-h .muted { margin-left: auto; font-size: .82rem; }
.feed-h.act { background: #3b5a88; color: #fff; }
.feed-h.act .muted { color: #fff; }
.feed.out .feed-h { background: #dbe6f3; }
.feed-b { padding: 10px 12px; white-space: pre-wrap; }
.feed-b p { margin: 0 0 6px; }
.feed-b .who { color: #8b1a10; }
.feed-f { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 12px 10px; flex-wrap: wrap; }
.ok { color: var(--green); }
.act-job { display: flex; gap: 14px; flex-wrap: wrap; white-space: normal; margin-top: 6px; }
.act-map { width: 200px; height: 140px; border: 1px solid #555; border-radius: 4px; overflow: hidden; }
.act-map svg { width: 100%; height: 100%; }
.conv { margin: 0 auto 8px; max-width: 920px; }
.conv summary { cursor: pointer; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.bubble { max-width: 75%; margin: 8px 0; padding: 8px 12px; border-radius: 12px; background: #eee; }
.bubble.out { margin-left: auto; background: #dbe9fb; }
.bubble small { display: block; color: var(--muted); margin-top: 3px; }

/* ---------- documents ---------- */
.paper { background: #fff; padding: 20px; border-radius: 4px; box-shadow: var(--shadow); max-width: 1000px; margin: 0 auto; }
.paper-h { display: grid; grid-template-columns: 90px 1fr 140px; gap: 10px; align-items: center; margin-bottom: 14px; }
.paper-h h2 { margin: 0; }
.paper-h h3 { margin: 6px 0 0; font-size: 1.3rem; }
.paper-cust { margin-bottom: 12px; line-height: 2; }
.paper-cust input { min-height: 28px; padding: 2px 6px; }
.tbl.lines td { vertical-align: middle; }
.tbl.lines input { min-height: 30px; padding: 3px 6px; }
.doc-tot .big { font-size: 1.2rem; }

/* ---------- recordings ---------- */
.player { display: flex; align-items: center; gap: 6px; min-width: 180px; }
.pbar { flex: 1; height: 6px; background: #ddd; border-radius: 3px; overflow: hidden; }
.pbar i { display: block; height: 100%; width: 0; background: var(--blue); }
.pt { font-size: .8rem; color: var(--muted); width: 34px; }
@media (max-width: 1100px) {
  .map-layout { grid-template-columns: 1fr; }
  .map-side { max-height: none; }
  .cal.week { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .cal.week, .cal.techs { grid-template-columns: 1fr; }
  .cal-col { min-height: 0; }
  .cal-cell { min-height: 64px; }
  .cal.month .cj { display: none; }
  .cal.month .cal-cell .linkbtn { display: none; }
  .cal-title { width: 100%; order: -1; }
  .cal.day .hj { grid-template-columns: 1fr; }
  .feed { grid-template-columns: 1fr; }
  .feed-av { display: none; }
  .paper { padding: 10px; }
  .paper-h { grid-template-columns: 1fr; text-align: center; }
  .paper-h .right { text-align: center; }
}


/* ---------- reports ---------- */
.chart-wrap { position: relative; }
.chart { width: 100%; height: auto; display: block; }
.chart .hit { cursor: crosshair; }
.chart-wrap .tip { position: absolute; background: #1f2328; color: #fff; padding: 4px 8px; border-radius: 4px; font-size: .82rem; pointer-events: none; white-space: nowrap; }
.tbl.rpt td { vertical-align: middle; }


/* ---------- settings ---------- */
.slist { list-style: none; padding: 0; margin: 0; max-width: 760px; }
.slist li { display: flex; justify-content: space-between; align-items: center; gap: 8px; background: #fff; padding: 7px 10px; border-radius: 6px; margin-bottom: 5px; box-shadow: var(--shadow); flex-wrap: wrap; }
.sl-v { font-weight: 600; }
.fe { max-width: 900px; }
.fe-row { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 6px 14px; align-items: start; padding: 7px 0; border-bottom: 1px solid #f0ede6; }
.fe-row > label, .fe-row > .lbl { padding-top: 7px; font-weight: 600; font-size: .86rem; }
.fe-row input:not([type=checkbox]), .fe-row select, .fe-row textarea { width: 100%; max-width: 520px; }
.fe-h { font-size: 1.05rem; margin: 16px 0 4px; color: var(--blue); }
.checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px 12px; padding-top: 6px; }
.danger-zone { border-left: 5px solid var(--danger); max-width: 900px; }
.tbl .ok .i, .tbl .muted .i { width: .95em; }
/* ---------- help ---------- */
.help-grid { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 14px; align-items: start; }
.help-toc ul { list-style: none; padding: 0; margin: 0; }
.help-toc a { display: flex; gap: 8px; align-items: center; padding: 7px 6px; text-decoration: none; border-radius: 5px; }
.help-toc a:hover { background: #f1eee8; }
.help-item { margin-bottom: 10px; }
.help-item summary { cursor: pointer; list-style: none; }
.help-item summary::-webkit-details-marker { display: none; }
.help-item summary h2 { display: inline-flex; gap: 8px; align-items: center; margin: 0; }
.help-item[open] summary { margin-bottom: 8px; }
.prose { max-width: 820px; line-height: 1.6; }
.prose h2 { margin-top: 16px; }
@media (max-width: 760px) {
  .fe-row { grid-template-columns: 1fr; }
  .fe-row > label { padding-top: 0; }
  .help-grid { grid-template-columns: 1fr; }
  .help-toc { display: none; }
}

/* ---------- print ---------- */
@media print {
  body { background: #fff; }
  .topbar, .foot, .bottombar, .actionbar, .no-print, .drawer { display: none !important; }
  main { padding: 0; background: #fff; }
}

/* ---------- tablet ---------- */
@media (max-width: 1100px) {
  .tab span { display: none; }
  .tab { padding: 8px 12px; }
  .job-grid { grid-template-columns: 1fr 1fr; }
  .job-grid .colmap { grid-column: 1 / -1; grid-row: auto; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-cols { grid-template-columns: 1fr; }
  .g6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- phone ---------- */
@media (max-width: 760px) {
  :root { font-size: 16px; }
  body { padding-bottom: 64px; }
  .tb-in { align-items: center; padding: 6px 8px; }
  .tabs, .acct { display: none; }
  .brand { flex: 1; padding: 0; }
  .hamb { display: block; }
  .subtabs { border-radius: 0; padding: 6px 8px 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
  .stab { padding: 7px 11px; }
  main { padding: 12px 10px; }
  .grid.g2, .grid.g3, .grid.g4, .grid.g6, .split { grid-template-columns: 1fr; }
  .grid.g6.keep2, .grid.g4.keep2 { grid-template-columns: 1fr 1fr; }
  .span2, .span3 { grid-column: auto; }
  .stats, .stats.two { grid-template-columns: 1fr 1fr; gap: 8px; }
  .stat { padding: 10px; }
  .stat .v { font-size: 1.45rem; }
  .stat .l { font-size: .78rem; }
  .job-grid { grid-template-columns: 1fr; }
  .lbl-grid { grid-template-columns: 1fr; }
  .bar { grid-template-columns: 90px 1fr 60px; }
  .jobs-tbl-wrap { display: none; }
  .ftoggle { justify-content: flex-start; margin-bottom: 10px; background: var(--paper2); }
  .ftoggle small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #j-chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
  .chip { flex: none; }
  .jl-top input[type=search] { min-width: 0 !important; flex: 1; }
  .jl-top > .row:first-child { width: 100%; }
  .jcards { display: block; }
  input, select, textarea, .ms > button { min-height: 42px; font-size: 16px; }
  .btn { min-height: 42px; }
  .btn.sm { min-height: 36px; }
  .tbl { font-size: .84rem; }
  .bottombar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; background: var(--navy); z-index: 40; justify-content: space-around; padding: 4px 2px calc(4px + env(safe-area-inset-bottom)); box-shadow: 0 -2px 8px rgba(0,0,0,.3); }
  .bottombar a { color: #cfd8e1; text-decoration: none; display: flex; flex-direction: column; align-items: center; font-size: .7rem; gap: 2px; padding: 4px 6px; min-width: 56px; }
  .bottombar a .i { width: 22px; height: 22px; }
  .bottombar a.on { color: #fff; }
  .bottombar a.bb-add { color: #fff; }
  .bottombar a.bb-add .i { background: var(--red); border-radius: 50%; padding: 4px; width: 32px; height: 32px; margin-top: -10px; box-shadow: 0 2px 6px rgba(0,0,0,.4); }
  .actionbar { bottom: 58px; margin: 12px -10px 0; padding: 6px 8px; flex-wrap: nowrap; gap: 6px; }
  .actionbar .grp { flex-wrap: nowrap; gap: 4px; }
  .actionbar .grp:first-child .btn { padding: 4px 8px; font-size: .78rem; min-height: 40px; flex-direction: column; gap: 1px; }
  .actionbar .grp:last-child { flex: 1; }
  .actionbar .grp:last-child .btn { flex: 1; min-height: 44px; }
  .chart-wrap { overflow-x: auto; }
  .chart-wrap svg { min-width: 640px; }
  .phead h1 { font-size: 1.25rem; }
  .modal-bg { padding: 0; align-items: stretch; }
  .modal { border-radius: 0; min-height: 100%; }
  .mh { border-radius: 0; }
  .toast { bottom: 76px; }
  .foot { padding-bottom: 20px; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }
/* ---- API-backed UI: loading states, notes, changelogs ---- */
.boot{min-height:70vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:#555}
.boot .logo-big{width:72px;height:72px}
.loading-box{padding:40px 10px}
.spin{display:inline-block;width:26px;height:26px;border:3px solid #d0d5dd;border-top-color:#ad4136;border-radius:50%;animation:amspin .8s linear infinite}
@keyframes amspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spin{animation:none}}
.stale{opacity:.55;transition:opacity .15s}
html.loading body{cursor:progress}
.pre{white-space:pre-wrap;word-break:break-word}
.comments li details{margin-top:6px}
.comments li summary{cursor:pointer;color:#4367a3;font-size:.9em}
table.changelog{font-size:.85em}
table.changelog td{vertical-align:top;max-width:420px}
.rpt-sect{margin:8px 0;padding:8px 12px}
.rpt-sect>summary{cursor:pointer;padding:4px 0}
.chart-scroll{overflow-x:auto}
.ok{color:#2f6e52}
.import-banner{background:#fff4d6;border-bottom:1px solid #e8d48a;padding:6px 14px;font-size:.9em;text-align:center}