/* Minification failed. Returning unminified contents.
(10,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(11,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(12,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(13,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(14,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(17,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(18,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(19,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(20,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(21,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(22,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(23,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(24,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(25,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(26,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(27,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(28,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(29,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(30,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(31,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(32,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(33,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(34,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(35,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(36,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(150,22): run-time error CSS1039: Token not allowed after unary operator: '-surface'
(151,28): run-time error CSS1039: Token not allowed after unary operator: '-border'
(152,25): run-time error CSS1039: Token not allowed after unary operator: '-radius'
(154,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow'
(163,26): run-time error CSS1039: Token not allowed after unary operator: '-shadow-md'
(202,17): run-time error CSS1039: Token not allowed after unary operator: '-text-1'
(216,17): run-time error CSS1039: Token not allowed after unary operator: '-text-3'
(270,32): run-time error CSS1039: Token not allowed after unary operator: '-border'
(271,29): run-time error CSS1039: Token not allowed after unary operator: '-radius-sm'
(274,21): run-time error CSS1039: Token not allowed after unary operator: '-text-1'
(275,26): run-time error CSS1039: Token not allowed after unary operator: '-surface'
(282,32): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(289,26): run-time error CSS1039: Token not allowed after unary operator: '-blue'
(292,29): run-time error CSS1039: Token not allowed after unary operator: '-radius-sm'
(302,30): run-time error CSS1039: Token not allowed after unary operator: '-blue-dark'
(530,17): run-time error CSS1039: Token not allowed after unary operator: '-text-3'
(533,22): run-time error CSS1039: Token not allowed after unary operator: '-surface-2'
(534,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-sm'
(535,29): run-time error CSS1039: Token not allowed after unary operator: '-border'
(549,17): run-time error CSS1039: Token not allowed after unary operator: '-red'
(552,22): run-time error CSS1039: Token not allowed after unary operator: '-red-bg'
(553,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-sm'
(577,28): run-time error CSS1039: Token not allowed after unary operator: '-border'
(578,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-sm'
(579,22): run-time error CSS1039: Token not allowed after unary operator: '-surface'
(580,17): run-time error CSS1039: Token not allowed after unary operator: '-text-2'
(590,26): run-time error CSS1039: Token not allowed after unary operator: '-surface-2'
(596,17): run-time error CSS1039: Token not allowed after unary operator: '-text-1'
(610,21): run-time error CSS1039: Token not allowed after unary operator: '-text-3'
(627,17): run-time error CSS1039: Token not allowed after unary operator: '-text-2'
(665,21): run-time error CSS1039: Token not allowed after unary operator: '-text-3'
(670,32): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(671,21): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(695,17): run-time error CSS1039: Token not allowed after unary operator: '-text-2'
(713,22): run-time error CSS1039: Token not allowed after unary operator: '-surface-2'
(714,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-sm'
(722,17): run-time error CSS1039: Token not allowed after unary operator: '-text-1'
(729,17): run-time error CSS1039: Token not allowed after unary operator: '-text-3'
(823,22): run-time error CSS1039: Token not allowed after unary operator: '-surface'
(824,28): run-time error CSS1039: Token not allowed after unary operator: '-border'
(825,25): run-time error CSS1039: Token not allowed after unary operator: '-radius'
(828,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow'
(833,26): run-time error CSS1039: Token not allowed after unary operator: '-shadow-md'
(839,17): run-time error CSS1039: Token not allowed after unary operator: '-text-3'
(865,22): run-time error CSS1039: Token not allowed after unary operator: '-surface-2'
(866,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-sm'
(877,17): run-time error CSS1039: Token not allowed after unary operator: '-text-3'
(887,26): run-time error CSS1039: Token not allowed after unary operator: '-surface'
(888,21): run-time error CSS1039: Token not allowed after unary operator: '-text-1'
(889,26): run-time error CSS1039: Token not allowed after unary operator: '-shadow'
(905,17): run-time error CSS1039: Token not allowed after unary operator: '-text-3'
(991,17): run-time error CSS1039: Token not allowed after unary operator: '-text-3'
(998,26): run-time error CSS1039: Token not allowed after unary operator: '-border'
(1016,17): run-time error CSS1039: Token not allowed after unary operator: '-text-1'
(1074,17): run-time error CSS1039: Token not allowed after unary operator: '-text-3'
(1080,21): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(1085,21): run-time error CSS1039: Token not allowed after unary operator: '-text-2'
(1092,28): run-time error CSS1039: Token not allowed after unary operator: '-border'
(1134,32): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(1135,21): run-time error CSS1039: Token not allowed after unary operator: '-accent'
 */
/* ============================================================
   dashboard.css
   All dashboard panel styles — split by section
   Place in: /Content/css/dashboard.css
   Reference in _Layout.cshtml or the view's <head>
   ============================================================ */

/* ── CSS Variables ─────────────────────────────────────── */
:root {
    --navy: #1a2744;
    --navy-dark: #111c38;
    --navy-light: #243057;
    --blue: #87cefa;
    --blue-dark: #2563eb;
    --accent: #2563eb;
    --accent-light: #dbeafe;
    --green: #16a34a;
    --green-bg: #dcfce7;
    --red: #dc2626;
    --red-bg: #fee2e2;
    --amber: #d97706;
    --amber-bg: #fef3c7;
    --teal: #0d9488;
    --teal-bg: #ccfbf1;
    --purple: #7c3aed;
    --purple-bg: #ede9fe;
    --surface: #ffffff;
    --surface-2: #f8fafc;
    --border: #e2e8f0;
    --text-1: #0f172a;
    --text-2: #475569;
    --text-3: #94a3b8;
    --radius: 12px;
    --radius-sm: 8px;
    --shadow: 0 1px 4px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.04);
    --shadow-md: 0 4px 16px rgba(0,0,0,.08);
}

/* ══════════════════════════════════════════════════════════
   SECTION 1 — KPI TRENDS
   ══════════════════════════════════════════════════════════ */
.kpi-trend {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 99px;
}

    .kpi-trend.up {
        background: #dcfce7;
        color: #16a34a;
    }

    .kpi-trend.down {
        background: #fee2e2;
        color: #dc2626;
    }

    .kpi-trend.flat {
        background: #f1f5f9;
        color: #94a3b8;
    }

    .kpi-trend.amber {
        background: #fef3c7;
        color: #d97706;
    }

    .kpi-trend.blue {
        background: #dbeafe;
        color: #2563eb;
    }

    .kpi-trend.purple {
        background: #ede9fe;
        color: #7c3aed;
    }

    .kpi-trend.teal {
        background: #ccfbf1;
        color: #0d9488;
    }

    .kpi-trend.pink {
        background: #fce7f3;
        color: #be185d;
    }

/* ══════════════════════════════════════════════════════════
   SECTION 2 — PANELS (shared)
   ══════════════════════════════════════════════════════════ */
.hr-panel {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
    height: 100%;
    overflow: hidden;
}

.hp-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px 10px;
    border-bottom: 1px solid #f1f5f9;
}

.hp-title {
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
}

.hp-body {
    padding: 16px;
    min-height: 120px;
}

.hp-placeholder {
    width: 100%;
    height: 100%;
    min-height: 120px;
    background: #f8fafc;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    font-size: 12px;
    font-style: italic;
    border: 1px dashed #e2e8f0;
}

/* ══════════════════════════════════════════════════════════
   SECTION 3 — KPI CARDS
   ══════════════════════════════════════════════════════════ */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 14px;
    margin-bottom: 20px;
}

.kpi-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px 20px 16px;
    box-shadow: var(--shadow);
    position: relative;
    overflow: hidden;
    transition: transform .2s, box-shadow .2s;
    animation: fadeUp .35s ease both;
}

    .kpi-card:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
    }

    .kpi-card:nth-child(1) {
        animation-delay: .04s
    }

    .kpi-card:nth-child(2) {
        animation-delay: .09s
    }

    .kpi-card:nth-child(3) {
        animation-delay: .14s
    }

    .kpi-card:nth-child(4) {
        animation-delay: .19s
    }

.kpi-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 14px;
}

.kpi-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.kpi-value {
    font-size: 30px;
    font-weight: 700;
    color: var(--text-1);
    letter-spacing: -1px;
    line-height: 1;
    margin-bottom: 4px;
}

    .kpi-value span {
        font-size: 15px;
        font-weight: 400;
        letter-spacing: 0;
    }

.kpi-label {
    font-size: 12px;
    color: var(--text-3);
}

.kpi-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
}

.kpi-skel {
    background: linear-gradient(90deg,#f1f5f9 25%,#e8edf2 50%,#f1f5f9 75%);
    background-size: 200% 100%;
    animation: shimmer 1.3s infinite;
    border-radius: 4px;
    display: inline-block;
    height: 20px;
    width: 60%;
}

    .kpi-skel.wide {
        width: 70%;
    }

@media (max-width:1100px) {
    .kpi-grid {
        grid-template-columns: repeat(2,1fr);
    }
}

@media (max-width:640px) {
    .kpi-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* ══════════════════════════════════════════════════════════
   SECTION 4 — EMPLOYEE BADGE
   ══════════════════════════════════════════════════════════ */
.empb-wrap {
    width: 100%;
    overflow: hidden;
}

.empb-search {
    display: flex;
    gap: 6px;
    margin-bottom: 10px;
}

    .empb-search input {
        flex: 1;
        height: 32px;
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        padding: 0 10px;
        font-size: 12px;
        color: var(--text-1);
        background: var(--surface);
        outline: none;
        font-family: inherit;
        transition: border-color .15s, box-shadow .15s;
    }

        .empb-search input:focus {
            border-color: var(--accent);
            box-shadow: 0 0 0 3px rgba(37,99,235,.1);
        }

    .empb-search button {
        height: 32px;
        padding: 0 12px;
        background: var(--blue);
        color: #fff;
        border: none;
        border-radius: var(--radius-sm);
        font-size: 11px;
        font-weight: 600;
        cursor: pointer;
        font-family: inherit;
        white-space: nowrap;
        transition: background .15s;
    }

        .empb-search button:hover {
            background: var(--blue-dark);
        }

.empb-card {
    width: 100%;
    border: 2px solid #87cefa;
    border-radius: 4px;
    display: flex;
    flex-direction: row;
    position: relative;
    background: #fff;
    overflow: hidden;
}

    .empb-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: #87cefa;
        z-index: 1;
    }

    .empb-card::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: #87cefa;
    }

.empb-photo-col {
    width: 140px;
    flex-shrink: 0;
    background: #faf8f2;
    border-right: 2px solid #87cefa;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px 14px;
    gap: 8px;
}

.empb-ring {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 2px solid #87cefa;
    outline: 4px solid #faf8f2;
    outline-offset: 2px;
    overflow: hidden;
    background: #e8e0cc;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .empb-ring img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.empb-initials {
    font-family: 'Playfair Display',Georgia,serif;
    font-size: 24px;
    font-weight: 700;
    color: #87cefa;
}

.empb-name {
    font-size: 13px;
    font-weight: 700;
    color: #1a1a1a;
    text-align: center;
    line-height: 1.3;
}

.empb-jobtitle {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #007bb8;
    text-align: center;
    line-height: 1.3;
}

.empb-id {
    font-size: 10px;
    color: #888;
    background: #f0ebe0;
    border: 1px solid #e0d8c8;
    padding: 2px 8px;
    border-radius: 99px;
    font-family: monospace;
}

.empb-status {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    color: #555;
    font-weight: 500;
}

.empb-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.empb-info-col {
    flex: 1;
    min-width: 0;
    padding: 16px 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
}

.empb-sec {
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #007bb8;
    padding-bottom: 5px;
    border-bottom: 1px solid #87cefa;
    margin-bottom: 6px;
}

.empb-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 12px;
}

.empb-grid-3 {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 8px 10px;
}

.empb-point {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.empb-key {
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: #414a4c;
}

.empb-val {
    font-size: 11px;
    font-weight: 500;
    color: #007bb8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.empb-stats {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    border: 1px solid #87cefa;
    border-radius: 4px;
    overflow: hidden;
}

    .empb-stats * {
        box-sizing: border-box;
    }

.empb-stat {
    padding: 7px 6px;
    text-align: center;
    border-right: 1px solid #87cefa;
    box-sizing: border-box;
}

    .empb-stat:last-child {
        border-right: none;
    }

    .empb-stat + .empb-stat {
        border-left: 1px solid #87cefa;
        border-right: none;
    }

.empb-stat-num {
    font-family: 'Playfair Display',Georgia,serif;
    font-size: 16px;
    font-weight: 700;
    color: #007bb8;
    display: block;
    line-height: 1;
}

.empb-stat-lbl {
    font-size: 8px;
    font-weight: 600;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: #94a3b8;
    display: block;
    margin-top: 2px;
}

.empb-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 160px;
    color: var(--text-3);
    font-size: 11px;
    gap: 8px;
    background: var(--surface-2);
    border-radius: var(--radius-sm);
    border: 1px dashed var(--border);
}

    .empb-empty i {
        font-size: 24px;
        color: #ddd;
    }

.empb-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 160px;
    color: var(--red);
    font-size: 11px;
    gap: 6px;
    background: var(--red-bg);
    border-radius: var(--radius-sm);
    border: 1px dashed #fca5a5;
}

.empb-skel {
    background: linear-gradient(90deg,#f1f5f9 25%,#e8edf2 50%,#f1f5f9 75%);
    background-size: 200% 100%;
    animation: empbShimmer 1.3s infinite;
    border-radius: 4px;
}

/* ══════════════════════════════════════════════════════════
   SECTION 5 — ATTENDANCE PANEL
   ══════════════════════════════════════════════════════════ */
.att-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.att-nav-btn {
    width: 26px;
    height: 26px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text-2);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    transition: background .15s;
}

    .att-nav-btn:hover {
        background: var(--surface-2);
    }

.att-month-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-1);
}

.att-cal {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 10px;
}

    .att-cal th {
        font-size: 9px;
        font-weight: 700;
        letter-spacing: .6px;
        text-transform: uppercase;
        color: var(--text-3);
        padding: 0 0 5px;
        text-align: center;
    }

    .att-cal td {
        text-align: center;
        padding: 2px;
        width: calc(100% / 7);
    }

.att-day {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-2);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    cursor: default;
    transition: transform .1s;
}

    .att-day:hover {
        transform: scale(1.1);
    }

    .att-day.present {
        background: #dcfce7;
        color: #16a34a;
        font-weight: 700;
    }

    .att-day.absent {
        background: #fee2e2;
        color: #dc2626;
        font-weight: 700;
    }

    .att-day.leave {
        background: #fef3c7;
        color: #d97706;
        font-weight: 700;
    }

    .att-day.holiday {
        background: #ede9fe;
        color: #7c3aed;
        font-weight: 500;
    }

    .att-day.weekend {
        color: var(--text-3);
        font-size: 10px;
    }

    .att-day.today {
        border: 2px solid var(--accent);
        color: var(--accent);
        font-weight: 700;
    }

    .att-day.other-month {
        color: #ddd;
    }

    .att-day.empty {
        visibility: hidden;
    }

.att-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

.att-leg-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    color: var(--text-2);
}

.att-leg-dot {
    width: 8px;
    height: 8px;
    border-radius: 2px;
    flex-shrink: 0;
}

.att-summary {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 6px;
    margin-bottom: 10px;
}

.att-sum-cell {
    background: var(--surface-2);
    border-radius: var(--radius-sm);
    padding: 6px 4px;
    text-align: center;
}

.att-sum-num {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-1);
    display: block;
    line-height: 1;
}

.att-sum-lbl {
    font-size: 9px;
    color: var(--text-3);
    display: block;
    margin-top: 2px;
    text-transform: uppercase;
    letter-spacing: .4px;
}
/* Present on special days — green with pattern to distinguish */
.att-day.present-weekend {
    background: #bbf7d0;
    color: #15803d;
    font-weight: 700;
    outline: 2px solid #e0e7ef;
    outline-offset: -2px;
}

.att-day.present-holiday {
    background: #bbf7d0;
    color: #15803d;
    font-weight: 700;
    outline: 2px solid #c4b5fd;
    outline-offset: -2px;
}

.att-day.present-leave {
    background: #bbf7d0;
    color: #15803d;
    font-weight: 700;
    outline: 2px solid #fde68a;
    outline-offset: -2px;
}
/*.att-gauges {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 8px;
}*/

/*.att-gauge-card {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 8px 6px;
    text-align: center;
}*/

/*.att-gauge-title {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 4px;
}*/

/*.att-gauge-wrap {
    position: relative;
    width: 90px;
    height: 90px;
    margin: 0 auto;
}

.att-gauge-val {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    font-size: 16px;
    font-weight: 700;
    color: var(--text-1);
    line-height: 1;
}

.att-gauge-sub {
    font-size: 9px;
    color: var(--text-3);
    margin-top: 4px;
}*/

.att-skel {
    background: linear-gradient(90deg,#f1f5f9 25%,#e8edf2 50%,#f1f5f9 75%);
    background-size: 200% 100%;
    animation: attShimmer 1.3s infinite;
    border-radius: 4px;
}
/* ── Add these rules to your dashboard.css (replace the att-gauges section) ── */

.att-gauges {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 10px;
}

.att-gauge-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 10px 10px;
    text-align: center;
    box-shadow: var(--shadow);
    transition: box-shadow .2s;
}

    .att-gauge-card:hover {
        box-shadow: var(--shadow-md);
    }

.att-gauge-title {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: .6px;
    margin-bottom: 8px;
}

/* canvas is now self-sizing via JS (120x120) */
.att-gauge-wrap {
    position: relative;
    display: inline-block;
    margin: 0 auto;
}

/* hide the old overlay divs — canvas draws its own text */
.att-gauge-val {
    display: none !important;
}

.att-gauge-sub {
    display: none !important;
}

/* ── Headcount chart tabs ── */
.hc-tabs {
    display: flex;
    gap: 3px;
    background: var(--surface-2);
    border-radius: var(--radius-sm);
    padding: 3px;
}

.hc-tab {
    flex: 1;
    text-align: center;
    padding: 4px 10px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-3);
    cursor: pointer;
    border: none;
    background: none;
    font-family: inherit;
    transition: background .15s, color .15s;
    white-space: nowrap;
}

    .hc-tab.active {
        background: var(--surface);
        color: var(--text-1);
        box-shadow: var(--shadow);
    }

.hc-skel {
    background: linear-gradient(90deg,#f1f5f9 25%,#e8edf2 50%,#f1f5f9 75%);
    background-size: 200% 100%;
    animation: hcShimmer 1.3s infinite;
    border-radius: 6px;
}

.hc-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    color: var(--text-3);
    font-size: 12px;
    gap: 8px;
}

@keyframes hcShimmer {
    0% {
        background-position: 200% 0
    }

    100% {
        background-position: -200% 0
    }
}
/* ══════════════════════════════════════════════════════════
   ANIMATIONS (shared)
   ══════════════════════════════════════════════════════════ */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes shimmer {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

@keyframes empbShimmer {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

@keyframes attShimmer {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

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

/* ============================================================
   dashboard-design-refresh.css
   Complete visual refresh for HR dashboard
   Import AFTER dashboard.css
   ============================================================ */

/* ── Page background ─────────────────────────────────────── */
body, .main-content, .content-area {
    background: #f0f4f8 !important;
}

/* ── Section dividers ────────────────────────────────────── */
.dash-section-label {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 20px 0 12px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--text-3);
}

    .dash-section-label::after {
        content: '';
        flex: 1;
        height: 1px;
        background: var(--border);
    }

/* ── Panel refresh ───────────────────────────────────────── */
.hr-panel {
    border: none !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04) !important;
    border-radius: 14px !important;
}

.hp-head {
    border-bottom: 1px solid #f1f5f9 !important;
    padding: 14px 18px 12px !important;
}

.hp-title {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--text-1) !important;
}

/* ── KPI cards refresh ───────────────────────────────────── */
.kpi-card {
    border: none !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04) !important;
    border-radius: 14px !important;
    background: #fff !important;
}

    .kpi-card:hover {
        transform: translateY(-3px) !important;
        box-shadow: 0 8px 24px rgba(0,0,0,.1) !important;
    }

/* ── Color accent on panel left border ───────────────────── */
.hr-panel.accent-blue {
    border-right: 4px solid #2563eb !important;
}

.hr-panel.accent-green {
    border-right: 4px solid #16a34a !important;
}

.hr-panel.accent-amber {
    border-right: 4px solid #d97706 !important;
}

.hr-panel.accent-purple {
    border-right: 4px solid #7c3aed !important;
}

.hr-panel.accent-teal {
    border-right: 4px solid #0d9488 !important;
}

.hr-panel.accent-red {
    border-right: 4px solid #dc2626 !important;
}

.hr-panel.accent-pink {
    border-right: 4px solid #be185d !important;
}

/* ── Tab bar refresh ─────────────────────────────────────── */
.hc-tabs {
    background: #f0f4f8 !important;
    border-radius: 8px !important;
    padding: 3px !important;
    gap: 2px !important;
}

.hc-tab {
    border-radius: 6px !important;
    font-size: 11px !important;
    padding: 5px 12px !important;
    font-weight: 600 !important;
    color: var(--text-3) !important;
    transition: all .15s !important;
}

    .hc-tab.active {
        background: #fff !important;
        color: var(--accent) !important;
        box-shadow: 0 1px 4px rgba(0,0,0,.1) !important;
    }

    .hc-tab:hover:not(.active) {
        color: var(--text-2) !important;
        background: rgba(255,255,255,.6) !important;
    }

/* ── Attendance calendar refresh ─────────────────────────── */
.att-sum-cell {
    background: #fff !important;
    border: 1px solid var(--border) !important;
    border-radius: 8px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.04) !important;
}

.att-sum-num {
    font-size: 18px !important;
    font-weight: 700 !important;
}

.att-day {
    width: 26px !important;
    height: 26px !important;
    border-radius: 6px !important;
    font-size: 11px !important;
}

    .att-day.present {
        background: #dcfce7 !important;
        color: #15803d !important;
    }

    .att-day.absent {
        background: #fee2e2 !important;
        color: #dc2626 !important;
    }

    .att-day.leave {
        background: #fef3c7 !important;
        color: #d97706 !important;
    }

    .att-day.holiday {
        background: #ede9fe !important;
        color: #7c3aed !important;
    }

    .att-day.weekend {
        color: #cbd5e1 !important;
    }

    .att-day.today {
        border: 2px solid var(--accent) !important;
        color: var(--accent) !important;
        font-weight: 700 !important;
        background: #eff6ff !important;
    }

/* ── Employee badge refresh ──────────────────────────────── */
.empb-card {
    border-radius: 8px !important;
    box-shadow: 0 2px 8px rgba(135,206,250,.2) !important;
}

.empb-photo-col {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%) !important;
}

/* ── Status donut panel ──────────────────────────────────── */
#status-donut-center {
    font-size: 22px !important;
    font-weight: 800 !important;
}

/* ── Chart tooltips ──────────────────────────────────────── */
/* Chart.js tooltips are styled via JS options */

/* ── Distribution chart bars ─────────────────────────────── */
#dist-chart-area canvas,
#hc-chart-area canvas {
    border-radius: 4px;
}

/* ── Row spacing ─────────────────────────────────────────── */
.row.g-3 {
    margin-bottom: 4px !important;
}

/* ── Legend dots ─────────────────────────────────────────── */
.att-leg-dot {
    width: 10px !important;
    height: 10px !important;
    border-radius: 3px !important;
}

/* ── Search inputs ───────────────────────────────────────── */
#empb-id-input,
#att-emp-input {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    transition: all .2s !important;
}

    #empb-id-input:focus,
    #att-emp-input:focus {
        background: #fff !important;
        border-color: #87cefa !important;
        box-shadow: 0 0 0 3px rgba(135,206,250,.15) !important;
    }

/* ── KPI trend badges ────────────────────────────────────── */
.kpi-trend {
    border-radius: 99px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    padding: 3px 8px !important;
}

/* ── Scrollbar ───────────────────────────────────────────── */
::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 99px;
}

    ::-webkit-scrollbar-thumb:hover {
        background: #94a3b8;
    }

/* ── Shimmer animation ───────────────────────────────────── */
.hc-skel, .att-skel, .empb-skel {
    background: linear-gradient( 90deg, #f1f5f9 25%, #e8edf2 50%, #f1f5f9 75% ) !important;
    background-size: 200% 100% !important;
}

/* ── Responsive tweaks ───────────────────────────────────── */
@media (max-width: 1200px) {
    .kpi-grid {
        gap: 10px !important;
    }
}

@media (max-width: 768px) {
    .hp-head {
        flex-wrap: wrap;
        gap: 8px;
    }

    .hc-tabs {
        width: 100%;
    }
}