/* ==========================================================================
   1. BASE STRUCTURE (Always applied via .jf-tableClassic - Defaults to Purple)
   ========================================================================== */
.jf-tableClassic
{
    overflow-y: auto;
    overflow-x: hidden;
}

.jf-tableClassic.scroll-all
{
    overflow-y: auto;
    overflow-x: auto;
}

.jf-tableClassic.scroll-x
{
    overflow-y: hidden;
    overflow-x: auto;
}

.jf-tableClassic.scroll-y
 {
        overflow-y: auto;
        overflow-x: hidden;
 }    

 
.jf-tableClassic table
{
    border-collapse: collapse;
    width: 100%;
    margin: 1px;
}

    .jf-tableClassic table th
    {
        font-weight: bold;
        text-align: center; /* Centered by default */
        background-color: #a632fe; /* Default: Purple */
        color: yellow; /* Default: Yellow text */
        border: 1px solid #a386bb;
        padding: 8px; /* Default comfortable padding */
    }

    .jf-tableClassic table tr
    {
        background-color: #f5f1f8; /* Default: Soft purple tint background */
    }

        .jf-tableClassic table tr td
        {
            color: #a632fe; /* Default: Purple text */
            border: 1px solid #ebd5fb;
            padding: 8px; /* Default comfortable padding */
        }

        /* Default hover behavior if no explicit hover modifier is selected */
        .jf-tableClassic table tr:hover
        {
            background-color: #ebd5fb !important;
        }


    /* ==========================================================================
   Styles green
   ========================================================================== */
    .jf-tableClassic.green table th
    {
        font-weight: bold;
        text-align: center; /* Centered by default */
        background-color: #059669; /* Default: Purple */
        color: #ffffff; /* Default: Yellow text */
        border: 1px solid #a8aa0c;
        padding: 8px; /* Default comfortable padding */
    }

    .jf-tableClassic.green table tr
    {
        background-color: #e6f4ea; /* Default: Soft purple tint background */
    }

        .jf-tableClassic.green table tr td
        {
            color: #064e3b; /* Default: Purple text */
            border: 1px solid #ffffff;
            padding: 4px; /* Default comfortable padding */
        }

        /* Default hover behavior if no explicit hover modifier is selected */
        .jf-tableClassic.green table tr:hover
        {
            background-color: #dcfce7 !important;
        }




    /* ==========================================================================
   Styles green2
   ========================================================================== */
    .jf-tableClassic.green2 table th
    {
        font-weight: bold;
        text-align: center; /* Centered by default */
        background-color: green; /* Default: Purple */
        color: #e8fce8; /* Default: Yellow text */
        border: 1px solid #a8aa0c;
        padding: 8px; /* Default comfortable padding */
    }

    .jf-tableClassic.green2 table tr
    {
        background-color: #e8fce8; /* Default: Soft purple tint background */
    }

        .jf-tableClassic.green2 table tr td
        {
            color: #555454; /* Default: Purple text */
            border: 1px solid #c3fbc3;
            padding: 4px; /* Default comfortable padding */
        }

        /* Default hover behavior if no explicit hover modifier is selected */
        .jf-tableClassic.green2 table tr:hover
        {
            background-color: #aafeaa !important;
        }



    /* ========================================================================== 
     Styles green3 (Modern Premium Emerald & Sage) 
     ========================================================================== */
    .jf-tableClassic.green3 table th
    {
        font-weight: bold;
        text-align: center; /* Centered by default */
        background-color: #0f766e; /* Clean, rich teal-emerald green */
        color: #ffffff; /* Crisp white text for clear contrast */
        border: 1px solid #115e59; /* Deep matching border for the header cells */
        padding: 8px;
    }

    .jf-tableClassic.green3 table tr
    {
        background-color: #f0fdf4; /* Incredibly soft, light sage-mint background */
    }

        .jf-tableClassic.green3 table tr td
        {
            color: #1e293b; /* Dark charcoal slate for maximum reading comfort */
            border: 1px solid #d1fae5; /* Soft, muted light-green gridline borders */
            padding: 6px 8px;
        }

    /* Optional: Clean alternating row look if combined with R-striped */
    .jf-tableClassic.green3.R-striped table tr:nth-child(even)
    {
        background-color: #ffffff; /* Alternate rows split cleanly into crisp white */
    }

    /* Smooth mint hover highlighting */
    .jf-tableClassic.green3 table tr:hover
    {
        background-color: #bbf7d0 !important; /* Perfect clear highlighter mint shade */
    }


    /* ========================================================================== 
     Styles blue (Modern Royal & Ice Blue) 
     ========================================================================== */
    .jf-tableClassic.blue table th
    {
        font-weight: bold;
        text-align: center; /* Centered by default */
        background-color: #1e40af; /* Modern deep corporate blue */
        color: #ffffff; /* Crisp white text for clear contrast */
        border: 1px solid #1d4ed8; /* Subtle clean blue border spacing */
        padding: 8px;
    }

    .jf-tableClassic.blue table tr
    {
        background-color: #ffffff; /* Base background is crisp white */
    }

        .jf-tableClassic.blue table tr td
        {
            color: #1e293b; /* Highly legible dark slate for your data text */
            border: 1px solid #e2e8f0; /* Soft, minimalist light-gray-blue gridlines */
            padding: 6px 8px;
        }

    /* Soft Ice-Blue alternating row striping (Optional helper combination) */
    .jf-tableClassic.blue.R-striped table tr:nth-child(even)
    {
        background-color: #f0f7ff; /* Extremely soft ice-blue tint for scanning rows */
    }

    /* Elegant blue hover state highlighting */
    .jf-tableClassic.blue table tr:hover
    {
        background-color: #e0f2fe !important; /* Smooth sky/ice blue hover effect */
    }


    /* ========================================================================== 
     Styles purple (Modern Royal Velvet & Soft Lavender) 
     ========================================================================== */
    .jf-tableClassic.purple table th
    {
        font-weight: bold;
        text-align: center; /* Centered by default */
        background-color: #6b21a8; /* Deep, elegant royal velvet purple */
        color: #ffffff; /* Crisp pure white text for beautiful contrast */
        border: 1px solid #581c87; /* Deep matching border for the header cells */
        padding: 8px;
    }

    .jf-tableClassic.purple table tr
    {
        background-color: #ffffff; /* Primary background is crisp, clean white */
    }

        .jf-tableClassic.purple table tr td
        {
            color: #1e1b4b; /* Deep indigo-black text for sharp readability */
            border: 1px solid #e9d5ff; /* Soft, minimalist lavender gridlines */
            padding: 6px 8px;
        }

    /* Clean alternating row look if combined with R-striped */
    .jf-tableClassic.purple.R-striped table tr:nth-child(even)
    {
        background-color: #faf5ff; /* Extremely faint, elegant lavender-tinted row */
    }

    /* Vibrant lavender highlighter on hover */
    .jf-tableClassic.purple table tr:hover
    {
        background-color: #f3e8ff !important; /* Perfect soft violet shade for row selection */
    }


    /* ========================================================================== 
     Styles Popular (Modern Slate Dashboard Style) 
     ========================================================================== */
    .jf-tableClassic.popular table th
    {
        font-weight: bold;
        text-align: center; /* Centered by default */
        background-color: #1e293b; /* Dark Slate / Charcoal Grey */
        color: #f8fafc; /* Bright clean off-white text */
        border: 1px solid #0f172a; /* Seamless dark border matching the header */
        padding: 8px;
    }

    .jf-tableClassic.popular table tr
    {
        background-color: #ffffff; /* Primary background is crisp clean white */
    }

        .jf-tableClassic.popular table tr td
        {
            color: #334155; /* Highly legible deep slate text color */
            border: 1px solid #e2e8f0; /* Very soft, ultra-thin grey gridlines */
            padding: 6px 8px;
        }

    /* Soft Cool-Grey alternating row striping if used with R-striped */
    .jf-tableClassic.popular.R-striped table tr:nth-child(even)
    {
        background-color: #f8fafc; /* Clean neutral tint for scan readability */
    }

    /* Elegant ice-blue/lavender row highlight on hover */
    .jf-tableClassic.popular table tr:hover
    {
        background-color: #f1f5f9 !important; /* Extremely clean neutral-cool highlight */
    }


    /* ========================================================================== 
     Styles: Modern Contextual Themes (Primary, Danger, Secondary, Warning, Success) 
     ========================================================================== */

    /* --------------------------------------------------------------------------
     A. PRIMARY (Modern Blue Dashboard Style)
     -------------------------------------------------------------------------- */
    .jf-tableClassic.primary table th
    {
        font-weight: bold;
        text-align: center;
        background-color: #0d6efd; /* Clean corporate vivid blue */
        color: #ffffff;
        border: 1px solid #0a58ca;
        padding: 8px;
    }

    .jf-tableClassic.primary table tr
    {
        background-color: #ffffff;
    }

        .jf-tableClassic.primary table tr td
        {
            color: #1e293b; /* Dark slate for legible text */
            border: 1px solid #e2e8f0; /* Ultra-thin soft gray borders */
            padding: 6px 8px;
        }

    .jf-tableClassic.primary.R-striped table tr:nth-child(even)
    {
        background-color: #f8fafc; /* Clean light cool gray zebra row */
    }

    .jf-tableClassic.primary table tr:hover
    {
        background-color: #e0f2fe !important; /* Soft ice-blue highlight */
    }

    /* --------------------------------------------------------------------------
     B. DANGER (Soft Red / Alert Style)
     -------------------------------------------------------------------------- */
    .jf-tableClassic.danger table th
    {
        font-weight: bold;
        text-align: center;
        background-color: #dc3545; /* Deep crimson red */
        color: #ffffff;
        border: 1px solid #b02a37;
        padding: 8px;
    }

    .jf-tableClassic.danger table tr
    {
        background-color: #fff5f5; /* Incredibly soft reddish-white tint */
    }

        .jf-tableClassic.danger table tr td
        {
            color: #721c24; /* High-contrast dark blood-red for text */
            border: 1px solid #f8d7da; /* Muted soft red gridlines */
            padding: 6px 8px;
        }

    .jf-tableClassic.danger.R-striped table tr:nth-child(even)
    {
        background-color: #ffffff; /* Alternate row falls back to pure white */
    }

    .jf-tableClassic.danger table tr:hover
    {
        background-color: #f8d7da !important; /* Pastel pink-red selection highlight */
    }

    /* --------------------------------------------------------------------------
     C. SECONDARY (Sophisticated Slate-Gray Style)
     -------------------------------------------------------------------------- */
    .jf-tableClassic.secondary table th
    {
        font-weight: bold;
        text-align: center;
        background-color: #475569; /* Muted sophisticated charcoal-gray */
        color: #ffffff;
        border: 1px solid #334155;
        padding: 8px;
    }

    .jf-tableClassic.secondary table tr
    {
        background-color: #ffffff;
    }

        .jf-tableClassic.secondary table tr td
        {
            color: #334155;
            border: 1px solid #f1f5f9; /* Minimalist near-invisible gridlines */
            padding: 6px 8px;
        }

    .jf-tableClassic.secondary.R-striped table tr:nth-child(even)
    {
        background-color: #f8fafc;
    }

    .jf-tableClassic.secondary table tr:hover
    {
        background-color: #e2e8f0 !important; /* Smooth cool-gray select accent */
    }

    /* --------------------------------------------------------------------------
     D. WARNING (Warm Amber / Balance Style)
     -------------------------------------------------------------------------- */
    .jf-tableClassic.warning table th
    {
        font-weight: bold;
        text-align: center;
        background-color: #ffc107; /* High-visibility golden warning yellow */
        color: #000000; /* Black text on yellow header for safety contrast */
        border: 1px solid #e0a800;
        padding: 8px;
    }

    .jf-tableClassic.warning table tr
    {
        background-color: #fffdf5; /* Soft buttercream yellow tint background */
    }

        .jf-tableClassic.warning table tr td
        {
            color: #664d03; /* Rich dark amber-brown text for crisp reading */
            border: 1px solid #fff3cd; /* Elegant soft gold gridline rules */
            padding: 6px 8px;
        }

    .jf-tableClassic.warning.R-striped table tr:nth-child(even)
    {
        background-color: #ffffff;
    }

    .jf-tableClassic.warning table tr:hover
    {
        background-color: #fff3cd !important; /* Warm highlighter yellow selection row */
    }

    /* --------------------------------------------------------------------------
     E. SUCCESS (Clean Modern Emerald Green)
     -------------------------------------------------------------------------- */
    .jf-tableClassic.success table th
    {
        font-weight: bold;
        text-align: center;
        background-color: #198754; /* Deep rich success green */
        color: #ffffff;
        border: 1px solid #146c43;
        padding: 8px;
    }

    .jf-tableClassic.success table tr
    {
        background-color: #ffffff;
    }

        .jf-tableClassic.success table tr td
        {
            color: #0f5132; /* Deep pine-green for comfortable reading */
            border: 1px solid #d1fae5; /* Soft light mint green gridlines */
            padding: 6px 8px;
        }

    .jf-tableClassic.success.R-striped table tr:nth-child(even)
    {
        background-color: #f0fdf4; /* Light aesthetic mint-tinted zebra row */
    }

    .jf-tableClassic.success table tr:hover
    {
        background-color: #d1e7dd !important; /* Clean soft mint highlighter overlay */
    }



/* Sticky Header Option */
.jf-tableClassic.H-sticky table th
{
    position: sticky;
    top: 0;
    z-index: 2;
}

/* Striped Alternating Rows */
.jf-tableClassic.R-stripedDarkens table tr:nth-child(even) {
    /* Automatically darkens the initial background color by 5% */
    background-image: linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05));
}

.jf-tableClassic.R-striped-Lightens table tr:nth-child(even) {
    /* Automatically lightens the initial background color by 50% */
    background-image: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5));
}

/* ==========================================================================
 SHADOW & VISUAL UTILITIES
   ========================================================================== */
.jf-tableClassic.shadow
{
    box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
}

.jf-tableClassic.shadow-black
{
    box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
}

.jf-tableClassic.shadow-red
{
    box-shadow: 4px 4px 8px rgba(255,0,0,0.3);
}

.jf-tableClassic.shadow-yellow
{
    box-shadow: 4px 4px 8px rgba(255,255,0,0.3);
}

.jf-tableClassic.shadow-grey
{
    box-shadow: 4px 4px 8px rgba(128,128,128,0.4);
}

.jf-tableClassic.shadow-green
{
    box-shadow: 4px 4px 8px rgba(0,128,0,0.3);
}

/* Border Radius Container Utility */
.jf-tableClassic.radius
{
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    /*overflow: hidden;*/   
}


.jf-tableClassic.H-sticky table th
{
    position: sticky;
    top: 0;
    z-index: 10; /* Ensures the header stays on top of the moving data rows */
}

.jf-tableClassic.C-fixed table th:first-child
{
    position: sticky;
    left: 0;
    z-index: 15; /* Higher than normal sticky header */
}

/* Freeze the first column's body cells */
.jf-tableClassic.C-fixed table tr td:first-child
{
    position: sticky;
    left: 0;
    z-index: 5;
    background-color: inherit; /* Keeps the row's background color intact */
}