:root{
  --ink:#edf5ff;
  --muted:#8ea4bb;
  --bg:#07111f;
  --panel:#0d1b2c;
  --panel2:#11243a;
  --line:#1c3652;
  --green:#36d689;
  --amber:#ffb84d;
  --red:#ff5f68;
  --blue:#2da8ff;
  --cyan:#33d6e8;
  --shadow:0 20px 55px #02071180;
}
.public-demo #login-view{display:none!important}
*{scrollbar-color:#285071 #081523}
body{background:linear-gradient(145deg,#07111f 0%,#0a1726 58%,#07101b 100%);color:var(--ink)}
.login-shell{background:radial-gradient(circle at 18% 15%,#123553 0,transparent 34%),linear-gradient(145deg,#07111f,#081927)}
.login-logo{width:min(380px,100%);height:auto;object-fit:contain;filter:drop-shadow(0 10px 24px #0008)}
.login-card{background:#0c1c2cef;border-color:#244762;border-radius:14px}
.login-card input{background:#081725;border-color:#2a4c67;color:#edf5ff}
.login-card button{background:linear-gradient(90deg,#20b8df,#36d689);color:#041521}
.app-shell{grid-template-columns:248px 1fr}
.sidebar{
  background:linear-gradient(180deg,#0a213a 0%,#08192b 64%,#071421 100%);
  border-right:1px solid #22415e;
  padding:20px 16px;
  box-shadow:10px 0 35px #02081445;
}
.sidebar-brand{
  justify-content:center;
  margin:0 6px 30px;
  padding:2px 0 18px;
  border-bottom:1px solid #21415e;
  gap:13px;
}
.pat-logo{
  width:168px;
  height:auto;
  object-fit:contain;
  filter:drop-shadow(0 5px 12px #0008);
}
.sidebar-brand strong{font-size:1rem;letter-spacing:.01em}
.sidebar-brand span{font-size:.67rem;color:#85a2bd;text-transform:uppercase;letter-spacing:.08em}
.sidebar nav{gap:4px}
.nav-item{
  color:#92a9bf;
  border-radius:7px;
  padding:11px 12px;
  font-size:.84rem;
  border-left:3px solid transparent;
}
.nav-item:hover{background:#102d49;color:#fff}
.nav-item.active{
  background:linear-gradient(90deg,#15466d,#102d49);
  color:#fff;
  border-left-color:var(--cyan);
}
.sidebar-footer{
  background:#0d2a43;
  border:1px solid #204663;
  border-radius:8px;
  color:#a8bbcc;
}
.workspace{padding:24px 28px 34px}
.topbar{
  margin:-24px -28px 20px;
  padding:18px 28px;
  min-height:82px;
  background:#0b1a2aee;
  border-bottom:1px solid #1b3853;
  box-shadow:0 8px 30px #03091450;
}
.topbar h1{font-size:1.55rem;letter-spacing:-.02em}
.eyebrow{color:#3dc5e8;font-size:.66rem}
.icon-button,.avatar{
  background:#10263b;
  border-color:#274865;
}
.avatar{border-radius:8px;color:#dceeff}
.summary-grid{grid-template-columns:repeat(5,minmax(125px,1fr));gap:10px;margin-bottom:14px}
.summary-card{
  position:relative;
  min-height:92px;
  border-radius:9px;
  padding:14px 15px;
  background:linear-gradient(145deg,#102338,#0b1929);
  border:1px solid #203e5b;
  overflow:hidden;
}
.summary-card:before{
  content:"";
  position:absolute;
  left:0;top:0;bottom:0;width:4px;
  background:#6e8498;
}
.summary-card.normal:before{background:var(--green)}
.summary-card.warning:before{background:var(--amber)}
.summary-card.alarm:before{background:var(--red)}
.summary-card.running:before{background:var(--blue)}
.summary-card span{font-size:.67rem;letter-spacing:.08em;color:#91a8bc;font-weight:700}
.summary-card strong{font-size:1.75rem;margin-top:10px}
.content-grid{grid-template-columns:minmax(330px,.72fr) minmax(560px,1.55fr);gap:14px}
.panel{
  background:linear-gradient(155deg,#0e1e30,#0a1726);
  border:1px solid #1e3b56;
  border-radius:10px;
  box-shadow:var(--shadow);
}
.panel-header{padding:17px 18px 13px;border-bottom-color:#1a3650;background:#102338}
.panel-header h2{font-size:1rem}
.filters input,.filters select{
  border-radius:6px;
  background:#091725;
  border-color:#274660;
  padding:9px 10px;
  font-size:.76rem;
}
.filters input{width:125px}
.site-row{
  grid-template-columns:1.2fr .8fr auto;
  gap:12px;
  padding:15px 17px;
  border-bottom-color:#17324c;
  border-left:3px solid transparent;
}
.site-row .metric-small:nth-child(3){display:none}
.site-row:hover,.site-row.active{
  background:#102b44;
  border-left-color:var(--cyan);
}
.site-name strong{font-size:.88rem}
.state-badge{border-radius:5px;padding:5px 8px;background:#07131f;font-size:.61rem}
.detail-content{padding:18px}
.detail-heading{
  padding-bottom:14px;
  border-bottom:1px solid #1c3b56;
  margin-bottom:16px;
}
.detail-heading h2{font-size:1.25rem}
.detail-heading p{color:#8fa9bf}
.asset-meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:9px}
.asset-chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 8px;border-radius:5px;
  background:#102a43;border:1px solid #234761;
  color:#a8bfd2;font-size:.66rem;font-weight:700;
}
.asset-chip .live-dot{width:6px;height:6px}
.section-title{
  color:#8faabd;
  font-size:.66rem;
  margin:19px 0 9px;
  padding-left:8px;
  border-left:3px solid var(--cyan);
}
.gauge-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
}
.gauge{
  min-height:156px;
  display:grid;
  place-items:center;
  padding:12px 8px;
  border:1px solid #1e405c;
  border-radius:8px;
  background:linear-gradient(155deg,#112942,#0a1929);
}
.gauge-dial{
  --gauge-value:75%;
  width:100px;height:100px;border-radius:50%;
  display:grid;place-items:center;
  background:
    radial-gradient(circle at center,#0b1a2a 0 55%,transparent 56%),
    conic-gradient(from 225deg,var(--cyan) 0 var(--gauge-value),#1b3852 var(--gauge-value) 75%,transparent 75%);
  box-shadow:inset 0 0 18px #02101d,0 8px 24px #02091380;
}
.gauge-value{text-align:center}
.gauge-value strong{display:block;font-size:1.35rem;line-height:1}
.gauge-value small{display:block;margin-top:5px;color:#7f9ab0;font-size:.62rem}
.gauge-label{font-size:.67rem;color:#9bb2c5;text-transform:uppercase;letter-spacing:.06em}
.measurement-grid{grid-template-columns:repeat(3,1fr);gap:8px}
.measurement{
  border-radius:7px;
  background:#0e2236;
  border-color:#1e405c;
  padding:11px 12px;
}
.measurement span{color:#90a9bd}
.measurement strong{font-size:1.08rem;color:#eff7ff}
.chart{height:145px;background:#071522;border-radius:7px;border-color:#1d3b56}
.alarm-item{border-radius:6px}
.empty-state{min-height:460px}
@media(max-width:1200px){
  .content-grid{grid-template-columns:1fr}
  .gauge-grid{grid-template-columns:repeat(4,1fr)}
}
@media(max-width:800px){
  .app-shell{grid-template-columns:1fr}
  .sidebar{position:static;height:auto;flex-direction:row;align-items:center;padding:9px 13px}
  .pat-logo{width:145px;height:auto}
  .sidebar-brand{margin:0;padding:0;border:0}
  .sidebar nav{display:none}
  .workspace{padding:14px}
  .topbar{margin:-14px -14px 14px;padding:14px}
  .summary-grid{grid-template-columns:repeat(2,1fr)}
  .gauge-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:520px){
  .topbar h1{font-size:1.2rem}
  .top-actions #clock{display:none}
  .gauge-grid{grid-template-columns:repeat(2,1fr)}
  .gauge-dial{width:88px;height:88px}
  .measurement-grid{grid-template-columns:repeat(2,1fr)}
}

[hidden]{display:none!important}
.fleet-panel{min-height:560px}
.fleet-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(330px,1fr));
  gap:12px;
  padding:14px;
}
.fleet-card{
  display:block;
  padding:0;
  color:var(--ink);
  text-align:left;
  background:linear-gradient(150deg,#10263d,#0b1b2c);
  border:1px solid #21435f;
  border-radius:9px;
  overflow:hidden;
  cursor:pointer;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.fleet-card:hover,.fleet-card.selected{
  transform:translateY(-2px);
  border-color:#2b9bd0;
  box-shadow:0 13px 35px #02081380;
}
.fleet-card-head{
  min-height:68px;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:11px;
  padding:13px 14px;
  background:#102b45;
  border-bottom:1px solid #20425f;
}
.fleet-card-head strong,.fleet-card-head span{display:block}
.fleet-card-head strong{font-size:.92rem}
.fleet-card-head div>span{margin-top:4px;color:#8ca7bd;font-size:.68rem}
.traffic-light{
  width:18px;height:18px;border-radius:50%;
  background:#637486;
  border:3px solid #0b1d2e;
  box-shadow:0 0 0 1px #3d5264,0 0 13px #63748680;
}
.traffic-light.normal{background:var(--green);box-shadow:0 0 0 1px #3d5264,0 0 15px #36d689aa}
.traffic-light.warning{background:var(--amber);box-shadow:0 0 0 1px #3d5264,0 0 15px #ffb84daa}
.traffic-light.alarm{background:var(--red);box-shadow:0 0 0 1px #3d5264,0 0 15px #ff5f68aa}
.traffic-light.backup{background:var(--blue);box-shadow:0 0 0 1px #3d5264,0 0 15px #2da8ffbb}
.traffic-light.offline{background:#617283;box-shadow:0 0 0 1px #3d5264}
.state-badge.backup{color:var(--blue);border-color:var(--blue)}
.source-ande{color:var(--green)!important}
.source-generador{color:var(--blue)!important}
.source-sin_fuente{color:var(--red)!important}
.source-desconocida,.source-unknown{color:#91a8bc!important}
.fleet-card-body{
  display:grid;
  grid-template-columns:1fr 112px;
  gap:12px;
  align-items:center;
  padding:15px;
}
.fleet-metrics{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fleet-metrics span,.fleet-metrics strong{display:block}
.fleet-metrics span{font-size:.63rem;text-transform:uppercase;letter-spacing:.05em;color:#7f9bb1}
.fleet-metrics strong{margin-top:4px;font-size:.77rem;color:#eaf5ff}
.fleet-metrics div:last-child strong{font-size:.65rem;font-weight:600}
.fuel-widget{display:grid;justify-items:center;gap:7px}
.fleet-widgets{display:grid;justify-items:center;gap:12px}
.fuel-widget>span{font-size:.6rem;color:#88a3b9;text-align:center;text-transform:uppercase;letter-spacing:.04em}
.fuel-ring{
  --fuel:0%;
  width:76px;height:76px;border-radius:50%;
  display:grid;place-content:center;text-align:center;
  background:
    radial-gradient(circle,#0b1a2a 0 56%,transparent 57%),
    conic-gradient(var(--green) 0 var(--fuel),#244158 var(--fuel) 100%);
  box-shadow:inset 0 0 13px #020c15;
}
.fuel-ring.low{background:radial-gradient(circle,#0b1a2a 0 56%,transparent 57%),conic-gradient(var(--amber) 0 var(--fuel),#244158 var(--fuel) 100%)}
.fuel-ring.critical{background:radial-gradient(circle,#0b1a2a 0 56%,transparent 57%),conic-gradient(var(--red) 0 var(--fuel),#244158 var(--fuel) 100%)}
.fuel-ring.unknown{background:radial-gradient(circle,#0b1a2a 0 56%,transparent 57%),conic-gradient(#526b7e 0 8%,#244158 8% 100%)}
.fuel-ring strong{font-size:1.05rem}.fuel-ring small{font-size:.57rem;color:#91aabd}
.cold-room-summary{display:grid;justify-items:center;gap:5px;padding-top:9px;border-top:1px solid #1e405c;width:100%}
.cold-room-summary>span{font-size:.55rem;color:#8fb2c8;text-align:center;text-transform:uppercase;letter-spacing:.04em}
.cold-room-mini-ring{
  --temperature:0%;
  width:42px;height:42px;border-radius:50%;
  display:grid;place-content:center;text-align:center;
  background:
    radial-gradient(circle,#0b1a2a 0 55%,transparent 57%),
    conic-gradient(var(--cyan) 0 var(--temperature),#244158 var(--temperature) 100%);
  box-shadow:0 0 12px #33d6e835,inset 0 0 8px #020c15;
}
.cold-room-mini-ring strong{font-size:.62rem;line-height:1}
.cold-room-mini-ring small{font-size:.44rem;color:#9addeb}
.fleet-card-foot{
  display:flex;justify-content:space-between;
  padding:9px 14px;
  border-top:1px solid #1d3b56;
  color:#7f9bb1;font-size:.63rem;
  background:#0a1928;
}
.fleet-card-foot span:last-child{color:#44c7ea;font-weight:800}
.detail-full{min-height:680px}
.back-button,.detail-section-head button{
  border:0;background:transparent;color:#42c7e9;
  padding:0;font-size:.72rem;font-weight:800;cursor:pointer;
}
.detail-heading h2{margin-top:12px}
.signal-layout{
  display:grid;
  grid-template-columns:150px repeat(2,1fr);
  gap:9px;
  align-items:stretch;
}
.signal-layout .fuel-widget{
  padding:11px;border:1px solid #1e405c;border-radius:7px;background:#0e2236;
}
.cold-room-section{margin-top:18px;padding:0 14px 14px;border:1px solid #23516c;border-radius:8px;background:linear-gradient(135deg,#0d263b,#0a1b2b)}
.cold-room-section .detail-section-head{margin:0 -14px 13px;padding:12px 14px;border-bottom:1px solid #23516c}
.cold-room-section .section-title{margin:0;color:#67e8f9}
.cold-room-section .detail-section-head div>span{display:block;margin-top:5px;color:#7f9fb6;font-size:.65rem}
.cold-room-detail{display:grid;grid-template-columns:96px repeat(2,minmax(150px,1fr));gap:10px;align-items:center}
.cold-room-detail>div:not(.cold-room-detail-ring){padding:14px;border:1px solid #244966;border-radius:7px;background:#0b2033}
.cold-room-detail span,.cold-room-detail strong{display:block}
.cold-room-detail span{font-size:.63rem;color:#7f9fb6;text-transform:uppercase;letter-spacing:.05em}
.cold-room-detail strong{margin-top:7px;font-size:.92rem}
.cold-room-detail-ring{width:82px;height:82px;border-radius:50%;display:grid;place-content:center;text-align:center;background:radial-gradient(circle,#0b1a2a 0 57%,transparent 58%),conic-gradient(#67e8f9 0 72%,#244158 72% 100%);box-shadow:0 0 18px #33d6e840,inset 0 0 12px #020c15}
.cold-room-detail-ring strong{font-size:1.15rem;margin:0}
.cold-room-detail-ring small{font-size:.6rem;color:#9addeb}
.detail-section-head{display:flex;justify-content:space-between;align-items:center;margin-top:4px}
.history-panel{min-height:690px}
.history-header{align-items:flex-end}
.history-filters{display:flex;align-items:flex-end;gap:8px;flex-wrap:wrap}
.history-filters label{display:grid;gap:5px;color:#89a4ba;font-size:.63rem;text-transform:uppercase;letter-spacing:.04em}
.history-filters input,.history-filters select{
  min-width:155px;
  color:#ecf5ff;background:#081725;border:1px solid #274a66;border-radius:6px;
  padding:9px 10px;font-size:.75rem;
}
.history-filters button{
  border:1px solid #31b9de;background:#147199;color:#fff;
  border-radius:6px;padding:9px 15px;font-size:.76rem;font-weight:800;cursor:pointer;
}
.history-filters .export-button{background:#163a56;border-color:#2b6b8d}
.history-filters .export-button.secondary{background:#10283d;border-color:#36566f;color:#c7dceb}
.history-range-toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 16px 0}
.history-quick-ranges,.history-mode-actions{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.history-quick-ranges>span{margin-right:3px;color:#7896ad;font-size:.61rem;font-weight:800;letter-spacing:.09em}
.history-range-button,.history-mode-button,.history-custom-range button,.history-export-actions button{
  border:1px solid #2a506b;background:#0b1d2e;color:#b9cddd;border-radius:6px;padding:8px 12px;font-size:.72rem;font-weight:800;cursor:pointer;transition:border-color .15s,background .15s,color .15s,box-shadow .15s
}
.history-range-button:hover,.history-mode-button:hover{border-color:#35b9d8;color:#eefaff}
.history-range-button.active,.history-mode-button.active{border-color:#37c6e7;background:#113b54;color:#fff;box-shadow:inset 0 0 0 1px #37c6e722}
.history-mode-button{display:inline-flex;align-items:center;gap:7px}
.history-mode-button.live.active{border-color:#36d689;background:#103c32;color:#d8ffed;box-shadow:0 0 0 2px #36d68914}
.history-live-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#607b8e;flex:0 0 auto}
.history-mode-button.live.active .history-live-dot,#history-live-status .history-live-dot{background:#36d689;box-shadow:0 0 9px #36d689;animation:history-live-pulse 1.6s ease-in-out infinite}
@keyframes history-live-pulse{50%{opacity:.45;box-shadow:0 0 3px #36d689}}
.history-custom-range{display:flex;align-items:flex-end;gap:9px;margin:12px 16px 0;padding:12px;background:#091a2a;border:1px solid #244863;border-radius:7px}
.history-custom-range[hidden]{display:none}
.history-custom-range label{display:grid;gap:5px;color:#89a4ba;font-size:.63rem;text-transform:uppercase;letter-spacing:.04em}
.history-custom-range input{min-width:190px;color:#ecf5ff;background:#071522;border:1px solid #2a4e69;border-radius:6px;padding:9px 10px;font-size:.75rem;color-scheme:dark}
.history-custom-range button{border-color:#31b9de;background:#147199;color:#fff;padding:9px 15px}
.history-query-meta{display:flex;align-items:center;gap:12px;min-height:46px;padding:8px 16px 0;color:#8da8bd;font-size:.68rem}
.history-query-meta p{margin:0}
#history-range-description{color:#d2e4f1;font-weight:800}
#history-live-status{display:flex;align-items:center;gap:7px;color:#78d9ad}
.history-export-actions{display:flex;gap:7px;margin-left:auto}
.history-export-actions .export-button{background:#163a56;border-color:#2b6b8d;color:#fff}
.history-export-actions .export-button.secondary{background:#10283d;border-color:#36566f;color:#c7dceb}
.history-main-chart{cursor:crosshair}
.demo-mode .sidebar-footer{border-color:#26779d;background:#0c3652;color:#9ce7f5}
.history-summary{
  display:grid;grid-template-columns:repeat(6,1fr);gap:8px;
  padding:14px 16px 0;
}
.history-summary>div{
  padding:11px;background:#0c2135;border:1px solid #1d405d;border-radius:7px;
}
.history-summary span,.history-summary strong{display:block}
.history-summary span{font-size:.59rem;color:#7f9bb2;letter-spacing:.06em}
.history-summary strong{font-size:.9rem;margin-top:7px}
.history-message{grid-column:1/-1;color:#90aabd}
.history-message.error{color:var(--red)}
.history-chart-wrap{padding:14px 16px 10px}
.history-legend{display:flex;align-items:center;gap:18px;flex-wrap:wrap;min-height:24px;margin:0 4px 8px;color:#a9bfd2;font-size:.68rem;text-transform:uppercase;letter-spacing:.05em}
.history-legend span{display:inline-flex;align-items:center;gap:7px}
.history-legend i{width:20px;height:3px;border-radius:3px}
.history-main-chart{height:300px}
.history-table-wrap{margin:0 16px 16px;max-height:330px;overflow:auto;border:1px solid #1c3d59;border-radius:7px}
.history-table{width:100%;border-collapse:collapse;font-size:.72rem}
.history-table th{
  position:sticky;top:0;background:#112c45;color:#99b3c8;text-align:left;
  padding:10px;border-bottom:1px solid #28506d;
}
.history-table td{padding:9px 10px;border-bottom:1px solid #17344e;color:#dce9f4}
.history-table tr:hover td{background:#0f2941}
.admin-layout{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.admin-panel{min-height:0}
.admin-form{padding:18px;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.admin-form label{display:grid;gap:6px;color:#91a8bc;font-size:.7rem;text-transform:uppercase;letter-spacing:.05em}
.admin-form input{width:100%;background:#091725;border:1px solid #274660;border-radius:6px;color:#edf5ff;padding:10px}
.admin-form fieldset{grid-column:1/-1;border:1px solid #24445f;border-radius:7px;padding:12px}
.admin-form legend{padding:0 6px;color:#91a8bc;font-size:.7rem;text-transform:uppercase}
.admin-form button{border:0;border-radius:6px;background:linear-gradient(90deg,#1f9fc5,#36d689);color:#041521;padding:11px 16px;font-weight:800;cursor:pointer}
.admin-message{grid-column:1/-1;min-height:18px;margin:0;color:#80d8b1;font-size:.75rem;line-height:1.5}
.admin-message.error{color:#ff7a82}
.admin-message code{user-select:all;background:#07131f;border:1px solid #31536d;border-radius:4px;padding:3px 6px;color:#fff}
.site-checks{display:flex;gap:8px;flex-wrap:wrap}
.site-check{display:flex!important;grid-template-columns:none!important;align-items:center;gap:7px!important;background:#102a41;border:1px solid #294d69;border-radius:6px;padding:8px 10px;color:#dce9f4!important;text-transform:none!important;font-size:.75rem!important}
.site-check input{width:auto}
.admin-list-panel{margin-bottom:14px}
.admin-list{display:grid}
.admin-row,.admin-user-row{padding:15px 18px;border-bottom:1px solid #183650}
.admin-row{display:flex;justify-content:space-between;align-items:center;gap:16px}
.admin-row strong,.admin-row span,.admin-row small{display:block}
.admin-row span{color:#9ab0c4;font-size:.75rem;margin-top:4px}
.admin-row small{color:#66859f;font-size:.68rem;margin-top:3px}
.admin-user-heading{display:flex;justify-content:space-between;align-items:center;gap:15px}
.admin-user-heading strong{margin-right:10px}
.role-badge{display:inline-block;border:1px solid #31516b;border-radius:10px;padding:3px 7px;color:#91abc0;font-size:.6rem;text-transform:uppercase}
.role-badge.admin{color:#36d689;border-color:#267657}
.admin-row-actions{display:flex;gap:7px}
.admin-row-actions button,.danger-button{border:1px solid #31516b;border-radius:5px;background:#10263b;color:#cfe0ee;padding:7px 10px;cursor:pointer;font-size:.7rem}
.danger-button{border-color:#743b45!important;color:#ff8b92!important;background:#2a1922!important}
.user-site-assignment{display:flex;gap:8px;flex-wrap:wrap;margin-top:13px}
.admin-note{color:#7793aa;font-size:.72rem;margin:10px 0 0}
.admin-empty{padding:24px;color:#7893a9}
@media(max-width:1000px){
  .history-summary{grid-template-columns:repeat(3,1fr)}
  .history-header{align-items:flex-start;flex-direction:column}
  .history-range-toolbar{align-items:flex-start;flex-direction:column}
  .admin-layout{grid-template-columns:1fr}
}
@media(max-width:620px){
  .fleet-grid{grid-template-columns:1fr;padding:9px}
  .fleet-card-body{grid-template-columns:1fr 90px}
  .history-summary{grid-template-columns:repeat(2,1fr)}
  .history-filters{width:100%}
  .history-filters label,.history-filters input,.history-filters select{width:100%;min-width:0}
  .history-filters button{width:100%}
  .history-range-toolbar{padding:12px 12px 0}
  .history-quick-ranges,.history-mode-actions{width:100%}
  .history-quick-ranges>span{width:100%}
  .history-range-button{flex:1 1 auto}
  .history-mode-actions .history-mode-button{flex:1 1 auto;justify-content:center}
  .history-custom-range{align-items:stretch;flex-direction:column;margin:10px 12px 0}
  .history-custom-range label,.history-custom-range input,.history-custom-range button{width:100%;min-width:0}
  .history-query-meta{align-items:flex-start;flex-wrap:wrap;padding:9px 12px 0}
  .history-export-actions{width:100%;margin-left:0}
  .history-export-actions button{flex:1}
  .admin-form{grid-template-columns:1fr}
  .admin-form fieldset{grid-column:auto}
  .admin-user-heading,.admin-row{align-items:flex-start;flex-direction:column}
  .signal-layout{grid-template-columns:1fr 1fr}
  .signal-layout .fuel-widget{grid-row:span 2}
  .cold-room-detail{grid-template-columns:82px 1fr}
  .cold-room-detail>div:last-child{grid-column:1/-1}
}

/* Mobile and tablet application shell */
@media(max-width:800px){
  html,body{max-width:100%;overflow-x:hidden}
  .app-shell{display:block;min-width:0}
  .sidebar{
    position:sticky;
    top:0;
    z-index:30;
    height:auto;
    display:grid;
    grid-template-columns:1fr auto;
    align-items:center;
    gap:8px;
    padding:8px 10px 0;
    border-right:0;
    border-bottom:1px solid #22415e;
    box-shadow:0 8px 24px #020814aa;
  }
  .sidebar-brand{min-width:0;margin:0 4px;padding:0;border:0}
  .pat-logo{width:138px;height:auto}
  .sidebar-brand strong{font-size:.82rem}
  .sidebar-brand span{font-size:.55rem}
  .sidebar-footer{
    margin:0;
    padding:7px 9px;
    white-space:nowrap;
    font-size:.62rem;
  }
  .sidebar nav{
    grid-column:1/-1;
    display:flex;
    gap:5px;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scrollbar-width:none;
    padding:2px 0 8px;
  }
  .sidebar nav::-webkit-scrollbar{display:none}
  .nav-item{
    flex:0 0 auto;
    min-height:40px;
    padding:9px 11px;
    border-left:0;
    border-bottom:3px solid transparent;
    touch-action:manipulation;
  }
  .nav-item.active{border-left:0;border-bottom-color:var(--cyan)}
  .workspace{width:100%;min-width:0;padding:12px}
  .topbar{
    min-height:64px;
    gap:10px;
    margin:-12px -12px 12px;
    padding:12px;
  }
  .topbar h1{font-size:1.12rem}
  .topbar .eyebrow{font-size:.56rem;margin-bottom:5px}
  .top-actions{gap:7px}
  .icon-button,.avatar{width:38px;height:38px;flex:0 0 auto}
  .panel{border-radius:8px}
  .panel-header{padding:14px}
  .summary-grid{gap:8px}
  .summary-card{min-height:78px;padding:12px}
  .summary-card strong{font-size:1.45rem;margin-top:8px}
  .fleet-panel{min-height:0}
  .detail-content{padding:13px}
  .detail-heading{gap:12px}
  .detail-heading .state-badge{margin-top:2px}
  .asset-meta{gap:5px}
  .gauge{min-height:136px;padding:9px 5px}
  .measurement-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .measurement{min-width:0}
  .detail-section-head{gap:12px}
  .history-chart-wrap{max-width:100%;overflow-x:auto;overscroll-behavior-x:contain}
  .history-main-chart{min-width:720px}
  .history-table-wrap{max-width:calc(100vw - 54px)}
  .admin-layout{gap:10px}
}

@media(max-width:480px){
  .sidebar-footer{display:none}
  .sidebar{grid-template-columns:1fr}
  .sidebar-brand{justify-self:center}
  .sidebar nav{width:100%}
  .nav-item{font-size:.72rem}
  .summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .summary-card{min-width:0}
  .summary-card span{font-size:.58rem}
  .fleet-grid{padding:8px;gap:9px}
  .fleet-card-body{grid-template-columns:minmax(0,1fr) 78px;padding:12px;gap:8px}
  .fleet-metrics{grid-template-columns:1fr;gap:9px}
  .fleet-card-head{grid-template-columns:auto minmax(0,1fr) auto;padding:11px 10px;gap:8px}
  .fleet-card-head .state-badge{font-size:.55rem;padding:4px 5px}
  .fuel-ring{width:66px;height:66px}
  .gauge-grid{gap:7px}
  .gauge-dial{width:82px;height:82px}
  .gauge-value strong{font-size:1.1rem}
  .gauge-label{font-size:.58rem;text-align:center}
  .measurement-grid{grid-template-columns:1fr}
  .signal-layout{grid-template-columns:1fr}
  .signal-layout .fuel-widget{grid-row:auto}
  .cold-room-section{padding:0 10px 10px}
  .cold-room-section .detail-section-head{margin:0 -10px 10px;padding:10px}
  .cold-room-detail{grid-template-columns:70px minmax(0,1fr)}
  .cold-room-detail-ring{width:68px;height:68px}
  .detail-section-head{align-items:flex-start;flex-direction:column}
  .history-summary{grid-template-columns:1fr 1fr;padding:10px 10px 0}
  .history-chart-wrap{padding:10px}
  .history-table-wrap{margin:0 10px 10px;max-width:calc(100vw - 46px)}
  .admin-form{padding:13px}
}