*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root {
  --space-1: 0.25rem;  /*  4px */
  --space-2: 0.5rem;   /*  8px */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-5: 1.25rem;  /* 20px */
  --space-6: 1.5rem;   /* 24px */
  --space-8: 2rem;     /* 32px */
  --space-10: 2.5rem;  /* 40px */
  --space-12: 3rem;    /* 48px */
}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
.app {background: #f0f2f5;font-size: 13px;color: #1e1e1e;min-height: 100vh;}
.topbar{background:#1a1f2e;padding:0 16px;height:50px;display:flex;align-items:center;justify-content:space-between}
.logo{font-size:15px;font-weight:700;color:#fff;letter-spacing:-0.3px}.logo span{color:#378ADD}
.topbar-right{display:flex;align-items:center;gap:14px}
.time-display{font-size:11px;color:#9ca3af;font-family:monospace}
.conn-indicator{display:flex;align-items:center;gap:5px;font-size:11px;color:#9ca3af}
.dot{width:7px;height:7px;border-radius:50%}.dot.ok{background:#4ade80}.dot.fail{background:#f87171}

.site-bar{
  background:#fff;
  border-bottom:1px solid #e5e7eb;
  padding:8px 16px;
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}
.site-picker{
  display:flex;
  align-items:center;
  gap:12px;
  flex:0 1 auto;
  min-width:0;
}
.site-label{
  font-size:12px;
  font-weight:500;
  color:#6b7280;
  white-space:nowrap;
  flex:0 0 auto;
}

.site-select{
  padding:6px 10px;
  border:1px solid #d1d5db;
  border-radius:6px;
  font-size:12px;
  font-weight:500;
  color:#1e1e1e;
  background:#fff;
  cursor:pointer;
  min-width:220px;
  flex:0 1 260px;
}

.site-stats{
  display:flex;
  gap:16px;
  margin-left:auto;
  flex-wrap:wrap;
}
.site-stat{font-size:11px;color:#6b7280}.site-stat span{font-weight:600;color:#1e1e1e}

.tabs{
  display:flex;
  align-items:center;
  background:#fff;
  border-bottom:1px solid #e5e7eb;
  padding:0 16px;
  gap:2px;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
}
.tab{padding:9px 16px;cursor:pointer;font-size:12px;font-weight:500;color:#6b7280;border-bottom:2px solid transparent;white-space:nowrap}
.tab:hover{color:#1e1e1e}.tab.active{color:#1a7fc1;border-bottom-color:#1a7fc1}
.tab-badge{display:inline-block;background:#fcebeb;color:#A32D2D;padding:1px 5px;border-radius:8px;font-size:10px;font-weight:700;margin-left:4px}
.tab-badge.ok{background:#eaf3de;color:#3B6D11}

.page{display:none;padding:12px}.page.active{display:block}
.main{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.card{background:#fff;border:0.5px solid #e5e7eb;border-radius:8px;padding:8px}
.card-title{font-size:11px;font-weight:600;color:#6b7280;text-transform:uppercase;letter-spacing:0.6px;margin-bottom:10px;display:flex;align-items:center;justify-content:space-between}
.card-full{grid-column:1/-1}

.grade-row{display:flex;align-items:center;gap:10px;margin-bottom:10px}.grade-row:last-child{margin-bottom:0}
.grade-name{font-size:12px;font-weight:600;width:80px;flex-shrink:0}
.grade-bar-wrap{flex:1;height:22px;background:#f0f2f5;border-radius:4px;overflow:hidden}
.grade-bar{height:100%;border-radius:4px;display:flex;align-items:center;padding-left:8px;font-size:11px;font-weight:600;color:#fff;min-width: 30px;}
.grade-bar.grey-bar{color:#444}
.grade-meta{font-size:11px;color:#6b7280;width:110px;text-align:right;flex-shrink:0}
.grade-meta span{font-weight:600;color:#1e1e1e}

.totals-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:10px}
.total-chip{background:#fff;border:0.5px solid #e5e7eb;border-radius:6px;padding:8px 10px;display:flex;align-items:center;gap:8px}
.total-swatch{width:10px;height:32px;border-radius:3px;flex-shrink:0}
.total-label{font-size:10px;color:#6b7280}
.total-val{font-size:15px;font-weight:700;color:#1e1e1e;line-height:1.2}
.total-sub{font-size:10px;color:#9ca3af}

.alarm-list{display:flex;flex-direction:column;gap:6px;min-height:40px}
.alarm-item{display:flex;align-items:flex-start;padding:7px 9px;border-radius:0;font-size:12px;margin-bottom:5px}
.alarm-item.critical{background:#fcebeb;border-left:3px solid #e24b4a;border-radius:0 4px 4px 0}
.alarm-item.warning{background:#faeeda;border-left:3px solid #ef9f27;border-radius:0 4px 4px 0}
.alarm-item.info{background:#e6f1fb;border-left:3px solid #378ADD;border-radius:0 4px 4px 0}
.alarm-body{flex:1}
.alarm-site{font-weight:600;color:#1e1e1e}.alarm-msg{color:#6b7280;font-size:11px;margin-top:1px}
.alarm-time{font-size:10px;color:#9ca3af;white-space:nowrap;margin-left:6px;margin-top:2px}
.alarm-badge{display:inline-block;padding:1px 6px;border-radius:10px;font-size:10px;font-weight:600;margin-right:4px}
.alarm-badge.critical{background:#f87171;color:#fff}
.alarm-badge.warning{background:#f59e0b;color:#fff}
.alarm-badge.info{background:#378ADD;color:#fff}

.card-full{
  min-width:0;
}

.main > .card{
  min-width:0;
}

.comms-scroll{
  width:100%;
  max-width:100%;
  min-width:0;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  padding-bottom:15px;
}

.comms-grid{
  display:grid;
  grid-template-rows:repeat(2, minmax(84px, auto));
  grid-auto-flow:column;
  grid-auto-columns:200px;
  gap:10px;
  width:max-content;
  min-width:max-content;
}

.comm-card{
  background:#f8fafc;
  border:0.5px solid #e5e7eb;
  border-radius:6px;
  padding:12px 10px;
  text-align:center;
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-height:84px;
}

.comm-site{
  font-size:10px;
  color:#6b7280;
  margin-bottom:4px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.comm-status{
  font-size:10px;
  font-weight:600;
  margin-top:2px;
}

.comm-status.ok{color:#3B6D11}
.comm-status.fail{color:#A32D2D}
.comm-status.slow{color:#854F0B}
.comm-status.partial{color:#854F0B}

.comm-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  margin:0 auto 6px;
}

.comm-dot.ok{background:#4ade80}
.comm-dot.fail{background:#f87171}
.comm-dot.slow{background:#f59e0b}
.comm-dot.partial{background:#f59e0b}

.tbl{width:100%;border-collapse:collapse}
.tbl th{font-size:10px;font-weight:600;color:#6b7280;text-transform:uppercase;letter-spacing:0.4px;padding:6px 10px;border-bottom:1px solid #e5e7eb;text-align:left;background:#f8fafc}
.tbl td{font-size:12px;padding:8px 10px;border-bottom:0.5px solid #f0f2f5;vertical-align:middle}
.tbl td:last-child td{background: #f8fafc;}
.tbl tr:hover td{background:#f8fafc}

.grade-pill{display:inline-block;padding:2px 7px;border-radius:10px;font-size:10px;font-weight:600}
.grade-pill.unleaded{background:#d1fae5;color:#065f46}
.grade-pill.diesel{background:#fef9c3;color:#854d0e;border:0.5px solid #fde047}
.grade-pill.kero{background:#fee2e2;color:#991b1b}
.grade-pill.hvo{background:#f1f1ee;color:#3d3d3a;border:0.5px solid #d1d0c7}

.empty-state{text-align:center;padding:24px;color:#9ca3af;font-size:12px}
.gauge-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
.gauge-sum-card{border-radius:8px;padding:14px;display:flex;align-items:center;gap:12px}
.gauge-sum-card.water{background:#faeeda;border:1px solid #fcd34d}
.gauge-sum-card.overfill{background:#fcebeb;border:1px solid #fca5a5}
.gauge-sum-card.probe{background:#ede9fe;border:1px solid #c4b5fd}
.gauge-sum-label{font-size:11px;font-weight:600;color:#6b7280;margin-bottom:2px}
.gauge-sum-val{font-size:22px;font-weight:700}
.gauge-sum-val.water{color:#854F0B}.gauge-sum-val.overfill{color:#A32D2D}.gauge-sum-val.probe{color:#5b21b6}
.gauge-sum-sub{font-size:10px;color:#9ca3af}

.alarm-type-pill{display:inline-block;padding:3px 9px;border-radius:20px;font-size:10px;font-weight:700}
.alarm-type-pill.HIGH_WATER{background:#faeeda;color:#854F0B;border:0.5px solid #fcd34d}
.alarm-type-pill.OVERFILL{background:#fcebeb;color:#A32D2D;border:0.5px solid #fca5a5}
.alarm-type-pill.LOW_PRODUCT{background: #e9f7fe;color: #2155b6;border:0.5px solid #b5c6fd}
.alarm-type-pill.INVALID_FUEL_LEVEL{background: #e9f7fe;color: #2155b6;border:0.5px solid #b5c6fd}
.alarm-type-pill.PROBE_OUT{background:#ede9fe;color:#5b21b6;border:0.5px solid #c4b5fd}
.alarm-type-pill.DELIVERY_NEEDED{background:#fcebeb;color:#A32D2D;border:0.5px solid #fca5a5}
.alarm-type-pill.MAXIMUM_PRODUCT{background:#fcebeb;color:#A32D2D;border:0.5px solid #fca5a5}
.sev-dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:5px;vertical-align:middle}
.sev-dot.critical{background:#ef4444}.sev-dot.warning{background:#f59e0b}.sev-dot.active{background:#8b5cf6}
.ack-btn{padding:3px 9px;font-size:11px;background:#fff;border:0.5px solid #e5e7eb;border-radius:5px;cursor:pointer;color:#6b7280}

.ack-btn:hover{background:#eaf3de;color:#3B6D11;border-color:#c0dd97}
.gauge-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.gauge-mini{border-radius:6px;padding:8px 10px;display:flex;align-items:center;gap:8px}
.gauge-mini.water{background:#faeeda;border:0.5px solid #fcd34d}
.gauge-mini.overfill{background:#fcebeb;border:0.5px solid #fca5a5}
.gauge-mini.probe{background:#ede9fe;border:0.5px solid #c4b5fd}
.gauge-mini-label{font-size:10px;color:#6b7280;font-weight:600}
.gauge-mini-val{font-size:18px;font-weight:700}
.gauge-mini-val.water{color:#854F0B}.gauge-mini-val.overfill{color:#A32D2D}.gauge-mini-val.probe{color:#5b21b6}
.gauge-mini-sub{font-size:10px;color:#9ca3af}

.table-scroll{
  width:100%;
  max-width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
}

.table-scroll .tbl{
  min-width:760px;
}

/* Filter bar */
.filter-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom: 10px}
.filter-bar select{padding:6px 10px;border:1px solid #d1d5db;border-radius:6px;font-size:12px;background:#fff;color:#1e1e1e;cursor:pointer}
.filter-bar label{font-size:12px;color:#6b7280;font-weight:500}
.result-count{font-size:11px;color:#6b7280;margin-left:auto}

.filter-and-pagination{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}

.pagination-bar{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom: 10px;
}

.page-btn{
  padding:6px 12px;              /* 6px vertical to match selects */
  font-size:12px;
  background:#fff;
  border:1px solid #d1d5db;      /* same border thickness/color */
  border-radius:6px;             /* same radius */
  cursor:pointer;
  color:#1e1e1e;
}

/* Export button */
.export-btn{display:flex;align-items:center;gap:6px;padding:6px 12px;background:#1a7fc1;color:#fff;border:none;border-radius:6px;font-size:12px;font-weight:500;cursor:pointer}
.export-btn:hover{background:#185FA5}
.export-btn svg{width:14px;height:14px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

@media (max-width: 1025px) and (orientation: landscape) {
  .filter-and-pagination{
    align-items:flex-end;
  }

  .filter-bar{
    flex:1 1 100%;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px;
  }

  .filter-bar::after{
    content:"";
    flex-basis:100%;
    order:2;
  }

  label[for="gauge-status-filter"]{
    order:3;
    white-space:nowrap;
    flex:0 0 auto;
  }

  #gauge-status-filter{
    order:4;
    flex:0 0 auto;
    width:auto;
    min-width:170px;
  }

  .pagination-bar{
    flex:0 0 auto;
    margin-left:auto;
  }
}

@media (max-width: 950px) and (orientation: landscape) {
  .main {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 855px) and (orientation: portrait) {
  .main {
    grid-template-columns: 1fr;
  }

  .filter-and-pagination{
    align-items:flex-end;
  }

  .filter-bar{
    flex:1 1 100%;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px;
  }

  .filter-bar::after{
    content:"";
    flex-basis:100%;
    order:2;
  }

  label[for="gauge-status-filter"]{
    order:3;
    white-space:nowrap;
    flex:0 0 auto;
  }

  #gauge-status-filter{
    order:4;
    flex:0 0 auto;
    width:auto;
    min-width:170px;
  }

  .pagination-bar {
    flex:0 0 auto;
  }
}

@media (max-width: 763px) and (orientation: portrait) {
  .filter-and-pagination{
    display:flex;
    flex-wrap:wrap;
    align-items:flex-start;
    gap:12px;
  }

  .filter-bar{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px;
    flex:1 1 100%;
    min-width:0;
  }

  /* First row break after site filter */
  #gauge-site-filter{
    margin-right:12px;
  }

  /* Make Status sit after Type on the same row */
  label[for="gauge-type-filter"],
  #gauge-type-filter,
  label[for="gauge-status-filter"],
  #gauge-status-filter{
    order:2;
    flex:0 0 auto;
    white-space:nowrap;
  }

  label[for="gauge-site-filter"],
  #gauge-site-filter{
    order:1;
    flex:0 0 auto;
    white-space:nowrap;
  }

  /* Force pagination onto next row */
  .pagination-bar{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:8px;
    flex:0 0 100%;
    width:100%;
  }

  .result-count{
    margin-left:0;
  }
}

@media (max-width: 570px) and (orientation: portrait) {
  .main {
    grid-template-columns: 1fr;
  }

  .site-picker{
    width:100%;
    flex:1 1 100%;
  }

  .site-select{
    flex:1 1 auto;
    width:100%;
  }

  .site-stats{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:clamp(30px, 2vw, 70px);
    margin-left:0;
    align-items:center;
  }

  .site-stat{
    font-size:11px;
    color:#6b7280;
    min-width:0;
    white-space:nowrap;
    text-align:center;
  }
}

@media (max-width: 464px) and (orientation: portrait) {
  .totals-strip {
    grid-template-columns: repeat(2, 1fr);
  }
  .inventory-title {
    width: 50%;
  }
}