/* =========================================================
   OHHMYGADGET HR SYSTEM - COMPLETE CUSTOM CSS
   NO TAILWIND DEPENDENCIES
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

/* =========================================================
   RESET & BASE
   ========================================================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background: #f0f4f8;
    color: #1a2332;
    line-height: 1.6;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* =========================================================
   LAYOUT UTILITIES
   ========================================================= */
.container {
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 16px;
    padding-right: 16px;
}

.max-w-6xl {
    max-width: 1152px;
}

.max-w-4xl {
    max-width: 896px;
}

.max-w-2xl {
    max-width: 672px;
}

.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

.p-4 { padding: 16px; }
.p-5 { padding: 20px; }
.p-6 { padding: 24px; }
.p-8 { padding: 32px; }
.p-10 { padding: 40px; }

.px-4 { padding-left: 16px; padding-right: 16px; }
.px-5 { padding-left: 20px; padding-right: 20px; }
.px-6 { padding-left: 24px; padding-right: 24px; }

.py-2 { padding-top: 8px; padding-bottom: 8px; }
.py-3 { padding-top: 12px; padding-bottom: 12px; }
.py-4 { padding-top: 16px; padding-bottom: 16px; }

.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 12px; }
.mb-4 { margin-bottom: 16px; }
.mb-5 { margin-bottom: 20px; }
.mb-6 { margin-bottom: 24px; }
.mb-8 { margin-bottom: 32px; }

.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 12px; }
.mt-4 { margin-top: 16px; }
.mt-5 { margin-top: 20px; }
.mt-6 { margin-top: 24px; }

.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }
.gap-5 { gap: 20px; }

.space-y-2 > * + * { margin-top: 8px; }
.space-y-3 > * + * { margin-top: 12px; }
.space-y-4 > * + * { margin-top: 16px; }
.space-y-5 > * + * { margin-top: 20px; }

/* =========================================================
   FLEXBOX UTILITIES
   ========================================================= */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-row { flex-direction: row; }
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1; }
.flex-shrink-0 { flex-shrink: 0; }

.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.items-stretch { align-items: stretch; }

.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-start { justify-content: flex-start; }
.justify-end { justify-content: flex-end; }

/* =========================================================
   TEXT UTILITIES
   ========================================================= */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.text-xs { font-size: 12px; }
.text-sm { font-size: 14px; }
.text-base { font-size: 16px; }
.text-lg { font-size: 18px; }
.text-xl { font-size: 20px; }
.text-2xl { font-size: 24px; }
.text-3xl { font-size: 30px; }

.font-light { font-weight: 300; }
.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }

.text-gray-400 { color: #94a3b8; }
.text-gray-500 { color: #6b7a8e; }
.text-gray-600 { color: #475569; }
.text-gray-700 { color: #334155; }
.text-gray-900 { color: #0f172a; }

.text-blue-600 { color: #2563eb; }
.text-blue-700 { color: #1d4ed8; }
.text-green-600 { color: #16a34a; }
.text-green-700 { color: #15803d; }
.text-red-600 { color: #dc2626; }
.text-red-700 { color: #b91c1c; }

.bg-white { background: #ffffff; }
.bg-gray-50 { background: #f8fafc; }
.bg-gray-100 { background: #f1f5f9; }
.bg-gray-200 { background: #e2e8f0; }
.bg-blue-50 { background: #eff6ff; }
.bg-blue-100 { background: #dbeafe; }
.bg-blue-600 { background: #2563eb; }
.bg-green-100 { background: #dcfce7; }
.bg-green-50 { background: #f0fdf4; }
.bg-red-100 { background: #fee2e2; }
.bg-red-50 { background: #fef2f2; }
.bg-yellow-100 { background: #fef3c7; }

/* =========================================================
   SHADOWS & BORDERS
   ========================================================= */
.shadow { box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
.shadow-sm { box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
.shadow-md { box-shadow: 0 4px 6px rgba(0,0,0,0.07); }
.shadow-lg { box-shadow: 0 10px 15px rgba(0,0,0,0.08); }
.shadow-xl { box-shadow: 0 20px 25px rgba(0,0,0,0.1); }

.rounded { border-radius: 4px; }
.rounded-sm { border-radius: 4px; }
.rounded-md { border-radius: 8px; }
.rounded-lg { border-radius: 12px; }
.rounded-xl { border-radius: 16px; }
.rounded-full { border-radius: 9999px; }

.border { border: 1px solid #e2e8f0; }
.border-b { border-bottom: 1px solid #e2e8f0; }
.border-t { border-top: 1px solid #e2e8f0; }
.border-l { border-left: 1px solid #e2e8f0; }
.border-r { border-right: 1px solid #e2e8f0; }

/* =========================================================
   BUTTONS
   ========================================================= */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    padding: 8px 18px;

    border: none;
    border-radius: 8px;

    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    text-align: center;

    cursor: pointer;
    text-decoration: none;

    transition: all 0.2s ease;
    font-family: inherit;

    vertical-align: middle;
    white-space: nowrap;
}

/* Make every button icon properly centered */
.btn svg {
    width: 18px;
    height: 18px;
    display: block;
    flex: 0 0 18px;
    margin: 0;
    padding: 0;
}

/* Button variants */

.btn-blue {
    background: #2563eb;
    color: white;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
}

.btn-blue:hover {
    background: #1d4ed8;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.35);
}

.btn-green {
    background: #16a34a;
    color: white;
}

.btn-green:hover {
    background: #15803d;
    transform: translateY(-2px);
}

.btn-red {
    background: #dc2626;
    color: white;
}

.btn-red:hover {
    background: #b91c1c;
}

.btn-gray {
    background: #e2e8f0;
    color: #334155;
}

.btn-gray:hover {
    background: #cbd5e1;
    transform: translateY(-2px);
}

.btn-outline-blue {
    background: transparent;
    color: #2563eb;
    border: 2px solid #2563eb;
}

.btn-outline-blue:hover {
    background: #2563eb;
    color: white;
}

/* Button sizes */

.btn-sm {
    padding: 4px 12px;
    font-size: 12px;
}

.btn-sm svg {
    width: 16px;
    height: 16px;
    flex-basis: 16px;
}

.btn-lg {
    padding: 12px 28px;
    font-size: 16px;
}

.btn-lg svg {
    width: 20px;
    height: 20px;
    flex-basis: 20px;
}

.btn-block {
    width: 100%;
    justify-content: center;
}

/* =========================================================
   CARDS
   ========================================================= */
.card {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px 24px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    transition: all 0.25s ease;
}

.card:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.card-title {
    font-size: 18px;
    font-weight: 700;
    color: #1a2332;
}

.card-subtitle {
    color: #6b7a8e;
    font-size: 14px;
    margin-top: 2px;
}

/* =========================================================
   SIDEBAR (from your existing CSS)
   ========================================================= */
.sidebar {
    position: fixed;
    left: 0;
    top: 0;
    width: 250px;
    height: 100vh;
    background: linear-gradient(180deg, #0a1628 0%, #1a3a6b 100%);
    padding: 24px 16px;
    overflow-y: auto;
    z-index: 1000;
}

.sidebar-logo h2 {
    color: white;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.5px;
}

.sidebar-logo span {
    color: #7a9bcb;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.sidebar-nav {
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.nav-item {
    display: block;
    color: #9bb5d9;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s;
}

.nav-item:hover {
    background: rgba(255, 255, 255, 0.08);
    color: white;
}

.nav-item.active {
    background: white;
    color: #1a3a6b;
    font-weight: 600;
}

.sidebar-bottom {
    margin-top: 40px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* =========================================================
   MAIN CONTENT
   ========================================================= */
.main-content {
    margin-left: 250px;
    min-height: 100vh;
}

/* =========================================================
   TOPBAR
   ========================================================= */
.topbar {
    background: white;
    padding: 16px 32px;
    border-bottom: 1px solid #e8edf3;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 500;
}

.topbar h1 {
    font-size: 22px;
    font-weight: 700;
    color: #1a2332;
}

.topbar-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

.user-profile {
    display: flex;
    align-items: center;
    gap: 10px;
}

.user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2563eb, #1a3a6b);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 16px;
    flex-shrink: 0;
}

.user-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.user-info strong {
    display: block;
    font-size: 14px;
    color: #1a2332;
}

.user-info span {
    font-size: 12px;
    color: #7a8a9e;
}

.topbar-logout {
    color: #dc2626;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    padding: 6px 12px;
    border-radius: 6px;
    transition: background 0.2s;
}

.topbar-logout:hover {
    background: #fee2e2;
}

/* =========================================================
   PAGE CONTENT
   ========================================================= */
.page-content {
    padding: 28px 32px;
    max-width: 1400px;
}

/* =========================================================
   STAT CARDS
   ========================================================= */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 28px;
}

.stat-card {
    background: white;
    padding: 20px 24px;
    border-radius: 12px;
    border: 1px solid #e8edf3;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: all 0.25s;
}

.stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.stat-card .stat-label {
    font-size: 13px;
    font-weight: 600;
    color: #6b7a8e;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-card .stat-value {
    font-size: 32px;
    font-weight: 700;
    color: #1a2332;
    margin-top: 4px;
}

.stat-card .stat-sub {
    font-size: 12px;
    color: #8a9aae;
    margin-top: 4px;
}

/* =========================================================
   STATUS BADGES
   ========================================================= */
.badge {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
}

.badge-blue {
    background: #dbeafe;
    color: #1d4ed8;
}

.badge-green {
    background: #dcfce7;
    color: #15803d;
}

.badge-red {
    background: #fee2e2;
    color: #dc2626;
}

.badge-yellow {
    background: #fef3c7;
    color: #b45309;
}

.badge-gray {
    background: #f1f5f9;
    color: #64748b;
}

.badge-new {
    background: #dbeafe;
    color: #1d4ed8;
}

.badge-read {
    background: #dcfce7;
    color: #15803d;
}

/* =========================================================
   TABLES
   ========================================================= */
.table-card {
    background: white;
    border-radius: 12px;
    border: 1px solid #e8edf3;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.table-toolbar {
    padding: 16px 20px;
    border-bottom: 1px solid #e8edf3;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    background: #f8fafc;
}

.table-toolbar .search-input {
    padding: 8px 14px;
    border: 1px solid #d1d9e6;
    border-radius: 8px;
    font-size: 14px;
    flex: 1;
    min-width: 200px;
}

.table-toolbar .search-input:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.table-toolbar .filter-select {
    padding: 8px 14px;
    border: 1px solid #d1d9e6;
    border-radius: 8px;
    font-size: 14px;
    background: white;
}

.table-toolbar .filter-select:focus {
    outline: none;
    border-color: #2563eb;
}

.table-wrapper {
    overflow-x: auto;
}

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

.table th {
    text-align: left;
    padding: 12px 18px;
    background: #f8fafc;
    color: #64748b;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid #e8edf3;
}

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

.table tbody tr:hover {
    background: #f8fafc;
}

.table-employee {
    display: flex;
    align-items: center;
    gap: 10px;
}

.table-avatar {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: #dbeafe;
    color: #2563eb;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 11px;
    flex-shrink: 0;
}

.table-employee strong {
    display: block;
    font-size: 14px;
    color: #1a2332;
}

.table-employee span {
    display: block;
    font-size: 12px;
    color: #6b7a8e;
}

.empty-table {
    text-align: center;
    padding: 40px !important;
    color: #6b7a8e;
}

/* =========================================================
   FORMS
   ========================================================= */
.form-card {
    background: white;
    border: 1px solid #e8edf3;
    border-radius: 12px;
    padding: 28px 32px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px 24px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.form-group label {
    font-size: 13px;
    font-weight: 600;
    color: #1a2332;
}

.form-group input,
.form-group select,
.form-group textarea {
    padding: 9px 14px;
    border: 1px solid #d1d9e6;
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    transition: all 0.2s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.form-group textarea {
    resize: vertical;
    min-height: 80px;
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #e8edf3;
}

/* =========================================================
   MOBILE MENU
   ========================================================= */
.mobile-menu-btn {
    display: none;
    background: none;
    border: none;
    font-size: 28px;
    cursor: pointer;
    color: #1a2332;
}

.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 999;
}

/* =========================================================
   NOTIFICATIONS
   ========================================================= */
.notification-item {
    display: block;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px;
    transition: all 0.2s ease;
    text-decoration: none;
    color: inherit;
}

.notification-item:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

.notification-item .notif-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.notification-item .notif-title {
    font-size: 18px;
    font-weight: 700;
    color: #1a2332;
}

.notification-item .notif-meta {
    color: #6b7a8e;
    font-size: 14px;
}

.notification-item .notif-message {
    color: #334155;
    margin-top: 8px;
}

.notification-item .notif-tags {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

.notification-item .notif-tags .tag {
    font-size: 12px;
    padding: 2px 10px;
    border-radius: 4px;
    background: #f1f5f9;
    color: #64748b;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1024px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .sidebar {
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        width: 280px;
    }

    .sidebar.mobile-open {
        transform: translateX(0);
    }

    .sidebar-overlay.active {
        display: block;
    }

    .mobile-menu-btn {
        display: block;
    }

    .main-content {
        margin-left: 0;
    }

    .topbar {
        padding: 12px 16px;
    }

    .topbar h1 {
        font-size: 18px;
    }

    .page-content {
        padding: 16px;
    }

    .stats-grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .stat-card {
        padding: 16px;
    }

    .stat-card .stat-value {
        font-size: 24px;
    }

    .form-grid {
        grid-template-columns: 1fr;
    }

    .table-toolbar {
        flex-direction: column;
    }

    .table-toolbar .search-input {
        min-width: auto;
        width: 100%;
    }

    .table-toolbar .filter-select {
        width: 100%;
    }

    .table {
        min-width: 700px;
    }

    .user-info {
        display: none;
    }

    .topbar-logout span {
        display: none;
    }

    .notification-item .notif-header {
        flex-direction: column;
        align-items: flex-start;
    }
}

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

    .stat-card .stat-value {
        font-size: 22px;
    }
}

/* =========================================================
   MODERN DASHBOARD STYLES
   ========================================================= */

/* --- Stats Grid --- */
.stats-overview {
    margin-bottom: 28px;
}

.stats-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.stat-card-modern {
    background: white;
    border-radius: 16px;
    padding: 22px 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    border: 1px solid #e8edf3;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: all 0.3s ease;
}

.stat-card-modern:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(37, 99, 235, 0.10);
    border-color: #bfdbfe;
}

.stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.stat-icon.blue {
    background: #eff6ff;
    color: #2563eb;
}
.stat-icon.green {
    background: #f0fdf4;
    color: #16a34a;
}
.stat-icon.orange {
    background: #fffbeb;
    color: #d97706;
}
.stat-icon.red {
    background: #fef2f2;
    color: #dc2626;
}
.stat-icon.purple {
    background: #f5f3ff;
    color: #7c3aed;
}
.stat-icon.cyan {
    background: #ecfeff;
    color: #0891b2;
}

.stat-content {
    flex: 1;
}

.stat-content .stat-label {
    display: block;
    font-size: 13px;
    color: #6b7a8e;
    font-weight: 500;
}

.stat-content .stat-number {
    display: block;
    font-size: 28px;
    font-weight: 700;
    color: #1a2332;
    line-height: 1.2;
}

.stat-content .stat-change {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    margin-top: 4px;
    padding: 2px 10px;
    border-radius: 20px;
}

.stat-content .stat-change.up {
    background: #f0fdf4;
    color: #16a34a;
}

.stat-content .stat-change.down {
    background: #fef2f2;
    color: #dc2626;
}

/* --- Dashboard Main Layout --- */
.dashboard-main {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 28px;
}

.dashboard-left {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.dashboard-right {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* --- Modern Cards --- */
.card-modern {
    background: white;
    border-radius: 16px;
    border: 1px solid #e8edf3;
    padding: 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: all 0.3s ease;
}

.card-modern:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

.card-modern-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
}

.card-modern-header h3 {
    font-size: 16px;
    font-weight: 700;
    color: #1a2332;
}

.card-modern-header p {
    font-size: 13px;
    color: #6b7a8e;
    margin-top: 2px;
}

.link-arrow {
    color: #2563eb;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}

.link-arrow:hover {
    color: #1d4ed8;
    transform: translateX(4px);
}

/* --- Employee List Modern --- */
.employee-list-modern {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.employee-item-modern {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border-radius: 12px;
    transition: all 0.2s ease;
    cursor: pointer;
}

.employee-item-modern:hover {
    background: #f8fafc;
}

.employee-avatar-modern {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: linear-gradient(135deg, #dbeafe, #eff6ff);
    color: #2563eb;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
}

.employee-info-modern {
    flex: 1;
}

.employee-info-modern .employee-name {
    font-size: 14px;
    font-weight: 600;
    color: #1a2332;
}

.employee-info-modern .employee-role {
    font-size: 12px;
    color: #6b7a8e;
}

.employee-badge {
    flex-shrink: 0;
}

/* --- Attendance Summary --- */
.attendance-summary {
    display: flex;
    align-items: center;
    gap: 32px;
    margin-bottom: 20px;
    padding: 16px;
    background: #f8fafc;
    border-radius: 12px;
}

.attendance-circle {
    position: relative;
    width: 100px;
    height: 100px;
    flex-shrink: 0;
}

.attendance-circle svg {
    transform: rotate(-90deg);
}

.attendance-circle svg circle {
    transition: stroke-dasharray 1s ease;
}

.attendance-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.attendance-center .attendance-percent {
    font-size: 22px;
    font-weight: 700;
    color: #1a2332;
    line-height: 1;
}

.attendance-center .attendance-label {
    font-size: 10px;
    color: #6b7a8e;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.attendance-stats {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.attendance-stat-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: #334155;
}

.attendance-stat-item .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.attendance-stat-item .dot.present {
    background: #22c55e;
}
.attendance-stat-item .dot.absent {
    background: #ef4444;
}
.attendance-stat-item .dot.leave {
    background: #f59e0b;
}

.attendance-stat-item strong {
    color: #1a2332;
}

/* --- Attendance List --- */
.attendance-list-modern {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.attendance-item-modern {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 14px;
    border-radius: 10px;
    transition: all 0.2s ease;
}

.attendance-item-modern:hover {
    background: #f8fafc;
}

.attendance-avatar {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: #dbeafe;
    color: #2563eb;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
}

.attendance-info {
    flex: 1;
}

.attendance-info .attendance-name {
    font-size: 13px;
    font-weight: 600;
    color: #1a2332;
}

.attendance-info .attendance-time {
    font-size: 11px;
    color: #6b7a8e;
}

/* --- Quick Actions --- */
.quick-actions-modern {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 14px;
    margin-top: 4px;
}

.quick-action-item {
    background: white;
    border: 1px solid #e8edf3;
    border-radius: 14px;
    padding: 20px 16px;
    text-align: center;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.quick-action-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(37, 99, 235, 0.10);
    border-color: #bfdbfe;
}

.quick-action-item .qa-icon {
    font-size: 28px;
    margin-bottom: 8px;
}

.quick-action-item .qa-text {
    font-size: 12px;
    font-weight: 600;
    color: #1a2332;
}

/* --- Empty State Modern --- */
.empty-state-modern {
    text-align: center;
    padding: 30px 20px;
    color: #6b7a8e;
}

.empty-state-modern p {
    font-size: 13px;
}

/* =========================================================
   RESPONSIVE - MODERN DASHBOARD
   ========================================================= */

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

    .quick-actions-modern {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 900px) {
    .dashboard-main {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .stats-grid-4 {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .stat-card-modern {
        padding: 16px 18px;
    }

    .stat-content .stat-number {
        font-size: 22px;
    }

    .stat-icon {
        width: 40px;
        height: 40px;
    }

    .attendance-summary {
        flex-direction: column;
        align-items: center;
        gap: 16px;
    }

    .attendance-stats {
        width: 100%;
    }

    .quick-actions-modern {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }

    .quick-action-item {
        padding: 14px 12px;
    }

    .quick-action-item .qa-icon {
        font-size: 22px;
    }

    .card-modern {
        padding: 18px;
    }
}

@media (max-width: 480px) {
    .stats-grid-4 {
        grid-template-columns: 1fr;
    }

    .quick-actions-modern {
        grid-template-columns: repeat(2, 1fr);
    }

    .attendance-circle {
        width: 80px;
        height: 80px;
    }

    .attendance-center .attendance-percent {
        font-size: 18px;
    }
}

/* =========================================================
   WELCOME BANNER MODERN
   ========================================================= */

.welcome-banner-modern {
    background: linear-gradient(135deg, #0f3b82 0%, #1e40af 50%, #3b82f6 100%);
    border-radius: 16px;
    padding: 28px 32px;
    margin-bottom: 28px;
    color: white;
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(15, 59, 130, 0.25);
}

.welcome-banner-modern::before {
    content: "";
    position: absolute;
    top: -50%;
    right: -10%;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    animation: floatBanner 8s ease-in-out infinite;
}

.welcome-banner-modern::after {
    content: "";
    position: absolute;
    bottom: -30%;
    left: 20%;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.03);
    animation: floatBanner 10s ease-in-out infinite reverse;
}

@keyframes floatBanner {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(20px, -15px) scale(1.05); }
}

.welcome-banner-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 1;
}

.welcome-greeting {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
}

.greeting-icon {
    font-size: 28px;
}

.greeting-text {
    font-size: 18px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
}

.welcome-title {
    font-size: 26px;
    font-weight: 750;
    color: white;
    letter-spacing: -0.5px;
}

.welcome-subtitle {
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    margin-top: 2px;
}

.welcome-date {
    text-align: right;
    flex-shrink: 0;
}

.welcome-date .date-day {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
}

.welcome-date .date-full {
    display: block;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
}

/* =========================================================
   MODERN DASHBOARD STYLES
   ========================================================= */

/* --- Stats Grid --- */
.stats-overview {
    margin-bottom: 28px;
}

.stats-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.stat-card-modern {
    background: white;
    border-radius: 16px;
    padding: 22px 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    border: 1px solid #e8edf3;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: all 0.3s ease;
}

.stat-card-modern:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(37, 99, 235, 0.10);
    border-color: #bfdbfe;
}

.stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.stat-icon.blue {
    background: #eff6ff;
    color: #2563eb;
}
.stat-icon.green {
    background: #f0fdf4;
    color: #16a34a;
}
.stat-icon.orange {
    background: #fffbeb;
    color: #d97706;
}
.stat-icon.red {
    background: #fef2f2;
    color: #dc2626;
}
.stat-icon.purple {
    background: #f5f3ff;
    color: #7c3aed;
}
.stat-icon.cyan {
    background: #ecfeff;
    color: #0891b2;
}

.stat-content {
    flex: 1;
}

.stat-content .stat-label {
    display: block;
    font-size: 13px;
    color: #6b7a8e;
    font-weight: 500;
}

.stat-content .stat-number {
    display: block;
    font-size: 28px;
    font-weight: 700;
    color: #1a2332;
    line-height: 1.2;
}

.stat-content .stat-change {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    margin-top: 4px;
    padding: 2px 10px;
    border-radius: 20px;
}

.stat-content .stat-change.up {
    background: #f0fdf4;
    color: #16a34a;
}

.stat-content .stat-change.down {
    background: #fef2f2;
    color: #dc2626;
}

/* --- Dashboard Main Layout --- */
.dashboard-main {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 28px;
}

.dashboard-left {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.dashboard-right {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* --- Modern Cards --- */
.card-modern {
    background: white;
    border-radius: 16px;
    border: 1px solid #e8edf3;
    padding: 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: all 0.3s ease;
}

.card-modern:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

.card-modern-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
}

.card-modern-header h3 {
    font-size: 16px;
    font-weight: 700;
    color: #1a2332;
}

.card-modern-header p {
    font-size: 13px;
    color: #6b7a8e;
    margin-top: 2px;
}

.link-arrow {
    color: #2563eb;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}

.link-arrow:hover {
    color: #1d4ed8;
    transform: translateX(4px);
}

/* --- Employee List Modern --- */
.employee-list-modern {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.employee-item-modern {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border-radius: 12px;
    transition: all 0.2s ease;
    cursor: pointer;
}

.employee-item-modern:hover {
    background: #f8fafc;
}

.employee-avatar-modern {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: linear-gradient(135deg, #dbeafe, #eff6ff);
    color: #2563eb;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
}

.employee-info-modern {
    flex: 1;
}

.employee-info-modern .employee-name {
    font-size: 14px;
    font-weight: 600;
    color: #1a2332;
}

.employee-info-modern .employee-role {
    font-size: 12px;
    color: #6b7a8e;
}

.employee-badge {
    flex-shrink: 0;
}

/* --- Attendance Summary --- */
.attendance-summary {
    display: flex;
    align-items: center;
    gap: 32px;
    margin-bottom: 20px;
    padding: 16px;
    background: #f8fafc;
    border-radius: 12px;
}

.attendance-circle {
    position: relative;
    width: 100px;
    height: 100px;
    flex-shrink: 0;
}

.attendance-circle svg {
    transform: rotate(-90deg);
}

.attendance-circle svg circle {
    transition: stroke-dasharray 1s ease;
}

.attendance-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.attendance-center .attendance-percent {
    font-size: 22px;
    font-weight: 700;
    color: #1a2332;
    line-height: 1;
}

.attendance-center .attendance-label {
    font-size: 10px;
    color: #6b7a8e;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.attendance-stats {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.attendance-stat-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: #334155;
}

.attendance-stat-item .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.attendance-stat-item .dot.present {
    background: #22c55e;
}
.attendance-stat-item .dot.absent {
    background: #ef4444;
}
.attendance-stat-item .dot.leave {
    background: #f59e0b;
}

.attendance-stat-item strong {
    color: #1a2332;
}

/* --- Attendance List --- */
.attendance-list-modern {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.attendance-item-modern {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 14px;
    border-radius: 10px;
    transition: all 0.2s ease;
}

.attendance-item-modern:hover {
    background: #f8fafc;
}

.attendance-avatar {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: #dbeafe;
    color: #2563eb;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
}

.attendance-info {
    flex: 1;
}

.attendance-info .attendance-name {
    font-size: 13px;
    font-weight: 600;
    color: #1a2332;
}

.attendance-info .attendance-time {
    font-size: 11px;
    color: #6b7a8e;
}

/* --- Quick Actions --- */
.quick-actions-modern {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 14px;
    margin-top: 4px;
}

.quick-action-item {
    background: white;
    border: 1px solid #e8edf3;
    border-radius: 14px;
    padding: 20px 16px;
    text-align: center;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.quick-action-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(37, 99, 235, 0.10);
    border-color: #bfdbfe;
}

.quick-action-item .qa-icon {
    font-size: 28px;
    margin-bottom: 8px;
}

.quick-action-item .qa-text {
    font-size: 12px;
    font-weight: 600;
    color: #1a2332;
}

/* --- Empty State Modern --- */
.empty-state-modern {
    text-align: center;
    padding: 30px 20px;
    color: #6b7a8e;
}

.empty-state-modern p {
    font-size: 13px;
}

/* =========================================================
   RESPONSIVE - MODERN DASHBOARD
   ========================================================= */

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

    .quick-actions-modern {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 900px) {
    .dashboard-main {
        grid-template-columns: 1fr;
    }

    .welcome-banner-content {
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }

    .welcome-date {
        text-align: center;
    }

    .welcome-greeting {
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .welcome-banner-modern {
        padding: 20px;
    }

    .welcome-title {
        font-size: 20px;
    }

    .welcome-greeting .greeting-text {
        font-size: 16px;
    }

    .stats-grid-4 {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .stat-card-modern {
        padding: 16px 18px;
    }

    .stat-content .stat-number {
        font-size: 22px;
    }

    .stat-icon {
        width: 40px;
        height: 40px;
    }

    .attendance-summary {
        flex-direction: column;
        align-items: center;
        gap: 16px;
    }

    .attendance-stats {
        width: 100%;
    }

    .quick-actions-modern {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }

    .quick-action-item {
        padding: 14px 12px;
    }

    .quick-action-item .qa-icon {
        font-size: 22px;
    }

    .card-modern {
        padding: 18px;
    }
}

@media (max-width: 480px) {
    .stats-grid-4 {
        grid-template-columns: 1fr;
    }

    .quick-actions-modern {
        grid-template-columns: repeat(2, 1fr);
    }

    .attendance-circle {
        width: 80px;
        height: 80px;
    }

    .attendance-center .attendance-percent {
        font-size: 18px;
    }

    .welcome-banner-modern {
        padding: 16px;
    }

    .welcome-title {
        font-size: 18px;
    }
}

.welcome-date .date-time {
    display: block;
    font-size: 20px;
    font-weight: 700;
    color: #ffffff;
    margin-top: 4px;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.5px;
}

/* Quick Actions - already in your CSS */
.quick-actions-modern {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-top: 24px;
}

.quick-action-item {
    background: white;
    border: 1px solid #e8edf3;
    border-radius: 14px;
    padding: 20px 16px;
    text-align: center;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.quick-action-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(37, 99, 235, 0.10);
    border-color: #bfdbfe;
}

.quick-action-item .qa-icon {
    font-size: 28px;
    margin-bottom: 8px;
}

.quick-action-item .qa-text {
    font-size: 12px;
    font-weight: 600;
    color: #1a2332;
}

@media (max-width: 768px) {
    .quick-actions-modern {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* =========================================================
   PAGE HEADER (No Banner)
   ========================================================= */

.page-header-modern {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 28px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e8edf3;
    flex-wrap: wrap;
    gap: 12px;
}

.page-title {
    font-size: 24px;
    font-weight: 700;
    color: #1a2332;
}

.page-subtitle {
    color: #6b7a8e;
    font-size: 14px;
    margin-top: 2px;
}

.page-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* =========================================================
   PROFILE HEADER CARD
   ========================================================= */

.profile-header-card {
    background: white;
    border-radius: 16px;
    border: 1px solid #e8edf3;
    padding: 24px 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.profile-header-left {
    display: flex;
    align-items: center;
    gap: 20px;
}

.profile-avatar-large {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2563eb, #1a3a6b);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 700;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
}

.profile-header-info h2 {
    font-size: 22px;
    font-weight: 700;
    color: #1a2332;
}

.profile-header-info .profile-role {
    color: #6b7a8e;
    font-size: 14px;
}

.profile-header-info .profile-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 6px;
}

.profile-header-info .profile-id {
    font-size: 13px;
    color: #6b7a8e;
}

.profile-header-right {
    display: flex;
    gap: 32px;
}

.profile-stat {
    text-align: right;
}

.profile-stat .profile-stat-label {
    display: block;
    font-size: 11px;
    color: #6b7a8e;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.profile-stat .profile-stat-value {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: #1a2332;
}

/* =========================================================
   INFO CARDS
   ========================================================= */

.detail-grid-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 24px;
}

.info-card {
    background: white;
    border-radius: 14px;
    border: 1px solid #e8edf3;
    padding: 20px 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: all 0.3s ease;
}

.info-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

.info-card-full {
    background: white;
    border-radius: 14px;
    border: 1px solid #e8edf3;
    padding: 20px 24px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: all 0.3s ease;
}

.info-card-full:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

.info-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f1f5f9;
}

.info-card-header .info-card-icon {
    font-size: 20px;
}

.info-card-header h3 {
    font-size: 16px;
    font-weight: 700;
    color: #1a2332;
    margin: 0;
}

.info-card-header .ml-auto {
    margin-left: auto;
}

.info-card-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.info-card-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 24px;
}

.info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid #f8fafc;
}

.info-row:last-child {
    border-bottom: none;
}

.info-row .info-label {
    font-size: 13px;
    color: #6b7a8e;
    font-weight: 500;
}

.info-row .info-value {
    font-size: 13px;
    color: #1a2332;
    font-weight: 500;
    text-align: right;
}

/* =========================================================
   BADGE VARIANTS
   ========================================================= */

.badge {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
}

.badge-blue {
    background: #dbeafe;
    color: #1d4ed8;
}

.badge-green {
    background: #dcfce7;
    color: #15803d;
}

.badge-gray {
    background: #f1f5f9;
    color: #64748b;
}

.badge-yellow {
    background: #fef3c7;
    color: #b45309;
}

.badge-red {
    background: #fee2e2;
    color: #dc2626;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 768px) {
    .page-header-modern {
        flex-direction: column;
        align-items: flex-start;
    }

    .page-actions {
        width: 100%;
    }

    .page-actions .btn {
        flex: 1;
        justify-content: center;
    }

    .profile-header-card {
        flex-direction: column;
        align-items: flex-start;
    }

    .profile-header-left {
        flex-direction: column;
        text-align: center;
        width: 100%;
    }

    .profile-header-right {
        width: 100%;
        justify-content: space-around;
    }

    .profile-stat {
        text-align: center;
    }

    .detail-grid-2col {
        grid-template-columns: 1fr;
    }

    .info-card-grid {
        grid-template-columns: 1fr;
    }

    .info-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }

    .info-row .info-value {
        text-align: left;
    }
}

@media (max-width: 480px) {
    .profile-header-right {
        flex-direction: column;
        gap: 8px;
    }

    .profile-avatar-large {
        width: 60px;
        height: 60px;
        font-size: 22px;
    }

    .profile-header-info h2 {
        font-size: 18px;
    }
}
/* =========================================================
   ATTENDANCE NAVIGATION
   ========================================================= */

.attendance-nav-modern {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 24px;
    padding: 12px 20px;
    background: white;
    border-radius: 12px;
    border: 1px solid #e8edf3;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.attendance-date-display {
    font-size: 16px;
    font-weight: 600;
    color: #1a2332;
    min-width: 120px;
    text-align: center;
}

.attendance-date-display strong {
    color: #2563eb;
}

/* =========================================================
   RESPONSIVE - ATTENDANCE
   ========================================================= */

@media (max-width: 768px) {
    .attendance-nav-modern {
        flex-direction: column;
        gap: 10px;
        padding: 16px;
    }

    .attendance-date-display {
        min-width: auto;
        font-size: 14px;
    }
}

/* =========================================================
   ANIMATIONS - MODERN DASHBOARD
   ========================================================= */

/* --- Page Load Animations --- */

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

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

/* --- Apply Animations to Elements --- */

/* Page Content */
.page-content {
    animation: fadeInUp 0.6s ease-out;
}

/* Page Header */
.page-header-modern {
    animation: slideInLeft 0.5s ease-out;
}

/* Welcome Banner (Dashboard only) */
.welcome-banner-modern {
    animation: fadeInUp 0.6s ease-out;
}

/* Stat Cards - Staggered */
.stat-card-modern {
    animation: fadeInUp 0.6s ease-out both;
}

.stat-card-modern:nth-child(1) { animation-delay: 0.05s; }
.stat-card-modern:nth-child(2) { animation-delay: 0.10s; }
.stat-card-modern:nth-child(3) { animation-delay: 0.15s; }
.stat-card-modern:nth-child(4) { animation-delay: 0.20s; }

/* Modern Cards */
.card-modern {
    animation: fadeInUp 0.5s ease-out both;
}

.card-modern:nth-child(1) { animation-delay: 0.05s; }
.card-modern:nth-child(2) { animation-delay: 0.10s; }
.card-modern:nth-child(3) { animation-delay: 0.15s; }
.card-modern:nth-child(4) { animation-delay: 0.20s; }

/* Info Cards */
.info-card {
    animation: fadeInUp 0.5s ease-out both;
}

.info-card:nth-child(1) { animation-delay: 0.05s; }
.info-card:nth-child(2) { animation-delay: 0.10s; }
.info-card:nth-child(3) { animation-delay: 0.15s; }

.info-card-full {
    animation: fadeInUp 0.5s ease-out both;
}

.info-card-full:nth-child(1) { animation-delay: 0.05s; }
.info-card-full:nth-child(2) { animation-delay: 0.10s; }
.info-card-full:nth-child(3) { animation-delay: 0.15s; }
.info-card-full:nth-child(4) { animation-delay: 0.20s; }
.info-card-full:nth-child(5) { animation-delay: 0.25s; }
.info-card-full:nth-child(6) { animation-delay: 0.30s; }

/* Profile Header */
.profile-header-card {
    animation: scaleIn 0.5s ease-out;
}

/* Table Rows - Staggered */
.table tbody tr {
    animation: fadeIn 0.4s ease-out both;
}

.table tbody tr:nth-child(1) { animation-delay: 0.05s; }
.table tbody tr:nth-child(2) { animation-delay: 0.08s; }
.table tbody tr:nth-child(3) { animation-delay: 0.11s; }
.table tbody tr:nth-child(4) { animation-delay: 0.14s; }
.table tbody tr:nth-child(5) { animation-delay: 0.17s; }
.table tbody tr:nth-child(6) { animation-delay: 0.20s; }
.table tbody tr:nth-child(7) { animation-delay: 0.23s; }
.table tbody tr:nth-child(8) { animation-delay: 0.26s; }
.table tbody tr:nth-child(9) { animation-delay: 0.29s; }
.table tbody tr:nth-child(10) { animation-delay: 0.32s; }

/* Quick Actions - Staggered */
.quick-action-item {
    animation: fadeInUp 0.5s ease-out both;
}

.quick-action-item:nth-child(1) { animation-delay: 0.05s; }
.quick-action-item:nth-child(2) { animation-delay: 0.10s; }
.quick-action-item:nth-child(3) { animation-delay: 0.15s; }
.quick-action-item:nth-child(4) { animation-delay: 0.20s; }
.quick-action-item:nth-child(5) { animation-delay: 0.25s; }
.quick-action-item:nth-child(6) { animation-delay: 0.30s; }

/* Employee List Items - Staggered */
.employee-item-modern {
    animation: slideInLeft 0.4s ease-out both;
}

.employee-item-modern:nth-child(1) { animation-delay: 0.05s; }
.employee-item-modern:nth-child(2) { animation-delay: 0.08s; }
.employee-item-modern:nth-child(3) { animation-delay: 0.11s; }
.employee-item-modern:nth-child(4) { animation-delay: 0.14s; }
.employee-item-modern:nth-child(5) { animation-delay: 0.17s; }

/* Attendance Items */
.attendance-item-modern {
    animation: slideInRight 0.4s ease-out both;
}

.attendance-item-modern:nth-child(1) { animation-delay: 0.05s; }
.attendance-item-modern:nth-child(2) { animation-delay: 0.08s; }
.attendance-item-modern:nth-child(3) { animation-delay: 0.11s; }
.attendance-item-modern:nth-child(4) { animation-delay: 0.14s; }
.attendance-item-modern:nth-child(5) { animation-delay: 0.17s; }

/* Notification Items */
.notification-item {
    animation: slideInLeft 0.4s ease-out both;
}

.notification-item:nth-child(1) { animation-delay: 0.05s; }
.notification-item:nth-child(2) { animation-delay: 0.08s; }
.notification-item:nth-child(3) { animation-delay: 0.11s; }
.notification-item:nth-child(4) { animation-delay: 0.14s; }
.notification-item:nth-child(5) { animation-delay: 0.17s; }
.notification-item:nth-child(6) { animation-delay: 0.20s; }

/* --- Hover Animations --- */

/* Card Hover Lift */
.card-modern,
.info-card,
.info-card-full,
.stat-card-modern,
.profile-header-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-modern:hover,
.info-card:hover,
.info-card-full:hover,
.stat-card-modern:hover,
.profile-header-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
}

/* Button Hover */
.btn {
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transform: translate(-50%, -50%);
    transition: width 0.6s ease, height 0.6s ease;
}

.btn:hover::after {
    width: 300px;
    height: 300px;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.35);
}

.btn-secondary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.10);
}

.btn-success:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(22, 163, 74, 0.35);
}

.btn-danger:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(220, 38, 38, 0.35);
}

.btn-warning:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(217, 119, 6, 0.35);
}

/* Quick Action Hover */
.quick-action-item {
    transition: all 0.3s ease;
}

.quick-action-item:hover {
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 12px 32px rgba(37, 99, 235, 0.12);
}

/* Employee Row Hover */
.employee-item-modern,
.attendance-item-modern,
.employee-row {
    transition: all 0.2s ease;
}

.employee-item-modern:hover,
.attendance-item-modern:hover,
.employee-row:hover {
    transform: translateX(4px);
    background: #f8fafc;
}

/* Table Row Hover */
.table tbody tr {
    transition: all 0.2s ease;
}

.table tbody tr:hover {
    background: #f8fafc;
    transform: scale(1.002);
}

/* Status Badge Pulse for Active Status */
.status-active {
    animation: pulse 2s ease-in-out infinite;
}

/* Attendance Circle Animation */
.attendance-circle svg circle {
    transition: stroke-dasharray 1.5s ease;
}

/* Progress Bar Animation */
.stat-progress-bar,
.balance-progress .progress-bar {
    animation: slideProgress 1.2s ease-out;
}

@keyframes slideProgress {
    from {
        width: 0%;
    }
    to {
        width: var(--progress-width, 0%);
    }
}

/* --- Reduce Motion for Accessibility --- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .page-content,
    .page-header-modern,
    .welcome-banner-modern,
    .stat-card-modern,
    .card-modern,
    .info-card,
    .info-card-full,
    .profile-header-card,
    .quick-action-item,
    .employee-item-modern,
    .attendance-item-modern,
    .notification-item,
    .table tbody tr {
        animation: none !important;
    }

    .card-modern:hover,
    .info-card:hover,
    .info-card-full:hover,
    .stat-card-modern:hover,
    .profile-header-card:hover,
    .quick-action-item:hover,
    .employee-item-modern:hover,
    .attendance-item-modern:hover,
    .employee-row:hover,
    .table tbody tr:hover {
        transform: none !important;
    }
}

/* =========================================================
   LEAVE BALANCE CARDS
   ========================================================= */

.leave-balance-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.leave-balance-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
}

.leave-balance-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    border-color: #93c5fd;
}

.leave-balance-card .balance-icon {
    font-size: 28px;
    margin-bottom: 4px;
}

.leave-balance-card .balance-label {
    color: #64748b;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.leave-balance-card .balance-value {
    font-size: 28px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.2;
}

.leave-balance-card .balance-value .total {
    font-size: 14px;
    font-weight: 400;
    color: #94a3b8;
}

.leave-balance-card .balance-used {
    color: #64748b;
    font-size: 12px;
    margin-top: 2px;
}

.leave-balance-card .balance-progress {
    margin-top: 10px;
    height: 4px;
    background: #e2e8f0;
    border-radius: 999px;
    overflow: hidden;
}

.leave-balance-card .balance-progress .progress-bar {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #3b82f6, #60a5fa);
    transition: width 1s ease;
}

.leave-balance-card.used .balance-progress .progress-bar {
    background: linear-gradient(90deg, #f59e0b, #fbbf24);
}

.leave-balance-card.used .balance-value {
    color: #d97706;
}

.leave-balance-card.remaining .balance-progress .progress-bar {
    background: linear-gradient(90deg, #22c55e, #4ade80);
}

.leave-balance-card.remaining .balance-value {
    color: #15803d;
}

/* =========================================================
   RESPONSIVE - LEAVE
   ========================================================= */

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

@media (max-width: 768px) {
    .leave-balance-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    .leave-balance-card .balance-value {
        font-size: 24px;
    }
}

@media (max-width: 480px) {
    .leave-balance-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   RESPONSIVE - LEAVE
   ========================================================= */

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

@media (max-width: 768px) {
    .leave-balance-grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .leave-balance-card .balance-value {
        font-size: 22px;
    }
}

@media (max-width: 480px) {
    .leave-balance-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   RESPONSIVE - LEAVE
   ========================================================= */

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

@media (max-width: 768px) {
    .leave-balance-grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .leave-balance-card .balance-value {
        font-size: 22px;
    }
}

@media (max-width: 480px) {
    .leave-balance-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   TIMELINE MODERN
   ========================================================= */

.timeline-modern {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-left: 8px;
}

.timeline-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding-bottom: 8px;
}

.timeline-item:not(:last-child) {
    border-bottom: 1px solid #f1f5f9;
    padding-bottom: 12px;
}

.timeline-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 4px;
    border: 2px solid white;
    box-shadow: 0 0 0 2px #e2e8f0;
}

.timeline-dot.blue {
    background: #3b82f6;
    box-shadow: 0 0 0 2px #3b82f6;
}
.timeline-dot.green {
    background: #22c55e;
    box-shadow: 0 0 0 2px #22c55e;
}
.timeline-dot.red {
    background: #ef4444;
    box-shadow: 0 0 0 2px #ef4444;
}
.timeline-dot.yellow {
    background: #f59e0b;
    box-shadow: 0 0 0 2px #f59e0b;
}

.timeline-title {
    font-weight: 600;
    color: #1a2332;
}

.timeline-date {
    font-size: 12px;
    color: #6b7a8e;
}

/* =========================================================
   ATTENDANCE REPORT - PROFESSIONAL CIRCLE
   ========================================================= */

.attendance-report-container {
    display: flex;
    align-items: center;
    gap: 48px;
    padding: 20px 0;
    flex-wrap: wrap;
}

.attendance-circle-large {
    position: relative;
    width: 200px;
    height: 200px;
    flex-shrink: 0;
}

.attendance-circle-large svg {
    transform: rotate(-90deg);
    width: 100%;
    height: 100%;
}

.attendance-circle-large svg circle {
    transition: stroke-dasharray 1.5s ease;
}

.attendance-circle-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.attendance-percent-large {
    font-size: 32px;
    font-weight: 750;
    color: #1a2332;
    line-height: 1;
}

.attendance-label-large {
    font-size: 12px;
    color: #6b7a8e;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.attendance-report-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 32px;
    flex: 1;
}

.attendance-report-stat {
    display: flex;
    align-items: center;
    gap: 12px;
}

.attendance-report-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    flex-shrink: 0;
}

.attendance-report-dot.present {
    background: #22c55e;
}
.attendance-report-dot.absent {
    background: #ef4444;
}
.attendance-report-dot.late {
    background: #f59e0b;
}
.attendance-report-dot.leave {
    background: #3b82f6;
}

.attendance-report-label {
    display: block;
    font-size: 12px;
    color: #6b7a8e;
    font-weight: 500;
}

.attendance-report-value {
    display: block;
    font-size: 20px;
    font-weight: 700;
    color: #1a2332;
    line-height: 1.2;
}

.attendance-report-sub {
    font-size: 11px;
    color: #94a3b8;
}

@media (max-width: 768px) {
    .attendance-report-container {
        flex-direction: column;
        align-items: center;
        gap: 24px;
    }

    .attendance-report-stats {
        grid-template-columns: 1fr 1fr;
        width: 100%;
        gap: 12px;
    }

    .attendance-circle-large {
        width: 160px;
        height: 160px;
    }

    .attendance-percent-large {
        font-size: 26px;
    }
}

@media (max-width: 480px) {
    .attendance-report-stats {
        grid-template-columns: 1fr;
    }

    .attendance-circle-large {
        width: 140px;
        height: 140px;
    }

    .attendance-percent-large {
        font-size: 22px;
    }
}

/* =========================================================
   PROFILE PICTURE
   ========================================================= */

.profile-picture-container {
    display: flex;
    align-items: center;
    gap: 32px;
    flex-wrap: wrap;
}

.profile-picture-large {
    width: 128px;
    height: 128px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #e2e8f0;
}

.profile-picture-placeholder {
    width: 128px;
    height: 128px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2563eb, #1a3a6b);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    font-weight: 700;
    border: 3px solid #e2e8f0;
}

.hidden {
    display: none !important;
}

.cursor-pointer {
    cursor: pointer;
}

/* =========================================================
   RESPONSIVE - PROFILE
   ========================================================= */

@media (max-width: 768px) {
    .profile-picture-container {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .profile-picture-large,
    .profile-picture-placeholder {
        width: 100px;
        height: 100px;
        font-size: 36px;
    }
}

/* =========================================================
   MINI STAT CIRCLES
   ========================================================= */

.stat-circle-mini {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 50px;
    height: 50px;
}

.stat-circle-mini svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.stat-circle-mini svg circle {
    transition: stroke-dasharray 1.5s ease;
}

/* Make stat cards relative for absolute positioning */
.stat-card-modern {
    position: relative;
}

/* Adjust stat card padding to accommodate mini circle */
.stat-card-modern {
    padding-right: 70px;
}

/* =========================================================
   RESPONSIVE - MINI CIRCLES
   ========================================================= */

@media (max-width: 768px) {
    .stat-circle-mini {
        width: 40px;
        height: 40px;
        top: 8px;
        right: 8px;
    }

    .stat-card-modern {
        padding-right: 56px;
    }

    .stat-card-modern .stat-number {
        font-size: 22px;
    }
}

@media (max-width: 480px) {
    .stat-circle-mini {
        width: 34px;
        height: 34px;
        top: 6px;
        right: 6px;
    }

    .stat-card-modern {
        padding-right: 48px;
    }

    .stat-card-modern .stat-number {
        font-size: 18px;
    }
}

/* =========================================================
   MINI STAT CIRCLES - Small Donut Style
   ========================================================= */

.stat-circle-mini {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 44px;
    height: 44px;
}

.stat-circle-mini svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.stat-circle-mini svg circle {
    transition: stroke-dasharray 1.5s ease;
}

.stat-circle-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 9px;
    font-weight: 700;
    color: #1a2332;
    text-align: center;
    line-height: 1.1;
}

.stat-card-modern {
    position: relative;
    padding-top: 16px;
    padding-right: 68px;
}

/* Responsive */
@media (max-width: 768px) {
    .stat-circle-mini {
        width: 36px;
        height: 36px;
        top: 8px;
        right: 8px;
    }

    .stat-circle-label {
        font-size: 7px;
    }

    .stat-card-modern {
        padding-right: 56px;
    }
}

@media (max-width: 480px) {
    .stat-circle-mini {
        width: 30px;
        height: 30px;
        top: 6px;
        right: 6px;
    }

    .stat-circle-label {
        font-size: 6px;
    }

    .stat-card-modern {
        padding-right: 44px;
        padding-top: 12px;
    }
}
/* =========================================================
   DONUT STAT CARDS - Clean Dashboard Style
   ========================================================= */

.stats-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-bottom: 28px;
}

/* Large Donut Cards */
.stat-card-donut {
    background: white;
    border-radius: 14px;
    border: 1px solid #e8edf3;
    padding: 20px 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: all 0.3s ease;
}

.stat-card-donut:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
}

.stat-donut-wrapper {
    display: flex;
    align-items: center;
    gap: 20px;
}

.stat-donut {
    position: relative;
    width: 80px;
    height: 80px;
    flex-shrink: 0;
}

.stat-donut svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.stat-donut svg circle {
    transition: stroke-dasharray 1.5s ease;
}

.donut-animate {
    animation: donutFill 1.5s ease;
}

@keyframes donutFill {
    from { stroke-dasharray: 0,100; }
    to { stroke-dasharray: var(--target),100; }
}

.stat-donut-value {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 16px;
    font-weight: 700;
    color: #1a2332;
    text-align: center;
    line-height: 1.2;
}

.stat-donut-info {
    flex: 1;
}

.stat-donut-label {
    display: block;
    font-size: 13px;
    color: #6b7a8e;
    font-weight: 500;
}

.stat-donut-value-large {
    display: block;
    font-size: 22px;
    font-weight: 700;
    color: #1a2332;
}

.stat-donut-trend {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    margin-top: 4px;
    padding: 2px 10px;
    border-radius: 20px;
}

.stat-donut-trend.up {
    background: #f0fdf4;
    color: #16a34a;
}

.stat-donut-trend.down {
    background: #fef2f2;
    color: #dc2626;
}

.stat-donut-trend.stable {
    background: #f1f5f9;
    color: #64748b;
}

/* Small Donut Cards */
.stat-card-donut-small {
    background: white;
    border-radius: 12px;
    border: 1px solid #e8edf3;
    padding: 16px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: all 0.3s ease;
}

.stat-card-donut-small:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.stat-donut-small {
    position: relative;
    width: 50px;
    height: 50px;
    flex-shrink: 0;
}

.stat-donut-small svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.stat-donut-small svg circle {
    transition: stroke-dasharray 1.5s ease;
}

.stat-donut-small-value {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 11px;
    font-weight: 700;
    color: #1a2332;
    text-align: center;
    line-height: 1.1;
}

.stat-donut-small-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #1a2332;
}

.stat-donut-small-sub {
    display: block;
    font-size: 11px;
    color: #6b7a8e;
}

.stats-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.mt-3 {
    margin-top: 14px;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

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

@media (max-width: 768px) {
    .stats-grid-3 {
        grid-template-columns: 1fr 1fr;
    }
    .stats-grid-4 {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    .stat-donut {
        width: 60px;
        height: 60px;
    }
    .stat-donut-value {
        font-size: 13px;
    }
    .stat-donut-value-large {
        font-size: 18px;
    }
    .stat-donut-small {
        width: 42px;
        height: 42px;
    }
    .stat-donut-small-value {
        font-size: 9px;
    }
}

@media (max-width: 480px) {
    .stats-grid-3 {
        grid-template-columns: 1fr;
    }
    .stats-grid-4 {
        grid-template-columns: 1fr;
    }
    .stat-donut {
        width: 50px;
        height: 50px;
    }
    .stat-donut-small {
        width: 38px;
        height: 38px;
    }
}

/* =========================================================
   SMALL DONUT STAT CARDS - CORRECT SIZE
   ========================================================= */

/* Small Donut Cards */
.stat-card-donut-small {
    background: white;
    border-radius: 12px;
    border: 1px solid #e8edf3;
    padding: 16px 18px;
    padding-right: 60px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: all 0.3s ease;
    position: relative;
}

.stat-card-donut-small:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.stat-donut-small {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
}

.stat-donut-small svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.stat-donut-small svg circle {
    transition: stroke-dasharray 1.5s ease;
}

.stat-donut-small-value {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 8px;
    font-weight: 700;
    color: #1a2332;
    text-align: center;
    line-height: 1.1;
}

.stat-donut-small-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #1a2332;
}

.stat-donut-small-sub {
    display: block;
    font-size: 11px;
    color: #6b7a8e;
}

.stats-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

/* Large Donut Cards for Top 3 */
.stats-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-bottom: 28px;
}

.stat-card-donut {
    background: white;
    border-radius: 14px;
    border: 1px solid #e8edf3;
    padding: 18px 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: all 0.3s ease;
    position: relative;
}

.stat-card-donut:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
}

.stat-donut {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 50px;
    height: 50px;
}

.stat-donut svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.stat-donut svg circle {
    transition: stroke-dasharray 1.5s ease;
}

.stat-donut-value {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 11px;
    font-weight: 700;
    color: #1a2332;
    text-align: center;
    line-height: 1.2;
}

.stat-donut-info {
    padding-right: 60px;
}

.stat-donut-label {
    display: block;
    font-size: 12px;
    color: #6b7a8e;
    font-weight: 500;
}

.stat-donut-value-large {
    display: block;
    font-size: 20px;
    font-weight: 700;
    color: #1a2332;
}

.stat-donut-trend {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    margin-top: 2px;
    padding: 2px 10px;
    border-radius: 20px;
}

.stat-donut-trend.up {
    background: #f0fdf4;
    color: #16a34a;
}

.stat-donut-trend.down {
    background: #fef2f2;
    color: #dc2626;
}

.stat-donut-trend.stable {
    background: #f1f5f9;
    color: #64748b;
}

/* Responsive */
@media (max-width: 768px) {
    .stats-grid-3 {
        grid-template-columns: 1fr 1fr;
    }
    .stats-grid-4 {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    .stat-donut {
        width: 40px;
        height: 40px;
    }
    .stat-donut-value {
        font-size: 9px;
    }
    .stat-donut-value-large {
        font-size: 16px;
    }
    .stat-donut-small {
        width: 30px;
        height: 30px;
        top: 8px;
        right: 8px;
    }
    .stat-donut-small-value {
        font-size: 7px;
    }
    .stat-card-donut-small {
        padding-right: 48px;
        padding: 12px 14px;
        padding-right: 48px;
    }
    .stat-card-donut {
        padding: 14px 18px;
        padding-right: 56px;
    }
}

@media (max-width: 480px) {
    .stats-grid-3 {
        grid-template-columns: 1fr;
    }
    .stats-grid-4 {
        grid-template-columns: 1fr;
    }
    .stat-donut {
        width: 36px;
        height: 36px;
    }
    .stat-donut-small {
        width: 28px;
        height: 28px;
        top: 6px;
        right: 6px;
    }
    .stat-card-donut-small {
        padding-right: 40px;
    }
}

/* =========================================================
   EMPLOYEE DASHBOARD STYLES
   ========================================================= */

.welcome-banner-employee {
    background: linear-gradient(135deg, #0f3b82 0%, #1e40af 50%, #3b82f6 100%);
    border-radius: 16px;
    padding: 24px 28px;
    margin-bottom: 28px;
    color: white;
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(15, 59, 130, 0.25);
}

.welcome-banner-employee .welcome-banner-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 1;
}

.welcome-banner-employee .welcome-greeting {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 2px;
}

.welcome-banner-employee .greeting-icon {
    font-size: 24px;
}

.welcome-banner-employee .greeting-text {
    font-size: 16px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
}

.welcome-banner-employee .welcome-title {
    font-size: 22px;
    font-weight: 750;
    color: white;
    letter-spacing: -0.5px;
}

.welcome-banner-employee .welcome-subtitle {
    color: rgba(255, 255, 255, 0.8);
    font-size: 13px;
    margin-top: 2px;
}

.welcome-banner-employee .welcome-date {
    text-align: right;
    flex-shrink: 0;
}

.welcome-banner-employee .welcome-date .date-day {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
}

.welcome-banner-employee .welcome-date .date-full {
    display: block;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
}

.welcome-banner-employee .welcome-date .date-time {
    display: block;
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
    margin-top: 4px;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.5px;
}

.page-date {
    font-size: 14px;
    color: #6b7a8e;
    font-weight: 500;
}

/* Attendance Employee */
.attendance-employee-container {
    display: flex;
    align-items: center;
    gap: 40px;
    padding: 10px 0;
}

.attendance-circle-employee {
    position: relative;
    width: 120px;
    height: 120px;
    flex-shrink: 0;
}

.attendance-circle-employee svg {
    transform: rotate(-90deg);
}

.attendance-circle-employee svg circle {
    transition: stroke-dasharray 1s ease;
}

.attendance-center-employee {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.attendance-status-employee {
    font-size: 28px;
    line-height: 1;
}

.attendance-label-employee {
    font-size: 11px;
    color: #6b7a8e;
    font-weight: 600;
    margin-top: 2px;
    text-align: center;
}

.attendance-details-employee {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.attendance-detail-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px solid #f1f5f9;
}

.attendance-detail-row:last-child {
    border-bottom: none;
}

.attendance-detail-label {
    font-size: 13px;
    color: #6b7a8e;
    font-weight: 500;
}

.attendance-detail-value {
    font-size: 13px;
    font-weight: 600;
    color: #1a2332;
}

@media (max-width: 768px) {
    .welcome-banner-employee .welcome-banner-content {
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }

    .welcome-banner-employee .welcome-date {
        text-align: center;
    }

    .welcome-banner-employee .welcome-greeting {
        justify-content: center;
    }

    .attendance-employee-container {
        flex-direction: column;
        gap: 20px;
        align-items: center;
    }

    .attendance-details-employee {
        width: 100%;
    }

    .attendance-circle-employee {
        width: 100px;
        height: 100px;
    }
}

@media (max-width: 480px) {
    .welcome-banner-employee {
        padding: 16px;
    }

    .welcome-banner-employee .welcome-title {
        font-size: 18px;
    }

    .attendance-circle-employee {
        width: 80px;
        height: 80px;
    }

    .attendance-status-employee {
        font-size: 22px;
    }
}

/* =========================================================
   MONTH NAVIGATION
   ========================================================= */

.month-navigation-modern {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 24px;
    padding: 12px 20px;
    background: white;
    border-radius: 12px;
    border: 1px solid #e8edf3;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.month-display {
    font-size: 16px;
    font-weight: 600;
    color: #1a2332;
    min-width: 140px;
    text-align: center;
}

.month-display strong {
    color: #2563eb;
}

@media (max-width: 768px) {
    .month-navigation-modern {
        flex-direction: column;
        gap: 10px;
        padding: 16px;
    }

    .month-display {
        min-width: auto;
        font-size: 14px;
    }
}

/* =========================================================
   MONTH NAVIGATION
   ========================================================= */

.month-navigation-modern {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 24px;
    padding: 12px 20px;
    background: white;
    border-radius: 12px;
    border: 1px solid #e8edf3;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.month-display {
    font-size: 16px;
    font-weight: 600;
    color: #1a2332;
    min-width: 140px;
    text-align: center;
}

.month-display strong {
    color: #2563eb;
}

.mt-4 {
    margin-top: 16px;
}

@media (max-width: 768px) {
    .month-navigation-modern {
        flex-direction: column;
        gap: 10px;
        padding: 16px;
    }

    .month-display {
        min-width: auto;
        font-size: 14px;
    }
}

/* =========================================================
   NOTIFICATION ITEMS
   ========================================================= */

.notification-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.notification-item-modern {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 16px 18px;
    border-radius: 12px;
    border: 1px solid #e8edf3;
    background: white;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
}

.notification-item-modern:hover {
    transform: translateX(4px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
    border-color: #bfdbfe;
}

.notification-item-modern.unread {
    background: #eff6ff;
    border-color: #93c5fd;
}

.notification-item-modern .notification-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f1f5f9;
    transition: all 0.3s ease;
}

.notification-item-modern .notification-icon.unread {
    background: #2563eb;
}

.notification-item-modern .notification-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: white;
    animation: pulse-dot 2s infinite;
}

.notification-item-modern .notification-check {
    color: white;
    font-size: 16px;
    font-weight: 700;
}

.notification-item-modern .notification-content {
    flex: 1;
    min-width: 0;
}

.notification-item-modern .notification-header {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

.notification-item-modern .notification-title {
    font-size: 15px;
    font-weight: 600;
    color: #1a2332;
}

.notification-item-modern .notification-message {
    font-size: 13px;
    color: #475569;
    line-height: 1.5;
}

.notification-item-modern .notification-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 6px;
}

.notification-item-modern .notification-date {
    font-size: 12px;
    color: #94a3b8;
}

.notification-item-modern .notification-tag {
    font-size: 11px;
    padding: 2px 10px;
    border-radius: 4px;
    background: #f1f5f9;
    color: #64748b;
}

.notification-item-modern .notification-link {
    font-size: 13px;
    font-weight: 600;
    color: #2563eb;
    text-decoration: none;
    flex-shrink: 0;
    align-self: center;
    transition: all 0.2s ease;
}

.notification-item-modern .notification-link:hover {
    color: #1d4ed8;
    transform: translateX(4px);
}

/* Notification Detail */
.notification-detail-header {
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid #e8edf3;
}

.notification-detail-title {
    font-size: 22px;
    font-weight: 700;
    color: #1a2332;
}

.notification-detail-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 6px;
}

.notification-detail-date {
    font-size: 13px;
    color: #94a3b8;
}

.notification-detail-author {
    font-size: 13px;
    color: #64748b;
}

.notification-detail-body {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.notification-detail-message {
    font-size: 15px;
    color: #1a2332;
    line-height: 1.8;
    white-space: pre-line;
}

.notification-detail-image {
    margin: 8px 0;
}

.notification-detail-image img {
    max-height: 400px;
    object-fit: contain;
}

.notification-detail-attachment {
    padding: 16px 20px;
    background: #f8fafc;
    border-radius: 10px;
    border: 1px solid #e8edf3;
}

.notification-detail-footer {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #e8edf3;
}

/* =========================================================
   RESPONSIVE - NOTIFICATIONS
   ========================================================= */

@media (max-width: 768px) {
    .notification-item-modern {
        flex-wrap: wrap;
        padding: 14px;
    }

    .notification-item-modern .notification-link {
        width: 100%;
        text-align: right;
        margin-top: 4px;
    }

    .notification-detail-title {
        font-size: 18px;
    }

    .notification-detail-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
}


/* =========================================================================
   ============================  UI/UX REFRESH  ============================
   Blue & white theme system, real button styles, per-status colours,
   login/signup styling, form polish, alerts, missing utilities and
   tablet/phone responsive refinement.
   Loaded last on purpose: everything below wins the cascade over the
   sections above without having to touch any Blade template.
   ========================================================================= */

:root {
    --primary-50:  #eff6ff;
    --primary-100: #dbeafe;
    --primary-200: #bfdbfe;
    --primary-300: #93c5fd;
    --primary-400: #60a5fa;
    --primary-500: #3b82f6;
    --primary-600: #2563eb;
    --primary-700: #1d4ed8;
    --primary-800: #1e40af;
    --primary-900: #1e3a8a;

    --navy-900: #0b1220;
    --navy-800: #10192e;

    --slate-50:  #f8fafc;
    --slate-100: #f1f5f9;
    --slate-200: #e2e8f0;
    --slate-300: #cbd5e1;
    --slate-400: #94a3b8;
    --slate-500: #64748b;
    --slate-600: #475569;
    --slate-700: #334155;
    --slate-800: #1e293b;
    --slate-900: #0f172a;

    --green-50:  #ecfdf5;
    --green-500: #10b981;
    --green-600: #059669;
    --green-700: #047857;

    --red-50:  #fef2f2;
    --red-500: #ef4444;
    --red-600: #dc2626;
    --red-700: #b91c1c;

    --amber-50:  #fffbeb;
    --amber-500: #f59e0b;
    --amber-600: #d97706;
    --amber-700: #b45309;

    --orange-50: #fff7ed;
    --orange-600:#ea580c;
    --orange-700:#c2410c;

    --purple-50: #f5f3ff;
    --purple-500:#8b5cf6;
    --purple-600:#7c3aed;

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-full: 999px;

    --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
    --shadow-md: 0 6px 16px rgba(15, 23, 42, .08);
    --shadow-lg: 0 16px 40px rgba(15, 23, 42, .12);
    --shadow-blue: 0 8px 20px rgba(37, 99, 235, .28);
    --shadow-green: 0 8px 20px rgba(16, 185, 129, .28);
    --shadow-red: 0 8px 20px rgba(239, 68, 68, .28);
    --shadow-amber: 0 8px 20px rgba(245, 158, 11, .28);

    --ease: cubic-bezier(.4, 0, .2, 1);
}

/* -------------------------------------------------------
   BASE / TYPOGRAPHY
   ------------------------------------------------------- */
html, body {
    background: var(--slate-50);
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--slate-800);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

::selection {
    background: var(--primary-200);
    color: var(--primary-900);
}

/* Slim, tidy scrollbars — track always has a visible colour so the
   bar reads as a permanent, static UI element instead of a
   hover-triggered overlay that fades in/out (which is what caused
   the "blinking" scrollbar on tables). */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--slate-300) var(--slate-100);
}
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: var(--slate-100); border-radius: var(--radius-full); }
*::-webkit-scrollbar-thumb {
    background: var(--slate-300);
    border-radius: var(--radius-full);
    border: 1px solid var(--slate-100);
}
*::-webkit-scrollbar-thumb:hover { background: var(--slate-400); }

/* Tables specifically: reserve the scrollbar's space up front and
   force a permanently-visible, non-overlay horizontal scrollbar so
   it never appears/disappears on hover. */
.table-wrapper {
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: var(--slate-300) var(--slate-100);
}
.table-wrapper::-webkit-scrollbar {
    height: 10px;
    -webkit-appearance: none;
}
.table-wrapper::-webkit-scrollbar-track {
    background: var(--slate-100);
    border-radius: var(--radius-full);
}
.table-wrapper::-webkit-scrollbar-thumb {
    background: var(--slate-300);
    border-radius: var(--radius-full);
    border: 2px solid var(--slate-100);
}
.table-wrapper::-webkit-scrollbar-thumb:hover,
.table-wrapper:hover::-webkit-scrollbar-thumb { background: var(--slate-400); }

/* -------------------------------------------------------
   BUTTONS — real base styles (previously only :hover existed)
   ------------------------------------------------------- */
.btn {
    border-radius: var(--radius-sm);
    letter-spacing: .1px;
    transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease), opacity .2s var(--ease);
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary-600), var(--primary-700));
    color: #fff;
    box-shadow: var(--shadow-blue);
}
.btn-primary:hover { background: linear-gradient(135deg, var(--primary-700), var(--primary-800)); }

.btn-secondary {
    background: #fff;
    color: var(--slate-700);
    border: 1.5px solid var(--slate-200);
    box-shadow: var(--shadow-sm);
}
.btn-secondary:hover { background: var(--slate-50); border-color: var(--slate-300); color: var(--slate-900); }

.btn-success {
    background: linear-gradient(135deg, var(--green-500), var(--green-600));
    color: #fff;
    box-shadow: var(--shadow-green);
}
.btn-success:hover { background: linear-gradient(135deg, var(--green-600), var(--green-700)); }

.btn-danger {
    background: linear-gradient(135deg, var(--red-500), var(--red-600));
    color: #fff;
    box-shadow: var(--shadow-red);
}
.btn-danger:hover { background: linear-gradient(135deg, var(--red-600), var(--red-700)); }

.btn-warning {
    background: linear-gradient(135deg, var(--amber-500), var(--amber-600));
    color: #fff;
    box-shadow: var(--shadow-amber);
}
.btn-warning:hover { background: linear-gradient(135deg, var(--amber-600), var(--amber-700)); }

.btn:active { transform: translateY(0) scale(.97); }
.btn[disabled], .btn:disabled {
    opacity: .55;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}
.btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, .25);
}

/* -------------------------------------------------------
   STATUS BADGES — every status now gets its own colour
   ------------------------------------------------------- */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px 4px 10px;
    border-radius: var(--radius-full);
    font-size: 11.5px;
    font-weight: 700;
    text-transform: capitalize;
    letter-spacing: .2px;
    border: 1px solid transparent;
    white-space: nowrap;
}
.status-badge::before {
    content: '';
    width: 6px;
    height: 6px;
    flex-shrink: 0;
    border-radius: 50%;
    background: currentColor;
}

/* Positive / go states */
.status-active,
.status-approved,
.status-present,
.status-paid,
.status-completed,
.status-confirmed {
    background: var(--green-50);
    color: var(--green-700);
    border-color: #bbf7d0;
}

/* Waiting / needs-review states */
.status-pending,
.status-draft,
.status-submitted {
    background: var(--amber-50);
    color: var(--amber-700);
    border-color: #fde68a;
}
.status-pending::before { animation: pulse 1.6s ease-in-out infinite; }

/* In progress */
.status-processing {
    background: var(--primary-50);
    color: var(--primary-700);
    border-color: var(--primary-200);
}

/* Negative / stop states */
.status-rejected,
.status-terminated,
.status-absent,
.status-cancelled,
.status-canceled,
.status-unpaid,
.status-inactive {
    background: var(--red-50);
    color: var(--red-700);
    border-color: #fecaca;
}

/* Neutral / wound-down states */
.status-resigned {
    background: var(--slate-100);
    color: var(--slate-600);
    border-color: var(--slate-200);
}

/* Attention-but-not-critical */
.status-late {
    background: var(--orange-50);
    color: var(--orange-700);
    border-color: #fed7aa;
}

/* On leave */
.status-on_leave {
    background: var(--purple-50);
    color: var(--purple-600);
    border-color: #ddd6fe;
}

/* Keep the existing "active" pulse subtle rather than jumpy */
.status-active { animation: none; }
.status-active::before { animation: pulse 2s ease-in-out infinite; }

/* Generic badge variants used on notifications etc. */
.badge-new { background: var(--primary-100); color: var(--primary-700); }
.badge-read { background: var(--slate-100); color: var(--slate-500); }

/* -------------------------------------------------------
   ALERTS
   ------------------------------------------------------- */
.alert {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 16px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 20px;
    border: 1px solid transparent;
    animation: fadeInUp .35s ease-out;
}
.alert-success {
    background: var(--green-50);
    color: var(--green-700);
    border-color: #bbf7d0;
}
.alert-success::before { content: '✓'; font-weight: 800; }
.alert-danger {
    background: var(--red-50);
    color: var(--red-700);
    border-color: #fecaca;
}
.alert-danger::before { content: '!'; font-weight: 800; }

/* -------------------------------------------------------
   FORMS — sections, grids, inputs, errors, actions
   ------------------------------------------------------- */
.form-section {
    margin-bottom: 26px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--slate-100);
}
.form-section:last-of-type { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.form-section h3 {
    font-size: 15.5px;
    font-weight: 700;
    color: var(--slate-900);
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px 20px;
    margin-top: 14px;
}
.form-group-full { grid-column: 1 / -1; }

.form-group label {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--slate-600);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: .3px;
}

.form-group input,
.form-group select,
.form-group textarea,
.form-control,
.form-input {
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid var(--slate-200);
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-family: inherit;
    color: var(--slate-900);
    background: #fff;
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.form-group input::placeholder,
.form-control::placeholder,
.form-input::placeholder { color: var(--slate-400); }

.form-group input:hover,
.form-group select:hover,
.form-group textarea:hover { border-color: var(--slate-300); }

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
.form-control:focus,
.form-input:focus {
    outline: none;
    border-color: var(--primary-500);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, .10);
}

.form-group select { cursor: pointer; }

.form-error {
    background: var(--red-50);
    border: 1px solid #fecaca;
    color: var(--red-700);
    padding: 13px 16px;
    border-radius: var(--radius-sm);
    margin-bottom: 22px;
    font-size: 13.5px;
}
.form-error ul { margin-left: 18px; margin-top: 2px; }

.form-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid var(--slate-100);
}

/* -------------------------------------------------------
   LOGIN / SIGNUP PAGES
   ------------------------------------------------------- */
.login-page,
.signup-page {
    min-height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background:
        radial-gradient(circle at 15% 15%, rgba(96, 165, 250, .25), transparent 45%),
        radial-gradient(circle at 85% 85%, rgba(37, 99, 235, .30), transparent 45%),
        linear-gradient(160deg, var(--navy-900) 0%, var(--primary-800) 60%, var(--primary-600) 100%);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.login-container,
.signup-container {
    width: 100%;
    max-width: 420px;
}

.login-card {
    background: #fff;
    border-radius: var(--radius-lg);
    padding: 42px 38px;
    box-shadow: 0 30px 70px rgba(2, 6, 23, .40);
    animation: scaleIn .5s var(--ease);
}

.login-header { text-align: center; margin-bottom: 26px; }
.login-header h1 {
    font-size: 22px;
    font-weight: 800;
    color: var(--slate-900);
    letter-spacing: -.5px;
}
.login-header span {
    display: block;
    margin-top: 3px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2.5px;
    color: var(--primary-600);
    text-transform: uppercase;
}
.login-header p {
    margin-top: 14px;
    color: var(--slate-500);
    font-size: 13.5px;
}

.login-error {
    background: var(--red-50);
    color: var(--red-700);
    border: 1px solid #fecaca;
    padding: 11px 14px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    margin-bottom: 20px;
    text-align: center;
}

.login-page .form-group,
.signup-page .form-group { margin-bottom: 18px; }

.login-page label,
.signup-page label {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--slate-600);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: .3px;
}

.login-page input,
.signup-page input,
.signup-page select {
    width: 100%;
    padding: 11px 14px;
    border: 1.5px solid var(--slate-200);
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-family: inherit;
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.login-page input:focus,
.signup-page input:focus,
.signup-page select:focus {
    outline: none;
    border-color: var(--primary-500);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, .12);
}

.login-button,
.signup-button {
    display: block;
    width: 100%;
    padding: 13px;
    margin-top: 8px;
    background: linear-gradient(135deg, var(--primary-600), var(--primary-700));
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 15px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    box-shadow: var(--shadow-blue);
    transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
.login-button:hover,
.signup-button:hover {
    transform: translateY(-2px);
    background: linear-gradient(135deg, var(--primary-700), var(--primary-800));
    box-shadow: 0 14px 30px rgba(37, 99, 235, .38);
}
.login-button:active,
.signup-button:active { transform: translateY(0); }

.signup-link,
.login-link {
    text-align: center;
    margin-top: 22px;
    font-size: 13px;
    color: var(--slate-500);
}
.signup-link a,
.login-link a {
    color: var(--primary-600);
    font-weight: 700;
}
.signup-link a:hover,
.login-link a:hover { text-decoration: underline; }

.signup-header { text-align: center; margin-bottom: 26px; }
.signup-header h1 {
    font-size: 22px;
    font-weight: 800;
    color: var(--slate-900);
    letter-spacing: -.5px;
}

.registration-code {
    background: var(--primary-50);
    border: 1.5px dashed var(--primary-300);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    margin-top: 16px;
    text-align: center;
}
.registration-code-title {
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--primary-600);
    letter-spacing: .6px;
    margin-bottom: 4px;
}

/* -------------------------------------------------------
   SIDEBAR / TOPBAR polish
   ------------------------------------------------------- */
.sidebar {
    background: linear-gradient(180deg, var(--navy-900) 0%, var(--primary-900) 100%);
    box-shadow: 4px 0 24px rgba(2, 6, 23, .12);
}

.nav-item {
    position: relative;
    margin-left: 2px;
}
.nav-item:hover { padding-left: 18px; }
.nav-item.active,
.nav-item[aria-current="page"] {
    background: #fff;
    color: var(--primary-700) !important;
    font-weight: 700;
    box-shadow: var(--shadow-md);
}
.nav-item.active::before,
.nav-item[aria-current="page"]::before {
    content: '';
    position: absolute;
    left: -14px;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 60%;
    background: #fff;
    border-radius: var(--radius-full);
}

.topbar { backdrop-filter: saturate(180%) blur(6px); }

.user-avatar { box-shadow: 0 4px 14px rgba(37, 99, 235, .35); }
.user-avatar-image { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }

.topbar-logout {
    background: var(--red-50) !important;
    color: var(--red-600) !important;
}
.topbar-logout:hover { background: var(--red-100, #fee2e2) !important; }

/* -------------------------------------------------------
   CARDS / BADGES / MISC POLISH
   ------------------------------------------------------- */
.card-modern,
.info-card,
.info-card-full,
.stat-card-modern,
.profile-header-card,
.notification-item {
    border: 1px solid var(--slate-100);
}

.employee-name-link { color: var(--primary-600); font-weight: 600; }
.employee-name-link:hover { text-decoration: underline; }

.link-arrow {
    color: var(--primary-600);
    font-weight: 600;
    font-size: 13.5px;
    transition: gap .2s var(--ease);
}
.link-arrow:hover { color: var(--primary-800); }

.card-body { padding: 20px 24px; }

.topbar-left { display: flex; align-items: center; gap: 10px; }

/* Hamburger icon — the three <span> bars had no styling at all,
   so the mobile menu button was rendering invisible. */
.mobile-menu-btn {
    width: 38px;
    height: 38px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
    transition: background .2s var(--ease);
}
.mobile-menu-btn:hover { background: var(--slate-100); }
.mobile-menu-btn span {
    display: block;
    width: 20px;
    height: 2px;
    border-radius: var(--radius-full);
    background: var(--slate-700);
    transition: transform .25s var(--ease), opacity .25s var(--ease);
}
/* main.js toggles body.sidebar-open when the menu is open */
body.sidebar-open .mobile-menu-btn span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.sidebar-open .mobile-menu-btn span:nth-child(2) { opacity: 0; }
body.sidebar-open .mobile-menu-btn span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 768px) {
    .mobile-menu-btn { display: flex; }
}

/* Button rows (page-actions etc.) wrap tidily on narrow screens
   instead of overflowing/getting clipped side by side. */
.page-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
@media (max-width: 768px) {
    .page-actions .btn { flex: 1 1 140px; }
}

.stat-icon.gray, .qa-icon.gray {
    background: var(--slate-100);
    color: var(--slate-600);
}

.subtitle { color: var(--slate-500); font-size: 13px; }
.meta { color: var(--slate-400); font-size: 12px; }
.value { font-weight: 600; color: var(--slate-900); }
.message { color: var(--slate-600); font-size: 14px; line-height: 1.65; }

/* -------------------------------------------------------
   MISSING UTILITY CLASSES referenced by the Blade views
   ------------------------------------------------------- */
.block { display: block; }
.inline { display: inline; }
.w-full { width: 100%; }
.full-width { width: 100%; }
.grid { display: grid; }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.mb-1 { margin-bottom: 4px; }
.mt-1 { margin-top: 4px; }
.my-4 { margin-top: 16px; margin-bottom: 16px; }
.gap-6 { gap: 24px; }
.max-w-md { max-width: 448px; }
.max-w-5xl { max-width: 1024px; }
.list-disc { list-style-type: disc; }
.list-inside { list-style-position: inside; }
.border-gray-200 { border-color: var(--slate-200); }
.border-green-200 { border-color: #bbf7d0; }
.border-red-200 { border-color: #fecaca; }
.whitespace-pre-line { white-space: pre-line; }
.container-fluid { width: 100%; padding: 0 24px; }

@media (min-width: 768px) {
    .md\:col-span-2 { grid-column: span 2 / span 2; }
    .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 640px) {
    .sm\:flex-row { flex-direction: row; }
    .sm\:items-center { align-items: center; }
    .sm\:justify-between { justify-content: space-between; }
}

/* -------------------------------------------------------
   TABLET REFINEMENT (769px – 1024px)
   ------------------------------------------------------- */
@media (max-width: 1024px) and (min-width: 769px) {
    .sidebar { width: 220px; }
    .main-content { margin-left: 220px; }
    .stats-grid-4 { grid-template-columns: repeat(2, 1fr) !important; }
    .form-grid { grid-template-columns: 1fr 1fr !important; }
    .dashboard-main { grid-template-columns: 1fr !important; }
    .page-content { padding: 24px; }
    .info-card-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* -------------------------------------------------------
   PHONE REFINEMENT (≤768px) — extra polish on top of the
   existing mobile rules further up this file
   ------------------------------------------------------- */
@media (max-width: 768px) {
    .login-card { padding: 30px 24px; }
    .page-header-modern {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }
    .page-actions { width: 100%; }
    .page-actions .btn { width: 100%; }
    .welcome-banner-content { flex-direction: column; align-items: flex-start; gap: 16px; }
    .welcome-date { align-items: flex-start !important; text-align: left; }
    .info-card-grid { grid-template-columns: 1fr !important; }
    .dashboard-main { grid-template-columns: 1fr !important; }
    .quick-actions-modern { grid-template-columns: repeat(3, 1fr) !important; }
    .profile-header-info { flex-direction: column; text-align: center; }
    .form-actions { flex-direction: column-reverse; }
    .form-actions .btn { width: 100%; }
}

@media (max-width: 480px) {
    .login-card { padding: 26px 18px; }
    .quick-actions-modern { grid-template-columns: repeat(2, 1fr) !important; }
    .stat-number { font-size: 22px !important; }
}

/* -------------------------------------------------------
   REDUCE MOTION — respected for the new rules too
   ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .status-pending::before,
    .status-active::before { animation: none !important; }
}

/* ---------- SVG ICON SIZING ---------- */

.stat-icon svg {
    width: 22px;
    height: 22px;
    display: block;
    flex-shrink: 0;
}

.qa-icon svg {
    width: 20px;
    height: 20px;
    display: block;
    flex-shrink: 0;
}

.btn svg {
    width: 18px;
    height: 18px;
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
}
/* ---------- QUICK ACTION ICON ALIGNMENT FIX ---------- */

.quick-action-item .qa-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin: 0 auto 8px;
    flex-shrink: 0;
}

.quick-action-item .qa-icon svg {
    width: 22px;
    height: 22px;
    display: block;
    margin: 0;
    flex-shrink: 0;
}