@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap');

  :root {
    --font-roboto: "Roboto", sans-serif;
    --divider-color: #e5e5e5 !important;
  }

  * {
    font-family: var(--font-roboto);
  }

  .animated-link:hover {
    transition: transform 0.3s ease;
    transform: scale(1.05);
  }

  input.datatable-input,
  select.datatable-selector {
    background-color: #f9fafb !important;
    border: 1px solid #d1d5db !important;
    border-radius: 0.375rem !important;
    padding: 0.5rem 0.75rem !important;
    font-size: 0.875rem !important;
    color: #1f2937 !important;
  }

  .dark input.datatable-input,
  .dark select.datatable-selector {
    background-color: #1f2937 !important;
    border: 1px solid #374151 !important;
    border-radius: 0.375rem !important;
    padding: 0.5rem 0.75rem !important;
    font-size: 0.875rem !important;
    color: #f9fafb !important;
  }

  .datatable-pagination button:hover {
    background-color: #2563eb !important;
    color: #fff !important;
  }

  .dark .datatable-pagination button:hover {
    background-color: #000b1d !important;
    color: #fff !important;
  }

  .dark {
    --divider-color: #3f3f46 !important;
  }

  .datatable-pagination .datatable-active button {
    background-color: #3b82f6 !important;
    color: #fff !important;
  }

  .datatable-pagination .datatable-active button:hover {
    background-color: #3b82f6 !important;
    color: #fff !important;
  }

  .dark .datatable-pagination .datatable-active button {
    background-color: #000b1d !important;
    color: #fff !important;
  }

  .dark .datatable-pagination .datatable-active button:hover {
    background-color: #000b1d !important;
    color: #fff !important;
  }

  .nav-item:hover {
    color: #0357b1 !important;
    border-left: 3px solid #0357b1 !important;
    background-color: #f0f0f0 !important;
  }

  .dashboard-card {
    background: linear-gradient(115deg, #ffffff, #eeeeee, #ffffff);
    backdrop-filter: blur(12px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
  }

  .dashboard-header {
    background: linear-gradient(115deg, #ffffff, #eeeeee, #ffffff);
    backdrop-filter: blur(12px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  }

  .dark .dashboard-header {
    background: linear-gradient(135deg, #1a1b26 0%, #232533 50%, #2e3242 100%);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  }

  .dark .dashboard-card {
    background: linear-gradient(135deg, #1a1b26 0%, #232533 50%, #2e3242 100%);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  }

  .dashboard-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  }

  .dark .dashboard-card:hover {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
  }

  #hero-section {
    background: linear-gradient(115deg, #ffffff, #eeeeee, #ffffff);
    backdrop-filter: blur(12px);
  }

  .avatar {
    background: radial-gradient(circle at 20% 20%, rgba(99, 102, 241, 0.15) 0%, rgba(255, 255, 255, 0.95) 60%, rgba(79, 70, 229, 0.1) 100%);
    backdrop-filter: blur(12px);
  }

  .dark .avatar {
    background: linear-gradient(135deg, #1a1b26 0%, #232533 50%, #2e3242 100%);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  }

  .welcome-text {
    color: #024286;
  }

  .dark .welcome-text {
    color: #0357b1;
  }

  /* Agent Leaderboard Dark Mode Enhancements */
  .leaderboard-card {
    transition: all 0.3s ease;
  }

  .leaderboard-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  }

  .dark .leaderboard-card:hover {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
  }

  /* Ranking badges with better dark mode contrast */
  .ranking-badge-1 {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    box-shadow: 0 4px 15px rgba(251, 191, 36, 0.3);
  }

  .dark .ranking-badge-1 {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    box-shadow: 0 4px 15px rgba(251, 191, 36, 0.4);
  }

  .ranking-badge-2 {
    background: linear-gradient(135deg, #64748b 0%, #475569 100%);
    box-shadow: 0 4px 15px rgba(100, 116, 139, 0.3);
  }

  .dark .ranking-badge-2 {
    background: linear-gradient(135deg, #64748b 0%, #475569 100%);
    box-shadow: 0 4px 15px rgba(100, 116, 139, 0.4);
  }

  .ranking-badge-3 {
    background: linear-gradient(135deg, #f97316 0%, #dc2626 100%);
    box-shadow: 0 4px 15px rgba(249, 115, 22, 0.3);
  }

  .dark .ranking-badge-3 {
    background: linear-gradient(135deg, #f97316 0%, #dc2626 100%);
    box-shadow: 0 4px 15px rgba(249, 115, 22, 0.4);
  }

  /* Agent avatars with better dark mode visibility */
  .agent-avatar,
  .customer-avatar {
    transition: all 0.3s ease;
  }

  .agent-avatar:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }

  .customer-avatar:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }

  .dark .agent-avatar:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  }

  .dark .customer-avatar:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  }

  .sidebar-arrow {
    transition: transform 0.25s ease;
  }

  .rotate-90 {
    transform: rotate(90deg);
  }

  /* Leaderboard rows with better dark mode styling */
  .leaderboard-row {
    transition: all 0.2s ease;
  }

  .leaderboard-row:hover {
    background-color: rgba(59, 130, 246, 0.05);
  }

  .dark .leaderboard-row:hover {
    background-color: rgba(59, 130, 246, 0.1);
  }

  /* Stats numbers with better dark mode contrast */
  .stats-number {
    font-weight: 700;
    letter-spacing: -0.025em;
  }

  .dark .stats-number {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  }

  /* Live indicator with better dark mode visibility */
  .live-indicator {
    animation: pulse 2s infinite;
  }

  @keyframes pulse {

    0%,
    100% {
      opacity: 1;
    }

    50% {
      opacity: 0.7;
    }
  }

  .dark .live-indicator {
    background-color: rgba(34, 197, 94, 0.2);
    color: #22c55e;
  }

  /* Refresh button with better dark mode styling */
  .refresh-button {
    transition: all 0.2s ease;
  }

  .refresh-button:hover {
    background-color: rgba(156, 163, 175, 0.1);
    transform: rotate(180deg);
  }

  .dark .refresh-button:hover {
    background-color: rgba(156, 163, 175, 0.2);
  }

  /* Leaderboard Borders - Hardcoded CSS */
  .leaderboard-card {
    border: 1px solid #e5e7eb;
    /* border-gray-100 */
  }

  .dark .leaderboard-card {
    border: 1px solid #374151;
    /* dark:border-gray-700 */
  }

  /* 1st Place Border */
  .leaderboard-row:first-of-type {
    border: 1px solid #fde68a;
    background-color: rgba(251, 191, 36, 0.1);
    /* border-yellow-200 */
  }

  .dark .leaderboard-row:first-of-type {
    border: 1px solid rgba(251, 191, 36, 0.3);
    background-color: rgba(251, 191, 36, 0.1);
    /* dark:border-yellow-800/30 */
  }

  /* 2nd Place Border */
  .leaderboard-row:nth-of-type(2) {
    border: 1px solid #cbd5e1;
    background-color: rgba(203, 213, 225, 0.1);
    /* border-slate-200 */
  }

  .dark .leaderboard-row:nth-of-type(2) {
    border: 1px solid #475569;
    background-color: rgba(203, 213, 225, 0.1);
    /* dark:border-slate-700 */
  }

  /* 3rd Place Border */
  .leaderboard-row:nth-of-type(3) {
    border: 1px solid #fed7aa;
    background-color: rgba(253, 215, 170, 0.1);
    /* border-orange-200 */
  }

  .dark .leaderboard-row:nth-of-type(3) {
    border: 1px solid rgba(251, 191, 36, 0.3);
    background-color: rgba(253, 215, 170, 0.1);
    /* dark:border-orange-800/30 */
  }

  /* 4th-5th Place Border */
  .leaderboard-row:nth-of-type(4),
  .leaderboard-row:nth-of-type(5) {
    border: 1px solid #e5e7eb;
    /* border-gray-200 */
  }

  .dark .leaderboard-row:nth-of-type(4),
  .dark .leaderboard-row:nth-of-type(5) {
    border: 1px solid #374151;
    /* dark:border-gray-700 */
  }

  /* Footer Border */
  .leaderboard-card>div:last-child {
    border-top: 1px solid #e5e7eb;
    /* border-gray-200 */
  }

  .dark .leaderboard-card>div:last-child {
    border-top: 1px solid #374151;
    /* dark:border-gray-700 */
  }

  #login-page,
  #page-header {
    background: linear-gradient(115deg, #ffffff, #dddddd) !important;
  }

  .dark #page-header {
    background: linear-gradient(115deg, #0F172A, #1E293B) !important;
  }

  /* #hero-section{
    border-radius: 0 0 50px 50px;
} */
  input[type="file"]::file-selector-button {
    display: none;
  }

  /* Dark mode */
  .dark {
    color-scheme: dark;
  }

  .dark body {
    background-color: #0F172A;
    color: #fff;
  }

  .dark .text-gray-700,
  .dark .text-gray-600,
  .dark .text-gray-500,
  .dark .text-gray-400 {
    color: #cfd3d8;
  }

  .dark .text-gray-800,
  .dark .text-gray-900 {
    color: #fff;
  }

  .dark .text-neutral-200 {
    color: #a8a8a8;
  }

  .dark .text-neutral-500,
  .dark .text-neutral-400 {
    color: #9e9e9e;
  }

  .apexcharts-legend-text {
    color: #808080 !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    font-family: 'Roboto', sans-serif !important;
  }

  .dark .text-gray-950 {
    color: #8a8989;
  }

  .dark .bg-neutral-200 {
    background-color: #232b36;
  }

  .dark .bg-emerald-100 {
    background-color: #002f2f;
  }

  .dark .bg-purple-100 {
    background-color: #2f002f;
  }

  .dark .bg-amber-100 {
    background-color: #2f2f00;
  }

  .dark .border-neutral-200,
  .dark .divide-neutral-200 {
    border-color: #555555;
  }

  .dark .bg-white {
    background-color: #1C2431;
  }

  .dark .bg-gray-50,
  .dark .bg-gray-100,
  .dark .bg-gray-200,
  .dark .bg-gray-300,
  .dark .bg-gray-400 {
    background-color: #1E293B;
  }

  .dark .bg-blue-100 {
    background-color: #1e293b;
  }

  .dark .bg-blue-50 {
    background-color: #1e293b;
  }

  .dark .bg-blue-600,
  .dark .bg-blue-700,
  .dark .bg-blue-800 {
    background-color: #022e5e;
  }

  .dark .bg-blue-200 {
    background-color: #011429;
  }

  .dark .bg-green-100 {
    background-color: #002f2f;
  }

  .dark .bg-yellow-100 {
    background-color: #303101;
  }

  .dark .bg-red-100 {
    background-color: #550209;
  }

  .dark .hover\:bg-gray-100:hover {
    background-color: #0F172A;
  }

  .dark .hover\:bg-gray-200:hover {
    background-color: #0F172A;
  }

  .dark .shadow-sm {
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  }

  .dark .shadow-md {
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.3);
  }

  .dark .shadow-lg {
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.3);
  }

  .dark .shadow-xl {
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.3);
  }

  .dark .shadow-2xl {
    box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.3);
  }

  .dark .bg-green-200 {
    background-color: rgb(0, 104, 0);
  }

  .dark .text-green-800 {
    color: rgb(82, 241, 82);
  }

  .dark .peer-checked\:bg-blue-600 {
    background-color: #0357b1;
  }

  .dark .hover\:bg-gray-300:hover {
    background-color: #0F172A;
  }

  [x-cloak] {
    display: none !important;
  }

  @media (max-width: 768px) {
    #sidebar {
      height: 100vh;
      overflow-y: auto;
    }
  }

  /* Hide scrollbar by default, show on hover */
  #sidebar {
    scrollbar-width: none;
    /* Firefox - hide by default */
    overflow-y: auto;
    scrollbar-color: transparent transparent;
  }

  #sidebar::-webkit-scrollbar {
    width: 0px;
    /* Chrome, Safari, Opera - hide by default */
    background: transparent;
    transition: width 0.2s ease-in-out;
  }

  #sidebar::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 3px;
    transition: background-color 0.2s ease-in-out;
  }

  /* Show thin scrollbar on hover */
  #sidebar:hover {
    scrollbar-width: thin;
    scrollbar-color: #d1d5db transparent;
  }

  #sidebar:hover::-webkit-scrollbar {
    width: 3px;
    background: transparent;
  }

  #sidebar:hover::-webkit-scrollbar-thumb {
    background: #d1d5db;
    /* bg-gray-300 */
  }

  #sidebar:hover::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
    /* bg-gray-400 */
  }

  /* Dark mode */
  .dark #sidebar:hover {
    scrollbar-color: #4b5563 transparent;
  }

  .dark #sidebar:hover::-webkit-scrollbar-thumb {
    background: #4b5563;
    /* bg-gray-600 */
  }

  .dark #sidebar:hover::-webkit-scrollbar-thumb:hover {
    background: #6b7280;
    /* bg-gray-500 */
  }

  .active {
    background-color: #0357b1;
    color: #fff;
  }

  /* Light mode (default toolbar colors) */
  .ql-snow .ql-stroke {
    stroke: #374151;
    /* gray-700 */
  }

  .ql-snow .ql-fill {
    fill: #374151;
    /* gray-700 */
  }

  .ql-snow .ql-picker {
    color: #374151;
    /* dropdown text */
  }

  /* Dark mode override */
  .dark .ql-snow .ql-stroke {
    stroke: #fff;
    /* white icons in dark mode */
  }

  .dark .ql-snow .ql-fill {
    fill: #fff;
  }

  .dark .ql-snow .ql-picker {
    color: #fff;
  }

  .ql-editor.ql-blank::before {
    color: #9ca3af;
    /* gray-400 */
    font-style: normal;
    /* optional, Quill defaults italic */
  }

  /* Dark mode placeholder */
  .dark .ql-editor.ql-blank::before {
    color: #d3d3d3;
    /* gray-100 */
  }

  /* Container */
  .toggle {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
  }

  /* Hide the checkbox */
  .toggle input {
    display: none;
  }

  /* The toggle background */
  .slider {
    position: relative;
    width: 36px;
    height: 20px;
    min-width: 36px;
    max-width: 36px;
    flex-shrink: 0;
    flex-grow: 0;
    background-color: #d1d5db;
    border-radius: 9999px;
    transition: background-color 0.3s;
  }

  .dark .slider {
    background-color: #374151;
  }

  /* The circle */
  .slider::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background-color: white;
    border-radius: 9999px;
    transition: transform 0.3s;
  }

  .toggle input:checked+.slider {
    background-color: #1d4ed8;
    /* blue-700 */
  }

  .toggle input:checked+.slider::after {
    transform: translateX(16px);
    /* moves the circle fully to the right */
  }

  /* Responsive toggle slider for mobile */
  @media (max-width: 768px) {
    .slider {
      width: 48px !important;
      height: 24px !important;
      min-width: 48px !important;
      max-width: 48px !important;
      flex-shrink: 0 !important;
      flex-grow: 0 !important;
    }

    .slider::after {
      width: 20px !important;
      height: 20px !important;
      top: 2px;
      left: 2px;
    }

    .toggle input:checked+.slider::after {
      transform: translateX(24px);
    }

    .toggle {
      display: flex !important;
      align-items: center !important;
      flex-shrink: 0 !important;
      width: 100%;
    }

    .toggle .slider {
      flex-shrink: 0 !important;
      flex-grow: 0 !important;
    }
  }

  /* Mini Sidebar Styles */
  #sidebar.w-16 {
    width: 4rem !important;
  }

  #sidebar.w-16 .sidebar-text {
    display: none !important;
  }

  #sidebar.w-16 .sidebar-arrow {
    display: none !important;
  }

  #sidebar.w-16 .sidebar-logo-full {
    display: none !important;
  }

  #sidebar.w-16 .sidebar-logo-mini {
    display: block !important;
  }

  #sidebar.w-16 [id^="dropdown-"],
  #sidebar.w-16 [id^="self-"],
  #sidebar.w-16 [id^="global-"] {
    display: none !important;
  }

  #sidebar.w-16 .sidebar-badge {
    display: none !important;
  }

  /* Ensure proper spacing for mini sidebar */
  #sidebar.w-16 .flex.justify-between.items-center {
    justify-content: center;
    padding: 0 0.5rem;
  }

  #sidebar.w-16 .flex.justify-between.items-center .sidebar-logo-mini {
    margin: 0;
    max-width: 2rem;
    max-height: 2rem;
  }

  /* Ensure logo doesn't overflow in mini sidebar */
  #sidebar.w-16 .sidebar-logo-mini {
    width: 2rem !important;
    height: 2rem !important;
    object-fit: contain;
  }

  /* Tooltip styles for mini sidebar */
  #sidebar.w-16 .group:hover::after {
    content: attr(title);
    position: absolute;
    left: 4rem;
    top: 50%;
    transform: translateY(-50%);
    background: #1f2937;
    color: white;
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    white-space: nowrap;
    z-index: 50;
    pointer-events: none;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  }

  #sidebar.w-16 .group:hover::before {
    content: '';
    position: absolute;
    left: 3.5rem;
    top: 50%;
    transform: translateY(-50%);
    border: 4px solid transparent;
    border-right-color: #1f2937;
    z-index: 50;
    pointer-events: none;
  }

  /* Dark mode tooltip */
  .dark #sidebar.w-16 .group:hover::after {
    background: #374151;
  }

  .dark #sidebar.w-16 .group:hover::before {
    border-right-color: #374151;
  }

  /* Hover expansion styles - don't affect main content margin */
  #sidebar.w-64:hover {
    z-index: 50;
  }

  /* Ensure smooth transitions for hover expansion */
  #sidebar {
    transition: width 0.3s ease-in-out;
  }

  /* Interactive arrow styles */
  .sidebar-arrow {
    transition: transform 0.3s ease-in-out;
  }

  /* Rotate arrow when dropdown is open */
  #dropdown-example:not(.hidden)~button .sidebar-arrow,
  #self-tickets:not(.hidden)~button .sidebar-arrow,
  #rmas:not(.hidden)~button .sidebar-arrow,
  #my-rma:not(.hidden)~button .sidebar-arrow,
  #roles:not(.hidden)~button .sidebar-arrow,
  #settings:not(.hidden)~button .sidebar-arrow {
    transform: rotate(90deg);
  }

  /* Alternative approach - target the button that controls the dropdown */
  button[data-collapse-toggle="dropdown-example"] .sidebar-arrow,
  button[data-collapse-toggle="self-tickets"] .sidebar-arrow,
  button[data-collapse-toggle="rmas"] .sidebar-arrow,
  button[data-collapse-toggle="my-rma"] .sidebar-arrow,
  button[data-collapse-toggle="roles"] .sidebar-arrow,
  button[data-collapse-toggle="settings"] .sidebar-arrow {
    transition: transform 0.3s ease-in-out;
  }

  /* When dropdown is open, rotate the arrow */
  #dropdown-example.block~button .sidebar-arrow,
  #self-tickets.block~button .sidebar-arrow,
  #rmas.block~button .sidebar-arrow,
  #my-rma.block~button .sidebar-arrow,
  #roles.block~button .sidebar-arrow,
  #settings.block~button .sidebar-arrow {
    transform: rotate(90deg);
  }

  /* Month/Year dropdown styling for dark mode - flatpickr */
  .dark .flatpickr-calendar .flatpickr-monthDropdown-months,
  .flatpickr-calendar.dark .flatpickr-monthDropdown-months,
  .dark .flatpickr-calendar .flatpickr-monthDropdown-years,
  .flatpickr-calendar.dark .flatpickr-monthDropdown-years,
  .dark .flatpickr-calendar select,
  .flatpickr-calendar.dark select {
    background: #1e293b !important;
    border: 1px solid #334155 !important;
    color: #f1f5f9 !important;
  }

  .dark .flatpickr-calendar .flatpickr-monthDropdown-months option,
  .flatpickr-calendar.dark .flatpickr-monthDropdown-months option,
  .dark .flatpickr-calendar .flatpickr-monthDropdown-years option,
  .flatpickr-calendar.dark .flatpickr-monthDropdown-years option,
  .dark .flatpickr-calendar select option,
  .flatpickr-calendar.dark select option {
    background: #1e293b !important;
    color: #f1f5f9 !important;
  }

  .dark .flatpickr-calendar .flatpickr-monthDropdown-months:hover,
  .flatpickr-calendar.dark .flatpickr-monthDropdown-months:hover,
  .dark .flatpickr-calendar .flatpickr-monthDropdown-years:hover,
  .flatpickr-calendar.dark .flatpickr-monthDropdown-years:hover,
  .dark .flatpickr-calendar select:hover,
  .flatpickr-calendar.dark select:hover {
    background: #334155 !important;
  }

  /* Flatpickr Date Picker Styles */
  .flatpickr-calendar {
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  }

  .flatpickr-input {
    cursor: pointer;
  }

  /* Light mode flatpickr */
  .flatpickr-calendar:not(.dark) {
    background: #ffffff;
    border: 1px solid #e5e7eb;
  }

  .flatpickr-calendar:not(.dark) .flatpickr-day {
    color: #374151;
  }

  .flatpickr-calendar:not(.dark) .flatpickr-day:hover {
    background: #f3f4f6;
    border-color: #f3f4f6;
  }

  .flatpickr-calendar:not(.dark) .flatpickr-day.selected,
  .flatpickr-calendar:not(.dark) .flatpickr-day.startRange,
  .flatpickr-calendar:not(.dark) .flatpickr-day.endRange {
    background: #2563eb;
    border-color: #2563eb;
    color: #ffffff;
  }

  .flatpickr-calendar:not(.dark) .flatpickr-day.today {
    border-color: #2563eb;
  }

  .flatpickr-calendar:not(.dark) .flatpickr-day.today:hover {
    background: #dbeafe;
  }

  .flatpickr-calendar:not(.dark) .flatpickr-months .flatpickr-month {
    color: #111827;
  }

  .flatpickr-calendar:not(.dark) .flatpickr-weekdays {
    background: #f9fafb;
  }

  .flatpickr-calendar:not(.dark) .flatpickr-weekday {
    color: #6b7280;
  }

  /* Dark mode flatpickr */
  .dark .flatpickr-calendar,
  .flatpickr-calendar.dark {
    background: #1e293b;
    border: 1px solid #334155;
    color: #f1f5f9;
  }

  .dark .flatpickr-calendar .flatpickr-day,
  .flatpickr-calendar.dark .flatpickr-day {
    color: #e2e8f0;
  }

  .dark .flatpickr-calendar .flatpickr-day:hover,
  .flatpickr-calendar.dark .flatpickr-day:hover {
    background: #334155;
    border-color: #334155;
  }

  .dark .flatpickr-calendar .flatpickr-day.selected,
  .dark .flatpickr-calendar .flatpickr-day.startRange,
  .dark .flatpickr-calendar .flatpickr-day.endRange,
  .flatpickr-calendar.dark .flatpickr-day.selected,
  .flatpickr-calendar.dark .flatpickr-day.startRange,
  .flatpickr-calendar.dark .flatpickr-day.endRange {
    background: #2563eb;
    border-color: #2563eb;
    color: #ffffff;
  }

  /* In-range dates styling for dark mode */
  .dark .flatpickr-calendar .flatpickr-day.inRange,
  .flatpickr-calendar.dark .flatpickr-day.inRange {
    background: rgba(37, 99, 235, 0.2) !important;
    border: none !important;
    border-color: transparent !important;
    color: #e2e8f0 !important;
  }

  .dark .flatpickr-calendar .flatpickr-day.inRange:hover,
  .flatpickr-calendar.dark .flatpickr-day.inRange:hover {
    background: rgba(37, 99, 235, 0.3) !important;
    border: none !important;
    border-color: transparent !important;
    color: #e2e8f0 !important;
  }

  .dark .flatpickr-calendar .flatpickr-day.today,
  .flatpickr-calendar.dark .flatpickr-day.today {
    border-color: #3b82f6;
  }

  .dark .flatpickr-calendar .flatpickr-day.today:hover,
  .flatpickr-calendar.dark .flatpickr-day.today:hover {
    background: #1e40af;
  }

  .dark .flatpickr-calendar .flatpickr-months .flatpickr-month,
  .flatpickr-calendar.dark .flatpickr-months .flatpickr-month {
    color: #f1f5f9;
  }

  .dark .flatpickr-calendar .flatpickr-weekdays,
  .flatpickr-calendar.dark .flatpickr-weekdays {
    background: #0f172a;
  }

  .dark .flatpickr-calendar .flatpickr-weekday,
  .flatpickr-calendar.dark .flatpickr-weekday {
    color: #94a3b8;
  }

  .dark .flatpickr-calendar .flatpickr-prev-month,
  .dark .flatpickr-calendar .flatpickr-next-month,
  .flatpickr-calendar.dark .flatpickr-prev-month,
  .flatpickr-calendar.dark .flatpickr-next-month {
    color: #cbd5e1;
  }

  .dark .flatpickr-calendar .flatpickr-prev-month:hover,
  .dark .flatpickr-calendar .flatpickr-next-month:hover,
  .flatpickr-calendar.dark .flatpickr-prev-month:hover,
  .flatpickr-calendar.dark .flatpickr-next-month:hover {
    color: #ffffff;
  }

  .dark .flatpickr-calendar .flatpickr-time input,
  .flatpickr-calendar.dark .flatpickr-time input {
    color: #f1f5f9;
    background: #1e293b;
  }

  .dark .flatpickr-calendar .flatpickr-time input:hover,
  .flatpickr-calendar.dark .flatpickr-time input:hover {
    background: #334155;
  }

  /* Ensure smooth transitions for hover expansion */
  #sidebar {
    transition: width 0.3s ease-in-out;
  }

  /* Interactive arrow styles */
  .sidebar-arrow {
    transition: transform 0.3s ease-in-out;
  }

  /* Rotate arrow when dropdown is open */
  #dropdown-example:not(.hidden)~button .sidebar-arrow,
  #self-tickets:not(.hidden)~button .sidebar-arrow,
  #global-rma:not(.hidden)~button .sidebar-arrow,
  #my-rma:not(.hidden)~button .sidebar-arrow,
  #roles:not(.hidden)~button .sidebar-arrow,
  #settings:not(.hidden)~button .sidebar-arrow {
    transform: rotate(90deg);
  }

  /* Alternative approach - target the button that controls the dropdown */
  button[data-collapse-toggle="dropdown-example"] .sidebar-arrow,
  button[data-collapse-toggle="self-tickets"] .sidebar-arrow,
  button[data-collapse-toggle="global-rma"] .sidebar-arrow,
  button[data-collapse-toggle="my-rma"] .sidebar-arrow,
  button[data-collapse-toggle="roles"] .sidebar-arrow,
  button[data-collapse-toggle="settings"] .sidebar-arrow {
    transition: transform 0.3s ease-in-out;
  }

  /* When dropdown is open, rotate the arrow */
  #dropdown-example.block~button .sidebar-arrow,
  #self-tickets.block~button .sidebar-arrow,
  #global-rma.block~button .sidebar-arrow,
  #my-rma.block~button .sidebar-arrow,
  #roles.block~button .sidebar-arrow,
  #settings.block~button .sidebar-arrow {
    transform: rotate(90deg);
  }

  /* Month/Year dropdown styling for dark mode - flatpickr */
  .dark .flatpickr-calendar .flatpickr-monthDropdown-months,
  .flatpickr-calendar.dark .flatpickr-monthDropdown-months,
  .dark .flatpickr-calendar .flatpickr-monthDropdown-years,
  .flatpickr-calendar.dark .flatpickr-monthDropdown-years,
  .dark .flatpickr-calendar select,
  .flatpickr-calendar.dark select {
    background: #1e293b !important;
    border: 1px solid #334155 !important;
    color: #f1f5f9 !important;
  }

  .dark .flatpickr-calendar .flatpickr-monthDropdown-months option,
  .flatpickr-calendar.dark .flatpickr-monthDropdown-months option,
  .dark .flatpickr-calendar .flatpickr-monthDropdown-years option,
  .flatpickr-calendar.dark .flatpickr-monthDropdown-years option,
  .dark .flatpickr-calendar select option,
  .flatpickr-calendar.dark select option {
    background: #1e293b !important;
    color: #f1f5f9 !important;
  }

  .dark .flatpickr-calendar .flatpickr-monthDropdown-months:hover,
  .flatpickr-calendar.dark .flatpickr-monthDropdown-months:hover,
  .dark .flatpickr-calendar .flatpickr-monthDropdown-years:hover,
  .flatpickr-calendar.dark .flatpickr-monthDropdown-years:hover,
  .dark .flatpickr-calendar select:hover,
  .flatpickr-calendar.dark select:hover {
    background: #334155 !important;
  }

  /* Flatpickr Date Picker Styles */
  .flatpickr-calendar {
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  }

  .flatpickr-input {
    cursor: pointer;
  }

  /* Light mode flatpickr */
  .flatpickr-calendar:not(.dark) {
    background: #ffffff;
    border: 1px solid #e5e7eb;
  }

  .flatpickr-calendar:not(.dark) .flatpickr-day {
    color: #374151;
  }

  .flatpickr-calendar:not(.dark) .flatpickr-day:hover {
    background: #f3f4f6;
    border-color: #f3f4f6;
  }

  .flatpickr-calendar:not(.dark) .flatpickr-day.selected,
  .flatpickr-calendar:not(.dark) .flatpickr-day.startRange,
  .flatpickr-calendar:not(.dark) .flatpickr-day.endRange {
    background: #2563eb;
    border-color: #2563eb;
    color: #ffffff;
  }

  .flatpickr-calendar:not(.dark) .flatpickr-day.today {
    border-color: #2563eb;
  }

  .flatpickr-calendar:not(.dark) .flatpickr-day.today:hover {
    background: #dbeafe;
  }

  .flatpickr-calendar:not(.dark) .flatpickr-months .flatpickr-month {
    color: #111827;
  }

  .flatpickr-calendar:not(.dark) .flatpickr-weekdays {
    background: #f9fafb;
  }

  .flatpickr-calendar:not(.dark) .flatpickr-weekday {
    color: #6b7280;
  }

  /* Dark mode flatpickr */
  .dark .flatpickr-calendar,
  .flatpickr-calendar.dark {
    background: #1e293b;
    border: 1px solid #334155;
    color: #f1f5f9;
  }

  .dark .flatpickr-calendar .flatpickr-day,
  .flatpickr-calendar.dark .flatpickr-day {
    color: #e2e8f0;
  }

  .dark .flatpickr-calendar .flatpickr-day:hover,
  .flatpickr-calendar.dark .flatpickr-day:hover {
    background: #334155;
    border-color: #334155;
  }

  .dark .flatpickr-calendar .flatpickr-day.selected,
  .dark .flatpickr-calendar .flatpickr-day.startRange,
  .dark .flatpickr-calendar .flatpickr-day.endRange,
  .flatpickr-calendar.dark .flatpickr-day.selected,
  .flatpickr-calendar.dark .flatpickr-day.startRange,
  .flatpickr-calendar.dark .flatpickr-day.endRange {
    background: #2563eb;
    border-color: #2563eb;
    color: #ffffff;
  }

  /* In-range dates styling for dark mode */
  .dark .flatpickr-calendar .flatpickr-day.inRange,
  .flatpickr-calendar.dark .flatpickr-day.inRange {
    background: rgba(37, 99, 235, 0.2) !important;
    border: none !important;
    border-color: transparent !important;
    color: #e2e8f0 !important;
  }

  .dark .flatpickr-calendar .flatpickr-day.inRange:hover,
  .flatpickr-calendar.dark .flatpickr-day.inRange:hover {
    background: rgba(37, 99, 235, 0.3) !important;
    border: none !important;
    border-color: transparent !important;
    color: #e2e8f0 !important;
  }

  .dark .flatpickr-calendar .flatpickr-day.today,
  .flatpickr-calendar.dark .flatpickr-day.today {
    border-color: #3b82f6;
  }

  .dark .flatpickr-calendar .flatpickr-day.today:hover,
  .flatpickr-calendar.dark .flatpickr-day.today:hover {
    background: #1e40af;
  }

  .dark .flatpickr-calendar .flatpickr-months .flatpickr-month,
  .flatpickr-calendar.dark .flatpickr-months .flatpickr-month {
    color: #f1f5f9;
  }

  .dark .flatpickr-calendar .flatpickr-weekdays,
  .flatpickr-calendar.dark .flatpickr-weekdays {
    background: #0f172a;
  }

  .dark .flatpickr-calendar .flatpickr-weekday,
  .flatpickr-calendar.dark .flatpickr-weekday {
    color: #94a3b8;
  }

  .dark .flatpickr-calendar .flatpickr-prev-month,
  .dark .flatpickr-calendar .flatpickr-next-month,
  .flatpickr-calendar.dark .flatpickr-prev-month,
  .flatpickr-calendar.dark .flatpickr-next-month {
    color: #cbd5e1;
  }

  .dark .flatpickr-calendar .flatpickr-prev-month:hover,
  .dark .flatpickr-calendar .flatpickr-next-month:hover,
  .flatpickr-calendar.dark .flatpickr-prev-month:hover,
  .flatpickr-calendar.dark .flatpickr-next-month:hover {
    color: #ffffff;
  }

  .dark .flatpickr-calendar .flatpickr-time input,
  .flatpickr-calendar.dark .flatpickr-time input {
    color: #f1f5f9;
    background: #1e293b;
  }

  .dark .flatpickr-calendar .flatpickr-time input:hover,
  .flatpickr-calendar.dark .flatpickr-time input:hover {
    background: #334155;
  }

  /* Ensure smooth transitions for hover expansion */
  #sidebar {
    transition: width 0.3s ease-in-out;
  }

  /* Interactive arrow styles */
  .sidebar-arrow {
    transition: transform 0.3s ease-in-out;
  }

  /* Rotate arrow when dropdown is open */
  #dropdown-example:not(.hidden)~button .sidebar-arrow,
  #self-tickets:not(.hidden)~button .sidebar-arrow,
  #global-rma:not(.hidden)~button .sidebar-arrow,
  #my-rma:not(.hidden)~button .sidebar-arrow,
  #roles:not(.hidden)~button .sidebar-arrow,
  #settings:not(.hidden)~button .sidebar-arrow {
    transform: rotate(90deg);
  }

  /* Alternative approach - target the button that controls the dropdown */
  button[data-collapse-toggle="dropdown-example"] .sidebar-arrow,
  button[data-collapse-toggle="self-tickets"] .sidebar-arrow,
  button[data-collapse-toggle="global-rma"] .sidebar-arrow,
  button[data-collapse-toggle="my-rma"] .sidebar-arrow,
  button[data-collapse-toggle="roles"] .sidebar-arrow,
  button[data-collapse-toggle="settings"] .sidebar-arrow {
    transition: transform 0.3s ease-in-out;
  }

  /* When dropdown is open, rotate the arrow */
  #dropdown-example.block~button .sidebar-arrow,
  #self-tickets.block~button .sidebar-arrow,
  #global-rma.block~button .sidebar-arrow,
  #my-rma.block~button .sidebar-arrow,
  #roles.block~button .sidebar-arrow,
  #settings.block~button .sidebar-arrow {
    transform: rotate(90deg);
  }

  /* Month/Year dropdown styling for dark mode - flatpickr */
  .dark .flatpickr-calendar .flatpickr-monthDropdown-months,
  .flatpickr-calendar.dark .flatpickr-monthDropdown-months,
  .dark .flatpickr-calendar .flatpickr-monthDropdown-years,
  .flatpickr-calendar.dark .flatpickr-monthDropdown-years,
  .dark .flatpickr-calendar select,
  .flatpickr-calendar.dark select {
    background: #1e293b !important;
    border: 1px solid #334155 !important;
    color: #f1f5f9 !important;
  }

  .dark .flatpickr-calendar .flatpickr-monthDropdown-months option,
  .flatpickr-calendar.dark .flatpickr-monthDropdown-months option,
  .dark .flatpickr-calendar .flatpickr-monthDropdown-years option,
  .flatpickr-calendar.dark .flatpickr-monthDropdown-years option,
  .dark .flatpickr-calendar select option,
  .flatpickr-calendar.dark select option {
    background: #1e293b !important;
    color: #f1f5f9 !important;
  }

  .dark .flatpickr-calendar .flatpickr-monthDropdown-months:hover,
  .flatpickr-calendar.dark .flatpickr-monthDropdown-months:hover,
  .dark .flatpickr-calendar .flatpickr-monthDropdown-years:hover,
  .flatpickr-calendar.dark .flatpickr-monthDropdown-years:hover,
  .dark .flatpickr-calendar select:hover,
  .flatpickr-calendar.dark select:hover {
    background: #334155 !important;
  }

  /* Dark Mode Gradients - Beautiful gradient overrides for dark theme */

  /* Primary button gradients (blue-600 to blue-700) */
  .dark button[class*='bg-gradient-to-r'][class*='from-blue-600'],
  .dark a[class*='bg-gradient-to-r'][class*='from-blue-600'] {
    background: linear-gradient(to right, #4f46e5, #6366f1, #818cf8) !important;
  }

  .dark button[class*='bg-gradient-to-r'][class*='from-blue-600']:hover,
  .dark a[class*='bg-gradient-to-r'][class*='from-blue-600']:hover {
    background: linear-gradient(to right, #6366f1, #818cf8, #a5b4fc) !important;
  }

  /* Multi-color gradients (blue-500 via purple-500 to pink-500) */
  .dark button[class*='bg-gradient-to-r'][class*='from-blue-500'][class*='via-purple-500'],
  .dark a[class*='bg-gradient-to-r'][class*='from-blue-500'][class*='via-purple-500'] {
    background: linear-gradient(to right, #6366f1, #8b5cf6, #ec4899, #f472b6) !important;
  }

  .dark button[class*='bg-gradient-to-r'][class*='from-blue-500'][class*='via-purple-500']:hover,
  .dark a[class*='bg-gradient-to-r'][class*='from-blue-500'][class*='via-purple-500']:hover {
    background: linear-gradient(to left, #6366f1, #8b5cf6, #ec4899, #f472b6) !important;
  }

  /* Red gradients */
  .dark button[class*='bg-gradient-to-r'][class*='from-red-600'],
  .dark a[class*='bg-gradient-to-r'][class*='from-red-600'] {
    background: linear-gradient(to right, #dc2626, #ef4444, #f87171) !important;
  }

  .dark button[class*='bg-gradient-to-r'][class*='from-red-600']:hover,
  .dark a[class*='bg-gradient-to-r'][class*='from-red-600']:hover {
    background: linear-gradient(to right, #ef4444, #f87171, #fca5a5) !important;
  }

  /* Orange gradients */
  .dark button[class*='bg-gradient-to-r'][class*='from-orange-600'],
  .dark a[class*='bg-gradient-to-r'][class*='from-orange-600'] {
    background: linear-gradient(to right, #ea580c, #f97316, #fb923c) !important;
  }

  .dark button[class*='bg-gradient-to-r'][class*='from-orange-600']:hover,
  .dark a[class*='bg-gradient-to-r'][class*='from-orange-600']:hover {
    background: linear-gradient(to right, #f97316, #fb923c, #fdba74) !important;
  }

  /* Green gradients */
  .dark button[class*='bg-gradient-to-r'][class*='from-green-600'],
  .dark a[class*='bg-gradient-to-r'][class*='from-green-600'] {
    background: linear-gradient(to right, #16a34a, #22c55e, #4ade80) !important;
  }

  .dark button[class*='bg-gradient-to-r'][class*='from-green-600']:hover,
  .dark a[class*='bg-gradient-to-r'][class*='from-green-600']:hover {
    background: linear-gradient(to right, #22c55e, #4ade80, #86efac) !important;
  }

  /* Icon background gradients */
  .dark [class*='bg-gradient-to-r'][class*='from-blue-50'] {
    background: linear-gradient(to right, #1e3a8a, #1e40af, #2563eb) !important;
  }

  .dark [class*='bg-gradient-to-r'][class*='from-yellow-50'] {
    background: linear-gradient(to right, #854d0e, #a16207, #ca8a04) !important;
  }

  .dark [class*='bg-gradient-to-r'][class*='from-green-50'] {
    background: linear-gradient(to right, #14532d, #166534, #16a34a) !important;
  }

  /* Avatar gradients */
  .dark [class*='bg-gradient-to-br'][class*='from-blue-500'][class*='to-purple-600'] {
    background: linear-gradient(to bottom right, #6366f1, #8b5cf6, #a855f7) !important;
  }

  .dark [class*='bg-gradient-to-br'][class*='from-red-500'] {
    background: linear-gradient(to bottom right, #ef4444, #dc2626, #b91c1c) !important;
  }

  /* Dark Mode Icon Text Colors - Lighter colors for better visibility */

  /* Blue icon colors */
  .dark .text-blue-600,
  .dark svg.text-blue-600 {
    color: #60a5fa !important;
    /* blue-400 */
  }

  .dark .text-blue-500 {
    color: #93c5fd !important;
    /* blue-300 */
  }

  .dark .text-blue-700 {
    color: #3b82f6 !important;
    /* blue-500 */
  }

  /* Yellow icon colors */
  .dark .text-yellow-600,
  .dark svg.text-yellow-600 {
    color: #fbbf24 !important;
    /* yellow-400 */
  }

  .dark .text-yellow-500 {
    color: #fcd34d !important;
    /* yellow-300 */
  }

  .dark .text-yellow-700 {
    color: #f59e0b !important;
    /* yellow-500 */
  }

  /* Green icon colors */
  .dark .text-green-600,
  .dark svg.text-green-600 {
    color: #4ade80 !important;
    /* green-400 */
  }

  .dark .text-green-500 {
    color: #86efac !important;
    /* green-300 */
  }

  .dark .text-green-700 {
    color: #22c55e !important;
    /* green-500 */
  }

  /* Red icon colors */
  .dark .text-red-600,
  .dark svg.text-red-600 {
    color: #f87171 !important;
    /* red-400 */
  }

  .dark .text-red-500 {
    color: #fca5a5 !important;
    /* red-300 */
  }

  .dark .text-red-700 {
    color: #ef4444 !important;
    /* red-500 */
  }

  /* Orange icon colors */
  .dark .text-orange-600,
  .dark svg.text-orange-600 {
    color: #fb923c !important;
    /* orange-400 */
  }

  .dark .text-orange-500 {
    color: #fdba74 !important;
    /* orange-300 */
  }

  .dark .text-orange-700 {
    color: #f97316 !important;
    /* orange-500 */
  }

  /* Purple icon colors */
  .dark .text-purple-600,
  .dark svg.text-purple-600 {
    color: #a78bfa !important;
    /* purple-400 */
  }

  .dark .text-purple-500 {
    color: #c4b5fd !important;
    /* purple-300 */
  }

  .dark .text-purple-700 {
    color: #8b5cf6 !important;
    /* purple-500 */
  }

  /* Pink icon colors */
  .dark .text-pink-600,
  .dark svg.text-pink-600 {
    color: #f472b6 !important;
    /* pink-400 */
  }

  .dark .text-pink-500 {
    color: #f9a8d4 !important;
    /* pink-300 */
  }

  .dark .text-pink-700 {
    color: #ec4899 !important;
    /* pink-500 */
  }

  /* Indigo icon colors */
  .dark .text-indigo-600,
  .dark svg.text-indigo-600 {
    color: #818cf8 !important;
    /* indigo-400 */
  }

  .dark .text-indigo-500 {
    color: #a5b4fc !important;
    /* indigo-300 */
  }

  .dark .text-indigo-700 {
    color: #6366f1 !important;
    /* indigo-500 */
  }