/* ===========================================================
   BASE STRUCTURE FOR ALL CUSTOM TABLE THEMES
=========================================================== */

.table-custom.dataTable {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border-radius: 8px; /* Rounded corners */
    overflow: hidden; /* Clip corners */
    box-shadow: 0 4px 16px rgba(0,0,0,0.1); /* Shadow */
    border: 1px solid #e5e5e5; /* Outer border */
}

    /* Header */
    .table-custom.dataTable thead th {        
        border-bottom: 2px solid #eee !important;                
    }

    /* Body */
    .table-custom.dataTable tbody td {
        border-bottom: 1px solid #eee;
        vertical-align: middle;       
    }

    /* Footer */
    .table-custom.dataTable tfoot td {
        border-top: 2px solid #eee;
        background: #fafafa;
    }



/* ===========================================================
   THEME 1 – ORANGE (Light Header)
   Class: table-custom-orange
=========================================================== */

.table-custom-orange.dataTable {
    border-color: #ffe0c2;
}

    .table-custom-orange.dataTable thead {
        background-color: #fff4e6; /* Light pastel orange */
        color: #d65f00;
    }

        .table-custom-orange.dataTable thead th {
            border-color: #ffe0c2;
        }

    .table-custom-orange.dataTable tbody td {
        border-color: #ffe0c2;
    }

    .table-custom-orange.dataTable tbody tr:hover {
        background-color: #fff2e6;
    }

    .table-custom-orange.dataTable tfoot {
        background-color: #fff7f0;
        border-color: #ffe0c2;
    }



/* ===========================================================
   THEME 2 – BLUE (Light Header)
   Class: table-custom-blue
=========================================================== */

.table-custom-blue.dataTable {
    border-color: #cfe8ff;
}

    .table-custom-blue.dataTable thead {
        background-color: #eaf4ff; /* Light soft blue */
        color: #005fcc;
    }

        .table-custom-blue.dataTable thead th {
            border-color: #cfe8ff;
        }

    .table-custom-blue.dataTable tbody td {
        border-color: #cfe8ff;
    }

    .table-custom-blue.dataTable tbody tr:hover {
        background-color: #e9f5ff;
    }

    .table-custom-blue.dataTable tfoot {
        background-color: #f2f9ff;
        border-color: #cfe8ff;
    }



/* ===========================================================
   THEME 3 – GREEN (Light Header)
   Class: table-custom-green
=========================================================== */

.table-custom-green.dataTable {
    border-color: #d7f5e3;
}

    .table-custom-green.dataTable thead {
        background-color: #e9fdf1; /* Light mint green */
        color: #1e7d3d;
    }

        .table-custom-green.dataTable thead th {
            border-color: #d7f5e3;
        }

    .table-custom-green.dataTable tbody td {
        border-color: #d7f5e3;
    }

    .table-custom-green.dataTable tbody tr:hover {
        background-color: #effdf4;
    }

    .table-custom-green.dataTable tfoot {
        background-color: #f3fff8;
        border-color: #d7f5e3;
    }



/* ===========================================================
   THEME 4 – PURPLE (Light Header)
   Class: table-custom-purple
=========================================================== */

.table-custom-purple.dataTable {
    border-color: #e6d9ff;
}

    .table-custom-purple.dataTable thead {
        background-color: #f2eaff; /* Light lavender */
        color: #6f42c1;
    }

        .table-custom-purple.dataTable thead th {
            border-color: #e6d9ff;
        }

    .table-custom-purple.dataTable tbody td {
        border-color: #e6d9ff;
    }

    .table-custom-purple.dataTable tbody tr:hover {
        background-color: #f6f0ff;
    }

    .table-custom-purple.dataTable tfoot {
        background-color: #f9f3ff;
        border-color: #e6d9ff;
    }



/* ===========================================================
   THEME 5 – DARK MODE (Keep Dark Header)
   Class: table-custom-dark
=========================================================== */

.table-custom-dark.dataTable {
    background: #1e1e1e;
    border-color: #333;
    color: #eee;
}

    .table-custom-dark.dataTable thead {
        background: #2c2c2c;
        color: #fff;
    }

        .table-custom-dark.dataTable thead th {
            border-color: #3a3a3a;
            color: #fff;
        }

    .table-custom-dark.dataTable tbody td {
        border-color: #3a3a3a;        
    }

    .table-custom-dark.dataTable tbody tr:hover {
        background-color: #2a2a2a;
    }

    .table-custom-dark.dataTable tfoot {
        background-color: #2c2c2c;
        border-color: #3a3a3a;
    }



/* =========================================================== */
/* CARD HEADER THEMES */
/* Use classes: 
   card-bg-orange 
   card-bg-blue 
   card-bg-green 
   card-bg-purple 
   card-bg-soft-orange 
*/
/* =========================================================== */

/* -------------------- 1. ORANGE GRADIENT -------------------- */
.card-bg-orange {
    background: linear-gradient(90deg, #ff7e5f, #feb47b) !important;
    color: #fff !important;
}

    .card-bg-orange h3,
    .card-bg-orange i,
    .card-bg-orange .card-title {
        color: #fff !important;
    }

/* -------------------- 2. BLUE GRADIENT ----------------------- */
.card-bg-blue {
    background: linear-gradient(90deg, #4e73df, #1cc8ee) !important;
    color: #fff !important;
}

    .card-bg-blue h3,
    .card-bg-blue i,
    .card-bg-blue .card-title {
        color: #fff !important;
    }

/* -------------------- 3. GREEN GRADIENT ---------------------- */
.card-bg-green {
    background: linear-gradient(90deg, #1cc88a, #4ade80) !important;
    color: #fff !important;
}

    .card-bg-green h3,
    .card-bg-green i,
    .card-bg-green .card-title {
        color: #fff !important;
    }

/* -------------------- 4. PURPLE GRADIENT --------------------- */
.card-bg-purple {
    background: linear-gradient(90deg, #6a5af9, #9d4edd) !important;
    color: #fff !important;
}

    .card-bg-purple h3,
    .card-bg-purple i,
    .card-bg-purple .card-title {
        color: #fff !important;
    }

/* -------------------- 5. SOFT ORANGE (Light Theme) ----------- */
.card-bg-soft-orange {
    background-color: #fff3e6 !important;
    border-bottom: 2px solid #ffe0c2 !important;
    color: #d16b32 !important;
}

    .card-bg-soft-orange h3,
    .card-bg-soft-orange i,
    .card-bg-soft-orange .card-title {
        color: #d16b32 !important;
    }

/* Compact card header (override Keen default) */
.card-header.card-header-sm {
    min-height: auto !important;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}
@media print {
    body {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 12px;
    }

    table.dataTable {
        font-size: 12px !important;
    }

        table.dataTable th,
        table.dataTable td {
            padding: 6px !important;
        }
}
.card-header-bg1 {
    background: linear-gradient( 135deg, rgba(54, 153, 255, 0.12), rgba(54, 153, 255, 0.02) );
    border-bottom: 1px dashed #e4e6ef;
}
.card-header-bg2 {
    background: linear-gradient(135deg, rgba(80, 205, 137, 0.14), rgba(80, 205, 137, 0.03) );
    border-bottom: 1px dashed #e4e6ef;
}
.card-header-bg3 {
    background: linear-gradient(135deg, rgba(255, 199, 0, 0.18), rgba(255, 199, 0, 0.04) );
    border-bottom: 1px dashed #e4e6ef;
}
.card-header-bg4 {
    background: linear-gradient(135deg, rgba(241, 65, 108, 0.14), rgba(241, 65, 108, 0.03) );
    border-bottom: 1px dashed #e4e6ef;
}
.card-header-bg5 {
    background: linear-gradient(135deg, rgba(0, 158, 247, 0.14), rgba(0, 158, 247, 0.03) );
    border-bottom: 1px dashed #e4e6ef;
}
.card-header-bg6 {
    background: linear-gradient(135deg, rgba(114, 57, 234, 0.14), rgba(114, 57, 234, 0.03) );
    border-bottom: 1px dashed #e4e6ef;
}
.card-header-bg7 {
    background: linear-gradient(135deg, rgba(32, 201, 151, 0.14), rgba(32, 201, 151, 0.03) );
    border-bottom: 1px dashed #e4e6ef;
}
.card-header-bg8 {
    background: linear-gradient(135deg, #1e3c72, #2a5298 );
    color: #ffffff;
}
.card-header-bg9 {
    background: linear-gradient(135deg, #134e4a, #166534 );
    color: #ffffff;
}
.card-header-bg10 {
    background: linear-gradient(135deg, #3b0764, #581c87 );
    color: #ffffff;
}
.card-header-bg11 {
    background: linear-gradient(135deg, #92400e, #b45309 );
    color: #ffffff;
}
.card-header-bg12 {
    background: linear-gradient(135deg, #7f1d1d, #991b1b );
    color: #ffffff;
}
.card-header-bg13 {
    background: linear-gradient(135deg, #1f2937, #374151 );
    color: #ffffff;
}
.card-header-bg14 {
    background: linear-gradient(135deg, #111827, #1f2933 );
    color: #ffffff;
}
.card-header-bg15 {
    background: linear-gradient(135deg, #020617, #0f172a );
    color: #ffffff;
}
.card-header-bg20 {
    background: linear-gradient(90deg, #4e73df, #1cc88a);    
}
.card-header-bg21 {
    background: linear-gradient(90deg, #1e3c72, #2a9df4);
}
.card-header-bg22 {
    background: linear-gradient(90deg, #6f42c1, #4e73df);
}
.card-header-bg23 {
    background: linear-gradient(90deg, #3f51b5, #20c997);
}
.card-header-bg24 {
    background: linear-gradient(90deg, #0f2027, #2ecc71);
}
.card-header-bg25 {
    background: linear-gradient(90deg, #b8860b, #ffb703);
}
.card-header-bg26 {
    background: linear-gradient(90deg, #14532d, #4ade80);
}
.card-header-bg27 {
    background: linear-gradient(90deg, #334155, #64748b);
}
.card-header-bg28 {
    background: linear-gradient(90deg, #c0392b, #f39c12);
}
.card-header-bg29 {
    background: linear-gradient(90deg, #7f1d1d, #e11d48);
}
.card-header-bg30 {
    background: linear-gradient(90deg, #0f172a, #1e40af);
}
.card-header-bg31 {
    background: linear-gradient(90deg, #020617, #581c87);
}
.card-header-bg32 {
    background: linear-gradient(90deg, #1f2933, #0f766e);
}
.card-header-bg33 {
    background: linear-gradient(90deg, #7c3aed, #06b6d4);
}
.card-header-bg34 {
    background: linear-gradient(90deg, #be123c, #f97316);
}
.branch-select {
    border-radius: 0.475rem;
    transition: box-shadow 0.2s ease;
}

    .branch-select:hover {
        box-shadow: 0 0 0 1px var(--kt-primary);
    }

    .branch-select:focus-within {
        box-shadow: 0 0 0 0.15rem rgba(54, 153, 255, 0.25);
    }

.session-select {
    border-radius: 0.475rem;
    transition: box-shadow 0.2s ease;
}

    .session-select:hover {
        box-shadow: 0 0 0 1px var(--kt-success);
    }

    .session-select:focus-within {
        box-shadow: 0 0 0 0.15rem rgba(80, 205, 137, 0.25);
    }
/* Scrollable Birthday Body */
.birthday-scroll {
    max-height: 500px; /* adjust if needed */
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 6px; /* space for scrollbar */
}

    /* Slim scrollbar (Chrome / Edge) */
    .birthday-scroll::-webkit-scrollbar {
        width: 6px;
    }

    .birthday-scroll::-webkit-scrollbar-track {
        background: transparent;
    }

    .birthday-scroll::-webkit-scrollbar-thumb {
        background-color: rgba(0, 0, 0, 0.2);
        border-radius: 6px;
    }

/* Firefox */
.birthday-scroll {
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,0.25) transparent;
}