/* ===========================================
   RACPro DPR Manager Dashboard
   =========================================== */
/* ==========================================================
   RACPro Design System (RDS)
   ========================================================== */

:root{

    /* Brand */

    --rds-primary:#1565C0;
    --rds-primary-light:#EAF4FF;

    /* Semantic */

    --rds-success:#1E8449;
    --rds-warning:#D68910;
    --rds-danger:#C0392B;
    --rds-info:#0EA5E9;

    /* Surface */

    --rds-bg:#F7F9FC;
    --rds-surface:#FFFFFF;

    /* Borders */

    --rds-border:#E5E7EB;

    /* Text */

    --rds-text:#1F2937;
    --rds-text-light:#6B7280;
    --rds-text-muted:#9CA3AF;

    /* Shadow */

    --rds-shadow-sm:0 2px 8px rgba(0,0,0,.05);
    --rds-shadow-md:0 6px 18px rgba(0,0,0,.08);

    /* Radius */

    --rds-radius-sm:12px;
    --rds-radius-md:16px;
    --rds-radius-lg:20px;

}

/* ==========================================================
   Cards
   ========================================================== */

.d-card{
    height:100%;
    display:flex;
    flex-direction:column;
    background:#fff;
    border-radius:18px;
    padding:18px;
    margin-bottom:18px;
    box-shadow:0 3px 12px rgba(0,0,0,.08);
}

/* ==========================================================
   Progress
   ========================================================== */

.d-progress{
    width:100%;
    height:8px;
    background:#ececec;
    border-radius:20px;
    overflow:hidden;
    margin-top:8px;
}

.d-progress-fill{
    height:100%;
    border-radius:20px;
    transition:.4s ease;
}

/* ==========================================================
   Badges
   ========================================================== */

.d-badge{
    padding:5px 12px;
    border-radius:30px;
    font-size:12px;
    font-weight:600;
}

.d-bg{
    background:#d5f5e3;
    color:#1e8449;
}

.d-ba{
    background:#fdebd0;
    color:#d68910;
}

.d-br{
    background:#fadbd8;
    color:#c0392b;
}

.d-bgr{
    background:#ecf0f1;
    color:#7f8c8d;
}

.d-project-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:14px;
}

.d-project-title{
    font-size:18px;
    font-weight:700;
}

.d-project-system{
    color:#777;
    font-size:13px;
    margin-top:3px;
}

.d-progress-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-top:10px;
    margin-bottom:6px;
    font-size:14px;
}

.d-sg{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px;
    margin-bottom:20px;
}

.d-sc{
    background:white;
    border-radius:18px;
    padding:18px;
    box-shadow:0 3px 12px rgba(0,0,0,.08);
}

.d-sl{
    color:#777;
    font-size:13px;
}

.d-sv{
    font-size:34px;
    font-weight:700;
    margin-top:8px;
}
/* ===========================================
   REPORT CARDS
=========================================== */

.d-report-card{

    background:#fff;

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

    border-radius:14px;

    padding:16px;

    margin-bottom:12px;

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

    transition:.2s ease;
}

.d-report-card:hover{

    transform:translateY(-2px);

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

.d-report-top{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:16px;
}

.d-report-name{

    font-size:16px;

    font-weight:700;

    color:var(--gray-800);

    margin-bottom:4px;
}

.d-report-role{

    font-size:13px;

    color:var(--gray-500);
}

.d-report-meta{

    margin-top:12px;

    display:flex;

    gap:20px;

    flex-wrap:wrap;

    font-size:13px;

    color:var(--gray-600);
}

.d-report-card.clickable{
    cursor:pointer;
    transition:.2s;
}

.d-report-card.clickable:hover{
    transform:translateY(-2px);
    box-shadow:0 6px 18px rgba(0,0,0,.08);
}

.reports-nav{
    display:flex;
    gap:8px;
    overflow-x:auto;
    margin-bottom:20px;
    padding:4px 0 10px;
    scrollbar-width:none;
}

.reports-nav::-webkit-scrollbar{
    display:none;
}

.reports-tab{

    padding:10px 16px;

    border:none;

    background:#f5f5f5;

    border-radius:999px;

    cursor:pointer;

    white-space:nowrap;

    font-size:13px;

    font-weight:600;

    transition:.2s;

}

.reports-tab.active{

    background:#c0392b;

    color:#fff;

}

.reports-page{

    display:none;

}

.reports-page.on{

    display:block;

}

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

.rds-insight-card{
    background:#fff;
    border-radius:12px;
    padding:18px;
    border-left:5px solid #ddd;
}

.rds-insight-card.success{
    border-color:#16a34a;
}

.rds-insight-card.danger{
    border-color:#dc2626;
}

.rds-insight-card.primary{
    border-color:#2563eb;
}

.rds-insight-card.warning{
    border-color:#f59e0b;
}

.rds-insight-card.neutral{
    border-color:#64748b;
}

.rds-insight-label{
    font-size:13px;
    color:#666;
    margin-bottom:10px;
}

.rds-insight-value{
    font-size:32px;
    font-weight:700;
    line-height:1;
}

.rds-insight-sub{
    margin-top:8px;
    color:#777;
    font-size:12px;
}

.rds-recommendation{

    margin-top:16px;

    padding:16px;

    border-radius:12px;

    background:#eef6ff;

    border-left:4px solid var(--primary);

    font-size:14px;

    line-height:1.5;

}

/* ==========================================
   Action Center V2
========================================== */

#attendance-action-center{

    display:flex;
    flex-direction:column;
    gap:18px;
    margin-top:24px;

}

.action-section{

    background:#fff;
    border-radius:12px;
    overflow:hidden;
    box-shadow:0 2px 8px rgba(0,0,0,.05);

}

.action-section-header{

    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:12px 16px;
    font-weight:700;
    color:#fff;

}

.action-section-header.high{
    background:#dc3545;
}

.action-section-header.medium{
    background:#fd7e14;
}

.action-section-header.info{
    background:#0dcaf0;
}

.action-count{

    background:rgba(255,255,255,.2);
    padding:2px 10px;
    border-radius:999px;
    font-size:12px;

}

.action-row{

    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:12px 16px;
    border-top:1px solid #eef2f7;

}

.action-site{

    font-weight:600;

}

.action-msg{

    color:#6b7280;
    font-size:13px;
    margin-top:4px;

}

.action-row-right{

    min-width:36px;
    height:36px;

    display:flex;
    align-items:center;
    justify-content:center;

    background:#f3f4f6;
    border-radius:999px;
    font-weight:700;

}

.action-summary{

    background:#f8fafc;
    border:1px solid #e5e7eb;
    border-radius:12px;
    padding:18px;

}

.summary-title{

    font-weight:700;
    margin-bottom:14px;

}

.summary-grid{

    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:16px;
    text-align:center;

}

.summary-grid strong{

    display:block;
    font-size:22px;

}

.summary-grid span{

    font-size:13px;
    color:#6b7280;

}

.action-site{

    cursor:pointer;

}

.action-expand{

    padding:14px 18px 18px 48px;

    background:#f9fafb;

    border-top:1px solid #eef2f7;

}

.action-expand-title{

    font-weight:700;

    margin-bottom:10px;

}

.action-emp-list{

    margin:0 0 14px 18px;

    padding:0;

}

.action-emp-list li{

    margin:6px 0;

}

.action-expand-footer{

    background:#fff;

    border-left:4px solid #dc3545;

    padding:12px;

    border-radius:8px;

}

/* ==========================================
   Site Intelligence
========================================== */

.site-intel-card{

    background:#fff;

    border:1px solid #e6edf5;

    border-radius:14px;

    padding:18px;

    margin-bottom:16px;

    box-shadow:0 2px 6px rgba(0,0,0,.05);

}

.site-intel-top{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:12px;

}

.site-intel-name{

    font-weight:700;

    font-size:16px;

}

.site-intel-sub{

    color:#6b7280;

    margin-top:4px;

    font-size:13px;

}

.site-progress{

    height:10px;

    background:#edf2f7;

    border-radius:999px;

    overflow:hidden;

    margin:16px 0;

}

.site-progress-fill{

    height:100%;

    background:linear-gradient(90deg,#16a34a,#22c55e);

    border-radius:999px;

}

.site-intel-footer{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.site-badge{

    padding:6px 12px;

    border-radius:999px;

    font-size:12px;

    font-weight:600;

}

.site-badge.success{

    background:#dcfce7;

    color:#166534;

}

.site-badge.primary{

    background:#dbeafe;

    color:#1d4ed8;

}

.site-badge.warning{

    background:#fef3c7;

    color:#92400e;

}

.site-badge.danger{

    background:#fee2e2;

    color:#991b1b;

}

/* ==========================================================
   RDS SECTION HEADER
   ========================================================== */

.rds-section-header{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:20px;

    margin-bottom:28px;

    flex-wrap:wrap;

}

.rds-section-title{

    font-size:28px;

    font-weight:700;

    color:var(--rds-text);

}

.rds-section-subtitle{

    margin-top:6px;

    color:var(--rds-text-light);

    font-size:14px;

}

.rds-last-updated{

    font-size:13px;

    color:var(--rds-text-muted);

    white-space:nowrap;

}

/* ==========================================================
   RDS KPI CARDS
   ========================================================== */

.rds-kpi-grid{

    display:grid;

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

    gap:18px;

    margin-bottom:28px;

}

.rds-kpi-card{

    background:var(--rds-surface);

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

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

    padding:22px;

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

    transition:.2s ease;

}

.rds-kpi-card:hover{

    transform:translateY(-3px);

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

}

.rds-kpi-label{

    font-size:13px;

    color:var(--rds-text-light);

    font-weight:600;

}

.rds-kpi-value{

    font-size:38px;

    font-weight:700;

    margin:12px 0 8px;

    color:var(--rds-text);

}

.rds-kpi-meta{

    font-size:13px;

    color:var(--rds-text-muted);

}

/* ==========================================================
   EXECUTIVE ATTENTION
   ========================================================== */

.rds-section-title-sm{

    font-size:18px;

    font-weight:700;

    color:var(--rds-text);

}

.rds-section-subtitle-sm{

    margin-top:4px;

    margin-bottom:18px;

    color:var(--rds-text-light);

    font-size:13px;

}

.attention-list{

    display:flex;

    flex-direction:column;

    gap:12px;

}

.attention-item{

    display:flex;

    align-items:flex-start;

    gap:12px;

    padding:14px 16px;

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

    border-radius:var(--rds-radius-sm);

    background:var(--rds-surface);

}

.attention-icon{

    font-size:18px;

    line-height:1;

}

.attention-text{

    flex:1;

    font-size:14px;

    color:var(--rds-text);

}

/* ==========================================================
   RDS ALERT CARD
   ========================================================== */

.rds-alert-list{

    display:flex;
    flex-direction:column;
    gap:16px;

}

.rds-alert-card{

    display:flex;
    align-items:flex-start;
    gap:16px;

    padding:18px;

    background:var(--rds-surface);

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

    border-left:6px solid var(--alert-color);

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

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

}

.rds-alert-icon{

    font-size:28px;
    line-height:1;

}

.rds-alert-content{

    flex:1;

}

.rds-alert-title{

    font-size:16px;
    font-weight:700;
    color:var(--rds-text);

}

.rds-alert-message{

    margin-top:6px;
    font-size:14px;
    color:var(--rds-text-light);

}

.rds-alert-critical{

    --alert-color:var(--rds-danger);

}

.rds-alert-warning{

    --alert-color:var(--rds-warning);

}

.rds-alert-success{

    --alert-color:var(--rds-success);

}

.rds-alert-info{

    --alert-color:var(--rds-info);

}

/* ==========================================================
   RDS TREND WIDGET
   ========================================================== */

.rds-trend-widget{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.rds-trend-chart{

    width:100%;

    overflow:hidden;

}

.rds-trend-chart svg{

    width:100%;

    height:auto;

    display:block;

}

.rds-trend-summary{

    display:flex;

    justify-content:space-between;

    flex-wrap:wrap;

    gap:12px;

    font-size:14px;

    color:var(--rds-text-light);

}

.rds-trend-summary strong{

    color:var(--rds-text);

}

/* ==========================================================
   RDS PROJECT HEALTH
   ========================================================== */

.rds-health-list{

    display:flex;

    flex-direction:column;

    gap:16px;

}

.rds-health-card{

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

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

    padding:18px;

    background:var(--rds-surface);

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

}

.rds-health-top{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:12px;

    gap:12px;

}

.rds-health-title{

    font-weight:700;

    color:var(--rds-text);

}

.rds-health-status{

    font-size:13px;

    font-weight:600;

    padding:4px 10px;

    border-radius:999px;

}

.rds-health-bar{

    width:100%;

    height:10px;

    background:#ECEFF3;

    border-radius:999px;

    overflow:hidden;

    margin-bottom:8px;

}

.rds-health-fill{

    height:100%;

    border-radius:999px;

}

.rds-health-meta{

    font-size:13px;

    color:var(--rds-text-light);

}

/* ==========================================================
   RDS PEOPLE INSIGHTS
   ========================================================== */

.rds-insight-list{

    display:grid;

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

    gap:16px;

}

.rds-insight-card{

    background:var(--rds-surface);

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

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

    padding:18px;

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

    transition:.2s ease;

}

.rds-insight-card:hover{

    transform:translateY(-2px);

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

}

.rds-insight-label{

    font-size:13px;

    color:var(--rds-text-light);

    margin-bottom:10px;

    font-weight:600;

}

.rds-insight-title{

    font-size:17px;

    font-weight:700;

    color:var(--rds-text);

}

.rds-insight-value{

    margin-top:8px;

    font-size:14px;

    color:var(--rds-text-muted);

}

.rds-table{
    width:100%;
    border-collapse:collapse;
    font-size:13px;
}

.rds-table th{
    text-align:left;
    padding:12px;
    background:#f8f9fb;
    border-bottom:1px solid #e5e7eb;
    font-weight:600;
}

.rds-table td{
    padding:12px;
    border-bottom:1px solid #ececec;
}

.rds-table tr:hover{
    background:#fafafa;
}

/* ==========================================================
   RDS DASHBOARD GRID
   ========================================================== */

.rds-dashboard-grid{

    display:grid;

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

    gap:20px;

    margin-bottom:24px;

}

.rds-dashboard-panel{

    display:flex;

    flex-direction:column;

}

.rds-dashboard-panel .d-card{

    height:100%;

}

/* Tablet */

@media (max-width:900px){

    .rds-dashboard-grid{

        grid-template-columns:1fr;

    }

}

.workflow-banner{

    background:#fff;

    border-left:5px solid;

    border-radius:12px;

    padding:18px 22px;

    margin:18px 0;

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

}

.workflow-header{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    margin-bottom:18px;

}

.workflow-label{

    font-size:.78rem;

    font-weight:700;

    letter-spacing:.08em;

    text-transform:uppercase;

    color:#64748b;

}

.workflow-subtitle{

    margin-top:2px;

    font-size:.85rem;

    color:#94a3b8;

}

.workflow-body h3{

    margin:0 0 10px;

}

.workflow-body p{

    margin:0 0 14px;

    line-height:1.6;

}

.workflow-action{

    padding:12px 16px;

    border-radius:10px;

    background:#f8fafc;

}

.workflow-clear-btn{

    border:none;

    background:none;

    cursor:pointer;

    color:#64748b;

    font-weight:600;

}

.workflow-clear-btn:hover{

    color:#0f172a;

}

.workflow-danger{

    border-left-color:#dc2626;

}

.workflow-warning{

    border-left-color:#d97706;

}

.workflow-info{

    border-left-color:#2563eb;

}

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

.rds-action-grid{

    display:grid;

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

    gap:16px;

}

.rds-action-card{

    display:flex;

    flex-direction:column;

    gap:10px;

    padding:18px;

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

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

    background:var(--rds-surface);

    cursor:pointer;

    transition:.2s ease;

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

}

.rds-action-card:hover{

    transform:translateY(-3px);

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

}

.rds-action-icon{

    font-size:28px;

}

.rds-action-title{

    font-weight:700;

    color:var(--rds-text);

}

.rds-action-desc{

    font-size:13px;

    color:var(--rds-text-light);

}

/* ==========================================================
   PERFORMANCE BADGES
========================================================== */

.rds-pill{

display:inline-flex;
align-items:center;
padding:6px 12px;
border-radius:999px;
font-size:12px;
font-weight:700;

}

.rds-success{

background:#dcfce7;
color:#166534;

}

.rds-primary{

background:#dbeafe;
color:#1d4ed8;

}

.rds-info{

background:#cffafe;
color:#0f766e;

}

.rds-warning{

background:#fef3c7;
color:#92400e;

}

.rds-danger{

background:#fee2e2;
color:#b91c1c;

}

/* =====================================================
   Executive Operations Panel
===================================================== */

.d-alert-grid{

display:grid;

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

gap:16px;

margin-top:12px;

}

.d-alert-card{

background:var(--color-background-primary);

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

border-left:6px solid #c0392b;

border-radius:14px;

padding:18px;

min-height:220px;

transition:.25s;

box-shadow:0 2px 10px rgba(0,0,0,.04);

}

.d-alert-card:hover{

transform:translateY(-2px);

border-left-width:10px;

box-shadow:0 6px 18px rgba(0,0,0,.08);

}

.d-alert-title{

font-size:14px;

font-weight:700;

margin-bottom:14px;

display:flex;

align-items:center;

gap:8px;

letter-spacing:.02em;

}

.d-alert-value{

font-size:36px;

font-weight:700;

line-height:1;

color:#c0392b;

margin-bottom:4px;

}

.d-alert-unit{

font-size:13px;

font-weight:600;

color:var(--color-text-secondary);

margin-bottom:14px;

}

.d-alert-message{

font-size:13px;

color:var(--color-text-primary);

margin-bottom:16px;

}

.d-alert-action{

font-size:12px;

font-weight:500;

color:var(--color-text-secondary);

padding-top:12px;

border-top:1px dashed var(--color-border-tertiary);

}

.d-priority{

display:inline-flex;

margin-top:12px;

padding:4px 10px;

border-radius:999px;

font-size:11px;

font-weight:700;

text-transform:uppercase;

letter-spacing:.04em;

}

/* ==========================================================
   Employee Home
   ========================================================== */

.ex-status-row{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:12px 0;

    border-bottom:1px solid #EEF2F7;

}

.ex-status-row:last-child{

    border-bottom:none;

}

.ex-status-badge{

    padding:4px 12px;

    border-radius:20px;

    font-size:12px;

    font-weight:600;

}

.ex-status-badge.success{

    background:#DCFCE7;

    color:#166534;

}

.ex-status-badge.warning{

    background:#FEF3C7;

    color:#92400E;

}

.ex-status-badge.error{

    background:#FEE2E2;

    color:#991B1B;

}

.ex-status-badge.info{

    background:#DBEAFE;

    color:#1D4ED8;

}

.ex-user-role{

    font-size:17px;

    font-weight:600;

    color:#183153;

    margin-top:8px;

}

.ex-user-site{

    margin-top:10px;

    color:#5F6C7B;

    font-size:15px;

}

.ex-date{

    margin-top:10px;

    color:#8B98A8;

    font-size:14px;

}

/* ==========================================================
   Employee Home Cards
   ========================================================== */

.ex-card{

    background:#fff;

    border-radius:18px;

    padding:20px;

    margin:20px 16px;

    box-shadow:0 4px 16px rgba(0,0,0,.08);

    border:1px solid #E8EEF5;

}

.ex-card-header{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:16px;

}

.ex-card-icon{

    width:46px;

    height:46px;

    border-radius:12px;

    background:#E8F3FF;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:22px;

}

.ex-card-title{

    font-size:22px;

    font-weight:700;

    color:#183153;

}

/* ==========================================================
   Employee Home CTA
   ========================================================== */

.ex-primary-btn{

    width:100%;

    height:58px;

    border:none;

    border-radius:14px;

    background:linear-gradient(135deg,#0B6CF0,#1E88E5);

    color:#fff;

    font-size:17px;

    font-weight:700;

    cursor:pointer;

    transition:.25s;

    box-shadow:0 8px 20px rgba(11,108,240,.25);

}

.ex-primary-btn:hover{

    transform:translateY(-2px);

    box-shadow:0 12px 24px rgba(11,108,240,.35);

}

/* ==========================================================
   Employee Profile
   ========================================================== */

.ex-profile{

    display:flex;

    align-items:center;

    gap:18px;

    margin-top:12px;

}

.ex-avatar{

    width:64px;

    height:64px;

    border-radius:50%;

    background:linear-gradient(135deg,#0B6CF0,#42A5F5);

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:26px;

    font-weight:700;

    flex-shrink:0;

}

.ex-profile-info{

    flex:1;

}

#page-home{

    background:#F5F8FC;

    min-height:100%;

    padding-bottom:90px;

}

/* ==========================================================
   Performance Summary
   ========================================================== */

.ex-performance-summary{

    margin-top:24px;

    padding-top:22px;

    border-top:1px solid #E8EEF5;

    text-align:center;

}

.ex-performance-stats{

    margin-top:18px;

    padding-top:14px;

    border-top:1px solid #eef2f7;

}

.ex-performance-item{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:6px 0;

    font-size:13px;

}

.ex-performance-item span{

    color:#64748b;

}

.ex-performance-item strong{

    color:#0f172a;

    font-weight:600;

}

.ex-performance-title{

    font-size:15px;

    font-weight:600;

    color:#64748B;

}

.ex-performance-score{

    margin-top:10px;

    font-size:54px;

    font-weight:700;

    color:#0B72C5;

    line-height:1;

}

.ex-performance-score span{

    font-size:18px;

    color:#94A3B8;

    font-weight:500;

}

.ex-performance-progress{

    width:100%;

    height:10px;

    background:#E8EEF5;

    border-radius:999px;

    overflow:hidden;

    margin:18px 0 14px;

}

.ex-performance-fill{

    height:100%;

    background:linear-gradient(
        90deg,
        #0B72C5,
        #42A5F5
    );

    border-radius:999px;

    transition:width .6s ease;

}

.ex-performance-rating{

    font-size:15px;

    font-weight:600;

    color:#183153;

}

.ex-hero{

    background:#fff;

    border-radius:20px;

    margin:20px 16px;

    padding:24px;

    box-shadow:0 4px 18px rgba(0,0,0,.08);

}

.ex-hero-top{

    display:flex;

    align-items:center;

    gap:18px;

    margin-bottom:18px;

}

.ex-hero-title{

    font-size:18px;

    color:#64748B;

}

.ex-hero-name{

    font-size:28px;

    font-weight:700;

    color:#16355B;

    margin-top:4px;

}

.ex-action-title{

    font-size:16px;

    font-weight:600;

    margin-bottom:6px;

    color:#0f172a;

}

.ex-action-message{

    font-size:13px;

    color:#64748b;

    margin-bottom:14px;

    line-height:1.5;

}


/* ==========================================================
   Manager Mission Card
   ========================================================== */

.ex-manager-mission-card {

    margin-top: 24px;

    padding: 22px 24px;

    background: #ffffff;

    border-radius: 18px;

    border: 1px solid #e8eef5;

    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);

}


.ex-manager-mission-header {

    display: flex;

    align-items: center;

    gap: 14px;

}


.ex-manager-mission-icon {

    width: 44px;

    height: 44px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #eef6ff;

    border-radius: 12px;

    font-size: 22px;

}


.ex-manager-mission-title {

    font-size: 20px;

    font-weight: 700;

    color: #0f172a;

}


.ex-manager-mission-status {

    margin-top: 20px;

    font-size: 16px;

    font-weight: 700;

    color: #0f172a;

}


.ex-manager-mission-message {

    margin-top: 7px;

    font-size: 14px;

    line-height: 1.6;

    color: #64748b;

}


.ex-manager-mission-progress {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 14px;

    margin-top: 20px;

    padding-top: 16px;

    border-top: 1px solid #eef2f7;

}


.ex-manager-mission-progress-item {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

    padding: 12px 14px;

    background: #f8fafc;

    border-radius: 10px;

    font-size: 14px;

}


.ex-manager-mission-progress-item span {

    color: #64748b;

}


.ex-manager-mission-progress-item strong {

    color: #0f172a;

    font-weight: 600;

}

@media (max-width: 600px) {

    .ex-manager-mission-card {
        padding: 18px;
    }

    .ex-manager-mission-progress {
        grid-template-columns: 1fr;
    }

}

/*=========================================
  Mission Progress
=========================================*/

.ex-mission-progress{

    margin:18px 0;

    padding:18px 0;

    border-top:1px solid #edf2f7;

    border-bottom:1px solid #edf2f7;

}

.ex-mission-heading{

    font-size:13px;

    font-weight:600;

    color:#334155;

    margin-bottom:12px;

}

.ex-mission-row{

    padding:6px 0;

    font-size:14px;

    color:#334155;

}

.ex-progress-bar{

    height:8px;

    background:#edf2f7;

    border-radius:20px;

    overflow:hidden;

    margin-top:14px;

}

.ex-progress-fill{

    height:100%;

    background:#1e73d8;

    border-radius:20px;

    transition:width .35s ease;

}

.ex-progress-text{

    margin-top:8px;

    font-size:12px;

    color:#64748b;

    text-align:right;

}

/*=========================================
  MY PERFORMANCE CARD
=========================================*/

.ex-performance-breakdown{

    display:flex;
    flex-direction:column;
    gap:18px;

}

.ex-score-row{

    display:flex;
    flex-direction:column;
    gap:8px;

}

.ex-score-title{

    display:flex;
    justify-content:space-between;
    align-items:center;

    font-size:13px;
    color:var(--gray-700);

}

.ex-score-title strong{

    color:var(--primary);

    font-size:13px;

}

.ex-progress-bar{

    width:100%;
    height:8px;

    background:#E8EEF7;

    border-radius:999px;

    overflow:hidden;

}

.ex-progress-fill{

    height:100%;

    background:linear-gradient(
        90deg,
        #0F6CBD,
        #4AA3FF
    );

    border-radius:999px;

    transition:width .35s ease;

}

/*=========================================
  ACHIEVEMENTS
=========================================*/

.achievement-item{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:12px 0;

    border-bottom:1px solid #EEF2F7;

}

.achievement-item:last-child{

    border-bottom:none;

}

.achievement-item strong{

    color:var(--primary);

    font-weight:700;

}

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

.ex-quick-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:14px;

}

.ex-quick-btn{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:8px;

    padding:18px;

    border:none;

    border-radius:14px;

    background:#F8FAFC;

    cursor:pointer;

    transition:all .25s ease;

}

.ex-quick-btn:hover{

    background:#EFF6FF;

    transform:translateY(-2px);

}

.ex-quick-icon{

    font-size:28px;

}

.ex-quick-text{

    font-size:13px;

    font-weight:600;

    color:#334155;

}

/* ==========================================================
   TODAY'S UPDATES
========================================================== */

.ex-feed{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.ex-feed-item{

    display:flex;

    gap:14px;

    align-items:flex-start;

}

.ex-feed-icon{

    width:42px;

    height:42px;

    border-radius:50%;

    background:#EFF6FF;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:20px;

    flex-shrink:0;

}

.ex-feed-title{

    font-size:14px;

    font-weight:600;

    color:#0F172A;

    margin-bottom:4px;

}

.ex-feed-text{

    font-size:13px;

    color:#64748B;

    line-height:1.5;

}

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

.ex-footer{

    text-align:center;

}

.ex-footer-message{

    font-size:15px;

    font-weight:600;

    color:#0F172A;

    margin-bottom:14px;

}

.ex-footer-motto{

    font-size:14px;

    line-height:1.9;

    color:#475569;

}

.ex-footer-company{

    margin-top:18px;

    font-weight:700;

    color:#0F6CBD;

}

.ex-footer-version{

    margin-top:10px;

    font-size:12px;

    color:#94A3B8;

}

/* =========================================================
   HOME ENTRY ANIMATION
========================================================= */

.home-section{

    opacity:0;

    transform:translateY(18px);

    transition:
        opacity .35s ease,
        transform .35s ease;

}

.home-section.show{

    opacity:1;

    transform:translateY(0);

}

/* ==========================================================
   Today's Reports Picker
========================================================== */

.picker-card{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:18px;

    padding:18px;

    margin-bottom:14px;

    background:#fff;

    border:1px solid #E6ECF2;

    border-radius:16px;

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

    transition:.2s ease;

    cursor:pointer;

    user-select:none;

}

.picker-card:hover{

    transform:translateY(-2px);

    border-color:#0B72C5;

    box-shadow:0 8px 20px rgba(11,114,197,.12);

}

.picker-card-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    width:100%;

    gap:20px;

}

.picker-site{

    font-size:17px;

    font-weight:700;

    color:#16355B;

    margin-bottom:6px;

}

.picker-system{

    font-size:14px;

    color:#64748B;

    margin-bottom:6px;

}

.picker-time{

    font-size:13px;

    color:#94A3B8;

}

/* ==========================================
   Attendance — Rich Multi-Site Cards
========================================== */

.attendance-sites-summary {
    margin: 12px 0 10px;
    font-size: 14px;
    font-weight: 600;
    color: #64748b;
}

.attendance-sites {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.attendance-site-item {
    padding: 9px 12px;
    border-radius: 10px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.attendance-site-name {
    font-size: 15px;
    font-weight: 600;
    color: #1e3a5f;
    line-height: 1.4;
}

.attendance-site-time {
    margin-top: 3px;
    font-size: 13px;
    color: #64748b;
}

/* ==========================================================
   Manager Achievements
========================================================== */

.ex-achievements-card {

    margin-top: 24px;

    padding: 22px 24px;

    background: #ffffff;

    border: 1px solid #e8eef5;

    border-radius: 18px;

    box-shadow:
        0 6px 20px rgba(15, 23, 42, 0.06);

}


.ex-achievements-header {

    display: flex;

    align-items: center;

    gap: 14px;

}


.ex-achievements-header > div:last-child {

    flex: 1;

}


.ex-achievements-icon {

    width: 48px;

    height: 48px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #eff6ff;

    border-radius: 14px;

    font-size: 24px;

}


.ex-achievements-title {

    font-size: 18px;

    font-weight: 700;

    color: #0f172a;

}


.ex-achievements-subtitle {

    margin-top: 4px;

    font-size: 13px;

    color: #64748b;

}


.ex-achievements-grid {

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 14px;

    margin-top: 20px;

}


.ex-achievement-item {

    padding: 18px 14px;

    text-align: center;

    background: #f8fafc;

    border: 1px solid #eef2f7;

    border-radius: 14px;

}


.ex-achievement-item
.ex-achievement-icon {

    font-size: 22px;

    margin-bottom: 6px;

}


.ex-achievement-value {

    font-size: 28px;

    font-weight: 700;

    line-height: 1.1;

    color: #0f172a;

}


.ex-achievement-label {

    margin-top: 5px;

    font-size: 13px;

    font-weight: 600;

    color: #475569;

}


.ex-achievement-unit {

    margin-top: 2px;

    font-size: 12px;

    color: #94a3b8;

}

/* ==========================================================
   MANAGER LEADERSHIP SNAPSHOT
========================================================== */

.ex-leadership-card{

    margin-top:24px;

    padding:24px;

    background:#ffffff;

    border:1px solid #E8EEF5;

    border-radius:18px;

    box-shadow:0 4px 16px rgba(0,0,0,.06);

}


/* ----------------------------------------------------------
   Leadership Metrics
---------------------------------------------------------- */

.ex-leadership-metrics{

    display:grid;

    grid-template-columns:
        repeat(4, 1fr);

    margin-top:18px;

    border:1px solid #E8EEF5;

    border-radius:14px;

    overflow:hidden;

}


.ex-leadership-metric{

    padding:18px 12px;

    text-align:center;

    background:#F8FAFC;

    border-right:1px solid #E8EEF5;

}


.ex-leadership-metric:last-child{

    border-right:none;

}


.ex-leadership-value{

    font-size:24px;

    font-weight:700;

    color:#183153;

    line-height:1.2;

}


.ex-leadership-label{

    margin-top:6px;

    font-size:12px;

    font-weight:500;

    color:#64748B;

}


/* ----------------------------------------------------------
   Divider
---------------------------------------------------------- */

.ex-leadership-divider{

    height:1px;

    margin:20px 0;

    background:#E8EEF5;

}


/* ----------------------------------------------------------
   Active Projects
---------------------------------------------------------- */

.ex-leadership-projects{

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:13px 15px;

    background:#F8FAFC;

    border:1px solid #E8EEF5;

    border-radius:12px;

    font-size:14px;

    color:#475569;

}


.ex-leadership-projects strong{

    font-size:17px;

    color:#183153;

}


/* ----------------------------------------------------------
   Leadership Status
---------------------------------------------------------- */

.ex-leadership-status{

    display:flex;

    align-items:center;

    gap:8px;

    margin-top:12px;

    padding:11px 14px;

    border-radius:10px;

    font-size:13px;

    font-weight:600;

}


/* Critical */

.ex-leadership-status.critical{

    background:#FEF2F2;

    color:#B91C1C;

}


/* Warning */

.ex-leadership-status.warning{

    background:#FFFBEB;

    color:#B45309;

}


/* Healthy */

.ex-leadership-status.healthy{

    background:#F0FDF4;

    color:#15803D;

}


/* ----------------------------------------------------------
   Mobile
---------------------------------------------------------- */

@media (max-width:700px){

    .ex-leadership-card{

        padding:18px;

        border-radius:16px;

    }


    .ex-leadership-metrics{

        grid-template-columns:
            repeat(2, 1fr);

    }


    .ex-leadership-metric{

        padding:16px 10px;

    }


    .ex-leadership-metric:nth-child(2){

        border-right:none;

    }


    .ex-leadership-metric:nth-child(-n+2){

        border-bottom:1px solid #E8EEF5;

    }


    .ex-leadership-value{

        font-size:22px;

    }

}