:root {
  --bg: #0a0a0a;
  --surface: #111111;
  --card: #1a1a1a;
  --border: #2a2a2a;
  --text: #f0eeff;
  --muted: #5a5a7a;
  --accent: #7c3aed;
  --accent2: #a855f7;
  --glow: rgba(124,58,237,0.3);
  --danger: #ef4444;
  --success: #22c55e;
  --warning: #f59e0b;
  --info: #3b82f6;
}

/* ── Reset ── */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Segoe UI', Arial, sans-serif; background: var(--bg); color: var(--text); height: 100vh; overflow: hidden; font-size: 14px; }
#content { overflow-x: hidden; }
#device-list { overflow-x: hidden; touch-action: pan-y; }
.calc-devices { touch-action: pan-y; }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #3a3a50; }
* { scrollbar-width: thin; scrollbar-color: var(--border) var(--bg); }

/* ── Login ── */
#screen-login { display: flex; align-items: center; justify-content: center; height: 100vh; background: radial-gradient(ellipse at 60% 40%, #150a20 0%, var(--bg) 60%); opacity: 0; transition: opacity 0.2s ease; }
#screen-login.visible { opacity: 1; }
.login-box { background: var(--surface); padding: 40px; border-radius: 16px; width: 380px; box-shadow: 0 8px 50px rgba(0,0,0,0.7); border: 1px solid var(--border); }
.login-logo { font-size: 2.2rem; font-weight: 800; text-align: center; margin-bottom: 2px; background: linear-gradient(135deg, var(--accent), var(--accent2)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.login-sub { text-align: center; color: var(--muted); margin-bottom: 4px; font-size: 0.82rem; letter-spacing: 1px; text-transform: uppercase; }
.login-divider { height: 1px; background: var(--border); margin: 20px 0; }
.login-box input { width: 100%; padding: 13px 14px; margin-bottom: 12px; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; color: var(--text); font-size: 0.95rem; transition: border-color 0.15s; }
.login-box input:focus { outline: none; border-color: var(--accent); }
.login-box button { width: 100%; padding: 13px; background: linear-gradient(135deg, var(--accent), var(--accent2)); border: none; border-radius: 10px; color: white; font-size: 1rem; font-weight: 700; cursor: pointer; margin-top: 4px; letter-spacing: 0.5px; }
.login-box button:hover { background: linear-gradient(135deg, var(--accent2), var(--accent)); }
.error-msg { color: var(--danger); font-size: 0.85rem; margin-top: 8px; text-align: center; }

/* ── Screen ── */
.screen { display: none !important; }
.screen.active { display: flex !important; }
#screen-login.active { display: flex !important; position: fixed; inset: 0; z-index: 9999; background: var(--bg); align-items: center; justify-content: center; opacity: 1 !important; }
#screen-app { height: 100vh; overflow: hidden; }
#screen-app:not(.active) { visibility: hidden; pointer-events: none; }

/* ── Sidebar ── */
#sidebar {
  --nav-accent: #7f77dd;                 /* SIDEBAR_CONTRAST_v1 — scoped accent: section labels + active chip (index.html only; sidebar isn't shared across pages) */
  width: 220px;
  background: #0d0d10;                    /* SIDEBAR_CONTRAST_v1 — darker backdrop so grouped blocks read as lifted (was var(--surface) #111) */
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  border-right: 1px solid var(--border);
  height: 100vh;
  overflow-y: auto;
}
.sidebar-logo { padding: 20px; display: flex; flex-direction: column; gap: 4px; }
.logo-text { font-weight: 900; font-size: 1.2rem; color: white; }
.logo-fire { font-size: 1.1rem; }
.logo-cad { color: var(--accent); }
.logo-sub { color: var(--muted); text-transform: uppercase; letter-spacing: 2px; font-size: 0.6rem; font-weight: 700; }
/* SIDEBAR_CONTRAST_v1 — section headers: small accent captions above each block */
.sidebar-section { font-size: 11px; font-weight: 500; letter-spacing: 0.08em; color: var(--nav-accent); padding: 0 8px; margin: 8px 8px 4px; text-transform: uppercase; cursor: default; }
/* SIDEBAR_CONTRAST_v1 — each section's items grouped into a lifted block */
.nav-group { list-style: none; background: #1a1a20; border-radius: 8px; padding: 2px; margin: 0 8px; display: flex; flex-direction: column; gap: 1px; }
#sidebar ul li { padding: 8px 10px; font-size: 13px; color: #ececf2; display: flex; align-items: center; gap: 10px; border-radius: 6px; transition: background 0.12s, color 0.12s; cursor: pointer; }
#sidebar ul li:hover { background: rgba(127,119,221,0.14); color: #ffffff; }
#sidebar ul li.active { background: var(--nav-accent); color: #16131f; font-weight: 500; }
.sidebar-icon { width: 18px; text-align: center; font-size: 0.85rem; color: #a6a6b2; opacity: 1; flex-shrink: 0; }
#sidebar ul li.active .sidebar-icon { color: #26215c; }
.sidebar-footer { margin-top: auto; padding: 16px 20px; border-top: 1px solid var(--border); }
.sidebar-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--accent); color: white; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; font-weight: 700; }
#user-name { display: block; color: var(--text); margin-bottom: 0; }
#btn-logout { background: none; border: 1px solid var(--border); color: var(--muted); padding: 6px 12px; border-radius: 6px; cursor: pointer; width: 100%; margin-top: 12px; font-size: 0.8rem; }
#btn-logout:hover { border-color: var(--accent); color: var(--accent); }

/* ── Content ── */
#content { flex: 1; overflow-y: auto; padding: 0; background: var(--bg); }
.page { display: none; }
.page.active { display: block; }
h1 { font-size: 1.6rem; margin-bottom: 24px; }
h2 { font-size: 1.1rem; margin-bottom: 16px; color: var(--muted); }

/* ── Top Bar ── */
.page-topbar { display: flex; align-items: center; justify-content: space-between; padding: 16px 28px; background: var(--surface); border-bottom: 1px solid var(--border); gap: 16px; flex-wrap: wrap; }
.breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 0.88rem; }
.breadcrumb-item { color: var(--muted); }
.breadcrumb-item.active { color: var(--text); font-weight: 700; }
.breadcrumb-sep { color: var(--border); }
.topbar-actions { display: flex; gap: 10px; align-items: center; }
.topbar-search { background: #1a1a1a; border: 1px solid #2a2a2a; border-radius: 10px; padding: 8px 14px 8px 36px; color: #f0eeff; font-size: 0.85rem; width: 220px; }
.topbar-search::placeholder { color: #5a5a7a; }
.topbar-search:focus { outline: none; border-color: var(--accent); }

/* ── Page Content Wrapper ── */
.page-content { padding: 28px; }
.page-title { font-size: 1.8rem; font-weight: 900; margin-bottom: 4px; }
.page-subtitle { color: var(--muted); font-size: 0.88rem; }
.page-subtitle:empty { display: none; }

/* ── Page Header ── */
.page-header { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; flex-wrap: wrap; }
.page-header h1 { margin-bottom: 0; }

/* ── Buttons ── */
.btn-accent { background: linear-gradient(135deg, #7c3aed, #a855f7); color: white; border: none; padding: 10px 20px; border-radius: 10px; font-weight: 800; font-size: 0.85rem; cursor: pointer; box-shadow: 0 0 24px rgba(124,58,237,0.6), 0 0 48px rgba(124,58,237,0.3); transition: all 0.2s; }
.btn-accent:hover { box-shadow: 0 0 24px rgba(124,58,237,0.5); transform: translateY(-1px); }
.btn-primary { background: linear-gradient(135deg, var(--accent), var(--accent2)); color: white; border: none; padding: 10px 20px; border-radius: 8px; cursor: pointer; font-weight: 700; font-size: 0.9rem; box-shadow: 0 0 20px var(--glow); }
.btn-primary:hover { box-shadow: 0 0 30px var(--glow); transform: translateY(-1px); }
.btn-secondary { background: #1a1a1a; color: #f0eeff; border: 1px solid #2a2a2a; padding: 10px 20px; border-radius: 10px; cursor: pointer; font-size: 0.85rem; }
.btn-secondary:hover { background: var(--border); }
.btn-ghost { background: none; color: var(--muted); border: 1px solid var(--border); padding: 10px 20px; border-radius: 8px; cursor: pointer; font-size: 0.9rem; }
.btn-ghost:hover { color: var(--text); border-color: var(--muted); }
.btn-sm { padding: 5px 12px; font-size: 0.8rem; border-radius: 6px; cursor: pointer; border: none; }
.btn-danger { background: var(--danger); color: white; }

/* ── Stats Row ── */
.stats-row { display: flex; gap: 14px; margin: 20px 0; overflow-x: auto; padding-bottom: 4px; }
.stat-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; display: flex; align-items: center; gap: 12px; min-width: 180px; flex: 1; }
.stat-icon { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0; }
.stat-icon.purple { background: #7c3aed50; border: 2px solid #a855f7; color: #a855f7; }
.stat-icon.amber { background: #f59e0b50; border: 2px solid #f59e0b; color: #f59e0b; }
.stat-icon.green { background: #00ff4150; border: 2px solid #00ff41; color: #00ff41; }
.stat-info .stat-label { font-size: 9px; text-transform: uppercase; letter-spacing: 0.1em; color: #5a5a7a; font-weight: 700; }
.stat-info .stat-value { font-size: 22px; font-weight: 900; line-height: 1.2; }
.stat-info .stat-value.purple { color: #a855f7; }
.stat-info .stat-value.amber { color: #f59e0b; }
.stat-info .stat-value.green { color: #00ff41; }

/* ── Stats Grid (dashboard) ── */
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 28px; }
.stats-grid .stat-card { background: var(--card); border-radius: 12px; padding: 24px; text-align: center; display: block; border: 1px solid var(--border); min-width: auto; }
.stat-num { font-size: 2.5rem; font-weight: 700; color: var(--accent); }
.stat-label { color: var(--muted); font-size: 0.9rem; margin-top: 4px; }

/* ── Cards ── */
.card { background: var(--card); border-radius: 12px; padding: 20px; margin-bottom: 16px; border: 1px solid var(--border); box-shadow: 0 2px 12px rgba(0,0,0,0.3); }

/* ── Quick Actions ── */
.quick-actions { background: var(--card); border-radius: 12px; padding: 24px; }
.quick-btn-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.quick-btn-row .btn-primary, .quick-btn-row .btn-secondary { flex: 1 1 auto; min-width: 140px; text-align: center; }

/* ── Projects Toolbar ── */
.projects-toolbar { display: flex; gap: 10px; margin-bottom: 16px; align-items: center; }
.search-wrap { flex: 1; position: relative; }
.search-wrap .search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 0.95rem; pointer-events: none; }
.search-wrap input { width: 100%; padding: 10px 12px 10px 36px; background: var(--card); border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-size: 0.9rem; }
.search-wrap input:focus { outline: none; border-color: var(--accent); }
.projects-toolbar select { padding: 10px 12px; background: var(--card); border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-size: 0.9rem; }
.projects-stats { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.proj-stat { background: var(--card); border-radius: 8px; padding: 10px 16px; font-size: 0.82rem; color: var(--muted); border: 1px solid var(--border); }
.proj-stat strong { color: var(--text); }

/* ── Project Cards ── */
.project-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  margin-bottom: 16px;
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s;
  position: relative;
}
.project-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #7c3aed, #a855f7);
  opacity: 1;
}
.project-card:hover { border-color: rgba(124,58,237,0.3); box-shadow: 0 4px 24px rgba(0,0,0,0.3); }
.project-card-header { padding: 18px 20px; display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.project-card-title { font-weight: 800; font-size: 1.05rem; color: #f0eeff; }
.project-card-address { color: var(--muted); font-size: 0.82rem; margin-top: 4px; }
.project-card-badge { border-radius: 6px; padding: 4px 10px; font-size: 0.75rem; white-space: nowrap; }
.badge { padding: 4px 10px; border-radius: 6px; font-size: 0.75rem; font-weight: 600; }
.badge-progress { background: rgba(245,158,11,0.13); color: #f59e0b; border: 1px solid rgba(245,158,11,0.33); border-radius: 100px; font-weight: 700; }
.badge-complete { background: rgba(34,197,94,0.13); color: #22c55e; border: 1px solid rgba(34,197,94,0.33); border-radius: 100px; font-weight: 700; }
.project-card-stats { display: flex; gap: 0; background: #111111; margin: 0 16px; border-radius: 10px; border: 1px solid #2a2a2a; overflow: hidden; }
.project-stat-item { flex: 1; padding: 12px; text-align: center; border-right: 1px solid var(--border); }
.project-stat-item:last-child { border-right: none; }
.project-stat-item .sv { font-size: 1.1rem; font-weight: 900; }
.sv.amber { color: #f59e0b !important; }
.sv.green { color: #00ff41 !important; }
.sv.blue { color: #38bdf8 !important; }
.sv.purple { color: #a855f7 !important; }
.project-stat-item .sl { color: #5a5a7a; font-size: 9px; text-transform: uppercase; letter-spacing: 0.05em; margin-top: 2px; }
.project-card-actions { padding: 12px 16px; display: flex; gap: 8px; flex-wrap: wrap; }
.action-btn { padding: 8px 14px; border-radius: 8px; font-size: 0.78rem; font-weight: 700; cursor: pointer; border: 1px solid; transition: all 0.15s; display: inline-flex; align-items: center; gap: 6px; background: transparent; }
.action-btn.amber { color: #f59e0b; border: 1px solid #f59e0b; background: #f59e0b25; font-weight: 700; }
.action-btn.green { color: #00ff41; border: 1px solid #00ff41; background: #00ff4125; font-weight: 700; }
.action-btn.yellow { color: #38bdf8; border: 1px solid #38bdf8; background: #38bdf825; font-weight: 700; }
.action-btn.purple { color: #a855f7; border: 1px solid #a855f7; background: #a855f725; font-weight: 700; }
.action-btn.amber:hover { background: #f59e0b40; }
.action-btn.green:hover { background: #00ff4140; }
.action-btn.yellow:hover { background: #38bdf840; }
.action-btn.purple:hover { background: #a855f740; }
.project-card-footer-strip { padding: 10px 20px; border-top: 1px solid var(--border); display: flex; justify-content: space-between; font-size: 0.75rem; color: var(--muted); }

/* Legacy project card footer (keep for JS compat) */
.project-card-footer { display: flex; flex-wrap: wrap; gap: 6px; border-top: 1px solid var(--border); padding: 10px 12px; }
.project-card-footer button, .project-card-footer a { flex: 0 1 auto; padding: 7px 14px; background: #1a1a1a; border: 1px solid #2a2a2a; color: #5a5a7a; cursor: pointer; font-size: 12px; font-weight: 700; text-align: center; text-decoration: none; transition: all 0.15s; white-space: nowrap; border-radius: 8px; }
.project-card-footer button:last-child { border-right: none; }
.project-card-footer button:hover { background: var(--border); color: var(--text); }
.project-card-footer button.load-btn { color: #a855f7; border-color: #a855f740; background: #a855f715; }
.project-card-footer button.load-btn:hover { background: #a855f730; }
.project-card-footer button.export-btn { color: #38bdf8; border-color: #38bdf840; background: #38bdf815; }
.project-card-footer button.export-btn:hover { background: #38bdf830; }
.project-card-footer button.del-btn { color: #dc143c; border-color: #dc143c40; background: #dc143c15; }
.project-card-footer button.del-btn:hover { background: #dc143c30; }

/* ── Forms ── */
.form-row { margin-bottom: 14px; }
.form-row label { display: block; font-size: 0.85rem; color: var(--muted); margin-bottom: 5px; }
.form-row input, .form-row select, .form-row textarea { width: 100%; padding: 10px; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-size: 0.95rem; }
.form-row textarea { min-height: 80px; resize: vertical; }
select option { background: var(--bg); color: var(--text); }

/* ══════════════════════════════════════════════════════════════════════════════
   BATTERY CALC PAGE - ALL RULES SCOPED UNDER #page-calc
   ══════════════════════════════════════════════════════════════════════════════ */
#page-calc { display:none; flex-direction:column; height:100%; overflow:hidden; padding:0 !important; }
#page-calc.active { display:flex !important; }
#page-calc #calc-topbar { display:flex; align-items:center; gap:14px; padding:8px 14px; background:var(--surface); border-bottom:1px solid var(--border); flex-shrink:0; }
#page-calc #calc-topbar-brand { font-size:0.95rem; font-weight:800; color:var(--accent); white-space:nowrap; min-width:110px; }
#page-calc #calc-topbar-fields { display:flex; gap:10px; flex:1; flex-wrap:wrap; align-items:flex-end; }
#page-calc .calc-topbar-field { display:flex; flex-direction:column; gap:2px; flex:1; min-width:140px; }
#page-calc .calc-topbar-label { font-size:0.6rem; letter-spacing:1px; color:var(--muted); font-weight:700; text-transform:uppercase; }
#page-calc .calc-topbar-field input { padding:6px 10px; background:var(--bg); border:1px solid var(--border); border-radius:5px; color:var(--text); font-size:0.85rem; width:100%; }
#page-calc .calc-topbar-field input:focus { outline:none; border-color:var(--accent); }
#page-calc #calc-body { display:flex; flex:1; min-height:0; overflow:hidden; }
#page-calc #calc-sidebar { width:270px; flex-shrink:0; display:flex; flex-direction:column; border-right:1px solid var(--border); background:var(--bg); overflow:hidden; }
#page-calc #calc-sidebar-head { padding:10px 10px 8px; border-bottom:1px solid var(--border); flex-shrink:0; display:flex; flex-direction:column; gap:6px; }
#page-calc .calc-sidebar-label { font-size:0.6rem; font-weight:700; letter-spacing:1.2px; color:var(--muted); text-transform:uppercase; }
#page-calc #calc-sidebar-head input,
#page-calc #calc-sidebar-head select { width:100%; padding:6px 9px; background:var(--surface); border:1px solid var(--border); border-radius:5px; color:var(--text); font-size:0.79rem; }
#page-calc #calc-sidebar-head input:focus,
#page-calc #calc-sidebar-head select:focus { outline:none; border-color:var(--accent); }
#page-calc #device-list { flex:1; overflow-y:auto; overflow-x:hidden; padding:6px 4px 8px 8px; }
#page-calc #device-list::-webkit-scrollbar { width:4px; }
#page-calc #device-list::-webkit-scrollbar-track { background:var(--bg); }
#page-calc #device-list::-webkit-scrollbar-thumb { background:var(--border); border-radius:4px; }
#page-calc .device-item { display:flex; justify-content:space-between; align-items:center; padding:7px 6px 7px 8px; margin-bottom:2px; margin-right:2px; gap:6px; border-bottom:1px solid var(--surface); }
#page-calc .device-item:hover { background:rgba(124,58,237,0.06); }
#page-calc .device-item-info { flex:1; min-width:0; }
#page-calc .device-item-info .name { font-weight:600; font-size:0.8rem; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#page-calc .device-item-info .meta { font-size:0.67rem; color:var(--muted); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#page-calc .device-item .btn-sm { flex-shrink:0; padding:4px 12px; font-size:0.75rem; font-weight:700; background:var(--accent); color:#fff; border:none; border-radius:4px; cursor:pointer; }
#page-calc .device-item .btn-sm:hover { background:var(--accent2); }
#page-calc #calc-right { flex:1; display:flex; flex-direction:column; min-width:0; overflow:hidden; background:var(--bg); }
#page-calc #calc-panel-row { display:flex; align-items:center; gap:10px; padding:8px 14px; border-bottom:1px solid var(--border); flex-shrink:0; background:var(--surface); }
#page-calc #calc-panel-label { font-size:0.82rem; font-weight:600; color:var(--muted); white-space:nowrap; }
#page-calc #calc-panel-row select { flex:1; padding:6px 10px; background:var(--bg); border:1px solid var(--border); border-radius:6px; color:var(--text); font-size:0.85rem; }
#page-calc #calc-panel-row select:focus { outline:none; border-color:var(--accent); }
#page-calc #panel-current-info { font-size:0.72rem; color:var(--muted); }
#page-calc #calc-table-wrap { flex:1; overflow-y:auto; overflow-x:auto; min-height:0; }
#page-calc #calc-table-wrap::-webkit-scrollbar { width:4px; height:4px; }
#page-calc #calc-table-wrap::-webkit-scrollbar-track { background:var(--bg); }
#page-calc #calc-table-wrap::-webkit-scrollbar-thumb { background:var(--border); border-radius:4px; }
#page-calc #calc-items-table { width:100%; border-collapse:collapse; font-size:0.82rem; table-layout:auto; }
#page-calc #calc-items-table td { padding:4px 8px; border-bottom:1px solid rgba(37,37,53,0.5); }
#page-calc .calc-thead-group th,
#page-calc .calc-thead-sub th { font-size:0.7rem !important; padding:4px 6px !important; }
#page-calc #calc-settings-strip { display:flex; align-items:center; gap:20px; padding:8px 14px; border-top:1px solid var(--border); border-bottom:1px solid var(--border); flex-shrink:0; background:var(--surface); flex-wrap:wrap; }
#page-calc .calc-strip-item { display:flex; align-items:center; gap:7px; }
#page-calc .calc-strip-item label { font-size:0.62rem; font-weight:700; letter-spacing:0.8px; color:var(--muted); text-transform:uppercase; white-space:nowrap; }
#page-calc .calc-strip-item select,
#page-calc .calc-strip-item input[type="number"] { padding:5px 8px; background:var(--bg); border:1px solid var(--border); border-radius:5px; color:var(--text); font-size:0.82rem; }
#page-calc .calc-strip-item select:focus,
#page-calc .calc-strip-item input:focus { outline:none; border-color:var(--accent); }
#page-calc #calc-live-totals { display:flex; flex-shrink:0; border-bottom:1px solid var(--border); }
#page-calc .calc-total-card { flex:1; padding:12px 16px; border-right:1px solid var(--border); }
#page-calc .calc-total-card:last-child { border-right:none; }
#page-calc .calc-total-sb { background:rgba(59,130,246,0.05); }
#page-calc .calc-total-al { background:rgba(239,68,68,0.05); }
#page-calc .calc-total-cnt { background:rgba(34,197,94,0.05); }
#page-calc .calc-total-lbl { font-size:0.62rem; font-weight:700; letter-spacing:1px; text-transform:uppercase; margin-bottom:4px; }
#page-calc .calc-total-sb .calc-total-lbl { color:#4fc3f7; }
#page-calc .calc-total-al .calc-total-lbl { color:#e879f9; }
#page-calc .calc-total-cnt .calc-total-lbl { color:var(--success); }
#page-calc .calc-total-val { font-size:1.9rem; font-weight:700; }
#page-calc .calc-total-sb .calc-total-val { color:#4fc3f7; }
#page-calc .calc-total-al .calc-total-val { color:#e879f9; }
#page-calc .calc-total-cnt .calc-total-val { color:var(--success); }
#page-calc .calc-total-sub { font-size:0.68rem; color:var(--muted); margin-top:2px; }
#page-calc .calc-results { padding:12px 14px; flex-shrink:0; background:var(--bg); }
#page-calc .calc-results:empty { display:none; }
#page-calc .calc-results .result-row { display:flex; justify-content:space-between; padding:4px 0; border-bottom:1px solid var(--card); font-size:0.86rem; }
#page-calc .calc-results .result-row.total { font-weight:700; font-size:1rem; color:var(--accent); border-bottom:none; padding-top:8px; }
#page-calc .calc-results .battery-rec { margin-top:8px; padding:8px 12px; background:rgba(124,58,237,0.08); border-radius:6px; border-left:3px solid var(--accent); font-size:0.86rem; }
#page-calc #calc-action-bar { display:flex; gap:8px; padding:10px 14px; border-top:1px solid var(--border); flex-shrink:0; background:var(--bg); }
#page-calc #calc-btn-calc { background:var(--accent); color:#fff; border:none; padding:8px 22px; border-radius:6px; cursor:pointer; font-weight:700; font-size:0.9rem; }
#page-calc #calc-btn-calc:hover { background:var(--accent2); }
#page-calc #calc-btn-save,
#page-calc #calc-btn-print { background:var(--card); color:var(--text); border:1px solid var(--border); padding:8px 16px; border-radius:6px; cursor:pointer; font-size:0.86rem; }
#page-calc #calc-btn-save:hover,
#page-calc #calc-btn-print:hover { background:var(--border); }
#page-calc #calc-btn-clear { background:none; color:var(--danger); border:1px solid rgba(239,68,68,0.3); padding:8px 16px; border-radius:6px; cursor:pointer; font-size:0.86rem; margin-left:auto; }
#page-calc #calc-btn-clear:hover { background:rgba(239,68,68,0.08); }
/* ══════════════════════════════════════════════════════════════════════════════
   END BATTERY CALC PAGE
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Calc Layout (legacy) ── */
#page-calc { width: 100%; }
#page-calc h1 { font-size: 1.4rem; margin-bottom: 16px; color: var(--text); }
.calc-container { display: grid; grid-template-columns: 260px 240px 1fr; gap: 14px; align-items: start; width: 100%; }
.calc-settings { grid-column: 1; position: sticky; top: 0; }
.calc-devices { grid-column: 2; max-height: calc(100vh - 160px); overflow-y: auto; overflow-x: hidden; touch-action: pan-y; overscroll-behavior-x: none; }
.calc-items { grid-column: 3; width: 100%; min-width: 0; overflow-x: auto; }

/* Calc settings panel */
.calc-settings.card { padding: 18px; }
.calc-settings h2 { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); margin-bottom: 14px; font-weight: 700; }
.calc-settings .form-row { margin-bottom: 10px; }
.calc-settings .form-row label { font-size: 0.78rem; color: var(--muted); margin-bottom: 4px; }
.calc-settings .form-row input,
.calc-settings .form-row select { padding: 8px 10px; font-size: 0.88rem; background: var(--bg); border: 1px solid var(--border); border-radius: 7px; color: var(--text); }
.calc-settings .form-row input:focus,
.calc-settings .form-row select:focus { outline: none; border-color: var(--accent); }

/* Add Devices panel */
.calc-devices.card { padding: 16px; }
.calc-devices h2 { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); margin-bottom: 10px; font-weight: 700; }

/* Device search row */
.device-search-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.device-search-row select,
.device-search-row input { width: 100%; padding: 8px 10px; background: var(--bg); border: 1px solid var(--border); border-radius: 7px; color: var(--text); font-size: 0.83rem; }
.device-search-row select:focus,
.device-search-row input:focus { outline: none; border-color: var(--accent); }

/* ── Dashboard Project Cards ── */
.dash-proj-card { background:var(--card); border:1px solid var(--border); border-radius:10px; margin-bottom:10px; overflow:hidden; transition:border-color 0.15s; }
.dash-proj-card:hover { border-color:rgba(124,58,237,0.3); }
.dash-proj-header { display:flex; justify-content:space-between; align-items:flex-start; padding:12px 16px 10px; gap:10px; }
.dash-proj-name { font-weight:700; font-size:0.95rem; margin-bottom:3px; color:var(--text); }
.dash-proj-addr { color:var(--muted); font-size:0.8rem; }
.dash-proj-owner { background:var(--surface); color:var(--muted); font-size:0.72rem; padding:3px 10px; border-radius:10px; white-space:nowrap; }
.dash-proj-stats { display:flex; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.dash-proj-stat { flex:1; padding:10px 14px; text-align:center; border-right:1px solid var(--border); }
.dash-proj-stat:last-child { border-right:none; }
.dash-proj-stat-val { font-size:1rem; font-weight:700; margin-bottom:2px; }
.dash-proj-stat-lbl { font-size:0.68rem; color:var(--muted); text-transform:uppercase; letter-spacing:0.5px; }
.dash-proj-footer { display:flex; }
.dash-proj-btn { flex:1; padding:9px 6px; background:none; border:none; border-right:1px solid var(--border); color:var(--muted); cursor:pointer; font-size:0.78rem; text-align:center; transition:background 0.12s; }
.dash-proj-btn:last-child { border-right:none; }
.dash-proj-btn:hover { background:var(--surface); color:var(--text); }
.dash-proj-btn--load { color:var(--info); }
.dash-proj-btn--load:hover { background:rgba(59,130,246,0.08); color:var(--info); }
.dash-proj-btn--del { color:var(--danger); }
.dash-proj-btn--del:hover { background:rgba(239,68,68,0.08); color:var(--danger); }

/* ── Device Items ── */
.device-item { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; background: var(--bg); border-radius: 7px; margin-bottom: 4px; margin-right: 2px; gap: 8px; border: 1px solid var(--card); transition: background 0.12s, border-color 0.12s; }
.device-item:hover { background: rgba(124,58,237,0.06); border-color: rgba(124,58,237,0.2); }
.device-item-info { flex: 1; min-width: 0; }
.device-item-info .name { font-weight: 600; font-size: 0.84rem; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.device-item-info .meta { font-size: 0.71rem; color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.device-item .btn-sm { flex-shrink: 0; padding: 4px 10px; font-size: 0.75rem; }

/* ── Calc Table Card ── */
.calc-items.card { padding: 16px; }
.calc-items h2 { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); margin-bottom: 10px; font-weight: 700; }
#calc-items-table { width: 100%; table-layout: auto; border-collapse: collapse; font-size: 0.82rem; }
#calc-items-table td { padding: 5px 7px; }
.calc-thead-group th, .calc-thead-sub th { font-size: 0.72rem !important; padding: 4px 6px !important; }

/* ── Calc Results ── */
.calc-results { background: var(--bg); border-radius: 8px; padding: 16px; margin-bottom: 14px; border: 1px solid var(--card); }
.calc-results .result-row { display: flex; justify-content: space-between; padding: 5px 0; border-bottom: 1px solid var(--card); font-size: 0.88rem; }
.calc-results .result-row.total { font-weight: 700; font-size: 1.05rem; color: var(--accent); border-bottom: none; padding-top: 10px; }
.calc-results .battery-rec { margin-top: 10px; padding: 10px 14px; background: rgba(124,58,237,0.08); border-radius: 8px; border-left: 3px solid var(--accent); font-size: 0.88rem; }
.calc-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ── Filter Row ── */
.filter-row { display: flex; gap: 12px; margin-bottom: 20px; }
.filter-row input, .filter-row select { padding: 9px 12px; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-size: 0.9rem; }
.filter-row input { flex: 1; }

/* ── Device Library ── */
.device-lib-card { background: var(--card); border-radius: 10px; padding: 16px; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: flex-start; border: 1px solid var(--border); }
.device-lib-info .name { font-weight: 700; }
.device-lib-info .meta { color: var(--muted); font-size: 0.85rem; margin-top: 4px; }
.cd-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.cd-tag { background: var(--border); border-radius: 4px; padding: 3px 8px; font-size: 0.78rem; color: var(--text); }
.cd-tag span { color: var(--accent); font-weight: 600; }
.csfm-badge { display:inline-block; background:rgba(59,130,246,0.1); color:var(--info); border:1px solid rgba(59,130,246,0.3); padding:3px 10px; border-radius:6px; font-size:0.72rem; font-weight:700; letter-spacing:0.5px; }

/* ── Presence Dots ── */
.presence-dot { display:inline-block; width:10px; height:10px; border-radius:50%; flex-shrink:0; transition:background 0.3s; }
.presence-dot.online { background:var(--success); box-shadow:0 0 6px rgba(34,197,94,0.5); animation: pulse-green 2s infinite; }
.presence-dot.idle { background:var(--warning); box-shadow:0 0 6px rgba(245,158,11,0.5); }
.presence-dot.offline { background:var(--muted); }
@keyframes pulse-green { 0%,100%{box-shadow:0 0 4px rgba(34,197,94,0.5)} 50%{box-shadow:0 0 10px rgba(34,197,94,0.8)} }

/* ── Panels / Docs / Calcs List ── */
.list-card { background: var(--card); border-radius: 10px; padding: 16px; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; border: 1px solid var(--border); }
.list-card .info .name { font-weight: 700; }
.list-card .info .meta { color: var(--muted); font-size: 0.85rem; margin-top: 3px; }
.list-card .actions { display: flex; gap: 8px; }

/* ── Modal ── */
#modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.7); display: flex; align-items: center; justify-content: center; z-index: 999; }
#modal-overlay.hidden { display: none; }
#modal-box { background: var(--card); border-radius: 12px; padding: 28px; width: 520px; max-width: 95vw; max-height: 85vh; overflow-y: auto; border: 1px solid var(--border); }
#modal-title { font-size: 1.2rem; font-weight: 700; margin-bottom: 20px; }
#modal-footer { display: flex; justify-content: flex-end; gap: 10px; margin-top: 24px; }

/* ── Admin / Owner Only ── */
.admin-only { display: none; }
body.is-admin .admin-only { display: block; }
body.is-admin #sidebar li.admin-only { display: list-item; }
.owner-only { display: none; }
body.is-owner .owner-only { display: flex; }

/* ── Device Sidebar Section ── */
.sidebar-section-label { font-size:0.58rem; font-weight:700; letter-spacing:1.3px; color:var(--muted); text-transform:uppercase; padding:5px 8px 3px; }
.sidebar-section-divider { height:1px; background:var(--card); margin:4px 0; }

/* ── Device Hover Tooltip ── */
#dev-tooltip {
  position: fixed; z-index: 9999;
  background: var(--surface); border: 1px solid var(--border); border-radius: 9px;
  padding: 13px 15px; min-width: 230px; max-width: 290px;
  pointer-events: none; opacity: 0; transition: opacity 0.1s;
  box-shadow: 0 6px 28px rgba(0,0,0,0.7);
}
#dev-tooltip.visible { opacity: 1; }
#dev-tooltip .tt-name { font-size: 0.88rem; font-weight: 700; color: var(--text); margin-bottom: 2px; }
#dev-tooltip .tt-cat  { font-size: 0.7rem; color: var(--muted); margin-bottom: 7px; }
#dev-tooltip .tt-table { width: 100%; border-collapse: collapse; font-size: 0.75rem; margin-bottom: 4px; }
#dev-tooltip .tt-table th { color: var(--muted); font-weight: 600; text-align: left; padding: 0 8px 4px 0; font-size: 0.67rem; text-transform: uppercase; letter-spacing: 0.6px; }
#dev-tooltip .tt-table td { color: var(--text); padding: 2px 8px 2px 0; }
#dev-tooltip .tt-table td.cd { color: var(--text); font-weight: 600; }
#dev-tooltip .tt-table td.sb { color: var(--info); }
#dev-tooltip .tt-table td.al { color: var(--danger); }
#dev-tooltip .tt-csfm { font-size: 0.68rem; color: var(--muted); margin-top: 6px; border-top: 1px solid var(--border); padding-top: 6px; }

/* ── Mobile ── */
@media (max-width: 900px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .calc-container { grid-template-columns: 1fr; max-width: 100%; }
  .calc-settings.card { position: static !important; }
  .calc-devices { grid-column: 1; max-height: 300px; }
  .calc-items { grid-column: 1; }
  #screen-app { flex-direction: column; }
  #sidebar { width: 100%; flex-direction: row; padding: 0; height: auto; border-bottom: 1px solid var(--border); border-right: none; overflow-x: auto; }
  .sidebar-logo { display: none; }
  .sidebar-section { display: none !important; }
  #sidebar ul { display: flex; flex-direction: row; padding: 0; flex: 1; overflow-x: auto; white-space: nowrap; }
  #sidebar ul.nav-group { display: contents; }        /* SIDEBAR_CONTRAST_v1 — dissolve lifted blocks so mobile stays one horizontal bar (option a) */
  #sidebar ul li { padding: 14px 12px; font-size: 0.75rem; flex-shrink: 0; border-radius: 0; border-left: none !important; }
  #sidebar ul li:hover, #sidebar ul li.active { background: rgba(124,58,237,0.1); border-bottom: 2px solid var(--accent); color: #ececf2; }
  #sidebar ul li.active .sidebar-icon { color: var(--accent); }   /* SIDEBAR_CONTRAST_v1 — keep active icon visible on the mobile bar (base active-icon is dark) */
  .sidebar-footer { display: none; }
  #content { padding: 16px; }
  h1 { font-size: 1.3rem; }
  .page-topbar { padding: 12px 16px; }
  .topbar-actions { flex-wrap: wrap; width: 100%; }
  .topbar-search { width: 100% !important; }
  .stats-row { flex-direction: column; }

  /* ── Battery Calc mobile ── */
  #page-calc #calc-body { flex-direction: column; }
  #page-calc #calc-sidebar { width: 100%; max-height: 300px; border-right: none; border-bottom: 1px solid var(--border); }
  #page-calc #calc-right { min-width: 100%; }
  #page-calc .device-item {
    display: flex !important; align-items: center !important;
    justify-content: space-between !important;
    padding: 10px 12px !important; border-bottom: 1px solid #1a1a1a !important; gap: 8px;
  }
  #page-calc .device-item-info .name { color: #f0eeff; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #page-calc .device-item-info .meta { color: #5a5a7a; font-size: 11px; }
  #page-calc .device-item .btn-sm {
    width: auto !important; min-width: 60px; max-width: 80px;
    padding: 6px 14px !important; font-size: 13px !important; font-weight: 700;
    background: linear-gradient(135deg, #dc143c, #8b0000) !important;
    color: #fff !important; border: none !important; border-radius: 8px !important;
  }
  #page-calc #calc-sidebar-head input,
  #page-calc #calc-sidebar-head select { width: 100%; margin-bottom: 8px; }
  #page-calc .calc-sidebar-label { color: #5a5a7a; font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 8px; }
  #page-calc #calc-panel-row { display: flex; align-items: center; padding: 10px 0; border-bottom: 1px solid #1a1a1a; }
  #page-calc .calc-strip-item label { color: #5a5a7a; font-size: 11px; text-transform: uppercase; }
  #page-calc #calc-live-totals { display: flex !important; flex-wrap: nowrap !important; gap: 8px; padding: 8px; }
  #page-calc .calc-total-card {
    flex: 1; min-width: 0;
    background: #1a1a1a; border: 1px solid rgba(220,20,60,0.25);
    border-radius: 10px; padding: 12px;
  }
  #page-calc .calc-total-val { font-size: 20px !important; font-weight: 900 !important; color: #dc143c !important; }
  #page-calc .calc-total-lbl { font-size: 9px !important; text-transform: uppercase !important; color: #5a5a7a !important; }
  #page-calc #calc-topbar { flex-wrap: wrap; }
  #page-calc #calc-topbar-fields { flex-direction: column; }
}
@media (max-width: 600px) {
  .stats-grid { grid-template-columns: 1fr 1fr; }
  #sidebar ul li { padding: 12px 8px; font-size: 0.68rem; }
  .calc-actions { flex-wrap: wrap; }
  .calc-actions button { flex: 1; min-width: 100px; }
  .filter-row { flex-direction: column; }
  .filter-row input, .filter-row select { width: 100%; }
  .page-header { flex-direction: column; gap: 10px; }
  .page-header h1 { margin-bottom: 0; }
  .list-card { flex-direction: column; gap: 10px; }
  .list-card .actions { display: flex; gap: 8px; justify-content: flex-end; }
  .device-lib-card { flex-direction: column; gap: 8px; }
  .projects-toolbar { flex-direction: column; }
  .projects-toolbar select { width: 100%; }
  .project-card-stats { flex-wrap: wrap; }
  .project-stat-item { min-width: 50%; }
}

/* ── Print Styles ── */
@media print {
  @page { margin: 15mm 12mm; size: letter; }
  nav#sidebar, .calc-settings, .calc-devices, #calc-live-totals,
  .calc-actions, .device-search-row, .filter-row, .page-header button,
  .btn-primary, .btn-secondary, .btn-ghost, .btn-sm, .btn-accent,
  #back-to-top, #panel-picker, .quick-actions, .stats-grid, .stats-row,
  #recent-card, #projects-cards, .projects-toolbar, .no-print,
  .sidebar-footer, .page-topbar { display: none !important; }
  body { background: white; color: #111; font-family: Arial, sans-serif; font-size: 11px; padding: 0; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  #screen-app { display: block; height: auto; overflow: visible; }
  #content { padding: 8px; overflow: visible; height: auto; }
  .page { display: none; }
  .page.active { display: block; }
  .card, .calc-items { background: white; border: 1px solid #ccc; border-radius: 0; padding: 8px; margin-bottom: 8px; box-shadow: none; }
  .card h2, .calc-items > h2 { display: none; }
  input, select { border: 1px solid #bbb; background: white; color: #111; padding: 2px 4px; font-size: 11px; }
  table { border-collapse: collapse; width: 100%; font-size: 11px; }
  th { background: #dde4ed; color: #1a1a2e; border: 1px solid #aab; padding: 5px 7px; font-size: 10px; text-transform: uppercase; }
  td { border: 1px solid #ccc; padding: 4px 7px; color: #111; }
  tr:nth-child(even) td { background: #f7f9fc; }
  .calc-container { display: block; width: 100%; }
  .calc-results { background: #f7f9fc; border: 1px solid #ccc; page-break-inside: avoid; }
  .calc-results .result-row { display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px solid #e8e8e8; color: #111; }
  .calc-results .result-row.total { font-size: 13px; font-weight: 800; color: #5b21b6; }
  .calc-results .battery-rec { background: #fff8e8; border: 1px solid #e0c060; padding: 8px; margin-top: 10px; font-weight: 700; color: #5a3800; }
  body, html, #screen-app, #content, .page.active { height: auto; overflow: visible; }
}
/* Hide floating sign-out overlay */
button[style*='position:fixed'][onclick*='logout'] { display: none !important; }
button[style*='position: fixed'][onclick*='logout'] { display: none !important; }

/* floating-signout-hide */
.sidebar-footer { position: relative; }
#btn-logout { position: static !important; }
button[style*="position:fixed"][onclick*="logout"],
button[style*="position: fixed"][onclick*="logout"] { display: none !important; }