/* ── Google Font ── */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

:root {
    --bg: #f5f6fa;
    --surface: #ffffff;
    --text-primary: #1a1d2e;
    --text-muted: #9096a8;
    --border: #eef0f6;
    --accent-blue: #10b981;
    --accent-purple: #9b6ef7;
    --accent-red: #f76e6e;
    --accent-orange: #f7a46e;
    --accent-green: #4fc48f;
    --shadow: 0 2px 16px rgba(80,100,180,0.07);
    --radius: 16px;
}

html, body {
    background-color: var(--bg) !important;
    color: var(--text-primary) !important;
    font-family: 'Times New Roman', Times, serif !important;
    font-size: 15px;
}

/* ── Layout ── */
.page {
    display: flex;
    min-height: 100vh;
    width: 100%;
}
.sidebar {
    width: 210px !important;
    min-width: 210px !important;
    min-height: 100vh;
    background: #ffffff !important;
    background-image: none !important;
    border-right: 1px solid #eef0f6 !important;
    box-shadow: 2px 0 12px rgba(16,185,129,0.06) !important;
    flex-shrink: 0;
    position: relative !important; /* ← needed for avatar positioning */
}

main {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    background-color: var(--bg);
}

.content {
    padding: 2rem;
    max-width: 1100px;
}

/* ── Sidebar Brand ── */
.sidebar-brand {
    padding: 1.5rem 1.25rem 1rem;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--accent-blue);
    letter-spacing: 0.3px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 0.5rem;
}

/* ── Cards ── */
.card {
    background-color: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    color: var(--text-primary) !important;
    box-shadow: var(--shadow) !important;
}

/* ── Stat Cards (colored border like the image) ── */
.stat-card {
    background: var(--surface);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    box-shadow: var(--shadow);
    border: 1.5px solid transparent;
}

    .stat-card.blue {
        border-color: var(--accent-blue);
    }

    .stat-card.purple {
        border-color: var(--accent-purple);
    }

    .stat-card.red {
        border-color: var(--accent-red);
    }

    .stat-card.orange {
        border-color: var(--accent-orange);
    }

    .stat-card.green {
        border-color: var(--accent-green);
    }

.stat-number {
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 4px;
}

.stat-card.blue .stat-number {
    color: var(--accent-blue);
}

.stat-card.purple .stat-number {
    color: var(--accent-purple);
}

.stat-card.red .stat-number {
    color: var(--accent-red);
}

.stat-card.orange .stat-number {
    color: var(--accent-orange);
}

.stat-card.green .stat-number {
    color: var(--accent-green);
}

.stat-label {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 500;
}

/* ── Buttons ── */
.btn-primary {
    background-color: #10b981 !important;
    border-color: #10b981 !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
}

    .btn-primary:hover {
        background-color: #059669 !important;
        border-color: #059669 !important;
    }

.btn-success {
    background-color: var(--accent-green) !important;
    border-color: var(--accent-green) !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
}

.btn-secondary, .btn-outline-secondary {
    border-radius: 10px !important;
    font-weight: 500 !important;
    color: var(--text-muted) !important;
    border-color: var(--border) !important;
    background: var(--surface) !important;
}

    .btn-outline-secondary:hover {
        background: var(--bg) !important;
        color: var(--text-primary) !important;
    }

.btn-outline-primary {
    color: var(--accent-blue) !important;
    border-color: var(--accent-blue) !important;
    border-radius: 10px !important;
}

    .btn-outline-primary.active, .btn-outline-primary:hover {
        background-color: var(--accent-blue) !important;
        color: #fff !important;
    }

/* ── Forms ── */
.form-control, .form-select {
    background-color: var(--bg) !important;
    border: 1.5px solid var(--border) !important;
    border-radius: 10px !important;
    color: var(--text-primary) !important;
    padding: 0.55rem 0.9rem !important;
}

    .form-control:focus, .form-select:focus {
        border-color: var(--accent-blue) !important;
        box-shadow: 0 0 0 3px rgba(16,185,129,0.12) !important;
        background-color: var(--surface) !important;
    }

    .form-control::placeholder {
        color: var(--text-muted) !important;
    }

.form-label {
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    color: var(--text-muted) !important;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

/* ── Tables ── */
.table {
    color: var(--text-primary) !important;
    border-color: var(--border) !important;
}

    .table thead th {
        background-color: var(--bg) !important;
        border-color: var(--border) !important;
        color: var(--text-muted) !important;
        font-weight: 600;
        font-size: 0.78rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        padding: 0.75rem 1rem !important;
    }

    .table td {
        border-color: var(--border) !important;
        vertical-align: middle;
        padding: 0.75rem 1rem !important;
    }

.table-bordered {
    border-color: var(--border) !important;
    border-radius: var(--radius);
    overflow: hidden;
}

/* ── Badges ── */
.badge {
    border-radius: 8px !important;
    font-weight: 600 !important;
    padding: 0.35em 0.75em !important;
    font-size: 0.75em !important;
}

    .badge.bg-primary {
        background-color: rgba(16,185,129,0.12) !important;
        color: var(--accent-blue) !important;
    }

    .badge.bg-success {
        background-color: rgba(79,196,143,0.12) !important;
        color: var(--accent-green) !important;
    }

    .badge.bg-danger {
        background-color: rgba(247,110,110,0.12) !important;
        color: var(--accent-red) !important;
    }

    .badge.bg-warning {
        background-color: rgba(247,164,110,0.12) !important;
        color: var(--accent-orange) !important;
    }

/* ── List Groups ── */
.list-group-item {
    background-color: var(--surface) !important;
    border-color: var(--border) !important;
    color: var(--text-primary) !important;
    border-radius: 12px !important;
    margin-bottom: 6px !important;
    border: 1px solid var(--border) !important;
    box-shadow: 0 1px 6px rgba(80,100,180,0.04);
}

.list-group-item-action:hover {
    background-color: rgba(16,185,129,0.04) !important;
    color: var(--text-primary) !important;
}

.list-group {
    gap: 6px;
}

/* ── Headings ── */
h1, h2, h3, h4, h5 {
    color: var(--text-primary) !important;
    font-weight: 700 !important;
}

.text-muted {
    color: var(--text-muted) !important;
}

/* ── HR ── */
hr {
    border-color: var(--border) !important;
    opacity: 1 !important;
}

/* ── Alerts ── */
.alert-light {
    background-color: var(--bg) !important;
    border-color: var(--border) !important;
    color: var(--text-muted) !important;
    border-radius: 12px !important;
}

/* ── Week chip badges (like Absent/Leave/Late in image) ── */
.chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: var(--bg);
    border-radius: 10px;
    padding: 4px 10px;
    font-size: 0.72rem;
    font-weight: 600;
    gap: 1px;
    min-width: 44px;
}

.chip-number {
    font-size: 1rem;
    font-weight: 700;
}

.chip.absent {
    color: var(--accent-red);
    background: rgba(247,110,110,0.08);
}

.chip.leave {
    color: var(--accent-blue);
    background: rgba(16,185,129,0.08);
}

.chip.late {
    color: var(--accent-orange);
    background: rgba(247,164,110,0.08);
}

/* ── Week Row Card ── */
.week-row {
    background: var(--surface);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    margin-bottom: 0.75rem;
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
}

.week-header {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text-primary);
}

.week-sub {
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* ── Modal override ── */
.card[style*="position:fixed"],
.card[style*="position: fixed"] {
    background-color: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
}
/* ── FORCE OVERRIDE Blazor default sidebar gradient ── */
.sidebar {
    width: 210px !important;
    min-width: 210px !important;
    min-height: 100vh;
    background: #ffffff !important;
    background-image: none !important;
    border-right: 1px solid #eef0f6 !important;
    box-shadow: 2px 0 12px rgba(16,185,129,0.06) !important;
    flex-shrink: 0;
}

.top-row {
    background-color: #ffffff !important;
    border-bottom: 1px solid #eef0f6 !important;
    display: none !important;
}

/* Nav links white theme fix */
.nav-item ::deep a,
.nav-link {
    color: #9096a8 !important;
}

    .nav-item ::deep a.active,
    .nav-link.active {
        background-color: rgba(16,185,129,0.1) !important;
        color: ##10b981 !important;
    }

    .nav-item ::deep a:hover,
    .nav-link:hover {
        background-color: rgba(16,185,129,0.06) !important;
        color: ##10b981 !important;
    }
/* Hide default top-row */
.top-row {
    display: none !important;
}

/* Sidebar width fix */
.sidebar {
    width: 210px !important;
    min-width: 210px !important;
}

/* Content padding */
article.content {
    padding: 2rem 2.5rem !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}
/* ── FORCE FULL WIDTH ── */
.page {
    display: flex !important;
    flex-direction: row !important;
    width: 100% !important;
}

main {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
}

article.content {
    padding: 2rem 2.5rem !important;
    max-width: none !important;
    width: 100% !important;
}

/* Remove any default Blazor padding/margin */
.page > main > article {
    max-width: none !important;
    padding-top: 1.5rem !important;
}
#blazor-error-ui {
    display: none !important;
}

/* Force nav link colors */
.sidebar .nav-link,
.sidebar .nav-link span,
.sidebar a.nav-link {
    color: #10b981 !important;
}

    .sidebar .nav-link:hover,
    .sidebar .nav-link:hover span {
        color: #059669 !important;
        background: #f0fdf4 !important;
    }

    .sidebar .nav-link.active,
    .sidebar .nav-link.active span {
        color: #059669 !important;
        background: #dcfce7 !important;
        font-weight: 600 !important;
    }

.sidebar .nav-logout {
    color: #ef4444 !important;
}

    .sidebar .nav-logout:hover {
        color: #ef4444 !important;
        background: #fff1f1 !important;
    }
/* ── Planner Table ── */
.planner-table {
    border: 2px solid #d1d5db !important;
    border-collapse: collapse !important;
    width: 100% !important;
}

    .planner-table th {
        border: 2px solid #d1d5db !important;
        background: #f8fafc !important;
        padding: 0.6rem 0.5rem !important;
    }

    .planner-table td {
        border: 2px solid #d1d5db !important;
        padding: 0.6rem 0.5rem !important;
        vertical-align: top !important;
    }