/* ================= THEME SYSTEM ================= */

/* DEFAULT = DARK */
:root,
body.theme-dark {

    --bg-main:#070b14;
    --bg-card:#0b1220;
    --bg-row:#0e1626;

    --border:#1f2a44;

    --text:#e5e7eb;
    --muted:#8b95a7;

    --green:#22c55e;
    --yellow:#f59e0b;
    --red:#ef4444;

    --sidebar-grad-1:#2f3034;
    --sidebar-grad-2:#0b1324;
}

/* LIGHT THEME */
body.theme-light {

    --bg-main:#f5f7fb;
    --bg-card:#ffffff;
    --bg-row:#f1f5f9;

    --border:#e5e7eb;

    --text:#0f172a;
    --muted:#64748b;

    --green:#16a34a;
    --yellow:#ca8a04;
    --red:#dc2626;

    --sidebar-grad-1:#ffffff;
    --sidebar-grad-2:#f1f5f9;
}

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


body{
    background: var(--bg-main);
    color: var(--text);
    font-family: Inter,system-ui;
    display:flex;
    transition: background .25s, color .25s;
}

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

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

    display: flex;
    flex-direction: column;

    background: linear-gradient(
        180deg,
        var(--sidebar-grad-1),
        var(--sidebar-grad-2)
    );

    border-right: 1px solid #1f2a44;
    padding: 18px 14px;

    backdrop-filter: blur(6px);
}

/* ===== BRAND ===== */
/* ===== BRAND — BIG LOGO ONLY ===== */

.sidebar-brand {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 12px;
    border-radius: 16px;
    background: rgb(141 161 172);
    border: 1px solid rgba(255,255,255,0.06);
}

.sidebar-brand img {
    width: 130px;
    height: 150px;
    object-fit: contain;

}
/* ===== NAV ===== */

.sidebar-nav {
    margin-top: 20px;
    flex: 1;
}

.nav-group {
    font-size: 11px;
    color: #64748b;
    letter-spacing: .5px;
    margin: 18px 12px 8px;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border-radius: 12px;
    cursor: pointer;
    color: var(--text);
    position: relative;
    transition: all .18s ease;
}

/* left active bar */
.nav-item::before {
    content: "";
    position: absolute;
    left: -6px;
    width: 4px;
    height: 0;
    border-radius: 4px;
    background: #2563eb;
    transition: .18s;
}

.nav-item:hover {
    background: rgba(255,255,255,0.06);
    transform: translateX(3px);
}

.nav-item:hover::before {
    height: 60%;
}

.nav-item.active {
    background: linear-gradient(90deg,#1d4ed8,#2563eb);
    color: white;
    box-shadow: 0 6px 18px rgba(37,99,235,.25);
}

.nav-item.active::before {
    height: 70%;
    background: #60a5fa;
}

.nav-item i {
    width: 18px;
    text-align: center;
}

/* ===== FOOTER ===== */

.sidebar-footer {
    border-top: 1px solid #1f2a44;
    padding-top: 14px;
}

.footer-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    cursor: pointer;
    color: var(--text);
    transition: .15s;
}

.footer-btn:hover {
    background: rgba(255,255,255,0.06);
}

.footer-btn.logout {
    color: var(--red);
}

.footer-btn.logout:hover {
    background: rgba(239,68,68,.18);
}

/* powered */

.powered {
    margin-top: 14px;
    text-align: center;
}

.powered small {
    display: block;
    font-size: 11px;
    color: #64748b;
    margin-bottom: 6px;
}

.powered img {
    width: 44px;
    height: 44px;
    object-fit: contain;
    opacity: .85;
}

/* ========== MAIN ========== */
.main {
    flex: 1;
    padding: 28px;
    margin-left: 260px;   /* ✅ match sidebar width */
    height: 100vh;
    overflow-y: auto;     /* ✅ main scroll only */
}

/* ========== HEADER BAR ========== */
.toolbar{
    display:flex;
    gap:14px;
    margin-bottom:20px;
}
.toolbar input,
.toolbar select{
    background:var(--bg-card);
    border:1px solid var(--border);
    color:var(--text);
    padding:10px 14px;
    border-radius:10px;
}
.toolbar button{
    margin-left:auto;
    background:#10b981;
    border:none;
    color:#022c22;
    padding:10px 16px;
    border-radius:12px;
    font-weight:600;
    cursor:pointer;
}

/* ========== TABLE ========== */
#deviceTable{
    background:var(--bg-card);
    border-radius:16px;
    border:1px solid var(--border);
    overflow:hidden;
}
.device-header,
.device-row{
    display:grid;
    grid-template-columns:2.2fr 1.2fr 1.8fr 1.6fr 1.2fr 1.2fr .6fr;
    padding:16px 20px;
    align-items:center;
}
.device-header{
    font-size:12px;
    color:var(--muted);
    background:var(--bg-row);
}
.device-row{
    border-top:1px solid var(--border);
}
.device-name{
    display:flex;
    gap:14px;
    align-items:center;
    font-weight:600;
}
.device-icon{
    width:38px;
    height:38px;
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg,#0f766e,#22c55e);
    color:white;
    font-size:16px;
}

.device-row:hover .device-icon{
    box-shadow:0 0 0 2px rgba(34,197,94,.25);
}


.status {
    padding: 4px 10px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 13px;
}

.status.online {
    color: #22c55e;
}

.status.warning {
    color: #f59e0b;
}

.status.offline {
    color: #ef4444;
}

.status.critical {
    color: #7f1d1d;
}

.ip-pill{
    background:var(--bg-row);
    padding:6px 12px;
    border-radius:999px;
}
.status{
    padding:6px 14px;
    border-radius:999px;
    font-size:13px;
    font-weight:600;
}
.online{color:var(--green);background:rgba(34,197,94,.15)}
.warning{color:var(--yellow);background:rgba(245,158,11,.15)}
.critical{color:var(--red);background:rgba(239,68,68,.15)}
.offline{color:#94a3b8;background:rgba(148,163,184,.15)}
.actions{text-align:center;font-size:22px;color:var(--muted)}




/* ===== SUMMARY CARDS ===== */
.summary-grid{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:18px;
    margin-bottom:26px;
}

.card{
    background:var(--bg-card);
    border:1px solid var(--border);
    border-radius:16px;
    padding:18px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}
.card h4{
    font-size:13px;
    color:var(--muted);
}
.card b{
    font-size:28px;
}
.card i{
    font-size:22px;
    padding:14px;
    border-radius:12px;
}

.green i{background:rgba(34,197,94,.15);color:var(--green)}
.yellow i{background:rgba(245,158,11,.15);color:var(--yellow)}
.red i{background:rgba(239,68,68,.15);color:var(--red)}
.gray i{background:rgba(148,163,184,.15);color:#94a3b8}


/* ===== OVERVIEW ===== */
.overview-card{
    background:var(--bg-card);
    border:1px solid var(--border);
    border-radius:16px;
    padding:22px;
    margin-bottom:28px;
}

.overview-content{
    display:flex;
    gap:40px;
    align-items:center;
    margin-top:14px;
}

/* Donut */
.donut{
    width:260px;
    height:260px;
    border-radius:50%;
    background:conic-gradient(
        var(--green) 0deg,
        var(--green) var(--g),
        var(--yellow) var(--g),
        var(--yellow) var(--y),
        var(--red) var(--y),
        var(--red) var(--r),
        #334155 var(--r)
    );
    position:relative;
}
.donut::after{
    content:"";
    position:absolute;
    inset:22px;
    background:var(--bg-card);
    border-radius:50%;
}

.legend div{
    display:flex;
    gap:10px;
    margin-bottom:8px;
    align-items:center;
}
.dot{
    width:10px;height:10px;border-radius:50%;
}
.dot.online{background:var(--green)}
.dot.warning{background:var(--yellow)}
.dot.critical{background:var(--red)}
.dot.offline{background:#971e1e}

/* ===== OVERVIEW ROW ===== */
.overview-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:22px;
    margin-bottom:16px;
}

/* ===== PANEL INFO ===== */
.panel-card{
    background:var(--bg-card);
    border:1px solid var(--border);
    border-radius:16px;
    padding:22px;
}

.panel-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:14px;
    margin-top:12px;
}

.info-box{
    background:var(--bg-row);
    border:1px solid var(--border);
    border-radius:14px;
    padding:14px;
}

.info-box small{
    color:var(--muted);
    font-size:12px;
}

.info-box b{
    display:block;
    margin-top:6px;
    font-size:15px;
}

.tag{
    display:inline-block;
    padding:4px 10px;
    border-radius:999px;
    font-size:12px;
    font-weight:600;
}

.tag.green{background:rgba(34,197,94,.15);color:var(--green)}
.tag.blue{background:rgba(59,130,246,.15);color:#60a5fa}
.tag.yellow{background:rgba(245,158,11,.15);color:var(--yellow)}


.location-box{
    grid-column: span 2;
    background:linear-gradient(135deg,#2e2f2f,#111313);
    padding:16px;
    border-radius:14px;
    color:#ecfeff;
}

.location-box i{
    margin-right:8px;
    color:#67e8f9;
}

.location-box small{
    display:block;
    opacity:.8;
    margin-bottom:4px;
}





.device-modal{
    position:fixed;
    inset:0;
    background:var(--bg-main);
    z-index:9999;
    display:none;
    overflow-y:auto;
}

.device-modal-content{
    max-width:1200px;
    margin:30px auto;
    background:var(--bg-card);
    border-radius:18px;
    padding:26px;
    box-shadow:0 0 0 1px #1f2a44;
}

.modal-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:20px;
}

.modal-header h2{
    margin:0;
    display:flex;
    gap:12px;
    align-items:center;
}

.close-btn{
    cursor:pointer;
    font-size:22px;
    opacity:.7;
}

.section{
    margin-top:26px;
}

.section h3{
    margin-bottom:12px;
    display:flex;
    gap:8px;
    align-items:center;
}

.detail-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
    gap:14px;
}

.detail-box{
    background:var(--bg-row);
    padding:14px;
    border-radius:14px;
}

.detail-box small{
    color:#94a3b8;
    font-size:12px;
}

.detail-box b{
    display:block;
    font-size:17px;
    margin-top:4px;
}

.raw-data{
    background:var(--bg-row);
    padding:14px;
    border-radius:12px;
    font-size:12px;
    max-height:260px;
    overflow:auto;
}


.fullscreen-bar {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:14px 18px;
    border-radius:12px;
    margin-bottom:10px;
}

.fullscreen-bar h2 {
    margin:0;
}

.fullscreen-bar button {
    background:#111827;
    color:white;
    border:none;
    padding:8px 14px;
    border-radius:8px;
    cursor:pointer;
}

/* status colors */
.fullscreen-bar.healthy  { background:#dcfce7; color:#166534; }
.fullscreen-bar.warning  { background:#fef9c3; color:#854d0e; }
.fullscreen-bar.critical { background:#fee2e2; color:#7f1d1d; }
.fullscreen-bar.offline  { background:#e5e7eb; color:#374151; }


.alert-row {
    flex-direction: column;
    align-items: stretch;
    cursor: pointer;
}

.alert-reasons {
    margin-top: 6px;
    padding-left: 42px;
}

.alert-line {
    font-size: 13px;
    margin: 2px 0;
    font-weight: 500;
}



.toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.toast {
    display: flex;
    align-items: stretch;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.12);
    margin-bottom: 12px;
    overflow: hidden;
    animation: slideIn 0.3s ease;
}

.toast-card {
    display: flex;
    width: 100%;
    max-width: 400px;
}

.toast-icon {
    width: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #fff;
}

.toast-icon.error    { background: #7f1d1d; }
.toast-icon.warning  { background: #f59e0b; }
.toast-icon.info     { background: #2563eb; }
.toast-icon.success  { background: #22c55e; }

.toast-body {
    flex: 1;
    padding: 10px 14px;
}

.toast-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.toast-title {
    font-size: 14px;
    color: #111827;
}

.toast-time {
    font-size: 11px;
    color: #6b7280;
    white-space: nowrap;
}

.toast-message {
    font-size: 13px;
    margin-top: 4px;
    color: #374151;
}

.toast-close {
    padding: 0 12px;
    display: flex;
    align-items: center;
    cursor: pointer;
    color: #9ca3af;
}

.toast-close:hover {
    color: #ef4444;
}

@keyframes slideIn {
    from { transform: translateX(30px); opacity: 0; }
    to   { transform: translateX(0); opacity: 1; }
}


/* ===============================
   TOAST HEADER COLORS (FIX)
================================ */

/* Base toast header */
.toast-header strong {
    font-weight: 700;
    font-size: 14px;
    color: #111827; /* default dark */
}

/* 🔴 Critical / Offline */
.toast.error .toast-header strong {
    color: #7f1d1d;        /* deep red */
}

/* 🟡 Warning */
.toast.warning .toast-header strong {
    color: #92400e;        /* strong amber */
}

/* 🔵 Info */
.toast.info .toast-header strong {
    color: #1e40af;
}

/* 🟢 Success */
.toast.success .toast-header strong {
    color: #065f46;
}