/* ===== QS Estimator Web — Exact Android Replica ===== */
:root {
  --qs-primary:#1565c0;--qs-primary-dark:#0d47a1;--qs-primary-light:#42a5f5;
  --qs-primary-container:#bbdefb;--qs-on-primary:#fff;
  --qs-secondary:#00897b;--qs-secondary-container:#b2dfdb;
  --qs-surface:#fff;--qs-surface-variant:#f5f5f5;--qs-surface-container:#fafafa;
  --qs-on-surface:#1a1c1e;--qs-on-surface-variant:#6b7075;
  --qs-outline:#e0e0e0;--qs-outline-variant:#cacccf;
  --qs-success:#2e7d32;--qs-success-bg:#e8f5e9;
  --qs-warning:#ef6c00;--qs-warning-bg:#fff3e0;
  --qs-danger:#b71c1c;--qs-danger-bg:#ffebee;
  --qs-info:#0288d1;--qs-info-bg:#e1f5fe;
  --qs-bg:#f0f2f5;--qs-card:#fff;
  --qs-shadow:0 1px 3px rgba(0,0,0,.08);--qs-shadow-lg:0 4px 12px rgba(0,0,0,.1);
  --qs-radius:12px;--qs-radius-sm:8px;--qs-radius-lg:16px;
  --qs-transition:0.2s cubic-bezier(.4,0,.2,1);
  --qs-sidebar:240px;
}
[data-theme="dark"]{--qs-primary:#90caf9;--qs-primary-dark:#42a5f5;--qs-primary-container:#1a237e;--qs-on-primary:#0a1f33;--qs-secondary:#4db6ac;--qs-secondary-container:#004d40;--qs-surface:#1e1e1e;--qs-surface-variant:#2c2c2c;--qs-surface-container:#252525;--qs-on-surface:#e4e4e7;--qs-on-surface-variant:#9aa0a6;--qs-outline:#3a3a3a;--qs-outline-variant:#4a4a4a;--qs-success:#66bb6a;--qs-success-bg:#1b3a1b;--qs-warning:#ffa726;--qs-warning-bg:#3e2a00;--qs-danger:#ef5350;--qs-danger-bg:#3a1111;--qs-info:#29b6f6;--qs-info-bg:#0a2540;--qs-bg:#121212;--qs-card:#1e1e1e;--qs-shadow:0 1px 3px rgba(0,0,0,.3);--qs-shadow-lg:0 4px 12px rgba(0,0,0,.4)}
*{box-sizing:border-box}
body{margin:0;padding:0;font-family:'Segoe UI',system-ui,-apple-system,'Roboto',sans-serif;background:var(--qs-bg);color:var(--qs-on-surface);overflow:hidden;height:100vh}
#app{height:100vh;display:flex;flex-direction:column}

/* Shell */
.shell{display:flex;height:100vh;overflow:hidden}
.main-area{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}

/* Sidebar */
.sidebar{width:var(--qs-sidebar);min-width:var(--qs-sidebar);background:var(--qs-surface);border-right:1px solid var(--qs-outline);display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;transition:var(--qs-transition)}
.sidebar .brand{padding:16px 18px;border-bottom:1px solid var(--qs-outline);display:flex;align-items:center;gap:10px}
.sidebar .brand .logo{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,var(--qs-primary),var(--qs-secondary));color:var(--qs-on-primary);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;flex-shrink:0}
.sidebar .brand .title{font-weight:700;font-size:16px}
.sidebar .brand .sub{font-size:11px;color:var(--qs-on-surface-variant)}
.sidebar .items{padding:8px 10px;flex:1}
.sidebar .group-label{padding:10px 14px 4px;font-size:10px;text-transform:uppercase;letter-spacing:.6px;color:var(--qs-on-surface-variant);font-weight:600}
.sidebar button.item{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:9px 14px;border-radius:var(--qs-radius-sm);color:var(--qs-on-surface);text-decoration:none;border:none;background:transparent;transition:var(--qs-transition);font-size:13px;cursor:pointer}
.sidebar button.item:hover{background:var(--qs-primary-container)}
.sidebar button.item.active{background:rgba(21,101,192,.12);color:var(--qs-primary);font-weight:600}
.sidebar button.item .material-icons-outlined{font-size:20px}
.sidebar .spacer{flex:1 1 auto}
.sidebar .footer{padding:12px 16px;border-top:1px solid var(--qs-outline);font-size:11px;color:var(--qs-on-surface-variant)}

/* Topbar */
.topbar{height:52px;min-height:52px;background:var(--qs-surface);border-bottom:1px solid var(--qs-outline);display:flex;align-items:center;justify-content:space-between;padding:0 16px;gap:10px;flex-shrink:0}
.topbar .left{display:flex;align-items:center;gap:10px}
.topbar .title{font-weight:700;font-size:16px}
.topbar .subtitle{font-size:11px;color:var(--qs-primary)}
.topbar .actions{display:flex;align-items:center;gap:2px}
.topbar .actions button{background:transparent;border:none;color:var(--qs-on-surface-variant);width:36px;height:36px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:var(--qs-transition)}
.topbar .actions button:hover{background:var(--qs-primary-container);color:var(--qs-primary)}

/* Content */
.content{flex:1;overflow-y:auto;padding:16px 20px;background:var(--qs-bg)}

/* Cards */
.card-qs{background:var(--qs-card);border:1px solid var(--qs-outline);border-radius:var(--qs-radius);box-shadow:var(--qs-shadow);transition:var(--qs-transition)}
.card-qs:hover{box-shadow:var(--qs-shadow-lg)}

/* Dashboard */
.dash-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:20px}
.dash-tile{border-radius:var(--qs-radius);padding:14px;color:#fff;cursor:pointer;border:none;font-weight:600;transition:transform .1s;min-height:100px;display:flex;flex-direction:column;justify-content:space-between}
.dash-tile:hover{transform:translateY(-2px);box-shadow:var(--qs-shadow-lg)}
.dash-tile .t-icon{background:rgba(255,255,255,.2);width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:18px}
.dash-tile .t-title{font-size:14px}
.dash-tile .t-sub{font-size:10px;opacity:.85}
.dash-tile .t-value{font-size:20px;font-weight:700}

/* Status Badges */
.badge-qs{font-size:10px;padding:3px 10px;border-radius:999px;font-weight:600}
.status-draft{background:var(--qs-info-bg);color:var(--qs-info)}
.status-estimating{background:var(--qs-warning-bg);color:var(--qs-warning)}
.status-approved{background:var(--qs-success-bg);color:var(--qs-success)}
.status-final{background:#f3e5f5;color:#7b1fa2}

/* List Items */
.list-item{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--qs-outline);cursor:pointer;transition:var(--qs-transition)}
.list-item:hover{background:var(--qs-surface-variant)}
.list-item:last-child{border-bottom:none}
.list-item .item-icon{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;margin-right:12px}
.list-item .item-content{flex:1;min-width:0}
.list-item .item-title{font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.list-item .item-sub{font-size:12px;color:var(--qs-on-surface-variant)}
.list-item .item-right{text-align:right;flex-shrink:0;margin-left:8px}

/* Spreadsheet */
.ss-wrapper{border:1px solid var(--qs-outline);border-radius:var(--qs-radius);overflow:hidden;background:var(--qs-card)}
.ss-header{display:flex;background:var(--qs-primary-container);position:sticky;top:0;z-index:5;border-bottom:1px solid var(--qs-outline)}
.ss-header .sh{min-width:90px;padding:10px 12px;font-weight:700;font-size:11px;color:var(--qs-primary);text-transform:uppercase;letter-spacing:.3px;border-right:1px solid var(--qs-outline);white-space:nowrap;flex-shrink:0}
.ss-header .sh:last-child{border-right:none}
.ss-row{display:flex;align-items:center;border-bottom:1px solid var(--qs-outline);min-height:42px;transition:background .1s}
.ss-row:hover{background:var(--qs-surface-variant)}
.ss-row .sc{min-width:90px;padding:6px 10px;font-size:13px;border-right:1px solid var(--qs-outline);flex-shrink:0;display:flex;align-items:center}
.ss-row .sc:last-child{border-right:none}
.ss-row .sc.rn{min-width:50px;max-width:50px;justify-content:center;font-weight:600;color:var(--qs-on-surface-variant);background:var(--qs-surface-variant);font-size:11px}
.ss-row .sc input,.ss-row .sc select{border:none;background:transparent;width:100%;padding:4px 2px;font-size:13px;color:var(--qs-on-surface);outline:none}
.ss-row .sc input:focus{background:var(--qs-primary-container);border-radius:4px}
.ss-row .sc .cell-amount{font-weight:700;color:var(--qs-success)}
.ss-row .sc .cell-text{font-weight:600;color:var(--qs-primary)}
.ss-row.empty .sc{opacity:.35;font-style:italic;font-size:12px}
.ss-row.empty:hover{opacity:.6}
.ss-scroll{overflow:auto;-webkit-overflow-scrolling:touch}

/* Section Header */
.sec-header{background:var(--qs-primary-container);color:var(--qs-primary);padding:8px 14px;font-weight:700;font-size:12px;display:flex;justify-content:space-between;border-radius:var(--qs-radius-sm) var(--qs-radius-sm) 0 0}

/* Bottom Bar */
.bottom-bar{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;background:var(--qs-surface);border-top:1px solid var(--qs-outline);gap:8px}
.bottom-bar .bb-left,.bottom-bar .bb-right{display:flex;gap:6px}

/* FAB */
.fab-calc{position:fixed;bottom:70px;right:20px;width:48px;height:48px;border-radius:50%;background:var(--qs-primary-container);color:var(--qs-primary);border:2px solid var(--qs-primary);box-shadow:var(--qs-shadow-lg);cursor:pointer;z-index:95;display:flex;align-items:center;justify-content:center;font-size:20px;transition:transform .2s}
.fab-calc:hover{transform:scale(1.1)}

/* Calculator */
.calc-dialog{background:var(--qs-surface);border-radius:var(--qs-radius-lg);overflow:hidden}
.calc-display{background:var(--qs-on-surface);color:var(--qs-on-primary);padding:18px 16px;font-size:26px;font-weight:700;text-align:right;min-height:60px;display:flex;align-items:center;justify-content:flex-end;word-break:break-all}
.calc-buttons{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;padding:4px}
.calc-btn{padding:12px 6px;font-size:17px;font-weight:600;border:none;background:var(--qs-surface-variant);color:var(--qs-on-surface);cursor:pointer;border-radius:4px;transition:background .1s}
.calc-btn:hover{background:var(--qs-outline)}
.calc-btn.op{color:var(--qs-primary);background:var(--qs-primary-container)}
.calc-btn.clear{color:var(--qs-danger);background:var(--qs-danger-bg)}
.calc-btn.equals{background:var(--qs-primary);color:var(--qs-on-primary)}
.calc-btn.equals:hover{background:var(--qs-primary-dark)}

/* Empty State */
.empty-state{text-align:center;padding:50px 20px;color:var(--qs-on-surface-variant)}
.empty-state .e-icon{font-size:44px;opacity:.3;margin-bottom:10px}
.empty-state .e-title{font-size:16px;font-weight:600;margin-bottom:4px}
.empty-state .e-sub{font-size:13px}

/* Summary Grid */
.summary-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.summary-item{background:var(--qs-surface-variant);border-radius:var(--qs-radius-sm);padding:12px;text-align:center}
.summary-item .s-value{font-size:18px;font-weight:700;color:var(--qs-primary)}
.summary-item .s-label{font-size:11px;color:var(--qs-on-surface-variant);margin-top:2px}

/* Tabs */
.qs-tabs{display:flex;border-bottom:2px solid var(--qs-outline);margin-bottom:14px}
.qs-tab{padding:10px 20px;font-size:13px;font-weight:600;color:var(--qs-on-surface-variant);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px;transition:var(--qs-transition);background:none;border-top:none;border-left:none;border-right:none}
.qs-tab.active{color:var(--qs-primary);border-bottom-color:var(--qs-primary)}
.qs-tab:hover{color:var(--qs-primary)}

/* Filter chips */
.filter-chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px}
.chip{padding:6px 14px;border-radius:999px;font-size:12px;font-weight:600;border:1px solid var(--qs-outline);background:var(--qs-surface);cursor:pointer;white-space:nowrap;transition:var(--qs-transition)}
.chip.active{background:var(--qs-primary-container);color:var(--qs-primary);border-color:var(--qs-primary)}
.chip:hover{background:var(--qs-primary-container)}

/* Theme toggle */
.theme-toggle{width:38px;height:22px;border-radius:11px;border:1px solid var(--qs-outline);background:var(--qs-bg);position:relative;cursor:pointer}
.theme-toggle .knob{position:absolute;top:2px;width:18px;height:18px;border-radius:50%;background:var(--qs-primary);transition:.2s}
.theme-toggle[data-on="true"] .knob{left:18px}
.theme-toggle[data-on="false"] .knob{left:2px}

/* Stars */
.fb-star{font-size:36px;cursor:pointer;color:#ccc;transition:color .15s}
.fb-star.active,.fb-star:hover{color:#ffc107}

/* Cost Row */
.cost-row{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid var(--qs-outline);font-size:13px}
.cost-row:last-child{border:none}
.cost-row .cost-val{font-weight:600}

/* Responsive */
@media(max-width:768px){.sidebar{position:fixed;left:-260px;z-index:200;height:100vh}.sidebar.open{left:0}.dash-grid{grid-template-columns:1fr 1fr}.content{padding:12px}.summary-grid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.dash-grid{grid-template-columns:1fr}}

/* Scrollbar */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--qs-outline);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--qs-on-surface-variant)}

/* Print */
@media print{.sidebar,.topbar,.bottom-bar,.fab-calc,.btn{display:none!important}.content{padding:0;overflow:visible}body{overflow:visible;height:auto}}