/* =========================================================
   IMG.CO.ID — CWLC Visual Polish v1.2
   Readability + density refinement over v1.1
   CSS-only. No backend/API/control logic changes.
   ========================================================= */

:root{
  --cwlc12-cyan:#31d8ff;
  --cwlc12-teal:#2ee6c4;
  --cwlc12-green:#17c98f;
  --cwlc12-red:#ef5968;
  --cwlc12-amber:#e9a52a;
  --cwlc12-ink:#123148;
  --cwlc12-muted:#6f8b9e;
}

/* ===== Compact the IMG shell on operational application pages ===== */
body.img-cwlc-theme .img-cwlc-utility{height:30px !important}
body.img-cwlc-theme .img-cwlc-header{height:64px !important}
body.img-cwlc-theme .img-cwlc-brand img{width:38px !important;height:38px !important}
body.img-cwlc-theme .img-cwlc-brand strong{font-size:18px !important}
body.img-cwlc-theme .img-cwlc-brand small{font-size:9px !important}
body.img-cwlc-theme .img-cwlc-context a{font-size:10px !important;padding:8px 10px !important}

body.img-cwlc-theme .img-cwlc-hero,
body.img-cwlc-theme .img-cwlc-hero-inner{
  min-height:150px !important;
}
body.img-cwlc-theme .img-cwlc-hero-copy{padding:23px 0 !important}
body.img-cwlc-theme .img-cwlc-kicker{font-size:9px !important}
body.img-cwlc-theme .img-cwlc-hero h1{
  font-size:36px !important;
  margin:7px 0 7px !important;
}
body.img-cwlc-theme .img-cwlc-hero p{
  font-size:11px !important;
  max-width:760px !important;
}
body.img-cwlc-theme .img-cwlc-hero-pills{margin-top:10px !important}
body.img-cwlc-theme .img-cwlc-hero-pills span{
  font-size:8px !important;padding:5px 8px !important;
}
body.img-cwlc-theme .img-cwlc-orbit{
  width:135px !important;height:135px !important;margin-right:40px !important;
}
body.img-cwlc-theme .img-cwlc-orbit:before{width:92px !important;height:92px !important}
body.img-cwlc-theme .img-cwlc-orbit:after{width:52px !important;height:52px !important}
body.img-cwlc-theme .img-cwlc-orbit b{font-size:18px !important}

/* ===== Operational workspace sizing ===== */
body.img-cwlc-theme .app-shell{
  grid-template-columns:230px minmax(0,1fr) !important;
}
body.img-cwlc-theme .sidebar{padding:17px 13px 18px !important}
body.img-cwlc-theme .main{padding:0 20px 30px !important}

/* ===== Sidebar readability ===== */
body.img-cwlc-theme .sidebar .brand-drop{
  width:44px !important;height:44px !important;font-size:22px !important;
}
body.img-cwlc-theme .sidebar .brand strong{font-size:16px !important}
body.img-cwlc-theme .sidebar .brand small{font-size:10px !important}
body.img-cwlc-theme .side-nav a{
  min-height:41px !important;
  font-size:12px !important;
  padding:10px 11px !important;
}
body.img-cwlc-theme .side-block > span,
body.img-cwlc-theme .side-block > small{
  font-size:10px !important;
}
body.img-cwlc-theme #sideWifi{font-size:11px !important}
body.img-cwlc-theme .logout{font-size:11px !important}

/* ===== Local page header ===== */
body.img-cwlc-theme .page-head{padding:13px 0 11px !important}
body.img-cwlc-theme .page-head h1,
body.img-cwlc-theme .page-head h2{
  font-size:20px !important;
}
body.img-cwlc-theme .page-head p{font-size:11px !important}
body.img-cwlc-theme .device-select{font-size:10px !important}
body.img-cwlc-theme .device-select select{
  min-width:200px !important;height:36px !important;font-size:10px !important;
}
body.img-cwlc-theme #conn.cloud-pill{
  min-height:36px !important;font-size:10px !important;
}
body.img-cwlc-theme .icon-btn{
  width:36px !important;height:36px !important;
}

/* ===== Fault banner ===== */
body.img-cwlc-theme .fault-banner{
  padding:11px 14px !important;
  font-size:10px !important;
}

/* ===== Four primary status cards ===== */
body.img-cwlc-theme .hero-grid{
  gap:11px !important;
}
body.img-cwlc-theme .hero-card{
  min-height:190px !important;
  padding:16px 17px !important;
}
body.img-cwlc-theme .hero-card .eyebrow{
  font-size:9px !important;
}
body.img-cwlc-theme .hero-card > strong{
  font-size:22px !important;
}
body.img-cwlc-theme #tankStateBig,
body.img-cwlc-theme #pumpBig{
  font-size:24px !important;
}
body.img-cwlc-theme #directionText{
  font-size:17px !important;
}
body.img-cwlc-theme .hero-card p{
  font-size:9px !important;
  max-width:88% !important;
}
body.img-cwlc-theme .state-circle{
  width:74px !important;height:74px !important;
}
body.img-cwlc-theme .direction-arrow{
  font-size:52px !important;
}

/* ===== Tank visualization ===== */
body.img-cwlc-theme .visual-stage{
  min-height:128px !important;
  grid-template-columns:42px minmax(145px,1fr) 46px !important;
}
body.img-cwlc-theme .scale{
  height:120px !important;
  font-size:8px !important;
}
body.img-cwlc-theme .tank-shell{
  width:min(160px,92%) !important;
  height:128px !important;
}
body.img-cwlc-theme .tank-percent{
  font-size:30px !important;
}
body.img-cwlc-theme .tank-flow-arrow{
  font-size:48px !important;
}
body.img-cwlc-theme .tank-meta{
  font-size:8px !important;
  gap:18px !important;
}

/* ===== Mode / thresholds ===== */
body.img-cwlc-theme .mode-row{
  gap:11px !important;
}
body.img-cwlc-theme .mode-panel,
body.img-cwlc-theme .threshold-panel{
  padding:11px 14px !important;
}
body.img-cwlc-theme .mode-panel span,
body.img-cwlc-theme .threshold-panel small{
  font-size:8px !important;
}
body.img-cwlc-theme #modeBig{
  font-size:16px !important;
}
body.img-cwlc-theme .mode-actions button{
  height:32px !important;
  min-width:72px !important;
  font-size:9px !important;
}
body.img-cwlc-theme .thresholds b{
  font-size:24px !important;
}

/* ===== KPI strip ===== */
body.img-cwlc-theme .metric-strip > div{
  min-height:66px !important;
  padding:11px 13px !important;
}
body.img-cwlc-theme .metric-strip span{
  font-size:8px !important;
}
body.img-cwlc-theme .metric-strip b{
  font-size:20px !important;
}
body.img-cwlc-theme .metric-strip small{
  font-size:8px !important;
}

/* ===== Main cards / chart ===== */
body.img-cwlc-theme .panel{
  padding:15px 16px !important;
}
body.img-cwlc-theme .panel-head h2,
body.img-cwlc-theme .panel h2{
  font-size:13px !important;
}
body.img-cwlc-theme .panel-head p,
body.img-cwlc-theme .muted{
  font-size:9px !important;
}
body.img-cwlc-theme .chart-holder{
  min-height:235px !important;
  height:235px !important;
}
body.img-cwlc-theme .chart-holder canvas{
  max-height:235px !important;
}
body.img-cwlc-theme .period-tabs button{
  min-width:29px !important;
  height:27px !important;
  font-size:8px !important;
}
body.img-cwlc-theme .cycle-legend span{
  font-size:8px !important;
  padding:7px 6px !important;
}

/* ===== Events / health ===== */
body.img-cwlc-theme .live-events{
  gap:9px !important;
  min-height:90px !important;
}
body.img-cwlc-theme .live-events > div{
  font-size:9px !important;
}
body.img-cwlc-theme .mini-metrics{
  gap:8px !important;
}
body.img-cwlc-theme .mini-metrics span{
  font-size:8px !important;
}
body.img-cwlc-theme .mini-metrics b{
  font-size:9px !important;
}

/* ===== Control / calibration / alarms / test ===== */
body.img-cwlc-theme .classic-grid{
  gap:11px !important;
}
body.img-cwlc-theme .formgrid{
  gap:9px 13px !important;
}
body.img-cwlc-theme .formgrid label,
body.img-cwlc-theme .test-form label{
  font-size:8px !important;
}
body.img-cwlc-theme .formgrid input,
body.img-cwlc-theme .test-form input,
body.img-cwlc-theme .test-form select,
body.img-cwlc-theme .test-form textarea{
  min-height:34px !important;
  font-size:10px !important;
  padding:7px 9px !important;
}
body.img-cwlc-theme .formgrid + button,
body.img-cwlc-theme .panel > button:not(.smallbtn){
  min-height:34px !important;
  font-size:9px !important;
}
body.img-cwlc-theme .smallbtn{
  min-height:28px !important;
  font-size:8px !important;
}
body.img-cwlc-theme .alarm-list{
  font-size:9px !important;
  min-height:56px !important;
}
body.img-cwlc-theme .test-grid button{
  min-height:34px !important;
  font-size:9px !important;
}
body.img-cwlc-theme .floating-export{
  padding:11px 15px !important;
  font-size:10px !important;
}

/* ===== Improve chart/event split on wide screens ===== */
@media(min-width:1400px){
  body.img-cwlc-theme .dashboard-lower{
    grid-template-columns:minmax(0,2.5fr) minmax(330px,1fr) !important;
  }
}

/* ===== Tablet ===== */
@media(max-width:1200px){
  body.img-cwlc-theme .app-shell{
    grid-template-columns:205px minmax(0,1fr) !important;
  }
}

/* ===== Mobile remains compact ===== */
@media(max-width:900px){
  body.img-cwlc-theme .img-cwlc-hero,
  body.img-cwlc-theme .img-cwlc-hero-inner{
    min-height:132px !important;
  }
  body.img-cwlc-theme .img-cwlc-hero h1{font-size:31px !important}
  body.img-cwlc-theme .img-cwlc-hero p{font-size:10px !important}
}