/* Google Fonts - Prompt */
@import url('https://fonts.googleapis.com/css2?family=Prompt:wght@300;400;500;600;700&display=swap');

:root {
    --primary-color: #0f172a;       /* Elegant Slate 900 */
    --secondary-color: #b45309;     /* Warm Amber/Gold */
    --accent-color: #0284c7;        /* Sky Blue 600 */
    --background-start: #f8fafc;    /* Soft Slate 50 */
    --background-end: #f1f5f9;      /* Light Slate 100 */
    --glass-bg: rgba(255, 255, 255, 0.95);
    --glass-border: rgba(226, 232, 240, 0.8);
    --text-main: #0f172a;           /* Dark Slate for formal readability */
    --text-muted: #475569;          /* Slate 600 */
    --sidebar-bg: #ffffff;          /* Pure White for bright luxury theme */
    --sidebar-text: #334155;        /* Slate 700 */
}

body {
    font-family: 'Prompt', sans-serif;
    background: linear-gradient(135deg, #f0f6fc 0%, #e6f0fa 50%, #f4f8fd 100%) !important;
    background-attachment: fixed !important;
    min-height: 100vh;
    color: var(--text-main);
    margin: 0;
    position: relative;
}

body::before {
    content: "";
    position: fixed;
    top: -10%;
    right: -10%;
    width: 50vw;
    height: 50vw;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(14, 165, 233, 0.12) 0%, rgba(14, 165, 233, 0) 70%);
    pointer-events: none;
    z-index: -1;
}

body::after {
    content: "";
    position: fixed;
    bottom: -10%;
    left: -10%;
    width: 60vw;
    height: 60vw;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.09) 0%, rgba(99, 102, 241, 0) 70%);
    pointer-events: none;
    z-index: -1;
}

/* Glassmorphism Utilities & Luxury Cards */
.glass {
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
    box-shadow: 0 4px 20px 0 rgba(15, 23, 42, 0.03);
}

.glass-card {
    background: #ffffff;
    border-radius: 1rem;
    border: 1px solid rgba(226, 232, 240, 0.8);
    box-shadow: 0 10px 30px -10px rgba(15, 23, 42, 0.04);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    padding-bottom: 1rem;
}

.glass-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 40px -15px rgba(15, 23, 42, 0.08);
}

/* Gradient Text */
.text-gradient {
    background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Sidebar Customization (Bright Luxury Theme) */
.sidebar-custom {
    background: #ffffff !important;
    color: var(--sidebar-text) !important;
    border-right: 1px solid rgba(226, 232, 240, 0.8) !important;
}

.sidebar-header h1 {
    color: var(--primary-color) !important;
}

.sidebar-header p.text-indigo-200 {
    color: var(--secondary-color) !important;
}

.sidebar-link {
    color: #475569 !important; /* overrides text-indigo-100 */
    font-size: 0.875rem !important; /* Not too big, very clean */
    letter-spacing: 0.02em !important;
    transition: all 0.2s ease-in-out;
}

.sidebar-link i {
    color: #64748b !important;
    transition: color 0.2s ease;
}

.sidebar-link:hover {
    background: #f1f5f9 !important;
    color: var(--primary-color) !important;
    border-right: 4px solid var(--secondary-color) !important;
}

.sidebar-link:hover i {
    color: var(--secondary-color) !important;
}

.sidebar-link.active {
    background: #f1f5f9 !important;
    color: var(--primary-color) !important;
    border-right: 4px solid var(--secondary-color) !important;
    font-weight: 600;
}

.sidebar-link.active i {
    color: var(--secondary-color) !important;
}

.sidebar-header-title {
    color: #64748b !important; /* Slate 500 */
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    font-size: 0.725rem !important;
}

/* Switch Role Custom Buttons */
.sidebar-link[href*="switch_role.php?to=teacher"] {
    color: #b45309 !important; /* Gold/Amber */
    border: 1px solid rgba(180, 83, 9, 0.2) !important;
    background-color: rgba(251, 191, 36, 0.05) !important;
}
.sidebar-link[href*="switch_role.php?to=teacher"]:hover {
    background-color: rgba(251, 191, 36, 0.1) !important;
}
.sidebar-link[href*="switch_role.php?to=admin"] {
    color: #db2777 !important; /* Pink 600 */
    border: 1px solid rgba(219, 39, 119, 0.2) !important;
    background-color: rgba(244, 63, 94, 0.05) !important;
}
.sidebar-link[href*="switch_role.php?to=admin"]:hover {
    background-color: rgba(244, 63, 94, 0.1) !important;
}

/* Profile Card Styling in Sidebar */
.profile-card {
    background-color: #f8fafc !important;
    border: 1px solid rgba(226, 232, 240, 0.8) !important;
}
.profile-card-text p.text-white {
    color: var(--primary-color) !important;
}
.profile-card-text p.text-indigo-200 {
    color: var(--text-muted) !important;
}

/* Button Gradients & Tech Luxury Buttons */
.btn-primary {
    background: linear-gradient(135deg, var(--primary-color), #1e293b) !important;
    color: white !important;
    border: 1px solid rgba(15, 23, 42, 0.1) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.08) !important;
}

.btn-primary:hover {
    filter: brightness(1.15);
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.15) !important;
    transform: translateY(-1px);
}

.btn-secondary {
    background: #ffffff;
    color: var(--primary-color);
    border: 1px solid rgba(226, 232, 240, 0.8);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

.btn-secondary:hover {
    background: #f8fafc;
    border-color: rgba(15, 23, 42, 0.2);
}

/* Login Page Specifics */
.login-body {
    background: radial-gradient(circle at 50% 50%, #ffffff 0%, #f1f5f9 100%) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

.login-box {
    background: #ffffff !important;
    border: 1px solid rgba(226, 232, 240, 0.8) !important;
    padding: 3rem;
    border-radius: 1.5rem;
    box-shadow: 0 20px 40px -15px rgba(15, 23, 42, 0.08) !important;
    width: 100%;
    max-width: 420px;
}

/* Custom Input Fields */
.input-custom {
    border: 1.5px solid rgba(226, 232, 240, 0.8) !important;
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    width: 100%;
    color: var(--primary-color);
    background-color: #ffffff;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.input-custom:focus {
    outline: none;
    border-color: var(--secondary-color) !important;
    box-shadow: 0 0 0 3px rgba(180, 83, 9, 0.15) !important;
}

/* Table Styling */
.table-custom th {
    background-color: #f9fafb;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.75rem;
}

.table-custom tr {
    transition: background-color 0.2s;
}

.table-custom tr:hover td {
    background-color: #fce7f3;
    /* very light pink hover */
}

/* ==========================================
   Responsive & Mobile Enhancements
   ========================================== */

/* Custom backdrop blur fallback classes */
.backdrop-blur-xs {
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

/* Sidebar transition utilities for CSS fallback since they are not compiled in assets/tailwind.css */
.-translate-x-full {
    transform: translateX(-100%) !important;
}
.translate-x-0 {
    transform: translateX(0) !important;
}

#sidebar {
    will-change: transform;
    backface-visibility: hidden;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Force logo container to a fixed default size — fallback in case Tailwind w-16/h-16 is not compiled */
#school-logo-container {
    width: 4rem;           /* 64px = w-16 default */
    height: 4rem;          /* 64px = h-16 default */
    max-width: 6.5rem;     /* max ~104px (150% of base) */
    max-height: 6.5rem;
    flex-shrink: 0;
    transition: width 0.3s ease, height 0.3s ease;
}

#sidebar-backdrop {
    will-change: opacity;
    transition: opacity 0.3s ease-in-out !important;
}

.opacity-0 {
    opacity: 0 !important;
}

.opacity-100 {
    opacity: 1 !important;
}

#close-sidebar {
    position: absolute !important;
    top: 1rem !important;
    right: 1rem !important;
    z-index: 60 !important;
}

/* Pure CSS layout rules for sidebar and backdrop on mobile/tablet */
@media (max-width: 1023px) {
    #sidebar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        height: 100vh !important;
        width: 18rem !important; /* w-72 */
        z-index: 50 !important;
        display: flex !important;
    }

    #sidebar-backdrop {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        background-color: rgba(0, 0, 0, 0.45) !important;
        z-index: 40 !important;
    }
}

/* Custom class to override default table scrolling on mobile view */
@media (max-width: 1024px) {
    .table-fit-mobile {
        min-width: 0 !important;
        width: 100% !important;
    }
}

/* Explicit Mobile View Display overrides */
#mobile-header {
    display: flex !important;
}
#close-sidebar {
    display: block !important;
}

@media (min-width: 1024px) {
    #sidebar {
        position: static !important;
        transform: translateX(0) !important;
        width: 18rem !important;
        display: flex !important;
    }
    #mobile-header {
        display: none !important;
    }
    #close-sidebar {
        display: none !important;
    }
    .lg\:hidden {
        display: none !important;
    }
    .lg\:translate-x-0 {
        transform: translateX(0) !important;
    }
    .lg\:static {
        position: static !important;
    }
    .lg\:h-screen {
        height: 100vh !important;
    }
}

/* Responsive Tables inside Cards on all screen sizes (Desktop, Tablet, Mobile) */
.glass-card {
    min-width: 0;
}

.glass-card.overflow-x-auto,
.overflow-x-auto {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    min-width: 0;
}

.table-custom,
.overflow-x-auto table.table-custom {
    min-width: 900px; /* Data-heavy tables require at least 900px to display all columns elegantly */
}

/* Other general tables inside scrollable wrappers */
.overflow-x-auto table:not(.table-custom) {
    min-width: 650px;
}

/* Ensure table container does not cut off shadows and has spacing for scrolling */
.glass-card {
    padding-bottom: 1rem;
}

/* Global Modal Responsiveness overrides for hardcoded widths */
@media (max-width: 768px) {
    .relative.p-8.border.w-96,
    .relative.p-8.border.w-\[600px\],
    [id*="Modal"] > div,
    [id*="modal"] > div {
        width: 92% !important;
        max-width: 95vw !important;
        margin-left: auto;
        margin-right: auto;
        padding: 1.5rem !important;
    }

    /* Form control adjustments on mobile */
    .input-custom {
        padding: 0.6rem 0.8rem;
    }
}

/* ==========================================
   Desktop Collapsible Sidebar Style Rules
   ========================================== */
#sidebar {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

#desktop-toggle-icon {
    display: inline-block;
    transition: transform 0.3s ease;
}

.sidebar-header {
    position: relative !important;
}

#toggle-sidebar-desktop {
    display: none; /* Hidden on mobile */
}

@media (min-width: 1024px) {
    #sidebar {
        position: relative !important;
        z-index: 100 !important;
    }

    #toggle-sidebar-desktop {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 1.75rem !important; /* w-7 */
        height: 1.75rem !important; /* h-7 */
        border-radius: 9999px !important;
        position: absolute !important;
        right: -0.875rem !important; /* -right-3.5 */
        top: 3rem !important; /* top-12 (48px) */
        z-index: 1000 !important;
        cursor: pointer;
        background-color: #ffffff !important;
        border: 1px solid rgba(226, 232, 240, 0.8) !important;
        color: #64748b !important;
        box-shadow: 0 4px 10px rgba(15, 23, 42, 0.05) !important;
        transition: all 0.3s ease;
    }

    #toggle-sidebar-desktop:hover {
        background-color: #f1f5f9 !important;
        color: #0f172a !important;
        transform: scale(1.1);
    }

    .sidebar-collapsed #sidebar {
        width: 5rem !important; /* w-20 */
    }
    
    .sidebar-collapsed #school-logo-container {
        width: 2.5rem;
        height: 2.5rem;
        min-width: 2.5rem;
        min-height: 2.5rem;
        margin-bottom: 0.5rem;
    }
    
    .sidebar-collapsed #sidebar h1,
    .sidebar-collapsed #sidebar p.uppercase,
    .sidebar-collapsed #sidebar .profile-card-text,
    .sidebar-collapsed #sidebar .sidebar-link span,
    .sidebar-collapsed #sidebar .sidebar-header-title,
    .sidebar-collapsed #sidebar .logout-text {
        display: none !important;
    }
    
    .sidebar-collapsed #sidebar .profile-card {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
        margin-left: 0.75rem !important;
        margin-right: 0.75rem !important;
        justify-content: center !important;
    }
    
    .sidebar-collapsed #sidebar .sidebar-link {
        justify-content: center !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    .sidebar-collapsed #sidebar .sidebar-link i {
        margin-right: 0 !important;
    }
    
    .sidebar-collapsed #desktop-toggle-icon {
        transform: rotate(180deg);
    }
}

/* ==========================================
   Mobile Header and Navigation SVG Overrides
   ========================================== */
#mobile-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 30 !important;
    background-color: #ffffff !important;
    border-bottom: 1px solid rgba(226, 232, 240, 0.8) !important;
}

#toggle-sidebar svg,
#close-sidebar svg {
    width: 1.5rem !important; /* w-6 */
    height: 1.5rem !important; /* h-6 */
    stroke: currentColor !important;
    display: inline-block !important;
}

/* ==========================================
   Thai Word Breaking & Responsive Typography
   ========================================== */

/* Prevent awkward Thai syllable breaking globally */
h1, h2, h3, h4, h5, h6, p, span, a, td, th {
    word-break: keep-all;
    overflow-wrap: break-word;
    word-wrap: break-word;
    line-break: normal;
}

/* Allow text to wrap cleanly inside responsive grids or flexboxes without breaking layouts */
.break-words-thai {
    word-break: keep-all !important;
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
}

/* Custom horizontal scrollbar matching the theme */
.custom-scrollbar::-webkit-scrollbar {
    height: 6px;
    width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(180, 83, 9, 0.2) !important; /* Gold/Amber */
    border-radius: 8px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: rgba(180, 83, 9, 0.4) !important;
}

/* ==========================================
   Uniform Compact Sizing & No-Wrap Rules for Tables
   ========================================== */

/* Force uniform, balanced, and compact text sizes inside all layout tables */
table td,
table td *,
table th,
table th * {
    font-size: 0.75rem !important; /* standard 12px for mobile */
}

@media (min-width: 768px) {
    table td,
    table td *,
    table th,
    table th * {
        font-size: 0.8125rem !important; /* balanced 13px for desktop */
    }
}

/* Force names, text, dates, and numbers in table body cells to stay on a single line */
table td,
table td span,
table td p,
table td a,
table td strong,
table td b {
    white-space: nowrap !important;
}

/* Fix modals displaying behind the sidebar */
div[id$="Modal"], div[id$="modal"] {
    z-index: 1050 !important;
}

/* ==========================================
   Luxury Light Theme Extra Styling Overrides
   ========================================== */

/* Hide the slanted header background completely */
.bg-gradient-to-r.from-indigo-600.to-pink-500,
.absolute.top-0.left-0.w-full.h-64.bg-gradient-to-r {
    display: none !important;
}

/* ==========================================
   Page Header Text Overrides for Light Background Contrast
   ========================================== */
.glass-effect h2.drop-shadow-md {
    color: var(--primary-color) !important;
    text-shadow: none !important;
    filter: none !important;
}

.glass-effect h2.drop-shadow-md ~ p,
.glass-effect h2.drop-shadow-md + p,
.glass-effect p.text-indigo-100 {
    color: var(--text-muted) !important;
}

/* Specific styling overrides for filter blocks inside headers (Solid White Card style) */
.glass-effect div.bg-white\/10.shadow-xl,
.glass-effect form.bg-white\/10.shadow-xl,
.flex-1 div.bg-white\/10.shadow-xl,
.flex-1 form.bg-white\/10.shadow-xl {
    background-color: #ffffff !important;
    backdrop-filter: none !important;
    border: 1px solid rgba(226, 232, 240, 0.8) !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05) !important;
}

.glass-effect div.bg-white\/10.shadow-xl label,
.flex-1 div.bg-white\/10.shadow-xl label,
.glass-effect div.bg-white\/10.shadow-xl .text-white\/80 {
    color: var(--text-muted) !important;
}

.glass-effect div.bg-white\/10.shadow-xl select,
.flex-1 div.bg-white\/10.shadow-xl select,
.glass-effect div.bg-white\/10.shadow-xl input,
.flex-1 div.bg-white\/10.shadow-xl input {
    background-color: #ffffff !important;
    border: 1px solid rgba(226, 232, 240, 0.8) !important;
    color: var(--primary-color) !important;
}

.glass-effect div.bg-white\/10.shadow-xl select option,
.flex-1 div.bg-white\/10.shadow-xl select option {
    background-color: #ffffff !important;
    color: var(--primary-color) !important;
}

/* Style classroom teacher badge to gold/amber contrast theme on light bg */
.glass-effect div.bg-indigo-800\/30 {
    background-color: rgba(180, 83, 9, 0.08) !important;
    color: #b45309 !important;
    border: 1px solid rgba(180, 83, 9, 0.2) !important;
}

.glass-effect div.bg-indigo-800\/30 span,
.glass-effect div.bg-indigo-800\/30 strong,
.glass-effect div.bg-indigo-800\/30 i {
    color: #b45309 !important;
}

/* Styling overrides for horizontal divider lines */
.glass-effect div.h-px.bg-white\/10,
.flex-1 div.h-px.bg-white\/10 {
    background-color: rgba(226, 232, 240, 0.8) !important;
}

/* relative-input-group high-tech interactions */
.relative-input-group i {
    transition: color 0.2s ease-in-out;
}
.relative-input-group:focus-within i {
    color: var(--secondary-color) !important;
}

/* ==========================================
   Input Padding and Icon Overlap Fixes
   ========================================== */

/* Force left padding on any input/textarea inside .relative-input-group */
.relative-input-group input,
.relative-input-group textarea {
    padding-left: 3.25rem !important;
}

/* Centering and positioning left icons inside .relative-input-group */
.relative-input-group > i {
    position: absolute !important;
    left: 1.25rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 10 !important;
    pointer-events: none !important;
}

/* Adjust map icon inside address textarea */
.relative-input-group > i.fa-map-marked-alt {
    top: 1.25rem !important;
    transform: none !important;
}

/* ==========================================
   Luxury Stats Card Icon Container Styles & Colors
   ========================================== */

.stats-icon-container {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 2.75rem !important;
    height: 2.75rem !important;
    border-radius: 0.75rem !important; /* rounded-xl replacement */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Color Variations for Stats Icon Containers (Luxury Glass Theme) */
.stats-icon-indigo {
    background-color: rgba(79, 70, 229, 0.08) !important;
    color: #4f46e5 !important;
    border: 1px solid rgba(79, 70, 229, 0.18) !important;
}
.stats-icon-indigo:hover,
.group:hover .stats-icon-indigo {
    background-color: #4f46e5 !important;
    color: #ffffff !important;
    box-shadow: 0 10px 15px -3px rgba(79, 70, 229, 0.3) !important;
}

.stats-icon-pink {
    background-color: rgba(236, 72, 153, 0.08) !important;
    color: #ec4899 !important;
    border: 1px solid rgba(236, 72, 153, 0.18) !important;
}
.stats-icon-pink:hover,
.group:hover .stats-icon-pink {
    background-color: #ec4899 !important;
    color: #ffffff !important;
    box-shadow: 0 10px 15px -3px rgba(236, 72, 153, 0.3) !important;
}

.stats-icon-amber {
    background-color: rgba(245, 158, 11, 0.08) !important;
    color: #d97706 !important;
    border: 1px solid rgba(245, 158, 11, 0.18) !important;
}
.stats-icon-amber:hover,
.group:hover .stats-icon-amber {
    background-color: #d97706 !important;
    color: #ffffff !important;
    box-shadow: 0 10px 15px -3px rgba(245, 158, 11, 0.3) !important;
}

.stats-icon-purple {
    background-color: rgba(139, 92, 246, 0.08) !important;
    color: #8b5cf6 !important;
    border: 1px solid rgba(139, 92, 246, 0.18) !important;
}
.stats-icon-purple:hover,
.group:hover .stats-icon-purple {
    background-color: #8b5cf6 !important;
    color: #ffffff !important;
    box-shadow: 0 10px 15px -3px rgba(139, 92, 246, 0.3) !important;
}

.stats-icon-emerald {
    background-color: rgba(16, 185, 129, 0.08) !important;
    color: #059669 !important;
    border: 1px solid rgba(16, 185, 129, 0.18) !important;
}
.stats-icon-emerald:hover,
.group:hover .stats-icon-emerald {
    background-color: #059669 !important;
    color: #ffffff !important;
    box-shadow: 0 10px 15px -3px rgba(16, 185, 129, 0.3) !important;
}

.stats-icon-rose {
    background-color: rgba(244, 63, 94, 0.08) !important;
    color: #e11d48 !important;
    border: 1px solid rgba(244, 63, 94, 0.18) !important;
}
.stats-icon-rose:hover,
.group:hover .stats-icon-rose {
    background-color: #e11d48 !important;
    color: #ffffff !important;
    box-shadow: 0 10px 15px -3px rgba(244, 63, 94, 0.3) !important;
}

.stats-icon-orange {
    background-color: rgba(249, 115, 22, 0.08) !important;
    color: #ea580c !important;
    border: 1px solid rgba(249, 115, 22, 0.18) !important;
}
.stats-icon-orange:hover,
.group:hover .stats-icon-orange {
    background-color: #ea580c !important;
    color: #ffffff !important;
    box-shadow: 0 10px 15px -3px rgba(249, 115, 22, 0.3) !important;
}

.stats-icon-cyan {
    background-color: rgba(6, 182, 212, 0.08) !important;
    color: #0891b2 !important;
    border: 1px solid rgba(6, 182, 212, 0.18) !important;
}
.stats-icon-cyan:hover,
.group:hover .stats-icon-cyan {
    background-color: #0891b2 !important;
    color: #ffffff !important;
    box-shadow: 0 10px 15px -3px rgba(6, 182, 212, 0.3) !important;
}

.stats-icon-yellow {
    background-color: rgba(234, 179, 8, 0.08) !important;
    color: #ca8a04 !important;
    border: 1px solid rgba(234, 179, 8, 0.18) !important;
}
.stats-icon-yellow:hover,
.group:hover .stats-icon-yellow {
    background-color: #ca8a04 !important;
    color: #ffffff !important;
    box-shadow: 0 10px 15px -3px rgba(234, 179, 8, 0.3) !important;
}

.stats-icon-blue {
    background-color: rgba(59, 130, 246, 0.08) !important;
    color: #2563eb !important;
    border: 1px solid rgba(59, 130, 246, 0.18) !important;
}
.stats-icon-blue:hover,
.group:hover .stats-icon-blue {
    background-color: #2563eb !important;
    color: #ffffff !important;
    box-shadow: 0 10px 15px -3px rgba(59, 130, 246, 0.3) !important;
}

.stats-icon-sky {
    background-color: rgba(14, 165, 233, 0.08) !important;
    color: #0ea5e9 !important;
    border: 1px solid rgba(14, 165, 233, 0.18) !important;
}
.stats-icon-sky:hover,
.group:hover .stats-icon-sky {
    background-color: #0ea5e9 !important;
    color: #ffffff !important;
    box-shadow: 0 10px 15px -3px rgba(14, 165, 233, 0.3) !important;
}

/* Explicit Card Borders and Text Colors (Fallback for Pruned Tailwind) */
.border-indigo-500 { border-color: #4f46e5 !important; }
.border-pink-500 { border-color: #ec4899 !important; }
.border-amber-500 { border-color: #f59e0b !important; }
.border-violet-500 { border-color: #8b5cf6 !important; }
.border-emerald-500 { border-color: #10b981 !important; }
.border-rose-400 { border-color: #fb7185 !important; }
.border-orange-400 { border-color: #fb923c !important; }
.border-sky-500 { border-color: #0ea5e9 !important; }
.border-cyan-500 { border-color: #06b6d4 !important; }
.border-yellow-500 { border-color: #eab308 !important; }

.text-indigo-500 { color: #4f46e5 !important; }
.text-pink-500 { color: #ec4899 !important; }
.text-amber-500 { color: #d97706 !important; }
.text-violet-500 { color: #8b5cf6 !important; }
.text-emerald-500 { color: #059669 !important; }
.text-rose-500 { color: #e11d48 !important; }
.text-rose-400 { color: #fb7185 !important; }
.text-orange-500 { color: #ea580c !important; }
.text-orange-400 { color: #fb923c !important; }
.text-sky-500 { color: #0ea5e9 !important; }
.text-cyan-500 { color: #0891b2 !important; }
.text-yellow-500 { color: #ca8a04 !important; }

/* Filter Tabs Styling for Cash Approval */
.level-tab {
    padding: 0.6rem 1.25rem !important;
    border: 1.5px solid rgba(226, 232, 240, 0.8) !important;
    background-color: #ffffff !important;
    border-radius: 0.75rem !important;
    font-weight: 700 !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Tab: Indigo / All */
.level-tab.tab-indigo {
    color: #4f46e5 !important;
}
.level-tab.tab-indigo:hover {
    background-color: rgba(79, 70, 229, 0.05) !important;
    border-color: rgba(79, 70, 229, 0.3) !important;
}
.level-tab.tab-indigo.active {
    background: linear-gradient(135deg, #4f46e5, #3730a3) !important;
    color: #ffffff !important;
    border-color: #4f46e5 !important;
    box-shadow: 0 4px 14px rgba(79, 70, 229, 0.3) !important;
}

/* Tab: Pink / Anuban */
.level-tab.tab-pink {
    color: #ec4899 !important;
}
.level-tab.tab-pink:hover {
    background-color: rgba(236, 72, 153, 0.05) !important;
    border-color: rgba(236, 72, 153, 0.3) !important;
}
.level-tab.tab-pink.active {
    background: linear-gradient(135deg, #ec4899, #be185d) !important;
    color: #ffffff !important;
    border-color: #ec4899 !important;
    box-shadow: 0 4px 14px rgba(236, 72, 153, 0.3) !important;
}

/* Tab: Orange / Prathom */
.level-tab.tab-orange {
    color: #ea580c !important;
}
.level-tab.tab-orange:hover {
    background-color: rgba(234, 88, 12, 0.05) !important;
    border-color: rgba(234, 88, 12, 0.3) !important;
}
.level-tab.tab-orange.active {
    background: linear-gradient(135deg, #ea580c, #c2410c) !important;
    color: #ffffff !important;
    border-color: #ea580c !important;
    box-shadow: 0 4px 14px rgba(234, 88, 12, 0.3) !important;
}

/* Tab: Purple / Mattayom */
.level-tab.tab-purple {
    color: #8b5cf6 !important;
}
.level-tab.tab-purple:hover {
    background-color: rgba(139, 92, 246, 0.05) !important;
    border-color: rgba(139, 92, 246, 0.3) !important;
}
.level-tab.tab-purple.active {
    background: linear-gradient(135deg, #8b5cf6, #6d28d9) !important;
    color: #ffffff !important;
    border-color: #8b5cf6 !important;
    box-shadow: 0 4px 14px rgba(139, 92, 246, 0.3) !important;
}