@font-face {
    font-family: 'Janna LT Regular';
    src: url('JannaLTRegular.ttf') format('truetype');
}

@font-face {
    font-family: 'Janna LT Bold';
    src: url('JannaLTBold.ttf') format('truetype');
}

html, body, table, th, td, h1, h2, h3, h4, h5, h6, p, text, span, a, button, label, input, div, .custom-tooltip {
    font-family: 'Janna LT Regular', sans-serif;
}

.centered-img {
    position: absolute; /* Position the image absolutely */
    top: 50%;           /* Move the image to the vertical center */
    left: 0;            /* Align it to the left */
    transform: translateY(-50%); /* Adjust to be perfectly centered vertically */
    z-index: 0;         /* Set the z-index to be behind form but visible */
    max-width: 500px;   /* Set a maximum width */
    max-height: 500px;  /* Set a maximum height */
    width: auto;        /* Maintain the aspect ratio */
    height: auto;       /* Maintain the aspect ratio */
    opacity: 0.7;       /* Make it slightly transparent so it doesn't interfere with form */
    pointer-events: none; /* Allow clicks to pass through */
}

.logo-img {
    /* position: absolute; /* Position the image absolutely */
    /* top: 15%; */
    /* Move the image to the vertical center */
    /* left: 35%;            /* Align it to the left  */
    /* transform: translateX(-20%); */
    /* transform: translateY(-70%); */
     /* Adjust to be perfectly centered vertically */
    /* z-index: -9; */
    /* Set the z-index to control the stacking order */ 
    max-width: 370px;   /* Set a maximum width */
    max-height: 370px;  /* Set a maximum height */
    width: auto;        /* Maintain the aspect ratio */
    height: auto;       /* Maintain the aspect ratio */
}

.statistics-container {
    position: absolute; /* Position the image absolutely */
    top: 50%;          /* Move the image to the vertical center */
    right: 5%;         /* Align it to the right */
    transform: translateY(-50%); /* Adjust to be perfectly centered vertically */
    z-index: 0;        /* Set the z-index to be behind form but visible */
    max-width: 350px;  /* Set a maximum width */
    max-height: 350px; /* Set a maximum height */
    width: auto;       /* Maintain the aspect ratio */
    height: auto;      /* Maintain the aspect ratio */
    opacity: 0.7;      /* Make it slightly transparent so it doesn't interfere with form */
    pointer-events: none; /* Allow clicks to pass through */
}

.sc-logo-img {
    position: absolute; /* Position the image absolutely
    /* top: 10%;           Move the image to the vertical center */
    /* left: 35%;            /* Align it to the left  */
    transform: translateX(-20%);
    /* transform: translateY(-90%); Adjust to be perfectly centered vertically */
    z-index: -8;        /* Set the z-index to control the stacking order */
    max-width: 150px;   /* Set a maximum width */
    max-height: 150px;  /* Set a maximum height */
    width: auto;        /* Maintain the aspect ratio */
    height: auto;       /* Maintain the aspect ratio */
}

/* Mobile devices */
@media (max-width: 600px) {

    .centered-img {
        display: none;
    }

    .logo-img {
        top: 20%;           /* Move the image to the vertical center */
        left: 25%;            /* Align it to the left */
        transform: translateX(40%);
        /* transform: translateY(-15%); */
        z-index: -9;        /* Set the z-index to control the stacking order */
        max-width: 350px;   /* Set a maximum width */
        max-height: 350px;  /* Set a maximum height */
        width: auto;        /* Maintain the aspect ratio */
        height: auto;       /* Maintain the aspect ratio */
    }
    .statistics-container{
        display: none;
    }
}

/* Tablets */
@media (min-width: 601px) and (max-width: 1023px) {
    .centered-img {
        display: none;
    }

    .logo-img {
        top: 20%;           /* Move the image to the vertical center */
        left: 25%;            /* Align it to the left */
        transform: translateX(25%);
        /*transform: translateY(-15%);*/ /* Adjust to be perfectly centered vertically */
        z-index: -9;        /* Set the z-index to control the stacking order */
        max-width: 350px;   /* Set a maximum width */
        max-height: 350px;  /* Set a maximum height */
        width: auto;        /* Maintain the aspect ratio */
        height: auto;       /* Maintain the aspect ratio */
    }

    .statistics-container{
        display: none;
    }
}

.floating-label-wrapper {
    position: relative;
    margin-top: 1.5rem;
}
.floating-label-wrapper input:focus + label,
.floating-label-wrapper input:not(:placeholder-shown) + label {
    top: -1.20rem;
    left: 0;
    font-size: 0.75rem;
    color: #3b82f6; /* Tailwind's blue-500 */
    background-color: rgba(255, 255, 255, 0.0);
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}
.floating-label-wrapper label {
    position: absolute;
    top: 1rem;
    left: 0.30rem;
    font-size: 1rem;
    color: #6b7280; /* Tailwind's gray-500 */
    transition: all 0.2s ease;
}

.dropdown-menu {
    display: none;
}
.dropdown-menu.show {
    display: block;
}

.app-card {
    transition: transform 0.3s ease;
}

.app-card:hover {
    transform: scale(1.05);
}

.logo-container {
    aspect-ratio: 5 / 1;
}
.logo-img {
    margin-top: 5px;
    max-width: 55%;
    height: auto;
}
body {
    padding: 10px;
    margin: 0;
}

:root {
    --primary-color: #017DFB;
    --primary-light: #027efc;
    --primary-dark: #0d329a;
    --text-color: #ffffff;

    /* Light mode (default) */
    --bg-primary: #ffffff;
    --bg-secondary: #f9fafb;
    --bg-tertiary: #f3f4f6;
    --text-primary: #111827;
    --text-secondary: #374151;
    --text-muted: #6b7280;
    --border-color: #e5e7eb;
    --sidebar-bg: linear-gradient(to bottom, #ffffff, #f9fafb);
    --sidebar-text: #374151;
    --sidebar-hover: #f3f4f6;
    --card-bg: #ffffff;
    --input-bg: #ffffff;
    --input-border: #d1d5db;
    --table-header-bg: #f9fafb;
    --table-row-hover: #f3f4f6;
    --shadow-color: rgba(0, 0, 0, 0.1);
}

/* Dark mode */
[data-theme="dark"] {
    --bg-primary: #111827;
    --bg-secondary: #1f2937;
    --bg-tertiary: #374151;
    --text-primary: #f9fafb;
    --text-secondary: #e5e7eb;
    --text-muted: #9ca3af;
    --border-color: #374151;
    --sidebar-bg: linear-gradient(to bottom, #1f2937, #111827);
    --sidebar-text: #e5e7eb;
    --sidebar-hover: #374151;
    --card-bg: #1f2937;
    --input-bg: #374151;
    --input-border: #4b5563;
    --table-header-bg: #1f2937;
    --table-row-hover: #374151;
    --shadow-color: rgba(0, 0, 0, 0.3);
}

/* Dark mode global styles */
[data-theme="dark"] body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

[data-theme="dark"] .bg-white {
    background-color: var(--card-bg) !important;
}

[data-theme="dark"] .bg-gray-50,
[data-theme="dark"] .bg-gray-100 {
    background-color: var(--bg-secondary) !important;
}

[data-theme="dark"] .text-gray-700,
[data-theme="dark"] .text-gray-800,
[data-theme="dark"] .text-gray-900 {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .text-gray-500,
[data-theme="dark"] .text-gray-600 {
    color: var(--text-muted) !important;
}

[data-theme="dark"] .border-gray-200,
[data-theme="dark"] .border-gray-300 {
    border-color: var(--border-color) !important;
}

[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
    background-color: var(--input-bg) !important;
    border-color: var(--input-border) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] table thead th {
    background-color: var(--table-header-bg) !important;
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .table-record:hover {
    background-color: var(--table-row-hover) !important;
}

[data-theme="dark"] .shadow,
[data-theme="dark"] .shadow-lg,
[data-theme="dark"] .shadow-xl {
    box-shadow: 0 4px 6px -1px var(--shadow-color), 0 2px 4px -1px var(--shadow-color) !important;
}

/* Dark mode sidebar specific */
[data-theme="dark"] #sidebar {
    background: var(--sidebar-bg) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] #sidebar .sidebar-header {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] #sidebar nav a:not([style*="linear-gradient"]) {
    color: var(--sidebar-text) !important;
}

[data-theme="dark"] #sidebar nav a:hover:not([style*="linear-gradient"]) {
    background-color: var(--sidebar-hover) !important;
}

[data-theme="dark"] .from-white {
    --tw-gradient-from: var(--bg-secondary) !important;
}

[data-theme="dark"] .to-gray-50 {
    --tw-gradient-to: var(--bg-primary) !important;
}

/* Dark mode theme toggle button */
[data-theme="dark"] .theme-toggle-btn,
[data-theme="dark"] .sidebar-toggle-btn {
    color: var(--text-muted) !important;
}

[data-theme="dark"] .theme-toggle-btn:hover,
[data-theme="dark"] .sidebar-toggle-btn:hover {
    background-color: var(--sidebar-hover) !important;
    color: var(--text-primary) !important;
}

/* Dark mode mobile top bar */
[data-theme="dark"] .lg\:hidden.fixed.top-0 {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}

/* Dark mode profile dropdown */
[data-theme="dark"] #profileDropdownMenu {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}

/* Dark mode table styles */
[data-theme="dark"] table {
    background-color: var(--card-bg) !important;
}

[data-theme="dark"] table tbody tr {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] table tbody tr:hover {
    background-color: var(--table-row-hover) !important;
}

[data-theme="dark"] table tbody td {
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .table-record {
    background-color: var(--card-bg) !important;
}

[data-theme="dark"] .table-record:hover {
    background-color: var(--table-row-hover) !important;
}

/* Dark mode cards and containers */
[data-theme="dark"] .card,
[data-theme="dark"] [class*="rounded-lg"],
[data-theme="dark"] [class*="rounded-xl"] {
    background-color: var(--card-bg);
    border-color: var(--border-color);
}

/* Dark mode modals */
[data-theme="dark"] .modal-content,
[data-theme="dark"] [class*="modal"] .bg-white,
[data-theme="dark"] [role="dialog"] .bg-white {
    background-color: var(--card-bg) !important;
    color: var(--text-primary) !important;
}

/* Dark mode notifications */
[data-theme="dark"] .notification-item,
[data-theme="dark"] .notification-card {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}

/* Dark mode dropdowns */
[data-theme="dark"] .dropdown-menu,
[data-theme="dark"] [class*="dropdown"] {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}

/* Dark mode list items */
[data-theme="dark"] li,
[data-theme="dark"] .list-item {
    color: var(--text-primary);
}

/* Dark mode hover states - prevent white backgrounds */
[data-theme="dark"] *:hover {
    background-color: inherit;
}

[data-theme="dark"] a:hover,
[data-theme="dark"] button:hover,
[data-theme="dark"] .hover\:bg-gray-50:hover,
[data-theme="dark"] .hover\:bg-gray-100:hover,
[data-theme="dark"] .hover\:bg-white:hover {
    background-color: var(--table-row-hover) !important;
}

/* Dark mode form elements */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] [type="text"],
[data-theme="dark"] [type="email"],
[data-theme="dark"] [type="password"],
[data-theme="dark"] [type="number"],
[data-theme="dark"] [type="date"],
[data-theme="dark"] [type="search"] {
    background-color: var(--input-bg) !important;
    border-color: var(--input-border) !important;
    color: var(--text-primary) !important;
}

/* Dark mode checkboxes and radio buttons */
[data-theme="dark"] input[type="checkbox"],
[data-theme="dark"] input[type="radio"] {
    background-color: var(--input-bg) !important;
    border-color: var(--input-border) !important;
}

/* Dark mode select/choice elements */
[data-theme="dark"] .choices,
[data-theme="dark"] .choices__inner,
[data-theme="dark"] .choices__list,
[data-theme="dark"] .ts-control,
[data-theme="dark"] .ts-dropdown {
    background-color: var(--input-bg) !important;
    border-color: var(--input-border) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .choices__list--dropdown {
    background-color: var(--card-bg) !important;
}

[data-theme="dark"] .choices__item {
    color: var(--text-primary) !important;
}

/* Dark mode upload areas */
[data-theme="dark"] .upload-area,
[data-theme="dark"] [class*="upload"],
[data-theme="dark"] [class*="dropzone"],
[data-theme="dark"] .border-dashed {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}

/* Dark mode file list items */
[data-theme="dark"] .file-item,
[data-theme="dark"] .document-item {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}

/* Dark mode leaderboard */
[data-theme="dark"] .leaderboard-item,
[data-theme="dark"] [class*="leaderboard"] {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}

/* Dark mode status badges - preserve their colors */
[data-theme="dark"] .status-badge,
[data-theme="dark"] [class*="badge"] {
    /* Keep original badge colors */
}

/* Dark mode info boxes */
[data-theme="dark"] .info-box,
[data-theme="dark"] .info-item,
[data-theme="dark"] .bg-yellow-50,
[data-theme="dark"] .bg-blue-50,
[data-theme="dark"] .bg-green-50,
[data-theme="dark"] .bg-red-50 {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
}

/* Dark mode alert/warning boxes */
[data-theme="dark"] .alert,
[data-theme="dark"] [class*="alert"] {
    background-color: var(--bg-tertiary) !important;
    border-color: var(--border-color) !important;
}

/* Dark mode pagination */
[data-theme="dark"] .pagination,
[data-theme="dark"] .page-item,
[data-theme="dark"] .page-link {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

/* Dark mode search inputs */
[data-theme="dark"] input[type="search"],
[data-theme="dark"] .search-input {
    background-color: var(--input-bg) !important;
    color: var(--text-primary) !important;
}

/* Dark mode placeholder text */
[data-theme="dark"] ::placeholder {
    color: var(--text-muted) !important;
    opacity: 1;
}

/* Dark mode dividers */
[data-theme="dark"] hr,
[data-theme="dark"] .divider {
    border-color: var(--border-color) !important;
}

/* Dark mode empty states */
[data-theme="dark"] .empty-state {
    background-color: var(--card-bg) !important;
}

/* Dark mode request cards */
[data-theme="dark"] .request-card {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .request-card:hover {
    background-color: var(--bg-tertiary) !important;
}

/* Dark mode doc cards */
[data-theme="dark"] .doc-card {
    background-color: var(--bg-tertiary) !important;
    border-color: var(--border-color) !important;
}

/* Dark mode filter buttons */
[data-theme="dark"] .filter-btn:not(.active) {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .filter-btn:not(.active):hover {
    background-color: var(--bg-tertiary) !important;
}

/* ===== ADDITIONAL DARK MODE FIXES ===== */

/* Dark mode - fix all hover states that might turn white */
[data-theme="dark"] tr:hover,
[data-theme="dark"] tbody tr:hover,
[data-theme="dark"] .hover\:bg-gray-50:hover,
[data-theme="dark"] .hover\:bg-gray-100:hover,
[data-theme="dark"] .hover\:bg-white:hover,
[data-theme="dark"] .hover\:bg-gray-200:hover {
    background-color: var(--table-row-hover) !important;
}

/* Dark mode - notification modal and items */
[data-theme="dark"] #notificationsModal,
[data-theme="dark"] #notificationsModal .bg-white,
[data-theme="dark"] #notificationsModal > div,
[data-theme="dark"] .notification-list,
[data-theme="dark"] .notification-list > div,
[data-theme="dark"] .notification-list li,
[data-theme="dark"] [id*="notification"] .bg-white {
    background-color: var(--card-bg) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] #notificationsModal [class*="border"] {
    border-color: var(--border-color) !important;
}

/* Dark mode - all div elements with bg-white or bg-gray classes */
[data-theme="dark"] div.bg-white,
[data-theme="dark"] div.bg-gray-50,
[data-theme="dark"] div.bg-gray-100 {
    background-color: var(--card-bg) !important;
}

/* Dark mode - all anchor tags and buttons with bg classes */
[data-theme="dark"] a.bg-white,
[data-theme="dark"] a.bg-gray-50,
[data-theme="dark"] button.bg-white,
[data-theme="dark"] button.bg-gray-50 {
    background-color: var(--card-bg) !important;
}

/* Dark mode - User management and access pages */
[data-theme="dark"] .user-item,
[data-theme="dark"] .access-item,
[data-theme="dark"] .permission-item,
[data-theme="dark"] ul li.bg-white,
[data-theme="dark"] ul li.bg-gray-50,
[data-theme="dark"] ul > li {
    background-color: var(--card-bg) !important;
    color: var(--text-primary) !important;
}

/* Dark mode - checkbox containers and labels */
[data-theme="dark"] label.bg-white,
[data-theme="dark"] label.bg-gray-50,
[data-theme="dark"] .checkbox-container,
[data-theme="dark"] [class*="checkbox"] {
    background-color: transparent !important;
    color: var(--text-primary) !important;
}

/* Dark mode - System logs filters and table */
[data-theme="dark"] .logs-filter,
[data-theme="dark"] .filter-container,
[data-theme="dark"] .log-entry,
[data-theme="dark"] .log-item {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}

/* Dark mode - Storage page elements */
[data-theme="dark"] .storage-item,
[data-theme="dark"] .file-list,
[data-theme="dark"] .file-list-item,
[data-theme="dark"] .folder-item,
[data-theme="dark"] #fileList,
[data-theme="dark"] #fileList > div,
[data-theme="dark"] #fileList li {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

/* Dark mode - upload/drop zone areas */
[data-theme="dark"] .drop-zone,
[data-theme="dark"] .upload-zone,
[data-theme="dark"] #dropZone,
[data-theme="dark"] [id*="drop"],
[data-theme="dark"] [id*="upload"],
[data-theme="dark"] .border-dashed.border-2,
[data-theme="dark"] .border-dashed.bg-white,
[data-theme="dark"] .border-dashed.bg-gray-50 {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}

/* Dark mode - PDF Merger page elements */
[data-theme="dark"] .pdf-item,
[data-theme="dark"] .pdf-list,
[data-theme="dark"] .pdf-list > div,
[data-theme="dark"] .pdf-list li,
[data-theme="dark"] #pdfList,
[data-theme="dark"] #pdfList > div,
[data-theme="dark"] [id*="pdf"] li,
[data-theme="dark"] .document-list,
[data-theme="dark"] .document-list > div {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

/* Dark mode - Leaderboard cards and items */
[data-theme="dark"] .leaderboard-card,
[data-theme="dark"] .leaderboard-row,
[data-theme="dark"] .rank-card,
[data-theme="dark"] .stats-card,
[data-theme="dark"] [class*="leaderboard"] div,
[data-theme="dark"] [class*="leaderboard"] li {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

/* Dark mode - span elements with light backgrounds */
[data-theme="dark"] span.bg-white,
[data-theme="dark"] span.bg-gray-50,
[data-theme="dark"] span.bg-gray-100 {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
}

/* Dark mode - sections and articles */
[data-theme="dark"] section.bg-white,
[data-theme="dark"] article.bg-white,
[data-theme="dark"] main.bg-white {
    background-color: var(--card-bg) !important;
}

/* Dark mode - forms with white backgrounds */
[data-theme="dark"] form.bg-white,
[data-theme="dark"] fieldset.bg-white {
    background-color: var(--card-bg) !important;
}

/* Dark mode - lists with hover states */
[data-theme="dark"] ul li:hover,
[data-theme="dark"] ol li:hover {
    background-color: var(--table-row-hover) !important;
}

/* Dark mode - ensure text remains visible */
[data-theme="dark"] .text-black {
    color: var(--text-primary) !important;
}

/* Dark mode - icons should remain visible */
[data-theme="dark"] svg.text-gray-400,
[data-theme="dark"] svg.text-gray-500 {
    color: var(--text-muted) !important;
}

/* Dark mode - Referral requests table */
[data-theme="dark"] .referral-table,
[data-theme="dark"] .referral-table tr,
[data-theme="dark"] .referral-table td {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

/* Dark mode - ensure all tr elements have correct background */
[data-theme="dark"] tr {
    background-color: var(--card-bg) !important;
}

[data-theme="dark"] tr.bg-white,
[data-theme="dark"] tr.bg-gray-50 {
    background-color: var(--card-bg) !important;
}

/* Dark mode - striped table rows */
[data-theme="dark"] tr:nth-child(even) {
    background-color: var(--bg-secondary) !important;
}

[data-theme="dark"] tr:nth-child(odd) {
    background-color: var(--card-bg) !important;
}

/* ===== DARK MODE GRADIENT AND COLORED BACKGROUNDS ===== */

/* Dark mode - Leaderboard gradient backgrounds */
[data-theme="dark"] .from-yellow-50,
[data-theme="dark"] .from-yellow-100,
[data-theme="dark"] .to-yellow-50,
[data-theme="dark"] .to-yellow-100,
[data-theme="dark"] [class*="from-yellow-50"],
[data-theme="dark"] [class*="from-yellow-100"],
[data-theme="dark"] [class*="to-yellow-50"],
[data-theme="dark"] [class*="to-yellow-100"] {
    --tw-gradient-from: #854d0e !important;
    --tw-gradient-to: #713f12 !important;
    background: linear-gradient(to right, #854d0e, #713f12) !important;
}

[data-theme="dark"] .from-gray-50,
[data-theme="dark"] .from-gray-100,
[data-theme="dark"] .to-gray-50,
[data-theme="dark"] .to-gray-100,
[data-theme="dark"] [class*="bg-gradient-to-r"][class*="from-gray-50"],
[data-theme="dark"] [class*="bg-gradient-to-r"][class*="from-gray-100"] {
    --tw-gradient-from: var(--bg-tertiary) !important;
    --tw-gradient-to: var(--bg-secondary) !important;
    background: linear-gradient(to right, var(--bg-tertiary), var(--bg-secondary)) !important;
}

[data-theme="dark"] .from-orange-50,
[data-theme="dark"] .from-orange-100,
[data-theme="dark"] .to-orange-50,
[data-theme="dark"] .to-orange-100,
[data-theme="dark"] [class*="from-orange-50"],
[data-theme="dark"] [class*="from-orange-100"],
[data-theme="dark"] [class*="to-orange-50"],
[data-theme="dark"] [class*="to-orange-100"] {
    --tw-gradient-from: #9a3412 !important;
    --tw-gradient-to: #7c2d12 !important;
    background: linear-gradient(to right, #9a3412, #7c2d12) !important;
}

/* Dark mode - Stats cards colored backgrounds */
[data-theme="dark"] .bg-blue-50 {
    background-color: #1e3a5f !important;
}

[data-theme="dark"] .bg-green-50 {
    background-color: #14532d !important;
}

[data-theme="dark"] .bg-red-50 {
    background-color: #7f1d1d !important;
}

[data-theme="dark"] .bg-yellow-50 {
    background-color: #713f12 !important;
}

[data-theme="dark"] .bg-purple-50 {
    background-color: #581c87 !important;
}

[data-theme="dark"] .bg-indigo-50 {
    background-color: #312e81 !important;
}

[data-theme="dark"] .bg-pink-50 {
    background-color: #831843 !important;
}

/* Dark mode - Border colors for colored cards */
[data-theme="dark"] .border-blue-200 {
    border-color: #1e40af !important;
}

[data-theme="dark"] .border-green-200 {
    border-color: #166534 !important;
}

[data-theme="dark"] .border-red-200 {
    border-color: #991b1b !important;
}

[data-theme="dark"] .border-yellow-200,
[data-theme="dark"] .border-yellow-300 {
    border-color: #a16207 !important;
}

[data-theme="dark"] .border-orange-300 {
    border-color: #c2410c !important;
}

/* Dark mode - Text colors for stats cards */
[data-theme="dark"] .text-blue-600,
[data-theme="dark"] .text-blue-900 {
    color: #93c5fd !important;
}

[data-theme="dark"] .text-green-600,
[data-theme="dark"] .text-green-900 {
    color: #86efac !important;
}

[data-theme="dark"] .text-red-600,
[data-theme="dark"] .text-red-900 {
    color: #fca5a5 !important;
}

[data-theme="dark"] .text-yellow-600,
[data-theme="dark"] .text-yellow-900 {
    color: #fde047 !important;
}

[data-theme="dark"] .text-orange-600 {
    color: #fdba74 !important;
}

/* Dark mode - Table section header with gradient */
[data-theme="dark"] .bg-gradient-to-r.from-gray-50.to-white,
[data-theme="dark"] [class*="bg-gradient-to-r"][class*="from-gray-50"][class*="to-white"] {
    background: linear-gradient(to right, var(--bg-secondary), var(--card-bg)) !important;
}

/* Dark mode - Cards in statistics/leaderboard with hover states */
[data-theme="dark"] [class*="bg-gradient-to-br"][class*="from-white"] {
    background: linear-gradient(to bottom right, var(--card-bg), var(--bg-secondary)) !important;
}

/* Dark mode - Dashboard stat cards with colored borders */
[data-theme="dark"] .border-yellow-300,
[data-theme="dark"] .border-orange-300 {
    border-color: #92400e !important;
}

/* Dark mode - Unassigned leads card and similar dashboard cards */
[data-theme="dark"] [class*="border-yellow-300"],
[data-theme="dark"] [class*="border-orange-300"] {
    background-color: var(--card-bg) !important;
    border-color: #92400e !important;
}

/* Dark mode - Gradient text should use lighter colors for visibility */
[data-theme="dark"] .bg-clip-text.text-transparent {
    -webkit-background-clip: text !important;
    background-clip: text !important;
}

[data-theme="dark"] [class*="from-yellow-500"][class*="to-yellow-600"].bg-clip-text {
    background: linear-gradient(to right, #fbbf24, #f59e0b) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
}

[data-theme="dark"] [class*="from-orange-500"][class*="to-orange-600"].bg-clip-text {
    background: linear-gradient(to right, #fb923c, #f97316) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
}

/* Dark mode - Progress bar backgrounds in cards */
[data-theme="dark"] .h-2.w-2.rounded-full,
[data-theme="dark"] [class*="h-2"][class*="w-2"][class*="rounded-full"] {
    opacity: 1;
}

/* Theme toggle transition */
body, #sidebar, .bg-white, .bg-gray-50, .bg-gray-100,
input, select, textarea, table thead th {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

table thead th {
    background-color: #f9fafb;
    color: #374151;
    text-transform: uppercase;
    font-size: 0.875rem;
    font-weight: 600;
    text-align: center;
    padding: 12px 16px;
}
    
table thead th:first-child {
    text-align: left;
}

table tbody td {
    padding: 14px 8px;
    text-align: center;
}
table tbody td:first-child {
    text-align: left;
}

.ts-control {
    border-radius: 0.375rem; 
    border-color: #d1d5db; 
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.table-controls {
    background-color: white; 
    padding: 10px; 
    position: sticky;
    top: 0;
    z-index: 10; 
}

.table-record {
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.table-record:hover {
    background-color: #f3f4f6;
    cursor: pointer;
}

[data-theme="dark"] .table-record:hover {
    background-color: var(--table-row-hover) !important;
}

#myTable td, #myTable th {
    padding: 6px 8px;
}

#myTable tr {
    height: 20px;
}

#myTable thead {
    position: sticky;
    top: 0;
    background-color: #f9fafb;
}

.flashing-icon {
    font-size: x-small;
    animation: flashing 1.5s infinite; 
}

.scrollable-tbody {
    max-height: 400px; /* Set your desired height */
    overflow-y: auto; /* Enable vertical scrolling */
}

table {
    width: 100%; /* Ensures both tables take full width */
    border-collapse: collapse; /* Collapse borders */
}

th {
    white-space: normal; /* Allow text to wrap */
    word-wrap: break-word; /* Break long words */
    overflow-wrap: break-word; /* Ensure modern browser compatibility */
    padding: 8px; /* Ensure consistent padding */
    border: 0px solid #ddd; /* Light border for separation */
}

td {
    white-space: normal; /* Allow text to wrap */
    word-wrap: break-word; /* Break long words */
    overflow-wrap: break-word; /* Ensure modern browser compatibility */
    padding: 8px; /* Ensure consistent padding */
    border: 1px solid #ddd; /* Light border for separation */
}

/* Add specific widths if necessary */
th:nth-child(1), td:nth-child(1) {
    width: 30%; /* Adjust width as needed */
}

th:nth-child(2), td:nth-child(2) {
    width: 40%; /* Adjust width as needed */
}

th:nth-child(3), td:nth-child(3) {
    width: 20%; /* Adjust width as needed */
}

th:nth-child(4), td:nth-child(4) {
    width: 15%; /* Adjust width as needed */
}

.paginationNavbtn {
    background-color: var(--primary-dark); 
    color: white;
}
.paginationNavbtn:disabled {
    opacity: 0.5; /* Reduce opacity to 50% */
    cursor: not-allowed; /* Show 'not-allowed' cursor */
}


@keyframes flashing {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.choices__item--selectable.is-highlighted {
    background-color: #007bff; /* Change this to your desired color */
    color: #0c54a1; /* Optional: Change the text color */
}

.scrollable-remarks {
    overflow-y: auto; /* Allow vertical scrolling */
}

/* For mobile devices */
@media (max-width: 640px) {
    .scrollable-remarks {
        max-height: 300px; /* Adjust height for mobile */
    }
}

/* For tablets */
@media (min-width: 641px) and (max-width: 1024px) {
    .scrollable-remarks {
        max-height: 100px; /* Adjust height for tablets */
    }
}

/* For larger screens */
@media (min-width: 1025px) {
    .scrollable-remarks {
        max-height: 200px; /* Adjust height for larger screens */
    }
}

.profile-photo {
    transition: transform 0.2s ease; /* Smooth zoom transition */
}

.profile-photo:hover {
    transform: scale(1.3); /* Slightly zoom in */
}

.custom-tooltip-wrapper {
    position: relative;
    display: inline-block;
}

.custom-tooltip {
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.2s;
    position: absolute;
    bottom: 125%; /* Position above the button */
    left: 50%;
    transform: translateX(-50%);
    z-index: 999;
}

.custom-tooltip .ant-tooltip-content {
    position: relative;
}

.custom-tooltip .ant-tooltip-inner {
    padding: 8px 12px;
    background-color: #3b82f6;
    color: #fff;
    border-radius: 4px;
    font-size: 12px;
    max-width: 200px;
    border-width: 2px;
    font-weight: 600;
    border-color: #3b82f6;
    text-align: center;
}

.custom-tooltip .ant-tooltip-arrow {
    position: absolute;
    bottom: -6px;
    left: 50%;
    margin-left: -5px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 6px 6px 0 6px;
    border-color: #ffffff transparent transparent transparent;
}

.custom-tooltip-wrapper:hover .custom-tooltip {
    visibility: visible;
    opacity: 1;
}