:root {
    --primary: #4f46e5;
    --primary-light: #6366f1;
    --success: #10b981;
    --danger: #ef4444;
    --warning: #f59e0b;
    --info: #0ea5e9;
    --bg: #f4f6fb;
    --card-bg: #ffffff;
    --text-dark: #1e293b;
    --text-muted: #64748b;
    --radius: 16px;
}

body {
    background: var(--bg);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--text-dark);
}

.app-navbar {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    box-shadow: 0 4px 20px rgba(79, 70, 229, 0.25);
    padding: 1rem 0;
}

    .app-navbar .navbar-brand {
        color: #fff;
        font-weight: 700;
        font-size: 1.25rem;
        letter-spacing: -0.02em;
    }

.filter-bar {
    background: var(--card-bg);
    border-radius: var(--radius);
    padding: 1.25rem 1.5rem;
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.06);
    margin-bottom: 1.5rem;
}

.stat-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.65rem;
    margin-bottom: 1.5rem;
}

@media (min-width: 640px) {
    .stat-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (min-width: 992px) {
    .stat-grid {
        grid-template-columns: repeat(8, 1fr);
    }
}

.stat-card {
    background: var(--card-bg);
    border-radius: 12px;
    padding: 0.85rem 0.75rem;
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.06);
    border: 1px solid rgba(15, 23, 42, 0.04);
    height: 100%;
    transition: transform .15s ease, box-shadow .15s ease;
}

    .stat-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 24px rgba(15, 23, 42, 0.1);
    }

.stat-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    color: #fff;
    margin-bottom: 0.5rem;
}
    .stat-icon i {
        font-size: 20px; /* bigger icon */
        color: inherit; /* use parent color instead of forced white */
    }


.bg-present {
    background: linear-gradient(135deg, #10b981, #34d399);
}

.bg-absent {
    background: linear-gradient(135deg, #ef4444, #f87171);
}

.bg-leave {
    background: linear-gradient(135deg, #f59e0b, #fbbf24);
}

.bg-late {
    background: linear-gradient(135deg, #6366f1, #818cf8);
}
.bg-early {
    background: linear-gradient(135deg, #0ea5e9, #38bdf8); /* light blue gradient */
    color: #1e40af; /* dark blue for icon/text */
}


.bg-half {
    background: linear-gradient(135deg, #a855f7, #c084fc);
}

.bg-cardns {
    background: linear-gradient(135deg, #64748b, #94a3b8);
}

.bg-percent {
    background: linear-gradient(135deg, #0ea5e9, #38bdf8);
}

.stat-value {
    font-size: 1.3rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
}
    .stat-value .hours {
        font-size: 0.7em; /* smaller font for hours */
        color: #666; /* optional: lighter color */
    }

    .stat-value .minutes {
        font-size: 0.7em; /* normal size for minutes */
        font-weight: bold; /* make minutes stand out */
    }


.stat-label {
    color: var(--text-muted);
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-top: 0.2rem;
}

.chart-card {
    background: var(--card-bg);
    border-radius: var(--radius);
    padding: 1.5rem;
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.06);
    height: 100%;
}

    .chart-card h6 {
        font-weight: 700;
        color: var(--text-dark);
        margin-bottom: 1rem;
    }

.chart-box {
    position: relative;
    height: 240px;
}

.chart-box-sm {
    height: 200px;
}

.table-card {
    background: var(--card-bg);
    border-radius: var(--radius);
    padding: 1.5rem;
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.06);
}

    .table-card table {
        margin-bottom: 0;
    }

.table-compact {
    font-size: 0.82rem;
}

    .table-compact th,
    .table-compact td {
        padding: 0.5rem 0.6rem;
        vertical-align: middle;
    }

.table-card thead th {
    border-bottom: 2px solid #eef1f7;
    color: var(--text-muted);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 700;
}

.badge-status {
    padding: 0.4em 0.75em;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.75rem;
}

.badge-present {
    background: #d1fae5;
    color: #047857;
}

.badge-late {
    background: #e0e7ff;
    color: #4338ca;
}

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

.badge-absent {
    background: #fee2e2;
    color: #b91c1c;
}

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

.badge-holiday {
    background: #fce7f3;
    color: #a21caf;
}

.row-sunday {
    background-color: #eaf4ff !important;
}

    .row-sunday:hover {
        background-color: #dbeeff !important;
    }

.row-holiday {
    background-color: #fdf2fb !important;
}

    .row-holiday:hover {
        background-color: #fbe6f7 !important;
    }

.employee-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.employee-photo {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    background: #e0e7ff;
    border: 2px solid #fff;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
}

.employee-name {
    font-size: 1.3rem;
    font-weight: 700;
    margin: 0;
}

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

/* Print-only header with both logos — hidden on screen, shown only when printing */
.print-header {
    display: none;
}

/* Print: show only the print header + employee header + roster table.
   Everything else (nav, filters, stat cards, charts, the Print button
   itself) is hidden. Portrait, tight margins, a small table font, and
   nowrap on the short columns keep a typical ~30-day roster on one page. */
@page {
    size: portrait;
    margin: 6mm;
}

@media print {
    .no-print {
        display: none !important;
    }

    body {
        background: #fff;
    }

    main.container-fluid {
        padding: 0 !important;
        max-width: 100% !important;
    }

    .print-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 0.5rem;
        padding-bottom: 0.35rem;
        border-bottom: 1px solid #cbd5e1;
    }

        .print-header img {
            max-height: 55px;
            max-width: 100px;
            object-fit: contain;
        }

    .print-header-title {
        font-size: 1rem;
        font-weight: 700;
        color: #1e293b;
    }

    .table-card {
        box-shadow: none;
        padding: 0;
        border-radius: 0;
    }

    .employee-header {
        margin-top: 0.75rem;
        margin-bottom: 0.6rem;
        gap: 0.75rem;
    }

    .employee-photo {
        width: 58px;
        height: 58px;
    }

    .employee-name {
        font-size: 1.15rem;
        line-height: 1.3;
    }

    .employee-sub {
        font-size: 0.75rem;
        line-height: 1.4;
    }

    /* Table sized to fill a portrait page comfortably without overflowing —
       roomier than the first pass, since a ~30-row roster was leaving half
       the page blank at 6pt. !important is needed because Bootstrap's own
       cell-padding rule (.table > :not(caption) > * > *) is more specific
       than a plain class selector and otherwise wins over this in the cascade. */
    .table-compact,
    .table-compact th,
    .table-compact td {
        font-size: 8pt !important;
        line-height: 1.35 !important;
    }

        .table-compact th,
        .table-compact td {
            padding: 4px 6px !important;
        }
            /* Keep short value columns (day, times, counts, status) on one line so
       they don't grow row height. Leave and Remarks are still allowed to
       wrap (they're the last two columns and rarely more than 1-2 words),
       but Shift is forced to a single line with ellipsis truncation instead
       of wrapping — long shift descriptions were doubling row height and
       pushing the report to 3 pages. */
            .table-compact th:not(:nth-child(6)):not(:last-child),
            .table-compact td:not(:nth-child(6)):not(:last-child) {
                white-space: nowrap;
            }

            .table-compact th:nth-child(2),
            .table-compact td:nth-child(2) {
                max-width: 70px;
                overflow: hidden;
                text-overflow: ellipsis;
            }

    .table-card thead th {
        font-size: 7pt !important;
        letter-spacing: 0;
    }

    .badge-status {
        padding: 1px 5px !important;
        font-size: 7.5pt !important;
        line-height: 1.4 !important;
        white-space: nowrap;
    }

    table.table-compact {
        border-collapse: collapse !important;
    }

    table, tr, td, th {
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group;
    }
}