/* ==========================================
   COMPONENTS
========================================== */

.brand{

    display:flex;

    align-items:center;

    gap:10px;

    margin-bottom:28px;

}

.logo{

    width:36px;

    height:36px;

    margin-bottom:0;

}

.brand-text{

    font-size:24px;

    font-weight:700;

    color:var(--text-primary);

}

.card{

    background:var(--bg-card);

    border:1px solid var(--border);

    border-radius:var(--radius-lg);

    box-shadow:var(--shadow-sm);

    transition:var(--transition);

}

.card:hover{

transform:translateY(-4px);

box-shadow:var(--shadow-md);

}

/* ==========================================
   SVG ICONS
========================================== */

svg.icon{

    width:1em;

    height:1em;

    stroke:currentColor;

    fill:none;

    stroke-width:2;

    stroke-linecap:round;

    stroke-linejoin:round;

    vertical-align:middle;

    flex-shrink:0;

}

/* ==========================================
   SIDEBAR NAV GROUPS + HELP CARD
========================================== */

.nav-group-label{

    font-size:11px;

    font-weight:700;

    letter-spacing:.06em;

    text-transform:uppercase;

    color:var(--text-muted);

    margin:14px 0 4px 14px;

}



.help-card{

    display:flex;

    align-items:flex-start;

    gap:12px;

    background:var(--bg-card);

    border:1px solid var(--border);

    border-radius:var(--radius-md);

    padding:14px 16px;

    margin-top:24px;

    color:var(--text-secondary);

    font-size:13px;

    line-height:1.5;

}

.help-card strong{

    color:var(--text-primary);

    font-size:14px;

}

.help-icon{

    font-size:18px;

}

/* ==========================================
   TOPBAR: NOTIFICATION + USER
========================================== */

.notif-btn{

    position:relative;

}

.notif-badge{

    position:absolute;

    top:-4px;

    right:-4px;

    background:var(--danger);

    color:white;

    font-size:11px;

    font-weight:700;

    min-width:18px;

    height:18px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    border:2px solid var(--bg-body);

}

.topbar-user{

    display:flex;

    align-items:center;

    gap:8px;

    flex-shrink:0;

    padding:4px 8px 4px 4px;

    border-radius:999px;

    transition:var(--transition);

}

.topbar-user:hover{

    background:var(--bg-card);

}

.user-chevron{

    color:var(--text-secondary);

    font-size:12px;

}

/* ==========================================
   HERO META (status / last refresh)
========================================== */

.hero-meta-label{

    color:var(--text-muted);

    font-size:13px;

    margin-right:8px;

}

.hero-meta-value{

    font-weight:600;

    font-size:14px;

}

.status-ok{

    color:var(--success);

    display:inline-flex;

    align-items:center;

    gap:6px;

}

.status-dot{

    width:8px;

    height:8px;

    border-radius:50%;

    background:var(--success);

    display:inline-block;

}

/* ==========================================
   STAT CARDS
========================================== */

.stat-icon{

    width:42px;

    height:42px;

    border-radius:10px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:18px;

    color:#fff;

    flex-shrink:0;

}

.stat-icon.blue{ background:#1e3a8a; }
.stat-icon.green{ background:#14532d; }
.stat-icon.purple{ background:#5b21b6; }
.stat-icon.orange{ background:#9a4b06; }

.stat-value{

    font-size:24px;

    font-weight:700;

    color:var(--text-primary);

}

.stat-label{

    font-size:14px;

    color:var(--text-secondary);

    margin-top:2px;

}

.stat-link{

    font-size:13px;

    color:var(--info);

    margin-top:3px;

}

/* ==========================================
   DASHBOARD CARD extras
========================================== */

.view-all-link{

    color:var(--info);

    font-weight:600;

    font-size:14px;

}

.status-live .dot{

    display:inline-block;

    width:8px;

    height:8px;

    border-radius:50%;

    background:var(--success);

    margin-right:6px;

}

.dashboard-updated{

    color:var(--text-muted);

    font-size:13px;

    text-align:right;

    line-height:1.4;

}

/* ==========================================
   INFO PANELS
========================================== */

.panel-header h3{

    font-size:15px;

    color:var(--text-primary);

    display:flex;

    align-items:center;

    gap:8px;

}

.search-icon{

    color:var(--text-muted);

    display:flex;

    align-items:center;

}

.panel-link{

    color:var(--info);

    font-size:12px;

    font-weight:600;

}

.update-check{

    color:var(--success);

    font-weight:700;

    font-size:17px;

    display:flex;

    align-items:center;

}

.update-text{

    color:var(--text-primary);

    font-size:13px;

}

.update-time{

    color:var(--text-muted);

    font-size:11px;

    margin-left:auto;

}

.quick-link{

    transition:var(--transition);

}

.quick-link:hover{

    background:var(--bg-surface);

}

.quick-link strong{

    color:var(--text-primary);

    font-size:13px;

}

.quick-link small{

    color:var(--text-muted);

    font-size:11px;

}

.ql-icon{

    width:32px;

    height:32px;

    border-radius:8px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:16px;

    color:#fff;

    flex-shrink:0;

}

.ql-icon.blue{ background:#1e3a8a; }
.ql-icon.purple{ background:#5b21b6; }
.ql-icon.green{ background:#14532d; }
.ql-icon.cyan{ background:#164e63; }
.ql-icon.slate{ background:#334155; }
.ql-icon.red{ background:#7f1d1d; }

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

.footer-bar{

    border-top:1px solid var(--border);

    color:var(--text-muted);

    font-size:12px;

}

/* ==========================================
   EXCEL REPORTS MODAL
========================================== */

.modal-overlay{

    display:none;

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.6);

    align-items:center;

    justify-content:center;

    z-index:1000;

}

.modal-overlay.open{

    display:flex;

}

.modal-card{

    background:var(--bg-card);

    border:1px solid var(--border);

    border-radius:16px;

    width:min(480px,92%);

    max-height:80vh;

    display:flex;

    flex-direction:column;

    box-shadow:0 24px 60px rgba(0,0,0,.5);

}

.modal-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:18px 20px;

    border-bottom:1px solid var(--border);

}

.modal-header h3{

    display:flex;

    align-items:center;

    gap:8px;

    font-size:16px;

    color:var(--text-primary);

}

.modal-close{

    background:none;

    border:none;

    color:var(--text-muted);

    font-size:16px;

    cursor:pointer;

    width:28px;

    height:28px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

}

.modal-close:hover{

    background:var(--bg-surface);

    color:var(--text-primary);

}

.excel-report-list{

    list-style:none;

    overflow-y:auto;

    padding:8px;

}

.excel-report-item{

    display:flex;

    align-items:center;

    gap:12px;

    padding:12px;

    border-radius:10px;

    cursor:pointer;

    transition:var(--transition);

}

.excel-report-item:hover{

    background:var(--bg-surface);

}

.excel-report-icon{

    width:36px;

    height:36px;

    border-radius:8px;

    background:#14532d;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:16px;

    flex-shrink:0;

}

.excel-report-text{

    display:flex;

    flex-direction:column;

    flex:1;

}

.excel-report-text strong{

    color:var(--text-primary);

    font-size:14px;

}

.excel-report-text small{

    color:var(--text-muted);

    font-size:12px;

}

.excel-report-arrow{

    color:var(--text-muted);

    font-size:16px;

}

/* ==========================================
   ABOUT MODAL BODY
========================================== */

.about-modal-body{

    padding:20px;

    overflow-y:auto;

    color:var(--text-secondary);

    font-size:14px;

    line-height:1.7;

}

.about-modal-body p{

    margin-bottom:14px;

}

.about-modal-body p:last-child{

    margin-bottom:0;

}

.about-modal-body strong{

    color:var(--text-primary);

}

/* ==========================================
   TOAST NOTIFICATION
========================================== */

.toast{

    position:fixed;

    bottom:24px;

    left:50%;

    transform:translateX(-50%) translateY(20px);

    background:var(--bg-card);

    border:1px solid var(--border);

    color:var(--text-primary);

    padding:12px 20px;

    border-radius:10px;

    display:flex;

    align-items:center;

    gap:10px;

    font-size:14px;

    box-shadow:0 12px 30px rgba(0,0,0,.4);

    opacity:0;

    transition:opacity .25s, transform .25s;

    z-index:2000;

}

.toast.show{

    opacity:1;

    transform:translateX(-50%) translateY(0);

}

.toast svg{

    color:var(--info);

    flex-shrink:0;

}