/* Turan Shop — styles. Navy & steel from the original Turan design. */
:root {
  --navy: #16263a; --navy-2: #1f3550; --steel: #285a89; --steel-2: #1f4a72; --sky: #6fa8d8;
  --ink: #1b2a3c; --muted: #6b7b8e; --line: #dfe5ec; --paper: #eef2f6; --card: #fff;
  --green: #1f8a5b; --green-bg: #e3f4ec; --amber: #a86b00; --amber-bg: #fdf1d8; --red: #c0392b; --red-bg: #fbe7e4;
  --blue: #285a89; --blue-bg: #e4eef8; --violet: #6b4bb5; --violet-bg: #efe9fb; --teal: #12807f; --teal-bg: #def3f2; --gray: #5d6b7b; --gray-bg: #edf0f3;
  --radius: 10px; --shadow: 0 1px 2px rgba(16, 30, 46, .06), 0 2px 8px rgba(16, 30, 46, .05);
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font: 14px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; }
body.no-scroll { overflow: hidden; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
button:disabled { cursor: not-allowed; opacity: .55; }
a { color: var(--steel); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 3px solid #8dbbe4; outline-offset: 2px; }
h1, h2, h3 { margin: 0; line-height: 1.2; }
small { font-size: 12px; }
.muted { color: var(--muted); }
.danger { color: var(--red); }
.warn-text { color: var(--amber); }
.right { margin-left: auto; text-align: right; }
.spacer { flex: 1; }
.pad { padding: 12px 16px; margin: 0; }
.small { font-size: 12px; }
.icon { flex-shrink: 0; }
.icon.flip { transform: scaleX(-1); }
.clip { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 360px; }

/* ── Buttons ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 38px; padding: 0 14px; border-radius: 8px; font-weight: 600; white-space: nowrap; border: 1px solid transparent; transition: background .15s, border-color .15s; }
.btn.primary { background: var(--steel); color: #fff; }
.btn.primary:hover:not(:disabled) { background: var(--steel-2); }
.btn.secondary { background: #fff; border-color: var(--line); color: var(--ink); }
.btn.secondary:hover:not(:disabled) { border-color: #b9c6d4; background: #f8fafc; }
.btn.ghost { color: var(--steel); height: 32px; padding: 0 10px; }
.btn.ghost:hover { background: var(--blue-bg); }
.btn.danger { background: #fff; border-color: #efc4be; color: var(--red); }
.btn.danger:hover:not(:disabled) { background: var(--red-bg); }
.btn.big { height: 54px; font-size: 15px; border-radius: 12px; }
.btn.huge { height: 72px; font-size: 20px; width: 100%; border-radius: 16px; }
.btn.danger.huge { background: var(--red); color: #fff; }
.btn.danger.huge:hover:not(:disabled) { background: #a93226; }
.btn.full { width: 100%; }
.icon-btn { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; color: var(--muted); }
.icon-btn:hover:not(:disabled) { background: var(--gray-bg); color: var(--ink); }
.icon-btn.light { color: #b8c6d4; }
.icon-btn.light:hover { background: #ffffff14; color: #fff; }
.link { color: var(--steel); font-weight: 600; text-align: left; }
.link:hover:not(:disabled) { text-decoration: underline; }
.row-actions { display: inline-flex; gap: 2px; align-items: center; justify-content: flex-end; width: 100%; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.chip { height: 32px; padding: 0 12px; border-radius: 99px; border: 1px solid var(--line); background: #fff; font-weight: 600; font-size: 13px; }
.chip.on { background: var(--navy); color: #fff; border-color: var(--navy); }

/* ── Badges ── */
.badge { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 99px; font-size: 11.5px; font-weight: 700; white-space: nowrap; text-transform: capitalize; }
.badge.blue { background: var(--blue-bg); color: var(--blue); } .badge.green { background: var(--green-bg); color: var(--green); }
.badge.amber { background: var(--amber-bg); color: var(--amber); } .badge.red { background: var(--red-bg); color: var(--red); }
.badge.violet { background: var(--violet-bg); color: var(--violet); } .badge.teal { background: var(--teal-bg); color: var(--teal); }
.badge.gray { background: var(--gray-bg); color: var(--gray); }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); flex-shrink: 0; }
.dot.green { background: #2fbf7f; }

/* ── Auth ── */
.auth { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; background: radial-gradient(circle at 30% 0%, #2b4a6e, var(--navy) 60%); }
.auth-card { width: 100%; max-width: 400px; background: #fff; border-radius: 16px; padding: 28px; box-shadow: 0 20px 60px rgba(0, 0, 0, .3); }
.auth-card h1 { font-size: 22px; margin-top: 20px; }
.auth-card p { color: var(--muted); margin: 6px 0 18px; }
.auth-logo { display: block; width: 100%; max-width: 300px; height: auto; margin: 0 auto 4px; }
.brand-mark strong { display: block; font: 700 34px Georgia, serif; letter-spacing: 4px; color: var(--navy); }
.brand-mark span { font-size: 10px; font-weight: 700; letter-spacing: 2px; color: var(--muted); }

/* ── Office shell ── */
.shell { display: flex; min-height: 100vh; }
.sidebar { position: fixed; inset: 0 auto 0 0; width: 240px; background: linear-gradient(160deg, var(--navy-2), var(--navy)); color: #c9d5e1; display: flex; flex-direction: column; z-index: 30; transition: transform .2s; }
.brand { padding: 16px 14px; border-bottom: 1px solid #ffffff14; }
.brand img { display: block; width: 100%; height: auto; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .35)); }
.brand strong { display: block; font: 700 32px Georgia, serif; letter-spacing: 4px; color: #fff; }
.brand span { font-size: 9px; font-weight: 700; letter-spacing: 2px; color: #93a7bb; }
.sidebar nav { padding: 14px 10px; display: grid; gap: 3px; overflow-y: auto; }
.sidebar nav a { display: flex; align-items: center; gap: 12px; height: 42px; padding: 0 14px; border-radius: 8px; color: #c9d5e1; font-weight: 500; text-decoration: none; }
.sidebar nav a:hover { background: #ffffff0f; color: #fff; }
.sidebar nav a.active { background: linear-gradient(90deg, #376389, #2a4c6c); color: #fff; box-shadow: inset 3px 0 var(--sky); }
.sidebar-foot { margin-top: auto; padding: 16px 18px; border-top: 1px solid #ffffff14; display: flex; align-items: center; gap: 10px; }
.who { flex: 1; min-width: 0; } .who b { display: block; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .who small { color: #93a7bb; }
.main { flex: 1; margin-left: 240px; min-width: 0; }
.topbar { display: none; }
.content { padding: 28px 32px 60px; max-width: 1400px; }
.scrim { display: none; }

.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.page-head h1 { font-size: 26px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.page-head p { color: var(--muted); margin: 6px 0 0; }
.back { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; margin-bottom: 8px; color: var(--muted); }

/* ── Cards / panels ── */
.panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 18px; overflow: hidden; }
.panel .panel { box-shadow: none; border: 0; border-top: 1px solid var(--line); border-radius: 0; margin: 0; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.panel-head h3 { font-size: 15px; }
.stack > .panel:last-child { margin-bottom: 18px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.grid-2.wide-left { grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); }
.grid-2 > * { min-width: 0; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 18px; }
.stat { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 2px; }
.stat span { font-size: 12px; font-weight: 600; color: var(--muted); }
.stat strong { font-size: 22px; letter-spacing: -.3px; }
.stat small { color: var(--muted); }
.stat.warn { border-color: #efc9a0; background: linear-gradient(#fff, #fffaf1); }
.stat.clickable { cursor: pointer; } .stat.clickable:hover { border-color: #b9c6d4; }

.alerts { display: grid; gap: 8px; margin-bottom: 18px; }
.alert { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 9px; font-weight: 600; text-align: left; border: 1px solid; }
.alert span { margin-left: auto; font-size: 13px; opacity: .8; white-space: nowrap; }
.alert.red { background: var(--red-bg); color: var(--red); border-color: #f2c7c1; }
.alert.amber { background: var(--amber-bg); color: var(--amber); border-color: #f1d9a6; }
.alert.blue { background: var(--blue-bg); color: var(--blue); border-color: #c9dbee; }
.status-strip { display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; }
.status-strip button { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--line); border-radius: 9px; padding: 8px 12px; }
.status-strip b { font-size: 16px; }

.note-bar, .hint-bar { display: flex; gap: 8px; align-items: center; padding: 10px 14px; background: var(--blue-bg); color: var(--blue); border-radius: 8px; margin-bottom: 14px; font-weight: 500; }
.hint-bar { margin: 12px 16px 0; font-size: 13px; }
.note-bar.warn, .hint-bar.warn { background: var(--amber-bg); color: var(--amber); }

/* ── Tables ── */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); font-weight: 700; padding: 10px 14px; background: #f7f9fb; border-bottom: 1px solid var(--line); white-space: nowrap; }
td { padding: 11px 14px; border-bottom: 1px solid #edf1f5; vertical-align: middle; }
td small { display: block; }
tr:last-child td { border-bottom: 0; }
tr.clickable { cursor: pointer; } tr.clickable:hover td { background: #f6f9fc; }
.empty { padding: 28px 16px; text-align: center; color: var(--muted); }
.loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 48px; color: var(--muted); }
.spinner { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--steel); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.error-box { display: flex; align-items: center; gap: 8px; background: var(--red-bg); color: var(--red); padding: 10px 14px; border-radius: 8px; margin: 0 0 14px; font-weight: 500; }
.error-box .link { margin-left: auto; color: var(--red); }

.list { list-style: none; margin: 0; padding: 4px 0; }
.list li { display: flex; align-items: center; gap: 10px; padding: 9px 16px; border-bottom: 1px solid #edf1f5; flex-wrap: wrap; }
.list li:last-child { border-bottom: 0; }
.list li.clickable { cursor: pointer; } .list li.clickable:hover { background: #f6f9fc; }
.list.small li { font-size: 13px; padding: 7px 16px; }

/* ── Toolbar / tabs / search ── */
.toolbar { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.toolbar select, .toolbar input[type=date], .kv select { height: 38px; border: 1px solid var(--line); border-radius: 8px; padding: 0 10px; background: #fff; }
.toolbar-title { display: flex; align-items: center; gap: 8px; font-size: 16px; }
.inline { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-weight: 600; font-size: 13px; }
.search { display: flex; align-items: center; gap: 8px; height: 38px; border: 1px solid var(--line); background: #fff; border-radius: 8px; padding: 0 12px; flex: 1; max-width: 420px; min-width: 200px; color: var(--muted); }
.search input { border: 0; outline: 0; flex: 1; min-width: 0; background: transparent; color: var(--ink); height: 100%; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 16px; overflow-x: auto; }
.tabs button { padding: 10px 14px; font-weight: 600; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tabs button.on { color: var(--steel); border-color: var(--steel); }

/* ── Forms / modal ── */
.overlay { position: fixed; inset: 0; background: rgba(12, 22, 34, .55); display: grid; place-items: center; z-index: 100; padding: 16px; overflow-y: auto; }
.modal { background: #fff; border-radius: 14px; width: 100%; max-width: 560px; box-shadow: 0 24px 60px rgba(0, 0, 0, .3); max-height: calc(100vh - 32px); display: flex; flex-direction: column; }
.modal.wide { max-width: 860px; }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.modal-head h2 { font-size: 18px; }
.modal > .form, .modal > .picker, .modal > .picker-qty { overflow-y: auto; }
.form-body { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; padding: 18px; }
.panel .form-body { padding: 16px; }
.form > .error-box { margin: 0 18px 12px; }
.form-foot { display: flex; gap: 8px; padding: 14px 18px; border-top: 1px solid var(--line); background: #fafbfc; border-radius: 0 0 14px 14px; align-items: center; }
.panel .form-foot { border-radius: 0; }
.field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.field.full, .full { grid-column: 1 / -1; }
.field > span { font-size: 12.5px; font-weight: 600; color: #3d4d5f; }
.field input, .field select, .field textarea, .notes { width: 100%; border: 1px solid #cfd8e2; border-radius: 8px; padding: 9px 11px; background: #fff; min-height: 40px; }
.field textarea, .notes { resize: vertical; min-height: 64px; }
.field input:focus, .field select:focus, .field textarea:focus, .notes:focus { border-color: var(--steel); outline: 0; box-shadow: 0 0 0 3px #285a8922; }
.field small { color: var(--muted); }
.field input:disabled, .field textarea:disabled { background: #f4f6f8; }
.affix { display: flex; align-items: center; border: 1px solid #cfd8e2; border-radius: 8px; background: #fff; }
.affix em { font-style: normal; color: var(--muted); padding-left: 11px; }
.affix input { border: 0 !important; box-shadow: none !important; }
.check { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.check input { width: 18px; height: 18px; }
.form-note { color: var(--muted); font-size: 13px; margin: 0; }
.notes { display: block; margin: 0; border-radius: 0; border: 0; padding: 14px 16px; }
.panel .actions { padding: 0 16px 14px; }
.panel-head .actions { padding: 0; }

.kv { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding: 16px; border-bottom: 1px solid var(--line); }
.kv > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.kv small { color: var(--muted); font-weight: 600; font-size: 11.5px; text-transform: uppercase; letter-spacing: .4px; }
.kv select { width: 100%; }
.three-c { padding: 14px 16px; display: grid; gap: 10px; }
.three-c .actions { padding: 0; }
.totals { display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; padding: 16px; margin: 0; }
.totals dt { color: #3d4d5f; } .totals dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.totals .grand { font-weight: 800; font-size: 16px; padding-top: 8px; border-top: 1px solid var(--line); }
td, .totals dd, .stat strong { font-variant-numeric: tabular-nums; }

/* picker */
.picker { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.picker .search { max-width: none; height: 46px; }
.pick-list { list-style: none; margin: 0; padding: 0; max-height: 52vh; overflow-y: auto; border: 1px solid var(--line); border-radius: 10px; }
.pick-list li { border-bottom: 1px solid #edf1f5; } .pick-list li:last-child { border-bottom: 0; }
.pick-list button { display: flex; width: 100%; text-align: left; padding: 12px 14px; gap: 12px; align-items: center; justify-content: space-between; min-height: 56px; }
.pick-list button:hover { background: #f6f9fc; }
.pick-list small { display: block; color: var(--muted); }
.stock { font-weight: 700; color: var(--green); white-space: nowrap; }
.stock.out { color: var(--red); }
.picker-qty { padding: 18px 18px 0; }
.picked { padding: 14px; background: var(--blue-bg); border-radius: 10px; margin-bottom: 16px; } .picked small { display: block; color: var(--muted); }
.qty-picker { display: grid; grid-template-columns: 64px minmax(0, 1fr) 64px; gap: 10px; margin-bottom: 14px; }
.qty-picker input { width: 100%; min-width: 0; text-align: center; font-size: 26px; font-weight: 700; border: 1px solid #cfd8e2; border-radius: 12px; height: 54px; }
.qty-picker .btn { font-size: 26px; }
.picker-qty .form-foot { margin: 0 -18px; }
.picker-qty .hint-bar { margin: 0 0 14px; }

/* photos */
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; padding: 12px 16px; }
.photo { position: relative; aspect-ratio: 1; border-radius: 8px; overflow: hidden; background: var(--gray-bg); }
.photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-tag { position: absolute; left: 6px; bottom: 6px; background: rgba(22, 38, 58, .85); color: #fff; font-size: 10.5px; font-weight: 700; padding: 2px 6px; border-radius: 4px; }
.photo-tag.open { background: var(--amber); }
.lightbox { flex-direction: column; gap: 12px; cursor: zoom-out; display: flex; justify-content: center; align-items: center; }
.lightbox img { max-width: 100%; max-height: 82vh; border-radius: 8px; }
.lightbox-cap { color: #fff; text-align: center; } .lightbox-cap small { display: block; opacity: .7; }
.review-list { display: grid; }
.review-item { display: flex; gap: 14px; align-items: center; padding: 8px 16px 8px 0; border-bottom: 1px solid #edf1f5; flex-wrap: wrap; }
.review-item .photo-grid { width: 130px; grid-template-columns: 1fr; padding: 8px 0 8px 16px; }
.review-item .grow { flex: 1; min-width: 180px; } .review-item small { display: block; }
.grow { flex: 1; min-width: 0; }

/* reports */
.bars { padding: 16px; display: grid; gap: 8px; }
.bar-row { display: grid; grid-template-columns: 56px 1fr 100px; gap: 10px; align-items: center; font-size: 13px; }
.bar-row b { text-align: right; }
.bar { display: flex; height: 18px; background: var(--gray-bg); border-radius: 4px; overflow: hidden; }
.bar i, .legend i { display: block; height: 100%; }
.bar .labor, .legend .labor { background: var(--steel); } .bar .parts, .legend .parts { background: var(--sky); }
.legend { display: flex; gap: 16px; font-size: 12px; color: var(--muted); margin-top: 6px; }
.legend span { display: flex; align-items: center; gap: 6px; } .legend i { width: 12px; height: 12px; border-radius: 3px; }

/* invoice sheet */
.invoice-sheet { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 36px 40px; margin-bottom: 18px; box-shadow: var(--shadow); overflow: hidden; }
.invoice-sheet header { display: flex; justify-content: space-between; gap: 24px; border-bottom: 3px solid var(--navy); padding-bottom: 18px; flex-wrap: wrap; }
.inv-brand { max-width: 340px; }
.inv-logo { display: block; width: 260px; max-width: 100%; height: auto; }
.inv-pay { background: var(--blue-bg); padding: 10px 14px; border-radius: 8px; }
.paid-stamp { position: absolute; top: 120px; left: 50%; transform: translateX(-50%) rotate(-14deg); font: 800 100px Arial; color: rgba(31, 138, 91, .14); border: 10px solid rgba(31, 138, 91, .14); padding: 0 30px; pointer-events: none; }
.invoice-sheet h2 { font: 700 22px Georgia, serif; color: var(--navy); }
.invoice-sheet header p { margin: 6px 0 0; color: #3d4d5f; }
.inv-meta { text-align: right; } .inv-meta h3 { font-size: 22px; letter-spacing: 3px; color: var(--steel); } .inv-meta p { margin: 6px 0 0; }
.inv-parties { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 20px 0; }
.inv-parties small { display: block; font-weight: 700; letter-spacing: 1px; color: var(--muted); margin-bottom: 4px; }
.inv-parties b { font-size: 15px; } .inv-parties p { margin: 4px 0 0; color: #3d4d5f; }
.inv-3c { background: #f6f8fa; border-radius: 8px; padding: 12px 16px; margin-bottom: 16px; } .inv-3c p { margin: 4px 0; }
.inv-table { margin-bottom: 14px; } .inv-table th:not(:first-child), .inv-table td:not(:first-child) { text-align: right; width: 110px; }
.inv-table small { display: inline; }
.inv-totals { max-width: 320px; margin-left: auto; padding: 8px 0; }
.inv-notes { white-space: pre-wrap; color: #3d4d5f; border-top: 1px solid var(--line); padding-top: 12px; }
.invoice-sheet footer { text-align: center; color: var(--muted); margin-top: 24px; font-style: italic; }
.void-stamp { position: absolute; top: 120px; left: 50%; transform: translateX(-50%) rotate(-18deg); font: 800 110px Arial; color: rgba(192, 57, 43, .15); border: 10px solid rgba(192, 57, 43, .15); padding: 0 30px; pointer-events: none; }

/* toast */
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--navy); color: #fff; padding: 12px 18px; border-radius: 10px; display: flex; gap: 10px; align-items: center; font-weight: 600; z-index: 200; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); animation: pop .2s ease-out; max-width: calc(100vw - 32px); }
.toast.err { background: var(--red); }
.floor ~ .toast { bottom: calc(90px + env(safe-area-inset-bottom)); }
.modal { min-width: 0; overflow-x: hidden; }
@keyframes pop { from { transform: translate(-50%, 10px); opacity: 0; } }

/* ── Money ── */
.money-strip { display: grid; gap: 12px; margin-bottom: 18px; }
.money-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.money-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow); text-align: left; display: flex; flex-direction: column; gap: 4px; }
.money-card:hover { border-color: #b9c6d4; }
.money-card small { font-weight: 600; color: var(--muted); font-size: 12px; }
.money-card strong { font-size: 22px; }
.money-card span { font-size: 12.5px; }
.target { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 20px; border-radius: 12px; border: 1px solid; flex-wrap: wrap; margin-bottom: 0; }
.target small { font-weight: 700; text-transform: uppercase; letter-spacing: .5px; font-size: 11px; opacity: .8; }
.target strong { display: block; font-size: 26px; }
.target strong span { font-size: 14px; font-weight: 600; opacity: .75; }
.target p { margin: 2px 0 0; }
.target.good { background: var(--green-bg); border-color: #b6e2cb; color: #145c3d; }
.target.short { background: var(--amber-bg); border-color: #f1d9a6; color: #7a4e00; }
.target.off { background: var(--gray-bg); border-color: var(--line); color: var(--gray); }
.target-side { text-align: right; } .target-side b { display: block; font-size: 18px; }
.money-strip > .target { margin-bottom: 0; }
.stats + .panel, .target + .stats { margin-top: 0; }
.target { margin-bottom: 18px; }
.money-strip .target { margin-bottom: 0; }
.progress-block { display: grid; gap: 6px; }
.progress-head { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.meter { height: 10px; border-radius: 99px; background: var(--gray-bg); overflow: hidden; }
.meter i { display: block; height: 100%; background: var(--amber); border-radius: 99px; }
.meter i.good { background: var(--green); }
.pl dt.muted, .pl dd.muted { font-size: 13px; }
.daybars { position: relative; display: flex; align-items: flex-end; gap: 3px; height: 200px; padding: 16px 16px 8px; }
.daybar { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; gap: 4px; min-width: 0; }
.daybar i { width: 100%; max-width: 22px; border-radius: 3px 3px 0 0; min-height: 2px; }
.daybar i.good { background: var(--green); } .daybar i.short { background: #e3a33a; }
.daybar.off i { background: var(--line); }
.daybar small { font-size: 10px; color: var(--muted); }
.daybar.today small { color: var(--ink); font-weight: 800; }
.target-line { position: absolute; left: 16px; right: 16px; border-top: 2px dashed var(--steel); pointer-events: none; }
.target-line span { position: absolute; right: 0; top: -20px; font-size: 11px; font-weight: 700; color: var(--steel); background: #fff; padding: 0 4px; }
.legend-inline { display: flex; gap: 12px; align-items: center; font-size: 12px; color: var(--muted); flex-wrap: wrap; }
.legend-inline i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: -6px; }
.legend-inline .bar-good { background: var(--green); } .legend-inline .bar-short { background: #e3a33a; }
.legend-inline .line { width: 14px; height: 0; border-top: 2px dashed var(--steel); border-radius: 0; }
.month-pick b { min-width: 130px; text-align: center; }
.mx { margin: 0 16px 16px; }
.kv.flat { border: 0; padding: 0; }
.seg-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.seg-choice button { height: 40px; border: 1px solid #cfd8e2; border-radius: 8px; font-weight: 600; background: #fff; }
.seg-choice button.on { background: var(--steel); color: #fff; border-color: var(--steel); }
.receive-total { display: flex; justify-content: space-between; padding: 10px 12px; background: var(--blue-bg); border-radius: 8px; }
.form-sub { margin: 8px 0 -4px; font-size: 12px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); }

/* ── Attendance ── */
.att-wrap { overflow-x: auto; }
table.att { min-width: 860px; }
.att th { text-align: center; } .att th:first-child { text-align: left; }
.att th small { display: block; font-size: 15px; color: var(--ink); text-transform: none; letter-spacing: 0; }
.att th.off, td.att-cell.off { background: #f3f5f7; }
.att th.today { color: var(--steel); } .att th.today small { color: var(--steel); }
td.att-cell { padding: 4px; text-align: center; vertical-align: top; }
td.att-cell.today { background: #f1f7fd; }
td.att-cell button { width: 100%; min-height: 58px; border-radius: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 4px; }
td.att-cell button:hover:not(:disabled) { background: #eaf1f8; }
td.att-cell button:disabled { opacity: 1; cursor: default; }
.att-empty { color: #9aa8b8; font-size: 12px; font-weight: 600; }
.att-extra { font-size: 11px; font-weight: 800; color: var(--green); }
.clip1 { max-width: 90px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
td.att-sum { min-width: 130px; } td.att-sum b { display: block; }
.status-pick { display: flex; flex-wrap: wrap; gap: 6px; }
.status-pick button { padding: 8px 12px; border-radius: 99px; border: 1px solid var(--line); font-weight: 600; background: #fff; }
.status-pick button.on.st-green { background: var(--green); border-color: var(--green); color: #fff; }
.status-pick button.on.st-amber { background: var(--amber); border-color: var(--amber); color: #fff; }
.status-pick button.on.st-red { background: var(--red); border-color: var(--red); color: #fff; }
.status-pick button.on.st-blue { background: var(--blue); border-color: var(--blue); color: #fff; }
.status-pick button.on.st-gray { background: var(--gray); border-color: var(--gray); color: #fff; }

/* ── Super admin ── */
.platform { min-height: 100vh; background: var(--paper); }
.platform-top { position: sticky; top: 0; z-index: 20; display: flex; justify-content: space-between; align-items: center; padding: 10px max(16px, env(safe-area-inset-right, 0px)) 10px max(16px, env(safe-area-inset-left, 0px)); background: #0f1724; color: #fff; }
.platform-top .muted { color: #9fb2c6; } .platform-top .icon-btn { color: #c9d5e1; }
.platform-mark { display: flex; align-items: center; gap: 10px; }
.platform-mark span { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: linear-gradient(135deg, #3a7bd5, #6fa8d8); color: #fff; font-weight: 800; font-size: 18px; }
.platform-mark b { font-size: 18px; letter-spacing: .3px; }
.platform-mark em { font-style: normal; font-size: 12px; color: #9fb2c6; border: 1px solid #ffffff2e; padding: 2px 8px; border-radius: 99px; }
.auth-card .platform-mark b { color: var(--ink); }
.platform-main { margin: 0 auto; }
.platform-auth { background: radial-gradient(circle at 70% 0%, #2a3f63, #0f1724 60%); }
code.addr { font-size: 12px; background: var(--gray-bg); padding: 2px 6px; border-radius: 4px; }

/* ── Customer portal ── */
.portal { min-height: 100vh; background: var(--paper); display: flex; flex-direction: column; }
.portal-top { position: sticky; top: 0; z-index: 20; background: #fff; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 16px; padding: 10px 24px; box-shadow: var(--shadow); }
.portal-logo img { display: block; height: 52px; width: auto; }
.portal-who { margin-left: auto; text-align: right; min-width: 0; } .portal-who b { display: block; } .portal-who small { color: var(--muted); }
.portal-actions { display: flex; gap: 6px; align-items: center; }
.portal-actions a.btn { text-decoration: none; }
.portal-main { width: 100%; max-width: 1180px; margin: 0 auto; padding: 26px 24px 40px; flex: 1; }
.portal-foot { text-align: center; color: var(--muted); font-size: 12px; padding: 18px; }
.portal-auth { background: radial-gradient(circle at 30% 0%, #2f6aa3, var(--navy) 65%); }
.portal .panel .tabs { padding: 0 12px; margin-bottom: 0; }
.panel-head select { height: 34px; border: 1px solid var(--line); border-radius: 8px; padding: 0 8px; background: #fff; }
.shop-now { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; padding: 14px 16px; }
.shop-job { border: 1px solid var(--line); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 6px; }
.shop-job p { margin: 0; }
.shop-job .unit { font-size: 17px; }
.progress { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.progress i { height: 6px; border-radius: 3px; background: var(--gray-bg); }
.progress i.on { background: var(--steel); }
.block { display: block; }
.list li.selected { background: var(--blue-bg); }
.list li > span:first-child:not(.dot) { min-width: 0; flex: 1; }
.logo-preview { padding: 16px; background: #fff; display: flex; justify-content: center; border-bottom: 1px solid var(--line); }
.logo-preview img { max-width: 100%; max-height: 140px; }
@media (max-width: 640px) {
  .portal-top { padding: 8px 12px; gap: 10px; }
  .portal-logo img { height: 40px; }
  .portal-who small { display: none; }
  .hide-sm { display: none; }
  .portal-main { padding: 16px 12px 32px; }
}

/* ── Shop floor (mechanic) app ── */
.floor { min-height: 100vh; background: var(--paper); padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
.floor-top { position: sticky; top: 0; z-index: 20; background: var(--navy); color: #fff; display: flex; align-items: center; justify-content: space-between; padding: calc(10px + env(safe-area-inset-top)) 16px 10px; }
.floor-brand { display: flex; align-items: center; gap: 10px; }
.floor-brand img { width: 38px; height: 38px; border-radius: 9px; display: block; }
.floor-top strong { font: 700 20px Georgia, serif; letter-spacing: 3px; display: block; } .floor-top small { color: #9fb2c6; }
.clock-chip { display: flex; align-items: center; gap: 8px; background: #ffffff14; color: #d6e1ec; padding: 8px 12px; border-radius: 99px; font-weight: 600; font-size: 13px; }
.clock-chip .dot { background: #8494a6; } .clock-chip.on { background: #1f8a5b33; color: #b9f0d5; } .clock-chip.on .dot { background: #34d399; box-shadow: 0 0 0 3px #34d39944; }
.floor-main { padding: 14px 14px 24px; max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.floor-main .search { max-width: none; height: 48px; font-size: 16px; }
.floor-main .search input { font-size: 16px; }
.floor-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: grid; grid-template-columns: repeat(5, 1fr); background: #fff; border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); }
.floor-nav a { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 9px 0 8px; color: var(--muted); font-size: 11.5px; font-weight: 600; text-decoration: none; }
.floor-nav a.on { color: var(--steel); }
.floor-h1 { font-size: 22px; }
.seg { display: grid; grid-template-columns: 1fr 1fr; background: #dfe6ee; padding: 4px; border-radius: 12px; }
.seg button { height: 42px; border-radius: 9px; font-weight: 700; color: var(--muted); }
.seg button.on { background: #fff; color: var(--ink); box-shadow: var(--shadow); }
.cards { display: grid; gap: 10px; }
.job-card { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; text-align: left; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 4px; }
.job-card:active { background: #f6f9fc; }
.job-row { display: flex; justify-content: space-between; align-items: center; }
.job-card .unit { font-size: 22px; }
.job-cust { color: var(--muted); font-weight: 600; font-size: 13px; }
.job-card p { margin: 4px 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.job-meta { display: flex; gap: 14px; color: var(--muted); font-size: 12px; } .job-meta span { display: inline-flex; gap: 4px; align-items: center; }
.fab { position: fixed; right: 18px; bottom: calc(90px + env(safe-area-inset-bottom)); width: 60px; height: 60px; border-radius: 50%; background: var(--steel); color: #fff; display: grid; place-items: center; box-shadow: 0 8px 24px rgba(40, 90, 137, .45); z-index: 25; }
.back-btn { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; color: var(--steel); height: 36px; align-self: flex-start; }
.job { display: flex; flex-direction: column; gap: 12px; }
.job-head { display: flex; justify-content: space-between; align-items: flex-start; }
.job-head h1 { font-size: 30px; } .job-head p { margin: 2px 0 0; font-weight: 600; }
.complaint { background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--steel); border-radius: 10px; padding: 12px 14px; font-size: 15px; white-space: pre-wrap; }
.complaint small { display: block; font-weight: 700; color: var(--muted); text-transform: uppercase; font-size: 11px; letter-spacing: .5px; margin-bottom: 2px; }
.complaint.office { border-left-color: var(--amber); }
.sec { font-size: 13px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); margin-top: 8px; }
.status-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.status-grid .st { height: 48px; border-radius: 10px; background: #fff; border: 1px solid var(--line); font-weight: 700; font-size: 13px; }
.status-grid .st.on { background: var(--steel); color: #fff; border-color: var(--steel); }
.big-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.line-list { list-style: none; margin: 0; padding: 0; background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.line-list li { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-bottom: 1px solid #edf1f5; }
.line-list li:last-child { border-bottom: 0; }
.line-list small { display: block; color: var(--muted); }
.line-list .qty { font-weight: 800; font-size: 16px; min-width: 38px; color: var(--steel); }
.line-list .bin { color: var(--muted); font-size: 12px; white-space: nowrap; }
.line-list .stock { font-size: 18px; min-width: 34px; text-align: right; }
.line-list.small li { padding: 9px 14px; }
.notes-form { display: grid; gap: 10px; }
.notes-form textarea { font-size: 16px; }
.floor .photo-grid { padding: 0; grid-template-columns: repeat(3, 1fr); }
.preview { width: 100%; max-height: 300px; object-fit: contain; border-radius: 10px; background: var(--gray-bg); }
.clock { display: flex; flex-direction: column; gap: 14px; }
.clock-face { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 26px; text-align: center; display: flex; flex-direction: column; gap: 4px; }
.clock-face strong { font-size: 34px; } .clock-face small, .clock-face span { color: var(--muted); font-weight: 600; }
.clock-face.on { background: linear-gradient(#f0fbf6, #fff); border-color: #bfe8d4; } .clock-face.on strong { color: var(--green); }
.clock-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.clock-stats div { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; } .clock-stats small { display: block; color: var(--muted); font-weight: 600; } .clock-stats b { font-size: 22px; }
.floor .form-body { grid-template-columns: 1fr; }
.floor .field input, .floor .field select, .floor .field textarea { font-size: 16px; min-height: 46px; }
.floor .panel { margin: 0; }
.floor-main > .form { background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }

/* ── Responsive ── */
@media (max-width: 1100px) {
  .grid-2, .grid-2.wide-left { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .sidebar { transform: translateX(-100%); box-shadow: none; }
  .nav-open .sidebar { transform: none; box-shadow: 0 0 40px rgba(0, 0, 0, .4); }
  .nav-open .scrim { display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, .35); z-index: 25; }
  .main { margin-left: 0; }
  .topbar { display: flex; align-items: center; gap: 10px; position: sticky; top: 0; z-index: 20; background: var(--navy); color: #fff; padding: 8px 12px; }
  .topbar .icon-btn { color: #fff; }
  .topbar-title { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .content { padding: 18px 16px 48px; }
  .page-head h1 { font-size: 22px; }
  .kv { grid-template-columns: 1fr 1fr; }
  .invoice-sheet { padding: 22px 18px; }
  .inv-parties { grid-template-columns: 1fr; }
  .search { max-width: none; }
  /* Tables become stacked cards on phones */
  .table-wrap table, .table-wrap tbody, .table-wrap tr, .table-wrap td { display: block; width: 100%; }
  .table-wrap thead { display: none; }
  .table-wrap tr { border-bottom: 1px solid var(--line); padding: 8px 0; }
  .table-wrap td { border: 0; padding: 4px 14px; display: grid; grid-template-columns: minmax(90px, auto) 1fr; column-gap: 12px; align-items: center; text-align: right; }
  .table-wrap td > * { grid-column: 2; justify-self: end; }
  .table-wrap td::before { content: attr(data-label); grid-column: 1; grid-row: 1 / span 3; font-size: 11.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; text-align: left; }
  .table-wrap td[data-label=""] { grid-template-columns: 1fr; }
  .table-wrap td[data-label=""]::before { content: none; }
  .table-wrap td > small, .table-wrap td small { text-align: right; }
  .clip { max-width: 60vw; }
  .form-body { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .stats { grid-template-columns: 1fr 1fr; }
  .stat strong { font-size: 18px; }
  .kv { grid-template-columns: 1fr; }
  .modal { max-height: calc(100vh - 16px); }
  .overlay { padding: 8px; align-items: end; }
}

/* ── Print ── */
@media print {
  body { background: #fff; }
  .portal-top, .portal-foot, .sidebar, .topbar, .no-print, .page-head .actions, .toast, .tabs, .toolbar .btn, .floor-nav, .floor-top, .fab, .alerts { display: none !important; }
  .main { margin: 0; } .content { padding: 0; max-width: none; }
  .panel, .stat, .invoice-sheet { box-shadow: none; break-inside: avoid; }
  .invoice-sheet { border: 0; padding: 0; }
  .grid-2, .grid-2.wide-left { grid-template-columns: 1fr; }
  .row-actions, .icon-btn { display: none !important; }
  .table-wrap { overflow: visible; }
}
.stat strong span{font-size:inherit;font-weight:inherit;color:inherit}
.stat strong span.danger{color:var(--red)}
/* Receipts (store runs) */
.receipt-thumb { width: 40px; height: 40px; border-radius: 6px; overflow: hidden; border: 1px solid var(--line); padding: 0; background: #f7f9fb; display: inline-block; vertical-align: middle; }
.receipt-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.receipt-pick > span { margin-bottom: 4px; }
.receipt-preview { position: relative; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; padding: 0; background: #f7f9fb; max-height: 260px; display: block; width: 100%; }
.receipt-preview img { width: 100%; max-height: 260px; object-fit: contain; display: block; }
.receipt-preview small { position: absolute; right: 8px; bottom: 8px; background: rgba(15,23,42,.7); color: #fff; padding: 3px 8px; border-radius: 99px; font-size: 11.5px; }
.tags { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-left: 6px; vertical-align: middle; }
.month-scroll { overflow-x: auto; }
table.month-grid { min-width: 640px; }
table.month-grid td, table.month-grid th { text-align: right; white-space: nowrap; }
table.month-grid td:first-child, table.month-grid th:first-child { text-align: left; }
table.month-grid tr.current td { background: #f1f7fd; }
.receipt-list li { align-items: center; gap: 10px; }
.linkish { background: none; border: 0; padding: 0; color: var(--steel); font-weight: 600; font-size: 12.5px; cursor: pointer; }
/* VIN lookup */
.affix.right input { flex: 1; }
.affix.right em { padding: 0 11px 0 0; font-size: 12px; }
.vin-field input { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .5px; }
.vin-result { display: block; margin-top: 5px; padding: 6px 9px; border-radius: 7px; font-size: 12.5px; }
.vin-result.ok { background: #e9f6ef; color: #17623b; }
.vin-result.warn { background: #fff4e0; color: #8a5300; }
.vin-field .affix { width: 100%; } .vin-field .affix input { flex: 1; min-width: 0; width: 100%; }
/* Recommended work, estimate, fine print */
.inv-declined { border: 1px solid #f1d39a; background: #fffaf0; border-radius: 8px; padding: 10px 14px 4px; margin: 6px 0 14px; }
.inv-declined > b { display: block; margin-bottom: 4px; }
.inv-declined .inv-table { margin-bottom: 6px; background: transparent; }
.inv-table .sign-col { width: 150px; white-space: nowrap; }
.inv-terms { margin-top: 18px; font-size: 11.5px; color: #475569; border-top: 1px solid var(--line); padding-top: 10px; }
.inv-terms ol { margin: 4px 0 0; padding-left: 18px; } .inv-terms li { margin: 2px 0; }
.sign-line { display: grid; grid-template-columns: 2fr 1fr; gap: 30px; margin-top: 40px; }
.sign-line span { border-top: 1px solid #334155; padding-top: 4px; font-size: 12px; color: #475569; }
.rec-list { list-style: none; margin: 0; padding: 0; }
.rec-list li { display: flex; gap: 10px; align-items: center; padding: 10px 16px; border-bottom: 1px solid #edf1f5; flex-wrap: wrap; }
.rec-list li:last-child { border-bottom: 0; }
.rec-list .grow { flex: 1; min-width: 180px; }
.rec-list .grow small { display: block; color: var(--muted); }
.rec-earlier { background: #fff4e0; color: #7a4a00; border: 1px solid #f1d39a; border-radius: 10px; padding: 10px 14px; margin-bottom: 14px; font-size: 13.5px; }
.rec-earlier ul { margin: 4px 0 0; padding-left: 18px; }
.ai-btn { background: linear-gradient(135deg, #eef2ff, #f5f3ff); border: 1px solid #c7d2fe; color: #3730a3; }
.ai-btn:hover { background: #e0e7ff; }
.ai-diff { display: grid; gap: 12px; }
.ai-diff .before { color: var(--muted); font-size: 12.5px; text-decoration: line-through; text-decoration-color: #cbd5e1; }
.kind-seg { margin-bottom: 4px; }
.inv-declined .inv-table td:not(:first-child), .inv-declined .inv-table th:not(:first-child) { width: auto; white-space: nowrap; padding-left: 16px; }
/* Jobs on a work order */
.job-card-o { border: 1px solid var(--line); border-radius: 10px; margin: 12px 16px; overflow: hidden; }
.job-card-o.one-price { border-color: #c7d2fe; }
.job-card-o.loose { border-style: dashed; }
.job-card-o .jh { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: #f7f9fb; border-bottom: 1px solid var(--line); }
.job-card-o .jh .grow { flex: 1; display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; }
.job-card-o .job-total { text-align: right; } .job-card-o .job-total small { display: block; font-size: 11.5px; }
.check.inline { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); font-weight: 600; }
.one-price-note { background: #eef2ff; color: #3730a3; font-size: 12.5px; padding: 6px 12px; }
table.job-lines { width: 100%; } table.job-lines td { padding: 7px 12px; border-bottom: 1px solid #edf1f5; font-size: 13.5px; }
table.job-lines td:nth-child(2) { white-space: nowrap; color: var(--muted); width: 130px; }
table.job-lines td.amt { text-align: right; width: 100px; font-variant-numeric: tabular-nums; }
table.job-lines td.acts { width: 1%; white-space: nowrap; text-align: right; }
.tag-l, .tag-p { display: inline-block; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; padding: 1px 6px; border-radius: 4px; margin-right: 4px; }
.tag-l { background: #e0f2fe; color: #075985; } .tag-p { background: #fef3c7; color: #92400e; }
tr.add-row td { padding: 4px 8px; background: #fcfdfe; }
tr.add-row button { color: var(--steel); font-weight: 600; font-size: 12.5px; padding: 5px 8px; border-radius: 6px; border: 1px dashed #cfd8e2; margin-right: 6px; background: #fff; display: inline-flex; align-items: center; gap: 4px; }
tr.add-row button:hover { background: #f1f7fd; }
.mini-select { height: 28px; font-size: 12px; padding: 0 6px; max-width: 130px; margin-right: 4px; }
.field-row { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.ai-mini { height: 28px; padding: 0 10px; font-size: 12.5px; }
.inv-table.by-job tr.inv-job td { background: #f1f5f9; padding-top: 8px; }
.inv-table.by-job tr.job-sub td { color: #475569; font-size: 12px; border-bottom: 2px solid #e2e8f0; }
@media (max-width: 720px) { .job-card-o { margin: 10px 0; } table.job-lines td:nth-child(2) { width: auto; } .mini-select { max-width: 100px; } }
table.job-lines small.cost { display: block; font-size: 11.5px; color: #64748b; }
.job-card-o .jh .row-actions { width: auto; flex: none; }  .job-card-o .jh .grow { min-width: 200px; }
.rec-list li .row-actions { width: auto; }
/* On/off switch */
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0 4px; cursor: pointer; }
.switch-row small { display: block; font-size: 12px; }
.switch-row.disabled { cursor: default; opacity: .7; }
input.switch { appearance: none; -webkit-appearance: none; width: 44px; height: 26px; border-radius: 99px; background: #cbd5e1; position: relative; flex: none; cursor: pointer; transition: background .15s; margin: 0; }
input.switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: left .15s; }
input.switch:checked { background: var(--steel); } input.switch:checked::after { left: 21px; }
input.switch:disabled { cursor: default; }
.manual-part-btn { display: flex; gap: 10px; align-items: center; width: 100%; text-align: left; margin-top: 10px; padding: 12px 14px; border: 1px dashed #9fb3c8; border-radius: 10px; background: #f8fafc; color: var(--ink); }
.manual-part-btn:hover { background: #f1f7fd; border-color: var(--steel); }
.manual-part-btn small { display: block; color: var(--muted); font-size: 12px; }
.manual-part-btn svg { color: var(--steel); flex: none; }
.seg-choice.three { grid-template-columns: 1fr 1fr 1fr; }
.inv-table.by-job tr.inv-job td { background: #f1f5f9; font-weight: 700; padding-top: 9px; }
.inv-table.by-job tr.sub td:first-child { padding-left: 28px; color: #334155; }
.inv-table.by-job tr.sub td { font-size: 13px; }
.layout-pick { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 12px; align-items: center; }
.layout-pick > span { font-size: 12.5px; font-weight: 700; color: var(--muted); margin-right: 4px; }
.layout-pick button { border: 1px solid #cfd8e2; background: #fff; border-radius: 8px; padding: 6px 10px; font-weight: 600; font-size: 12.5px; }
.layout-pick button.on { background: var(--steel); color: #fff; border-color: var(--steel); }
.layout-pick small { flex-basis: 100%; color: var(--muted); font-size: 12px; }
.actions-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
/* Sign-in: form on the left, shop picture on the right */
.auth-split { min-height: 100vh; display: grid; grid-template-columns: minmax(380px, 40%) 1fr; background: #fff; }
.auth-side { display: flex; flex-direction: column; justify-content: center; padding: 40px clamp(24px, 5vw, 72px); position: relative; }
.auth-inner { width: 100%; max-width: 360px; margin: 0 auto; }
.auth-inner .auth-logo { max-width: 260px; margin: 0 auto 18px; }
.auth-inner h1 { font-size: 22px; margin: 6px 0 0; }
.auth-inner > p { color: var(--muted); margin: 6px 0 20px; }
.auth-inner .form-foot { padding: 6px 0 0; border: 0; background: none; }
.auth-inner .form-foot .btn.primary { width: 100%; justify-content: center; height: 44px; }
.auth-foot { position: absolute; bottom: 16px; left: 0; right: 0; display: flex; justify-content: center; align-items: center; gap: 10px; color: #64748b; font-size: 12px; }
.auth-foot img { width: 34px; height: 34px; }
.auth-foot span { display: flex; flex-direction: column; line-height: 1.25; }
.auth-foot b { color: #334155; font-size: 12px; }
.auth-foot small { color: #94a3b8; font-size: 11px; }
.auth-hero-text .hero-sub { font-weight: 700; color: #F59E0B; margin-bottom: 4px; }
.auth-hero { position: relative; background: #0b1626 center / cover no-repeat; min-height: 100%; }
.auth-hero-text { position: absolute; left: clamp(24px, 6%, 80px); right: 24px; bottom: clamp(32px, 8%, 90px); color: #fff; max-width: 560px; }
.auth-hero-text h2 { font-size: clamp(30px, 3.4vw, 50px); line-height: 1.02; letter-spacing: .5px; text-transform: uppercase; font-weight: 900; margin: 0 0 14px; }
.auth-hero-text h2::after { content: '.'; color: #e0412f; }
.auth-hero-text p { color: #cbd5e1; font-size: 15px; max-width: 460px; margin: 0; }
@media (max-width: 860px) {
  .auth-split { grid-template-columns: 1fr; grid-template-rows: 200px auto; }
  .auth-hero { grid-row: 1; }
  .auth-hero-text { bottom: 18px; } .auth-hero-text h2 { font-size: 24px; margin: 0; } .auth-hero-text p { display: none; }
  .auth-side { grid-row: 2; padding: 28px 20px 56px; justify-content: flex-start; }
}
.auth-hero { background-position: center 18%; }
.auth-hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,10,18,0) 45%, rgba(5,10,18,.88) 78%, #050a12 100%); }
.auth-hero-text { z-index: 1; }
.auth-inner .form-body { padding: 0; }
.auth-inner form { border: 0; }
.auth-inner .form-foot .spacer { display: none; } @media (max-width: 860px) { .auth-hero { background-position: center 62%; } }
/* + Create menu */
.create-wrap { position: relative; padding: 0 14px 10px; }
.create-wrap.compact { padding: 0; margin-left: auto; }
.create-btn { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; height: 40px; border-radius: 10px; background: #e0412f; color: #fff; font-weight: 700; border: 0; box-shadow: 0 2px 8px rgba(0,0,0,.25); }
.create-btn:hover { background: #c9362a; }
.create-btn.open { background: #fff; color: var(--navy); }
.compact .create-btn { width: 40px; height: 36px; padding: 0; }
.create-scrim { position: fixed; inset: 0; z-index: 60; }
.create-pop { position: fixed; z-index: 61; left: 250px; top: 70px; width: min(640px, calc(100vw - 32px)); background: #fff; color: var(--ink); border-radius: 12px; box-shadow: 0 20px 50px rgba(15,23,42,.3); padding: 14px 18px 16px; }
.create-pop h3 { margin: 0 0 10px; font-size: 15px; color: var(--muted); font-weight: 600; border-bottom: 1px solid var(--line); padding-bottom: 8px; }
.create-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px 18px; }
.create-grid h4 { margin: 0 0 6px; font-size: 12.5px; font-weight: 800; color: var(--ink); }
.create-grid button { display: block; width: 100%; text-align: left; padding: 5px 0; font-size: 13.5px; color: var(--steel); background: none; border: 0; }
.create-grid button:hover { text-decoration: underline; }
@media (max-width: 860px) { .create-pop { left: 16px; right: 16px; top: 60px; width: auto; } }
/* Inline part entry under each job */
tr.part-entry td { padding: 8px 10px; background: #fbfcfe; }
.pe { display: grid; grid-template-columns: 1.1fr 1.6fr 1.1fr 54px 92px 92px 46px 40px auto; gap: 6px; align-items: center; position: relative; }
.pe input { height: 34px; border: 1px solid #cfd8e2; border-radius: 7px; padding: 0 8px; font-size: 13px; width: 100%; min-width: 0; background: #fff; }
.pe input:focus { outline: 2px solid #9cc3ea; border-color: var(--steel); }
.pe-money { position: relative; } .pe-money em { position: absolute; left: 7px; top: 8px; font-style: normal; color: var(--muted); font-size: 12px; } .pe-money input { padding-left: 17px; }
.pe-num { text-align: center; }
.pe-markup { font-size: 12px; color: var(--muted); text-align: center; }
.pe-add { height: 34px; width: 40px; padding: 0; justify-content: center; }
.pe-browse { font-size: 12px; white-space: nowrap; }
.pe-note { grid-column: 1 / -1; color: #17623b; font-size: 12px; }
.pe-search { position: relative; }
.pe-suggest { position: absolute; z-index: 30; top: 38px; left: 0; width: 360px; max-width: 80vw; list-style: none; margin: 0; padding: 4px; background: #fff; border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 10px 30px rgba(15,23,42,.18); }
.pe-suggest button { display: block; width: 100%; text-align: left; padding: 6px 8px; border-radius: 6px; font-size: 13px; background: none; border: 0; }
.pe-suggest button:hover { background: #f1f7fd; }
.pe-suggest small { display: block; color: var(--muted); font-size: 11.5px; }
@media (max-width: 900px) { .pe { grid-template-columns: 1fr 1fr; } .pe-desc { grid-column: 1 / -1; } .pe-markup { display: none; } }
.pe { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.pe-search { grid-column: span 3; } .pe-desc { grid-column: span 6; } .pe > input[aria-label="Vendor"] { grid-column: span 3; }
.pe-num { grid-column: span 2; } .pe-money { grid-column: span 3; } .pe-markup { grid-column: span 1; } .pe-add { grid-column: span 1; width: 100%; } .pe-browse { grid-column: span 2; text-align: right; }
@media (max-width: 900px) { .pe-search, .pe > input[aria-label="Vendor"] { grid-column: span 6; } .pe-desc { grid-column: 1 / -1; } .pe-num { grid-column: span 3; } .pe-money { grid-column: span 4; } .pe-add { grid-column: span 1; } .pe-browse { grid-column: 1 / -1; text-align: left; } }
/* Vendors & parts orders */
.search-input { height: 38px; border: 1px solid #cfd8e2; border-radius: 8px; padding: 0 12px; min-width: 260px; }
.reorder { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; padding: 14px 16px; }
.reorder-card { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.reorder-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; }
.reorder-card ul { list-style: none; margin: 0; padding: 0; } .reorder-card li { display: flex; flex-direction: column; padding: 5px 0; border-top: 1px solid #edf1f5; font-size: 13.5px; }
table.po-lines { width: 100%; } table.po-lines th { font-size: 11.5px; } table.po-lines td { padding: 5px 6px; border-bottom: 1px solid #edf1f5; }
table.po-lines input { width: 100%; height: 32px; border: 1px solid #cfd8e2; border-radius: 6px; padding: 0 7px; } table.po-lines input.num { width: 90px; text-align: right; }
table.po-lines input:disabled { background: #f7f9fb; color: var(--ink); }
table.po-lines td.amt { text-align: right; white-space: nowrap; } .po-total td { font-weight: 600; border-bottom: 0; }
.copy-box { font-family: ui-monospace, Menlo, monospace; font-size: 13px; width: 100%; border: 1px solid #cfd8e2; border-radius: 8px; padding: 10px; }
.vendor-extra { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 4px; }
table.tiers { width: 100%; } table.tiers td, table.tiers th { padding: 5px 6px; border-bottom: 1px solid #edf1f5; text-align: left; }
table.tiers input { height: 32px; border: 1px solid #cfd8e2; border-radius: 6px; padding: 0 7px; width: 100%; } table.tiers input.num { width: 70px; text-align: right; }
table.tiers .pe-money { display: block; max-width: 120px; }
table.tiers .pe-money input { padding-left: 18px; } table.tiers td:nth-child(3) { white-space: nowrap; } table.tiers .pe-money em { top: 8px; }
.save-note { font-size: 12px; color: var(--muted); align-self: center; } .save-note.saved { color: #17623b; } .save-note.error { color: var(--red); }
.draft-capture { display: contents; }
.cu-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 3px; }
.cu-pick select { height: 36px; font-size: 13.5px; }
.kv .span2 { grid-column: span 2; }
.list-sum { padding: 10px 16px 0; margin: 0; }
@media (max-width: 720px) { .cu-pick { grid-template-columns: 1fr; } .kv .span2 { grid-column: 1 / -1; } }
.nowrap{white-space:nowrap}
.date-range{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted,#64748b)}
.date-range input{width:auto}
.wo-stats{margin:4px 0 10px}
.bulk-bar{display:flex;align-items:center;gap:10px;padding:8px 12px;background:#fef2f2;border-bottom:1px solid #fecaca;font-size:14px}
.tax-chk{display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:600;color:#94a3b8;margin-right:6px;cursor:pointer;user-select:none}
.tax-chk.on{color:#0f766e}
.tax-chk input{width:13px;height:13px;margin:0}
.tax-pick{margin:4px 16px 16px;padding-top:12px;border-top:1px solid #e5e9ef;display:grid;gap:8px}
.tax-pick select,.tax-rate input{height:38px;border:1px solid #cfd8e2;border-radius:8px;padding:0 10px;font:inherit;font-size:14px;color:inherit;background:#fff}
.tax-pick label{display:grid;gap:4px;font-size:12px;font-weight:600;color:var(--muted,#64748b)}
.tax-pick select{font-weight:500}
.tax-rate{display:flex;align-items:center;gap:6px}
.tax-rate input{width:90px}
.tax-lines{display:grid;gap:6px}
.tax-lines .check{font-size:14px}
.sup-edit{display:inline-flex;align-items:center;gap:8px;justify-content:flex-end}
.sup-in{display:inline-flex;align-items:center;gap:2px;border:1px dashed #cfd8e2;border-radius:6px;padding:0 6px;background:#fff}
.sup-in:focus-within{border-style:solid;border-color:var(--steel,#2f5f8a)}
.sup-in input{width:72px;border:0;outline:0;text-align:right;font:inherit;padding:3px 0;background:transparent}
.sup-edit .linkish.small{font-size:11px}
.target-side .today-cost{display:flex;flex-direction:column;gap:2px;margin-top:8px;font-size:12px;opacity:.85;max-width:280px;text-transform:none;letter-spacing:0;font-weight:500;text-align:right}
.today-cost .cost-down{color:#15803d;font-weight:600}
.today-cost .cost-up{color:#b45309;font-weight:600}
.guide-picks{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:6px}
.guide-pick{border:1px solid #cfd8e2;background:#f8fafc;border-radius:999px;padding:4px 10px;font-size:13px;cursor:pointer;text-align:left}
.guide-pick:hover{border-color:var(--steel,#2f5f8a);background:#eef4fa}
.guide-pick b{margin-left:4px;color:var(--steel,#2f5f8a)}
.guide-pick i{margin-left:4px;font-style:normal;font-size:10px;color:#b45309;text-transform:uppercase}
.guide-note{display:block;margin-top:6px;font-size:12px;color:#0f766e}
.guide-hrs{display:inline-flex;align-items:center;gap:8px}
.hrs-in input{width:52px}
.chk-btn{font-size:11px;font-weight:600;border:1px solid #e5c07b;color:#b45309;background:#fffbeb;border-radius:999px;padding:2px 8px;cursor:pointer;white-space:nowrap}
.chk-btn.on{border-color:#86efac;color:#15803d;background:#f0fdf4}
.job-tech{display:inline-flex;align-items:center;gap:6px;margin-left:10px}
.job-st{font-size:11px;font-weight:700;border-radius:999px;padding:2px 8px;background:#f1f5f9;color:#475569;white-space:nowrap}
.job-st.doing{background:#fef3c7;color:#92400e}
.job-st.done{background:#dcfce7;color:#166534}
.floor-top .bell{position:relative;background:none;border:0;color:inherit;padding:6px;margin-left:auto;margin-right:6px;cursor:pointer}
.floor-top .bell b{position:absolute;top:0;right:0;min-width:17px;height:17px;border-radius:9px;background:#dc2626;color:#fff;font-size:11px;line-height:17px;text-align:center;padding:0 4px}
.my-jobs{font-size:13px;color:#0f766e;margin:4px 0;display:flex;align-items:center;gap:4px}
.truck-jobs{list-style:none;padding:0;margin:0 0 8px;display:grid;gap:8px}
.truck-jobs li{border:1px solid #e2e8f0;border-radius:12px;padding:10px 12px;background:#fff;display:grid;gap:4px}
.truck-jobs li.mine{border-color:#5eead4;background:#f0fdfa}
.truck-jobs li.done{opacity:.75}
.tj-head{display:flex;justify-content:space-between;align-items:center;gap:8px}
.tj-btns{display:flex;gap:8px;margin-top:4px}
.tj-btns .btn{flex:1}
.push-banner{display:flex;align-items:center;gap:10px;background:#eff6ff;border:1px solid #bfdbfe;border-radius:12px;padding:10px 12px;margin:0 0 12px;font-size:14px}
.push-banner span{flex:1}
.inbox{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.inbox li{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:10px 12px;display:grid;gap:2px;cursor:pointer}
.inbox li.new{border-color:#93c5fd;background:#f8fbff}
.good-text{color:#15803d;font-weight:600}
.plain-list{list-style:none;margin:0;padding:8px 16px 14px;display:grid;gap:10px}
.trailer-switch{display:flex;align-items:center;gap:10px;cursor:pointer}
.trailer-switch span{display:grid}
.trailer-switch small{font-size:12px}
.cu-trailer{grid-column:1/-1;display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:center;margin-top:8px}
.cu-trailer .trailer-switch{grid-column:1/-1}
.cu-trailer select{grid-column:1/-1}
.side-pick{display:inline-flex;border:1px solid #cfd8e2;border-radius:8px;overflow:hidden;margin-left:10px;vertical-align:middle}
.side-pick button{border:0;background:#fff;padding:3px 10px;font-size:12px;font-weight:600;cursor:pointer;color:#475569}
.side-pick button.on{background:var(--steel,#2f5f8a);color:#fff}
.inv-trailer{display:block;margin-top:10px}
.trailer-line{margin:4px 0 0;font-size:14px;color:#0f766e}
.tag-trailer{display:inline-block;font-size:10px;font-weight:700;text-transform:uppercase;background:#ede9fe;color:#5b21b6;border-radius:6px;padding:1px 6px;margin-right:6px;vertical-align:middle}
.job-card .unit small{font-size:13px;font-weight:600;opacity:.75;margin-left:6px}
.mileage-in{width:100%;max-width:180px;height:36px;border:1px dashed #cfd8e2;border-radius:8px;padding:0 10px;font:inherit;font-weight:700;background:#fff}
.mileage-in:focus{border-style:solid;border-color:var(--steel,#2f5f8a);outline:0}
.mech-mileage{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:10px 0;font-size:14px;font-weight:600}
.kv .trailer-switch small,.kv small.muted{text-transform:none;letter-spacing:0;font-weight:400;font-size:12px}
.part-cell{display:flex;align-items:center;gap:10px}.part-cell>span{display:grid}
.photo-set-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.ps-item{position:relative;width:96px;height:96px;border-radius:10px;overflow:hidden;border:1px solid #e2e8f0;background:#f8fafc}
.ps-item img{width:100%;height:100%;object-fit:cover}
.ps-item.new{border-color:#93c5fd}
.ps-item button{position:absolute;top:4px;right:4px;width:24px;height:24px;border-radius:12px;border:0;background:rgba(15,23,42,.75);color:#fff;font-size:16px;line-height:24px;cursor:pointer}
.ps-add{width:96px;height:96px;border:1.5px dashed #9fb3c8;border-radius:10px;background:#f8fafc;color:var(--steel,#2f5f8a);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer}
.receipt-thumb.multi{position:relative}
.receipt-thumb.multi b{position:absolute;right:2px;bottom:2px;background:rgba(15,23,42,.8);color:#fff;font-size:10px;border-radius:6px;padding:0 4px}
.gallery-row{display:flex;gap:12px;overflow-x:auto;max-width:96vw;padding:0 12px;scroll-snap-type:x mandatory}
.gallery-row img{max-height:78vh;max-width:88vw;border-radius:8px;scroll-snap-align:center;flex:none}
.est-choice{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.est-choice button{display:grid;gap:6px;justify-items:start;text-align:left;padding:16px;border:1px solid #cfd8e2;border-radius:12px;background:#fff;cursor:pointer;color:inherit}
.est-choice button:hover{border-color:var(--steel,#2f5f8a);background:#f5f9fd}
.est-choice button svg{color:var(--steel,#2f5f8a)}
.est-choice small{color:#64748b}
@media (max-width:600px){.est-choice{grid-template-columns:1fr}}
select.est-status{height:40px;border:1px solid #cfd8e2;border-radius:8px;padding:0 10px;background:#fff;font:inherit}
.road-clock{padding:12px 16px 16px;display:grid;gap:12px}
.road-terms{margin:0;display:grid;gap:2px;font-size:13px;color:#475569;background:#f8fafc;border-left:3px solid #7c3aed;padding:8px 10px;border-radius:6px}
.road-times{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.road-times small{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:#64748b}
.road-btns{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.floor .road-clock{padding:0 0 8px}
.floor .road-btns .btn{flex:1;min-height:48px}
.est-adjust{display:flex;flex-wrap:wrap;align-items:flex-end;gap:18px;background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:12px 16px;margin:0 0 14px}
.est-adjust .ea-item{display:grid;gap:4px}
.est-adjust .ea-item small{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:#64748b;font-weight:600}
.est-adjust .ea-tax .tax-pick{margin:0;padding:0;border:0}
.est-adjust .ea-tax .tax-pick>small{display:none}
.tag-m{display:inline-block;font-size:10px;font-weight:700;text-transform:uppercase;background:#fef3c7;color:#92400e;border-radius:4px;padding:1px 5px;margin-right:4px;vertical-align:middle}
.send-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.send-opt{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:12px;align-items:center;text-align:left;padding:12px 14px;border:1px solid #cfd8e2;border-radius:12px;background:#fff;cursor:pointer;color:inherit}
.send-opt:hover:not(:disabled){border-color:var(--steel,#2f5f8a);background:#f5f9fd}
.send-opt:disabled{opacity:.5;cursor:default}
.send-opt .so-ic{grid-row:1/3;width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:#fff}
.so-ic.mail{background:#2f5f8a}.so-ic.tg{background:#229ED9}.so-ic.wa{background:#25D366}.so-ic.sms{background:#64748b}.so-ic.copy{background:#0f766e}
.send-opt small{color:#64748b;font-size:12px}
@media (max-width:600px){.send-grid{grid-template-columns:1fr}}
.tg-connect{display:grid;gap:8px;background:#f0f9ff;border:1px solid #bae6fd;border-radius:10px;padding:12px;margin-top:12px;font-size:14px}
.tg-connect code{font-size:12px;word-break:break-all;background:#fff;border:1px solid #e2e8f0;border-radius:6px;padding:6px 8px}
.tg-on{display:inline-flex;align-items:center;gap:6px;color:#0369a1;font-weight:600;font-size:14px}
.cust-tg{padding-top:0}
.tg-steps{display:grid;gap:4px;padding-left:18px;margin:0}
.portal-est-bar{margin:0 0 14px}
.est-decide{display:grid;gap:10px;background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:14px 16px}
.est-decide textarea{border:1px solid #cfd8e2;border-radius:8px;padding:8px 10px;font:inherit}
.send-body{padding:16px 18px 18px;display:grid;gap:12px}
.status-chips{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 12px}
.status-chips .chip{display:inline-flex;align-items:center;gap:8px}
.status-chips .chip b{font-size:12px;background:rgba(15,23,42,.08);border-radius:999px;padding:0 7px;min-width:20px;text-align:center}
.status-chips .chip.on b{background:rgba(255,255,255,.25)}
.status-chips .st-Overdue:not(.on) b{background:#fee2e2;color:#b91c1c}
.th-sort{background:none;border:0;padding:0;font:inherit;color:inherit;text-transform:inherit;letter-spacing:inherit;cursor:pointer;display:inline-flex;gap:4px;align-items:center}
.th-sort span{opacity:.35;font-size:10px}.th-sort.on span{opacity:1}
.sent-mark{white-space:nowrap}
.top-list{list-style:none;margin:0;padding:6px 16px 14px;display:grid;gap:8px}
.top-list li{display:grid;grid-template-columns:24px minmax(120px,1.2fr) 2fr auto;gap:12px;align-items:center;cursor:pointer;font-size:14px}
.top-list .rank{width:22px;height:22px;border-radius:11px;background:#eef2f7;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}
.top-list .bar{height:10px;background:#eef2f7;border-radius:5px;overflow:hidden}.top-list .bar i{display:block;height:100%;background:var(--steel,#2f5f8a);border-radius:5px}
.top-list .amt{text-align:right;font-weight:700;white-space:nowrap}
@media (max-width:600px){.top-list li{grid-template-columns:24px 1fr auto}.top-list .bar{display:none}}
.po-send-email{display:grid;gap:8px;padding-bottom:12px;border-bottom:1px solid #e2e8f0}
.copy-box{width:100%;font-family:ui-monospace,monospace;font-size:12px;margin-top:6px}

/* Part details (all optional) */
.more-details { border: 1px solid var(--line, #e3e6ea); border-radius: 10px; padding: 8px 12px; }
.more-details > summary { cursor: pointer; font-weight: 600; padding: 4px 0; }
.more-details[open] > summary { margin-bottom: 8px; }
.more-details .form-body { padding: 0; }
.part-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.part-tags span { background: var(--soft, #f1f3f5); border-radius: 6px; padding: 1px 6px; font-size: 11px; }
.scan-btn { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.scan-box video { width: 100%; max-height: 60vh; border-radius: 10px; background: #000; }
.core-btn { font-size: 12px; padding: 2px 8px; margin-right: 4px; }
.core-ok { font-size: 12px; color: var(--good, #1a7f37); margin-right: 6px; white-space: nowrap; }

/* Double-entry flags and mechanic job time */
.dup-flag { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 6px; background: #fde2e1; color: #b42318; font-size: 11px; font-weight: 700; white-space: nowrap; }
.dup-bar { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; background: #fef3f2; border: 1px solid #fda29b; color: #912018; }
.job-time { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px; background: #eef4ff; color: #1d4ed8; font-size: 12px; font-weight: 600; white-space: nowrap; }
.job-time.live { background: #ecfdf3; color: #067647; }
.tj-live { color: #067647; }
.truck-jobs .line-list { margin: 8px 0 0; }
.big-add { margin: 4px 0 8px; min-height: 48px; font-size: 16px; }
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.office-work { background: #fff; border: 1px solid var(--line, #e3e6ea); border-left: 4px solid #2a5d8f; border-radius: 12px; padding: 10px 14px; margin-bottom: 10px; }
.office-work > small { text-transform: uppercase; letter-spacing: .04em; color: #64748b; font-weight: 700; font-size: 11px; }
.office-work ul { margin: 6px 0; padding-left: 18px; }
.office-work li { margin: 3px 0; font-weight: 600; }