/* =========================
   GLOBAL
========================= */

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{
background:#f1f5f9;
font-family:Arial,sans-serif;
color:#0f172a;
}

/* =========================
   SIDEBAR
========================= */

.sidebar{
position:fixed;
left:0;
top:0;
width:260px;
height:100vh;

background:#0f172a;

padding:25px 20px;

z-index:999;
}

.sidebar-header{
margin-bottom:40px;
}

.sidebar-header h2{
color:white;
font-size:22px;
margin-bottom:5px;
}

.sidebar-header span{
color:#94a3b8;
font-size:13px;
}

.sidebar-menu{
list-style:none;
}

.sidebar-menu li{
margin-bottom:10px;
}

.sidebar-menu a{
display:block;

padding:14px 16px;

border-radius:10px;

text-decoration:none;

color:#cbd5e1;

transition:.25s;
}

.sidebar-menu a:hover{
background:#1e293b;
color:white;
}

/* =========================
   MAIN CONTENT
========================= */

.main-content{
margin-left:260px;
padding:30px;
}

/* =========================
   HEADER
========================= */

.dashboard-header{
background:white;

padding:30px;

border-radius:20px;

box-shadow:
0 8px 25px rgba(0,0,0,.05);

margin-bottom:25px;
}

.dashboard-header h1{
font-size:32px;
margin-bottom:10px;
}

.dashboard-header p{
color:#64748b;
}

/* =========================
   KPI CARD
========================= */

.card-container{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(240px,1fr));

gap:20px;

margin-bottom:25px;
}

.card{

background:white;

border-radius:18px;

padding:25px;

box-shadow:
0 8px 25px rgba(0,0,0,.05);

transition:.25s;
}

.card:hover{
transform:translateY(-3px);
}

.card h2{

font-size:14px;

text-transform:uppercase;

letter-spacing:1px;

color:#64748b;

margin-bottom:15px;
}

.card p{

font-size:30px;

font-weight:bold;

color:#0f172a;
}

/* =========================
   STATUS
========================= */

.status-normal{
color:#16a34a;
font-weight:bold;
}

.status-danger{
color:#dc2626;
font-weight:bold;
}

/* =========================
   SECTION
========================= */

.section-card{
margin-bottom:25px;
}
#chart-section .card{
padding:35px;
}
.section-card h2{
margin-bottom:20px;
}

/* =========================
   DEVICE STATUS
========================= */

.device-grid{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(220px,1fr));

gap:20px;
}

.device-item{

background:#f8fafc;

padding:20px;

border-radius:14px;
}

.device-item span{

display:block;

color:#64748b;

margin-bottom:8px;
}

.device-item strong{
font-size:22px;
}

/* =========================
   BIG VALUE
========================= */

.big-value{

font-size:50px;

font-weight:bold;

color:#2563eb;

text-align:center;

padding:30px 0;
}

/* =========================
   CHART
========================= */

#energyChart{

width:100% !important;

height:520px !important;
}

/* =========================
   TABLE
========================= */

table{

width:100%;

border-collapse:collapse;
}

thead{

background:#0f172a;

color:white;
}

th,
td{

padding:14px;

text-align:center;

border:1px solid #e2e8f0;
}

tbody tr:nth-child(even){
background:#f8fafc;
}

tbody tr:hover{
background:#e2e8f0;
}

/* =========================
   SCROLLBAR
========================= */

::-webkit-scrollbar{
width:8px;
}

::-webkit-scrollbar-thumb{
background:#94a3b8;
border-radius:20px;
}

/* =========================
   MOBILE
========================= */

@media(max-width:992px){

.sidebar{

width:100%;

height:auto;

position:relative;
}

.main-content{

margin-left:0;
}

.sidebar-menu{

display:flex;

flex-wrap:wrap;

gap:10px;
}

.sidebar-menu li{
margin:0;
}
}

@media(max-width:768px){

.card-container{
grid-template-columns:1fr;
}

.big-value{
font-size:36px;
}

.dashboard-header h1{
font-size:24px;
}
}
/* =========================
   KPI CARD PRO
========================= */

.kpi-card{
position:relative;
overflow:hidden;
}

.kpi-header{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:15px;
}

.kpi-title{

font-size:13px;

font-weight:600;

letter-spacing:1px;

text-transform:uppercase;

color:#64748b;
}

.kpi-icon{

font-size:24px;

opacity:.8;
}

.kpi-card::before{

content:"";

position:absolute;

top:0;
left:0;

width:100%;
height:4px;

background:#2563eb;
}

.prediction-card::before{
background:#7c3aed;
}

.cost-card::before{
background:#16a34a;
}
/* =========================
   COST PANEL
========================= */

.cost-panel{

background:
linear-gradient(
135deg,
#0f172a,
#1e293b
);

color:white;
}

.cost-panel h2{

color:white;

margin-bottom:25px;
}

.cost-grid{

display:grid;

grid-template-columns:
repeat(
auto-fit,
minmax(250px,1fr)
);

gap:20px;
}

.cost-box{

background:
rgba(
255,
255,
255,
0.06
);

padding:28px;

border-radius:18px;
}

.cost-box span{

display:block;

opacity:.7;

margin-bottom:12px;
}

.cost-box strong{

font-size:32px;

display:block;
}
/* =========================
   HISTORY TABLE
========================= */

.history-wrapper{

overflow:auto;

border-radius:18px;

background:white;
}

#historyTable{

width:100%;

border-collapse:collapse;

min-width:900px;
}

#historyTable thead{

position:sticky;

top:0;

z-index:20;

background:#0f172a;
}

#historyTable th{

padding:20px;

color:white;

font-size:13px;

text-transform:uppercase;

letter-spacing:1px;

border:none;
}

#historyTable td{

padding:18px;

border-bottom:

1px solid

#e2e8f0;

font-weight:600;
}

#historyTable tbody tr{

transition:.25s;
}

#historyTable tbody tr:hover{

background:#f8fafc;

transform:scale(.998);
}

.table-number{

width:34px;

height:34px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

background:#2563eb;

color:white;

font-size:14px;
}

#historyTable span{

font-size:12px;

opacity:.5;

margin-left:4px;
}

/* STATUS */

.status-badge{

display:inline-block;

padding:

8px 14px;

border-radius:30px;

font-size:12px;

font-weight:bold;
}

.status-badge.ok{

background:
rgba(
22,
163,
74,
0.12
);

color:#16a34a;
}

.status-badge.danger{

background:
rgba(
220,
38,
38,
0.12
);

color:#dc2626;
}
/* =========================
   CHART HEADER
========================= */

.chart-header{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:25px;
}

.live-status{

display:flex;

align-items:center;

gap:10px;

font-weight:bold;

color:#16a34a;
}

.live-dot{

width:12px;

height:12px;

border-radius:50%;

background:#16a34a;

animation:pulse 1.4s infinite;
}

@keyframes pulse{

0%{

transform:scale(.8);

opacity:.6;

}

50%{

transform:scale(1.2);

opacity:1;

}

100%{

transform:scale(.8);

opacity:.6;

}

}
/* =========================
   CHART FIX
========================= */

.chart-card{

padding:30px;
}

.chart-wrapper{

height:420px;

padding:20px;

background:

linear-gradient(
180deg,
white,
#f8fafc
);

border-radius:18px;

}

#energyChart{

display:block;

width:100%!important;

height:100%!important;
}
/* =========================
   LAST UPDATE
========================= */

.header-top{

display:flex;

justify-content:space-between;

align-items:center;

gap:20px;
}

/* =========================
   DIGITAL CLOCK
========================= */

.clock-panel{

width:230px;

padding:18px;

background:
linear-gradient(
135deg,
#081224,
#16233d
);

border-radius:18px;

text-align:center;

color:white;

box-shadow:
0 10px 25px rgba(0,0,0,.08);
}

#clock-time{

font-size:30px;

font-weight:700;

letter-spacing:1px;

margin-bottom:8px;

font-family:
monospace;
}

#clock-date{

font-size:13px;

opacity:.85;
}

@media(max-width:768px){

.clock-panel{

width:100%;
}

#clock-time{

font-size:32px;
}

}

/* MOBILE */

@media(max-width:768px){

.header-top{

flex-direction:column;

align-items:flex-start;
}

.update-panel{

width:100%;
}

}

.print-btn{

background:#2563eb;

color:white;

border:none;

padding:12px 18px;

border-radius:10px;

cursor:pointer;

font-weight:600;

}

.print-btn:hover{

background:#1d4ed8;

}