*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:"Segoe UI",Arial,Helvetica,sans-serif;
}

:root{
    --navy:#101a35;
    --navy-light:#182544;
    --bg:#eef3f9;
    --card:#ffffff;
    --text:#172033;
    --muted:#7b8496;
    --purple:#6d5dfc;
    --purple-dark:#5545e8;
    --blue:#2563eb;
    --border:#e5eaf2;
}

body{
    background:var(--bg);
    color:var(--text);
}

.layout{
    display:flex;
    min-height:100vh;
}


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

.sidebar{
    width:260px;
    min-height:100vh;
    background:var(--navy);
    padding:28px 18px;
    display:flex;
    flex-direction:column;
    box-shadow:8px 0 30px rgba(15,23,42,.10);
}

.logo{
    font-size:30px;
    font-weight:800;
    color:white;
    padding:10px 14px 30px;
    letter-spacing:.5px;
}

.tab{
    width:100%;
    border:none;
    background:transparent;
    color:#aeb9cc;
    text-align:left;
    padding:14px 16px;
    margin-bottom:6px;
    border-radius:12px;
    cursor:pointer;
    font-size:15px;
    font-weight:600;
    transition:.2s ease;
}

.tab:hover{
    background:rgba(255,255,255,.08);
    color:white;
}

.tab.active{
    background:linear-gradient(
        135deg,
        #6d5dfc,
        #5545e8
    );
    color:white;
    box-shadow:0 8px 20px rgba(109,93,252,.25);
}


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

.content{
    flex:1;
    padding:32px 38px;
    overflow:auto;
    background:var(--bg);
}

.content h1{
    font-size:34px;
    margin-bottom:12px;
    color:var(--text);
}

.content h2{
    color:var(--text);
}

.page{
    display:none;
}

.page.active{
    display:block;
}


/* =========================
   SYSTEM SWITCHER
========================= */

.system-switcher{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:24px;
    padding-bottom:20px;
    border-bottom:1px solid var(--border);
}

.system-link{
    display:flex;
    align-items:center;
    gap:8px;
    padding:10px 18px;
    border-radius:12px;
    text-decoration:none;
    font-size:14px;
    font-weight:700;
    color:#64748b;
    background:white;
    border:1px solid var(--border);
    transition:.2s ease;
}

.system-link:hover{
    transform:translateY(-1px);
    box-shadow:0 8px 20px rgba(15,23,42,.08);
}

.system-link.active{
    color:white;
    border-color:transparent;
    background:linear-gradient(
        135deg,
        #6d5dfc,
        #5545e8
    );
}


/* =========================
   HERO
========================= */

.dashboard-hero{
    border-radius:22px;
    padding:30px 34px;
    margin-bottom:28px;
    color:white;
    background:linear-gradient(
        135deg,
        #6d5dfc 0%,
        #5545e8 100%
    );
    box-shadow:0 18px 40px rgba(85,69,232,.20);
}

.dashboard-hero h2{
    color:white;
    margin:0 0 8px;
    font-size:30px;
}

.dashboard-hero p{
    margin:0;
    color:rgba(255,255,255,.82);
    font-size:15px;
}


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

.section-title{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin:28px 0 16px;
}

.section-title h2{
    margin:0;
    font-size:22px;
}

.status-pill{
    padding:7px 12px;
    border-radius:999px;
    background:#ecfdf5;
    color:#059669;
    font-size:12px;
    font-weight:800;
}


/* =========================
   CARD GRID
========================= */

.card-grid{
    display:grid;
    grid-template-columns:repeat(
        auto-fit,
        minmax(250px,1fr)
    );
    gap:18px;
}

.card{
    background:var(--card);
    border:1px solid var(--border);
    border-radius:18px;
    padding:24px;
    box-shadow:0 8px 24px rgba(15,23,42,.05);
}

.card h3{
    color:var(--text);
    font-size:18px;
    margin-bottom:20px;
}

.card p{
    margin:14px 0;
    color:#5f6b7c;
    font-size:14px;
    line-height:1.6;
}

.card strong{
    display:block;
    color:#94a0b2;
    font-size:11px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.8px;
    margin-bottom:4px;
}


/* =========================
   BUTTONS
========================= */

.action-btn{
    width:100%;
    border:none;
    border-radius:11px;
    background:linear-gradient(
        135deg,
        #6d5dfc,
        #5545e8
    );
    color:white;
    padding:12px 14px;
    margin-top:10px;
    cursor:pointer;
    font-size:14px;
    font-weight:700;
    transition:.2s ease;
}

.action-btn:hover{
    transform:translateY(-1px);
    box-shadow:0 8px 18px rgba(85,69,232,.22);
}

.danger{
    background:linear-gradient(
        135deg,
        #ef4444,
        #dc2626
    );
}


/* =========================
   QUICK ACTIONS
========================= */

.quick-grid{
    display:grid;
    grid-template-columns:repeat(
        auto-fit,
        minmax(190px,1fr)
    );
    gap:16px;
}

.quick-link{
    display:block;
    padding:22px;
    border-radius:18px;
    background:white;
    border:1px solid var(--border);
    color:var(--text);
    text-decoration:none;
    font-size:15px;
    font-weight:750;
    box-shadow:0 8px 24px rgba(15,23,42,.04);
    transition:.2s ease;
}

.quick-link:hover{
    transform:translateY(-3px);
    box-shadow:0 16px 32px rgba(15,23,42,.09);
}

.quick-icon{
    display:block;
    font-size:27px;
    margin-bottom:12px;
}

.quick-sub{
    display:block;
    color:var(--muted);
    font-size:12px;
    font-weight:500;
    line-height:1.5;
    margin-top:6px;
}


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

@media(max-width:900px){

    .layout{
        flex-direction:column;
    }

    .sidebar{
        width:100%;
        min-height:auto;
        display:grid;
        grid-template-columns:repeat(3,1fr);
        gap:6px;
        padding:14px;
    }

    .logo{
        grid-column:1/4;
        padding:8px 10px 18px;
    }

    .tab{
        padding:11px 8px;
        text-align:center;
        font-size:12px;
        margin:0;
    }

    .content{
        padding:20px;
    }

    .dashboard-hero{
        padding:24px;
    }

    .system-switcher{
        overflow:auto;
    }

    .system-link{
        white-space:nowrap;
    }

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


/* =========================
   DASHBOARD DESKTOP ACTIONS
========================= */

.dashboard-desktop-actions{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:16px;
    margin-bottom:28px;
}

.dashboard-desktop-actions .action-btn{
    margin-top:0;
    min-height:82px;
    font-size:16px;
}

@media(max-width:1000px){
    .dashboard-desktop-actions{
        grid-template-columns:repeat(2, 1fr);
    }
}

@media(max-width:600px){
    .dashboard-desktop-actions{
        grid-template-columns:1fr;
    }
}

/* ========================================
   FRO INFORMATION AREA
======================================== */

.fro-info-grid{
    display:grid;
    grid-template-columns:minmax(300px, 0.85fr) minmax(520px, 1.5fr);
    gap:18px;
    margin-top:22px;
}

.info-card{
    background:rgba(255,255,255,.62);
    border:1px solid rgba(148,163,184,.24);
    border-radius:16px;
    padding:18px;
    box-shadow:0 10px 30px rgba(15,23,42,.08);
}

.info-card-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:16px;
}

.info-card-header h2{
    margin:0;
    font-size:19px;
}

.info-card-header a{
    color:#2563eb;
    text-decoration:none;
    font-size:14px;
    font-weight:700;
}

/* Storage */

.storage-item{
    padding:10px 0;
}

.storage-name{
    display:flex;
    justify-content:space-between;
    gap:10px;
    font-size:14px;
    font-weight:600;
    color:#1e293b;
}

.storage-bar{
    height:9px;
    margin:8px 0;
    background:#dce2ef;
    border-radius:999px;
    overflow:hidden;
}

.storage-fill{
    height:100%;
    border-radius:999px;
}

.nas-fill{
    background:#16a34a;
}

.server-fill{
    background:#2563eb;
}

.victus-fill{
    background:#475569;
}

.storage-meta{
    font-size:13px;
    color:#475569;
}

/* Transfers */

.transfer-table{
    width:100%;
}

.transfer-row{
    display:grid;
    grid-template-columns:1.05fr .65fr 1.7fr .75fr 1.25fr .55fr;
    gap:10px;
    align-items:center;
    padding:10px 8px;
    font-size:13px;
    border-bottom:1px solid rgba(148,163,184,.16);
}

.transfer-head{
    font-weight:700;
    color:#64748b;
    background:rgba(226,232,240,.45);
    border-radius:8px;
}

.transfer-upload,
.transfer-download{
    color:#2563eb;
    font-weight:700;
}

.success-tag{
    display:inline-flex;
    justify-content:center;
    align-items:center;
    width:max-content;
    padding:4px 8px;
    border-radius:7px;
    background:#dcfce7;
    color:#15803d;
    font-weight:700;
}

/* Notifications */

.system-notifications{
    margin-top:18px;
    background:#071126;
    color:#e5e7eb;
    border-radius:16px;
    padding:16px 18px;
    box-shadow:0 10px 30px rgba(15,23,42,.18);
}

.notification-header{
    padding-bottom:12px;
    border-bottom:1px solid rgba(148,163,184,.22);
}

.notification-header h2{
    margin:0;
    font-size:18px;
    color:#f8fafc;
}

.notification-item{
    display:flex;
    align-items:center;
    gap:14px;
    padding:14px 0;
    border-bottom:1px solid rgba(148,163,184,.18);
}

.notification-item:last-child{
    border-bottom:none;
}

.notification-icon{
    width:30px;
    height:30px;
    flex:0 0 30px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    font-weight:800;
}

.notification-icon.success{
    border:2px solid #22c55e;
    color:#22c55e;
}

.notification-icon.info{
    border:2px solid #38bdf8;
    color:#38bdf8;
}

.notification-content{
    flex:1;
    display:flex;
    flex-direction:column;
    gap:4px;
}

.notification-content strong{
    color:#f8fafc;
}

.notification-content span{
    color:#94a3b8;
    font-size:13px;
}

.notification-time{
    color:#94a3b8;
    font-size:13px;
    white-space:nowrap;
}

/* Responsive */

@media(max-width:1100px){

    .fro-info-grid{
        grid-template-columns:1fr;
    }

}

@media(max-width:760px){

    .transfer-row{
        grid-template-columns:1fr 1fr;
        gap:8px;
    }

    .transfer-head{
        display:none;
    }

    .notification-item{
        align-items:flex-start;
    }

    .notification-time{
        display:none;
    }

}


/* ========================================
   FRO LARGE DASHBOARD UI OVERRIDE
======================================== */

/* Main page scale */

.content{
    padding:42px 52px;
}

.sidebar{
    width:290px;
    padding:32px 20px;
}

.logo{
    font-size:36px;
    padding:12px 16px 38px;
}

.tab{
    padding:17px 18px;
    font-size:16px;
    margin-bottom:8px;
}


/* System switcher */

.system-switcher{
    gap:14px;
    margin-bottom:32px;
    padding-bottom:24px;
}

.system-link{
    padding:13px 22px;
    font-size:15px;
}


/* Hero */

.dashboard-hero{
    padding:38px 42px;
    border-radius:24px;
    margin-bottom:34px;
}

.dashboard-hero h2{
    font-size:38px;
}

.dashboard-hero p{
    font-size:17px;
}


/* Section titles */

.section-title{
    margin:34px 0 20px;
}

.section-title h2{
    font-size:26px;
}

.status-pill{
    padding:9px 15px;
    font-size:13px;
}


/* Main cards */

.card-grid{
    gap:22px;
}

.card{
    padding:30px;
    border-radius:20px;
}

.card h3{
    font-size:21px;
    margin-bottom:24px;
}

.card p{
    font-size:16px;
    margin:17px 0;
}

.card strong{
    font-size:12px;
}


/* Desktop action buttons */

.dashboard-desktop-actions{
    gap:18px;
}

.dashboard-desktop-actions .action-btn{
    min-height:96px;
    padding:18px;
    font-size:17px;
    border-radius:16px;
}


/* Quick Actions */

.quick-grid{
    gap:20px;
}

.quick-link{
    padding:28px;
    border-radius:20px;
    font-size:17px;
}

.quick-icon{
    font-size:34px;
    margin-bottom:15px;
}

.quick-sub{
    font-size:14px;
    margin-top:8px;
}


/* Information area */

.fro-info-grid{
    gap:22px;
    margin-top:28px;
}

.info-card{
    padding:24px;
    border-radius:20px;
}

.info-card-header h2{
    font-size:23px;
}

.storage-item{
    padding:14px 0;
}

.storage-name{
    font-size:16px;
}

.storage-bar{
    height:11px;
    margin:10px 0;
}

.storage-meta{
    font-size:14px;
}


/* Transfer records */

.transfer-row{
    padding:13px 10px;
    font-size:14px;
    gap:12px;
}


/* Notifications */

.system-notifications{
    margin-top:22px;
    border-radius:20px;
    padding:22px 24px;
}

.notification-header h2{
    font-size:21px;
}

.notification-item{
    padding:18px 0;
}

.notification-content strong{
    font-size:16px;
}

.notification-content span,
.notification-time{
    font-size:14px;
}


/* ========================================
   FIVE DEVICE DASHBOARD
======================================== */

.device-overview-grid{
    display:grid;
    grid-template-columns:repeat(5, minmax(190px, 1fr));
    gap:14px;
    margin-bottom:26px;
}

.device-card{
    background:#ffffff;
    border:1px solid var(--border);
    border-radius:18px;
    padding:18px;
    box-shadow:0 8px 24px rgba(15,23,42,.05);
    min-width:0;
    transition:.2s ease;
}

.device-card:hover{
    transform:translateY(-2px);
    box-shadow:0 14px 30px rgba(15,23,42,.09);
}

.device-card-header{
    display:grid;
    grid-template-columns:auto 1fr;
    gap:10px;
    align-items:center;
    position:relative;
    padding-right:54px;
    margin-bottom:18px;
}

.device-icon{
    width:42px;
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:12px;
    background:#f1f5f9;
    font-size:22px;
}

.device-card h3{
    margin:0;
    font-size:16px;
    color:var(--text);
    line-height:1.2;
}

.device-type{
    display:block;
    margin-top:3px;
    color:var(--muted);
    font-size:11px;
}

.device-status{
    position:absolute;
    top:0;
    right:0;
    padding:5px 8px;
    border-radius:999px;
    font-size:10px;
    font-weight:800;
    white-space:nowrap;
}

.device-status.online{
    background:#ecfdf5;
    color:#059669;
}

.device-status.offline{
    background:#eff6ff;
    color:#2563eb;
}

.device-info{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
    padding:12px 0;
    border-top:1px solid var(--border);
    border-bottom:1px solid var(--border);
}

.device-info div{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:8px;
}

.device-info span{
    color:#94a0b2;
    font-size:11px;
    font-weight:700;
}

.device-info strong{
    color:var(--text);
    font-size:11px;
    text-align:right;
}

/* Cached / last-known information */

.cached-info span,
.cached-info strong{
    color:#2563eb !important;
}

.device-metrics{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:14px;
}

.device-metrics span{
    display:flex;
    align-items:center;
    gap:4px;
    color:#7b8496;
    font-size:11px;
}

.device-metrics strong{
    color:var(--text);
    font-size:11px;
}

/* ========================================
   RESPONSIVE FIVE DEVICE DASHBOARD
======================================== */

@media(max-width:1500px){

    .device-overview-grid{
        grid-template-columns:repeat(3, minmax(190px, 1fr));
    }

}

@media(max-width:1050px){

    .device-overview-grid{
        grid-template-columns:repeat(2, minmax(190px, 1fr));
    }

}

@media(max-width:650px){

    .device-overview-grid{
        grid-template-columns:1fr;
    }

}

/* ========================================
   FRO SYSTEM OVERVIEW HEADER
======================================== */

.fro-overview-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    margin:8px 0 18px;
    padding:22px 24px;
    border:1px solid rgba(109,93,252,.16);
    border-radius:20px;
    background:linear-gradient(
        135deg,
        rgba(255,255,255,.96),
        rgba(247,247,255,.96)
    );
    box-shadow:0 12px 30px rgba(15,23,42,.05);
}

.fro-eyebrow{
    display:block;
    margin-bottom:6px;
    color:var(--purple);
    font-size:11px;
    font-weight:800;
    letter-spacing:1.4px;
}

.fro-overview-header h2{
    margin:0 0 6px;
    font-size:25px;
    color:var(--text);
}

.fro-overview-header p{
    margin:0;
    color:var(--muted);
    font-size:14px;
    line-height:1.5;
}

.overview-actions{
    display:flex;
    align-items:stretch;
    gap:12px;
    flex:0 0 auto;
}

.device-refresh-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-width:132px;
    padding:0 17px;
    border:1px solid rgba(79,70,229,.24);
    border-radius:16px;
    background:#ffffff;
    color:#4f46e5;
    cursor:pointer;
    font:inherit;
    font-size:13px;
    font-weight:800;
    transition:background .2s ease, box-shadow .2s ease, transform .2s ease;
}

.device-refresh-button:hover:not(:disabled){
    transform:translateY(-1px);
    background:#f8f7ff;
    box-shadow:0 8px 20px rgba(79,70,229,.12);
}

.device-refresh-button:focus-visible{
    outline:3px solid rgba(79,70,229,.28);
    outline-offset:2px;
}

.device-refresh-button:disabled{
    cursor:wait;
    opacity:.72;
}

.device-refresh-button.loading .device-refresh-icon{
    animation:device-refresh-spin .8s linear infinite;
}

@keyframes device-refresh-spin{
    to{ transform:rotate(360deg); }
}

.overview-count{
    min-width:92px;
    padding:14px 16px;
    text-align:center;
    border-radius:16px;
    color:white;
    background:linear-gradient(
        135deg,
        #2563eb,
        #6d5dfc
    );
    box-shadow:0 10px 24px rgba(79,70,229,.20);
}

.overview-count strong{
    display:block;
    font-size:28px;
    line-height:1.1;
}

.overview-count span{
    font-size:11px;
    font-weight:700;
    opacity:.9;
}

@media(max-width:700px){

    .fro-overview-header{
        align-items:flex-start;
        flex-direction:column;
        padding:20px;
    }

    .overview-actions{
        width:100%;
    }

    .device-refresh-button,
    .overview-count{
        flex:1;
    }

    .overview-count{
        min-width:100%;
    }
}

/* ========================================
   PHASE 1B FINAL DASHBOARD POLISH
======================================== */

.layout,
.content,
#dashboard{
    min-width:0;
}

.content{
    overflow-x:hidden;
}

#dashboard .section-title{
    margin:7px 0 !important;
}

#dashboard .section-title h2{
    font-size:16px !important;
}

.fro-overview-header{
    min-height:58px;
    margin:0 0 8px !important;
    padding:9px 13px !important;
    gap:16px;
}

.fro-eyebrow{
    margin-bottom:3px;
    font-size:9px;
}

.fro-overview-header h2{
    margin-bottom:3px;
    font-size:16px !important;
}

.fro-overview-header p{
    font-size:11px !important;
}

.overview-actions{
    align-items:stretch;
    min-width:224px;
    gap:8px;
}

.device-refresh-button{
    min-width:124px;
    min-height:42px;
    padding:0 13px;
    border-radius:12px;
    font-size:11px;
}

.overview-count{
    min-width:82px;
    padding:6px 10px !important;
    border-radius:12px;
}

.overview-count strong{
    font-size:19px;
}

.overview-count span{
    font-size:9px;
}

.device-overview-grid{
    gap:8px !important;
    margin-bottom:7px !important;
}

.device-overview-grid .device-card{
    height:184px !important;
    padding:10px !important;
}

.device-card-header{
    margin-bottom:6px !important;
    padding-bottom:7px;
}

.device-card h3{
    font-size:12px !important;
}

.device-type,
.device-status,
.device-info span,
.device-info strong,
.device-metrics span,
.device-metrics strong{
    font-size:9px !important;
}

.device-info{
    gap:5px !important;
    padding:6px 0 !important;
}

.device-info div{
    padding:7px 8px;
}

.device-metrics{
    gap:5px !important;
    margin-top:6px !important;
    padding-top:6px;
}

.dashboard-desktop-actions{
    grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
    gap:8px !important;
    margin-bottom:8px !important;
}

.dashboard-desktop-actions .action-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:46px !important;
    padding:8px 10px !important;
    border-radius:10px !important;
    font-size:11px !important;
}

.dashboard-desktop-actions .action-link{
    margin-top:0;
    text-decoration:none;
}

.fro-info-grid{
    grid-template-columns:minmax(280px, .78fr) minmax(0, 1.6fr) !important;
    gap:10px !important;
    margin-top:8px !important;
}

.fro-info-grid .info-card{
    height:184px;
    padding:10px 12px !important;
    overflow:hidden;
}

.info-card-header{
    margin-bottom:6px !important;
}

.info-card-header h2{
    font-size:14px !important;
}

.info-card-subtitle,
.info-card-header a{
    font-size:10px;
}

.iei-status-list,
.transfer-scroll{
    height:138px;
    max-height:138px;
}

@media(max-width:1050px){
    .dashboard-desktop-actions{
        grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    }

    .fro-info-grid{
        grid-template-columns:1fr !important;
    }

    .fro-info-grid .info-card{
        height:auto;
        min-height:184px;
    }
}

@media(max-width:700px){
    .overview-actions{
        min-width:0;
    }

    .dashboard-desktop-actions{
        grid-template-columns:1fr !important;
    }
}

/* Final effective layout overrides: keep after historical dashboard layers. */

.content{
    min-width:0;
    overflow-x:hidden;
}

#dashboard .section-title{
    margin:7px 0 !important;
}

.fro-overview-header{
    min-height:58px;
    margin:0 0 8px !important;
    padding:9px 13px !important;
    gap:16px;
}

.fro-overview-header h2{
    font-size:16px !important;
}

.fro-overview-header p{
    font-size:11px !important;
}

.overview-actions{
    align-items:stretch;
    min-width:224px;
    gap:8px;
}

.device-refresh-button{
    min-width:124px;
    min-height:42px;
    padding:0 13px;
    font-size:11px;
}

.overview-count{
    min-width:82px;
    padding:6px 10px !important;
}

.overview-count strong{
    font-size:19px;
}

.device-overview-grid{
    gap:8px !important;
    margin-bottom:7px !important;
}

.device-overview-grid .device-card{
    height:184px !important;
    padding:10px !important;
}

.device-card h3{
    font-size:12px !important;
}

.device-type,
.device-status,
.device-info span,
.device-info strong,
.device-metrics span,
.device-metrics strong{
    font-size:9px !important;
}

.dashboard-desktop-actions{
    grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
    gap:8px !important;
    margin-bottom:8px !important;
}

.dashboard-desktop-actions .action-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:46px !important;
    margin-top:0;
    padding:8px 10px !important;
    font-size:11px !important;
}

.dashboard-desktop-actions .action-link{
    text-decoration:none;
}

.fro-info-grid{
    grid-template-columns:minmax(280px, .78fr) minmax(0, 1.6fr) !important;
    gap:10px !important;
    margin-top:8px !important;
}

.fro-info-grid .info-card{
    height:184px;
    padding:10px 12px !important;
    overflow:hidden;
}

.info-card-header h2{
    font-size:14px !important;
}

.info-card-subtitle,
.info-card-header a{
    font-size:10px;
}

.iei-status-list,
.transfer-scroll{
    height:138px;
    max-height:138px;
}

@media(max-width:1050px){
    .dashboard-desktop-actions{
        grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    }

    .fro-info-grid{
        grid-template-columns:1fr !important;
    }

    .fro-info-grid .info-card{
        height:auto;
        min-height:184px;
    }
}

@media(max-width:700px){
    .overview-actions{
        min-width:0;
    }

    .dashboard-desktop-actions{
        grid-template-columns:1fr !important;
    }
}

/* ========================================
   FRO DEVICE CARDS – V2 VISUAL UPGRADE
======================================== */

.device-overview-grid{
    gap:18px;
}

.device-card{
    position:relative;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    height:285px;
    border:1px solid rgba(148,163,184,.20);
    border-radius:20px;
    background:linear-gradient(
        145deg,
        #ffffff,
        #f8f9ff
    );
    box-shadow:0 10px 28px rgba(15,23,42,.06);
    transition:
        transform .22s ease,
        box-shadow .22s ease,
        border-color .22s ease;
}

.device-card::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:4px;
    background:linear-gradient(
        90deg,
        #2563eb,
        #6d5dfc,
        #7c3aed
    );
    opacity:.85;
}

.device-card.online{
    border-color:rgba(16,185,129,.34);
    background:linear-gradient(145deg, #ffffff, #f0fdf8);
}

.device-card.online::before{
    background:#10b981;
}

.device-card.offline{
    border-color:#d7dde7;
    background:linear-gradient(145deg, #f8fafc, #eef1f5);
    box-shadow:0 8px 20px rgba(71,85,105,.07);
}

.device-card.offline::before{
    background:#94a3b8;
}

.device-card.offline .device-icon{
    background:#e2e8f0;
    filter:grayscale(1);
    opacity:.72;
}

.device-card.unknown,
.device-card.loading{
    border-color:#d8dee9;
    background:linear-gradient(145deg, #ffffff, #f8fafc);
}

.device-card.unknown::before,
.device-card.loading::before{
    background:#cbd5e1;
}

.device-card:hover{
    transform:translateY(-4px);
    border-color:rgba(109,93,252,.32);
    box-shadow:0 18px 38px rgba(79,70,229,.12);
}

.device-card-header{
    padding-bottom:14px;
    border-bottom:1px solid rgba(148,163,184,.14);
}

.device-icon{
    width:48px;
    height:48px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:15px;
    background:linear-gradient(
        135deg,
        rgba(37,99,235,.10),
        rgba(109,93,252,.14)
    );
    font-size:25px;
}

.device-card h3{
    font-size:17px;
    letter-spacing:-.2px;
}

.device-type{
    color:#7b8496;
    font-size:12px;
}

.device-status{
    font-size:11px;
    font-weight:800;
    border-radius:999px;
    padding:6px 10px;
}

.device-status.online{
    background:#ecfdf5;
    color:#059669;
}

.device-status.offline{
    background:#f8fafc;
    color:#64748b;
}

.device-status.unknown,
.device-status.loading{
    background:#f1f5f9;
    color:#64748b;
}

.device-detail-scroll{
    min-height:0;
    flex:1;
    overflow-y:auto;
    overflow-x:hidden;
    padding-right:5px;
    scrollbar-width:thin;
    scrollbar-color:#cbd5e1 transparent;
}

.device-detail-scroll:focus-visible{
    outline:2px solid var(--purple);
    outline-offset:2px;
    border-radius:10px;
}

.device-info{
    margin-top:16px;
}

.device-info div{
    border-radius:12px;
    background:rgba(241,245,249,.72);
    padding:10px 11px;
}

.device-info strong{
    margin-top:3px;
}

.device-metrics{
    margin-top:14px;
    padding-top:14px;
    border-top:1px solid rgba(148,163,184,.12);
}

.device-metrics span{
    padding:7px 9px;
    border-radius:10px;
    background:rgba(248,250,252,.85);
}

@media(max-width:700px){

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

    .device-icon{
        width:44px;
        height:44px;
        font-size:23px;
    }
}

/* ========================================
   FRO DESKTOP CONTROL – V2
======================================== */

.dashboard-desktop-actions{
    gap:16px;
    margin-bottom:30px;
}

.dashboard-desktop-actions .action-btn{
    position:relative;
    min-height:88px;
    margin-top:0;
    border:1px solid rgba(109,93,252,.12);
    border-radius:18px;
    background:linear-gradient(
        135deg,
        #2563eb,
        #4f46e5,
        #6d5dfc
    );
    box-shadow:0 10px 24px rgba(79,70,229,.14);
    font-size:15px;
    font-weight:800;
    letter-spacing:.1px;
    transition:
        transform .2s ease,
        box-shadow .2s ease,
        filter .2s ease;
}

.dashboard-desktop-actions .action-btn:hover{
    transform:translateY(-3px);
    box-shadow:0 16px 32px rgba(79,70,229,.22);
    filter:brightness(1.04);
}

.dashboard-desktop-actions .action-btn:active{
    transform:translateY(0);
}

.dashboard-desktop-actions .action-btn.danger{
    background:linear-gradient(
        135deg,
        #ef4444,
        #dc2626
    );
    box-shadow:0 10px 24px rgba(220,38,38,.14);
}

.dashboard-desktop-actions .action-btn.danger:hover{
    box-shadow:0 16px 32px rgba(220,38,38,.22);
}


/* Desktop Control title emphasis */

.section-title:has(#desktop-status-indicator){
    margin-top:30px;
    padding:18px 20px;
    border-radius:18px;
    background:linear-gradient(
        135deg,
        rgba(255,255,255,.96),
        rgba(248,250,255,.96)
    );
    border:1px solid rgba(148,163,184,.16);
}

#desktop-status-indicator{
    display:flex;
    align-items:center;
    justify-content:center;
    width:38px;
    height:38px;
    border-radius:12px;
    background:#fff7ed;
    font-size:17px;
}

@media(max-width:600px){

    .dashboard-desktop-actions .action-btn{
        min-height:72px;
    }
}

/* ========================================
   FRO QUICK ACCESS HUB – V2
======================================== */

.quick-grid{
    gap:18px;
    margin-bottom:30px;
}

.quick-link{
    position:relative;
    overflow:hidden;
    min-height:155px;
    padding:22px;
    border-radius:20px;
    border:1px solid rgba(148,163,184,.18);
    background:linear-gradient(
        145deg,
        #ffffff,
        #f8f9ff
    );
    box-shadow:0 10px 28px rgba(15,23,42,.05);
    transition:
        transform .22s ease,
        box-shadow .22s ease,
        border-color .22s ease;
}

.quick-link::after{
    content:"";
    position:absolute;
    right:-28px;
    bottom:-28px;
    width:90px;
    height:90px;
    border-radius:50%;
    background:rgba(109,93,252,.05);
}

.quick-link:hover{
    transform:translateY(-4px);
    border-color:rgba(109,93,252,.30);
    box-shadow:0 18px 38px rgba(79,70,229,.12);
}

.quick-icon{
    position:relative;
    z-index:1;
    width:52px;
    height:52px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:14px;
    border-radius:16px;
    background:linear-gradient(
        135deg,
        rgba(37,99,235,.10),
        rgba(109,93,252,.16)
    );
    font-size:27px;
}

.quick-sub{
    position:relative;
    z-index:1;
    margin-top:7px;
    font-size:12px;
    line-height:1.5;
}


/* Quick Actions section title */

.quick-grid + .fro-info-grid{
    margin-top:4px;
}

@media(max-width:600px){

    .quick-link{
        min-height:135px;
    }
}

/* ========================================
   FRO INFORMATION AREA – V2
======================================== */

.fro-info-grid{
    gap:20px;
    margin-top:8px;
}

.info-card{
    border-radius:20px;
    padding:22px;
    background:linear-gradient(
        145deg,
        #ffffff,
        #f8f9ff
    );
    border:1px solid rgba(148,163,184,.18);
    box-shadow:0 10px 28px rgba(15,23,42,.05);
}

.info-card-header{
    padding-bottom:14px;
    margin-bottom:10px;
    border-bottom:1px solid rgba(148,163,184,.14);
}

.info-card-header h2{
    font-size:19px;
    font-weight:800;
}


/* STORAGE */

.storage-item{
    padding:14px 0;
}

.storage-name{
    font-size:14px;
}

.storage-bar{
    height:10px;
    background:#e8edf5;
}

.storage-fill{
    box-shadow:0 3px 8px rgba(15,23,42,.10);
}


/* TRANSFER TABLE */

.transfer-row{
    border-radius:10px;
    transition:background .2s ease;
}

.transfer-row:not(.transfer-head):hover{
    background:rgba(109,93,252,.05);
}

.transfer-head{
    padding:11px 10px;
}


/* SYSTEM NOTIFICATIONS */

.system-notifications{
    margin-top:22px;
    border-radius:20px;
    border:1px solid rgba(109,93,252,.18);
    background:linear-gradient(
        135deg,
        #0f172a,
        #111b36
    );
    box-shadow:0 16px 38px rgba(15,23,42,.18);
}

.notification-header h2{
    font-weight:800;
}

.notification-item{
    padding:16px 0;
    transition:padding-left .2s ease;
}

.notification-item:hover{
    padding-left:6px;
}

@media(max-width:900px){

    .fro-info-grid{
        grid-template-columns:1fr;
    }
}

/* ========================================
   QINGTIAN SCREENSHOT STYLE
======================================== */
:root{
    --bg:#edf3fa;
    --card:#ffffff;
    --text:#172033;
    --muted:#7b8496;
    --border:#e5eaf2;
}

/* Compact FRO sidebar */

.sidebar{
    width:136px !important;
    min-width:136px;
    padding:20px 10px !important;
    box-shadow:8px 0 24px rgba(15,23,42,.08);
}

.logo.qingtian-sidebar-logo{
    padding:8px 0 26px !important;
    text-align:center;
}

.qingtian-sidebar-title{
    font-size:17px !important;
    letter-spacing:.06em !important;
}

.qingtian-sidebar-subtitle{
    margin-top:3px !important;
    font-size:8px !important;
    letter-spacing:.16em !important;
}

.tab{
    padding:10px 7px !important;
    margin-bottom:4px !important;
    border-radius:8px !important;
    font-size:10px !important;
    line-height:1.2;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

/* Main workspace */

.content{
    padding:22px 28px !important;
    overflow:auto;
}

/* System switcher */

.system-switcher{
    gap:6px !important;
    margin-bottom:22px !important;
    padding-bottom:0 !important;
    border-bottom:none !important;
}

.system-link{
    padding:7px 11px !important;
    border-radius:8px !important;
    font-size:10px !important;
    gap:5px !important;
}

/* Hero */

.dashboard-hero{
    padding:18px 20px !important;
    border-radius:14px !important;
    margin-bottom:18px !important;
    box-shadow:0 12px 28px rgba(85,69,232,.16);
}

.dashboard-hero h2{
    font-size:16px !important;
    margin-bottom:4px !important;
}

.dashboard-hero p{
    font-size:9px !important;
}

/* Dashboard heading */

.section-title{
    margin:14px 0 10px !important;
}

.section-title h2{
    font-size:15px !important;
}

.status-pill{
    padding:5px 9px !important;
    font-size:8px !important;
}

/* Connected Devices heading */

.fro-overview-header{
    margin:0 0 10px !important;
    padding:10px 14px !important;
    border-radius:12px !important;
    box-shadow:0 6px 18px rgba(15,23,42,.04);
}

.fro-eyebrow{
    margin-bottom:3px !important;
    font-size:7px !important;
    letter-spacing:1px !important;
}

.fro-overview-header h2{
    margin-bottom:3px !important;
    font-size:14px !important;
}

.fro-overview-header p{
    font-size:8px !important;
}

.overview-count{
    min-width:50px !important;
    padding:8px 9px !important;
    border-radius:10px !important;
}

.overview-count strong{
    font-size:17px !important;
}

.overview-count span{
    font-size:7px !important;
}

/* Five device cards */

.device-overview-grid{
    grid-template-columns:repeat(5,minmax(0,1fr)) !important;
    gap:10px !important;
    margin-bottom:14px !important;
}

.device-card{
    padding:10px !important;
    border-radius:12px !important;
    box-shadow:0 6px 18px rgba(15,23,42,.05);
}

.device-card-header{
    gap:7px !important;
    padding-right:40px !important;
    margin-bottom:9px !important;
}

.device-icon{
    width:27px !important;
    height:27px !important;
    border-radius:8px !important;
    font-size:13px !important;
}

.device-card h3{
    font-size:10px !important;
}

.device-type{
    margin-top:2px !important;
    font-size:7px !important;
}

.device-status{
    padding:3px 5px !important;
    font-size:7px !important;
}

.device-info{
    gap:5px !important;
    padding:7px 0 !important;
}

.device-info span,
.device-info strong{
    font-size:7px !important;
}

.device-metrics{
    gap:6px !important;
    margin-top:7px !important;
}

.device-metrics span,
.device-metrics strong{
    font-size:7px !important;
}

/* Desktop Control */

.dashboard-desktop-actions{
    grid-template-columns:repeat(4,1fr) !important;
    gap:9px !important;
    margin-bottom:12px !important;
}

.dashboard-desktop-actions .action-btn{
    min-height:48px !important;
    padding:9px 10px !important;
    margin-top:0 !important;
    border-radius:9px !important;
    font-size:9px !important;
}

/* Quick Actions */

.quick-grid{
    grid-template-columns:repeat(4,1fr) !important;
    gap:9px !important;
}

.quick-link{
    padding:11px !important;
    border-radius:10px !important;
    font-size:10px !important;
    min-height:72px;
}

.quick-icon{
    font-size:17px !important;
    margin-bottom:5px !important;
}

.quick-sub{
    font-size:7px !important;
    margin-top:3px !important;
}

/* Information area */

.fro-info-grid{
    grid-template-columns:minmax(280px,.85fr) minmax(450px,1.5fr) !important;
    gap:12px !important;
    margin-top:14px !important;
}

.info-card{
    padding:12px !important;
    border-radius:12px !important;
}

.info-card-header{
    margin-bottom:8px !important;
}

.info-card-header h2{
    font-size:12px !important;
}

.storage-item{
    padding:7px 0 !important;
}

.storage-name{
    font-size:8px !important;
}

.storage-bar{
    height:6px !important;
    margin:5px 0 !important;
}

.storage-meta{
    font-size:7px !important;
}

.transfer-row{
    padding:7px 6px !important;
    font-size:8px !important;
    gap:7px !important;
}

.system-notifications{
    margin-top:12px !important;
    border-radius:12px !important;
    padding:12px !important;
}

.notification-header h2{
    font-size:12px !important;
}

.notification-item{
    padding:9px 0 !important;
}

.notification-content strong{
    font-size:9px !important;
}

.notification-content span,
.notification-time{
    font-size:8px !important;
}

/* Keep five cards on desktop, progressively reduce on smaller screens */

@media(max-width:1500px){
    .device-overview-grid{
        grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    }
}

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

    .dashboard-desktop-actions,
    .quick-grid{
        grid-template-columns:repeat(2,1fr) !important;
    }
}

@media(max-width:700px){
    .sidebar{
        width:100% !important;
        min-width:0;
    }

    .content{
        padding:16px !important;
    }

    .device-overview-grid,
    .dashboard-desktop-actions,
    .quick-grid{
        grid-template-columns:1fr !important;
    }

    .fro-info-grid{
        grid-template-columns:1fr !important;
    }
}

/* ========================================
   QINGTIAN ONE-SCREEN DASHBOARD
======================================== */

/* ========================================
   QINGTIAN ONE-SCREEN DASHBOARD
======================================== */

.content{
    padding:16px 28px !important;
}

/* Top navigation */

.system-switcher{
    margin-bottom:12px !important;
}

/* Hero */

.dashboard-hero{
    padding:14px 20px !important;
    margin-bottom:10px !important;
    min-height:58px;
}

.dashboard-hero h2{
    font-size:16px !important;
    margin-bottom:3px !important;
}

.dashboard-hero p{
    font-size:8px !important;
}

/* Dashboard title */

.section-title{
    margin:8px 0 7px !important;
}

.section-title h2{
    font-size:15px !important;
}

/* Connected Devices overview */

.fro-overview-header{
    padding:8px 14px !important;
    margin-bottom:7px !important;
}

.fro-overview-header h2{
    font-size:14px !important;
}

.fro-overview-header p{
    font-size:7px !important;
}

.overview-count{
    padding:6px 9px !important;
}

/* Device cards */

.device-overview-grid{
    gap:8px !important;
    margin-bottom:8px !important;
}

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

.device-card-header{
    margin-bottom:6px !important;
}

.device-info{
    padding:5px 0 !important;
    gap:4px !important;
}

.device-metrics{
    margin-top:5px !important;
}

/* Desktop Control */

.dashboard-desktop-actions{
    gap:8px !important;
    margin-bottom:7px !important;
}

.dashboard-desktop-actions .action-btn{
    min-height:40px !important;
    padding:6px 8px !important;
    font-size:8px !important;
}

/* Quick Actions */

.quick-grid{
    gap:8px !important;
}

.quick-link{
    min-height:58px !important;
    height:58px !important;
    padding:8px 10px !important;
}

.quick-icon{
    display:inline-block !important;
    font-size:15px !important;
    margin:0 6px 0 0 !important;
}

.quick-sub{
    font-size:6px !important;
    margin-top:2px !important;
}

/* Information area */

.fro-info-grid{
    gap:10px !important;
    margin-top:9px !important;
}

.info-card{
    padding:9px 12px !important;
}

.info-card-header{
    margin-bottom:5px !important;
}

.info-card-header h2{
    font-size:11px !important;
}

.storage-item{
    padding:4px 0 !important;
}

.storage-name{
    font-size:7px !important;
}

.storage-bar{
    height:5px !important;
    margin:3px 0 !important;
}

.storage-meta{
    font-size:6px !important;
}

.transfer-row{
    padding:5px 6px !important;
    font-size:7px !important;
}

/* System notifications */

.system-notifications{
    margin-top:8px !important;
    padding:8px 12px !important;
}

.notification-header{
    padding-bottom:6px !important;
}

.notification-header h2{
    font-size:11px !important;
}

.notification-item{
    padding:6px 0 !important;
    gap:8px !important;
}

.notification-icon{
    width:22px !important;
    height:22px !important;
    flex:0 0 22px !important;
}

.notification-content{
    gap:2px !important;
}

.notification-content strong{
    font-size:8px !important;
}

.notification-content span,
.notification-time{
    font-size:7px !important;
}

/* Keep the desktop one-screen layout */

@media(min-width:1101px){
    .device-overview-grid{
        grid-template-columns:repeat(5,minmax(0,1fr)) !important;
    }

    .dashboard-desktop-actions{
        grid-template-columns:repeat(4,1fr) !important;
    }

    .quick-grid{
        grid-template-columns:repeat(4,1fr) !important;
    }

    .fro-info-grid{
        grid-template-columns:minmax(280px,.85fr) minmax(450px,1.5fr) !important;
    }
}

/* ========================================
   QINGTIAN FINAL ONE-SCREEN COMPACT
======================================== */

/* ========================================
   QINGTIAN FINAL ONE-SCREEN COMPACT
======================================== */

@media(min-width:1101px){

    /* Main workspace */
    .content{
        padding:12px 28px !important;
    }

    /* System switcher */
    .system-switcher{
        margin-bottom:9px !important;
    }

    .system-link{
        padding:6px 10px !important;
    }

    /* Hero */
    .dashboard-hero{
        height:54px !important;
        min-height:54px !important;
        padding:10px 20px !important;
        margin-bottom:8px !important;
    }

    .dashboard-hero h2{
        font-size:15px !important;
        margin-bottom:2px !important;
    }

    .dashboard-hero p{
        font-size:8px !important;
    }

    /* FRO Dashboard title */
    .section-title{
        margin:6px 0 5px !important;
    }

    .section-title h2{
        font-size:14px !important;
    }

    /* Connected Devices header */
    .fro-overview-header{
        height:58px !important;
        min-height:58px !important;
        padding:7px 14px !important;
        margin-bottom:6px !important;
    }

    .fro-eyebrow{
        font-size:6px !important;
        margin-bottom:2px !important;
    }

    .fro-overview-header h2{
        font-size:13px !important;
        margin-bottom:1px !important;
    }

    .fro-overview-header p{
        font-size:7px !important;
    }

    .overview-count{
        min-width:45px !important;
        padding:5px 8px !important;
    }

    .overview-count strong{
        font-size:16px !important;
    }

    /* Five device cards */
    .device-overview-grid{
        height:150px !important;
        min-height:150px !important;
        max-height:150px !important;
        gap:8px !important;
        margin-bottom:7px !important;
    }

    .device-card{
        height:150px !important;
        min-height:150px !important;
        max-height:150px !important;
        padding:8px !important;
        overflow:hidden !important;
        border-radius:11px !important;
    }

    .device-card-header{
        margin-bottom:5px !important;
        padding-right:36px !important;
    }

    .device-icon{
        width:25px !important;
        height:25px !important;
        font-size:12px !important;
    }

    .device-card h3{
        font-size:9px !important;
    }

    .device-type{
        font-size:6px !important;
    }

    .device-status{
        padding:2px 4px !important;
        font-size:6px !important;
    }

    .device-info{
        gap:3px !important;
        padding:5px 0 !important;
    }

    .device-info span,
    .device-info strong{
        font-size:6px !important;
    }

    .device-metrics{
        gap:5px !important;
        margin-top:4px !important;
    }

    .device-metrics span,
    .device-metrics strong{
        font-size:6px !important;
    }

    /* Desktop Control heading */
    #dashboard > .section-title{
        min-height:34px !important;
        height:34px !important;
        padding:6px 12px !important;
        margin:5px 0 5px !important;
        border-radius:10px !important;
    }

    /* Desktop buttons */
    .dashboard-desktop-actions{
        height:40px !important;
        margin-bottom:6px !important;
        gap:8px !important;
    }

    .dashboard-desktop-actions .action-btn{
        height:40px !important;
        min-height:40px !important;
        padding:5px 8px !important;
        font-size:8px !important;
    }

    /* Quick Actions */
    .quick-grid{
        height:62px !important;
        gap:8px !important;
    }

    .quick-link{
        height:62px !important;
        min-height:62px !important;
        padding:8px 10px !important;
    }

    .quick-icon{
        font-size:14px !important;
        margin-right:5px !important;
    }

    .quick-sub{
        font-size:6px !important;
    }

    /* Information area */
    .fro-info-grid{
        height:150px !important;
        min-height:150px !important;
        max-height:150px !important;
        margin-top:8px !important;
        gap:10px !important;
    }

    .fro-info-grid .info-card{
        height:150px !important;
        min-height:150px !important;
        max-height:150px !important;
        overflow:hidden !important;
        padding:9px 12px !important;
    }

    .info-card-header{
        margin-bottom:4px !important;
    }

    .info-card-header h2{
        font-size:11px !important;
    }

    .storage-item{
        padding:4px 0 !important;
    }

    .storage-name{
        font-size:7px !important;
    }

    .storage-bar{
        height:5px !important;
        margin:3px 0 !important;
    }

    .storage-meta{
        font-size:6px !important;
    }

    .transfer-row{
        padding:4px 6px !important;
        font-size:7px !important;
    }

    /* System notifications */
    .system-notifications{
        margin-top:7px !important;
        padding:7px 12px !important;
        max-height:90px !important;
        overflow:hidden !important;
    }

    .notification-header{
        padding-bottom:4px !important;
    }

    .notification-header h2{
        font-size:10px !important;
    }

    .notification-item{
        padding:5px 0 !important;
    }

    .notification-content strong{
        font-size:7px !important;
    }

    .notification-content span,
    .notification-time{
        font-size:6px !important;
    }
}

/* ========================================
   BOTTOM PANELS INTERNAL SCROLL
======================================== */


/* ========================================
   BOTTOM PANELS INTERNAL SCROLL
======================================== */

/* Keep the two bottom panels compact */
.fro-info-grid{
    align-items:stretch;
}

/* IEI Server status panel */
.iei-status-card{
    min-height:0;
}

.iei-status-list{
    height:155px;
    max-height:155px;
    overflow-y:scroll;
    overflow-x:hidden;
    padding-right:6px;
    scrollbar-width:thin;
    scrollbar-color:#94a3b8 transparent;
}

/* IEI event rows */
.iei-status-event{
    display:grid;
    grid-template-columns:24px minmax(0,1fr) auto auto;
    gap:8px;
    align-items:center;
    min-height:42px;
    padding:7px 4px;
    border-bottom:1px solid rgba(148,163,184,.16);
}

.iei-event-content{
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:2px;
}

.iei-event-content strong{
    color:var(--text);
    font-size:11px;
}

.iei-event-content span{
    color:var(--muted);
    font-size:9px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.iei-event-icon{
    width:20px;
    height:20px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    font-size:10px;
    font-weight:800;
}

.iei-event-icon.online{
    color:#059669;
    background:#ecfdf5;
}

.iei-event-icon.restart{
    color:#2563eb;
    background:#eff6ff;
}

.iei-event-icon.upgrade{
    color:#7c3aed;
    background:#f5f3ff;
}

.iei-event-icon.offline{
    color:#dc2626;
    background:#fef2f2;
}

.iei-event-time{
    color:#64748b;
    font-size:9px;
    white-space:nowrap;
}

.iei-event-tag{
    padding:3px 6px;
    border-radius:999px;
    font-size:8px;
    font-weight:800;
    white-space:nowrap;
}

.iei-event-tag.online{
    background:#ecfdf5;
    color:#059669;
}

.iei-event-tag.restart{
    background:#eff6ff;
    color:#2563eb;
}

.iei-event-tag.upgrade{
    background:#f5f3ff;
    color:#7c3aed;
}

.iei-event-tag.offline{
    background:#fef2f2;
    color:#dc2626;
}


/* Recent transfer panel */
.transfer-card{
    min-height:0;
}

.transfer-scroll{
    height:155px;
    max-height:155px;
    overflow-y:scroll;
    overflow-x:hidden;
    padding-right:4px;
    scrollbar-width:thin;
    scrollbar-color:#94a3b8 transparent;
}

/* Chrome / Edge scrollbar */
.iei-status-list::-webkit-scrollbar,
.transfer-scroll::-webkit-scrollbar{
    width:8px;
}

.iei-status-list::-webkit-scrollbar-track,
.transfer-scroll::-webkit-scrollbar-track{
    background:rgba(226,232,240,.55);
    border-radius:999px;
}

.iei-status-list::-webkit-scrollbar-thumb,
.transfer-scroll::-webkit-scrollbar-thumb{
    background:#94a3b8;
    border-radius:999px;
}

.iei-status-list::-webkit-scrollbar-thumb:hover,
.transfer-scroll::-webkit-scrollbar-thumb:hover{
    background:#64748b;
}


/* Make the bottom panels fit the one-screen layout */
.fro-info-grid{
    margin-top:12px !important;
}

.fro-info-grid .info-card{
    min-height:0;
}


/* ========================================
   TRANSFER PANEL FORCE SCROLL
======================================== */


/* ========================================
   TRANSFER PANEL FORCE SCROLL
======================================== */

/* Make existing transfer records occupy enough vertical space
   for the panel's internal scrollbar to be useful. */
.transfer-scroll .transfer-row{
    min-height:32px;
    padding-top:7px !important;
    padding-bottom:7px !important;
}

.transfer-scroll .transfer-head{
    min-height:30px;
}

/* Keep the transfer table inside the fixed scroll window */
.transfer-scroll .transfer-table{
    min-width:720px;
}

/* Make the scrollbar clearly visible */
.transfer-scroll::-webkit-scrollbar{
    width:9px;
}

.transfer-scroll::-webkit-scrollbar-track{
    background:#e2e8f0;
    border-radius:999px;
}

.transfer-scroll::-webkit-scrollbar-thumb{
    background:#64748b;
    border-radius:999px;
    border:2px solid #e2e8f0;
}

.transfer-scroll::-webkit-scrollbar-thumb:hover{
    background:#475569;
}

/* ========================================
   PHASE 1B DEVICE STATUS INTEGRATION
======================================== */

.device-overview-grid .device-card{
    height:210px !important;
    min-width:0;
}

.device-detail-scroll{
    min-height:0;
    flex:1;
    overflow-y:auto;
    overflow-x:hidden;
}

.overview-actions{
    min-width:230px;
}

.device-refresh-button{
    min-height:100%;
}

.dashboard-desktop-actions{
    grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
}

.quick-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
}

@media(max-width:1050px){
    .dashboard-desktop-actions,
    .quick-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    }
}

@media(max-width:700px){
    .overview-actions{
        min-width:0;
    }

    .dashboard-desktop-actions,
    .quick-grid{
        grid-template-columns:1fr !important;
    }
}

/* Phase 1B final-polish rules intentionally remain last in the cascade. */
.content{min-width:0; overflow-x:hidden;}
#dashboard .section-title{margin:7px 0 !important;}
.fro-overview-header{min-height:58px; margin:0 0 8px !important; padding:9px 13px !important; gap:16px;}
.fro-overview-header h2{font-size:16px !important;}
.fro-overview-header p{font-size:12px !important;}
.overview-actions{align-items:stretch; min-width:224px; gap:8px;}
.device-refresh-button{min-width:124px; min-height:42px; padding:0 13px; font-size:11px;}
.overview-count{min-width:82px; padding:6px 10px !important;}
.overview-count strong{font-size:19px;}
.device-overview-grid{gap:8px !important; margin-bottom:7px !important;}
.device-overview-grid .device-card{height:184px !important; padding:10px !important;}
.device-card h3{font-size:13px !important;}
.device-type,
.device-status,
.device-info span,
.device-info strong,
.device-metrics span,
.device-metrics strong{font-size:10px !important;}
.dashboard-desktop-actions{grid-template-columns:repeat(4,minmax(0,1fr)) !important; gap:8px !important; margin-bottom:8px !important;}
.dashboard-desktop-actions .action-btn{display:flex; align-items:center; justify-content:center; min-height:46px !important; margin-top:0; padding:8px 10px !important; font-size:12px !important;}
.dashboard-desktop-actions .action-link{text-decoration:none;}
.fro-info-grid{grid-template-columns:minmax(280px,.78fr) minmax(0,1.6fr) !important; gap:10px !important; margin-top:8px !important;}
.fro-info-grid .info-card{height:184px; padding:10px 12px !important; overflow:hidden;}
.info-card-header h2{font-size:14px !important;}
.info-card-subtitle,
.info-card-header a{font-size:10px;}
.iei-status-list,
.transfer-scroll{height:138px; max-height:138px;}

@media(max-width:1050px){
    .dashboard-desktop-actions{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
    .fro-info-grid{grid-template-columns:1fr !important;}
    .fro-info-grid .info-card{height:auto; min-height:184px;}
}

@media(max-width:700px){
    .overview-actions{min-width:0;}
    .dashboard-desktop-actions{grid-template-columns:1fr !important;}
}

/* Phase 1C compact telemetry details. */
.device-info .device-detail-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:4px 8px;
    padding:6px 7px;
}

.device-info .device-detail-row > strong{
    max-width:62%;
    overflow-wrap:anywhere;
}

.telemetry-progress{
    display:block;
    flex:1 0 100%;
    height:4px;
    padding:0 !important;
    overflow:hidden;
    border-radius:999px;
    background:#dbe3ee;
}

.telemetry-progress[hidden]{
    display:none !important;
}

.telemetry-progress > span{
    display:block;
    width:0;
    height:100%;
    padding:0 !important;
    border-radius:inherit;
    background:linear-gradient(90deg,#2563eb,#7c3aed);
    transition:width .25s ease;
}

.device-card.offline .telemetry-progress > span{
    background:#94a3b8;
}

/* Phase 1C independent device-detail scrollbars. */
.device-overview-grid .device-card{
    display:grid !important;
    grid-template-rows:max-content minmax(0,1fr);
    height:184px !important;
    min-height:184px;
    max-height:184px;
    overflow:hidden;
}

.device-card-header{
    min-height:0;
    grid-row:1;
}

.device-detail-scroll{
    width:100%;
    height:auto;
    max-height:none;
    min-height:0;
    grid-row:2;
    overflow-y:scroll;
    overflow-x:hidden;
    padding-right:5px;
    scrollbar-gutter:stable;
    scrollbar-width:thin;
    scrollbar-color:#7c8ba1 #e2e8f0;
    overscroll-behavior:contain;
}

.device-detail-scroll > .device-info{
    display:flex;
    flex-direction:column;
    flex-shrink:0;
    height:auto;
    min-height:max-content;
}

.device-detail-scroll::-webkit-scrollbar{
    width:7px;
}

.device-detail-scroll::-webkit-scrollbar-track{
    background:#e2e8f0;
    border-radius:999px;
}

.device-detail-scroll::-webkit-scrollbar-thumb{
    min-height:24px;
    border:1px solid #e2e8f0;
    border-radius:999px;
    background:#7c8ba1;
}

.device-detail-scroll::-webkit-scrollbar-thumb:hover{
    background:#59687d;
}