/* =========================
   Leave Table (theme-aware)
   ========================= */

/* --- Local tokens with safe fallbacks (use your global ones if present) --- */
:root, [data-theme="light"] {
    --lt-surface-1: var(--app-surface-1, #ffffff);
    --lt-surface-2: var(--app-surface-2, #f8f9fa);
    --lt-text: var(--app-text, #111111);
    --lt-border: var(--app-border, #dee2e6);
    --lt-primary: var(--app-primary, #0d6efd);
    --leave-approved: var(--leave-approved, #28a745);
    --leave-pending: var(--leave-pending, #ffc107);
    --leave-pending-approval: var(--leave-pending-approval, #82c7ff);
}

[data-theme="dark"] {
    --lt-surface-1: var(--app-surface-1, #131722);
    --lt-surface-2: var(--app-surface-2, #0d1018);
    --lt-text: var(--app-text, #e9edf1);
    --lt-border: var(--app-border, #2b2f3a);
    --lt-primary: var(--app-primary, #4ca3ff);
}

[data-theme="calm"] {
    --lt-surface-1: var(--app-surface-1, #131a22);
    --lt-surface-2: var(--app-surface-2, #0f141b);
    --lt-text: var(--app-text, #e7edf6);
    --lt-border: var(--app-border, #2b3340);
    --lt-primary: var(--app-primary, #7bb3ff);
}

/* ---------- Header row inside the card (title + + button) ---------- */
.leave-container {
    display: flex;
    align-items: center;
    justify-content: space-between; /* pushes the + to the right on same row */
    gap: 10px;
    margin-bottom: 8px;
}

    .leave-container .leave-table {
        margin: 0;
        font-weight: 600;
        color: var(--lt-text);
        flex: 0 1 auto; /* do NOT grow; lets space-between work */
    }

/* If you prefer the + immediately next to “Leave” (not right aligned),
   replace justify-content above with:
   justify-content: flex-start;
*/

/* The blue circular add button */
.add-circle-btn {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: var(--lt-primary);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    outline: none;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    transition: transform .15s ease, filter .15s ease, background-color .15s ease;
}

    .add-circle-btn:hover {
        transform: scale(1.08);
        filter: brightness(0.95);
    }

    .add-circle-btn:focus {
        outline: none;
        box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--lt-primary) 35%, transparent);
    }

/* ---------- Calendar wrapper (kept inside the card) ---------- */
.time-off-calendar {
    width: 100%; /* respect card width */
    background: var(--lt-surface-1);
    color: var(--lt-text);
}

/* Optional header above the table if you use it */
.calendar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 10px 0;
}

    .calendar-header h4 {
        margin: 0;
        font-weight: 600;
        color: var(--lt-text);
    }

/* Scroll container for the table (horizontal + vertical) */
.days-container {
    position: relative;
    overflow: auto;
    max-height: 200px !important; /* adjust if your card has a fixed height */
    border: 1px solid var(--lt-border);
    border-radius: 6px;
    background: var(--lt-surface-1);
    overscroll-behavior-y:auto; 
}

/* ---------- The table ---------- */
.calendar-table {
    min-width: 800px; /* keep columns readable; scroll if smaller */
    width: 100%;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
    color: var(--lt-text);
}

    .calendar-table thead {
        position: sticky;
        top: 0;
        z-index: 2;
    }

    .calendar-table th {
        background: var(--lt-surface-2);
        color: var(--lt-text);
        border-bottom: 2px solid var(--lt-border);
        padding: 12px 8px;
        font-weight: 600;
        text-align: center;
        white-space: nowrap;
    }

/* sticky first column for names */
.employee-column {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--lt-surface-2);
    font-weight: 600;
    text-align: left;
    padding-left: 15px;
    color: var(--lt-text);
}

/* day header cells across the top */
.day-header {
    text-align: center;
    min-width: 55px;
    white-space: nowrap;
    font-size: 12px;
    color: var(--lt-text);
}

.calendar-table tbody td {
    padding: 8px;
    border-bottom: 1px solid var(--lt-border);
    vertical-align: middle;
    background: var(--lt-surface-1);
    color: var(--lt-text);
}

.calendar-table tbody .employee-column {
    background: var(--lt-surface-1);
    font-weight: 500;
    color: var(--lt-text);
    border-right: 1px solid var(--lt-border);
}

/* When a cell is meant to be perfectly centered with no inner padding */
.calendar-table tbody td.text-center {
    padding: 0;
}

/* Optional subtle zebra striping for readability */
.calendar-table tbody tr:nth-child(odd) td:not(.employee-column) {
    background: color-mix(in srgb, var(--lt-surface-2) 40%, transparent);
}

/* ---------- Status bars in cells ---------- */
.status-bar {
    height: 12px;
    margin: 2px 0;
    display: block;
    width: 100%;
    border-radius: 3px;
}

.status-approved {
    background-color: var(--leave-approved, #28a745);
}

.status-pending {
    background-color: var(--leave-pending, #ffc107);
}

.status-pending-approval {
    background-color: var(--leave-pending-approval, #82c7ff);
}

/* ---------- Legend / labels ---------- */
.status-labels {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.status-label {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: var(--lt-text);
}

.status-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 8px;
}

    .status-dot.approved {
        background-color: var(--leave-approved, #28a745);
    }

    .status-dot.pending {
        background-color: var(--leave-pending, #ffc107);
    }

    .status-dot.pending-approval {
        background-color: var(--leave-pending-approval, #82c7ff);
    }

/* ---------- Odds & ends / compatibility ---------- */
.employee-column .border {
    /* preserve your old “right divider” intent but theme-aware */
    border-right: 1px solid var(--lt-border);
}

/* Keep it inside the card even if plugins try to stretch it */
.section-item-wide .time-off-calendar,
.section-item-wide .days-container {
    max-width: 100%;
}

/* =========================
   Responsive refinements
   ========================= */

/* Slightly smaller cells on medium screens */
@media (max-width: 1200px) {
    .day-header {
        min-width: 48px;
    }

    .calendar-table th,
    .calendar-table td {
        padding: 8px 6px;
    }
}

/* Compress more on tablets */
@media (max-width: 768px) {
    .employee-column {
        width: 110px;
    }

    .day-header {
        min-width: 42px;
        font-size: 11px;
    }

    .status-bar {
        height: 10px;
    }

    .days-container {
        max-height: 420px;
    }
    /* a bit less scroll needed */
}

/* Phone portrait */
@media (max-width: 576px) {
    .employee-column {
        width: 96px;
        padding-left: 10px;
    }

    .day-header {
        min-width: 36px;
        font-size: 10px;
    }

    .calendar-table th,
    .calendar-table td {
        padding: 6px 4px;
    }

    .status-bar {
        height: 9px;
    }
}

.leave-filters .form-select.form-select-sm {
    min-width: 160px;
}



/*body {
    background-color: rgb(246, 246, 247);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.add-circle-btn {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: #4361ee;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    cursor: pointer;
    border: none;
    font-size: 14px;
    float: right;
}

.add-circle-btn:hover {
    background-color: #3a56d8;
    transform: scale(1.1);
}*/

/* Time Off Calendar */
/*.time-off-calendar {
    width: 100%;
    background: white;
}

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

.calendar-header h4 {
    margin: 0;
    font-weight: 600;
}

.days-container {
    position: relative;
    overflow-x: auto;
    max-height: 500px;
    border: 1px solid #dee2e6;
    border-radius: 6px;
}

.calendar-table {
    min-width: 800px;
    margin: 0;
}

.calendar-table thead {
    position: sticky;
    top: 0;
    background: white;
    z-index: 2;
}

.calendar-table th {
    background: #f8f9fa;
    border-bottom: 2px solid #dee2e6;
    padding: 12px 8px;
    font-weight: 600;
    text-align: center;
}

.employee-column {
    position: sticky;
    left: 0;
    width: 130px;
    background: #f8f9fa;
    z-index: 1;
    font-weight: 600;
    text-align: left;
    padding-left: 15px;
}

.day-header {
    text-align: center;
    min-width: 55px;
    white-space: nowrap;
    font-size: 12px;
}

.calendar-table tbody td {
    padding: 8px;
    border-bottom: 1px solid #dee2e6;
    vertical-align: middle;
}

.calendar-table tbody .employee-column {
    background: white;
    font-weight: 500;
}

.status-bar {
    height: 12px;
    margin: 2px 0;
    display: block;
    width: 100%;
}

.status-approved {
    background-color: #28a745;
}

.status-pending {
    background-color: #ffc107;
}

.status-pending-approval {
    background-color: #add8e6;
}

.status-labels {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-top: 15px;
    flex-wrap: wrap;
}

.status-label {
    display: flex;
    align-items: center;
    font-size: 14px;
}

.status-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 8px;
}

.leave-container {
    display: flex;
    flex-direction: row;
    gap: 16px;
}

.leave-table {
    width: 40px;
}

.leave-header {
    height: 36px;
}

.calendar-table tbody td.text-center {
    padding: 0px;
}

.employee-column .border {
    border-right: 1px solid grey;
}*/

/* Responsive Styles */
/*@media (max-width: 768px) {
    .calendar-table {
        min-width: 100%;*/ /* Allow the table to take full width on smaller screens */
    /*}

    .employee-column {
        width: 100px;*/ /* Reduce width of employee column */
    /*}

    .calendar-table th, .calendar-table tbody td {
        padding: 8px 4px;*/ /* Reduce padding for smaller screens */
        /*font-size: 12px;*/ /* Adjust font size */
    /*}

    .add-circle-btn {
        width: 20px;*/ /* Smaller button on mobile */
        /*height: 20px;
        font-size: 12px;*/ /* Smaller font size */
    /*}

    .status-labels {
        flex-direction: column;*/ /* Stack status labels vertically */
        /*align-items: flex-start;*/ /* Align to the start */
    /*}

    .leave-container {
        flex-direction: column;*/ /* Stack leave containers vertically */
    /*}
}

@media (max-width: 480px) {
    .calendar-header h4 {
        font-size: 16px;*/ /* Smaller header font size */
    /*}

    .status-label {
        font-size: 12px;*/ /* Smaller status label font size */
    /*}
}*/