/* TJE1 — style.css — mobile-first PWA */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --navy: #0C1F3A;
  --blue: #185FA5;
  --blue-light: #E6F1FB;
  --green: #3B6D11;
  --green-light: #EAF3DE;
  --amber: #854F0B;
  --amber-light: #FAEEDA;
  --red-light: #FCEBEB;
  --red: #A32D2D;
  --border: rgba(0,0,0,0.1);
  --bg: #F4F5F7;
  --surface: #FFFFFF;
  --text: #1A1A1A;
  --text2: #555;
  --text3: #888;
  --radius: 10px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0F1923;
    --surface: #1A2535;
    --text: #F0F0F0;
    --text2: #A0ADB8;
    --text3: #6B7888;
    --border: rgba(255,255,255,0.08);
    --blue-light: #0C2540;
    --green-light: #0D2208;
    --amber-light: #261500;
  }
}

body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: var(--bg); color: var(--text); font-size: 15px; -webkit-font-smoothing: antialiased; }

/* SCREENS */
.screen { min-height: 100dvh; }
#screen-app { display: flex; flex-direction: column; height: 100dvh; }

/* LOGIN */
.login-wrap { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100dvh; padding: 32px 24px; gap: 32px; }
.login-logo { text-align: center; }
.login-icon { font-size: 56px; margin-bottom: 8px; }
.login-title { font-size: 28px; font-weight: 600; color: var(--navy); letter-spacing: -0.5px; }
.login-sub { font-size: 15px; color: var(--text2); margin-top: 4px; }
.btn-google { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 14px 24px; font-size: 16px; font-weight: 500; color: var(--text); cursor: pointer; width: 100%; max-width: 320px; justify-content: center; }
.btn-google:hover { background: var(--bg); }
.login-error { color: var(--red); font-size: 13px; text-align: center; padding: 10px; background: var(--red-light); border-radius: 8px; width: 100%; max-width: 320px; }

/* TOPBAR */
.topbar { background: var(--navy); color: white; padding: 14px 16px 14px; display: flex; align-items: center; gap: 10px; padding-top: max(14px, env(safe-area-inset-top)); }
.topbar-back { background: none; border: none; color: rgba(255,255,255,0.8); cursor: pointer; padding: 4px; display: flex; align-items: center; }
.topbar-center { flex: 1; }
.topbar-title { font-size: 17px; font-weight: 600; color: white; }
.topbar-right { display: flex; align-items: center; }
.user-avatar { width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,0.2); color: white; font-size: 11px; font-weight: 600; display: flex; align-items: center; justify-content: center; }

/* PAGE WRAP */
.page-wrap { flex: 1; overflow-y: auto; padding-bottom: 80px; }
.page { display: none; padding: 16px; }
.page.active { display: block; }

/* BOTTOM NAV */
.bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; background: var(--surface); border-top: 0.5px solid var(--border); display: flex; padding-bottom: env(safe-area-inset-bottom); z-index: 50; }
.nav-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 4px; background: none; border: none; cursor: pointer; color: var(--text3); font-size: 10px; }
.nav-item.active { color: var(--blue); }
.nav-item svg { stroke: currentColor; }

/* METRICS */
.metrics-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.metric-card { background: var(--surface); border-radius: var(--radius); padding: 14px; border: 2px solid #0C1F3A; }
.metric-val { font-size: 28px; font-weight: 600; color: var(--text); }
.metric-val.green { color: var(--green); }
.metric-val.blue { color: var(--blue); }
.metric-val.amber { color: var(--amber); }
.metric-label { font-size: 12px; color: var(--text3); margin-top: 2px; }

/* SEARCH */
.search-area { background: var(--surface); border: 2px solid #0C1F3A; border-radius: var(--radius); margin-bottom: 14px; overflow: hidden; }
.search-4grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.s4-field { padding: 8px 12px; border-bottom: 0.5px solid var(--border); border-right: 0.5px solid var(--border); }
.s4-field:nth-child(even) { border-right: none; }
.s4-field:nth-last-child(-n+2) { border-bottom: none; }
.s4-label { font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text3); display: block; margin-bottom: 3px; }
.s4-input { width: 100%; border: none; background: transparent; font-size: 13px; color: var(--text); padding: 0; }
.s4-input:focus { outline: none; }
.s4-input::placeholder { color: var(--text3); }
.search-results-count { padding: 6px 12px; font-size: 12px; color: var(--text2); border-top: 0.5px solid var(--border); background: var(--bg); }
#search-results-wrap { max-height: 70vh; overflow-y: auto; }
@media (min-width: 600px) {
  .search-4grid { grid-template-columns: 1fr 1fr 1fr 1fr; }
  .s4-field { border-bottom: none; border-right: 0.5px solid var(--border); }
  .s4-field:last-child { border-right: none; }
}
select { background: var(--surface); border: 0.5px solid var(--border); border-radius: 8px; padding: 8px 10px; font-size: 14px; color: var(--text); }

/* TABLE */
.table-wrap { background: var(--surface); border-radius: var(--radius); border: 2px solid #0C1F3A; overflow: hidden; }
.table-head { display: grid; grid-template-columns: 70px 1fr 1fr 80px; padding: 9px 12px; background: var(--bg); font-size: 11px; color: var(--text3); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 500; border-bottom: 0.5px solid var(--border); }
.table-row { display: grid; grid-template-columns: 70px 1fr 1fr 80px; padding: 12px 12px; border-bottom: 0.5px solid var(--border); align-items: center; cursor: pointer; }
.table-row:last-child { border-bottom: none; }
.table-row:active { background: var(--bg); }
.row-id { font-family: monospace; font-size: 13px; font-weight: 600; color: var(--blue); }
.row-model { font-size: 13px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-company { font-size: 12px; color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.loading-row { padding: 24px; text-align: center; color: var(--text3); font-size: 14px; }

/* BADGES */
.badge { font-size: 11px; font-weight: 500; padding: 3px 8px; border-radius: 20px; white-space: nowrap; }
.badge-green { background: var(--green-light); color: var(--green); }
.badge-blue { background: var(--blue-light); color: var(--blue); }
.badge-amber { background: var(--amber-light); color: var(--amber); }

/* FORMS */
input[type=text], input[type=number], input[type=date], input[type=email], input[type=tel] {
  background: var(--surface); border: 0.5px solid var(--border); border-radius: 8px;
  padding: 10px 12px; font-size: 15px; color: var(--text); width: 100%;
  -webkit-appearance: none;
}
input:focus { outline: none; border-color: var(--blue); }
input::placeholder { color: var(--text3); }
.auto-field { background: var(--bg) !important; color: var(--text2) !important; }
.mono { font-family: monospace !important; }
.upper { text-transform: uppercase; }

.form-section { background: var(--surface); border-radius: var(--radius); border: 2px solid #0C1F3A; overflow: hidden; margin-bottom: 14px; }
.form-section-title { padding: 10px 14px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text2); background: var(--bg); border-bottom: 0.5px solid var(--border); }
.form-body .form-section:last-child { margin-bottom: 0; }
.field { display: flex; flex-direction: column; gap: 5px; padding: 10px 14px 0; }
.field:last-child { padding-bottom: 12px; }
.field label { font-size: 12px; font-weight: 500; color: var(--text2); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.field-row .field { padding: 10px 8px 0; }
.field-row .field:first-child { padding-left: 14px; }
.field-row .field:last-child { padding-right: 14px; }
.field-row .field:last-child { padding-bottom: 12px; }
.field-hint { font-size: 11px; color: var(--text3); margin-top: 3px; }

/* SCAN */
.scan-tag { font-size: 10px; background: var(--blue-light); color: var(--blue); padding: 2px 6px; border-radius: 6px; margin-left: 4px; }
.auto-tag { font-size: 10px; background: var(--green-light); color: var(--green); padding: 2px 6px; border-radius: 6px; margin-left: 4px; }
.scan-wrap { display: flex; gap: 6px; }
.scan-wrap input { flex: 1; }
.scan-btn { background: var(--blue); color: white; border: none; border-radius: 8px; padding: 0 14px; font-size: 13px; font-weight: 500; cursor: pointer; white-space: nowrap; }

/* CHECKLISTS */
.check-grid { display: grid; grid-template-columns: 1fr 1fr; }
.check-item { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-bottom: 0.5px solid var(--border); cursor: pointer; }
.check-item:nth-child(odd) { border-right: 0.5px solid var(--border); }
.check-item.full { grid-column: 1/-1; border-right: none; }
.check-item:last-child, .check-item:nth-last-child(2):nth-child(odd) { border-bottom: none; }
.check-item input[type=checkbox] { width: 20px; height: 20px; flex-shrink: 0; accent-color: var(--blue); cursor: pointer; }
.check-item span { font-size: 13px; color: var(--text); }

/* TRAILER TOGGLE */
.toggle-row { display: flex; align-items: center; justify-content: space-between; padding: 14px; cursor: pointer; }
.toggle-row span { font-size: 15px; color: var(--text); font-weight: 500; }
.toggle-wrap { position: relative; width: 46px; height: 26px; }
.toggle-wrap input { opacity: 0; width: 0; height: 0; }
.toggle-slider { position: absolute; inset: 0; background: var(--border); border-radius: 26px; transition: .2s; cursor: pointer; }
.toggle-slider::before { content: ''; position: absolute; width: 20px; height: 20px; left: 3px; top: 3px; background: white; border-radius: 50%; transition: .2s; }
.toggle-wrap input:checked ~ .toggle-slider { background: var(--blue); }
.toggle-wrap input:checked ~ .toggle-slider::before { transform: translateX(20px); }
.trailer-inner { padding: 0 14px 14px; display: flex; flex-direction: column; gap: 10px; }
.trailer-inner .field { padding: 0; }

/* BUTTONS */
.btn-primary { width: 100%; background: var(--navy); color: white; border: none; border-radius: var(--radius); padding: 14px; font-size: 16px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; }
.btn-primary:hover { background: #0C2A4A; }
.btn-primary:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-secondary { width: 100%; background: var(--surface); color: var(--text); border: 0.5px solid var(--border); border-radius: var(--radius); padding: 14px; font-size: 15px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; }
.btn-secondary:hover { background: var(--bg); }
.form-actions { display: flex; flex-direction: column; gap: 10px; padding: 16px 0 8px; }

/* SUCCESS SCREEN */
.success-screen { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 32px 0; text-align: center; }
.success-icon { font-size: 52px; }
.success-title { font-size: 20px; font-weight: 600; color: var(--text); }
.success-sub { font-size: 14px; color: var(--text2); }
.doc-download-card { background: var(--surface); border: 2px solid #0C1F3A; border-radius: var(--radius); padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; width: 100%; }
.doc-dl-info { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.btn-dl { background: var(--blue-light); color: var(--blue); border: none; border-radius: 8px; padding: 8px 14px; font-size: 13px; font-weight: 500; cursor: pointer; }
.drive-note { font-size: 12px; color: var(--text3); }

/* DETAIL PAGE */
.detail-header { margin-bottom: 16px; }
.detail-id { font-size: 26px; font-weight: 700; font-family: monospace; color: var(--blue); }
.detail-model { font-size: 16px; color: var(--text2); margin: 4px 0 8px; }
.detail-sections { display: flex; flex-direction: column; gap: 14px; }
.detail-section { background: var(--surface); border-radius: var(--radius); border: 2px solid #0C1F3A; overflow: hidden; }
.ds-title { padding: 10px 14px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text2); background: var(--bg); border-bottom: 0.5px solid var(--border); }
.ds-row { display: flex; align-items: center; padding: 9px 14px; border-bottom: 0.5px solid var(--border); font-size: 13px; gap: 0; }
.ds-row:last-child { border-bottom: none; }
.ds-row span:first-child { color: var(--text2); min-width: 130px; flex-shrink: 0; }
.ds-row span:last-child { font-weight: 500; color: var(--text); flex: 1; }
.ds-empty { padding: 16px 14px; font-size: 13px; color: var(--text3); }
.doc-link { cursor: pointer; }
.doc-link:active { background: var(--bg); }
.link-text { color: var(--blue); font-weight: 500; }

/* SALES */
.page-sub { font-size: 14px; color: var(--text2); margin-bottom: 14px; }
.stock-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.stock-card { background: var(--surface); border: 2px solid #0C1F3A; border-radius: var(--radius); padding: 14px; cursor: pointer; }
.stock-card.selected { border: 2px solid var(--blue); background: var(--blue-light); }
.sc-id { font-size: 12px; font-family: monospace; font-weight: 600; color: var(--blue); margin-bottom: 4px; }
.sc-model { font-size: 14px; font-weight: 500; color: var(--text); margin-bottom: 6px; }
.sc-detail { font-size: 12px; color: var(--text2); }
.sc-trailer { font-size: 11px; color: var(--amber); margin-top: 4px; }
.selected-banner { background: var(--blue-light); color: var(--blue); border-radius: 8px; padding: 10px 14px; font-size: 14px; margin-bottom: 14px; }
.review-grid { display: flex; flex-direction: column; gap: 12px; margin-bottom: 14px; }
.review-card { background: var(--surface); border: 2px solid #0C1F3A; border-radius: var(--radius); overflow: hidden; }
.rc-title { padding: 10px 14px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text2); background: var(--bg); border-bottom: 0.5px solid var(--border); }
.rc-row { display: flex; justify-content: space-between; padding: 9px 14px; border-bottom: 0.5px solid var(--border); font-size: 13px; }
.rc-row:last-child { border-bottom: none; }
.rc-row span:first-child { color: var(--text2); }
.rc-row span:last-child { font-weight: 500; color: var(--text); }
.doc-list { display: flex; flex-direction: column; }
.doc-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border-bottom: 0.5px solid var(--border); font-size: 14px; }
.doc-row:last-child { border-bottom: none; }
.doc-dl-grid { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.doc-dl-btn { background: var(--surface); border: 0.5px solid var(--border); border-radius: var(--radius); padding: 13px; font-size: 15px; cursor: pointer; color: var(--text); }
.doc-dl-btn:hover { background: var(--bg); }

/* COMING SOON */
.coming-soon { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 300px; gap: 14px; text-align: center; padding: 32px; }
.cs-title { font-size: 20px; font-weight: 600; color: var(--text); }
.cs-sub { font-size: 14px; color: var(--text2); line-height: 1.5; }

/* SCAN MODAL */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.7); display: flex; align-items: center; justify-content: center; z-index: 200; padding: 24px; }
.modal-box { background: var(--surface); border-radius: 16px; padding: 20px; width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: 14px; }
.modal-title { font-size: 17px; font-weight: 600; color: var(--text); }
.modal-hint { font-size: 13px; color: var(--text2); text-align: center; }

/* DASHBOARD CARDS */
.dash-section-title { display:flex; align-items:center; justify-content:space-between; font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:0.05em; color:var(--text2); margin-bottom:10px; }
.new-order-btn { background:var(--navy); color:white; border:none; border-radius:10px; padding:12px 22px; font-size:15px; font-weight:500; cursor:pointer; }
.dash-card { background:var(--surface); border:2px solid #0C1F3A; border-radius:var(--radius); padding:14px; margin-bottom:10px; cursor:pointer; }
.dash-card:active { background:var(--bg); }
.dc-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.dc-id { font-family:monospace; font-size:13px; font-weight:700; color:var(--blue); }
.dc-model { font-size:15px; font-weight:500; color:var(--text); margin-bottom:8px; }
.dc-row { display:flex; justify-content:space-between; font-size:12px; padding:3px 0; border-top:0.5px solid var(--border); }
.dc-row span:first-child { color:var(--text3); }
.dc-row span:last-child { color:var(--text); font-weight:500; text-align:right; max-width:60%; }
.dash-empty { padding:20px; text-align:center; color:var(--text3); font-size:14px; background:var(--surface); border-radius:var(--radius); border:2px solid #0C1F3A; }

/* DASHBOARD TABLE */
.dash-toolbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.dash-count { font-size:13px; color:var(--text2); }
.dash-table { background:var(--surface); border:2px solid #0C1F3A; border-radius:var(--radius); overflow:hidden; }
.dash-thead { display:grid; grid-template-columns:70px 90px 1fr 80px 1fr 1fr; padding:9px 12px; background:var(--bg); font-size:11px; color:var(--text3); text-transform:uppercase; letter-spacing:0.04em; font-weight:500; border-bottom:0.5px solid var(--border); }
.dash-row { display:grid; grid-template-columns:70px 90px 1fr 80px 1fr 1fr; padding:11px 12px; border-bottom:0.5px solid var(--border); align-items:center; cursor:pointer; }
.dash-row:last-child { border-bottom:none; }
.dash-row:active { background:var(--bg); }
.dr-id { font-family:monospace; font-size:13px; font-weight:700; color:var(--blue); }
.dr-name { font-size:13px; color:var(--text); font-weight:500; }
.dr-model { font-size:12px; color:var(--text2); }
.dr-eng { font-size:12px; color:var(--text2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dr-pump { font-size:12px; color:var(--text2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* v11-1782476027 */

/* DASHBOARD SECTION HEADERS */
.dash-section-header { font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:0.05em; color:var(--text2); padding:10px 0 6px; }

/* SEARCH CARDS */

.search-card:active { background:var(--bg); }
.card-top { padding:12px 14px; border-bottom:0.5px solid var(--border); background:var(--bg); }
.top-row { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.top-title { display:flex; align-items:baseline; gap:8px; flex:1; overflow:hidden; flex-wrap:nowrap; }
.jid { font-family:monospace; font-size:17px; font-weight:500; color:var(--blue); white-space:nowrap; }
.sep { font-size:15px; color:var(--border-strong); font-weight:300; }
.jname { font-size:16px; font-weight:500; color:var(--text); white-space:nowrap; }
.jmodel { font-size:14px; font-weight:400; color:var(--text2); white-space:nowrap; }
.jrego { font-size:14px; font-weight:500; color:var(--blue); white-space:nowrap; }
.card-body { display:grid; grid-template-columns:1fr 1fr; }
.left { padding:11px 14px; border-right:0.5px solid var(--border); }
.right { padding:11px 14px; }
.company { font-size:14px; font-weight:500; color:var(--text); margin-bottom:2px; }
.invoice { font-size:12px; color:var(--text2); margin-bottom:8px; }
.kv { margin-bottom:5px; }
.k { font-size:10px; color:var(--text3); text-transform:uppercase; letter-spacing:0.04em; }
.v { font-size:12px; color:var(--text); }
.v.mono { font-family:monospace; font-size:11px; }
.v.red { color:var(--red); font-weight:500; }
.v.grn { color:var(--green); font-weight:500; }
.exp { display:inline-block; font-size:10px; padding:1px 6px; border-radius:8px; margin-left:4px; vertical-align:middle; }
.exp-ok { background:var(--green-light); color:var(--green); }
.exp-red { background:var(--red-light); color:var(--red); }
.badge-arch { background:#D3D1C7; color:#444441; }
.badge-hire { background:#E6F1FB; color:#0C447C; }

/* 2x2 METRICS GRID */
.metrics-2x2 { grid-template-columns: 1fr 1fr; }
.metric-card-orders { cursor: pointer; position: relative; padding-bottom: 22px; }
.metric-plus-btn { position: absolute; bottom: 6px; right: 6px; background: var(--blue); color: white; border: none; border-radius: 5px; width: 20px; height: 20px; font-size: 15px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.metric-val.gray { color: var(--text3); }

/* DASHBOARD ROW WITH BUTTONS */
.dash-row { display: flex; align-items: center; padding: 8px 12px; border-bottom: 0.5px solid var(--border); cursor: pointer; background: var(--surface); }
.dash-row:hover { background: var(--bg); }
.dr-col { font-size: 12px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 10px; }
.dash-row-order { background: var(--green-light); border-color: var(--green); }
.dash-row-reserved { background: var(--amber-light); border-color: var(--amber); }
.dash-row-main { display: flex; align-items: center; padding: 10px 12px; gap: 8px; cursor: pointer; }
.dr-id { font-family: monospace; font-size: 13px; font-weight: 600; color: var(--blue); min-width: 40px; flex-shrink: 0; }
.dash-row-order .dr-id { color: var(--green); }
.dash-row-reserved .dr-id { color: var(--amber); }
.dr-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; overflow: hidden; }
.dr-name { font-size: 13px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dr-sub { font-size: 11px; color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dr-sub-order { color: var(--green); }
.dr-sub-reserved { color: var(--amber); }
.dr-btns { display: flex; gap: 4px; flex-shrink: 0; margin-left: auto; }
.dr-btn-sold { background: var(--navy); color: white; border: none; border-radius: 6px; padding: 5px 11px; font-size: 12px; font-weight: 500; cursor: pointer; white-space: nowrap; }
.dash-row-order .dr-btn-sold { background: var(--green); }
.dash-row-reserved .dr-btn-sold { background: var(--amber); }
.dr-btn-hold { background: var(--surface); color: var(--text2); border: 0.5px solid var(--border); border-radius: 6px; padding: 5px 11px; font-size: 12px; font-weight: 500; cursor: pointer; white-space: nowrap; }
.dr-btn-hold-active { background: var(--amber-light); color: var(--amber); border-color: var(--amber); }
.dash-row-note { padding: 5px 12px 8px; font-size: 12px; color: var(--amber); font-style: italic; border-top: 0.5px solid rgba(133,79,11,0.2); background: rgba(255,255,255,0.4); }

/* ORDERS PAGE */
.orders-header { margin-bottom: 14px; }
.orders-stats { display: flex; align-items: baseline; gap: 4px; }
.orders-stat-val { font-size: 22px; font-weight: 600; color: var(--blue); }
.orders-stat-label { font-size: 13px; color: var(--text2); }
.order-card { background: var(--surface); border: 2px solid #0C1F3A; border-radius: 10px; padding: 14px; margin-bottom: 10px; }
.order-card-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.order-company { font-size: 15px; font-weight: 600; color: var(--text); }
.order-machine { font-size: 13px; color: var(--text2); margin-bottom: 4px; }
.order-notes { font-size: 12px; color: var(--text2); font-style: italic; margin-bottom: 4px; }
.order-date { font-size: 11px; color: var(--text3); }

/* SALES MACHINE LIST */
.sale-machine-row { display:flex; align-items:center; gap:10px; padding:12px 14px; background:var(--surface); border:2px solid #0C1F3A; border-radius:8px; margin-bottom:6px; cursor:pointer; }
.sale-machine-row:hover { background:var(--bg); }
.smr-id { font-family:monospace; font-size:13px; font-weight:600; color:var(--blue); min-width:44px; }
.smr-info { flex:1; }
.smr-name { font-size:14px; font-weight:500; color:var(--text); }
.smr-detail { font-size:12px; color:var(--text2); margin-top:2px; }
.smr-arrow { font-size:20px; color:var(--text3); }

/* CLIENT AUTOCOMPLETE */
.client-suggestions { background:var(--surface); border:0.5px solid var(--border); border-radius:8px; margin-top:4px; }
.client-suggestion { padding:10px 12px; font-size:13px; cursor:pointer; border-bottom:0.5px solid var(--border); }
.client-suggestion:last-child { border-bottom:none; }
.client-suggestion:hover { background:var(--bg); }

/* CLIENTS LIST */
.client-row { display:flex; align-items:center; justify-content:space-between; padding:12px 14px; background:var(--surface); border:2px solid #0C1F3A; border-radius:8px; margin-bottom:6px; cursor:pointer; }
.client-row:hover { background:var(--bg); }
.client-company { font-size:15px; font-weight:500; color:var(--text); }
.client-detail { font-size:12px; color:var(--text2); margin-top:2px; }
.client-meta { display:flex; align-items:center; gap:8px; }
.client-machines { font-size:12px; color:var(--text2); }
.client-arrow { font-size:20px; color:var(--text3); }

/* DASHBOARD ROW CLEANUP */
.dr-right { flex-shrink:0; }

/* SALES CARD GRID */
.sales-card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sale-card { background: var(--surface); border: 2px solid #0C1F3A; border-radius: 8px; padding: 10px 12px; cursor: pointer; }
.sale-card:hover { background: var(--bg); }
.sc-id { font-family: monospace; font-size: 11px; font-weight: 700; color: var(--blue); }
.sc-name { font-size: 13px; font-weight: 500; color: var(--text); margin: 3px 0 2px; }
.sc-detail { font-size: 11px; color: var(--text2); }

/* STOCK PILLS */
.stock-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.stock-pill { font-size: 11px; padding: 3px 10px; border-radius: 12px; background: var(--surface); border: 0.5px solid var(--border); color: var(--text2); cursor: pointer; white-space: nowrap; }
.stock-pill:hover { border-color: var(--blue); color: var(--blue); }
.stock-pill strong { color: var(--text); font-weight: 600; margin-left: 3px; }

/* REVIEW CARDS */
.review-grid { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.review-card { background: var(--surface); border: 2px solid #0C1F3A; border-radius: 8px; padding: 12px; }
.rc-title { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text3); margin-bottom: 8px; }
.rc-row { display: flex; justify-content: space-between; align-items: center; padding: 4px 0; border-bottom: 0.5px solid var(--border); font-size: 13px; }
.rc-row:last-child { border-bottom: none; }
.rc-row span:first-child { color: var(--text2); }
.rc-row span:last-child { color: var(--text); font-weight: 500; text-align: right; }

/* SETTINGS */
.settings-section-header { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text3); padding: 14px 14px 6px; }
.settings-group { background: var(--surface); border: 2px solid #0C1F3A; border-radius: var(--radius); overflow: hidden; margin-bottom: 8px; }
.settings-row { display: flex; align-items: center; padding: 13px 14px; border-bottom: 0.5px solid var(--border); cursor: pointer; gap: 8px; }
.settings-row:last-child { border-bottom: none; }
.settings-row:hover { background: var(--bg); }
.sr-label { font-size: 14px; color: var(--text); flex: 1; }
.sr-val { font-size: 13px; color: var(--text2); }
.sr-arrow { font-size: 18px; color: var(--text3); }

/* REFERENCE LISTS */
.ref-list { background: var(--surface); border: 2px solid #0C1F3A; border-radius: var(--radius); overflow: hidden; }
.ref-list-row { display: flex; align-items: center; padding: 11px 14px; border-bottom: 0.5px solid var(--border); gap: 8px; }
.ref-list-row:last-child { border-bottom: none; }
.rlr-name { flex: 1; font-size: 14px; color: var(--text); }
.rlr-actions { display: flex; gap: 6px; }
.rlr-edit { font-size: 11px; padding: 3px 10px; border: 0.5px solid var(--blue); color: var(--blue); border-radius: 5px; background: transparent; cursor: pointer; }
.rlr-del { font-size: 11px; padding: 3px 10px; border: 0.5px solid var(--red, #A32D2D); color: var(--red, #A32D2D); border-radius: 5px; background: transparent; cursor: pointer; }
.ref-add-btn { width: 100%; margin-top: 10px; padding: 12px; background: var(--surface); border: 0.5px dashed var(--border); border-radius: var(--radius); font-size: 14px; color: var(--blue); cursor: pointer; text-align: center; font-weight: 500; }
.ref-add-btn:hover { background: var(--bg); }

/* ── SEARCH CARDS ── */
.search-card { background: var(--surface); border: 2px solid #0C1F3A; border-radius: var(--radius); margin-bottom: 10px; overflow: hidden; }
.sc-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 12px; border-bottom: 0.5px solid var(--border); background: var(--bg); }
.sc-title { display: flex; align-items: center; gap: 4px; flex: 1; flex-wrap: wrap; }
.sc-id { font-family: monospace; font-size: 13px; font-weight: 700; color: var(--blue); }
.sc-name { font-size: 13px; font-weight: 500; color: var(--text); }
.sc-rego { font-size: 11px; color: var(--text2); }
.sc-sep { color: var(--text3); }
.sc-body { display: grid; grid-template-columns: 1fr 1fr; min-height: 80px; }
.sc-left { border-right: 0.5px solid var(--border); display: flex; flex-direction: column; }
.sc-right { display: flex; flex-direction: column; }
.sc-panel { border-bottom: 0.5px solid var(--border); }
.sc-panel:last-child { border-bottom: none; }
.sc-panel-header { display: flex; align-items: center; justify-content: space-between; padding: 6px 10px; cursor: pointer; user-select: none; }
.sc-panel-title { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text3); }
.sc-panel-arrow { font-size: 12px; color: var(--text3); display: inline-block; transform: rotate(90deg); transition: transform 0.15s; }
.sc-panel-arrow.closed { transform: rotate(0deg); }
.sc-panel-body { padding: 4px 10px 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 8px; }
.sc-panel-body.sc-hidden { display: none; }
.sc-kv { display: flex; flex-direction: column; gap: 1px; }
.sc-k { font-size: 9px; font-weight: 600; color: var(--text3); text-transform: uppercase; letter-spacing: 0.04em; }
.sc-v { font-size: 12px; font-weight: 500; color: var(--text); }
.sc-mono { font-family: monospace; font-size: 11px; }
.sc-warr-val-ok { color: var(--green); }
.sc-warr-val-exp { color: var(--red); }
.sc-warr-tag { font-size: 8px; padding: 1px 4px; border-radius: 3px; margin-left: 2px; }
.sc-warr-ok { background: var(--green-light); color: var(--green); }
.sc-warr-exp { background: var(--red-light); color: var(--red); }
.sc-svc-title { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text3); padding: 6px 10px 3px; border-bottom: 0.5px solid var(--border); }
.sc-svc-empty { font-size: 11px; color: var(--text3); padding: 12px 10px; text-align: center; }
.sc-svc-item { padding: 6px 10px; border-bottom: 0.5px solid var(--border); display: flex; flex-direction: column; gap: 1px; }
.sc-svc-date { font-size: 9px; color: var(--text2); }
.sc-svc-type { font-size: 11px; font-weight: 500; color: var(--text); }
.sc-svc-tech { font-size: 9px; color: var(--text2); }
.sc-svc-btn { display: block; margin: 8px 10px; padding: 6px; border-radius: 6px; border: 0.5px solid var(--blue); color: var(--blue); background: transparent; font-size: 11px; font-weight: 500; text-align: center; cursor: pointer; width: calc(100% - 20px); }

/* CARD DOCS ROW */
.sc-docs { padding: 8px 12px; border-top: 0.5px solid var(--border); background: var(--bg); }
.sc-doc-btn { background: transparent; border: 0.5px solid var(--border); border-radius: var(--radius); padding: 6px 12px; font-size: 12px; color: var(--text2); cursor: pointer; }
.sc-doc-btn:hover { background: var(--surface); }

/* RESPONSIVE CARD BODY */
@media (max-width: 599px) {
  .sc-body { grid-template-columns: 1fr; }
  .sc-left { border-right: none; border-bottom: 0.5px solid var(--border); }
}

/* ── DASHBOARD SCROLLABLE TABLE ── */
.dt-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; width: 100%; }
.dt-table { border-collapse: collapse; min-width: 100%; }
.dt-th { font-size: 10px; font-weight: 600; color: var(--text3); text-transform: uppercase; letter-spacing: 0.05em; padding: 7px 14px; white-space: nowrap; border-bottom: 1px solid var(--border); text-align: left; background: var(--bg); position: sticky; top: 0; z-index: 3; }
.dt-id-th { position: sticky; left: 0; top: 0; z-index: 6; background: var(--bg); border-right: 1px solid var(--border); min-width: 62px; }
.dt-td { font-size: 12px; color: var(--text); padding: 9px 14px; white-space: nowrap; vertical-align: middle; border-bottom: 0.5px solid var(--border); }
.dt-id-cell { position: sticky; left: 0; z-index: 5; border-right: 1px solid var(--border); min-width: 62px; padding: 9px 12px; vertical-align: middle; border-bottom: 0.5px solid var(--border); }
.dt-row { cursor: pointer; }
.dt-row:hover .dt-td,
.dt-row:hover .dt-id-cell { filter: brightness(0.96); }
.dr-id { font-family: monospace; font-weight: 700; color: var(--blue); font-size: 12px; }

/* ── COLUMN CHOOSER ── */
.col-toggle-row { cursor: pointer; justify-content: space-between; }
.col-toggle { width: 18px; height: 18px; cursor: pointer; accent-color: var(--navy); }

/* ── SEARCH CARD HEADER — bigger ── */
.sc-id { font-family: monospace; font-size: 18px; font-weight: 700; color: var(--blue); }
.sc-name { font-size: 18px; font-weight: 600; color: var(--text); }
.sc-rego { font-size: 12px; color: var(--text2); background: var(--bg); padding: 1px 6px; border-radius: 4px; border: 0.5px solid var(--border); }

/* SEARCH CARD DOC LINKS */
.sc-doc-links { border-top: 0.5px solid var(--border); padding: 4px 0; }
.sc-doc-link { padding: 7px 10px; font-size: 12px; color: var(--blue); cursor: pointer; border-bottom: 0.5px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
.sc-doc-link:last-child { border-bottom: none; }
.sc-doc-link:hover { background: var(--bg); }
.sc-doc-soon { color: var(--text2); cursor: default; }
.sc-doc-soon:hover { background: transparent; }
.sc-coming { font-size: 10px; color: var(--text3); background: var(--bg); padding: 1px 6px; border-radius: 4px; border: 0.5px solid var(--border); }

/* BIRTH CERT FORM */
.post-check-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.post-col-title { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--navy); border-bottom: 1px solid var(--orange); padding-bottom: 3px; margin-bottom: 6px; }
.vtog { font-size: 12px; padding: 6px 14px; border-radius: 8px; border: 0.5px solid var(--border); color: var(--text2); background: var(--bg); cursor: pointer; margin-right: 6px; margin-top: 4px; }
.vtog.active { background: var(--navy); color: white; border-color: var(--navy); }

/* ── BIRTH CERTIFICATE FORM ── */
.bc-section { background: var(--surface); border: 2px solid #0C1F3A; border-radius: var(--radius); margin-bottom: 10px; overflow: hidden; }
.bc-section-title { background: var(--bg); color: #0C1F3A; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 7px 14px; border-bottom: 0.5px solid var(--border); }
.bc-sub-title { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: #0C1F3A; border-bottom: 1px solid #D4622A; padding-bottom: 4px; margin-bottom: 6px; margin-top: 4px; }
.bc-section .field { padding: 6px 14px; }
.bc-section .field-row { padding: 0 14px; gap: 8px; }
.bc-section .field:last-child { padding-bottom: 12px; }
.bc-check-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.bc-check-cols > div { padding: 10px 14px; }
.bc-check-cols > div:first-child { border-right: 0.5px solid var(--border); }
.bc-check-cols .check-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text); padding: 3px 0; width: 100%; }
.bc-check-cols .check-item input[type="checkbox"] { width: 14px; height: 14px; accent-color: #0C1F3A; flex-shrink: 0; }

/* ── BIRTH CERT RESPONSIVE ── */
/* Mobile default — single column checklists */
.bc-check-cols { display: flex; flex-direction: column; }
.bc-check-cols > div { padding: 8px 14px; border-bottom: 0.5px solid var(--border); }
.bc-check-cols > div:last-child { border-bottom: none; }
.bc-check-cols > div:first-child { border-right: none; }

/* Desktop/landscape — two columns */
@media (min-width: 600px) {
  .bc-check-cols { display: grid; grid-template-columns: 1fr 1fr; flex-direction: unset; }
  .bc-check-cols > div { border-bottom: none; }
  .bc-check-cols > div:first-child { border-right: 0.5px solid var(--border); }
}

/* Field rows — single col mobile, 2 col desktop */
.bc-section .field-row { display: flex; flex-direction: column; padding: 0 14px; gap: 0; }
@media (min-width: 600px) {
  .bc-section .field-row { flex-direction: row; gap: 8px; }
  .bc-section .field-row .field { flex: 1; }
}

/* ── RECENTLY SOLD LIST ── */
.dash-section-header { font-size:11px; font-weight:700; color:var(--text2); text-transform:uppercase; letter-spacing:0.05em; padding:8px 0 4px; }
.rs-list { background:var(--surface); border:2px solid #0C1F3A; border-radius:var(--radius); overflow:hidden; }
.rs-row { display:flex; align-items:center; gap:10px; padding:10px 14px; border-bottom:0.5px solid var(--border); cursor:pointer; }
.rs-row:last-child { border-bottom:none; }
.rs-row:active { background:var(--surface2); }
.rs-id { font-size:17px; font-weight:700; color:#f97316; min-width:50px; }
.rs-info { flex:1; }
.rs-company { font-size:17px; font-weight:600; color:#0C1F3A; }
.rs-sub { font-size:13px; color:var(--text2); margin-top:1px; }
.rs-badge { background:#FFF3E0; color:#D4622A; font-size:10px; font-weight:700; padding:3px 8px; border-radius:5px; white-space:nowrap; }
.rs-docs { display:flex; gap:6px; margin-top:5px; flex-wrap:wrap; }
.rs-doc-btn { background:var(--surface2); border:0.5px solid var(--border); color:var(--text2); font-size:11px; font-weight:600; padding:3px 8px; border-radius:5px; cursor:pointer; }
.rs-doc-btn:active { background:var(--accent); color:#fff; }

/* ── SALES ENVELOPE CARDS ── */
.sf-bar { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px; }
.sf-btn { background:var(--surface2); border:0.5px solid var(--border); color:var(--text2); font-size:12px; font-weight:600; padding:5px 12px; border-radius:20px; cursor:pointer; white-space:nowrap; }
.sf-btn.sf-active { background:#0C1F3A; color:#fff; border-color:#0C1F3A; }
.sf-btn:active { opacity:0.8; }
.env-grid { display:grid; grid-template-columns:1fr; gap:8px; }
.env-card { background:#fff; border:2px solid #0C1F3A; border-radius:10px; cursor:pointer; overflow:hidden; }
.sale-header { background:#fff; border:2px solid #0C1F3A; border-radius:10px; overflow:hidden; margin-bottom:14px; }
.env-card:active { opacity:0.8; }
.env-header { padding:12px 16px 10px; border-bottom:1px solid #e8eaf0; font-size:17px; font-weight:500; line-height:1.5; }
.env-orange { color:#f97316; font-weight:700; }
.env-navy { color:#0C1F3A; font-weight:600; }
.env-grey { color:#999; font-size:14px; font-weight:400; }
.env-bottom { display:flex; gap:8px; flex-wrap:wrap; padding:10px 16px 12px; background:#EEF4FB; }
.env-tag { font-size:11px; color:#3a5a8a; background:#d6e4f5; padding:2px 8px; border-radius:4px; }
.sh-kv { display:flex; flex-direction:column; min-width:120px; }
.sh-kl { font-size:10px; color:#999; text-transform:uppercase; letter-spacing:0.05em; margin-bottom:2px; }
.sh-kv-v { font-size:13px; font-weight:500; color:#0C1F3A; }
.sale-banner-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px 16px; padding:12px 16px; }
.client-hint { font-size:11px; color:var(--text2); margin-bottom:4px; font-style:italic; }
.client-suggestion { padding:8px 12px; cursor:pointer; border-bottom:0.5px solid var(--border); }
.client-suggestion:last-child { border-bottom:none; }
.client-suggestion:hover { background:var(--surface2); }
.client-suggestion-new { border-top:0.5px solid var(--border); }
.client-suggestions { background:var(--surface); border:0.5px solid var(--border); border-radius:0 0 8px 8px; display:none; }

/* Sale header bigger */


/* ── SALE HEADER FIXES ── */


/* ── ADD REMOTE BUTTON ── */
.bc-add-remote-btn { margin-top:8px; padding:6px 12px; background:none; border:1px dashed #D4622A; color:#D4622A; border-radius:6px; font-size:12px; font-weight:700; cursor:pointer; width:100%; text-align:left; }
.bc-add-remote-btn:hover { background:#FFF3E0; }

/* ── SALES DOC LINKS ── */
.ss-doc-link { display:inline-block; margin:4px 6px; padding:8px 14px; background:var(--blue-light,#E6F1FB); color:#0C1F3A; border-radius:8px; text-decoration:none; font-size:13px; font-weight:600; border:1px solid #0C1F3A22; }
.ss-doc-link:hover { background:#0C1F3A; color:#D4622A; }

.font-size-btn { width:32px; height:32px; border-radius:6px; border:0.5px solid var(--border); background:var(--surface); color:var(--text2); font-size:13px; font-weight:600; cursor:pointer; }
.font-size-btn.active { background:#0C1F3A; color:#fff; border-color:#0C1F3A; }

body.font-S { font-size:13px; }
body.font-M { font-size:15px; }
body.font-L { font-size:17px; }
body.font-S .rs-company, body.font-S .env-header { font-size:15px; }
body.font-L .rs-company, body.font-L .env-header { font-size:19px; }

/* ── Services module ── */
.svc-view-btn { font-size:12px; padding:4px 10px; border-radius:6px; border:1px solid var(--border); background:var(--surface); color:var(--text2); cursor:pointer; }
.svc-view-btn.active { border:2px solid #0C1F3A; color:#0C1F3A; font-weight:600; background:var(--surface); }
.btn-primary { font-size:13px; padding:7px 16px; border-radius:8px; border:none; background:#0C1F3A; color:#fff; cursor:pointer; font-weight:600; }
.btn-primary:active { opacity:0.85; }
.svc-cal-dow { font-size:10px; color:var(--text2); padding:4px 0; }
.svc-cal-cell { padding:4px 2px; text-align:center; cursor:pointer; border-radius:6px; }
.svc-cal-cell:active { background:var(--blue-light); }
.svc-cal-full { cursor:not-allowed; opacity:0.6; }
.svc-cal-prev { opacity:0.25; }
.svc-cal-date { font-size:11px; color:var(--text); padding:2px 0; }
.svc-cal-today { background:#0C1F3A; color:#fff; border-radius:50%; width:18px; height:18px; line-height:18px; margin:0 auto; font-weight:700; }
.svc-cal-sel { color:#0C1F3A; font-weight:700; }
.svc-banner { background:var(--surface); border:2px solid #0C1F3A; border-radius:10px; overflow:hidden; margin-bottom:12px; }
.svc-type-pills { display:flex; flex-wrap:wrap; gap:6px; }
.svc-type-pill { font-size:12px; padding:5px 12px; border-radius:6px; border:1px solid var(--border); background:var(--surface); color:var(--text2); cursor:pointer; }
.svc-type-pill.active { border:2px solid #0C1F3A; color:#0C1F3A; font-weight:600; }
.svc-status-pill { font-size:11px; padding:3px 8px; border-radius:5px; border:1px solid var(--border); color:var(--text2); white-space:nowrap; }
.svc-pill-active { border:2px solid #0C1F3A; color:#0C1F3A; font-weight:600; }
.svc-pill-done { border:2px solid #3B6D11; color:#3B6D11; font-weight:600; }
.font-size-btn-active { background:#0C1F3A !important; color:#fff !important; border-color:#0C1F3A !important; }
.svc-add-slot { border:1.5px dashed var(--border); border-radius:8px; padding:12px; text-align:center; font-size:12px; color:var(--text2); cursor:pointer; margin-top:6px; }
.svc-add-slot:active { background:var(--blue-light); }
.svc-pill-leave { border-color:#A32D2D !important; color:#A32D2D !important; }
/* Per-mechanic bars in month view */
.svc-mbar-wrap { display:flex; flex-direction:column; gap:2px; padding:0 1px; }
.svc-mbar { height:5px; background:#F1EFE8; border-radius:3px; position:relative; overflow:hidden; border:0.5px solid #E0DECF; }
.svc-mbar-leave { position:absolute; top:0; left:0; width:100%; height:100%; background:repeating-linear-gradient(90deg,#D4622A 0,#D4622A 2px,#FFF3E0 2px,#FFF3E0 5px); }
.svc-cal-sel-cell { background:#EEF4FB; border-radius:6px; }
/* ── Day view gap slots ── */
.svc-gap-slot { position:absolute; top:1px; height:calc(100% - 2px); background:#D8D6CE; border:1.5px dashed #AAA9A2; border-radius:5px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background 0.15s; overflow:hidden; }
.svc-gap-slot:hover { background:#C8E8C8; border-color:#3B6D11; }
.svc-gap-slot span { font-size:8px; color:#888; font-weight:600; white-space:nowrap; }
.svc-gap-slot:hover span { color:#3B6D11; }
/* Job block hover */
.svc-job-block { position:absolute; top:0; height:100%; border-radius:5px; cursor:pointer; overflow:hidden; transition:filter 0.15s; }
.svc-job-block:hover { filter:brightness(1.2); outline:2px solid #D4622A; }
.svc-job-block-label { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:9px; font-weight:700; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; width:90%; text-align:center; }
/* Overlay show */
#svc-job-overlay.show { display:flex !important; }
/* ── Sprocket ── */
.sprocket-btn { font-size:18px; background:none; border:none; cursor:pointer; color:var(--text2); padding:4px 6px; border-radius:6px; transition:background 0.15s; line-height:1; }
.sprocket-btn:hover { background:rgba(12,31,58,0.08); color:#0C1F3A; }
/* ── PIN ── */
.pin-dot-el { width:14px; height:14px; border-radius:50%; border:2px solid rgba(255,255,255,0.4); background:transparent; transition:background 0.15s; }
.pin-key { padding:16px; font-size:20px; font-weight:600; color:#0C1F3A; background:#fff; border:none; cursor:pointer; transition:background 0.15s; }
.pin-key:active { background:#EEF4FB; }
.pin-key-0 { }
/* ── Theme buttons ── */
.theme-btn { display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:8px; border:2px solid transparent; background:#fff; cursor:pointer; font-size:13px; color:#0C1F3A; text-align:left; transition:border-color 0.15s; }
.theme-btn:hover { border-color:#D3D1C7; }
.theme-btn.active { border-color:#0C1F3A; background:#EEF4FB; }
.theme-preview { display:flex; align-items:center; }
/* ── Hover envelope ── */
.hover-envelope { transition: left 0.06s, width 0.06s; }