/* QuoteMaster CSS — extracted from frontend/index.html on 2026-06-05 */
/* Original inline blocks were at lines 10-1146 and 1147-2959 */

/* ════════════════════════════════════════════════════════════════════════
   BLOCK 1 — main styles (was inline <style>)
   ════════════════════════════════════════════════════════════════════════ */
:root{}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:'Segoe UI',Arial,sans-serif;background:var(--bg);color:var(--text);font-size:14px;min-height:100vh;}
body.own-company-mode{--bg:#e8f5e9;}
body.own-company-mode .header{background:linear-gradient(135deg,#2e7d32 0%,#43a047 100%);border-bottom:3px solid #a5d6a7;}
body.own-company-mode .panel-quote,body.own-company-mode .admin-screen{background:#e8f5e9;}
/* LOADER */
.loader-card{background:white;border-radius:var(--radius);padding:44px 52px;max-width:460px;width:90%;box-shadow:var(--shadow-lg);}
.loader-logo{font-size:40px;font-weight:900;letter-spacing:4px;color:var(--primary);margin-bottom:4px;}
.loader-logo span{color:var(--accent);}
.loader-sub{font-size:12px;color:var(--text-muted);margin-bottom:26px;}
.loader-spinner{font-size:44px;margin-bottom:14px;animation:spin 1.2s linear infinite;display:inline-block;}
@keyframes spin{to{transform:rotate(360deg);}}
.loader-msg{font-size:15px;font-weight:700;color:var(--primary);margin-bottom:6px;}
.loader-detail{font-size:12px;color:var(--text-muted);margin-bottom:22px;line-height:1.6;}
.loader-file-btn{display:inline-block;padding:13px 32px;background:var(--primary);color:white;border:none;border-radius:var(--radius-sm);font-size:15px;font-weight:700;cursor:pointer;transition:background .15s;letter-spacing:.3px;width:100%;}
.loader-file-btn:hover{background:var(--primary-light);}
.loader-hint{font-size:11px;color:var(--text-muted);margin-top:10px;}
.loader-error{color:var(--accent);font-size:12px;font-weight:700;margin-top:10px;min-height:16px;}
.loader-change{font-size:11px;color:var(--primary-light);text-decoration:underline;cursor:pointer;margin-top:8px;display:inline-block;}
/* HEADER */
.header{background:linear-gradient(135deg,var(--primary) 0%,var(--primary-light) 100%);color:white;padding:0 18px;display:flex;align-items:center;justify-content:space-between;height:56px;box-shadow:0 3px 16px rgba(26,58,107,.25);position:sticky;top:0;z-index:200;}
.header-logo{font-size:21px;font-weight:900;letter-spacing:2.5px;color:var(--primary);display:flex;align-items:center;background:#fff;padding:3px 14px;border-radius:10px;box-shadow:0 2px 8px rgba(0,0,0,0.12);}
.header-logo span{color:#7eb8f7;}
.header-logo-img{height:38px;max-width:150px;object-fit:contain;display:none;}
.header-logo-text{display:block;}
.nav-tabs{display:flex;gap:4px;align-items:center;}
.nav-tab{padding:5px 14px;border-radius:20px;cursor:pointer;font-size:12px;font-weight:700;color:rgba(255,255,255,.75);transition:all .15s;border:1.5px solid transparent;letter-spacing:.3px;display:flex;align-items:center;gap:5px;background:none;font-family:inherit;}
.nav-tab:hover{color:white;background:rgba(255,255,255,.12);}
.nav-tab.active{background:rgba(255,255,255,.2);color:white;border-color:rgba(255,255,255,.35);}
.header-right{display:flex;align-items:center;gap:10px;}
.header-badge{background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.3);border-radius:20px;padding:4px 12px;font-size:11px;font-weight:600;cursor:default;}
.reload-btn{background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.3);border-radius:8px;padding:5px 11px;color:white;cursor:pointer;font-size:12px;font-weight:700;transition:all .15s;}
.reload-btn:hover{background:rgba(255,255,255,.28);}
/* SCREENS */
.screen{display:none;height:calc(100vh - 50px);}
.screen.active{display:flex;flex-direction:column;}
/* QUOTE */
.layout{display:grid;grid-template-columns:314px 1fr;height:100%;}
.panel-products{background:white;border-inline-end:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden;}
.panel-header{background:var(--primary);color:white;padding:10px 14px;font-size:14px;font-weight:700;letter-spacing:.5px;display:flex;align-items:center;gap:8px;justify-content:space-between;}
.panel-header-title{display:flex;align-items:center;gap:8px;}
.panel-refresh-btn{padding:4px 10px;border-radius:8px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);color:#fff;font-size:12px;font-weight:800;cursor:pointer;}
.panel-refresh-btn:hover{background:rgba(255,255,255,.24);}
.management-stack{display:grid;gap:16px;}
.management-section.hidden{display:none !important;}
.management-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px;align-items:center;}
.tab-group{display:flex;gap:4px;align-items:center;border-radius:14px;padding:4px 6px;margin:0 8px;}
.tab-group.group-catalog{background:#cde0f7;border:1px solid #a8c8e8;}
.tab-group.group-crm{background:#c8edda;border:1px solid #8fcbaa;}
.tab-group.group-admin{background:#fcedc8;border:1px solid #e0cc8a;}
.tab-group-sep{width:1px;height:24px;background:var(--border);margin:0 4px;}
.management-tab{border:1.5px solid var(--border);background:white;color:var(--primary);border-radius:999px;padding:6px 14px;font-size:13px;font-weight:800;cursor:pointer;transition:all .18s ease;}
.management-tab:hover:not(.active){background:var(--primary-pale);border-color:var(--primary-light);}
.management-tab.active{background:var(--primary);color:white;border-color:var(--primary);}
.management-pane{display:none;}
.management-pane.active{display:block;}
.search-wrap{padding:10px 12px;border-bottom:1px solid var(--border);background:#f9fafc;}
.search-input{width:100%;border:1.5px solid var(--border);border-radius:var(--radius-sm);padding:8px 12px;font-size:14px;outline:none;transition:border-color .2s;background:white;text-align:right;}
.search-input:focus{border-color:var(--primary-light);}
.cat-tabs{display:flex;flex-direction:column;max-height:200px;overflow-y:auto;background:#f9fafc;border-bottom:1px solid var(--border);}
.cat-tab{padding:7px 12px;font-size:12px;font-weight:600;cursor:pointer;transition:all .12s;border-bottom:1px solid #eef0f5;color:var(--text-muted);display:flex;align-items:center;gap:6px;}
.cat-tab:hover{background:var(--primary-pale);color:var(--primary);}
.cat-tab.active{background:var(--primary);color:white;}
.cat-tab .cnt{margin-right:auto;background:rgba(255,255,255,.25);border-radius:10px;padding:2px 8px;font-size:11px;}
.cat-tab:not(.active) .cnt{background:var(--border);color:var(--text-muted);}
.products-list{flex:1;overflow-y:auto;padding:4px 0;}
/* ── Catalog navigator (desktop pills / mobile breadcrumb share #catTabs) ── */
#catTabs{flex-direction:row !important;flex-wrap:wrap;align-items:center;gap:4px;max-height:150px;overflow-y:auto;padding:7px 10px;}
.cat-pill{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:16px;background:#eef1f6;color:var(--text-muted);font-size:12px;font-weight:600;cursor:pointer;transition:all .12s;border:1px solid transparent;white-space:nowrap;}
.cat-pill:hover{background:var(--primary-pale);color:var(--primary);}
.cat-pill.active{background:var(--primary);color:#fff;}
.cat-pill .cp-cnt{background:rgba(0,0,0,.08);border-radius:10px;padding:1px 7px;font-size:11px;}
.cat-pill.active .cp-cnt{background:rgba(255,255,255,.25);}
/* Catalog category tiles (drill-down level 0 — desktop + mobile) */
.cat-tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:12px;}
.cat-tile{background:#fff;border:1.5px solid var(--border);border-radius:14px;padding:14px 10px;text-align:center;cursor:pointer;transition:all .12s;}
.cat-tile:hover{border-color:var(--primary-light);box-shadow:0 6px 16px rgba(37,99,235,.12);transform:translateY(-2px);}
.cat-tile .ct-ic{font-size:28px;line-height:1;}
.cat-tile .ct-name{font-size:13px;font-weight:800;color:#0f172a;margin-top:6px;line-height:1.2;}
.cat-tile .ct-cnt{font-size:11px;color:var(--text-muted);margin-top:3px;}
/* Empty-quote call-to-action (mobile only) */
.empty-cta{display:none;margin-top:16px;align-items:center;gap:7px;background:linear-gradient(135deg,var(--primary),var(--accent));color:#fff;border:none;border-radius:12px;padding:13px 24px;font-size:15px;font-weight:800;font-family:inherit;cursor:pointer;box-shadow:0 6px 18px rgba(37,99,235,.35);}
.empty-cta:active{transform:scale(.96);}
/* small "new quote" icon in the meta strip (mobile only — replaces the big risky "New" button) */
#newQuoteMiniBtn{display:none;align-items:center;justify-content:center;gap:4px;height:32px;padding:0 13px;border-radius:16px;border:1px solid #bbf7d0;background:#dcfce7;color:#15803d;font-size:12.5px;font-weight:800;font-family:inherit;cursor:pointer;margin-inline-start:8px;flex:0 0 auto;white-space:nowrap;}
#newQuoteMiniBtn:active{transform:scale(.92);}
/* "Add products" bar above the quote items (mobile only) */
#openCatalogBar{display:none;}
/* catalog drawer close button (mobile only) */
#catalogCloseBtn{display:none;}
.crumb-btn{background:none;border:none;font-family:inherit;font-size:12px;font-weight:600;color:var(--primary);cursor:pointer;padding:4px 6px;border-radius:6px;line-height:1.2;}
.crumb-btn:hover:not(:disabled){background:var(--primary-pale);}
.crumb-btn.cur{color:#1e293b;font-weight:800;cursor:default;}
.crumb-btn:disabled{cursor:default;}
.crumb-sep{color:#cbd5e1;font-size:13px;}
.cat-nav-card{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--border);border-radius:14px;padding:14px;margin:0 12px 9px;cursor:pointer;transition:transform .05s;}
.cat-nav-card:active{transform:scale(.985);}
.cat-nav-card .cn-ic{width:44px;height:44px;border-radius:12px;background:#eff6ff;color:var(--primary);display:flex;align-items:center;justify-content:center;font-size:22px;flex:0 0 auto;}
.cat-nav-card .cn-gr{flex:1;min-width:0;display:flex;flex-direction:column;}
.cat-nav-card .cn-name{font-size:15.5px;font-weight:800;color:#0f172a;}
.cat-nav-card .cn-sub{font-size:12.5px;color:var(--text-muted);margin-top:2px;}
.cat-nav-card .cn-cnt{font-size:12px;color:#94a3b8;background:#f1f5f9;border-radius:8px;padding:3px 9px;font-weight:700;flex:0 0 auto;}
.cat-nav-card .cn-arrow{color:#cbd5e1;font-size:20px;font-weight:900;flex:0 0 auto;}

.products-admin-layout{display:grid;grid-template-columns:200px minmax(0,1fr);gap:12px;align-items:start;}
#managementProductsSection .admin-table td,#managementProductsSection .admin-table th{padding:6px 8px;font-size:12px;}
.products-admin-sidebar{background:#fff;border:1px solid var(--line);border-radius:22px;overflow:hidden;box-shadow:0 10px 28px rgba(15,44,84,.06);display:flex;flex-direction:column;min-height:620px;}
.products-admin-sidebar .panel-header{padding:12px 14px;}
.products-admin-sidebar .search-wrap{padding:12px;border-bottom:1px solid var(--border);}
.products-admin-sidebar .cat-tabs{max-height:none;border-bottom:none;}
.products-admin-list-title{padding:10px 14px;font-size:13px;font-weight:800;color:var(--muted);background:#f8fafc;border-top:1px solid var(--border);border-bottom:1px solid var(--border);}
.products-admin-main{display:flex;flex-direction:column;gap:14px;min-width:0;}
.products-admin-main .admin-toolbar{margin-bottom:0;}
.products-admin-empty-note{padding:14px;color:var(--muted);font-size:12px;}
@media (max-width:1100px){.products-admin-layout{grid-template-columns:1fr;}.products-admin-sidebar{min-height:auto;}}

/* Collapsible subcategories */
.subcat-toggle{padding:9px 14px 9px 10px;font-size:12px;font-weight:800;color:var(--primary);background:linear-gradient(90deg,var(--primary-pale) 0%,#f4f7fd 100%);border-bottom:2px solid var(--primary-light);border-top:1px solid #d4e2f5;cursor:pointer;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:3;user-select:none;transition:background .15s;}
.subcat-toggle:hover{background:linear-gradient(90deg,#dce9fb 0%,#edf3fd 100%);}
.subcat-toggle.open{background:linear-gradient(90deg,#c8dcf7 0%,#ddeafb 100%);}
.subcat-arrow{font-size:11px;transition:transform .2s;color:var(--primary-light);flex-shrink:0;}
.subcat-toggle.open .subcat-arrow{transform:rotate(90deg);}
.subcat-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.subcat-cnt{font-size:10px;font-weight:700;background:var(--primary);color:white;border-radius:10px;padding:2px 7px;margin-left:6px;flex-shrink:0;}
.subcat-items{display:none;}
.subcat-items.open{display:block;}
.product-row{display:flex;align-items:center;padding:5px 10px;cursor:pointer;transition:background .1s;border-bottom:1px solid #f0f2f7;gap:6px;}
.product-row:hover{background:var(--primary-pale);}
.product-row.no-disc{background:var(--gold-light);}
.product-row.no-disc:hover{background:#fdf0d0;}
.product-info{flex:1;min-width:0;}
.product-model{font-size:12px;font-weight:700;color:var(--primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.product-desc{font-size:11px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px;}
.product-price-tag{font-size:11px;font-weight:700;color:var(--green);white-space:nowrap;text-align:left;direction:ltr;}
.no-disc-badge{font-size:9px;font-weight:700;background:var(--gold);color:white;border-radius:4px;padding:2px 5px;white-space:nowrap;}
.add-btn{width:24px;height:24px;border-radius:50%;background:var(--primary);color:white;border:none;cursor:pointer;font-size:16px;line-height:1;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:transform .15s ease,background .15s,box-shadow .15s;}
.add-btn:hover{background:var(--primary-light);transform:scale(1.12);box-shadow:0 2px 8px rgba(26,58,107,.25);}
.add-btn:active{transform:scale(.95);}
.draw-btn{width:26px;height:26px;border-radius:6px;background:white;color:var(--text-muted);border:1.5px solid var(--border);cursor:pointer;font-size:14px;line-height:1;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:border-color .1s,color .1s,transform .1s;}
.draw-btn:hover{border-color:var(--primary-light);color:var(--primary);transform:scale(1.1);}
.panel-quote{display:flex;flex-direction:column;overflow:hidden;}
.topbar{background:white;border-bottom:2px solid var(--border);padding:6px 12px;display:flex;gap:6px;align-items:end;flex-shrink:0;flex-wrap:nowrap;}
.topbar .field-group{flex:1;min-width:0;}
.topbar .field-group.vat-field{flex:0 0 auto;min-width:70px;max-width:85px;}
.topbar .field-group select{padding-inline:6px;font-size:13px;}
.topbar .discount-box{flex:0 0 auto;}
.field-group{min-width:0;}
.field-group label{display:block;font-size:9px;font-weight:700;color:var(--text-muted);margin-bottom:2px;text-transform:uppercase;letter-spacing:.35px;}
.field-group input,.field-group select{width:100%;border:1.5px solid var(--border);border-radius:var(--radius-sm);padding:6px 9px;font-size:11px;outline:none;transition:border-color .2s;text-align:right;height:30px;background:#fff;}
.field-group input:focus,.field-group select:focus{border-color:var(--primary-light);}
.discount-box{background:var(--primary-pale);border:2px solid var(--primary-light);border-radius:var(--radius-sm);padding:5px 10px;display:flex;align-items:center;gap:6px;white-space:nowrap;height:30px;align-self:end;}
.discount-box label{font-size:10px;font-weight:700;color:var(--primary);}
.discount-input{width:56px;border:1.5px solid var(--primary);border-radius:6px;padding:4px 5px;font-size:13px;font-weight:700;outline:none;color:var(--primary);background:white;height:26px;}
.pct-label{font-size:13px;font-weight:700;color:var(--primary);}
@media (max-width: 1180px){.topbar{flex-wrap:wrap;}.topbar .field-group{min-width:140px;}}
.quote-area{flex:1;overflow-y:auto;overflow-x:auto;padding:8px 4px 0;}
.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;height:60%;color:var(--text-muted);gap:10px;}
.empty-state .icon{font-size:52px;opacity:.3;}
.empty-state p{font-size:15px;font-weight:600;}
.empty-state small{font-size:12px;}
.quote-table{width:100%;border-collapse:collapse;font-size:13px;}
.quote-table thead tr{background:var(--primary);color:white;position:sticky;top:0;z-index:5;}
.quote-table th{padding:7px 7px;font-weight:700;font-size:11px;text-align:right;white-space:normal;word-wrap:break-word;overflow:hidden;}
.quote-table td{padding:10px 7px;border-bottom:1px solid #eef0f8;vertical-align:middle;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.quote-table td.desc-cell{white-space:normal;word-break:break-word;}
.quote-table tbody tr{transition:background .12s ease;}
.quote-table tbody tr:hover{background:var(--primary-pale);}
.quote-table tbody tr.no-disc-row{background:var(--gold-light);}
.quote-table tbody tr.no-disc-row:hover{background:#fdf0d0;}
.field-input{width:100%;border:1.5px solid var(--border);border-radius:5px;padding:3px 5px;font-size:11px;outline:none;background:white;color:var(--text);}
.field-input:focus{border-color:var(--primary-light);}
/* ── Free-text item panel ──────────────────────── */
.ft-add-panel{padding:6px 10px;border-bottom:1px solid var(--border);background:linear-gradient(135deg,#eef4ff 0%,#f5f8ff 100%);}
.ft-add-panel .ft-title{font-size:11px;font-weight:800;color:var(--primary);margin-bottom:6px;display:flex;align-items:center;gap:5px;}
.ft-add-grid{display:grid;grid-template-columns:2fr 1fr;gap:4px;}
.ft-add-grid input{width:100%;box-sizing:border-box;padding:4px 7px;font-size:11px;border:1px solid var(--line);border-radius:6px;font-family:inherit;direction:rtl;background:#fff;color:var(--text);}
.ft-add-grid input:focus{outline:none;border-color:var(--primary-light);}
.ft-add-grid input::placeholder{color:var(--muted);}
.ft-full{grid-column:1/-1;}
.ft-add-btn{width:100%;margin-top:5px;padding:6px 0;font-size:12px;font-weight:800;background:var(--primary);color:#fff;border:none;border-radius:8px;cursor:pointer;letter-spacing:.3px;}
.ft-add-btn:hover{background:#1a3a7a;}
.ft-row td{background:#fffdf0;}
.ft-row td input.field-input{background:#fff9e0;}
.section-header-row td{background:#d4edda !important;color:#1a5e2a !important;}
.section-header-row td input.field-input{background:transparent !important;color:#1a5e2a !important;}
.qty-ctrl{display:flex;align-items:center;gap:3px;white-space:nowrap;}
.qty-btn{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--border);background:white;cursor:pointer;font-size:14px;font-weight:700;line-height:1;display:flex;align-items:center;justify-content:center;color:var(--primary);transition:all .1s;flex-shrink:0;}
.qty-btn:hover{background:var(--primary);color:white;border-color:var(--primary);}
.qty-input{width:48px;border:1.5px solid var(--border);border-radius:5px;padding:3px 2px;font-size:13px;font-weight:700;outline:none;text-align:center;}
.qty-input:focus{border-color:var(--primary-light);}
.remove-btn{background:none;border:none;cursor:pointer;color:#cc3333;font-size:15px;padding:3px;border-radius:4px;transition:background .1s;opacity:.6;}
.remove-btn:hover{background:var(--accent-light);opacity:1;}
.num{text-align:right;font-weight:600;}
.tag-disc{display:inline-block;font-size:10px;font-weight:700;background:var(--green-bg);color:var(--green);border-radius:4px;padding:2px 6px;}
.tag-no-disc{display:inline-block;font-size:10px;font-weight:700;background:var(--gold-light);color:var(--gold);border-radius:4px;padding:2px 6px;border:1px solid #e8c87a;}
.totals-bar{background:white;border-top:2px solid var(--border);padding:3px 12px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;gap:8px;}
#quoteNotesWrap{flex-shrink:0;}
.totals-grid{display:flex;gap:16px;align-items:center;}
.total-item{}
/* BTU compact bar */
.btu-bar{display:flex;gap:14px;align-items:center;padding:6px 16px;background:var(--bg);border-radius:var(--radius-sm);border:1px solid var(--border);}
.btu-bar-item{min-width:90px;}
.btu-bar-label{font-size:10px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.4px;display:block;margin-bottom:2px;}
.btu-bar-value{font-size:16px;font-weight:800;color:var(--primary);display:block;}
.btu-bar-value.green{color:var(--green);}
.btu-bar-value.warn{color:#e65100;}
.btu-bar-sub{font-size:10px;color:var(--text-muted);display:block;}
.btu-bar-sep{width:1px;height:36px;background:var(--border);flex-shrink:0;}
.total-label{font-size:9px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;display:block;margin-bottom:1px;}
.total-value{font-size:13px;font-weight:800;color:var(--primary);}
.total-value.main{font-size:16px;color:var(--accent);}
.total-sep{width:1px;height:22px;background:var(--border);}
.actions-bar{display:flex;gap:6px;flex-wrap:nowrap;justify-content:center;}
.btn{padding:5px 12px;border-radius:var(--radius-sm);border:none;cursor:pointer;font-size:12px;font-weight:700;transition:all .18s ease;letter-spacing:.3px;display:flex;align-items:center;gap:5px;white-space:nowrap;}
.btn:active{transform:scale(.96);}
.btn-primary{background:var(--primary);color:white;}
.btn-primary:hover{background:var(--primary-light);}
.btn-secondary{background:white;color:var(--primary);border:2px solid var(--primary);}
.btn-secondary:hover{background:var(--primary-pale);}
.btn-danger{background:white;color:var(--accent);border:2px solid var(--accent);}
.btn-danger:hover{background:var(--accent-light);}
.btn-save{background:white;color:var(--green);border:2px solid var(--green);}
.btn-save:hover{background:var(--green-bg);}
.btn-save.dirty{background:var(--green);color:white;animation:pulse-green 1.5s infinite;}
.quote-meta-strip{margin:4px 0 8px;padding:6px 12px;border:1px solid var(--line);border-radius:10px;background:#f8fbff;color:var(--primary);font-size:12px;font-weight:700;display:flex;justify-content:space-between;align-items:center;gap:10px;}
.quote-meta-strip .muted{color:var(--text-muted);font-weight:600;}
@keyframes pulse-green{0%,100%{box-shadow:0 0 0 0 rgba(26,122,74,.4);}50%{box-shadow:0 0 0 6px rgba(26,122,74,0);}}
/* SPECS */
.specs-screen{padding:20px 28px;overflow-y:auto;}
.btu-summary{display:flex;gap:14px;margin-bottom:18px;flex-wrap:wrap;align-items:stretch;}
.btu-card{background:white;border-radius:var(--radius);box-shadow:var(--shadow);padding:14px 20px;display:flex;flex-direction:column;gap:4px;min-width:160px;flex:1;}
.btu-card.cond{border-top:4px solid var(--primary);}
.btu-card.evap{border-top:4px solid var(--green);}
.btu-card.ratio{border-top:4px solid var(--gold);}
.btu-card .btu-label{font-size:11px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.4px;}
.btu-card .btu-value{font-size:22px;font-weight:900;color:var(--primary);}
.btu-card.evap .btu-value{color:var(--green);}
.btu-card.ratio .btu-value{color:var(--gold);}
.btu-card .btu-sub{font-size:11px;color:var(--text-muted);margin-top:2px;}
.btu-match-good{color:#2e7d32!important;}
.btu-match-warn{color:#e65100!important;}
.btu-match-red{color:#dc2626!important;}
.btu-bar-value.orange{color:#e65100!important;}
.btu-bar-value.red{color:#dc2626!important;}
.specs-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;}
.specs-title{font-size:20px;font-weight:800;color:var(--primary);}
.specs-subtitle{font-size:13px;color:var(--text-muted);margin-top:2px;}
.specs-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:55vh;color:var(--text-muted);gap:12px;}
.specs-table{width:100%;border-collapse:collapse;font-size:12px;background:white;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);table-layout:fixed;}
.specs-table thead tr{background:var(--primary);color:white;}
.specs-table th{padding:10px 8px;font-weight:700;font-size:11px;text-align:right;white-space:normal;word-wrap:break-word;overflow:hidden;}
.specs-table td{padding:9px 8px;border-bottom:1px solid #eef0f8;vertical-align:middle;white-space:normal;word-wrap:break-word;overflow:hidden;}
.specs-table tbody tr:hover{background:var(--primary-pale);}
.specs-table tbody tr.no-disc-bg{background:var(--gold-light);}
.spec-model{font-weight:700;color:var(--primary);font-size:12px;}
.spec-val{color:var(--text);font-weight:600;}
.spec-empty{color:#bbb;font-size:11px;}
/* ADMIN */
.lock-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;height:calc(100vh - 60px);background:var(--bg);}
.lock-card{background:white;border-radius:var(--radius);padding:40px 48px;box-shadow:var(--shadow-lg);max-width:400px;width:100%;}
.lock-icon-big{font-size:54px;margin-bottom:16px;}
.lock-card h2{font-size:22px;font-weight:800;color:var(--primary);margin-bottom:6px;}
.lock-card p{font-size:13px;color:var(--text-muted);margin-bottom:24px;}
.lock-input{width:100%;border:2px solid var(--border);border-radius:var(--radius-sm);padding:11px 14px;font-size:16px;letter-spacing:3px;outline:none;transition:border-color .2s;margin-bottom:12px;font-weight:700;}
.lock-input:focus{border-color:var(--primary-light);}
.lock-error{color:var(--accent);font-size:12px;font-weight:700;margin-bottom:10px;min-height:18px;}
.lock-btn{width:100%;padding:12px;background:var(--primary);color:white;border:none;border-radius:var(--radius-sm);font-size:15px;font-weight:700;cursor:pointer;transition:background .15s;}
.lock-btn:hover{background:var(--primary-light);}
.admin-content{display:none;flex-direction:column;height:100%;overflow:hidden;}
.admin-content.visible{display:flex;}
.admin-toolbar{background:white;border-bottom:2px solid var(--border);padding:8px 16px;display:flex;align-items:center;gap:10px;flex-shrink:0;flex-wrap:wrap;}
.admin-toolbar-title{font-size:15px;font-weight:800;color:var(--primary);margin-right:auto;}
/* .admin-search defined below in admin card section */
.admin-search:focus{border-color:var(--primary-light);}

.admin-shell .auth-select,
.admin-shell .auth-input{
  background:#fff;
  border:1.5px solid var(--border);
  border-radius:10px;
  padding:9px 12px;
  color:var(--text);
  font-size:13px;
  font-weight:600;
  min-height:40px;
  outline:none;
  box-shadow:none;
}
.admin-shell .auth-select option{color:var(--text);}
.admin-shell .auth-select:focus,
.admin-shell .auth-input:focus{
  border-color:var(--primary-light);
}
.admin-shell .auth-input.hidden{display:none !important;}
.admin-area{flex:1;overflow-y:auto;padding:16px 20px;}
.admin-table tbody tr.no-disc-row{background:var(--gold-light);}
.edit-btn{background:none;border:1.5px solid var(--primary-light);border-radius:5px;padding:3px 9px;cursor:pointer;font-size:11px;color:var(--primary);font-weight:700;transition:all .1s;}
.edit-btn:hover{background:var(--primary);color:white;}
.del-btn{background:none;border:1.5px solid #e0a0a0;border-radius:5px;padding:3px 9px;cursor:pointer;font-size:11px;color:var(--accent);font-weight:700;transition:all .1s;margin-left:4px;}
.del-btn:hover{background:var(--accent);color:white;}
.status-badge{display:inline-block;font-size:10px;font-weight:700;border-radius:4px;padding:2px 6px;}
.badge-disc{background:var(--green-bg);color:var(--green);}
.badge-nodisc{background:var(--gold-light);color:var(--gold);border:1px solid #e8c87a;}
/* MODALS */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(10,20,40,.55);z-index:1000;align-items:center;justify-content:center;pointer-events:none;}
.modal-overlay.open{display:flex;pointer-events:auto;}
.modal{background:white;border-radius:var(--radius);width:700px;max-height:90vh;overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow-lg);}
.print-modal{background:white;border-radius:var(--radius);width:95vw;max-width:1200px;max-height:90vh;overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow-lg);}
/* ── Product card modal ── */
.draw-modal{background:white;border-radius:var(--radius);width:94vw;max-width:1120px;max-height:94vh;display:flex;flex-direction:column;box-shadow:var(--shadow-lg);}
.draw-modal-body{display:flex;flex:1;overflow:hidden;}
.draw-col-img{width:360px;min-width:240px;flex-shrink:0;background:#f2f5fb;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px 12px;border-inline-start:1px solid var(--border);}
.draw-img-label{font-size:10px;font-weight:800;color:var(--text-muted);letter-spacing:.5px;margin-bottom:8px;text-transform:uppercase;}
.draw-img-wrap{position:relative;cursor:zoom-in;border-radius:8px;overflow:hidden;box-shadow:0 2px 14px rgba(0,0,0,.13);max-width:100%;}
.draw-img-wrap img{display:block;max-width:100%;max-height:64vh;object-fit:contain;}
.draw-zoom-hint{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,.5);color:white;font-size:11px;padding:3px 12px;border-radius:20px;white-space:nowrap;opacity:0;transition:opacity .2s;pointer-events:none;}
.draw-img-wrap:hover .draw-zoom-hint{opacity:1;}
@media (hover: none) { .draw-zoom-hint { opacity: 1 !important; } }
.draw-no-img{padding:40px 20px;color:#bbb;font-size:13px;display:none;flex-direction:column;align-items:center;}
.draw-no-img span{font-size:40px;display:block;margin-bottom:10px;opacity:.3;}
.draw-col-specs{flex:1;overflow-y:auto;padding:20px 22px;}
/* product card inner */
.pc-header{border-bottom:2px solid var(--border);padding-bottom:14px;margin-bottom:14px;}
.pc-model{font-size:20px;font-weight:900;color:var(--primary);letter-spacing:-.3px;}
.pc-desc{font-size:12px;color:var(--text-muted);margin-top:3px;line-height:1.5;}
.pc-cat{font-size:10px;font-weight:700;color:var(--primary-light);background:var(--primary-pale);padding:2px 8px;border-radius:20px;display:inline-block;margin-top:6px;}
.pc-prices{display:flex;gap:16px;margin-top:12px;flex-wrap:wrap;}
.pc-price-box{background:var(--primary-pale);border-radius:8px;padding:8px 14px;}
.pc-price-box .lbl{font-size:10px;color:var(--text-muted);font-weight:700;}
.pc-price-box .val{font-size:16px;font-weight:900;color:var(--primary);}
.pc-price-box.green .val{color:var(--green);}
.pc-specs-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px 16px;}
.pc-spec-row{display:flex;justify-content:space-between;padding:5px 8px;border-radius:5px;font-size:12px;}
.pc-spec-row:nth-child(odd){background:#f8f9fc;}
.pc-spec-lbl{color:var(--text-muted);font-weight:600;}
.pc-spec-val{font-weight:700;color:var(--text);}
.pc-section-title{font-size:11px;font-weight:800;color:var(--primary);text-transform:uppercase;letter-spacing:.5px;margin:14px 0 6px;}
/* lightbox */
.lightbox-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.93);z-index:3000;align-items:center;justify-content:center;cursor:zoom-out;pointer-events:none;}
.lightbox-overlay.open{display:flex;pointer-events:auto;}
.lightbox-overlay img{max-width:96vw;max-height:96vh;object-fit:contain;border-radius:4px;}
.lightbox-close{position:absolute;top:18px;right:18px;background:rgba(255,255,255,.18);border:none;color:white;font-size:22px;width:40px;height:40px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.lightbox-close:hover{background:rgba(255,255,255,.3);}
.modal-header{background:var(--primary);color:white;padding:10px 16px;border-radius:var(--radius) var(--radius) 0 0;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;}
.modal-overlay.open{animation:fadeIn .15s ease;}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal-header h2{font-size:15px;font-weight:900;}
.close-btn{background:none;border:none;color:white;font-size:18px;cursor:pointer;opacity:.8;line-height:1;}
.close-btn:hover{opacity:1;}
.modal-body{padding:12px 16px;flex:1;overflow-y:auto;}
/* .form-grid defined below in admin card section */
.form-grid.three{grid-template-columns:1fr 1fr 1fr;}
.form-field{display:flex;flex-direction:column;gap:2px;}
.form-field.full{grid-column:1/-1;}
.form-field label{font-size:10px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.4px;}
.form-field input,.form-field select,.form-field textarea{border:1.5px solid var(--border);border-radius:var(--radius-sm);padding:6px 8px;font-size:12px;outline:none;transition:border-color .2s;text-align:right;font-family:inherit;}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{border-color:var(--primary-light);}
.form-field textarea{resize:vertical;min-height:50px;}
.form-section-title{grid-column:1/-1;font-size:14px;font-weight:800;color:var(--primary);border-bottom:2px solid var(--primary-pale);padding-bottom:5px;margin-top:6px;letter-spacing:.5px;}
.modal-footer{padding:10px 16px;border-top:1px solid var(--border);display:flex;gap:8px;justify-content:flex-end;flex-shrink:0;}
/* PRINT */
.pq-header{display:flex;justify-content:center;align-items:center;margin-bottom:10px;padding-bottom:10px;border-bottom:3px solid var(--primary);}
.pq-logo{font-size:34px;font-weight:900;color:var(--primary);letter-spacing:4px;}
.pq-logo span{color:var(--accent);}
.pq-meta{text-align:left;}
.pq-meta .pq-date{font-size:11px;color:var(--text-muted);margin-bottom:3px;}
.pq-meta .pq-num{font-size:12px;font-weight:700;color:var(--primary);}
.pq-info{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-bottom:10px;background:var(--primary-pale);border-radius:var(--radius-sm);padding:8px 16px;}
.pq-info-item label{font-size:10px;font-weight:700;color:var(--text-muted);text-transform:uppercase;display:block;margin-bottom:2px;}
.pq-info-item span{font-size:14px;font-weight:700;color:var(--primary);}
.pq-discount-note{background:var(--primary);color:white;border-radius:var(--radius-sm);padding:7px 14px;font-size:12px;font-weight:700;margin-bottom:14px;}
.pq-table{width:100%;border-collapse:collapse;font-size:12px;margin-bottom:6px;table-layout:auto;}
.pq-table thead tr{background:var(--primary);color:white;-webkit-print-color-adjust:exact;print-color-adjust:exact;}
.pq-table th{padding:5px 8px;font-weight:700;font-size:12px;text-align:right;white-space:nowrap;}
.pq-table td{padding:7px 8px;border-bottom:1px solid #eef0f8;white-space:normal;word-wrap:break-word;font-size:11px;}
.pq-table tbody tr:nth-child(odd){background:#ffffff;}
.pq-table tbody tr:nth-child(even){background:#eef2fb;}
.pq-table tbody tr.no-disc{background:var(--gold-light);}
.pq-totals{display:flex;flex-direction:column;gap:4px;padding:8px 14px;background:var(--primary-pale);border-radius:var(--radius-sm);max-width:300px;margin-right:auto;margin-left:0;}
.pq-tr{display:flex;justify-content:space-between;width:100%;font-size:12px;}
.pq-tr .lbl{color:var(--text-muted);font-weight:600;}
.pq-tr .val{font-weight:800;color:var(--primary);}
.pq-tr.final .lbl{font-size:14px;color:var(--primary);font-weight:800;}
.pq-tr.final .val{font-size:17px;color:var(--accent);}
.pq-divider{width:100%;height:1px;background:var(--border);}
.pq-footer{margin-top:18px;padding-top:14px;border-top:2px solid var(--border);display:flex;justify-content:space-between;font-size:10px;color:var(--text-muted);}
.modal-actions{padding:10px 16px;border-top:1px solid var(--border);display:flex;gap:8px;justify-content:flex-end;flex-shrink:0;}
::-webkit-scrollbar{width:5px;}
::-webkit-scrollbar-track{background:#f0f2f8;}
::-webkit-scrollbar-thumb{background:#c0c8d8;border-radius:3px;}
@media print{.a11y-widget{display:none !important;}body.printing-quote *{visibility:hidden;}#printModalOverlay{visibility:visible !important;display:block !important;position:absolute;left:0;top:0;width:100%;height:auto;overflow:visible !important;background:white !important;}#printModalOverlay .print-modal{visibility:visible !important;max-width:100% !important;width:100% !important;max-height:none !important;overflow:visible !important;box-shadow:none !important;border:none !important;margin:0 !important;padding:0 !important;}#printArea,#printArea *{visibility:visible !important;}#printArea{width:100% !important;padding:8px;overflow:visible !important;}#printArea .ea-body{overflow:visible !important;max-height:none !important;visibility:visible !important;}#printArea .ea-body *{visibility:visible !important;}#printArea .ea-group{page-break-inside:avoid;}.ea-table{width:100% !important;-webkit-print-color-adjust:exact;print-color-adjust:exact;}.ea-table thead tr,.pq-table thead tr{background:#1a3a6b !important;color:white !important;-webkit-print-color-adjust:exact;print-color-adjust:exact;}.ea-table th,.pq-table th{color:white !important;}.pq-header{display:flex !important;flex-direction:row !important;}.pq-info{display:grid !important;grid-template-columns:1fr 1fr 1fr !important;-webkit-print-color-adjust:exact;print-color-adjust:exact;}.pq-table tbody tr{-webkit-print-color-adjust:exact;print-color-adjust:exact;}.pq-bottom-row{display:flex !important;flex-direction:row !important;}.modal-header,.modal-actions{display:none !important;}#equipApprovalPrint,#equipApprovalPrint *{visibility:visible;}#equipApprovalPrint{position:absolute;left:0;top:0;width:100%;padding:8px;}}
/* Equipment Approval */
.ea-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:1050;align-items:flex-start;justify-content:center;padding:10px;pointer-events:none;}
.ea-overlay.open{display:flex;pointer-events:auto;}
.ea-modal{background:white;border-radius:var(--radius);max-width:98vw;width:100%;max-height:97vh;display:flex;flex-direction:column;box-shadow:var(--shadow-lg);}
.ea-head{background:var(--primary);color:white;padding:16px 24px;border-radius:var(--radius) var(--radius) 0 0;display:flex;align-items:center;justify-content:space-between;}
.ea-head h2{font-size:19px;font-weight:800;margin:0;}
.ea-body{overflow-y:auto;padding:24px;flex:1;}
.ea-group{margin-bottom:32px;page-break-inside:avoid;}
.ea-group-header{display:flex;align-items:flex-start;gap:18px;margin-bottom:14px;padding-bottom:12px;border-bottom:2px solid var(--primary);}
.ea-group-img{width:100px;height:100px;object-fit:contain;border-radius:8px;border:1px solid var(--border);flex-shrink:0;}
.ea-group-img-placeholder{width:100px;height:100px;border-radius:8px;border:2px dashed var(--border);display:flex;align-items:center;justify-content:center;font-size:32px;flex-shrink:0;}
.ea-group-title{font-size:19px;font-weight:900;color:var(--primary);margin-bottom:5px;}
.ea-group-sub{font-size:13px;color:var(--text-muted);}
.ea-table{width:100%;border-collapse:collapse;font-size:13px;table-layout:fixed;}
.ea-table thead tr{background:var(--primary);color:white;}
.ea-table th{padding:3px 2px;font-weight:700;font-size:9px;text-align:center;white-space:normal;word-wrap:break-word;overflow-wrap:break-word;line-height:1.2;}
.ea-table td{padding:3px 2px;border-bottom:1px solid #eef0f8;vertical-align:middle;font-size:10px;white-space:normal;word-wrap:break-word;overflow-wrap:break-word;}
.ea-table tbody tr:hover{background:var(--primary-pale);}
.ea-footer{padding:14px 24px;border-top:1px solid var(--border);display:flex;gap:10px;justify-content:flex-end;}

.hidden{display:none !important;}
.auth-select{background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.3);border-radius:8px;padding:5px 10px;color:white;font-size:12px;font-weight:700;min-width:108px;outline:none;}
.auth-select option{color:#111;}
.logout-btn{background:rgba(232,55,46,.18);border:1px solid rgba(255,255,255,.2);border-radius:8px;padding:4px 10px;color:white;cursor:pointer;font-size:11px;font-weight:700;transition:all .18s ease;}
.logout-btn:hover{background:rgba(232,55,46,.4);transform:scale(1.03);}
.user-pill{background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.3);border-radius:16px;padding:4px 10px;font-size:11px;font-weight:700;max-width:180px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.login-overlay{position:fixed;inset:0;background:rgba(10,18,35,.55);display:none;align-items:center;justify-content:center;z-index:5000;padding:20px;backdrop-filter:blur(4px);pointer-events:none;}
.login-overlay.open{display:flex;pointer-events:auto;}
.login-card{width:min(460px,96vw);background:white;border-radius:18px;box-shadow:var(--shadow-lg);overflow:hidden;border:1px solid #dce4f2;}
.login-head{padding:28px 30px;background:linear-gradient(135deg,var(--primary) 0%,var(--primary-light) 100%);color:white;}
.login-head h2{font-size:28px;margin-bottom:6px;}
.login-head p{font-size:13px;opacity:.9;line-height:1.6;}
.login-body{padding:24px 26px;display:grid;gap:14px;}
.login-field label{display:block;font-size:11px;font-weight:800;color:var(--text-muted);margin-bottom:5px;}
.login-field input{width:100%;border:1.5px solid var(--border);border-radius:10px;padding:11px 12px;font-size:14px;outline:none;}
.login-field input:focus{border-color:var(--primary-light);}
.login-error{min-height:18px;font-size:12px;color:var(--accent);font-weight:700;}
@keyframes loginErrPulse { 0%{ transform:scale(0.95);opacity:0.4;} 50%{ transform:scale(1.02);opacity:1;} 100%{ transform:scale(1);opacity:1;} }
.login-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:4px;}
.tfa-digit{width:46px;height:54px;text-align:center;font-size:26px;font-weight:800;border:2px solid var(--border);border-radius:12px;outline:none;background:#fafbfd;color:var(--text);transition:border-color .2s,box-shadow .2s;}
.tfa-digit:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(37,99,235,.15);background:#fff;}
.tfa-digit.filled{border-color:var(--primary-light);background:#eef4ff;}
.admin-screen{padding:18px 22px;overflow:auto;background:var(--bg);}
.admin-shell{display:grid;gap:16px;}
#screen-management .admin-shell{max-width:none;}
#screen-management .admin-shell.products-tab-active{max-width:none;}
.admin-toolbar{background:white;border:1px solid var(--border);border-radius:var(--radius);padding:8px 12px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;box-shadow:var(--shadow);}
.management-compact{max-width:1400px;}
#managementCustomersSection{max-width:1500px;}
.management-compact .admin-table{width:100%;table-layout:fixed;}
.management-compact .admin-table td,.management-compact .admin-table th{padding:8px 12px;overflow:hidden;text-overflow:ellipsis;}
.management-section .admin-toolbar+.admin-card{border-top:none;}
.admin-toolbar.toolbar-catalog,.admin-toolbar.toolbar-crm,.admin-toolbar.toolbar-admin{border-radius:var(--radius) var(--radius) 0 0;}
.admin-toolbar.toolbar-catalog{background:#cde0f7;border-color:#a8c8e8;}
.admin-toolbar.toolbar-crm{background:#c8edda;border-color:#8fcbaa;}
.admin-toolbar.toolbar-admin{background:#fcedc8;border-color:#e0cc8a;}
.admin-card{border-radius:0 0 var(--radius) var(--radius);}
.admin-title{font-size:22px;font-weight:900;color:var(--primary);margin-bottom:4px;}
.admin-subtitle{font-size:12px;color:var(--text-muted);}
.admin-toolbar .spacer{flex:1;}
.admin-search{min-width:240px;max-width:340px;width:100%;border:1.5px solid var(--border);border-radius:10px;padding:10px 12px;font-size:13px;outline:none;}
.admin-search:focus{border-color:var(--primary-light);}
.admin-card{background:white;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;}
.admin-card-head{padding:8px 14px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;background:#fbfcfe;}
.admin-table-wrap{overflow:auto;max-height:calc(100vh - 220px);}
.admin-table{width:100%;border-collapse:collapse;table-layout:auto;}
.admin-table th,.admin-table td{padding:8px 6px;border-bottom:1px solid #eef2f7;text-align:right;font-size:13px;vertical-align:middle;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#usersTableView .admin-table{table-layout:fixed;}
#usersTableView .admin-table td,#usersTableView .admin-table th{overflow:hidden;text-overflow:ellipsis;}
#managementProductsSection .admin-table{table-layout:fixed;}
.admin-table th{background:#f7f9fd;color:var(--text-muted);font-size:12px;font-weight:900;text-transform:uppercase;position:sticky;top:0;z-index:2;}
.admin-table td.td-clickable{cursor:pointer;color:var(--primary);transition:all .15s;}
.admin-table td.td-clickable:hover{text-decoration:underline;color:var(--primary-dark,#1a3a6b);}
.admin-table tr:hover{background:#fafcff;}
.admin-table td.td-wrap{white-space:normal;overflow:visible;}
.mono{font-family:Consolas,monospace;direction:ltr;text-align:left;}
.state-pill{display:inline-flex;align-items:center;gap:5px;border-radius:16px;padding:4px 11px;font-size:12px;font-weight:800;}
.state-pill.on{background:var(--green-bg);color:var(--green);}
.state-pill.off{background:#fbe6e5;color:var(--accent);}
.role-pill{display:inline-block;background:var(--primary-pale);color:var(--primary);padding:3px 10px;border-radius:16px;font-size:11px;font-weight:800;}
.product-row.readonly{cursor:default;}
.product-row.readonly:hover{transform:none;box-shadow:none;border-color:var(--border);}
.row-actions{display:flex;gap:6px;justify-content:flex-start;}
.icon-btn{border:1px solid var(--border);background:white;border-radius:6px;padding:4px 8px;font-size:11px;font-weight:800;cursor:pointer;transition:.15s;}
.icon-btn:hover{border-color:var(--primary-light);color:var(--primary);}
.icon-btn.warn:hover{border-color:var(--accent);color:var(--accent);}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
.form-grid.three{grid-template-columns:repeat(3,minmax(0,1fr));}
.form-grid .full{grid-column:1 / -1;}
.form-grid label{display:block;font-size:13px;font-weight:800;color:var(--text-muted);margin-bottom:4px;}
.form-grid input,.form-grid select,.form-grid textarea{width:100%;border:1.5px solid var(--border);border-radius:8px;padding:7px 10px;font-size:13px;outline:none;background:white;}
.form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus{border-color:var(--primary-light);}
.form-grid textarea{min-height:60px;resize:vertical;}
.check-row{display:flex;align-items:center;gap:6px;}
.check-row input{width:auto;}
.modal-subtitle{font-size:12px;color:var(--text-muted);margin-top:3px;}
#orderModalOverlay .modal-subtitle{font-size:13px;}
#orderModalOverlay .form-grid label{font-size:13px;}
#orderModalOverlay .form-grid input,#orderModalOverlay .form-grid textarea{font-size:15px;padding:8px 11px;}
#orderModalOverlay .check-row label{font-size:15px;font-weight:700;}
#orderModalOverlay .check-row input[type=checkbox]{width:18px;height:18px;}
#orderModalOverlay .modal-actions .btn{font-size:14px;padding:8px 20px;}
.meta-list{display:flex;flex-wrap:wrap;gap:8px;font-size:11px;color:var(--text-muted);}
.empty-admin{padding:40px 20px;color:#98a2b3;font-weight:700;}
.small-note{font-size:11px;color:var(--text-muted);}

.sales-kpis{display:grid;grid-template-columns:repeat(6,minmax(140px,1fr));gap:14px;}
.sales-kpi{background:white;border:1px solid var(--border);border-radius:16px;padding:16px 18px;box-shadow:var(--shadow-sm);}
.sales-kpi .lbl{font-size:12px;color:var(--text-muted);margin-bottom:8px;font-weight:700;}
.sales-kpi .val{font-size:28px;color:var(--primary);font-weight:900;line-height:1.1;}
.sales-kpi .sub{font-size:11px;color:var(--text-muted);margin-top:8px;}
.sales-kpi .kpi-link{font-size:10px;color:var(--primary-light);margin-top:6px;opacity:0;transition:opacity .15s;font-weight:700;}
.sales-kpi:hover .kpi-link,.sales-kpi:focus-within .kpi-link{opacity:1;}
@media (hover: none) { .sales-kpi .kpi-link { opacity: 1 !important; } }
.period-toggle{display:flex;gap:8px;align-items:center;}
.period-toggle .btn{min-width:96px;}
.order-yes{color:#167c3a;font-weight:800;}
.order-no{color:#98a2b3;font-weight:800;}
.status-pill{display:inline-block;padding:2px 8px;border-radius:10px;font-size:10px;font-weight:800;}
.status-select{border:none;outline:none;cursor:pointer;appearance:auto;padding:2px 4px;border-radius:10px;font-size:10px;font-weight:800;}
.bounce-badge{display:inline-block;background:#fee2e2;color:#b91c1c;border:1px solid #fca5a5;border-radius:6px;padding:1px 6px;font-size:9px;font-weight:800;margin-right:4px;cursor:help;letter-spacing:.2px;}
.bounce-banner{background:#fef2f2;border:1px solid #fecaca;color:#991b1b;border-radius:8px;padding:10px 12px;margin-bottom:10px;font-size:12px;line-height:1.5;}
.bounce-banner b{color:#7f1d1d;}
.status-draft{background:#e8f0fb;color:#2558a8;}
.status-sent{background:#fff3cd;color:#856404;}
.status-won{background:#e8f7ef;color:#1a7a4a;}
.status-lost{background:#fbe6e5;color:#c62828;}
.status-signed{background:#fef3c7;color:#92400e;}
.status-approved{background:#dcfce7;color:#16a34a;}
.chip-signed{color:#92400e;border-color:#fde68a;}
.chip-signed.active{background:#f59e0b;border-color:#f59e0b;color:white;}
.chip-approved{color:#16a34a;border-color:#bbf7d0;}
.chip-approved.active{background:#16a34a;border-color:#16a34a;color:white;}
.status-cancelled{background:#f0f0f0;color:#666;}
.status-duplicated{background:#e8f0fe;color:#1a56db;}
.status-inactive{background:#f0f0f0;color:#999;}
tr.row-inactive{opacity:.5;background:#f8f8f8 !important;}
tr.row-inactive td{color:#aaa !important;}
.kpi-neg{color:#c62828 !important;}
.kpi-pos{color:#167c3a !important;}
@media (max-width: 1200px){.sales-kpis{grid-template-columns:repeat(3,minmax(180px,1fr));}}
@media (max-width: 480px){.sales-kpis{grid-template-columns:1fr;}}
@media (max-width: 900px){.form-grid{grid-template-columns:1fr;}.check-row{padding-top:0;}.auth-select{min-width:140px;}.user-pill{max-width:140px;}}
/* ── Dashboard extended styles ─────────────────────────────────────────── */
.sales-kpis-row2{display:grid;grid-template-columns:repeat(2,minmax(200px,1fr));gap:14px;margin-top:0;}
.sales-kpi-accent{background:linear-gradient(135deg,#1a3a6b 0%,#2558a8 100%);color:white;border:none;}
.sales-kpi-accent .lbl,.sales-kpi-accent .sub{color:rgba(255,255,255,.75);}
.sales-kpi-accent .val{color:white;}
.sales-kpi-warn{background:linear-gradient(135deg,#fff8e8 0%,#fff3d0 100%);border:1.5px solid var(--gold);}
.sales-kpi-warn .val{color:var(--gold);}
.sales-kpi .icon{font-size:22px;margin-bottom:6px;}
.dash-2col{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.dash-3col{display:grid;grid-template-columns:2fr 1fr 1fr;gap:18px;}
.pie-chart-wrap{padding:14px 18px;height:220px;position:relative;display:flex;align-items:center;justify-content:center;}
.dash-card{background:white;border-radius:16px;border:1px solid var(--border);box-shadow:0 2px 14px rgba(26,58,107,.07);overflow:hidden;}
.dash-card-head{padding:14px 18px 10px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:8px;}
.dash-card-title{font-size:14px;font-weight:900;color:var(--primary);}
.dash-card-meta{font-size:11px;color:var(--text-muted);}
.dash-card-body{padding:14px 18px;}
.trend-chart-wrap{padding:14px 18px;height:220px;position:relative;}
.agent-table{width:100%;border-collapse:collapse;font-size:12px;}
.agent-table th{padding:8px 10px;background:#f4f6fa;font-weight:800;color:var(--text-muted);text-align:right;border-bottom:2px solid var(--border);}
.agent-table td{padding:8px 10px;border-bottom:1px solid #f0f2f8;vertical-align:middle;}
.agent-table tr:last-child td{border-bottom:none;}
.agent-conv{display:inline-block;padding:2px 8px;border-radius:20px;font-size:11px;font-weight:700;}
.agent-conv.hi{background:#e8f7ef;color:#1a7a4a;}
.agent-conv.mid{background:#fff8e8;color:#c8952a;}
.agent-conv.lo{background:#ffe8e7;color:#c62828;}
.dashboard-card{background:white;border-radius:16px;border:1px solid var(--border);box-shadow:0 2px 14px rgba(26,58,107,.07);overflow:hidden;}
.card-header{padding:14px 18px 10px;border-bottom:1px solid var(--border);font-size:14px;font-weight:900;color:var(--primary);}
.mini-table{width:100%;border-collapse:collapse;font-size:13px;}
.mini-table th{padding:10px 14px;background:#f4f6fa;font-weight:800;color:var(--text-muted);text-align:right;border-bottom:2px solid var(--border);white-space:nowrap;}
.mini-table td{padding:10px 14px;border-bottom:1px solid #f0f2f8;vertical-align:middle;}
.mini-table tr:last-child td{border-bottom:none;}
.mini-table tr:hover td{background:#f8fafd;}
.mini-table td:first-child{font-weight:700;color:var(--primary);text-align:center;width:36px;}
.mini-table td:nth-child(4),.mini-table td:nth-child(5),.mini-table td:nth-child(6){text-align:center;font-variant-numeric:tabular-nums;}
.dash-tabs{display:flex;gap:4px;border-bottom:2px solid var(--border);margin-bottom:16px;}
.dash-tab{padding:10px 20px;font-size:13px;font-weight:700;border:none;background:none;color:var(--text-muted);cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-2px;transition:all .2s;}
.dash-tab:hover{color:var(--primary);background:var(--primary-pale);border-radius:8px 8px 0 0;}
.dash-tab.active{color:var(--primary);border-bottom-color:var(--primary);background:var(--primary-pale);border-radius:8px 8px 0 0;}
.dash-tab-panel{display:none;}
.dash-tab-panel.active{display:block;}
body.hide-dash-contracts #dashExpiringContractsCard{display:none !important;}
.eq-kpi-row{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0;}
.eq-kpi{flex:1 1 120px;min-width:108px;background:#fff;border:1px solid var(--border);border-top:4px solid var(--border);border-radius:14px;padding:14px 12px;text-align:center;box-shadow:var(--shadow-sm);cursor:pointer;transition:transform .1s ease,box-shadow .1s ease;}
.eq-kpi:hover{transform:translateY(-2px);box-shadow:var(--shadow);}
.eq-kpi:focus-visible{outline:2px solid var(--primary-light);outline-offset:2px;}
.eq-kpi .eq-lbl{font-size:12px;color:var(--text-muted);font-weight:700;margin-bottom:6px;white-space:nowrap;}
.eq-kpi .eq-val{font-size:26px;font-weight:900;color:var(--primary);line-height:1.1;}
.eq-kpi .eq-sub{font-size:11px;color:var(--text-muted);margin-top:4px;}
.eq-kpi.eq-total{border-top-color:#1a3a6b;}
.eq-kpi.eq-approved{border-top-color:#16a34a;}.eq-kpi.eq-approved .eq-val{color:#16a34a;}
.eq-kpi.eq-sent{border-top-color:#2563eb;}.eq-kpi.eq-sent .eq-val{color:#2563eb;}
.eq-kpi.eq-draft{border-top-color:#94a3b8;}.eq-kpi.eq-draft .eq-val{color:#64748b;}
.eq-kpi.eq-pct{flex:1 1 165px;background:linear-gradient(135deg,#1a3a6b 0%,#2558a8 100%);border:none;border-top:4px solid #16a34a;}
.eq-kpi.eq-pct .eq-lbl,.eq-kpi.eq-pct .eq-sub{color:rgba(255,255,255,.85);}
.eq-kpi.eq-pct .eq-val{color:#fff;font-size:30px;}
.agent-bar-wrap{display:flex;align-items:center;gap:6px;}
.agent-bar{height:7px;border-radius:4px;background:var(--primary);min-width:4px;transition:width .4s;}
.client-rank{display:flex;align-items:center;gap:10px;padding:9px 14px;border-bottom:1px solid #f0f2f8;}
.client-rank:last-child{border-bottom:none;}
.client-rank .rank-num{width:24px;height:24px;border-radius:50%;background:var(--primary-pale);color:var(--primary);font-weight:900;font-size:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.client-rank .rank-num.gold{background:var(--gold-light);color:var(--gold);}
.client-rank .rank-name{font-weight:700;font-size:13px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.client-rank .rank-val{font-weight:900;color:var(--primary);font-size:13px;white-space:nowrap;}
.client-rank .rank-sub{font-size:10px;color:var(--text-muted);}
.aging-row td{vertical-align:middle;}
.age-badge{display:inline-block;padding:2px 8px;border-radius:20px;font-size:11px;font-weight:700;}
.age-badge.fresh{background:#e8f7ef;color:#1a7a4a;}
.age-badge.warn{background:#fff8e8;color:#c8952a;}
.age-badge.old{background:#ffe8e7;color:#c62828;}
.recent-order-link{color:var(--primary);font-weight:800;cursor:pointer;text-decoration:underline;text-underline-offset:2px;}
.recent-order-link:hover{color:var(--primary-light);}
.export-btn{background:var(--green-bg);color:var(--green);border:1.5px solid var(--green);border-radius:8px;padding:5px 12px;font-size:11px;font-weight:800;cursor:pointer;display:flex;align-items:center;gap:4px;}
.export-btn:hover{background:var(--green);color:white;}
.order-num-badge{font-size:10px;font-weight:700;color:var(--primary);background:var(--primary-pale);padding:1px 6px;border-radius:5px;direction:ltr;display:inline-block;}
@media (max-width:1100px){.dash-2col,.dash-3col{grid-template-columns:1fr;}}
/* ── UX Enhancements ───────────────────────────────────────────────────────── */
/* Status chips */
.status-chips{display:flex;gap:6px;flex-wrap:wrap;padding:6px 12px 8px;background:white;border:1px solid var(--border);border-top:none;border-radius:0 0 var(--radius) var(--radius);box-shadow:var(--shadow);}
.status-chip{display:inline-flex;align-items:center;gap:5px;padding:4px 12px;border-radius:20px;font-size:12px;font-weight:700;cursor:pointer;border:1.5px solid var(--border);transition:all .15s;background:#f7f9fd;color:var(--text-muted);user-select:none;}
.status-chip:hover{background:var(--primary-pale);color:var(--primary);border-color:var(--primary);}
.status-chip.active{background:var(--primary);color:#fff;border-color:var(--primary);}
.status-chip.chip-draft.active{background:#2558a8;border-color:#2558a8;}
.status-chip.chip-sent.active{background:#856404;border-color:#856404;}
.status-chip.chip-signed.active{background:#f59e0b;border-color:#f59e0b;}
.status-chip.chip-won.active{background:var(--green);border-color:var(--green);}
.status-chip.chip-lost.active{background:#c62828;border-color:#c62828;}
.status-chip.chip-cancelled{color:#888;}
.status-chip.chip-cancelled.active{background:#9e9e9e;border-color:#9e9e9e;color:white;}
.status-chip.chip-inactive{color:#999;}
.status-chip.chip-inactive.active{background:#666;border-color:#666;color:white;}
.status-chip.chip-lost2.active{background:#666;border-color:#666;}
.chip-count{font-size:10px;background:rgba(0,0,0,.08);padding:1px 6px;border-radius:8px;font-weight:800;}
.status-chip.active .chip-count{background:rgba(255,255,255,.25);}
.source-chips-separator{border-inline-start:2px solid var(--border);margin:0 8px;height:24px;align-self:center;}
.source-chip{display:inline-flex;align-items:center;gap:5px;padding:4px 12px;border-radius:20px;font-size:12px;font-weight:700;cursor:pointer;border:1.5px solid #c7b8e8;transition:all .15s;background:#f3eefa;color:#6b4fa0;user-select:none;}
.source-chip:hover{background:#e8dcf8;color:#5a3d91;border-color:#9b7cc9;}
.source-chip.active{background:#6b4fa0;color:#fff;border-color:#6b4fa0;}
.source-chip.active .chip-count{background:rgba(255,255,255,.25);}
/* Sortable table headers */
.sortable-th{cursor:pointer;user-select:none;}
.sortable-th:hover{color:var(--primary-light);background:#eef2f8 !important;}
.sort-arrow{margin-inline-end:3px;opacity:.3;font-size:10px;display:inline-block;}
.sort-arrow.asc::after{content:'▲';}
.sort-arrow.desc::after{content:'▼';}
.sort-arrow.active{opacity:1;}
/* Enhanced toast */
.toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%) translateY(10px);background:var(--primary);color:white;padding:11px 28px;border-radius:28px;font-size:13px;font-weight:700;z-index:9999;opacity:0;transition:opacity .25s,transform .25s;pointer-events:none;display:flex;align-items:center;gap:8px;box-shadow:0 4px 20px rgba(0,0,0,.25);max-width:420px;text-align:center;}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
.toast.toast-success{background:#1a7a4a;}
.toast.toast-error{background:#c62828;}
.toast.toast-warning{background:#856404;}
/* Loading skeleton */
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.skeleton-cell{display:block;height:14px;border-radius:6px;background:linear-gradient(90deg,#eef2f8 25%,#dde4f0 50%,#eef2f8 75%);background-size:200% 100%;animation:shimmer 1.3s infinite;}
/* Summary row */
.sq-summary-row td{background:#eef5ff;font-weight:900;border-top:2px solid var(--border);color:var(--primary);font-size:12px;position:sticky;bottom:0;}
/* Empty state */
.empty-state-large{padding:48px 20px;text-align:center;}
.empty-icon-lg{font-size:44px;opacity:.3;display:block;margin-bottom:12px;}
.empty-state-title{font-size:15px;font-weight:900;color:var(--primary);margin-bottom:6px;}
.empty-state-sub{font-size:12px;color:var(--text-muted);}
/* Row animation */
@keyframes rowIn{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:translateY(0)}}
.admin-table tbody tr{animation:rowIn .12s ease forwards;}

/* ── Accessibility ─────────────────────────────────────────── */
/* Screen reader only */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
/* Focus visible for all interactive elements */
*:focus-visible{outline:3px solid var(--primary);outline-offset:2px;border-radius:2px;}
.nav-tab:focus-visible{outline:2px solid #fff;outline-offset:2px;}
/* Skip to content */
.skip-to-content{position:absolute;top:-100px;right:0;background:var(--primary);color:#fff;padding:12px 24px;font-size:14px;font-weight:700;z-index:100000;border-radius:0 0 0 8px;text-decoration:none;transition:top .2s;}
.skip-to-content:focus{top:0;}

/* Widget toggle */
.a11y-widget{position:fixed;bottom:50px;right:20px;z-index:99999;font-family:'Segoe UI',Tahoma,sans-serif;}
.a11y-toggle{width:48px;height:48px;border-radius:50%;background:var(--primary,#2563eb);color:#ffffff;border:2px solid var(--primary,#2563eb);cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px rgba(0,0,0,.25);transition:background .2s,transform .2s;}
.a11y-toggle:hover{background:#1d4ed8;color:#fff;transform:scale(1.05);}
.a11y-toggle:focus-visible{outline:3px solid #000;outline-offset:3px;}

/* Panel */
.a11y-panel{position:absolute;bottom:58px;right:0;width:280px;background:#fff;border-radius:14px;box-shadow:0 8px 32px rgba(0,0,0,.15);border:1.5px solid var(--border,#e2e8f0);overflow:hidden;direction:rtl;}
.a11y-panel-header{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;background:var(--primary);color:#fff;font-weight:800;font-size:15px;}
.a11y-close{background:none;border:none;color:#fff;font-size:22px;cursor:pointer;line-height:1;padding:0 4px;}
.a11y-close:focus-visible{outline:2px solid #fff;outline-offset:2px;border-radius:4px;}
.a11y-option{padding:10px 16px;border-bottom:1px solid #f1f5f9;display:flex;align-items:center;justify-content:space-between;font-size:13px;color:#1e293b;}
.a11y-option:last-of-type{border-bottom:none;}
.a11y-btn-group{display:flex;gap:4px;}
.a11y-btn-group button{padding:4px 10px;border:1.5px solid var(--border,#e2e8f0);border-radius:8px;background:#fff;cursor:pointer;font-size:13px;font-weight:700;font-family:inherit;transition:background .15s;}
.a11y-btn-group button:hover{background:#eff6ff;}
.a11y-btn-group button:focus-visible{outline:2px solid var(--primary);outline-offset:1px;}

/* Switch */
.a11y-switch-label{display:flex;align-items:center;justify-content:space-between;width:100%;cursor:pointer;gap:8px;}
.a11y-switch-label input{position:absolute;opacity:0;width:0;height:0;}
.a11y-switch{position:relative;width:40px;height:22px;background:#cbd5e1;border-radius:11px;transition:background .2s;flex-shrink:0;}
.a11y-switch::after{content:'';position:absolute;top:2px;inset-inline-start:2px;width:18px;height:18px;background:#fff;border-radius:50%;transition:transform .2s;}
.a11y-switch-label input:checked+.a11y-switch{background:var(--primary);}
.a11y-switch-label input:checked+.a11y-switch::after{transform:translateX(-18px);}
.a11y-switch-label input:focus-visible+.a11y-switch{outline:2px solid var(--primary);outline-offset:2px;}

.a11y-statement-link{display:block;text-align:center;padding:10px;font-size:12px;color:var(--primary);text-decoration:none;border-top:1px solid #f1f5f9;}
.a11y-statement-link:hover{text-decoration:underline;}
.a11y-statement-link:focus-visible{outline:2px solid var(--primary);outline-offset:-2px;}

/* High contrast mode */
body.a11y-high-contrast{filter:contrast(1.4);}
body.a11y-high-contrast *{border-color:#000!important;}

/* Disable animations */
body.a11y-no-motion,body.a11y-no-motion *{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important;}

/* Highlight links */
body.a11y-highlight-links a{outline:2px solid #f59e0b!important;outline-offset:2px;text-decoration:underline!important;}

/* prefers-reduced-motion */
@media(prefers-reduced-motion:reduce){*{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important;}}

/* ═══════════════════════════════════════════════════════════════════════
   TABLET LANDSCAPE (max-width: 1024px) — narrower sidebar
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px){
  .layout{grid-template-columns:240px 1fr !important;}
  .panel-products{min-width:0;}
}

/* ═══════════════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE — Tablet (max-width: 768px)
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px){
  /* ── Prevent horizontal overflow ── */
  html,body{overflow-x:hidden !important;max-width:100vw;}
  .screen{height:calc(100vh - 96px) !important;}
  .screen,.layout,.panel-quote{max-width:100vw;width:100% !important;}
  .panel-quote{overflow-y:auto !important;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
  .panel-quote::-webkit-scrollbar{display:none;width:0;height:0;}
  .quote-area{flex:none !important;overflow:visible !important;}

  /* ── Layout: collapse sidebar ── */
  .layout{grid-template-columns:1fr !important;overflow:hidden;}
  .panel-products{
    position:fixed;top:0;inset-inline-end:-100%;width:80vw;max-width:320px;height:100vh;
    z-index:150;box-shadow:4px 0 24px rgba(0,0,0,.25);transition:inset-inline-end .3s ease;
  }
  .panel-products.mobile-open{inset-inline-end:0;}
  .mobile-sidebar-toggle{
    display:flex !important;align-items:center;justify-content:center;
    position:fixed;bottom:24px;inset-inline-end:18px;z-index:160;
    width:60px;height:60px;border-radius:50%;
    background:linear-gradient(135deg,#4a90e2,#357abd);color:white;border:none;
    font-size:26px;box-shadow:0 6px 20px rgba(74,144,226,.5);cursor:pointer;
    transition:transform .15s;
  }
  .mobile-sidebar-toggle:active{transform:scale(0.92);}
  .mobile-sidebar-backdrop{
    display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:140;
  }
  .mobile-sidebar-backdrop.active{display:block;}

  /* ── Header — two-row grid on mobile ──
     Row 1: logo + back (col 1) | spacer (col 2) | header-right tools (col 3)
     Row 2: nav tabs, full width, horizontally scrollable.
     height MUST stay auto so the two rows don't overlap — the desktop
     height:50px rule is now scoped to ≥769px so it can't reach here. */
  .header{
    display:grid !important;grid-template-columns:auto 1fr auto;grid-template-rows:auto auto;
    padding:0 !important;height:auto !important;min-height:0;row-gap:0;align-items:center;
  }
  .header-logo-img{max-height:26px !important;max-width:120px !important;}
  /* white logo box: constrained, vertically centred, never taller than row 1 */
  .header-logo{
    font-size:15px !important;letter-spacing:.5px !important;flex-shrink:0;
    padding:3px 10px !important;max-height:36px;line-height:1.1;
  }
  .header > div:first-child{
    grid-column:1;grid-row:1;display:flex;align-items:center;gap:8px;
    padding:8px 10px;min-width:0;
  }
  .header-right{grid-column:3;grid-row:1;padding:8px 10px;gap:4px;flex-shrink:0;}
  /* Row 2: nav tab strip on its own band, clearly separated from row 1 */
  .nav-tabs{
    grid-column:1/-1;grid-row:2;
    width:100%;gap:6px;
    overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;
    padding:6px 10px;
    background:rgba(0,0,0,.16);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.10);
    justify-content:flex-start;align-items:center;
  }
  .nav-tabs::-webkit-scrollbar{display:none;}
  /* tasteful subtle pill chips — readable on any header colour, not heavy */
  .nav-tab{
    padding:6px 13px;font-size:12px;font-weight:600;white-space:nowrap;flex-shrink:0;
    min-height:32px;border-radius:16px;
    background:rgba(255,255,255,.14);color:#fff;
    border:1px solid rgba(255,255,255,.18);
    display:inline-flex;align-items:center;gap:5px;
  }
  #tab-sales-dashboard,#tab-management,#tab-sysadmin,#tab-contractor-dashboard,#tab-standalone-equip,#tab-service-tickets{display:none !important;}
  .header-badge{padding:3px 6px;font-size:9px;}
  .user-pill{max-width:80px;font-size:10px;padding:3px 6px;overflow:hidden;text-overflow:ellipsis;}
  .auth-select{font-size:10px;min-width:70px;padding:3px 5px;}
  .reload-btn{padding:3px 6px;font-size:10px;}
  .logout-btn{font-size:10px;padding:3px 6px;}
  #globalBackBtn{padding:4px 10px !important;font-size:11px !important;border-radius:8px !important;border-width:1px !important;margin-inline-start:6px !important;}

  /* ── Topbar ── */
  .topbar{flex-wrap:wrap;padding:8px 14px;gap:6px;}
  .topbar .field-group{min-width:calc(50% - 6px);flex:1 1 calc(50% - 6px);}
  .topbar .discount-box{width:100%;}
  .field-group label{font-size:10px !important;}
  .field-group input,.field-group select{height:44px;font-size:14px;padding:8px 10px;}
  .discount-box{height:44px;}
  .discount-input{width:64px;height:36px;font-size:14px;}

  /* ── Quote body → cards (mobile only; desktop layout untouched) ── */
  .quote-area{padding:6px 4px 0;}
  #quoteTable[style*="table"]{display:block !important;width:100% !important;min-width:0 !important;}
  #quoteTable thead{display:none !important;}
  #quoteTable tbody{display:block;width:100%;}
  #quoteTable tr{display:block;width:100%;}
  /* main line item → card */
  #quoteTable tr.q-item-row{
    display:flex !important;flex-wrap:wrap;align-items:center;gap:6px 10px;position:relative;
    background:#fff;border:1px solid var(--border);border-radius:14px;
    padding:12px 14px;margin:10px 4px;box-shadow:0 1px 5px rgba(0,0,0,.08);
  }
  #quoteTable tr.q-item-row>td{display:block;border:none !important;padding:0 !important;font-size:13px;text-align:right;}
  #quoteTable tr.q-item-row .q-drag,
  #quoteTable tr.q-item-row .q-idx,
  #quoteTable tr.q-item-row .q-draw,
  #quoteTable tr.q-item-row .col-circuit,
  #quoteTable tr.q-item-row .col-section,
  #quoteTable tr.q-item-row .col-profit{display:none !important;}
  /* description — full width, prominent, first */
  #quoteTable tr.q-item-row .desc-cell{order:-2;flex:1 1 100%;max-width:100%;}
  #quoteTable tr.q-item-row .desc-cell textarea{font-size:14px !important;color:#1e293b !important;font-weight:500;min-height:42px !important;line-height:1.45 !important;width:100% !important;}
  /* model chip — second line */
  #quoteTable tr.q-item-row .q-model{order:-1;flex:1 1 100%;font-size:12px !important;font-weight:700;color:var(--primary) !important;}
  /* qty pushes price/total to the row end */
  #quoteTable tr.q-item-row td:has(.qty-ctrl){order:1;margin-inline-end:auto;}
  #quoteTable tr.q-item-row td.num{order:2;font-size:13px;color:var(--text-muted);white-space:nowrap;}
  #quoteTable tr.q-item-row td.q-total{order:3;font-size:17px !important;font-weight:800 !important;color:var(--accent) !important;}
  #quoteTable tr.q-item-row td.q-remove{order:4;position:absolute;top:8px;inset-inline-end:8px;width:auto;}
  #quoteTable tr.q-item-row .remove-btn{width:30px;height:30px;}
  /* full-width sub rows (general data / note / delivery) keep stacked */
  #quoteTable tr.general-data-row,#quoteTable tr.item-note-row,#quoteTable tr.item-delivery-row{margin:0 6px 8px;}
  #quoteTable tr.general-data-row td,#quoteTable tr.item-note-row td,#quoteTable tr.item-delivery-row td{display:block;width:100%;border:none;}
  #quoteTable tr.item-delivery-row td>div{flex-wrap:wrap !important;}
  /* section header as block */
  #quoteTable tr.section-header-row{display:block;margin:14px 4px 2px;}
  #quoteTable tr.section-header-row>td{display:block;}
  /* qty controls — touch friendly */
  .qty-ctrl{gap:2px !important;}
  .qty-btn{width:34px;height:38px;font-size:18px;}
  .qty-input{width:50px;font-size:15px;height:38px;text-align:center;border-radius:8px;}
  /* catalog breadcrumb — touch sizing */
  .crumb-btn{font-size:13px;padding:7px 8px;min-height:36px;}

  /* ── Product rows → cards (demo .prod look, mobile only) ── */
  .product-row{align-items:flex-start;gap:11px;background:#fff;border:1px solid var(--border) !important;border-radius:14px;padding:13px;margin:0 12px 9px;min-height:0;}
  .product-row:active{transform:scale(.99);}
  .product-info{flex:1;min-width:0;}
  .product-model{font-size:13px;font-weight:800;color:var(--primary);direction:ltr;text-align:right;}
  .product-desc{font-size:14px;font-weight:700;color:#0f172a;margin-top:3px;line-height:1.35;white-space:normal;}
  .product-price-tag{font-size:16px;font-weight:900;color:#0f172a;white-space:nowrap;align-self:center;}
  .add-btn{width:42px;height:42px;font-size:24px;border-radius:11px;background:linear-gradient(135deg,var(--primary),var(--accent));color:#fff;box-shadow:0 5px 14px rgba(37,99,235,.35);align-self:center;}
  .draw-btn{width:34px;height:34px;font-size:15px;border-radius:9px;align-self:flex-start;}
  /* clear "add products" bar above the items — replaces the unclear floating box */
  #openCatalogBar{display:flex;align-items:center;justify-content:center;gap:8px;position:sticky;top:0;z-index:40;margin:0 0 8px;padding:12px 14px;border:none;border-radius:0;background:#1e3a8a;color:#fff;font-family:inherit;font-size:13.5px;font-weight:700;cursor:pointer;box-shadow:0 3px 10px rgba(0,0,0,.18);text-align:center;line-height:1.3;}
  #openCatalogBar:active{transform:scale(.985);}
  .mobile-sidebar-toggle{display:none !important;}
  .empty-cta{display:none !important;}
  #catalogCloseBtn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:9px;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.2);color:#fff;font-size:18px;font-weight:800;cursor:pointer;flex:0 0 auto;}
  /* small new-quote icon visible on mobile (top), big "New" hidden from bottom bar */
  #newQuoteMiniBtn{display:inline-flex !important;}

  /* ── Sticky bottom action bar — always visible on mobile ── */
  .totals-bar{position:sticky;bottom:0;z-index:55;flex-direction:column;padding:7px 10px calc(7px + env(safe-area-inset-bottom,0px));gap:6px;align-items:stretch;background:#fff;border-top:1px solid var(--border);box-shadow:0 -4px 16px rgba(15,23,42,.12);}
  .totals-grid{display:grid !important;grid-template-columns:repeat(4,1fr);gap:4px;width:100%;order:-1;}
  .totals-grid .total-sep{display:none;}
  .totals-grid .total-item{background:var(--primary-pale);border-radius:8px;padding:4px 6px;text-align:center;}
  .totals-grid .total-label{font-size:8px !important;}
  .totals-grid .total-value{font-size:13px !important;}
  .totals-grid .total-value.main{font-size:14px !important;color:var(--accent);}
  .actions-bar{display:grid !important;grid-template-columns:repeat(3,1fr);gap:6px;width:100%;flex:none !important;}
  .actions-bar .btn{justify-content:center;padding:10px 6px !important;font-size:13px !important;min-height:46px;border-radius:10px !important;white-space:nowrap;}
  /* declutter: hide power-user controls on mobile, keep New / Save / Clear prominent */
  .actions-bar label,
  .actions-bar #newQuoteBtn,
  .actions-bar #quoteTypeSelect,
  .actions-bar #linkedQuoteInput,
  .actions-bar #saveAsTemplateBtn,
  .actions-bar #loadTemplateBtn,
  .actions-bar #equipApprovalBtn,
  .actions-bar #btuBar{display:none !important;}
  .actions-bar{grid-template-columns:repeat(2,1fr) !important;}
  .actions-bar select{min-height:46px;font-size:13px !important;border-radius:10px !important;padding:6px 10px !important;}

  /* ── Specs screen ── */
  .specs-screen{padding:12px 10px;}
  .btu-summary{gap:8px;}
  .btu-card{min-width:0;padding:10px 12px;}
  .btu-card .btu-value{font-size:18px;}
  .pc-specs-grid{grid-template-columns:1fr !important;}

  /* ── Print quote info ── */
  .pq-info{grid-template-columns:1fr !important;gap:8px;padding:10px 12px;}
  .pq-header{flex-direction:column;gap:8px;}

  /* ── Modals ── */
  .modal,.print-modal{width:96vw !important;max-width:none;}
  .draw-modal{width:98vw !important;max-width:none;}
  .draw-modal-body{flex-direction:column;}
  .draw-col-img{width:100% !important;min-width:0;max-height:40vh;}
  .draw-col-specs{padding:12px 14px;}
  .pc-prices{gap:8px;}

  /* ── Admin ── */
  .admin-screen{padding:10px 8px;}
  #screen-management .admin-shell{max-width:100% !important;}
  .admin-toolbar{padding:6px 8px;gap:6px;}
  .admin-search{min-width:0;max-width:none;width:100%;}
  .management-tabs{gap:4px;}
  .management-tab{padding:6px 10px;font-size:12px;min-height:44px;}
  .tab-group{padding:3px 4px;margin:0 2px;}
  .admin-table-wrap{max-height:calc(100vh - 180px);overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .admin-table{min-width:600px;}
  .admin-table th,.admin-table td{padding:6px 4px;font-size:12px;}

  /* ── Sales dashboard ── */
  .sales-kpis{grid-template-columns:repeat(2,1fr) !important;gap:8px;}
  .sales-kpis-row2{grid-template-columns:1fr !important;}
  .sales-kpi .val{font-size:22px;}
  .sales-kpi .kpi-link{opacity:1;}
  .dash-2col,.dash-3col{grid-template-columns:1fr !important;}
  .period-toggle .btn{min-width:70px;font-size:12px;min-height:44px;}

  /* ── Settings panels — wrap on narrow ── */
  #csPricingModeWrap,#csProfitWrap{flex-wrap:wrap;}

  /* ── Equipment Approval ── */
  .ea-modal{max-width:100vw;width:96vw !important;}
  .ea-body{padding:12px;}
  .ea-group-header{flex-direction:column;gap:10px;}
  .ea-group-img,.ea-group-img-placeholder{width:70px;height:70px;}

  /* ── Login ── */
  .login-card{width:96vw;}
  .login-head{padding:20px 18px;}
  .login-head h2{font-size:22px;}
  .login-body{padding:18px 16px;}

  /* ── Free text panel ── */
  .ft-add-grid{grid-template-columns:1fr;}

  /* ── Forms ── */
  .form-grid{grid-template-columns:1fr !important;}
  .form-grid.three{grid-template-columns:1fr !important;}

  /* ── Misc ── */
  .lock-card{padding:28px 20px;}
  .loader-card{padding:28px 24px;}
  .toast{max-width:90vw;font-size:13px;padding:10px 18px;}
  .btn{min-height:44px;}

  /* ── Quote table mobile — horizontal scroll with compact cells ── */
  .quote-table{min-width:0 !important;font-size:11px;}
  .quote-table th{padding:4px 3px;font-size:9px;white-space:nowrap;}
  .quote-table td{padding:4px 3px;font-size:11px;}
  .quote-table .desc-cell{max-width:120px;overflow:hidden;text-overflow:ellipsis;}
  .quote-table .field-input{font-size:11px !important;padding:3px 4px !important;min-height:36px;}
  .quote-table textarea.field-input{min-height:28px !important;}
  .quote-area{padding:2px 2px 0;overflow-x:auto;-webkit-overflow-scrolling:touch;}

  /* ── Saved quotes table — hide less important columns ── */
  .sq-col-source,.sq-col-created,.sq-col-po,.sq-col-equip,.sq-col-order,.sq-col-items,.sq-col-owner{display:none !important;}

  /* ── Notes wrap — stack on mobile ── */
  #quoteNotesWrap{flex-direction:column !important;gap:6px !important;padding:6px 10px !important;margin:4px 6px !important;}

  /* ── FABs — lifted above the sticky action bar so they never cover New/Save ── */
  .a11y-widget{bottom:112px !important;top:auto !important;right:auto !important;left:14px !important;z-index:99999;}
  .a11y-toggle{width:40px !important;height:40px !important;font-size:18px !important;}
  .mobile-sidebar-toggle{bottom:112px !important;top:auto !important;inset-inline-end:auto !important;inset-inline-start:auto !important;right:14px !important;left:auto !important;width:auto !important;height:52px;border-radius:26px !important;padding:0 20px !important;gap:8px;font-size:22px;font-weight:800;}
  .mobile-sidebar-toggle .msb-label{font-size:14px;font-weight:800;letter-spacing:.2px;}

  /* ── Meta strip compact ── */
  .quote-meta-strip{flex-wrap:wrap;gap:4px;padding:4px 14px;font-size:11px;}
  .quote-meta-strip .meta-item{font-size:11px;}
  #quoteActionBtns{flex-wrap:wrap !important;gap:4px !important;margin-right:0 !important;}
  #quoteActionBtns .btn{padding:6px 10px !important;font-size:12px !important;min-height:40px;}

  /* ── Totals grid compact ── */
  .totals-grid .total-item{font-size:11px;min-width:0;text-align:center;}

  /* ── Status chips wrap ── */
  .status-chips{flex-wrap:wrap;gap:4px;padding:4px 6px;}
  .status-chip{font-size:10px;padding:4px 8px;min-height:32px;}

  /* ── Saved quotes filters compact ── */
  #screen-management .admin-toolbar{flex-wrap:wrap;gap:4px;}
  #screen-management .admin-toolbar .auth-select{min-width:80px;font-size:11px;}
  #screen-management .admin-toolbar .btn{font-size:11px;padding:6px 8px;}

  /* ── Global: prevent horizontal scroll on ALL screens ── */
  .screen{overflow-x:hidden !important;max-width:100vw !important;}
  .admin-screen{overflow-x:hidden !important;max-width:100vw !important;box-sizing:border-box;}
  .admin-shell{max-width:100% !important;overflow-x:hidden !important;}
  .admin-card{max-width:100% !important;overflow:hidden;}

  /* ── Saved Quotes screen — mobile optimized ── */
  #screen-saved-quotes .admin-toolbar{flex-wrap:wrap;gap:5px;padding:8px !important;}
  #screen-saved-quotes .admin-search{width:100% !important;min-width:0 !important;max-width:100% !important;box-sizing:border-box;}
  #screen-saved-quotes .auth-select{flex:1 1 calc(50% - 4px);min-width:0 !important;font-size:11px;box-sizing:border-box;}
  #screen-saved-quotes .btn{font-size:11px;padding:6px 8px;min-height:40px;}
  #screen-saved-quotes .export-btn{font-size:11px;padding:6px 8px;}
  #screen-saved-quotes .spacer{display:none;}
  #screen-saved-quotes .small-note{width:100%;text-align:center;font-size:10px;}
  #screen-saved-quotes .admin-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;}
  #screen-saved-quotes .admin-table{min-width:500px;}
  #screen-saved-quotes .admin-card-head{flex-wrap:wrap;gap:4px;padding:8px 10px;}

  /* ── Settings / Company settings panels ── */
  .cs-section{padding:10px !important;}
  .cs-grid{grid-template-columns:1fr !important;}
  .cs-row{flex-direction:column !important;gap:6px !important;}
  .cs-label{min-width:0 !important;width:100% !important;}
  .cs-input{width:100% !important;box-sizing:border-box;}
  .settings-panel{padding:10px !important;}
  .settings-tabs{overflow-x:auto;-webkit-overflow-scrolling:touch;flex-wrap:nowrap !important;gap:3px;}
  .settings-tab{flex-shrink:0;font-size:11px;white-space:nowrap;}

  /* ── Sysadmin screen ── */
  #screen-sysadmin .admin-toolbar{flex-wrap:wrap;gap:5px;}
  #screen-sysadmin .admin-search{width:100% !important;min-width:0 !important;max-width:100% !important;}
  #screen-sysadmin .auth-select{flex:1 1 calc(50% - 4px);min-width:0 !important;}

  /* ── All admin tables — horizontal scroll in container ── */
  .admin-table-wrap{overflow-x:auto !important;-webkit-overflow-scrolling:touch;max-width:100% !important;}

  /* ── Print preview ── */
  .print-modal{width:98vw !important;max-width:none !important;}
  .print-modal .modal-body{padding:8px !important;}
  .pq-wrapper{zoom:0.7;transform-origin:top right;}
}

/* ═══════════════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE — Small phone (max-width: 480px)
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 480px){
  .header-logo-text{display:none;}
  .header-logo-img{max-height:26px !important;}
  .header-logo{min-width:auto;}
  .screen{height:calc(100vh - 92px) !important;}
  /* Nav tab sizing inherits the ≤768px pill chips; just keep labels visible */
  .nav-tab-text{display:inline !important;}
  .panel-products{top:0;height:100vh;width:85vw;max-width:340px;}

  .sales-kpis{grid-template-columns:1fr !important;}
  .sales-kpi .val{font-size:20px;}

  /* Quote table — compact on small screens */
  .quote-table{font-size:10px !important;}
  .quote-table th{font-size:9px;padding:3px 2px;white-space:nowrap;}
  .quote-table td{font-size:10px;padding:3px 2px;}
  .quote-table .col-sku{display:none;}
  .quote-table .col-section{display:none;}
  .quote-table .col-circuit{display:none;}
  .quote-table .col-profit{display:none;}
  .quote-table .desc-cell{max-width:80px;}
  .quote-table .field-input{font-size:10px !important;padding:2px 3px !important;min-height:32px;}
  .qty-ctrl{gap:0 !important;}
  .qty-input{width:38px;height:34px;font-size:12px;text-align:center;border-radius:6px;}
  .remove-btn,.edit-btn,.del-btn,.icon-btn{min-width:36px;min-height:36px;display:inline-flex;align-items:center;justify-content:center;}
  .quote-table .desc-cell{max-width:70px;white-space:nowrap !important;overflow:hidden;text-overflow:ellipsis;}

  .topbar .field-group{min-width:100%;flex:1 1 100%;}
  .topbar{padding:6px 12px;gap:4px;}
  .discount-box{flex-direction:row;flex-wrap:wrap;gap:4px;}

  /* ── Actions bar compact ── */
  .actions-bar{grid-template-columns:repeat(2,1fr) !important;gap:5px;}
  .actions-bar .btn{font-size:12px !important;padding:10px 4px !important;min-height:44px;}
  .actions-bar label{font-size:11px !important;}
  .actions-bar select{font-size:12px !important;}
  .totals-grid{grid-template-columns:repeat(4,1fr) !important;gap:3px;}
  .totals-grid .total-item{padding:3px 4px;}
  .totals-grid .total-label{font-size:7px !important;}
  .totals-grid .total-value{font-size:12px !important;}
  .totals-grid .total-value.main{font-size:13px !important;}

  /* ── Saved quotes — phone view ── */
  .admin-table{min-width:400px !important;font-size:10px;}
  .admin-table th,.admin-table td{padding:4px 3px;font-size:10px;}

  /* ── Modal full screen on phones ── */
  .modal{max-height:95vh !important;border-radius:8px !important;}
  .modal-body{max-height:calc(95vh - 120px) !important;overflow-y:auto !important;}

  .btu-summary{flex-direction:column;}
  .btu-card{flex:none;width:100%;}

  .management-tabs{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;}
  .management-tab{flex-shrink:0;font-size:11px;padding:6px 10px;min-height:44px;}

  /* ── Contractor dashboard — card layout for recent quotes ── */
  .ctr-recent-cards{display:flex !important;flex-direction:column;gap:10px;padding:8px;}
  .ctr-recent-card{
    background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;padding:14px 16px;
    display:flex;flex-direction:column;gap:6px;
  }
  .ctr-recent-card .card-row{display:flex;justify-content:space-between;align-items:center;}
  .ctr-recent-card .card-label{font-size:11px;color:#64748b;font-weight:600;}
  .ctr-recent-card .card-value{font-size:13px;font-weight:700;color:#1e293b;}
  .ctr-recent-card .card-quote-num{font-size:15px;font-weight:800;color:var(--primary);cursor:pointer;}
  .ctr-recent-card .card-total{font-size:16px;font-weight:800;color:#16a34a;}
  #screen-contractor-dashboard .admin-table-wrap{display:none;}

  /* ── Saved quotes on small phone ── */
  #screen-saved-quotes .admin-toolbar{padding:6px !important;}
  #screen-saved-quotes .auth-select{flex:1 1 100%;font-size:10px;}
  #screen-saved-quotes .admin-table{min-width:320px !important;}

  /* ── Landscape small phone ── */
  @media (orientation:landscape) and (max-height:500px){
    .panel-products{height:calc(100vh - 44px);top:44px;}
    .modal,.print-modal{max-height:90vh;overflow-y:auto;}
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE — Small phones (max-width: 430px)
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 430px){
  /* ── Topbar: single column ── */
  .topbar .field-group{min-width:100% !important;flex:1 1 100% !important;}
  .topbar{padding:4px 10px !important;}

  /* ── Quote action buttons: 2-column grid ── */
  #quoteActionBtns{display:grid !important;grid-template-columns:repeat(2,1fr) !important;gap:3px !important;}
  #quoteActionBtns .btn{font-size:10px !important;padding:6px 4px !important;min-height:38px;}

  /* ── Saved quotes filters: full width ── */
  #screen-saved-quotes .admin-search{width:100% !important;min-width:0 !important;max-width:100% !important;}
  #screen-saved-quotes .admin-toolbar select{min-width:0 !important;flex:1 1 100% !important;}
  #screen-saved-quotes .admin-table{min-width:280px !important;}

  /* ── Management: products sidebar collapse ── */
  .products-admin-layout{grid-template-columns:1fr !important;}
  .management-tab{font-size:10px !important;padding:5px 8px !important;}

  /* ── Sysadmin: filters full width ── */
  #screen-sysadmin .admin-toolbar select{min-width:0 !important;flex:1 1 100% !important;}
  #screen-sysadmin .admin-search{width:100% !important;min-width:0 !important;}

  /* ── Sales dashboard: filters wrap ── */
  .period-toggle{flex-wrap:wrap !important;gap:4px;}
  .period-toggle .btn{font-size:11px !important;padding:6px 8px !important;min-width:60px !important;}

  /* ── Header: compact at very small phones ── */
  .auth-select{min-width:60px !important;font-size:9px !important;padding:2px 4px !important;}
  .user-pill{max-width:60px !important;font-size:9px !important;}

  /* ── Login: tighter padding ── */
  .login-body{padding:16px 14px !important;}

  /* ── A11y widget: center on small phones ── */
  .a11y-panel{width:90vw !important;max-width:280px !important;}
}

/* ── Save to Catalog button (Model B only) ── */
.save-to-catalog-btn{
  background:none;border:none;cursor:pointer;font-size:14px;color:#8b5cf6;
  padding:2px;line-height:1;transition:transform .15s,color .15s;
}
.save-to-catalog-btn:hover{color:#7c3aed;transform:scale(1.2);}

/* ── Save to Catalog modal ── */
.stc-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:2000;display:flex;align-items:center;justify-content:center;}
.stc-modal{background:#fff;border-radius:14px;width:400px;max-width:94vw;box-shadow:0 20px 60px rgba(0,0,0,.2);direction:rtl;overflow:hidden;}
.stc-header{background:linear-gradient(135deg,#8b5cf6,#7c3aed);color:#fff;padding:16px 20px;font-size:16px;font-weight:700;display:flex;align-items:center;justify-content:space-between;}
.stc-close{background:none;border:none;color:#fff;font-size:22px;cursor:pointer;}
.stc-body{padding:20px;}
.stc-body .stc-field{margin-bottom:14px;}
.stc-body .stc-field label{display:block;font-size:12px;font-weight:700;color:#475569;margin-bottom:4px;}
.stc-body .stc-field input,.stc-body .stc-field select{width:100%;padding:8px 10px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:13px;font-family:inherit;direction:rtl;}
.stc-body .stc-field input:focus,.stc-body .stc-field select:focus{border-color:#8b5cf6;outline:none;}
.stc-save-btn{width:100%;padding:12px;background:linear-gradient(135deg,#8b5cf6,#7c3aed);color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:700;cursor:pointer;font-family:inherit;transition:opacity .15s;}
.stc-save-btn:hover{opacity:.9;}
.stc-save-btn:disabled{opacity:.5;cursor:not-allowed;}

/* ═══════════════════════════════════════════════════════════════════════
   CONTRACTOR MODE — Simplified UI for installers
   ═══════════════════════════════════════════════════════════════════════ */

/* ── A. Sidebar ── */
body.contractor-mode .layout{grid-template-columns:260px 1fr;}
body.contractor-mode .ft-add-panel{display:block;}
body.contractor-mode .panel-refresh-btn{display:none;}

/* ── B. Topbar ── */
body.contractor-mode .topbar{padding:4px 10px;gap:4px;}
body.contractor-mode .topbar .vat-field{display:none;}
body.contractor-mode .topbar .discount-box{display:none;}
body.contractor-mode #fieldSalesOwnerWrap{display:none;}

/* ── C. Quote table — hide section & circuit columns ── */
body.contractor-mode .col-section,
body.contractor-mode .col-circuit{display:none;}

/* ── D. Totals bar — hide BTU bar, equipment approval, specs ── */
/* btuBar visible for contractors — controlled by companyHasBtu() in JS */
body.contractor-mode #equipApprovalBtn{display:none;}
body.contractor-mode #openSpecsBtn{display:none;}

/* ── E. Quote meta strip — hide order & history buttons ── */
body.contractor-mode #quoteActionMarkOrder{display:none;}
body.contractor-mode #quoteActionHistory{display:none;}

/* ── F. Saved quotes — hide filters ── */
body.contractor-mode #savedQuoteClientFilter{display:none;}
body.contractor-mode #savedQuoteOwnerFilter{display:none;}
body.contractor-mode #savedQuoteOrderFilter{display:none;}
body.contractor-mode #savedQuoteEquipFilter{display:none;}
/* export-btn visible for contractors */

/* ── G. Saved quotes — hide table columns ── */
body.contractor-mode .sq-col-owner,
body.contractor-mode .sq-col-items,
body.contractor-mode .sq-col-order,
body.contractor-mode .sq-col-equip,
body.contractor-mode .sq-col-source,
body.contractor-mode .sq-col-created{display:none;}
body.contractor-mode #screen-saved-quotes .admin-table{table-layout:auto;width:100%;}
body.contractor-mode #screen-saved-quotes .admin-table td,
body.contractor-mode #screen-saved-quotes .admin-table th{white-space:normal;padding:8px 12px;}

/* ── H. Status chips — hide irrelevant statuses ── */
body.contractor-mode #chip-won,
body.contractor-mode #chip-lost,
body.contractor-mode #chip-inactive{display:none;}

/* ── Mobile override for contractor sidebar ── */
@media (max-width: 768px){
  body.contractor-mode .layout{grid-template-columns:1fr !important;}
}

/* ════════════════════════════════════════════════════════════════════════
   BLOCK 2 — visual overrides (was inline <style id="visual-overrides">)
   ════════════════════════════════════════════════════════════════════════ */
/* QuoteMaster — visual refresh (phase 1 + 2 + 3) */

:root {
  --primary:       #1a3a6b;
  --primary-light: #2a4f86;
  --primary-dark:  #142c53;
  --primary-pale:  #eef3fb;
  --accent:        #d64545;
  --accent-light:  #fdecec;
  --gold:          #b88320;
  --gold-light:    #fdf5e3;
  --border:        #dde2ea;
  --line:          #eceff4;
  --bg:            #f5f7fa;
  --white:         #ffffff;
  --text:          #1a2029;
  --text-muted:    #6b7687;
  --muted:         #6b7687;
  --green:         #1a7a4a;
  --green-bg:      #e7f5ee;
  --shadow-sm: 0 1px 2px rgba(14,31,59,.06), 0 1px 3px rgba(14,31,59,.04);
  --shadow:    0 2px 8px rgba(14,31,59,.06), 0 1px 3px rgba(14,31,59,.04);
  --shadow-lg: 0 8px 24px rgba(14,31,59,.08), 0 2px 6px rgba(14,31,59,.04);
  --radius:    10px;
  --radius-sm: 6px;
}


body,
body button,
body input,
body select,
body textarea {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body { font-size: 14px; color: var(--text); background: var(--bg); }


.header,
body.own-company-mode .header,
.login-head,
.panel-header,
.quote-table thead tr,
.modal-header {
  background: var(--primary) !important;
  border-bottom-color: rgba(255,255,255,.08) !important;
}
body.own-company-mode .header { background: #1a7a4a !important; }
/* Desktop only: fixed single-row height. Scoped so it can't crush the
   two-row mobile grid header (mobile uses height:auto, see ≤768px block). */
@media (min-width:769px){
  .header { box-shadow: 0 1px 0 rgba(0,0,0,.04); height: 50px; }
}


.header-logo { font-size: 18px; font-weight: 800; letter-spacing: 0; }
.header-logo span { color: #93b7e3; }


.nav-tab {
  border-radius: 8px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  padding: 6px 12px !important;
  border: 1px solid transparent !important;
  font-size: 13px !important;
  transition: background .12s, color .12s !important;
}
.nav-tab:hover { background: rgba(255,255,255,.1) !important; }
.nav-tab.active {
  background: rgba(255,255,255,.16) !important;
  border-color: transparent !important;
  color: #fff !important;
}
/* Mobile nav tabs — subtle translucent pill chips, white text (balanced,
   readable on any header colour, clear active state without looking heavy).
   This block comes after the ≤768px header block above; it owns the final
   colour/active styling so the two don't fight. Sizing stays in that block. */
@media (max-width:768px){
  .nav-tab{
    color:rgba(255,255,255,.82) !important;
    background:rgba(255,255,255,.12) !important;
    border:1px solid rgba(255,255,255,.16) !important;
    font-weight:600 !important;text-shadow:none;
    /* override the global desktop !important sizing (border-radius:8px etc.) */
    border-radius:16px !important;font-size:12px !important;padding:6px 13px !important;
  }
  .nav-tab:hover{background:rgba(255,255,255,.2) !important;color:#fff !important;}
  .nav-tab.active{
    background:#fff !important;color:var(--primary) !important;
    border-color:#fff !important;font-weight:700 !important;
    box-shadow:0 1px 4px rgba(0,0,0,.18);
  }
}


.header-badge, .user-pill {
  background: rgba(255,255,255,.12) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  border-radius: 999px !important;
  padding: 4px 10px !important;
  font-weight: 600 !important;
}
.reload-btn, .logout-btn {
  border-radius: 8px !important;
  border: 1px solid rgba(255,255,255,.2) !important;
  background: rgba(255,255,255,.1) !important;
  font-weight: 600 !important;
  transition: background .12s !important;
}
.reload-btn:hover, .logout-btn:hover { background: rgba(255,255,255,.2) !important; transform: none !important; }


.panel-header {
  padding: 14px 16px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}
.panel-refresh-btn {
  background: rgba(255,255,255,.12) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  border-radius: 8px !important;
  padding: 4px 10px !important;
  font-weight: 600 !important;
}


.panel-products { border-inline-start: 1px solid var(--border) !important; }
.search-wrap { padding: 12px 14px !important; background: var(--white) !important; }
.search-input {
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  padding: 9px 12px !important;
  background: var(--bg) !important;
  transition: border-color .12s, box-shadow .12s !important;
}
.search-input:focus {
  border-color: var(--primary-light) !important;
  background: var(--white) !important;
  box-shadow: 0 0 0 3px rgba(26,58,107,.12) !important;
}

.cat-tabs { background: var(--white) !important; border-bottom: 1px solid var(--border) !important; }
.cat-tab {
  padding: 9px 14px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  border-bottom: 1px solid var(--line) !important;
}
.cat-tab:hover { background: var(--primary-pale) !important; color: var(--primary) !important; }
.cat-tab.active { background: var(--primary-pale) !important; color: var(--primary) !important; font-weight: 700 !important; }
.cat-tab .cnt {
  background: var(--border) !important; color: var(--text-muted) !important;
  border-radius: 999px !important; padding: 2px 8px !important;
  font-size: 11px !important; font-weight: 600 !important;
}
.cat-tab.active .cnt { background: var(--primary) !important; color: #fff !important; }

.subcat-toggle {
  background: var(--bg) !important;
  color: var(--text) !important;
  border-top: 1px solid var(--border) !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 10px 14px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}
.subcat-toggle:hover, .subcat-toggle.open { background: var(--primary-pale) !important; color: var(--primary) !important; }
.subcat-arrow { color: var(--text-muted) !important; }
.subcat-cnt { background: var(--text-muted) !important; font-weight: 600 !important; }

.product-row {
  padding: 8px 12px !important;
  border-bottom: 1px solid var(--line) !important;
  gap: 8px !important;
  transition: background .1s !important;
}
.product-row:hover { background: var(--primary-pale) !important; }
.product-row.no-disc { background: var(--gold-light) !important; }
.product-model { font-size: 13px !important; color: var(--text) !important; }
.product-desc  { font-size: 11px !important; color: var(--text-muted) !important; margin-top: 2px !important; }
.product-price-tag { font-size: 12px !important; color: var(--primary) !important; font-weight: 700 !important; }

.add-btn {
  width: 28px !important; height: 28px !important;
  border-radius: 8px !important;
  background: var(--primary-pale) !important;
  color: var(--primary) !important;
  font-size: 14px !important;
  transition: background .12s, color .12s, transform .1s !important;
  box-shadow: none !important;
}
.add-btn:hover {
  background: var(--primary) !important;
  color: #fff !important;
  transform: none !important;
  box-shadow: none !important;
}
.add-btn:active { transform: scale(.94) !important; }

.draw-btn {
  width: 28px !important; height: 28px !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  background: var(--white) !important;
}
.draw-btn:hover { border-color: var(--primary-light) !important; background: var(--primary-pale) !important; transform: none !important; }


.ft-add-panel {
  background: var(--bg) !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 12px 14px !important;
}
.ft-add-panel .ft-title { font-size: 12px !important; color: var(--text) !important; font-weight: 700 !important; }
.ft-add-grid input {
  border: 1px solid var(--border) !important;
  border-radius: 6px !important;
  padding: 7px 10px !important;
  background: var(--white) !important;
  font-size: 12px !important;
}
.ft-add-grid input:focus {
  border-color: var(--primary-light) !important;
  box-shadow: 0 0 0 3px rgba(26,58,107,.12) !important;
}
.ft-add-btn {
  background: var(--primary) !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  padding: 8px 0 !important;
  font-size: 13px !important;
  letter-spacing: 0 !important;
  transition: background .12s !important;
}
.ft-add-btn:hover { background: var(--primary-dark) !important; }


.topbar {
  background: var(--white) !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 12px 16px !important;
  gap: 12px !important;
}
.field-group label {
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: var(--text-muted) !important;
  margin-bottom: 4px !important;
}
.field-group input,
.field-group select,
.topbar .field-group select {
  height: 36px !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  padding: 0 10px !important;
  font-size: 13px !important;
  background: var(--white) !important;
  transition: border-color .12s, box-shadow .12s !important;
}
.field-group input:focus,
.field-group select:focus {
  border-color: var(--primary-light) !important;
  box-shadow: 0 0 0 3px rgba(26,58,107,.12) !important;
}

.discount-box {
  background: var(--primary-pale) !important;
  border: 1px solid var(--primary) !important;
  border-radius: 8px !important;
  padding: 0 12px !important;
  height: 36px !important;
  gap: 8px !important;
}
.discount-box label { font-size: 11px !important; font-weight: 700 !important; color: var(--primary) !important; }
.discount-input {
  border: 1px solid var(--primary) !important;
  border-radius: 6px !important;
  height: 28px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}


.quote-meta-strip {
  background: var(--white) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  padding: 10px 14px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  box-shadow: var(--shadow-sm) !important;
  margin: 10px 16px 12px !important;
}
.quote-meta-strip .muted { font-weight: 500 !important; }


.quote-area { padding: 8px 16px 0 !important; }
.quote-table {
  background: var(--white) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  font-size: 13px !important;
  box-shadow: var(--shadow-sm) !important;
}
.quote-table thead tr { background: #f5f7fa !important; color: var(--text) !important; }
.quote-table thead th {
  background: #f5f7fa !important;
  color: var(--text-muted) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  padding: 10px 10px !important;
  border-bottom: 1px solid var(--border) !important;
  text-transform: none !important;
}
.quote-table td {
  padding: 10px 10px !important;
  border-bottom: 1px solid var(--line) !important;
}
.quote-table tbody tr:last-child td { border-bottom: none !important; }
.quote-table tbody tr:hover { background: #fafbfd !important; }
.quote-table tbody tr.no-disc-row { background: var(--gold-light) !important; }
.quote-table tbody tr.no-disc-row:hover { background: #fbefd6 !important; }

.field-input {
  border: 1px solid var(--border) !important;
  border-radius: 6px !important;
  padding: 5px 8px !important;
  font-size: 12px !important;
  transition: border-color .12s, box-shadow .12s !important;
}
.field-input:focus {
  border-color: var(--primary-light) !important;
  box-shadow: 0 0 0 3px rgba(26,58,107,.12) !important;
}


.qty-ctrl { gap: 0 !important; border: 1px solid var(--border) !important; border-radius: 8px !important; overflow: hidden !important; display: inline-flex !important; height: 30px !important; background: var(--white) !important; }
.qty-btn {
  border: none !important;
  border-radius: 0 !important;
  width: 28px !important; height: 100% !important;
  background: var(--white) !important;
  color: var(--text) !important;
  font-weight: 600 !important;
  transition: background .1s, color .1s !important;
}
.qty-btn:hover { background: var(--primary-pale) !important; color: var(--primary) !important; border-color: transparent !important; }
.qty-input {
  border: none !important;
  border-radius: 0 !important;
  width: 44px !important;
  font-weight: 700 !important;
  padding: 0 !important;
  border-inline: 1px solid var(--border) !important;
}

.tag-disc {
  background: var(--green-bg) !important; color: var(--green) !important;
  border-radius: 6px !important; padding: 3px 8px !important;
  font-size: 11px !important; font-weight: 600 !important;
}
.tag-no-disc {
  background: var(--gold-light) !important; color: var(--gold) !important;
  border: 1px solid #e4cc8e !important;
  border-radius: 6px !important; padding: 3px 8px !important;
  font-size: 11px !important; font-weight: 600 !important;
}

.ft-row td { background: #fff8e1 !important; }
.ft-row td input.field-input { background: #fffcee !important; }
.ft-row.section-header-row td { background: #d4edda !important; color: #1a5e2a !important; font-weight: 700 !important; border-bottom: 2px solid #81c784 !important; }
.ft-row.section-header-row td input.field-input { background: transparent !important; color: #1a5e2a !important; }

.remove-btn {
  color: var(--text-muted) !important;
  width: 28px !important; height: 28px !important;
  border-radius: 6px !important;
  opacity: 1 !important;
  transition: background .1s, color .1s !important;
}
.remove-btn:hover { background: var(--accent-light) !important; color: var(--accent) !important; }


.btn {
  padding: 8px 14px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  transition: background .12s, color .12s, border-color .12s, box-shadow .12s !important;
  box-shadow: none !important;
}
.btn:hover { transform: none !important; }
.btn:active { transform: scale(.97) !important; }

.btn-primary {
  background: var(--primary) !important;
  color: #fff !important;
  border: 1px solid var(--primary) !important;
}
.btn-primary:hover { background: var(--primary-dark) !important; border-color: var(--primary-dark) !important; }

.btn-secondary {
  background: var(--white) !important;
  color: var(--primary) !important;
  border: 1px solid var(--border) !important;
}
.btn-secondary:hover { background: var(--primary-pale) !important; border-color: var(--primary-light) !important; }

.btn-danger {
  background: var(--white) !important;
  color: var(--accent) !important;
  border: 1px solid var(--border) !important;
}
.btn-danger:hover { background: var(--accent-light) !important; border-color: var(--accent) !important; }

.btn-save {
  background: var(--white) !important;
  color: var(--green) !important;
  border: 1px solid var(--border) !important;
}
.btn-save:hover { background: var(--green-bg) !important; border-color: var(--green) !important; }
.btn-save.dirty { background: var(--green) !important; color: #fff !important; border-color: var(--green) !important; animation: none !important; }


.totals-bar {
  background: var(--white) !important;
  border-top: 1px solid var(--border) !important;
  padding: 12px 16px !important;
  gap: 16px !important;
}
.totals-grid { gap: 24px !important; }
.total-label {
  font-size: 11px !important; font-weight: 600 !important;
  color: var(--text-muted) !important;
  text-transform: none !important; letter-spacing: 0 !important;
}
.total-value { font-size: 14px !important; font-weight: 700 !important; color: var(--text) !important; }
.total-value.main { font-size: 20px !important; color: var(--primary) !important; letter-spacing: -.3px !important; }
.total-sep { background: var(--border) !important; }


.btu-bar {
  background: var(--white) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  padding: 10px 16px !important;
  gap: 18px !important;
}
.btu-bar-label { color: #475569 !important; text-transform: none !important; letter-spacing: 0 !important; font-weight: 700 !important; }
.btu-bar-value { font-weight: 800 !important; color: var(--primary) !important; }
.btu-bar-value.green { color: var(--green) !important; }
.btu-bar-value.warn  { color: #c46a00 !important; }


.login-overlay { background: rgba(14,31,59,.6) !important; backdrop-filter: blur(6px) !important; }
.login-card {
  border-radius: 16px !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-lg) !important;
}
.login-head {
  padding: 28px 28px 24px !important;
}
.login-head h2 { font-size: 24px !important; font-weight: 700 !important; letter-spacing: -.3px !important; }
.login-head p  { font-size: 13px !important; opacity: .85 !important; }
.login-body { padding: 24px 28px 28px !important; gap: 14px !important; }
/* Force LTR + left-align on username/email/password fields across all forms */
input[type="email"],
input[type="password"],
input[type="url"],
input[autocomplete="username"],
input[autocomplete="email"],
input[autocomplete="current-password"],
input[autocomplete="new-password"],
input[autocomplete="one-time-code"] {
  direction: ltr !important;
  text-align: left !important;
}
input[type="email"]::placeholder,
input[autocomplete="username"]::placeholder,
input[autocomplete="email"]::placeholder { direction: rtl; text-align: right; }
.login-field label { font-size: 12px !important; font-weight: 600 !important; color: var(--text-muted) !important; text-transform: none !important; letter-spacing: 0 !important; }
.login-field input {
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
  font-size: 14px !important;
  transition: border-color .12s, box-shadow .12s !important;
}
.login-field input:focus {
  border-color: var(--primary-light) !important;
  box-shadow: 0 0 0 3px rgba(26,58,107,.14) !important;
}
.tfa-digit {
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  background: var(--bg) !important;
}
.tfa-digit:focus { border-color: var(--primary) !important; box-shadow: 0 0 0 3px rgba(26,58,107,.18) !important; background: var(--white) !important; }


.modal, .print-modal, .draw-modal, .ea-modal {
  border-radius: 14px !important;
  box-shadow: var(--shadow-lg) !important;
  border: 1px solid var(--border) !important;
  overflow: hidden !important;
}
.modal-header, .ea-head {
  padding: 16px 20px !important;
  background: var(--primary) !important;
  color: #fff !important;
  border-bottom: none !important;
}
.modal-header h2 { font-size: 16px !important; font-weight: 700 !important; letter-spacing: 0 !important; }
.modal-subtitle { font-size: 12px !important; opacity: .8 !important; margin-top: 2px !important; }
.modal-close, .close-btn {
  background: rgba(255,255,255,.15) !important;
  border: 1px solid rgba(255,255,255,.2) !important;
  border-radius: 8px !important;
  width: 30px !important; height: 30px !important;
  color: #fff !important;
  font-size: 16px !important;
  display: grid !important; place-items: center !important;
}
.modal-close:hover, .close-btn:hover { background: rgba(255,255,255,.28) !important; }


.management-tab {
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  padding: 7px 14px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  transition: background .12s, color .12s, border-color .12s !important;
}
.management-tab:hover:not(.active) { background: var(--primary-pale) !important; border-color: var(--primary-light) !important; }
.management-tab.active { background: var(--primary) !important; color: #fff !important; border-color: var(--primary) !important; }

.tab-group { background: var(--bg) !important; border: 1px solid var(--border) !important; border-radius: 10px !important; padding: 5px 7px !important; }
.tab-group.group-catalog { background: var(--primary-pale) !important; border-color: #c8d9ef !important; }
.tab-group.group-crm     { background: var(--green-bg) !important;  border-color: #b5dec8 !important; }
.tab-group.group-admin   { background: var(--gold-light) !important; border-color: #e4cc8e !important; }


@media (max-width: 768px) {
  /* Header height/padding intentionally NOT forced here — the two-row grid
     header (see the ≤768px block ~line 768) owns layout with height:auto.
     A fixed 50px height here was crushing the two rows into one (overlap). */
  .quote-meta-strip { margin: 8px 12px 10px !important; }
  .quote-area { padding: 6px 8px 0 !important; }
  .quote-table { border-radius: 8px !important; }
  .topbar { padding: 10px 12px !important; gap: 8px !important; }
  .totals-bar { padding: 10px 12px !important; }
  .btn { padding: 8px 12px !important; font-size: 12px !important; min-height: 40px !important; }
  .icon-btn { width: 40px !important; height: 40px !important; }
  .login-card { border-radius: 14px !important; }
  .login-head { padding: 22px 20px 18px !important; }
  .login-head h2 { font-size: 20px !important; }
  .login-body { padding: 20px !important; }
  .modal-header h2 { font-size: 15px !important; }
  .admin-table th, .admin-table td { padding: 8px 6px !important; font-size: 12px !important; }
}


@keyframes pulse-green { 0%,100%{opacity:1} 50%{opacity:.92} }
.btn-save.dirty { animation: pulse-green 1.8s ease-in-out infinite !important; }


.products-list::-webkit-scrollbar,
.quote-area::-webkit-scrollbar,
.modal-body::-webkit-scrollbar { width: 10px; height: 10px; }
.products-list::-webkit-scrollbar-thumb,
.quote-area::-webkit-scrollbar-thumb,
.modal-body::-webkit-scrollbar-thumb {
  background: var(--border); border-radius: 10px; border: 2px solid var(--white);
}
.products-list::-webkit-scrollbar-thumb:hover,
.quote-area::-webkit-scrollbar-thumb:hover,
.modal-body::-webkit-scrollbar-thumb:hover { background: #c5ccd7; }


:focus-visible { outline: 2px solid var(--primary-light); outline-offset: 2px; }
button:focus-visible,
a:focus-visible { outline-offset: 3px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; }






.dashboard-card,
.dash-card,
.ctr-recent-card,
.admin-card {
  background: var(--white) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  box-shadow: var(--shadow-sm) !important;
  overflow: hidden !important;
}
.dash-card-head,
.admin-card-head,
.card-header {
  padding: 14px 18px !important;
  border-bottom: 1px solid var(--line) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  background: var(--white) !important;
}
.dash-card-title,
.admin-title,
.card-header h2,
.card-header h3 {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  letter-spacing: -0.2px !important;
  margin: 0 !important;
}
.dash-card-meta,
.admin-subtitle {
  font-size: 12px !important;
  color: var(--text-muted) !important;
  font-weight: 500 !important;
}

.dash-2col { gap: 16px !important; }


.sales-kpis,
.sales-kpis-row2 { gap: 12px !important; }
.sales-kpi {
  background: var(--white) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  padding: 16px 18px !important;
  box-shadow: var(--shadow-sm) !important;
  transition: border-color .12s, box-shadow .12s !important;
}
.sales-kpi:hover {
  border-color: var(--primary-light) !important;
  box-shadow: var(--shadow) !important;
}
.sales-kpi .card-label,
.sales-kpi .kpi-link {
  font-size: 11px !important;
  color: var(--text-muted) !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.sales-kpi .card-total,
.sales-kpi .val {
  font-size: 22px !important;
  font-weight: 800 !important;
  color: var(--primary) !important;
  letter-spacing: -0.4px !important;
  margin-top: 4px !important;
}
.sales-kpi-accent .val,
.sales-kpi-accent .card-total { color: var(--green) !important; }
.sales-kpi-warn .val,
.sales-kpi-warn .card-total { color: #c46a00 !important; }

.pct-label {
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 2px 8px !important;
  border-radius: 999px !important;
  background: var(--green-bg) !important;
  color: var(--green) !important;
  display: inline-block !important;
  margin-top: 4px !important;
}


.period-toggle {
  display: inline-flex !important;
  background: var(--bg) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  padding: 3px !important;
  gap: 2px !important;
}
.period-toggle button,
.period-toggle .dash-tab {
  background: transparent !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 5px 12px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--text-muted) !important;
  transition: background .12s, color .12s !important;
}
.period-toggle button:hover,
.period-toggle .dash-tab:hover { color: var(--text) !important; }
.period-toggle button.active,
.period-toggle .dash-tab.active {
  background: var(--white) !important;
  color: var(--primary) !important;
  box-shadow: var(--shadow-sm) !important;
}


.dash-tabs {
  display: flex !important;
  gap: 2px !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 0 18px !important;
  background: var(--white) !important;
}
.dash-tabs .dash-tab {
  padding: 10px 14px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--text-muted) !important;
  border: none !important;
  background: transparent !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  margin-bottom: -1px !important;
  transition: color .12s, border-color .12s !important;
}
.dash-tabs .dash-tab:hover { color: var(--text) !important; }
.dash-tabs .dash-tab.active {
  color: var(--primary) !important;
  border-bottom-color: var(--primary) !important;
  background: transparent !important;
  box-shadow: none !important;
}


.client-rank {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 12px !important;
  border-bottom: 1px solid var(--line) !important;
  font-size: 13px !important;
}
.client-rank:last-child { border-bottom: none !important; }
.rank-num {
  width: 24px !important;
  height: 24px !important;
  display: grid !important;
  place-items: center !important;
  background: var(--primary-pale) !important;
  color: var(--primary) !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  border-radius: 6px !important;
  flex-shrink: 0 !important;
}
.rank-name { flex: 1 !important; font-weight: 500 !important; color: var(--text) !important; }
.rank-val { font-weight: 700 !important; color: var(--text) !important; }


.dashboard-compare-strip {
  background: var(--white) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  padding: 14px 18px !important;
  box-shadow: var(--shadow-sm) !important;
  font-size: 13px !important;
}


.pie-chart-wrap,
.trend-chart-wrap {
  background: var(--white) !important;
  border-radius: 10px !important;
  padding: 12px !important;
}


.sq-summary-row td {
  background: #eef5ff !important;
  font-weight: 900 !important;
  border-top: 2px solid var(--primary-light) !important;
  color: var(--primary) !important;
  font-size: 13px !important;
  padding: 10px 8px !important;
}
.sq-col-order { font-weight: 700 !important; color: var(--primary) !important; }
.sq-col-owner,
.sq-col-source,
.sq-col-equip,
.sq-col-items,
.sq-col-created,
.sq-col-created { color: var(--text-muted) !important; font-size: 12px !important; }

.order-num-badge,
.order-no,
.order-yes {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 3px 10px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
  letter-spacing: 0 !important;
}
.order-yes,
.order-num-badge {
  background: var(--green-bg) !important;
  color: var(--green) !important;
}
.order-no {
  background: var(--bg) !important;
  color: var(--text-muted) !important;
  border: 1px solid var(--border) !important;
}


.status-chip,
.chip-draft,
.chip-sent,
.chip-won,
.chip-lost,
.chip-signed,
.chip-cancelled,
.chip-inactive,
.chip-count {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 3px 10px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.chip-draft   { background: #eef3fb !important; color: #1a3a6b !important; }
.chip-sent    { background: #e3f2fd !important; color: #1565c0 !important; }
.chip-won,
.chip-signed  { background: var(--green-bg) !important; color: var(--green) !important; }
.chip-lost    { background: var(--accent-light) !important; color: var(--accent) !important; }
.chip-cancelled{ background: #f0f0f0 !important; color: #777 !important; border: 1px solid #ccc !important; }
.chip-inactive{ background: var(--bg) !important; color: var(--text-muted) !important; border: 1px solid var(--border) !important; }
.chip-count   { background: var(--primary) !important; color: #fff !important; }

.status-chips { display: inline-flex !important; gap: 6px !important; flex-wrap: wrap !important; background: var(--white) !important; border-radius: 8px !important; padding: 6px 10px !important; box-shadow: 0 1px 4px rgba(0,0,0,.05) !important; }
.status-pill,
.state-pill,
.role-pill {
  display: inline-flex !important;
  align-items: center !important;
  padding: 3px 10px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
  background: var(--primary-pale) !important;
  color: var(--primary) !important;
  border: 1px solid #c8d9ef !important;
}
.state-pill.on { background: #e8f7ef !important; color: #1a7a4a !important; border-color: #86efac !important; }
.state-pill.off { background: #fee2e2 !important; color: #dc2626 !important; border-color: #fca5a5 !important; }

.aging-row { padding: 8px 0 !important; font-size: 13px !important; border-bottom: 1px solid var(--line) !important; }
.age-badge {
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 2px 8px !important;
  border-radius: 999px !important;
  background: var(--gold-light) !important;
  color: var(--gold) !important;
}


.admin-shell,
.admin-screen { padding: 16px !important; }
.admin-company-bar {
  background: var(--primary-pale) !important;
  border: 1px solid #c8d9ef !important;
  border-radius: 10px !important;
  padding: 10px 14px !important;
  margin-bottom: 12px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--primary) !important;
}

.admin-toolbar,
.toolbar-admin,
.toolbar-catalog,
.toolbar-crm {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  align-items: center !important;
  padding: 10px 0 !important;
  margin-bottom: 8px !important;
}

.admin-search,
.admin-toolbar input[type="text"],
.admin-toolbar input[type="search"] {
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  padding: 7px 12px !important;
  font-size: 13px !important;
  background: var(--white) !important;
  min-height: 36px !important;
  transition: border-color .12s, box-shadow .12s !important;
}
.admin-search:focus,
.admin-toolbar input:focus {
  border-color: var(--primary-light) !important;
  box-shadow: 0 0 0 3px rgba(26,58,107,.12) !important;
  outline: none !important;
}


.admin-table-wrap {
  background: var(--white) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  overflow: auto !important;
  box-shadow: var(--shadow-sm) !important;
}
.admin-table,
.mini-table,
.agent-table,
.specs-table,
.fc-table,
.it-ftable,
.ea-table {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  font-size: 13px !important;
}
.admin-table thead th,
.mini-table thead th,
.agent-table thead th,
.specs-table thead th,
.fc-table thead th,
.it-ftable thead th,
.ea-table thead th {
  background: #f5f7fa !important;
  color: var(--text-muted) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-align: start !important;
  letter-spacing: 0 !important;
  padding: 10px 12px !important;
  border-bottom: 1px solid var(--border) !important;
  text-transform: none !important;
}
.admin-table tbody td,
.mini-table tbody td,
.agent-table tbody td,
.specs-table tbody td,
.fc-table tbody td,
.it-ftable tbody td,
.ea-table tbody td {
  padding: 10px 12px !important;
  border-bottom: 1px solid var(--line) !important;
  color: var(--text) !important;
}
.admin-table tbody tr:last-child td,
.mini-table tbody tr:last-child td,
.agent-table tbody tr:last-child td,
.specs-table tbody tr:last-child td,
.fc-table tbody tr:last-child td,
.it-ftable tbody tr:last-child td,
.ea-table tbody tr:last-child td { border-bottom: none !important; }

.admin-table tbody tr:hover,
.mini-table tbody tr:hover,
.agent-table tbody tr:hover,
.ea-table tbody tr:hover { background: #fafbfd !important; }
.admin-table tbody tr[style*="background:#eef7ee"]:hover { background: #d4edda !important; }

.row-inactive { opacity: 0.55 !important; }
.row-inactive td { color: var(--text-muted) !important; }

.sortable-th {
  cursor: pointer !important;
  user-select: none !important;
}
.sortable-th:hover { background: #eceff4 !important; color: var(--text) !important; }
.sort-arrow {
  display: inline-block !important;
  margin-inline-start: 4px !important;
  font-size: 10px !important;
  color: var(--primary) !important;
}

.row-actions {
  display: inline-flex !important;
  gap: 4px !important;
  align-items: center !important;
}
.icon-btn {
  width: 30px !important;
  height: 30px !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  background: var(--white) !important;
  color: var(--text-muted) !important;
  font-size: 14px !important;
  transition: background .12s, color .12s, border-color .12s !important;
  cursor: pointer !important;
}
.icon-btn:hover {
  background: var(--primary-pale) !important;
  color: var(--primary) !important;
  border-color: var(--primary-light) !important;
}


.products-admin-layout { gap: 16px !important; }
.products-admin-sidebar {
  background: var(--white) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  padding: 12px !important;
}
.products-admin-main {
  background: var(--white) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  padding: 12px !important;
}
.products-admin-list-title {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  padding: 8px 10px !important;
  margin-bottom: 6px !important;
  border-bottom: 1px solid var(--line) !important;
}
.products-admin-empty-note {
  padding: 20px !important;
  text-align: center !important;
  color: var(--text-muted) !important;
  font-size: 13px !important;
}

.empty-admin,
.empty-state,
.empty-state-large,
.spec-empty,
.specs-empty {
  background: var(--bg) !important;
  border: 1px dashed var(--border) !important;
  border-radius: 10px !important;
  padding: 32px 20px !important;
  text-align: center !important;
  color: var(--text-muted) !important;
}
.empty-icon-lg { font-size: 40px !important; margin-bottom: 10px !important; opacity: 0.6 !important; }
.empty-state-title { font-size: 15px !important; font-weight: 700 !important; color: var(--text) !important; margin-bottom: 4px !important; }
.empty-state-sub { font-size: 13px !important; color: var(--text-muted) !important; }


.print-modal { max-width: 900px !important; }
.pq-header {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 16px !important;
  padding: 20px !important;
  border-bottom: 2px solid var(--primary) !important;
}
.pq-logo {
  font-size: 22px !important;
  font-weight: 800 !important;
  color: var(--primary) !important;
  letter-spacing: -0.3px !important;
}
.pq-info { text-align: start !important; font-size: 12px !important; color: var(--text-muted) !important; line-height: 1.5 !important; }
.pq-info-item { margin-bottom: 2px !important; }
.pq-num { font-size: 16px !important; font-weight: 800 !important; color: var(--text) !important; }
.pq-date { font-size: 12px !important; color: var(--text-muted) !important; }
.pq-divider { border-top: 1px solid var(--border) !important; margin: 12px 0 !important; }
.pq-meta {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important;
  gap: 10px 16px !important;
  padding: 16px 20px !important;
  font-size: 12px !important;
}
.pq-table {
  width: 100% !important;
  border-collapse: collapse !important;
  font-size: 12px !important;
}
.pq-table thead th {
  background: var(--primary) !important;
  color: #fff !important;
  padding: 5px 8px !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  letter-spacing: 0 !important;
}
.pq-table tbody td {
  padding: 7px 10px !important;
  border-bottom: 1px solid var(--line) !important;
  font-size: 12px !important;
}
.pq-tr:nth-child(even) { background: #fafbfd !important; }
.pq-totals { padding: 8px 14px !important; font-size: 13px !important; }
.pq-bottom-row { display: flex !important; justify-content: space-between !important; gap: 12px !important; padding: 8px 14px !important; }
.pq-footer { padding: 16px 20px !important; font-size: 11px !important; color: var(--text-muted) !important; border-top: 1px solid var(--border) !important; }
.pq-signature-slot {
  border: 1px dashed var(--border) !important;
  border-radius: 8px !important;
  padding: 20px !important;
  min-height: 80px !important;
  font-size: 11px !important;
  color: var(--text-muted) !important;
  text-align: center !important;
}


.specs-screen { padding: 16px !important; }
.specs-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 14px 18px !important;
  background: var(--white) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  margin-bottom: 12px !important;
  box-shadow: var(--shadow-sm) !important;
}
.specs-title { font-size: 16px !important; font-weight: 700 !important; color: var(--text) !important; letter-spacing: -0.2px !important; }
.specs-subtitle { font-size: 12px !important; color: var(--text-muted) !important; margin-top: 2px !important; }

.spec-model {
  font-weight: 700 !important;
  color: var(--primary) !important;
}
.spec-val { font-family: ui-monospace, Menlo, Consolas, monospace !important; font-size: 12px !important; }


.toast {
  position: fixed !important;
  bottom: 22px !important;
  inset-inline-start: 22px !important;
  background: var(--text) !important;
  color: #fff !important;
  padding: 11px 16px !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  box-shadow: var(--shadow-lg) !important;
  z-index: 9999 !important;
  max-width: 360px !important;
  line-height: 1.45 !important;
}
.toast.success { background: var(--green) !important; }
.toast.error   { background: var(--accent) !important; }
.toast.warn    { background: #c46a00 !important; }


.ea-overlay {
  background: rgba(14,31,59,.55) !important;
  backdrop-filter: blur(4px) !important;
  z-index: 1050 !important;
}
.ea-overlay.open {
  pointer-events: auto !important;
}
.ea-modal {
  border-radius: 14px !important;
  box-shadow: var(--shadow-lg) !important;
  overflow: hidden !important;
  height: 90vh !important;
  max-height: 90vh !important;
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
  pointer-events: auto !important;
}
.ea-body { padding: 18px 20px !important; overflow-y: auto !important; min-height: 0 !important; flex: 1 1 0 !important; -webkit-overflow-scrolling: touch !important; overflow-x: hidden !important; }
.ea-head { flex-shrink: 0 !important; position: relative !important; z-index: 2 !important; }
.ea-group {
  background: var(--white) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  padding: 12px !important;
  margin-bottom: 10px !important;
}
.ea-group-header {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 8px !important;
}
.ea-group-img,
.ea-group-img-placeholder {
  width: 44px !important;
  height: 44px !important;
  border-radius: 8px !important;
  background: var(--bg) !important;
  border: 1px solid var(--border) !important;
  object-fit: cover !important;
  display: grid !important;
  place-items: center !important;
  color: var(--text-muted) !important;
  flex-shrink: 0 !important;
}
.ea-group-title { font-weight: 700 !important; color: var(--text) !important; font-size: 13px !important; }
.ea-group-sub { font-size: 11px !important; color: var(--text-muted) !important; }
.ea-footer {
  padding: 14px 20px !important;
  border-top: 1px solid var(--border) !important;
  background: var(--bg) !important;
  display: flex !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
  position: relative !important;
  z-index: 2 !important;
}


div.fc-form { padding: 12px !important; display: grid !important; gap: 10px !important; }
.fc-label,
.it-flabel {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--text-muted) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.fc-drag-handle {
  cursor: grab !important;
  color: var(--text-muted) !important;
  padding: 4px !important;
}
.fc-drag-handle:active { cursor: grabbing !important; }


.lightbox-overlay {
  background: rgba(0,0,0,.85) !important;
  backdrop-filter: blur(2px) !important;
}
.lightbox-close {
  background: rgba(255,255,255,.15) !important;
  border: 1px solid rgba(255,255,255,.25) !important;
  color: #fff !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 10px !important;
  font-size: 18px !important;
  display: grid !important;
  place-items: center !important;
  cursor: pointer !important;
  transition: background .12s !important;
}
.lightbox-close:hover { background: rgba(255,255,255,.3) !important; }


.a11y-widget {
  background: var(--white) !important;
  border: 1px solid var(--border) !important;
  border-radius: 999px !important;
  box-shadow: var(--shadow) !important;
}
.a11y-panel {
  background: var(--white) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  box-shadow: var(--shadow-lg) !important;
  overflow: hidden !important;
}
.a11y-panel-header {
  padding: 14px 16px !important;
  background: var(--primary) !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 14px !important;
}
.a11y-option {
  padding: 10px 16px !important;
  border-bottom: 1px solid var(--line) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  font-size: 13px !important;
}
.a11y-option:last-child { border-bottom: none !important; }
.a11y-switch-label { color: var(--text) !important; font-weight: 500 !important; }
.a11y-switch {
  position: relative !important;
  width: 38px !important;
  height: 22px !important;
  background: var(--border) !important;
  border-radius: 999px !important;
  border: none !important;
  cursor: pointer !important;
  transition: background .15s !important;
}
.a11y-switch::after {
  content: "";
  position: absolute;
  top: 2px; inset-inline-start: 2px;
  width: 18px; height: 18px;
  background: #fff;
  border-radius: 50%;
  transition: inset-inline-start .15s;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.a11y-switch.on { background: var(--primary) !important; }
.a11y-switch.on::after { inset-inline-start: 18px !important; }
.a11y-btn-group { display: flex !important; gap: 6px !important; }
.a11y-toggle {
  background: var(--primary, #2563eb) !important;
  border: 2px solid var(--primary, #2563eb) !important;
  color: #fff !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  font-size: 22px !important;
  cursor: pointer !important;
  display: grid !important;
  place-items: center !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.25) !important;
}
.a11y-toggle:hover { background: #1d4ed8 !important; }
.a11y-close {
  background: transparent !important;
  border: 1px solid rgba(255,255,255,.25) !important;
  color: #fff !important;
  width: 26px !important;
  height: 26px !important;
  border-radius: 6px !important;
  font-size: 14px !important;
  cursor: pointer !important;
  display: grid !important;
  place-items: center !important;
}
.a11y-statement-link {
  display: block !important;
  padding: 10px 16px !important;
  color: var(--primary) !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  text-decoration: none !important;
  border-top: 1px solid var(--line) !important;
}
.a11y-statement-link:hover { background: var(--primary-pale) !important; }


.mobile-sidebar-toggle {
  background: rgba(255,255,255,.12) !important;
  border: 1px solid rgba(255,255,255,.2) !important;
  color: #fff !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 8px !important;
  font-size: 18px !important;
  place-items: center !important;
  cursor: pointer !important;
}
.mobile-sidebar-backdrop {
  background: rgba(14,31,59,.5) !important;
  backdrop-filter: blur(2px) !important;
}


.agent-conv,
.agent-bar,
.agent-bar-wrap {
  background: var(--white) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  box-shadow: var(--shadow-sm) !important;
}
.agent-bar { padding: 10px 12px !important; }


@keyframes qm-shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.skeleton-row,
.skeleton-cell {
  background: linear-gradient(90deg, #eceff4 0%, #f5f7fa 40%, #eceff4 80%) !important;
  background-size: 800px 100% !important;
  animation: qm-shimmer 1.4s linear infinite !important;
  border-radius: 6px !important;
  color: transparent !important;
}


.notification-bell {
  width: 36px !important;
  height: 36px !important;
  border-radius: 8px !important;
  background: rgba(255,255,255,.1) !important;
  border: 1px solid rgba(255,255,255,.2) !important;
  color: #fff !important;
  display: grid !important;
  place-items: center !important;
  cursor: pointer !important;
  position: relative !important;
  transition: background .12s !important;
}
.notification-bell:hover { background: rgba(255,255,255,.2) !important; }


.info-box {
  background: var(--primary-pale) !important;
  border: 1px solid #c8d9ef !important;
  border-inline-start: 3px solid var(--primary) !important;
  border-radius: 8px !important;
  padding: 10px 14px !important;
  font-size: 13px !important;
  color: var(--text) !important;
  line-height: 1.5 !important;
}
.small-note {
  font-size: 11px !important;
  color: var(--text-muted) !important;
  font-style: normal !important;
}
.card-quote-num {
  font-weight: 700 !important;
  color: var(--primary) !important;
}


.auth-input,
.auth-select {
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
  font-size: 14px !important;
  background: var(--white) !important;
  transition: border-color .12s, box-shadow .12s !important;
}
.login-body .auth-input,
.login-body .auth-select {
  width: 100% !important;
}
.admin-toolbar .auth-select {
  padding: 6px 10px !important;
  font-size: 12px !important;
  border-radius: 8px !important;
}
.header .auth-select {
  background: rgba(255,255,255,.15) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.25) !important;
  border-radius: 8px !important;
  padding: 4px 10px !important;
  font-size: 12px !important;
}
.auth-input:focus,
.auth-select:focus {
  border-color: var(--primary-light) !important;
  box-shadow: 0 0 0 3px rgba(26,58,107,.14) !important;
  outline: none !important;
}
.login-error {
  background: var(--accent-light) !important;
  border: 1px solid #f5c2c2 !important;
  color: var(--accent) !important;
  padding: 10px 14px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}
.login-actions { display: flex !important; gap: 8px !important; justify-content: stretch !important; margin-top: 8px !important; }
.login-actions .btn { flex: 1 !important; padding: 11px 14px !important; font-size: 14px !important; }

.reset-digit {
  width: 44px !important;
  height: 52px !important;
  text-align: center !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  background: var(--bg) !important;
}
.reset-digit:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(26,58,107,.14) !important;
  background: var(--white) !important;
  outline: none !important;
}


.sigs-viewer-quote {
  background: var(--white) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  padding: 10px !important;
}


.btu-card {
  background: var(--white) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  padding: 12px 16px !important;
}
.btu-label {
  font-size: 11px !important;
  color: var(--text-muted) !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.btu-value { font-weight: 800 !important; color: var(--primary) !important; font-size: 18px !important; }
.btu-sub { font-size: 11px !important; color: var(--text-muted) !important; }
.btu-match-good { color: var(--green) !important; font-weight: 700 !important; }
.btu-match-red  { color: var(--accent) !important; font-weight: 700 !important; }


.pc-header,
.pc-section-title {
  background: var(--primary-pale) !important;
  padding: 8px 12px !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  color: var(--primary) !important;
  border-radius: 8px !important;
  margin-bottom: 8px !important;
}
.pc-specs-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
  gap: 6px 12px !important;
}
.pc-spec-row {
  display: flex !important;
  justify-content: space-between !important;
  padding: 6px 0 !important;
  border-bottom: 1px dashed var(--line) !important;
  font-size: 12px !important;
}
.pc-spec-lbl { color: var(--text-muted) !important; font-weight: 500 !important; }
.pc-spec-val { color: var(--text) !important; font-weight: 600 !important; }


.save-to-catalog-btn,
.export-btn {
  background: var(--white) !important;
  color: var(--primary) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  padding: 7px 12px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: background .12s, border-color .12s !important;
}
.save-to-catalog-btn:hover,
.export-btn:hover {
  background: var(--primary-pale) !important;
  border-color: var(--primary-light) !important;
}


.status-select {
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  padding: 5px 10px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  background: var(--white) !important;
  min-height: 28px !important;
}


.spinner {
  border: 2px solid var(--border) !important;
  border-top-color: var(--primary) !important;
  border-radius: 50% !important;
}


@media print {
  .header, .a11y-widget, .notification-bell, .mobile-sidebar-toggle,
  .modal-close, .logout-btn, .reload-btn { display: none !important; }
  .actions-bar .btn, .totals-bar .btn { display: none !important; }
  .pq-header { flex-direction: row !important; justify-content: space-between !important; direction: rtl !important; }
}


@media (max-width: 768px) {
  .sq-summary-row td {
    font-size: 12px !important;
  }
  .sales-kpi { padding: 12px 14px !important; }
  .sales-kpi .card-total,
  .sales-kpi .val { font-size: 18px !important; }
  .dash-card-head,
  .card-header { padding: 12px 14px !important; }
  .admin-shell,
  .admin-screen { padding: 10px !important; }
  .pq-meta { grid-template-columns: 1fr 1fr !important; }
  .pq-header { flex-direction: column !important; gap: 10px !important; padding: 14px !important; }
  .reset-digit { width: 38px !important; height: 46px !important; font-size: 16px !important; }
  .quote-table { min-width: 0 !important; }
  .quote-area { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }
  .empty-state-large { padding: 20px 12px !important; }
  .empty-state-large .empty-icon-lg { font-size: 40px !important; }
  .empty-state-title { font-size: 16px !important; }
  .admin-table-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }
}
@media (max-width: 480px) {
  .pq-meta { grid-template-columns: 1fr !important; }
  .sq-summary-row td { font-size: 10px !important; }
  .admin-card-head { flex-wrap: wrap !important; gap: 6px !important; padding: 8px 10px !important; }
}




.layout { min-height: 0 !important; }
.layout > .panel-quote,
.layout > .panel-products,
.layout > .main,
.layout > aside,
.layout > section {
  min-width: 0 !important;
  min-height: 0 !important;
}


.panel-products { min-width: 0 !important; }
.panel-quote    { min-width: 0 !important; }
.quote-area,
.products-list { max-width: 100% !important; }
.quote-table {
  table-layout: auto !important;
}
@media (min-width: 769px) {
  .quote-table { min-width: 560px !important; }
}


@media (max-width: 768px) {
  .layout { grid-template-columns: 1fr !important; }
  .panel-products {
    position: fixed !important;
    top: 50px !important;
    inset-inline-end: -100% !important;
    width: 85vw !important;
    max-width: 340px !important;
    height: calc(100vh - 50px) !important;
    z-index: 150 !important;
    box-shadow: -4px 0 24px rgba(0,0,0,.25) !important;
    transition: inset-inline-end .3s ease !important;
  }
  .panel-products.mobile-open { inset-inline-end: 0 !important; }
  .topbar {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .topbar .field-group { flex: 1 1 45% !important; }
  .qty-ctrl { height: auto !important; }
  .qty-btn { display: none !important; }
  .qty-input { width: 48px !important; height: 40px !important; text-align: center !important; border-radius: 8px !important; }
  .ea-group-img,
  .ea-group-img-placeholder { width: 64px !important; height: 64px !important; }
  .ea-group-title { font-size: 16px !important; }
  .field-group label { font-size: 10px !important; }
  .modal-actions, .modal-footer { padding: 10px 14px !important; }
}

/* ── Fixes: topbar icon buttons ───────────────────────────────── */
.topbar-icon-btn {
  padding: 4px 8px !important;
  min-width: 28px !important;
  height: 36px !important;
  font-size: 14px !important;
  line-height: 1 !important;
}

/* ── Fixes: toast positioning ─────────────────────────────────── */
.toast {
  left: auto !important;
  transform: translateX(-50%) !important;
}
.toast.show {
  transform: translateX(-50%) !important;
}
.toast.toast-success { background: var(--green) !important; }
.toast.toast-error   { background: var(--accent) !important; }
.toast.toast-warning { background: #c46a00 !important; }

/* ── Fixes: close-btn opacity ─────────────────────────────────── */
.close-btn { opacity: 1 !important; }

/* ── Fixes: a11y-switch knob double-positioning ───────────────── */
.a11y-switch::after { right: auto !important; }
.a11y-switch.on::after { right: auto !important; }

/* ── Fixes: row-inactive specificity (match tr.row-inactive) ──── */
tr.row-inactive { opacity: 0.55 !important; }
tr.row-inactive td { color: var(--text-muted) !important; }

/* ── Fixes: missing BTU bar color classes ─────────────────────── */
.btu-bar-value.orange { color: #c46a00 !important; }
.btu-bar-value.red { color: var(--accent) !important; }

/* ── Fixes: print-modal max-width (keep original 1200px) ──────── */
.print-modal { max-width: 1200px !important; }
.print-modal.preview-wide { max-width: 98vw !important; }

/* ── Fixes: print modal scrollable body with sticky header/footer ── */
#printModalOverlay .print-modal { max-height: 94vh !important; overflow: hidden !important; }
#printModalOverlay .modal-body { flex: 1 1 auto !important; overflow-y: auto !important; min-height: 0 !important; }
#printModalOverlay .modal-header { flex-shrink: 0 !important; }
#printModalOverlay .modal-actions { flex-shrink: 0 !important; background: #fff !important; }

/* ── Print overrides — MUST come after the rules above to win the cascade ── */
@media print {
  #printModalOverlay .print-modal { max-height: none !important; overflow: visible !important; height: auto !important; }
  #printModalOverlay .modal-body { overflow: visible !important; max-height: none !important; height: auto !important; }
  #printModalOverlay .modal-header, #printModalOverlay .modal-actions { display: none !important; }
  #printArea { overflow: visible !important; height: auto !important; }
  #printArea * { visibility: visible !important; }
  #printArea .ea-table { width: 100% !important; table-layout: fixed !important; }
  #printArea .ea-group { page-break-inside: avoid !important; overflow: visible !important; }
}


/* ── Fixes: ea-group-header double border ─────────────────────── */
.ea-group-header { border-bottom: none !important; padding-bottom: 0 !important; }

/* ── Fixes: ea-head h2 consistency ────────────────────────────── */
.ea-head h2 { font-size: 16px !important; font-weight: 700 !important; letter-spacing: 0 !important; }

/* ── Fixes: ea-group image/title not too small on desktop ─────── */
.ea-group-img,
.ea-group-img-placeholder { width: 60px !important; height: 60px !important; }
.ea-group-title { font-size: 15px !important; font-weight: 700 !important; }

/* ── Fixes: age-badge color variants ──────────────────────────── */
.age-badge.fresh { background: var(--green-bg) !important; color: var(--green) !important; }
.age-badge.warn  { background: var(--gold-light) !important; color: var(--gold) !important; }
.age-badge.old   { background: var(--accent-light) !important; color: var(--accent) !important; }

/* ── Fixes: modal-actions unified alignment ───────────────────── */
.modal-actions,
.modal-footer {
  display: flex !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  padding: 12px 20px !important;
  border-top: 1px solid var(--line) !important;
  background: var(--bg) !important;
}

/* ── Fixes: standardize all modal form inputs/selects ─────────── */
.form-field label,
.form-grid label {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--text-muted) !important;
  margin-bottom: 2px !important;
}
.modal-body input[type="text"],
.modal-body input[type="number"],
.modal-body input[type="email"],
.modal-body input[type="tel"],
.modal-body input[type="url"],
.modal-body input[type="password"],
.modal-body select,
.modal-body textarea {
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  font-size: 13px !important;
  background: var(--white) !important;
  transition: border-color .12s, box-shadow .12s !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.modal-body input:focus,
.modal-body select:focus,
.modal-body textarea:focus {
  border-color: var(--primary-light) !important;
  box-shadow: 0 0 0 3px rgba(26,58,107,.12) !important;
  outline: none !important;
}
.modal-body input[type="checkbox"] {
  width: 16px !important;
  height: 16px !important;
  cursor: pointer !important;
}

/* ── Fixes: quote table description wrapping ──────────────────── */
.quote-table td {
  white-space: normal !important;
  word-wrap: break-word !important;
}
.quote-table td:nth-child(1),
.quote-table td:nth-child(2),
.quote-table td:nth-child(8),
.quote-table td:nth-child(10),
.quote-table td:nth-child(11) {
  white-space: nowrap !important;
}

/* ── Fixes: admin table text wrapping for wider content ───────── */
.admin-table td {
  white-space: normal !important;
  word-wrap: break-word !important;
}

/* ── Fixes: print media — consolidated into main @media print block above ── */