/* TEST PRO THEME */

/* ===== DEVICES PROFESSIONAL UI ===== */

html,body{
background:#08111c!important;
}

.page{
max-width:1400px!important;
padding:16px!important;
}

.devices-grid{
gap:18px!important;
}

.device-card{
background:linear-gradient(180deg,#101b2d,#18253a)!important;
border:1px solid rgba(255,255,255,.07)!important;
border-radius:26px!important;
box-shadow:0 16px 45px rgba(0,0,0,.38)!important;
overflow:hidden!important;
transition:.22s!important;
}

.device-card:hover{
transform:translateY(-4px)!important;
box-shadow:0 20px 50px rgba(0,0,0,.45)!important;
}

.device-img-wrap{
background:
radial-gradient(circle at top right,rgba(37,99,235,.24),transparent 40%),
linear-gradient(180deg,#132035,#1a2942)!important;
height:170px!important;
}

.device-img{
height:150px!important;
filter:drop-shadow(0 12px 22px rgba(0,0,0,.45))!important;
}

.card-body{
padding:14px!important;
}

.device-name{
font-size:17px!important;
font-weight:900!important;
color:#f8fafc!important;
}

.device-meta{
color:#9fb0d1!important;
font-size:13px!important;
}

.badge{
background:rgba(34,197,94,.14)!important;
color:#4ade80!important;
border:1px solid rgba(34,197,94,.28)!important;
padding:6px 10px!important;
font-size:11px!important;
}

.badge.off{
background:rgba(148,163,184,.12)!important;
color:#cbd5e1!important;
border:1px solid rgba(148,163,184,.22)!important;
}

.relay{
background:rgba(37,99,235,.16)!important;
color:#93c5fd!important;
border:1px solid rgba(37,99,235,.22)!important;
padding:6px 10px!important;
font-size:11px!important;
}

.app-header,
.top-banner{
background:rgba(8,17,28,.92)!important;
backdrop-filter:blur(14px)!important;
border-bottom:1px solid rgba(255,255,255,.06)!important;
box-shadow:0 8px 28px rgba(0,0,0,.35)!important;
}

.menu-panel{
background:#111c2e!important;
border:1px solid rgba(255,255,255,.06)!important;
}

.menu-panel a{
background:#18253a!important;
color:#e2e8f0!important;
border:1px solid rgba(255,255,255,.05)!important;
}

.menu-btn{
background:linear-gradient(135deg,#2563eb,#1d4ed8)!important;
box-shadow:0 10px 22px rgba(37,99,235,.35)!important;
}


/* ===== COMPACT PRO FIX ===== */
.page{
    max-width:1100px!important;
    padding:10px!important;
}

.devices-grid{
    gap:10px!important;
}

.device-card{
    border-radius:18px!important;
}

.device-img-wrap{
    height:105px!important;
    padding:4px!important;
}

.device-img{
    height:96px!important;
}

.card-body{
    padding:8px!important;
}

.device-name{
    font-size:14px!important;
}

.device-meta{
    font-size:11px!important;
}

.badge,
.relay{
    padding:4px 7px!important;
    font-size:10px!important;
}

.top-banner{
    max-height:72px!important;
    overflow:hidden!important;
}

.top-banner img{
    max-height:72px!important;
    object-fit:cover!important;
}

.card,
.relay,
.meteo-sensor-card,
.wbox{
    border-radius:16px!important;
    padding:10px!important;
}

@media(min-width:760px){
    .devices-grid{
        grid-template-columns:repeat(4,minmax(0,1fr))!important;
    }
}

/* DEVICE CONTROL COMPACT */
.meteo-sensor-grid{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:8px!important;
}

.meteo-sensor-card{
    min-height:64px!important;
    padding:8px!important;
}

.meteo-sensor-card .ico{
    font-size:18px!important;
}

.meteo-sensor-card .val{
    font-size:17px!important;
    font-weight:900!important;
}

.meteo-sensor-card .lbl{
    font-size:10px!important;
}

.card{
    margin-bottom:10px!important;
}

.section-title{
    margin-bottom:8px!important;
    font-size:15px!important;
}

@media(max-width:700px){
    .meteo-sensor-grid{
        grid-template-columns:repeat(2,minmax(0,1fr))!important;
    }
}

/* sakrij višak meteo parametara na mobilnom/pro compact prikazu */
#miTemp ~ .meteo-sensor-card,
.meteo-sensor-grid .meteo-sensor-card:nth-child(n+5){
    display:none!important;
}