/* css/dashboard.css */
.hero-card {
    background: linear-gradient(135deg, #fff, #f5f9ff);
}

.hero-kicker {
    background: rgba(30,79,163,.1);
    color: #1e4fa3;
    padding: 0.35rem 1rem;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 600;
}

.scope-line {
    font-size: .88rem;
    color: #64748b;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(0,0,0,.06);
}

.metric-card {
    min-height: 160px;
    background: #fff;
    border: 1px solid rgba(15, 35, 69, 0.07);
    border-radius: 1.25rem;
    padding: 1.25rem;
    box-shadow: 0 10px 30px rgba(16, 41, 79, 0.06);
}

.metric-icon {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: #eef4ff;
    color: #1e4fa3;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: .8rem;
}

.metric-value {
    font-size: 2rem;
    font-weight: 800;
    color: #0f2345;
}

.metric-sub {
    font-size: .82rem;
    color: #64748b;
}

.stat-card {
    background: #fff;
    border: 1px solid rgba(15, 35, 69, 0.07);
    border-radius: 1.25rem;
    padding: 1.25rem;
    box-shadow: 0 10px 30px rgba(16, 41, 79, 0.06);
    height: 100%;
    transition: all 0.3s ease;
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 40px rgba(16, 41, 79, 0.10);
}

.area-item,
.attention-item {
    padding: .85rem 0;
    border-bottom: 1px solid #edf1f6;
}

.area-item:last-child,
.attention-item:last-child {
    border-bottom: 0;
}

.area-track {
    height: 8px;
    background: #edf2f8;
    border-radius: 99px;
    overflow: hidden;
}

.area-fill {
    height: 100%;
    background: linear-gradient(90deg, #1e4fa3, #13a8d8);
    border-radius: 99px;
    transition: width 0.8s ease;
}

.badge-pulse {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(0.95); }
    100% { opacity: 1; transform: scale(1); }
}

/* Dark Mode Overrides */
html[data-bs-theme="dark"] {
    --laga-surface: #111827;
    --laga-surface-soft: #0f172a;
    --laga-text: #e5e7eb;
    --laga-border: rgba(148,163,184,.20);
}

html[data-bs-theme="dark"] body {
    background: #0b1220 !important;
    color: #e5e7eb;
}

html[data-bs-theme="dark"] .page-card,
html[data-bs-theme="dark"] .stat-card,
html[data-bs-theme="dark"] .metric-card {
    background: #111827 !important;
    border-color: rgba(148,163,184,.20) !important;
    color: #e5e7eb !important;
    box-shadow: 0 10px 30px rgba(0,0,0,.18);
}

html[data-bs-theme="dark"] .navbar {
    background-color: #0f172a !important;
    border-color: rgba(148,163,184,.18) !important;
}

html[data-bs-theme="dark"] .navbar .text-dark,
html[data-bs-theme="dark"] .page-card .text-dark {
    color: #f8fafc !important;
}

html[data-bs-theme="dark"] .hero-card {
    background: linear-gradient(135deg, #111827, #172033) !important;
}

html[data-bs-theme="dark"] .area-item,
html[data-bs-theme="dark"] .attention-item {
    border-bottom-color: rgba(148,163,184,.15);
}

html[data-bs-theme="dark"] .area-track {
    background: #1e293b;
}

html[data-bs-theme="dark"] .metric-icon {
    background: rgba(30,79,163,.2);
}

html[data-bs-theme="dark"] .metric-value {
    color: #f8fafc;
}

html[data-bs-theme="dark"] .btn-light {
    background: #1e293b;
    border-color: #334155;
    color: #e5e7eb;
}

html[data-bs-theme="dark"] .btn-light:hover {
    background: #334155;
    color: #fff;
}

html[data-bs-theme="dark"] .dropdown-menu {
    background: #111827;
    color: #e5e7eb;
    border-color: rgba(148,163,184,.18) !important;
}

html[data-bs-theme="dark"] .dropdown-item {
    color: #e5e7eb;
}

html[data-bs-theme="dark"] .dropdown-item:hover {
    background: #1f2937;
    color: #fff;
}