/* ============================================================
   CIVILTRACK — Design System
   Ridge Co. Contracting & Design
   Dark sidebar · warm white content · gold accents
============================================================ */
:root {
  --gold: #c49a35;
  --gold-light: #d4aa45;
  --gold-dim: rgba(196,154,53,0.12);
  --gold-border: rgba(196,154,53,0.3);
  --sb-bg: #0f1419;
  --sb-border: rgba(255,255,255,0.06);
  --sb-text: rgba(255,255,255,0.4);
  --bg-page: #f5f3f0;
  --bg-card: #ffffff;
  --bg-secondary: #f8f7f5;
  --bg-tertiary: #f0ede8;
  --bg-hover: #f3f1ee;
  --text-primary: #1a1714;
  --text-secondary: #6b6560;
  --text-tertiary: #9c9590;
  --text-placeholder: #bcb8b3;
  --border-light: #e8e4df;
  --border-medium: #ddd9d4;
  --border-strong: #c8c4be;
  --green: #059669; --green-bg: #d1fae5; --green-text: #065f46;
  --red: #dc2626;   --red-bg: #fee2e2;   --red-text: #991b1b;
  --amber: #d97706; --amber-bg: #fef3c7; --amber-text: #92400e;
  --blue: #2563eb;  --blue-bg: #dbeafe;  --blue-text: #1e40af;
  --purple: #7c3aed;--purple-bg: #eeedfe;--purple-text: #3c3489;
  --sb-width: 200px;
  --topbar-height: 52px;
  --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06),0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08),0 2px 4px rgba(0,0,0,0.04);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.12),0 4px 8px rgba(0,0,0,0.06);
  font-family: 'DM Sans', -apple-system, sans-serif;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-primary);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
button{font-family:inherit;cursor:pointer}
input,select,textarea{font-family:inherit}
body{background:var(--sb-bg);overflow:hidden;height:100vh}
.app-shell{display:flex;height:100vh;overflow:hidden}

/* SIDEBAR */
.sidebar{width:var(--sb-width);background:var(--sb-bg);display:flex;flex-direction:column;flex-shrink:0;border-right:1px solid var(--sb-border);z-index:10}
.sb-logo{padding:16px 14px 12px;border-bottom:1px solid var(--sb-border);display:flex;align-items:center;gap:10px}
.sb-logo-mark{width:30px;height:30px;flex-shrink:0}
.sb-logo-brand{font-size:13px;font-weight:600;color:var(--gold);letter-spacing:0.5px}
.sb-logo-co{font-size:10px;color:rgba(255,255,255,0.3);margin-top:1px}
.sb-user{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--sb-border)}
.sb-user-av{width:28px;height:28px;border-radius:50%;background:var(--gold-dim);border:1px solid var(--gold-border);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:600;color:var(--gold);flex-shrink:0}
.sb-user-name{font-size:12px;font-weight:500;color:rgba(255,255,255,0.85)}
.sb-user-role{font-size:10px;color:rgba(255,255,255,0.3);margin-top:1px}
.sb-nav{flex:1;padding:6px 0;overflow-y:auto}
.sb-nav::-webkit-scrollbar{width:3px}
.sb-nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.1);border-radius:2px}
.sb-section{font-size:9px;font-weight:600;color:rgba(255,255,255,0.2);letter-spacing:1px;text-transform:uppercase;padding:12px 14px 4px}
.sb-item{display:flex;align-items:center;gap:8px;padding:8px 14px;font-size:12px;color:var(--sb-text);cursor:pointer;border-left:2px solid transparent;transition:all 0.12s;position:relative}
.sb-item:hover{color:rgba(255,255,255,0.75);background:rgba(255,255,255,0.04)}
.sb-item.active{color:#fff;background:var(--gold-dim);border-left-color:var(--gold);font-weight:500}
.sb-item i{font-size:15px;flex-shrink:0}
.sb-item-label{flex:1}
.sb-badge{background:var(--red);color:#fff;font-size:9px;font-weight:600;border-radius:10px;padding:2px 6px;min-width:17px;text-align:center}
.sb-badge.gold{background:var(--gold-dim);color:var(--gold)}
.sb-bottom{padding:10px 14px;border-top:1px solid var(--sb-border)}
.sb-logout{display:flex;align-items:center;gap:8px;font-size:12px;color:rgba(255,255,255,0.3);cursor:pointer;padding:4px 0}
.sb-logout:hover{color:rgba(255,255,255,0.6)}

/* MAIN */
.main{flex:1;display:flex;flex-direction:column;background:var(--bg-page);overflow:hidden;min-width:0}

/* TOPBAR */
.topbar{height:var(--topbar-height);background:var(--bg-card);border-bottom:1px solid var(--border-light);display:flex;align-items:center;justify-content:space-between;padding:0 20px;flex-shrink:0;gap:12px}
.topbar-left{display:flex;flex-direction:column;gap:1px}
.topbar-crumb{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--text-tertiary)}
.crumb-link{color:var(--blue);cursor:pointer;font-weight:500}
.crumb-link:hover{text-decoration:underline}
.crumb-sep{font-size:10px;color:var(--text-tertiary)}
.crumb-cur{color:var(--text-primary);font-weight:500}
.topbar-title{font-size:15px;font-weight:600;color:var(--text-primary)}
.topbar-right{display:flex;align-items:center;gap:6px}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;gap:5px;padding:7px 14px;border-radius:var(--radius-md);font-size:12px;font-weight:500;cursor:pointer;border:1px solid var(--border-medium);background:var(--bg-card);color:var(--text-primary);transition:all 0.12s;white-space:nowrap}
.btn:hover{background:var(--bg-secondary);border-color:var(--border-strong)}
.btn i{font-size:14px}
.btn-gold{background:var(--gold);color:#1a1714;border-color:var(--gold)}
.btn-gold:hover{background:var(--gold-light);border-color:var(--gold-light)}
.btn-ghost{background:transparent;border-color:var(--border-light);color:var(--text-secondary)}
.btn-ghost:hover{background:var(--bg-secondary);color:var(--text-primary)}
.btn-green{background:var(--green);color:#fff;border-color:var(--green)}
.btn-green:hover{background:#047857}
.btn-red{background:var(--red);color:#fff;border-color:var(--red)}
.btn-excel{background:#1d6f42;color:#fff;border-color:#1d6f42}
.btn-pdf{background:var(--red);color:#fff;border-color:var(--red)}
.btn-sm{padding:5px 10px;font-size:11px}
.btn-xs{padding:3px 8px;font-size:10px}
.btn-icon{padding:7px 9px}

/* CONTENT */
.content{flex:1;overflow-y:auto;overflow-x:hidden;padding:18px 20px}
.content::-webkit-scrollbar{width:5px}
.content::-webkit-scrollbar-thumb{background:var(--border-medium);border-radius:3px}

/* CARDS */
.card{background:var(--bg-card);border:1px solid var(--border-light);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);overflow:hidden}
.card-hdr{padding:11px 16px;border-bottom:1px solid var(--border-light);display:flex;align-items:center;justify-content:space-between;background:var(--bg-secondary)}
.card-title{font-size:13px;font-weight:600;color:var(--text-primary)}
.card-sub{font-size:11px;color:var(--text-secondary);margin-top:2px}

/* KPI */
.kpi-grid{display:grid;gap:10px}
.kpi-card{background:var(--bg-card);border:1px solid var(--border-light);border-radius:var(--radius-md);padding:12px 14px;box-shadow:var(--shadow-sm)}
.kpi-label{font-size:10px;font-weight:600;color:var(--text-tertiary);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:5px}
.kpi-value{font-size:22px;font-weight:600;color:var(--text-primary);line-height:1}
.kpi-value.gold{color:var(--gold)}
.kpi-value.green{color:var(--green)}
.kpi-value.red{color:var(--red)}
.kpi-value.blue{color:var(--blue)}
.kpi-value.amber{color:var(--amber)}
.kpi-sub{font-size:11px;color:var(--text-tertiary);margin-top:4px}

/* TABLES */
.data-table{width:100%;border-collapse:collapse;font-size:12px}
.dt-th{padding:8px 14px;text-align:left;font-size:10px;font-weight:600;color:var(--text-tertiary);text-transform:uppercase;letter-spacing:0.4px;border-bottom:1px solid var(--border-light);background:var(--bg-secondary);white-space:nowrap}
.dt-th.right{text-align:right}
.dt-td{padding:10px 14px;border-bottom:1px solid var(--border-light);vertical-align:middle;color:var(--text-primary)}
.dt-td.right{text-align:right;font-weight:500}
.dt-td.muted{color:var(--text-secondary)}
.dt-tr:last-child .dt-td{border-bottom:none}
.dt-tr:hover .dt-td{background:var(--bg-hover);cursor:pointer}
.dt-tr.subtotal .dt-td{background:var(--bg-secondary);font-weight:600;border-top:1px solid var(--border-medium)}
.dt-tr.total-row .dt-td{background:var(--sb-bg);color:#fff;font-weight:600;font-size:13px}
.dt-tr.total-row .dt-td.gold{color:var(--gold)}

/* PILLS */
.pill{display:inline-flex;align-items:center;gap:3px;padding:3px 8px;border-radius:20px;font-size:10px;font-weight:600;white-space:nowrap}
.pill i{font-size:10px}
.pill-green{background:var(--green-bg);color:var(--green-text)}
.pill-red{background:var(--red-bg);color:var(--red-text)}
.pill-amber{background:var(--amber-bg);color:var(--amber-text)}
.pill-blue{background:var(--blue-bg);color:var(--blue-text)}
.pill-purple{background:var(--purple-bg);color:var(--purple-text)}
.pill-gray{background:var(--bg-tertiary);color:var(--text-secondary)}
.pill-gold{background:var(--gold-dim);color:var(--gold)}

/* FORMS */
.field-group{display:flex;flex-direction:column;gap:5px}
.field-label{font-size:11px;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:0.4px}
.field-req{color:var(--gold);margin-left:2px}
.field-hint{font-size:11px;color:var(--text-tertiary);margin-top:2px}
.field-input,.field-select,.field-textarea{padding:9px 12px;border:1px solid var(--border-medium);border-radius:var(--radius-md);font-size:13px;font-family:inherit;color:var(--text-primary);background:var(--bg-card);transition:border-color 0.12s,box-shadow 0.12s;width:100%}
.field-input:focus,.field-select:focus,.field-textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-dim)}
.field-input::placeholder,.field-textarea::placeholder{color:var(--text-placeholder)}
.field-textarea{resize:vertical;min-height:80px}
.editable-cell{background:transparent;border:none;border-bottom:1.5px solid transparent;font-size:12px;font-family:inherit;color:var(--text-primary);padding:2px 4px;width:100%;transition:all 0.1s;border-radius:3px}
.editable-cell:hover{border-bottom-color:var(--border-medium);background:var(--bg-secondary)}
.editable-cell:focus{outline:none;border-bottom-color:var(--gold);background:rgba(196,154,53,0.05)}

/* GRID */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.grid-5{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.grid-6{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.flex{display:flex}.flex-col{display:flex;flex-direction:column}
.items-center{align-items:center}.items-start{align-items:flex-start}
.justify-between{justify-content:space-between}
.gap-6{gap:6px}.gap-8{gap:8px}.gap-10{gap:10px}.gap-12{gap:12px}.gap-14{gap:14px}
.ml-auto{margin-left:auto}
.mt-2{margin-top:8px}.mt-3{margin-top:12px}.mt-4{margin-top:16px}
.mb-2{margin-bottom:8px}.mb-3{margin-bottom:12px}.mb-4{margin-bottom:16px}
.fw-500{font-weight:500}.fw-600{font-weight:600}
.text-sm{font-size:11px}.text-xs{font-size:10px}
.text-muted{color:var(--text-secondary)}.text-tertiary{color:var(--text-tertiary)}
.text-gold{color:var(--gold)}.text-green{color:var(--green)}
.text-red{color:var(--red)}.text-blue{color:var(--blue)}
.text-truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mono{font-family:'DM Mono',monospace}
.w-full{width:100%}.rounded{border-radius:var(--radius-md)}
.overflow-hidden{overflow:hidden}
.divider{height:1px;background:var(--border-light);margin:4px 0}

/* SECTION HEADER */
.section-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.section-title{font-size:14px;font-weight:600;color:var(--text-primary)}

/* PROGRESS */
.prog-wrap{display:flex;align-items:center;gap:6px}
.prog-bar{height:5px;border-radius:3px;background:var(--border-light);overflow:hidden;flex:1}
.prog-fill{height:100%;border-radius:3px;background:var(--gold)}
.prog-fill.green{background:var(--green)}
.prog-fill.amber{background:var(--amber)}
.prog-fill.red{background:var(--red)}
.prog-fill.gray{background:var(--text-tertiary)}

/* PAGES */
.page{display:none;flex-direction:column;height:100%;overflow:hidden}
.page.active{display:flex}

/* MODAL */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(15,20,25,0.6);backdrop-filter:blur(4px);z-index:100;align-items:center;justify-content:center}
.modal-overlay.show{display:flex}
.modal{background:var(--bg-card);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);width:480px;max-width:calc(100vw - 32px);max-height:calc(100vh - 64px);overflow:hidden;display:flex;flex-direction:column}
.modal-lg{width:640px}
.modal-hdr{padding:16px 20px;border-bottom:1px solid var(--border-light);display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.modal-title{font-size:16px;font-weight:600}
.modal-close{background:none;border:none;font-size:18px;color:var(--text-tertiary);cursor:pointer;padding:2px;line-height:1}
.modal-close:hover{color:var(--text-primary)}
.modal-body{padding:20px;overflow-y:auto;flex:1;display:flex;flex-direction:column;gap:14px}
.modal-footer{padding:14px 20px;border-top:1px solid var(--border-light);display:flex;justify-content:flex-end;gap:8px;background:var(--bg-secondary);flex-shrink:0}

/* FILTER TABS */
.filter-tabs{display:flex;gap:2px;background:var(--bg-secondary);border:1px solid var(--border-light);border-radius:var(--radius-md);padding:2px}
.ftab{padding:5px 12px;font-size:12px;font-weight:500;color:var(--text-secondary);cursor:pointer;border-radius:6px;transition:all 0.1s;white-space:nowrap}
.ftab.active{background:var(--bg-card);color:var(--text-primary);box-shadow:var(--shadow-sm)}

/* LOADING */
.loading{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;padding:48px;color:var(--text-tertiary)}
.spinner{width:24px;height:24px;border:2px solid var(--border-light);border-top-color:var(--gold);border-radius:50%;animation:spin 0.7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:48px;color:var(--text-tertiary);text-align:center}
.empty-state i{font-size:36px;color:var(--border-medium)}
.empty-state h3{font-size:14px;font-weight:600;color:var(--text-secondary)}
.empty-state p{font-size:12px;max-width:260px;line-height:1.5}

/* TOAST */
.toast-container{position:fixed;bottom:20px;right:20px;z-index:200;display:flex;flex-direction:column;gap:8px}
.toast{background:var(--sb-bg);color:#fff;padding:12px 16px;border-radius:var(--radius-md);font-size:13px;font-weight:500;box-shadow:var(--shadow-lg);display:flex;align-items:center;gap:8px;animation:slideIn 0.2s ease;max-width:320px}
.toast.success{border-left:3px solid var(--green)}
.toast.error{border-left:3px solid var(--red)}
.toast.info{border-left:3px solid var(--gold)}
@keyframes slideIn{from{transform:translateX(20px);opacity:0}to{transform:translateX(0);opacity:1}}

/* LOGIN */
#page-login{background:#0f1419;display:flex;align-items:center;justify-content:center;height:100vh;position:fixed;inset:0;z-index:50}
.login-wrap{width:100%;max-width:380px;padding:20px}
.login-logo{text-align:center;margin-bottom:32px}
.login-brand{font-size:20px;font-weight:600;color:#fff;letter-spacing:2px}
.login-product{font-size:10px;color:var(--gold);letter-spacing:4px;margin-top:2px}
.login-card{background:#161c24;border:1px solid rgba(255,255,255,0.08);border-radius:var(--radius-xl);padding:28px}
.login-title{font-size:17px;font-weight:600;color:#fff;margin-bottom:4px}
.login-sub{font-size:12px;color:rgba(255,255,255,0.4);margin-bottom:24px}
.login-field{margin-bottom:16px}
.login-label{font-size:11px;font-weight:500;color:rgba(255,255,255,0.5);margin-bottom:6px;display:block}
.login-input{width:100%;background:#0f1419;border:1px solid rgba(255,255,255,0.1);border-radius:var(--radius-md);padding:11px 14px;font-size:14px;font-family:inherit;color:#fff;transition:border-color 0.12s}
.login-input:focus{outline:none;border-color:var(--gold)}
.login-input::placeholder{color:rgba(255,255,255,0.2)}
.login-btn{width:100%;background:var(--gold);color:#1a1714;border:none;border-radius:var(--radius-md);padding:13px;font-size:14px;font-weight:600;font-family:inherit;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px}
.login-btn:hover{background:var(--gold-light)}
.login-forgot{text-align:right;font-size:11px;color:rgba(196,154,53,0.7);cursor:pointer;margin-top:-8px;margin-bottom:20px}
.login-footer{text-align:center;font-size:11px;color:rgba(255,255,255,0.15);margin-top:20px}

/* TICKET CARD */
.ticket-card{background:var(--bg-card);border:1px solid var(--border-light);border-radius:var(--radius-lg);padding:14px 16px;cursor:pointer;transition:all 0.15s;display:flex;gap:14px;box-shadow:var(--shadow-sm)}
.ticket-card:hover{border-color:var(--gold);box-shadow:var(--shadow-md)}
.tc-bar{width:4px;border-radius:2px;align-self:stretch;flex-shrink:0}

/* CUSTOMER CARD */
.cust-card{background:var(--bg-card);border:1px solid var(--border-light);border-radius:var(--radius-lg);padding:16px;cursor:pointer;transition:all 0.15s;box-shadow:var(--shadow-sm)}
.cust-card:hover{border-color:var(--gold);box-shadow:var(--shadow-md);transform:translateY(-1px)}
.cust-av{width:42px;height:42px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:600;flex-shrink:0}

/* LEAD CARD */
.lead-card{background:var(--bg-card);border:1px solid var(--border-light);border-radius:var(--radius-lg);padding:14px 16px;cursor:pointer;transition:all 0.15s;display:flex;align-items:flex-start;gap:12px;box-shadow:var(--shadow-sm)}
.lead-card:hover{border-color:var(--gold);box-shadow:var(--shadow-md)}
.lead-card.new-lead{border-left:3px solid var(--red)}

/* CALENDAR */
.cal-day-name{text-align:center;font-size:10px;font-weight:600;color:var(--text-tertiary);text-transform:uppercase;letter-spacing:0.5px;padding:4px 0}
.cal-day{background:var(--bg-card);border:1px solid var(--border-light);border-radius:var(--radius-md);padding:6px 8px;cursor:pointer;transition:border-color 0.12s;overflow:hidden;display:flex;flex-direction:column;gap:3px}
.cal-day:hover{border-color:var(--border-strong)}
.cal-day.today{border-color:var(--gold);border-width:1.5px}
.cal-day.weekend{background:var(--bg-secondary)}
.cal-day-num{font-size:13px;font-weight:500;color:var(--text-primary);line-height:1;margin-bottom:1px}
.cal-day-num.today-num{color:var(--gold);font-weight:700}
.cal-pill{border-radius:3px;padding:2px 5px;font-size:10px;font-weight:500;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}

/* ESTIMATE BUILDER */
.est-phase-hdr{background:var(--sb-bg);color:#fff;padding:9px 12px;display:flex;align-items:center;gap:8px}
.est-phase-num{width:22px;height:22px;border-radius:50%;background:rgba(196,154,53,0.2);color:var(--gold);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:600;flex-shrink:0}
.est-phase-inp{background:transparent;border:none;color:#fff;font-size:13px;font-weight:500;font-family:inherit;flex:1}
.est-phase-inp:focus{outline:none}
.est-phase-inp::placeholder{color:rgba(255,255,255,0.3)}
.est-phase-total{font-size:13px;font-weight:600;color:var(--gold);padding-right:8px;white-space:nowrap}
.pab{font-size:10px;padding:3px 8px;border-radius:20px;cursor:pointer;border:none;font-weight:600;font-family:inherit;display:flex;align-items:center;gap:3px;white-space:nowrap}
.pab-labor{background:var(--blue-bg);color:var(--blue-text)}
.pab-equip{background:var(--amber-bg);color:var(--amber-text)}
.pab-mat{background:var(--green-bg);color:var(--green-text)}
.pab-sub{background:var(--purple-bg);color:var(--purple-text)}

/* SETTINGS NAV */
.settings-nav{width:200px;flex-shrink:0;background:var(--bg-card);border-right:1px solid var(--border-light);display:flex;flex-direction:column;overflow-y:auto}
.sn-section{font-size:9px;font-weight:600;color:var(--text-tertiary);text-transform:uppercase;letter-spacing:0.6px;padding:12px 14px 4px}
.sn-item{display:flex;align-items:center;gap:8px;padding:9px 14px;cursor:pointer;border-left:2px solid transparent;transition:all 0.1s;font-size:12px;color:var(--text-secondary)}
.sn-item:hover{background:var(--bg-secondary);color:var(--text-primary)}
.sn-item.active{background:var(--bg-secondary);border-left-color:var(--gold);color:var(--text-primary);font-weight:500}
.sn-icon{width:26px;height:26px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0}

/* DISPATCH MAP */
.map-road-h{position:absolute;background:rgba(255,255,255,0.65);left:0;right:0}
.map-road-v{position:absolute;background:rgba(255,255,255,0.65);top:0;bottom:0}
.map-pin{position:absolute;transform:translate(-50%,-100%);cursor:pointer}
.pin-body{width:26px;height:26px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);display:flex;align-items:center;justify-content:center;border:2px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,0.2)}
.pin-inner{transform:rotate(45deg);font-size:9px;font-weight:600;color:#fff}
.pin-label{background:#fff;border-radius:4px;padding:2px 5px;font-size:9px;font-weight:600;white-space:nowrap;margin-top:3px;transform:translateX(-20%);box-shadow:0 1px 4px rgba(0,0,0,0.15);color:var(--text-primary)}

/* PDF PREVIEW */
.pdf-preview{background:#fff;border-radius:var(--radius-lg);padding:24px;box-shadow:var(--shadow-md);border:1px solid var(--border-light)}
.pdf-hdr{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:18px;padding-bottom:14px;border-bottom:2px solid var(--gold)}
.pdf-company{font-size:15px;font-weight:700;color:#1a1714;letter-spacing:0.5px}
.pdf-co-sub{font-size:9px;color:#8a8880;letter-spacing:1px;margin-top:2px}
.pdf-inv-title{font-size:20px;font-weight:700;color:#1a1714;text-align:right}
.pdf-inv-num{font-size:11px;color:#8a8880;text-align:right}

/* OUPS */
.oups-card{background:var(--bg-card);border:1px solid var(--border-light);border-radius:var(--radius-lg);padding:14px 16px;margin-bottom:8px}
.oups-status-clear{background:var(--green-bg);border:0.5px solid #6ee7b7;color:var(--green-text)}
.oups-status-pending{background:var(--amber-bg);border:0.5px solid #fcd34d;color:var(--amber-text)}
.oups-status-expired{background:var(--red-bg);border:0.5px solid #fca5a5;color:var(--red-text)}

/* PIPELINE STEPS */
.pipeline-step{flex:1;text-align:center;padding:6px 4px;border-radius:6px;cursor:pointer;transition:all 0.1s;font-size:11px;font-weight:500;color:var(--text-tertiary);border:1.5px solid transparent}
.pipeline-step.done{color:var(--green-text);background:var(--green-bg);border-color:#6ee7b7}
.pipeline-step.current{color:#1a1714;background:var(--gold);border-color:var(--gold)}
.pipeline-step:hover:not(.done):not(.current){background:var(--bg-secondary);border-color:var(--border-medium)}

/* FUEL CALC */
.fuel-result-box{border-radius:var(--radius-md);padding:12px 14px;display:flex;flex-direction:column;gap:6px}
.fuel-row{display:flex;justify-content:space-between;align-items:center;font-size:12px;padding:3px 0;border-bottom:1px solid var(--border-light)}
.fuel-row:last-child{border-bottom:none;font-size:14px;font-weight:600;padding-top:6px}


/* ============================================================
   MOBILE RESPONSIVE — app.ridgeco.build on phone
   ============================================================ */

@media (max-width: 768px) {

  /* ── Layout ── */
  body { overflow: auto; }
  .app-shell { flex-direction: column; height: 100%; min-height: 100vh; }

  /* ── Sidebar becomes top nav + bottom nav on mobile ── */
  .sidebar {
    width: 100% !important;
    height: auto;
    flex-direction: row;
    border-right: none;
    border-bottom: 1px solid var(--sb-border);
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 50;
  }
  .sb-logo { padding: 10px 14px; border-bottom: none; border-right: 1px solid var(--sb-border); flex-shrink: 0; }
  .sb-logo-co, .sb-logo-brand { display: none; }
  .sb-user { padding: 8px 12px; border-bottom: none; border-right: 1px solid var(--sb-border); flex-shrink: 0; }
  .sb-user-name, .sb-user-role { display: none; }
  .sb-nav { display: none; } /* Hidden — use bottom nav instead */
  .sb-bottom { display: none; }

  /* ── Mobile bottom nav bar ── */
  .mobile-bottom-nav {
    display: flex !important;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--sb-bg);
    border-top: 1px solid var(--sb-border);
    z-index: 100;
    padding: 0;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .mobile-nav-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px 4px 6px;
    color: var(--sb-text);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    border: none;
    background: none;
    cursor: pointer;
    position: relative;
    transition: color 0.15s;
    -webkit-tap-highlight-color: transparent;
  }
  .mobile-nav-btn i { font-size: 20px; margin-bottom: 3px; display: block; }
  .mobile-nav-btn.active { color: var(--gold); }
  .mobile-nav-btn .mob-badge {
    position: absolute;
    top: 6px;
    right: calc(50% - 14px);
    background: var(--red);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
  }

  /* ── Hamburger menu button (top bar) ── */
  .mobile-menu-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    color: rgba(255,255,255,0.6);
    cursor: pointer;
    margin-left: auto;
    flex-shrink: 0;
  }

  /* ── Slide-out full menu ── */
  .mobile-full-menu {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(0,0,0,0.5);
  }
  .mobile-full-menu.open { display: block; }
  .mobile-full-menu-panel {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 260px;
    background: var(--sb-bg);
    overflow-y: auto;
    padding-bottom: 40px;
  }

  /* ── Content area ── */
  .content-area {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 80px; /* space for bottom nav */
  }

  /* ── Topbar ── */
  .topbar {
    padding: 10px 14px;
    flex-shrink: 0;
  }
  .topbar-title { font-size: 16px; }
  .topbar-actions { gap: 6px; }
  .topbar-actions .btn { font-size: 11px; padding: 6px 10px; }

  /* ── Cards and grids ── */
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr !important; }
  .kpi-card { padding: 12px 14px; }
  .kpi-value { font-size: 24px; }

  /* ── Tables — horizontal scroll ── */
  .data-table-wrap, .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .data-table { min-width: 500px; }

  /* ── Modals — full screen on mobile ── */
  .modal-overlay { align-items: flex-end; padding: 0; }
  .modal {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 20px 20px 0 0 !important;
    max-height: 90vh;
  }

  /* ── Cards ── */
  .card { border-radius: 10px; }
  .card-hdr { padding: 12px 14px; }

  /* ── Dashboard ── */
  #page-dashboard .grid-4 { grid-template-columns: 1fr 1fr !important; gap: 8px; }

  /* ── Ticket list ── */
  .ticket-card, [style*="display:flex;align-items:center;gap:0;margin-bottom:6px"] {
    flex-wrap: nowrap;
  }

  /* ── New ticket button — always visible FAB on mobile ── */
  .mobile-fab {
    display: flex !important;
    position: fixed;
    bottom: 72px;
    right: 16px;
    width: 56px;
    height: 56px;
    border-radius: 28px;
    background: var(--gold);
    color: #1a1714;
    border: none;
    box-shadow: 0 4px 16px rgba(196,154,53,0.4);
    align-items: center;
    justify-content: center;
    font-size: 24px;
    cursor: pointer;
    z-index: 90;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.15s;
  }
  .mobile-fab:active { transform: scale(0.95); }

  /* ── Form inputs — larger tap targets ── */
  .field-input, .field-select, .field-textarea {
    font-size: 16px !important; /* prevents iOS zoom */
    padding: 12px 14px !important;
    min-height: 44px;
  }
  .btn { min-height: 40px; }
  .btn-sm { min-height: 36px; font-size: 12px; }

  /* ── Page padding ── */
  .page { padding: 0 !important; }
  #page-tickets .topbar,
  #page-estimating .topbar,
  #page-dashboard .topbar { padding: 10px 14px; }

  /* ── Estimate cards ── */
  #estimating-content [style*="grid-template-columns:repeat(auto-fill,minmax(380px"] {
    grid-template-columns: 1fr !important;
  }

  /* ── Crew popover full screen ── */
  #crew-popover .modal {
    border-radius: 20px 20px 0 0;
    max-height: 80vh;
  }
}

/* Hide mobile elements on desktop */
.mobile-bottom-nav,
.mobile-full-menu,
.mobile-fab,
.mobile-menu-btn { display: none; }

/* Safe area for iPhone notch */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .mobile-bottom-nav { padding-bottom: env(safe-area-inset-bottom); }
  .content-area { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
}