/* iot.css - fixes for header casing and gauge visibility */

/* Chart boxes */
.chart-box { height: 300px; border-radius: 10px; margin-bottom: 12px; }

/* Table */
#myTable { width:100%; border-collapse: collapse; margin-top:8px; font-family: inherit; }
#myTable thead tr.header th, #myTable thead tr.header td {
  background:#3d5a80; color:#fff; font-weight:700; text-transform:none; font-variant: normal; letter-spacing: normal;
}
#myTable thead tr.header th { padding:10px 8px; text-align:left; }
#myTable td { padding:8px; border:1px solid #ddd; font-size:13px; vertical-align:middle; }
#myTable tr:hover {
  background-color: #2caffe;
}
#myTable tr.header {
    background-color: #3d5a80;
    font-weight: bold;
    font-size: 14px;
}
#myTable tr {
    border: 1px solid #ddd;
    font-size: 12px;
    padding: 8px;
}
#myTable td:first-child { 
    border-left-style: solid;
    border-top-left-radius: 10px; 
    border-bottom-left-radius: 10px;
    
}
#myTable td:last-child { 
    border-right-style: solid;
    border-bottom-right-radius: 10px; 
    border-top-right-radius: 10px;
}

/* Card/gauge */
.cardItems { border:1px solid #ddd; padding:20px; border-radius:10px; text-align:center; background:#fff; }
.gauge-wrapper { display:flex; gap:20px; justify-content:center; align-items:flex-start; flex-wrap:wrap; margin-top:8px; }
.gauge-box { width:220px; max-width:45%; text-align:center; }
.gauge_body { width:100%; height:0; padding-bottom:48%; position:relative; border-top-left-radius:100% 200%; border-top-right-radius:100% 200%; overflow:hidden; background:#81cdc6; }
.gauge_fill { position:absolute; top:100%; background: #4CAF50; left:0; width:100%; height:100%; transform-origin:center top; transform:rotate(-90deg); transition:transform .25s ease, background .25s ease; z-index:1; }
.gauge_cover { width:70%; height:140%; background:#fff; position:absolute; border-radius:50%; top:25%; left:50%; transform:translateX(-50%); display:flex; align-items:center; justify-content:center; font-weight:700; box-shadow:0 2px 6px rgba(0,0,0,0.04); z-index:3; }
.gauge_needle { width:4px; height:50%; background:#16a34a; position:absolute; top:25%; left:50%; transform-origin:50% 100%; transform:rotate(-90deg); border-radius:2px; box-shadow:0 1px 2px rgba(0,0,0,0.2); transition:transform .25s ease; z-index:4; }
.gauge_label { margin-top:8px; font-weight:700; }

/* indicator row */
.ind-row { margin:6px 0; font-weight:600; display:flex; align-items:center; gap:8px; justify-content:flex-start; }

/* live update UI */
.iot-live-ui {
  position: fixed; bottom: 16px; right: 16px; z-index: 9999;
  background:#000; border:1px solid #ccc; padding:6px 10px; border-radius:6px; font:13px/1.4 Arial;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* small screens */
@media (max-width:767px){
  .gauge-box { width:45%; }
  .chart-box { min-height:260px; }
}