/* VASTUDEVAA Zone Analyzer — styles (ported from v3, unchanged look) */
:root{
  --primary:#1B4F72;--primary-dark:#154360;--primary-light:#2E86C1;
  --gold:#C9A84C;--gold-light:#F4D03F;
  --bg:#F0F4F8;--surface:#FFFFFF;--surface2:#EAF0F6;
  --text:#1A252F;--text2:#566573;--text3:#AAB7B8;
  --border:rgba(27,79,114,0.13);--border2:rgba(27,79,114,0.28);
  --radius:8px;--radius-lg:14px;
  --font-head:"Cinzel",Georgia,serif;--font-body:"DM Sans",sans-serif;
  --shadow:0 2px 12px rgba(27,79,114,0.09);
  --water-c:#1A6FA8;--water-bg:#ddeeff;--water-lbl:#0C447C;
  --air-c:#3B8A1A;--air-bg:#e5f5d8;--air-lbl:#1a4a08;
  --fire-c:#C0392B;--fire-bg:#fde8e6;--fire-lbl:#7B241C;
  --earth-c:#D4860C;--earth-bg:#fef3dc;--earth-lbl:#7E5109;
  --space-c:#6B7280;--space-bg:#eeecea;--space-lbl:#3a3a38;
}
*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;background:var(--bg);font-family:var(--font-body);color:var(--text);}
.shell{display:flex;height:100vh;}
.sidebar{width:236px;background:var(--primary-dark);display:flex;flex-direction:column;flex-shrink:0;}
.brand{padding:20px 16px 16px;border-bottom:1px solid rgba(201,168,76,0.2);display:flex;flex-direction:column;align-items:center;gap:8px;}
.brand img{width:80px;height:auto;}
.brand-name{font-family:var(--font-head);font-size:12.5px;color:var(--gold-light);letter-spacing:0.12em;text-align:center;}
.brand-sub{font-size:9px;color:rgba(201,168,76,0.55);letter-spacing:0.14em;text-transform:uppercase;text-align:center;}
.nav{flex:1;padding:14px 0;}
.nav-sec{font-size:9px;letter-spacing:0.14em;text-transform:uppercase;color:rgba(255,255,255,0.28);padding:10px 18px 4px;}
.nav-item{display:flex;align-items:flex-start;gap:10px;padding:10px 18px;cursor:pointer;color:rgba(255,255,255,0.5);font-size:13px;border-left:3px solid transparent;transition:all 0.16s;user-select:none;line-height:1.4;}
.nav-item:hover{color:rgba(255,255,255,0.88);background:rgba(255,255,255,0.06);}
.nav-item.active{color:var(--gold-light);background:rgba(244,208,63,0.1);border-left-color:var(--gold);font-weight:500;}
.nav-num{font-family:var(--font-head);font-size:10px;color:var(--gold);min-width:14px;padding-top:1px;}
.sfooter{padding:13px 16px;border-top:1px solid rgba(201,168,76,0.18);}
.cline{display:flex;align-items:center;gap:6px;font-size:10px;color:rgba(255,255,255,0.38);margin-bottom:4px;text-decoration:none;}
.cline:hover{color:var(--gold);}
.copy{font-size:9px;color:rgba(255,255,255,0.22);margin-top:6px;}
.main{flex:1;display:flex;flex-direction:column;overflow:hidden;}
.topbar{background:var(--surface);border-bottom:1px solid var(--border);padding:12px 26px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;box-shadow:var(--shadow);}
.page-title{font-family:var(--font-head);font-size:16px;font-weight:500;color:var(--primary-dark);letter-spacing:0.04em;}
.date-badge{font-size:11px;color:var(--text2);background:var(--surface2);border:1px solid var(--border);padding:4px 13px;border-radius:20px;}
.panel{display:none;flex:1;overflow-y:auto;flex-direction:column;}
.panel.active{display:flex;}
.panel-body{padding:22px 26px;flex:1;}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow);overflow:hidden;margin-bottom:16px;}
.card-head{padding:14px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;}
.card-title{font-family:var(--font-head);font-size:13px;font-weight:500;color:var(--primary-dark);letter-spacing:0.04em;}
.card-body{padding:20px;}

/* INPUT */
.el-section{margin-bottom:16px;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--border);}
.el-header{display:flex;align-items:center;gap:12px;padding:12px 18px;}
.el-icon{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;}
.el-title{font-family:var(--font-head);font-size:13px;font-weight:500;letter-spacing:0.05em;}
.el-subtitle{font-size:10.5px;margin-top:2px;}
.el-zones{padding:14px 18px 16px;display:grid;gap:12px;}
.zone-inp{display:flex;flex-direction:column;gap:5px;}
.zone-inp-label{display:flex;align-items:baseline;gap:6px;}
.zone-code{font-size:12px;font-weight:600;letter-spacing:0.08em;}
.zone-fullname{font-size:10px;color:var(--text2);}
.zone-inp input{width:100%;font-size:16px;font-weight:600;padding:10px 12px;border-radius:var(--radius);border:1.5px solid rgba(0,0,0,0.1);outline:none;background:rgba(255,255,255,0.92);color:var(--text);text-align:center;transition:border 0.15s;}
.zone-inp input:focus{border-width:2px;}

/* WATER */
.el-water .el-header{background:#d8eeff;}.el-water .el-title{color:#0C447C;}.el-water .el-subtitle{color:#1A6FA8;}.el-water .el-zones{background:#eef6ff;}.el-water .zone-code{color:#0C447C;}.el-water input:focus{border-color:#1A6FA8;box-shadow:0 0 0 3px rgba(26,111,168,0.12);}
/* AIR */
.el-air .el-header{background:#d8f0c8;}.el-air .el-title{color:#1a4a08;}.el-air .el-subtitle{color:#3B8A1A;}.el-air .el-zones{background:#edfae3;}.el-air .zone-code{color:#1a4a08;}.el-air input:focus{border-color:#3B8A1A;box-shadow:0 0 0 3px rgba(59,138,26,0.12);}
/* FIRE */
.el-fire .el-header{background:#fcd9d6;}.el-fire .el-title{color:#7B241C;}.el-fire .el-subtitle{color:#C0392B;}.el-fire .el-zones{background:#fef0ef;}.el-fire .zone-code{color:#7B241C;}.el-fire input:focus{border-color:#C0392B;box-shadow:0 0 0 3px rgba(192,57,43,0.12);}
/* EARTH */
.el-earth .el-header{background:#fceabc;}.el-earth .el-title{color:#7E5109;}.el-earth .el-subtitle{color:#D4860C;}.el-earth .el-zones{background:#fef7e8;}.el-earth .zone-code{color:#7E5109;}.el-earth input:focus{border-color:#D4860C;box-shadow:0 0 0 3px rgba(212,134,12,0.12);}
/* SPACE */
.el-space .el-header{background:#e0dedd;}.el-space .el-title{color:#3a3a38;}.el-space .el-subtitle{color:#6B7280;}.el-space .el-zones{background:#f2f0ee;}.el-space .zone-code{color:#3a3a38;}.el-space input:focus{border-color:#6B7280;box-shadow:0 0 0 3px rgba(107,114,128,0.12);}

/* METRICS */
.metrics-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px;}
.metric{border-radius:var(--radius-lg);padding:16px;text-align:center;border:1px solid transparent;}
.metric-lbl{font-size:10px;text-transform:uppercase;letter-spacing:0.09em;margin-bottom:7px;font-weight:500;}
.metric-val{font-family:var(--font-head);font-size:24px;font-weight:500;}
.metric-sub{font-size:10px;margin-top:4px;}
.met-total{background:#EAF0F6;border-color:var(--border2);}.met-total .metric-lbl{color:var(--primary-dark);}.met-total .metric-val{color:var(--primary);}.met-total .metric-sub{color:var(--text2);}
.met-avg{background:#E8F5E9;border-color:#A5D6A7;}.met-avg .metric-lbl{color:#1B5E20;}.met-avg .metric-val{color:#0A5C0A;}.met-avg .metric-sub{color:#2E7D32;}
.met-max{background:#FFEBEE;border-color:#FFCDD2;}.met-max .metric-lbl{color:#7F0000;}.met-max .metric-val{color:#8B0000;}.met-max .metric-sub{color:#B71C1C;}
.met-min{background:#FFF3E0;border-color:#FFCC80;}.met-min .metric-lbl{color:#7E3700;}.met-min .metric-val{color:#E65100;}.met-min .metric-sub{color:#BF360C;}

/* EFFECTS */
.effect-card{border-radius:var(--radius-lg);border:1px solid var(--border);overflow:hidden;margin-bottom:10px;}
.effect-head{display:flex;align-items:center;gap:10px;padding:11px 16px;}
.effect-zbadge{font-family:var(--font-head);font-size:12px;font-weight:500;padding:3px 11px;border-radius:20px;min-width:52px;text-align:center;}
.status-ext{background:#FDECEA;color:#8B0000;}
.status-low{background:#FFF3E0;color:#E65100;}
.status-bal{background:var(--surface2);color:var(--text2);}
.effect-body{padding:10px 16px 13px;background:var(--surface);}
.effect-title{font-size:13px;font-weight:500;color:var(--text);margin-bottom:3px;}
.effect-text{font-size:12px;color:var(--text2);line-height:1.6;}

/* REMEDIES */
.remedy-card{background:var(--surface);border-radius:var(--radius-lg);padding:16px 18px;margin-bottom:10px;display:flex;gap:14px;align-items:flex-start;border-left:4px solid transparent;}
.remedy-card.ext{border-left-color:#8B0000;background:#FFFAFA;}
.remedy-card.low{border-left-color:#E65100;background:#FFFDF8;}
.remedy-swatch{width:44px;height:44px;border-radius:10px;flex-shrink:0;border:2px solid rgba(0,0,0,0.1);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,0.4);}
.remedy-zone{font-size:11px;font-weight:500;color:var(--text2);margin-bottom:3px;}
.remedy-text{font-size:13px;color:var(--text);line-height:1.55;}

.btn-primary{background:var(--primary);color:#fff;border:none;padding:10px 22px;border-radius:var(--radius);font-family:var(--font-body);font-size:13px;font-weight:500;cursor:pointer;}
.btn-primary:hover{background:var(--primary-light);}
.btn-gold{background:var(--gold);color:#fff;border:none;padding:8px 18px;border-radius:var(--radius);font-family:var(--font-body);font-size:12px;font-weight:500;cursor:pointer;}
.btn-gold:hover{background:#a8872a;}
.info-bar{background:#FDF6E3;border:1px solid rgba(201,168,76,0.3);border-radius:var(--radius-lg);padding:13px 16px;margin-bottom:18px;font-size:12.5px;color:var(--text2);line-height:1.6;}
.section-lbl{font-size:10px;text-transform:uppercase;letter-spacing:0.09em;color:var(--text3);margin-bottom:12px;font-weight:500;}
.empty-state{text-align:center;padding:52px 20px;color:var(--text2);}
::-webkit-scrollbar{width:5px;}::-webkit-scrollbar-thumb{background:var(--border2);border-radius:10px;}

/* ===== CLIENT FORM ===== */
.client-form{display:grid;grid-template-columns:repeat(3,1fr);gap:12px 14px;}
.cl-field{display:flex;flex-direction:column;gap:4px;}
.cl-field.cl-span2{grid-column:span 2;}
.cl-field.cl-span3{grid-column:span 3;}
.cl-field label{font-size:10.5px;font-weight:500;color:var(--text2);text-transform:uppercase;letter-spacing:0.04em;}
.cl-field input,.cl-field textarea{font-family:var(--font-body);font-size:13.5px;padding:9px 11px;border:1.5px solid rgba(27,79,114,0.18);border-radius:8px;outline:none;background:#fff;color:var(--text);resize:vertical;}
.cl-field input:focus,.cl-field textarea:focus{border-color:var(--primary-light);box-shadow:0 0 0 3px rgba(46,134,193,0.12);}

/* ===== CLIENT LIST ===== */
#client-list{display:flex;flex-direction:column;gap:8px;}
.client-row{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:11px 14px;transition:box-shadow .15s;}
.client-row:hover{box-shadow:var(--shadow);}
.client-row-main{flex:1;cursor:pointer;min-width:0;}
.client-row-name{font-size:13.5px;font-weight:600;color:var(--primary-dark);}
.client-row-sub{font-size:11px;color:var(--text2);margin-top:1px;}
.client-row-open{padding:6px 14px;}
.client-row-del{background:#FDECEA;color:#8B0000;border:none;width:30px;height:30px;border-radius:8px;cursor:pointer;font-size:13px;flex-shrink:0;}
.client-row-del:hover{background:#f7d5d0;}

/* ===== COMPACT ZONE INPUT GRID (no element grouping, fits one screen) ===== */
.zone-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:11px;margin-bottom:18px;}
.zg-cell{display:flex;flex-direction:column;gap:5px;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:10px 12px;}
.zg-label{display:flex;align-items:baseline;gap:7px;}
.zg-code{font-size:13px;font-weight:700;letter-spacing:0.06em;color:var(--primary);}
.zg-name{font-size:10px;color:var(--text2);}
.zg-cell input{width:100%;font-size:16px;font-weight:600;padding:9px 10px;border:1.5px solid rgba(27,79,114,0.18);border-radius:8px;outline:none;background:rgba(255,255,255,0.95);color:var(--text);text-align:center;}
.zg-cell input:focus{border-color:var(--primary-light);box-shadow:0 0 0 3px rgba(46,134,193,0.12);}

@media (max-width:900px){
  .zone-grid{grid-template-columns:repeat(2,1fr);}
  .client-form{grid-template-columns:repeat(2,1fr);}
  .cl-field.cl-span2,.cl-field.cl-span3{grid-column:span 2;}
}
.client-row-edit{padding:6px 12px;background:#EAF0F6;color:var(--primary-dark);border:1px solid var(--border2);border-radius:8px;font-family:var(--font-body);font-size:12px;font-weight:500;cursor:pointer;flex-shrink:0;}
.client-row-edit:hover{background:#dde7f0;}

/* ===== CLIENT NAME BANNER (chart & remedies screens) ===== */
.client-banner{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;background:linear-gradient(90deg,#EAF0F6,#f4f8fc);border:1px solid var(--border);border-left:4px solid var(--gold);border-radius:10px;padding:11px 16px;margin-bottom:16px;}
.client-banner .cb-label{font-size:9.5px;text-transform:uppercase;letter-spacing:0.1em;color:var(--text2);font-weight:600;}
.client-banner .cb-name{font-family:var(--font-head);font-size:16px;font-weight:600;color:var(--primary-dark);}
.client-banner .cb-sub{font-size:11.5px;color:var(--text2);}

/* ===== CLIENTS SEARCH + SORT TOOLBAR ===== */
.clients-toolbar{display:flex;gap:10px;align-items:center;margin:4px 0 10px;}
.client-search{flex:1;font-family:var(--font-body);font-size:13.5px;padding:10px 14px;border:1.5px solid rgba(27,79,114,0.18);border-radius:10px;outline:none;background:#fff;color:var(--text);}
.client-search:focus{border-color:var(--primary-light);box-shadow:0 0 0 3px rgba(46,134,193,0.12);}
.client-sort{padding:10px 16px;background:var(--primary);color:#fff;border:none;border-radius:10px;font-family:var(--font-body);font-size:12.5px;font-weight:500;cursor:pointer;white-space:nowrap;min-width:64px;}
.client-sort:hover{background:var(--primary-light);}