/* Job board styles — extracted from jobs.html and scoped under #jobsView (B1.2). */
/* ── Layout ── */
#jobsView .jobs-wrap{ max-width:1600px; margin:0 auto; padding:20px 28px 60px; }
#jobsView .page-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; flex-wrap:wrap; gap:12px; }
#jobsView .page-title{ font-size:1.35rem; font-weight:800; color:#0d2137; }
#jobsView .page-sub{ font-size:.8rem; color:#6b7280; margin-top:2px; }
/* ── Stats bar ── */
#jobsView .stats-bar{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:14px; }
#jobsView .stat-card{ background:#fff; border-radius:10px; padding:10px 14px; box-shadow:0 1px 4px rgba(0,0,0,.06); border:1.5px solid #f1f5f9; display:flex; align-items:center; gap:10px; }
#jobsView .stat-val{ font-size:1.35rem; font-weight:900; color:#0d2137; line-height:1; }
#jobsView .stat-lbl{ font-size:.65rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:#94a3b8; margin-top:2px; }
#jobsView .stat-val.s-blue{ color:#1d4ed8; }
#jobsView .stat-val.s-green{ color:#15803d; }
#jobsView .stat-val.s-amber{ color:#b45309; }
@media(max-width:600px){ .stats-bar{grid-template-columns:repeat(2,1fr); gap:6px;} }
/* ── Filter bar ── */
#jobsView .filter-bar{ margin-bottom:10px; }
#jobsView .filter-tabs{ display:flex; gap:5px; flex-wrap:nowrap; overflow-x:auto; padding-bottom:4px; scrollbar-width:none; -ms-overflow-style:none; }
#jobsView .filter-tabs::-webkit-scrollbar{ display:none; }
#jobsView .ftab{ padding:5px 11px; border-radius:20px; border:1.5px solid #e2e8f0; background:#fff; font-size:.75rem; font-weight:600; color:#475569; cursor:pointer; transition:all .12s; white-space:nowrap; flex-shrink:0; }
#jobsView .ftab:hover{ border-color:#f97316; color:#f97316; }
#jobsView .ftab.active{ border-color:#f97316; background:#f97316; color:#fff; }
#jobsView .ftab .cnt{ display:inline-block; background:rgba(0,0,0,.1); border-radius:8px; padding:0 5px; font-size:.65rem; margin-left:3px; }
#jobsView .ftab.active .cnt{ background:rgba(255,255,255,.22); }
/* ── Job list ── */
#jobsView .job-list{ background:#fff; border-radius:12px; box-shadow:0 2px 10px rgba(0,0,0,.06); overflow:hidden; }
#jobsView .jl-header, #jobsView .jl-row{
display:grid;
grid-template-columns: 140px 1fr 1fr 88px 44px 32px;
align-items:center;
padding:0 14px;
}
#jobsView .jl-header{ background:#f8fafc; border-bottom:1px solid #f1f5f9; min-height:34px; }
#jobsView .jl-hcol{ font-size:.64rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:#94a3b8; }
#jobsView .jl-row{
min-height:62px;
border-bottom:1px solid #f8fafc;
cursor:pointer;
transition:background .1s;
position:relative;
}
#jobsView .jl-row:last-child{ border-bottom:none; }
#jobsView .jl-row:hover{ background:#fafbfc; }
#jobsView .jl-row:hover .jl-actions{ opacity:1; }
#jobsView .jl-row.overdue{ background:#fffbeb; }
#jobsView .jl-row.overdue:hover{ background:#fef9ee; }
#jobsView .jl-row.active-row{ background:#fff7ed !important; }
#jobsView .jl-row.overdue::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:#f97316; }
/* ── Status pill + popover ── */
#jobsView .status-pill{
display:inline-flex; align-items:center;
padding:5px 11px; border-radius:20px;
font-size:.73rem; font-weight:700; letter-spacing:.02em;
cursor:pointer; border:none; outline:none;
transition:filter .12s, box-shadow .12s;
position:relative; white-space:nowrap;
}
#jobsView .status-pill:hover{ filter:brightness(.92); }
#jobsView .status-pill:focus-visible{ box-shadow:0 0 0 3px rgba(249,115,22,.25); }
#jobsView .sp-received{ background:#f1f5f9; color:#475569; }
#jobsView .sp-initial_inspection{ background:#e0f2fe; color:#0369a1; }
#jobsView .sp-estimate_submitted{ background:#fef3c7; color:#b45309; }
#jobsView .sp-estimate_approved{ background:#dcfce7; color:#15803d; }
#jobsView .sp-supplement_pending{ background:#ffedd5; color:#c2410c; }
#jobsView .sp-supplement_approved{ background:#ccfbf1; color:#0f766e; }
#jobsView .sp-in_progress{ background:#dbeafe; color:#1d4ed8; }
#jobsView .sp-final_inspection{ background:#ede9fe; color:#6d28d9; }
#jobsView .sp-ready{ background:#d1fae5; color:#065f46; }
#jobsView .sp-completed{ background:#f8fafc; color:#64748b; }
/* Legacy */
#jobsView .sp-diagnosed{ background:#e0f2fe; color:#0369a1; }
#jobsView .sp-awaiting_approval{ background:#fef3c7; color:#b45309; }
#jobsView .pill-popover{
position:absolute; top:calc(100% + 6px); left:0; z-index:200;
background:#fff; border-radius:10px; padding:5px; min-width:175px;
box-shadow:0 8px 28px rgba(0,0,0,.15); border:1px solid #f1f5f9;
}
#jobsView .pp-option{
display:flex; align-items:center; gap:8px;
padding:8px 10px; border-radius:7px; cursor:pointer;
font-size:.82rem; font-weight:600; color:#334155;
transition:background .1s; border:none; background:none; width:100%; text-align:left;
}
#jobsView .pp-option:hover{ background:#f8fafc; }
#jobsView .pp-option.pp-current{ color:#f97316; }
#jobsView .pp-dot{ width:8px; height:8px; border-radius:50%; flex-shrink:0; }
/* ── Customer / Vehicle cells ── */
#jobsView .jl-cust-name{ font-size:.88rem; font-weight:700; color:#0d2137; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#jobsView .jl-cust-sub{ font-size:.74rem; color:#64748b; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#jobsView .jl-veh-str{ font-size:.84rem; font-weight:600; color:#334155; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#jobsView .jl-veh-ro{ font-size:.73rem; color:#94a3b8; margin-top:2px; }
#jobsView .jl-no-veh{ font-size:.82rem; color:#cbd5e1; font-style:italic; }
/* ── Amount / Age ── */
#jobsView .jl-amt{ font-size:.86rem; font-weight:700; color:#0d2137; }
#jobsView .jl-amt.empty{ color:#cbd5e1; }
#jobsView .jl-age{ font-size:.74rem; font-weight:700; color:#94a3b8; }
#jobsView .jl-age.warn{ color:#b45309; }
#jobsView .jl-age.alert{ color:#dc2626; }
/* ── ⋯ Context menu ── */
#jobsView .jl-actions{ opacity:0; transition:opacity .1s; position:relative; display:flex; justify-content:center; align-items:center; }
#jobsView .ctx-btn{ width:30px; height:30px; border:none; background:none; border-radius:7px; cursor:pointer; color:#94a3b8; font-size:1.15rem; display:flex; align-items:center; justify-content:center; transition:all .1s; letter-spacing:.05em; }
#jobsView .ctx-btn:hover{ background:#f1f5f9; color:#475569; }
#jobsView .ctx-menu{
position:absolute; top:calc(100% + 4px); right:0; z-index:200;
background:#fff; border-radius:10px; padding:5px; min-width:155px;
box-shadow:0 8px 28px rgba(0,0,0,.15); border:1px solid #f1f5f9;
}
#jobsView .ctx-item{
display:flex; align-items:center; gap:8px;
padding:8px 10px; border-radius:7px; cursor:pointer;
font-size:.82rem; font-weight:600; color:#334155;
transition:background .1s; border:none; background:none; width:100%; text-align:left;
}
#jobsView .ctx-item:hover{ background:#f8fafc; }
#jobsView .ctx-item.danger{ color:#dc2626; }
#jobsView .ctx-item.danger:hover{ background:#fef2f2; }
/* ── Empty ── */
#jobsView .jl-empty{ text-align:center; color:#94a3b8; font-style:italic; padding:48px 20px; font-size:.88rem; }
/* ── Buttons ── */
#jobsView .btn-primary{ display:inline-flex; align-items:center; gap:7px; padding:10px 20px; border-radius:10px; border:none; background:#f97316; color:#fff; font-size:.88rem; font-weight:700; cursor:pointer; transition:background .13s; white-space:nowrap; }
#jobsView .btn-primary:hover{ background:#ea580c; }
#jobsView .view-toggle{ display:flex; gap:3px; background:#f1f5f9; border-radius:10px; padding:3px; }
#jobsView .view-toggle-btn{ padding:5px 13px; border-radius:8px; border:none; background:transparent; font-size:.79rem; font-weight:600; color:#64748b; cursor:pointer; transition:all .12s; }
#jobsView .view-toggle-btn.active{ background:#fff; color:#f97316; box-shadow:0 1px 4px rgba(0,0,0,.1); }
/* ── Side Panel ── */
#jobsView .sp-overlay{ position:fixed; inset:0; background:rgba(15,23,42,.3); z-index:50; }
#jobsView .sp-overlay.hidden{ display:none; }
#jobsView .side-panel{ position:fixed; right:0; top:0; bottom:0; width:500px; max-width:100vw; background:#fff; box-shadow:-6px 0 40px rgba(0,0,0,.14); z-index:51; display:flex; flex-direction:column; transform:translateX(100%); transition:transform .22s cubic-bezier(.4,0,.2,1); }
#jobsView .side-panel.open{ transform:translateX(0); }
#jobsView .sp-header{ display:flex; align-items:flex-start; justify-content:space-between; padding:18px 20px 14px; border-bottom:1px solid #f1f5f9; flex-shrink:0; gap:12px; }
#jobsView .sp-title{ flex:1; min-width:0; }
#jobsView .sp-cust-name{ font-size:1.05rem; font-weight:800; color:#0d2137; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#jobsView .sp-vehicle{ font-size:.82rem; color:#64748b; margin-top:3px; }
#jobsView .sp-close{ width:32px; height:32px; border-radius:8px; border:1.5px solid #e2e8f0; background:#fff; color:#64748b; font-size:1.2rem; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; line-height:1; }
#jobsView .sp-close:hover{ background:#f8fafc; border-color:#cbd5e1; }
#jobsView .sp-tabs{ display:flex; border-bottom:2px solid #f1f5f9; flex-shrink:0; overflow-x:auto; }
#jobsView .sp-tab{ flex:1; padding:11px 6px; font-size:.79rem; font-weight:700; color:#94a3b8; background:none; border:none; border-bottom:2.5px solid transparent; cursor:pointer; transition:all .12s; margin-bottom:-2px; text-align:center; white-space:nowrap; }
#jobsView .sp-tab:hover{ color:#475569; }
#jobsView .sp-tab.active{ color:#f97316; border-bottom-color:#f97316; }
#jobsView .sp-body{ flex:1; overflow-y:auto; padding:20px; }
#jobsView .sp-section{ margin-bottom:22px; }
#jobsView .sp-section-label{ font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:#94a3b8; margin-bottom:10px; }
#jobsView .sp-grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
#jobsView .sp-grid-3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; }
#jobsView .sp-full{ grid-column:1/-1; }
/* ── Mobile: bottom sheet ── */
@media(max-width:640px){
#jobsView .jobs-wrap{ padding:12px 12px 60px; }
#jobsView .page-title{ font-size:1.2rem; }
#jobsView .side-panel{
top:auto; right:0; left:0; bottom:0;
width:100%; height:92vh; max-height:92vh;
border-radius:18px 18px 0 0;
box-shadow:0 -6px 40px rgba(0,0,0,.18);
transform:translateY(100%);
}
#jobsView .side-panel.open{ transform:translateY(0); }
#jobsView .sp-header{ position:relative; padding:20px 14px 12px; }
#jobsView .sp-header::before{ content:''; position:absolute; top:8px; left:50%; transform:translateX(-50%); width:36px; height:4px; background:#e2e8f0; border-radius:2px; }
#jobsView .sp-grid-2,#jobsView .sp-grid-3{ grid-template-columns:1fr; }
/* Compact rows on mobile */
#jobsView .jl-header{ display:none; }
#jobsView .jl-row{ grid-template-columns:auto 1fr auto; grid-template-rows:auto auto; padding:10px 12px; gap:3px 8px; min-height:auto; }
#jobsView .jl-col-status{ grid-row:1; grid-column:1; }
#jobsView .jl-col-cust{ grid-row:1; grid-column:2; }
#jobsView .jl-col-veh{ grid-row:2; grid-column:1 / span 2; }
#jobsView .jl-col-amt{ grid-row:1; grid-column:3; text-align:right; }
#jobsView .jl-col-age{ display:none; }
#jobsView .jl-actions{ grid-row:2; grid-column:3; opacity:1; justify-content:flex-end; }
#jobsView .jl-cust-sub{ display:none; }
#jobsView .jl-veh-ro{ display:none; }
#jobsView .stat-card{ padding:8px 10px; gap:7px; }
#jobsView .stat-val{ font-size:1.15rem; }
}
/* ── Insurance panel ── */
#jobsView .ins-panel-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
#jobsView .ins-panel-title{ font-size:.85rem; font-weight:800; color:#0d2137; display:flex; align-items:center; gap:7px; }
#jobsView .btn-new-ins{ display:inline-flex; align-items:center; gap:5px; padding:6px 14px; border-radius:8px; border:none; background:#6366f1; color:#fff; font-size:.78rem; font-weight:700; cursor:pointer; transition:background .13s; }
#jobsView .btn-new-ins:hover{ background:#4f46e5; }
#jobsView .ins-empty{ font-size:.83rem; color:#94a3b8; font-style:italic; padding:8px 0; }
#jobsView .ins-card{ border:1.5px solid #e2e8f0; border-radius:10px; padding:12px 14px; margin-bottom:10px; background:#fff; }
#jobsView .ins-card-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
#jobsView .ins-card-left{ flex:1; min-width:0; }
#jobsView .ins-type-badge{ display:inline-block; padding:3px 9px; border-radius:10px; font-size:.7rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; margin-bottom:6px; }
#jobsView .itype-coverage{ background:#eff6ff; color:#1d4ed8; }
#jobsView .itype-estimate{ background:#fff7ed; color:#c2410c; }
#jobsView .itype-parts{ background:#f5f3ff; color:#6d28d9; }
#jobsView .itype-payment{ background:#f0fdf4; color:#15803d; }
#jobsView .itype-reimburse{ background:#f0fdfa; color:#0f766e; }
#jobsView .itype-other{ background:#f8fafc; color:#475569; }
#jobsView .ins-carrier{ font-size:.88rem; font-weight:700; color:#0d2137; }
#jobsView .ins-meta{ font-size:.76rem; color:#64748b; margin-top:2px; }
#jobsView .ins-status-badge{ display:inline-flex; align-items:center; gap:4px; padding:3px 9px; border-radius:10px; font-size:.72rem; font-weight:700; margin-top:6px; }
#jobsView .ist-draft{ background:#f1f5f9; color:#64748b; }
#jobsView .ist-sent{ background:#eff6ff; color:#2563eb; }
#jobsView .ist-awaiting_response{ background:#fffbeb; color:#b45309; }
#jobsView .ist-responded{ background:#f0fdf4; color:#15803d; }
#jobsView .ist-resolved{ background:#f8fafc; color:#334155; }
#jobsView .ins-card-actions{ display:flex; gap:5px; flex-wrap:wrap; margin-top:10px; }
#jobsView .ins-act-btn{ padding:4px 10px; border-radius:6px; font-size:.74rem; font-weight:700; border:1.5px solid #e2e8f0; background:#fff; color:#475569; cursor:pointer; transition:all .12s; }
#jobsView .ins-act-btn:hover{ border-color:#3b82f6; color:#2563eb; background:#eff6ff; }
#jobsView .ins-act-btn.primary{ background:#6366f1; border-color:#6366f1; color:#fff; }
#jobsView .ins-act-btn.primary:hover{ background:#4f46e5; }
#jobsView .ins-act-btn.success{ background:#22c55e; border-color:#22c55e; color:#fff; }
#jobsView .ins-act-btn.success:hover{ background:#16a34a; }
#jobsView .ins-act-btn.danger:hover{ border-color:#dc2626; color:#dc2626; background:#fef2f2; }
#jobsView .ins-notes-field{ margin-top:8px; width:100%; padding:7px 10px; border-radius:7px; border:1.5px solid #e2e8f0; font-family:inherit; font-size:.82rem; color:#1e293b; outline:none; resize:none; min-height:50px; box-sizing:border-box; }
#jobsView .ins-notes-field:focus{ border-color:#6366f1; }
/* ── Notes ── */
#jobsView .notes-label{ font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:#94a3b8; margin-bottom:6px; }
#jobsView .notes-textarea{ width:100%; padding:10px 12px; border-radius:8px; border:1.5px solid #e2e8f0; font-family:inherit; font-size:.88rem; resize:vertical; min-height:100px; color:#1e293b; outline:none; transition:border-color .15s; box-sizing:border-box; }
#jobsView .notes-textarea:focus{ border-color:#f97316; }
#jobsView .notes-save{ margin-top:8px; padding:8px 18px; border-radius:7px; border:none; background:#f97316; color:#fff; font-size:.82rem; font-weight:700; cursor:pointer; }
#jobsView .notes-save:hover{ background:#ea580c; }
#jobsView .notes-hint{ font-size:.75rem; color:#94a3b8; margin-top:6px; }
/* ── Files panel ── */
#jobsView .files-panel-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; flex-wrap:wrap; gap:8px; }
#jobsView .files-panel-title{ font-size:.85rem; font-weight:800; color:#0d2137; }
#jobsView .folder-tabs-wrap{ display:flex; gap:5px; flex-wrap:wrap; }
#jobsView .folder-tab{ padding:4px 12px; border-radius:16px; border:1.5px solid #e2e8f0; background:#fff; font-size:.75rem; font-weight:600; color:#475569; cursor:pointer; transition:all .12s; }
#jobsView .folder-tab:hover{ border-color:#0ea5e9; color:#0ea5e9; }
#jobsView .folder-tab.active{ border-color:#0ea5e9; background:#0ea5e9; color:#fff; }
#jobsView .folder-tab .fcnt{ display:inline-block; background:rgba(0,0,0,.12); border-radius:8px; padding:0 5px; font-size:.68rem; margin-left:3px; }
#jobsView .folder-tab.active .fcnt{ background:rgba(255,255,255,.25); }
#jobsView .files-empty{ font-size:.83rem; color:#94a3b8; font-style:italic; padding:8px 0; }
#jobsView .file-item{ display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:8px; border:1.5px solid #f1f5f9; background:#fff; margin-bottom:6px; }
#jobsView .file-icon{ font-size:1.2rem; flex-shrink:0; }
#jobsView .file-info{ flex:1; min-width:0; }
#jobsView .file-name{ font-size:.84rem; font-weight:600; color:#1e293b; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#jobsView .file-meta{ font-size:.73rem; color:#94a3b8; margin-top:1px; }
#jobsView .file-actions{ display:flex; gap:5px; flex-shrink:0; }
#jobsView .btn-file-dl{ padding:4px 10px; border-radius:6px; border:1.5px solid #e2e8f0; background:#fff; font-size:.74rem; font-weight:600; color:#475569; cursor:pointer; }
#jobsView .btn-file-dl:hover{ border-color:#3b82f6; color:#2563eb; background:#eff6ff; }
#jobsView .btn-file-del{ padding:4px 8px; border-radius:6px; border:1.5px solid transparent; background:transparent; font-size:.74rem; font-weight:600; color:#94a3b8; cursor:pointer; }
#jobsView .btn-file-del:hover{ border-color:#dc2626; color:#dc2626; background:#fef2f2; }
#jobsView .files-upload-bar{ display:flex; align-items:center; gap:10px; margin-top:12px; flex-wrap:wrap; }
#jobsView .folder-select-sm{ border:1.5px solid #e2e8f0; border-radius:7px; padding:5px 10px; font-size:.8rem; font-weight:600; color:#334155; background:#fff; cursor:pointer; outline:none; }
#jobsView .btn-upload-file{ display:inline-flex; align-items:center; gap:5px; padding:6px 14px; border-radius:8px; border:1.5px solid #0ea5e9; background:#fff; color:#0ea5e9; font-size:.78rem; font-weight:700; cursor:pointer; transition:all .12s; }
#jobsView .btn-upload-file:hover{ background:#0ea5e9; color:#fff; }
#jobsView .upload-progress{ font-size:.78rem; color:#94a3b8; }
/* ── Modals ── */
#jobsView .modal-overlay{ position:fixed; inset:0; background:rgba(15,23,42,.45); display:flex; align-items:center; justify-content:center; z-index:100; padding:20px; }
#jobsView .modal-overlay.hidden{ display:none; }
#jobsView .modal-box{ background:#fff; border-radius:18px; padding:28px; width:100%; max-width:580px; max-height:90vh; overflow-y:auto; box-shadow:0 20px 60px rgba(0,0,0,.18); }
#jobsView .modal-box.wide{ max-width:680px; }
#jobsView .modal-title{ font-size:1.1rem; font-weight:800; color:#0d2137; margin-bottom:18px; }
#jobsView .form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
#jobsView .form-grid .full{ grid-column:1/-1; }
#jobsView .form-group label{ display:block; font-size:.77rem; font-weight:700; color:#475569; margin-bottom:4px; }
#jobsView .form-group label .req{ color:#dc2626; }
#jobsView .form-group input, #jobsView .form-group select, #jobsView .form-group textarea{ width:100%; padding:9px 12px; border-radius:8px; border:1.5px solid #e2e8f0; font-family:inherit; font-size:.88rem; color:#1e293b; outline:none; transition:border-color .15s; box-sizing:border-box; }
#jobsView .form-group input:focus, #jobsView .form-group select:focus, #jobsView .form-group textarea:focus{ border-color:#f97316; }
#jobsView .modal-footer{ display:flex; gap:10px; justify-content:flex-end; margin-top:20px; }
#jobsView .btn-cancel{ padding:9px 20px; border-radius:8px; border:1.5px solid #e2e8f0; background:#fff; color:#475569; font-size:.88rem; font-weight:600; cursor:pointer; }
#jobsView .btn-cancel:hover{ background:#f8fafc; }
#jobsView .modal-error{ color:#dc2626; font-size:.82rem; margin-top:8px; }
/* ── Copy email modal ── */
#jobsView .copy-field-label{ font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:#94a3b8; margin-bottom:4px; }
#jobsView .copy-field{ background:#f8fafc; border:1.5px solid #e2e8f0; border-radius:8px; padding:10px 12px; font-size:.84rem; color:#334155; margin-bottom:12px; white-space:pre-wrap; word-break:break-word; max-height:200px; overflow-y:auto; }
#jobsView .copy-all-btn{ display:inline-flex; align-items:center; gap:6px; padding:9px 20px; border-radius:8px; border:none; background:#6366f1; color:#fff; font-size:.88rem; font-weight:700; cursor:pointer; }
#jobsView .copy-all-btn:hover{ background:#4f46e5; }
#jobsView .copy-hint{ font-size:.78rem; color:#94a3b8; margin-top:10px; }
/* ── Attachment / Send modal ── */
#jobsView .attach-section{ border:1.5px dashed #e2e8f0; border-radius:10px; padding:12px; }
#jobsView .attach-files-label{ font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:#94a3b8; margin-bottom:6px; }
#jobsView .attach-file-check{ display:flex; align-items:center; gap:8px; padding:5px 6px; border-radius:6px; margin-bottom:3px; }
#jobsView .attach-file-check:hover{ background:#f8fafc; }
#jobsView .attach-file-check input{ width:auto; accent-color:#6366f1; flex-shrink:0; }
#jobsView .attach-file-check label{ font-size:.82rem; color:#334155; cursor:pointer; flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#jobsView .attach-file-check .att-sz{ font-size:.72rem; color:#94a3b8; flex-shrink:0; }
#jobsView .attach-photos-row{ display:flex; align-items:center; gap:10px; margin-top:10px; flex-wrap:wrap; }
#jobsView .photo-thumb-att{ position:relative; width:54px; height:54px; border-radius:7px; overflow:hidden; border:2px solid #e2e8f0; flex-shrink:0; }
#jobsView .photo-thumb-att img{ width:100%; height:100%; object-fit:cover; }
#jobsView .photo-thumb-att .rm-ph{ position:absolute; top:1px; right:1px; width:16px; height:16px; background:#dc2626; border:none; border-radius:50%; color:#fff; font-size:11px; font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center; line-height:1; padding:0; }
#jobsView .attach-size-bar{ margin-top:8px; font-size:.76rem; min-height:1em; }
#jobsView .sbar-ok{ color:#16a34a; }
#jobsView .sbar-warn{ color:#b45309; }
#jobsView .sbar-over{ color:#dc2626; font-weight:700; }
#jobsView .send-summary{ background:#f8fafc; border-radius:8px; padding:10px 12px; margin-bottom:14px; font-size:.84rem; line-height:1.6; }
/* ── Reminder row ── */
#jobsView .reminder-row{ display:flex; align-items:center; gap:10px; margin-top:4px; }
#jobsView .reminder-row input[type=checkbox]{ width:auto; accent-color:#6366f1; }
#jobsView .reminder-row input[type=number]{ width:60px; }
#jobsView .reminder-row label{ font-size:.83rem; font-weight:600; color:#475569; cursor:pointer; }
/* ── RO Number ── */
#jobsView .ro-row{ display:flex; align-items:center; gap:7px; }
#jobsView .ro-display{ font-size:1rem; font-weight:800; color:#0d2137; letter-spacing:.03em; min-width:48px; }
#jobsView .ro-display.empty{ color:#94a3b8; font-weight:400; font-size:.88rem; }
#jobsView .ro-edit-btn{ padding:3px 9px; border-radius:6px; border:1.5px solid #e2e8f0; background:#fff; font-size:.78rem; color:#475569; cursor:pointer; }
#jobsView .ro-edit-btn:hover{ border-color:#f97316; color:#f97316; }
#jobsView .ro-clear-btn{ padding:3px 7px; border-radius:6px; border:1.5px solid transparent; background:transparent; font-size:.88rem; color:#94a3b8; cursor:pointer; line-height:1; }
#jobsView .ro-clear-btn:hover{ border-color:#dc2626; color:#dc2626; background:#fef2f2; }
#jobsView .ro-edit-row{ display:flex; align-items:center; gap:6px; margin-top:7px; }
#jobsView .ro-edit-row input{ flex:1; padding:7px 10px; border-radius:7px; border:1.5px solid #f97316; font-family:inherit; font-size:.9rem; font-weight:700; color:#0d2137; outline:none; width:100px; box-sizing:border-box; }
#jobsView .ro-save-btn{ padding:6px 14px; border-radius:7px; border:none; background:#f97316; color:#fff; font-size:.8rem; font-weight:700; cursor:pointer; white-space:nowrap; }
#jobsView .ro-save-btn:hover{ background:#ea580c; }
#jobsView .ro-cancel-btn{ padding:6px 10px; border-radius:7px; border:1.5px solid #e2e8f0; background:#fff; color:#64748b; font-size:.8rem; font-weight:600; cursor:pointer; }
#jobsView .ro-col{ font-weight:700; color:#0d2137; font-size:.88rem; white-space:nowrap; }
#jobsView .ro-col.empty{ color:#cbd5e1; font-weight:400; font-size:.8rem; }
/* ── View toggle ── */
#jobsView .view-toggle{ display:flex; gap:4px; background:#f1f5f9; border-radius:10px; padding:3px; }
#jobsView .view-toggle-btn{ padding:5px 14px; border-radius:8px; border:none; background:transparent; font-size:.8rem; font-weight:600; color:#64748b; cursor:pointer; transition:all .12s; }
#jobsView .view-toggle-btn.active{ background:#fff; color:#f97316; box-shadow:0 1px 4px rgba(0,0,0,.1); }
/* ── Kanban ── */
#jobsView .kanban-board{ display:flex; gap:14px; overflow-x:auto; padding-bottom:12px; min-height:300px; align-items:flex-start; }
#jobsView .kanban-col{ flex:0 0 220px; background:#f8fafc; border-radius:12px; padding:12px; min-height:200px; }
#jobsView .kanban-col-header{ font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.07em; color:#94a3b8; margin-bottom:10px; display:flex; align-items:center; justify-content:space-between; }
#jobsView .kanban-col-count{ background:#e2e8f0; border-radius:10px; padding:1px 7px; font-size:.69rem; font-weight:700; color:#64748b; }
#jobsView .kanban-card{ background:#fff; border-radius:9px; padding:10px 12px; margin-bottom:8px; box-shadow:0 1px 4px rgba(0,0,0,.07); border:1.5px solid #f1f5f9; cursor:pointer; transition:all .12s; }
#jobsView .kanban-card:hover{ border-color:#f97316; box-shadow:0 2px 8px rgba(249,115,22,.12); }
#jobsView .kanban-card.urgent{ border-color:#fbbf24; background:#fffbeb; }
#jobsView .kanban-card.overdue{ border-color:#fca5a5; background:#fef2f2; }
#jobsView .kc-ro{ font-size:.72rem; font-weight:700; color:#94a3b8; margin-bottom:3px; }
#jobsView .kc-name{ font-size:.88rem; font-weight:700; color:#0d2137; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#jobsView .kc-vehicle{ font-size:.76rem; color:#64748b; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#jobsView .kc-days{ font-size:.7rem; font-weight:600; color:#94a3b8; margin-top:5px; }
#jobsView .kc-days.warn{ color:#b45309; }
#jobsView .kc-days.alert{ color:#dc2626; }
#jobsView .kanban-empty{ font-size:.78rem; color:#cbd5e1; font-style:italic; text-align:center; padding:16px 0; }
/* ── Timeline ── */
#jobsView .tl-list{ list-style:none; padding:0; margin:0; }
#jobsView .tl-item{ display:flex; gap:12px; padding:10px 0; border-bottom:1px solid #f8fafc; position:relative; }
#jobsView .tl-item:last-child{ border-bottom:none; }
#jobsView .tl-line{ position:absolute; left:5px; top:20px; bottom:-10px; width:2px; background:#f1f5f9; }
#jobsView .tl-item:last-child .tl-line{ display:none; }
#jobsView .tl-dot{ width:12px; height:12px; border-radius:50%; flex-shrink:0; margin-top:3px; z-index:1; }
#jobsView .tl-dot.status_change{ background:#f97316; }
#jobsView .tl-dot.approved{ background:#16a34a; }
#jobsView .tl-dot.declined{ background:#ef4444; }
#jobsView .tl-dot.approval_sent{ background:#6366f1; }
#jobsView .tl-dot.note{ background:#94a3b8; }
#jobsView .tl-dot.note_updated{ background:#94a3b8; }
#jobsView .tl-dot.created{ background:#0d2137; }
#jobsView .tl-dot.invoice{ background:#7c3aed; }
#jobsView .tl-content{ flex:1; min-width:0; }
#jobsView .tl-event{ font-size:.83rem; font-weight:600; color:#0d2137; }
#jobsView .tl-note{ font-size:.78rem; color:#64748b; margin-top:2px; }
#jobsView .tl-time{ font-size:.72rem; color:#94a3b8; margin-top:3px; }
#jobsView .tl-add-note{ display:flex; gap:8px; margin-top:16px; }
#jobsView .tl-add-note input{ flex:1; border:1.5px solid #e2e8f0; border-radius:8px; padding:8px 12px; font-size:.83rem; }
#jobsView .tl-add-note input:focus{ outline:none; border-color:#f97316; }
#jobsView .tl-add-note button{ flex-shrink:0; }
/* ── Approval section ── */
#jobsView .approval-sent-badge{ display:inline-flex; align-items:center; gap:5px; padding:4px 10px; background:#eff6ff; color:#2563eb; border-radius:20px; font-size:.74rem; font-weight:700; }
/* ── Supplement tracker ── */
#jobsView .sup-row{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; }
#jobsView .sup-approved{ border-color:#22c55e !important; }
#jobsView .sup-approved:focus{ border-color:#16a34a !important; }
/* ── Toggle switch ── */
#jobsView .toggle-row{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
#jobsView .toggle-label{ font-size:.84rem; font-weight:600; color:#334155; flex:1; }
#jobsView .toggle-switch{ position:relative; width:40px; height:22px; flex-shrink:0; }
#jobsView .toggle-switch input{ opacity:0; width:0; height:0; }
#jobsView .toggle-slider{ position:absolute; inset:0; background:#cbd5e1; border-radius:11px; cursor:pointer; transition:background .2s; }
#jobsView .toggle-slider::before{ content:''; position:absolute; left:3px; top:3px; width:16px; height:16px; background:#fff; border-radius:50%; transition:transform .2s; }
#jobsView .toggle-switch input:checked + .toggle-slider{ background:#f97316; }
#jobsView .toggle-switch input:checked + .toggle-slider::before{ transform:translateX(18px); }
/* ── Checklist ── */
#jobsView .checklist-item{ display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid #f1f5f9; }
#jobsView .checklist-item:last-child{ border-bottom:none; }
#jobsView .checklist-item input[type=checkbox]{ width:18px; height:18px; accent-color:#16a34a; flex-shrink:0; cursor:pointer; }
#jobsView .checklist-item label{ font-size:.88rem; font-weight:600; color:#334155; cursor:pointer; flex:1; }
#jobsView .checklist-item label.done{ text-decoration:line-through; color:#94a3b8; }
/* ── Notify channel selector ── */
#jobsView .notify-pills{ display:flex; gap:6px; }
#jobsView .notify-pill{ padding:5px 14px; border-radius:20px; border:1.5px solid #e2e8f0; background:#fff; font-size:.8rem; font-weight:700; color:#64748b; cursor:pointer; transition:all .13s; }
#jobsView .notify-pill.active{ border-color:#f97316; background:#fff7ed; color:#c2410c; }
#jobsView .notify-pill:hover:not(.active){ border-color:#f97316; color:#f97316; }
/* ── Toast ── */
#jobsView #toast{ position:fixed; bottom:24px; right:24px; background:#1e293b; color:#fff; padding:10px 18px; border-radius:10px; font-size:.84rem; font-weight:600; opacity:0; transition:opacity .2s; pointer-events:none; z-index:300; }
#jobsView #toast.show{ opacity:1; }
/* ── Reminder strip ── */
#jobsView .reminder-strip{ background:#fff; border-radius:12px; border:1.5px solid #fde68a; padding:10px 14px; margin-bottom:14px; display:flex; align-items:center; gap:10px; box-shadow:0 1px 4px rgba(0,0,0,.05); }
#jobsView .reminder-strip-label{ font-size:.74rem; font-weight:800; text-transform:uppercase; letter-spacing:.07em; color:#b45309; flex-shrink:0; display:flex; align-items:center; gap:5px; }
#jobsView .reminder-chips{ display:flex; gap:7px; overflow-x:auto; flex:1; padding:2px 0; scrollbar-width:none; -ms-overflow-style:none; }
#jobsView .reminder-chips::-webkit-scrollbar{ display:none; }
#jobsView .rem-chip{ display:inline-flex; align-items:center; gap:5px; padding:5px 11px; border-radius:20px; font-size:.76rem; font-weight:700; cursor:pointer; border:none; white-space:nowrap; transition:filter .12s; flex-shrink:0; }
#jobsView .rem-chip:hover{ filter:brightness(.93); }
#jobsView .rem-chip.urgent{ background:#fef2f2; color:#dc2626; }
#jobsView .rem-chip.warning{ background:#fef3c7; color:#b45309; }
#jobsView .rem-chip.info{ background:#eff6ff; color:#1d4ed8; }
#jobsView .rem-chip.manual{ background:#f5f3ff; color:#6d28d9; }
/* Reminder accordion (collapsed by default, vertical list when open) */
#jobsView .reminder-acc{ background:#fff; border:1.5px solid #fde68a; border-radius:12px; margin-bottom:14px; box-shadow:0 1px 4px rgba(0,0,0,.05); overflow:hidden; }
#jobsView .rem-acc-head{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:11px 14px; background:#fffbeb; border:none; cursor:pointer; font-family:inherit; }
#jobsView .rem-acc-head:hover{ background:#fef3c7; }
#jobsView .rem-acc-title{ font-size:.84rem; font-weight:800; color:#b45309; }
#jobsView .rem-acc-chevron{ font-size:.8rem; color:#b45309; }
#jobsView .rem-acc-body{ border-top:1px solid #fde68a; }
#jobsView .rem-acc-row{ width:100%; display:flex; align-items:center; gap:10px; padding:10px 14px; background:#fff; border:none; border-bottom:1px solid #f8fafc; cursor:pointer; text-align:left; font-family:inherit; }
#jobsView .rem-acc-row:last-child{ border-bottom:none; }
#jobsView .rem-acc-row:hover{ background:#fafbfc; }
#jobsView .rem-acc-dot{ width:8px; height:8px; border-radius:50%; flex-shrink:0; background:#94a3b8; }
#jobsView .rem-acc-row.urgent .rem-acc-dot{ background:#ef4444; }
#jobsView .rem-acc-row.warning .rem-acc-dot{ background:#f59e0b; }
#jobsView .rem-acc-row.manual .rem-acc-dot{ background:#8b5cf6; }
#jobsView .rem-acc-row.info .rem-acc-dot{ background:#3b82f6; }
#jobsView .rem-acc-job{ font-size:.84rem; font-weight:700; color:#0d2137; flex-shrink:0; }
#jobsView .rem-acc-text{ font-size:.82rem; color:#475569; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#jobsView .rem-strip-email{ flex-shrink:0; padding:5px 12px; border-radius:8px; border:1.5px solid #e2e8f0; background:#fff; font-size:.76rem; font-weight:700; color:#475569; cursor:pointer; white-space:nowrap; transition:all .12s; }
#jobsView .rem-strip-email:hover{ border-color:#4285f4; color:#4285f4; }
/* ── Per-row reminder dot ── */
#jobsView .jl-rem-dot{ width:7px; height:7px; border-radius:50%; flex-shrink:0; position:absolute; top:50%; left:4px; transform:translateY(-50%); }
#jobsView .jl-rem-dot.urgent{ background:#ef4444; }
#jobsView .jl-rem-dot.warning{ background:#f59e0b; }
#jobsView .jl-rem-dot.info{ background:#3b82f6; }
#jobsView .jl-rem-dot.manual{ background:#8b5cf6; }
/* ── Manual reminder UI (side panel) ── */
#jobsView .rem-list{ margin-bottom:10px; }
#jobsView .rem-item{ display:flex; align-items:flex-start; gap:8px; padding:8px 10px; border-radius:8px; background:#f8fafc; border:1.5px solid #f1f5f9; margin-bottom:6px; }
#jobsView .rem-item-body{ flex:1; min-width:0; }
#jobsView .rem-item-note{ font-size:.84rem; font-weight:600; color:#0d2137; }
#jobsView .rem-item-date{ font-size:.73rem; color:#94a3b8; margin-top:2px; }
#jobsView .rem-item-date.due{ color:#dc2626; font-weight:700; }
#jobsView .rem-del-btn{ padding:3px 7px; border-radius:6px; border:1.5px solid transparent; background:transparent; font-size:.8rem; color:#94a3b8; cursor:pointer; flex-shrink:0; }
#jobsView .rem-del-btn:hover{ border-color:#dc2626; color:#dc2626; background:#fef2f2; }
#jobsView .rem-add-row{ display:flex; gap:8px; align-items:flex-end; margin-top:8px; flex-wrap:wrap; }
#jobsView .rem-note-input{ flex:1; min-width:140px; padding:8px 10px; border-radius:8px; border:1.5px solid #e2e8f0; font-family:inherit; font-size:.84rem; outline:none; }
#jobsView .rem-note-input:focus{ border-color:#8b5cf6; }
#jobsView .rem-date-input{ padding:7px 10px; border-radius:8px; border:1.5px solid #e2e8f0; font-family:inherit; font-size:.83rem; color:#334155; outline:none; }
#jobsView .rem-date-input:focus{ border-color:#8b5cf6; }
#jobsView .rem-add-btn{ padding:8px 14px; border-radius:8px; border:none; background:#8b5cf6; color:#fff; font-size:.82rem; font-weight:700; cursor:pointer; white-space:nowrap; }
#jobsView .rem-add-btn:hover{ background:#7c3aed; }