/* Custom font for better aesthetics */
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=Space+Mono&display=swap');

    body {
      font-family: 'Inter', sans-serif;
      background-color: #f0f4f8;
      /* Light blue-gray background */
      font-size: 0.75rem;
      /* Further decreased overall font size (12px) */
    }

    .dark body {
      background-color: #202735;
      /* improved contrast */
      color: #f1f5f9;
      /* slate-100 */
    }

    /* Custom scrollbar for tables for better aesthetics */
    ::-webkit-scrollbar {
      width: 8px;
      height: 8px;
    }

    ::-webkit-scrollbar-track {
      background: #e2e8f0;
      border-radius: 10px;
    }

    .dark ::-webkit-scrollbar-track {
      background: #2d3748;
    }

    ::-webkit-scrollbar-thumb {
      background: #94a3b8;
      border-radius: 10px;
    }

    .dark ::-webkit-scrollbar-thumb {
      background: #4a5568;
    }

    ::-webkit-scrollbar-thumb:hover {
      background: #64748b;
    }

    .dark ::-webkit-scrollbar-thumb:hover {
      background: #718096;
    }

    /* Styles for loading spinner */
    .loader {
      border: 4px solid #f3f3f3;
      /* Light grey */
      border-top: 4px solid #3498db;
      /* Blue */
      border-radius: 50%;
      width: 30px;
      height: 30px;
      animation: spin 2s linear infinite;
    }

    .dark .loader {
      border-top: 4px solid #63b3ed;
      /* Lighter blue for dark mode */
    }

    @keyframes spin {
      0% {
        transform: rotate(0deg);
      }

      100% {
        transform: rotate(360deg);
      }
    }

    /* Custom animations for notifications */
    @keyframes slide-in-right-bounce {
      0% {
        transform: translateX(100%);
        opacity: 0;
      }

      70% {
        transform: translateX(-10%);
        opacity: 1;
      }

      100% {
        transform: translateX(0);
        opacity: 1;
      }
    }

    .animate-slide-in-right-bounce {
      animation: slide-in-right-bounce 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    }

    @keyframes fade-out-slide {
      0% {
        opacity: 1;
        transform: translateX(0);
      }

      100% {
        opacity: 0;
        transform: translateX(100%);
      }
    }

    .animate-fade-out-slide {
      animation: fade-out-slide 0.5s ease-out forwards;
    }

    @keyframes progressBar {
      from {
        width: 100%;
      }

      to {
        width: 0%;
      }
    }

    /* Order Book specific font */
    .font-mono-console {
      font-family: 'Space Mono', monospace;
    }

    .market-feed {
      display: none;
    }

    .ltp-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0.3rem 0.75rem;
      min-width: 72px;
      font-size: 0.7rem;
      font-weight: 600;
      line-height: 1.25;
      border-radius: 9999px;
      background-color: #f3f4f6;
      /* gray-100 */
      color: #111827;
      /* gray-900 */
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
      transition:
        background-color 0.3s ease,
        color 0.3s ease,
        box-shadow 0.3s ease,
        transform 0.2s ease;
    }

    @media (prefers-color-scheme: dark) {
      .ltp-badge {
        background-color: #1f2937;
        /* gray-800 */
        color: #f9fafb;
        /* gray-50 */
        box-shadow: 0 1px 2px rgba(255, 255, 255, 0.1);
      }
    }

    .ltp-badge:hover {
      transform: scale(1.05);
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
    }


    .ltp-badge.bg-green-500 {
      background-color: #22c55e;
      color: white;
    }

    .ltp-badge.bg-red-500 {
      background-color: #ef4444;
      color: white;
    }

    .ltp-badge.bg-gray-200 {
      background-color: #e5e7eb;
      color: #374151;
    }

    .dark .ltp-badge.bg-gray-200 {
      background-color: #4b5563;
      color: #d1d5db;
    }

    /* Dropdown specific styles */
    .dropdown-content {
      opacity: 0;
      visibility: hidden;
      transform: translateY(-5px);
      transition: opacity 0.2s ease-out, transform 0.2s ease-out, visibility 0s linear 0.2s;
      pointer-events: none;
    }

    .dropdown-content.active {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
      pointer-events: auto;
      transition: opacity 0.2s ease-in, transform 0.2s ease-in, visibility 0s linear 0s;
    }

    .dropdown-arrow {
      transition: transform 0.2s ease-in-out;
    }

    .dropdown-button.active .dropdown-arrow {
      transform: rotate(180deg);
    }

    /* Table - order */
    /* Ensure sticky cells cover content underneath */
    .orderbook-card-table th,
    .orderbook-card-table td {
      background-clip: padding-box;
    }

    /* Fix for sticky header background in dark mode */
    .orderbook-card-table th.sticky {
      background-color: #ffffff;
      /* Light mode default */
    }

    .dark .orderbook-card-table th.sticky {
      background-color: #334155;
      /* slate-700 for dark mode, matching thead tr */
    }

    /* Fix for sticky column background in dark mode */
    .orderbook-card-table td.sticky {
      background-color: #ffffff;
      /* Light mode default */
    }

    .dark .orderbook-card-table td.sticky {
      background-color: #1f2937;
      /* gray-800 for dark mode, matching tbody */
    }


    /* Center align all */
    .orderbook-card-table th,
    .orderbook-card-table td {
      text-align: center !important;
      vertical-align: middle !important;
      font-family: 'Space Mono', monospace !important;
      font-size: 0.7rem !important;
    }

    .dark .orderbook-card-table td,
    .dark .orderbook-card-table th {
      color: #f1f5f9;
      /* Tailwind slate-100 */
    }

    /* Blinker for open rows without sell */
    /* Soft pulsing background */
    @keyframes row-blink-bg {
      0% {
        background-color: rgba(255, 250, 200, 0.04);
      }

      50% {
        background-color: rgba(255, 224, 102, 0.08);
      }

      100% {
        background-color: rgba(255, 250, 200, 0.04);
      }
    }

    /* Animated bottom shimmer line */
    @keyframes row-blink-border {
      0% {
        transform: translateX(-100%);
      }

      100% {
        transform: translateX(100%);
      }
    }

    .row-blink {
      position: relative;
      animation: row-blink-bg 2s ease-in-out infinite;
      overflow: hidden;
      /* Ensures ::after stays within row */
    }

    .row-blink::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      height: 2px;
      width: 100%;
      background: linear-gradient(to right,
          rgba(255, 224, 102, 0) 0%,
          rgba(255, 224, 102, 0.4) 50%,
          rgba(255, 224, 102, 0) 100%);
      transform: translateX(-100%);
      animation: row-blink-border 2.5s linear infinite;
    }

    .trade-notification {
      border-left: 6px solid;
      padding: 1rem;
      border-radius: 0.5rem;
      max-width: 320px;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
      animation: slideIn 0.3s ease-out;
      font-family: system-ui, sans-serif;
    }

    .trade-notification.buy {
      background-color: #ecfdf5;
      /* emerald-50 */
      border-color: #10b981;
      color: #065f46;
    }

    @media (prefers-color-scheme: dark) {
      .trade-notification.buy {
        background-color: #064e3b;
        color: #a7f3d0;
      }
    }

    .trade-notification.sell {
      background-color: #fef2f2;
      /* rose-50 */
      border-color: #ef4444;
      color: #7f1d1d;
    }

    @media (prefers-color-scheme: dark) {
      .trade-notification.sell {
        background-color: #7f1d1d;
        color: #fecaca;
      }
    }

    .trade-notification.tsl {
      background-color: #eff6ff;
      /* blue-50 */
      border-color: #3b82f6;
      color: #1e3a8a;
    }

    @media (prefers-color-scheme: dark) {
      .trade-notification.tsl {
        background-color: #1e3a8a;
        color: #bfdbfe;
      }
    }

    .trade-notification .close-btn {
      float: right;
      font-size: 1rem;
      cursor: pointer;
      color: inherit;
    }

    @keyframes slideIn {
      from {
        opacity: 0;
        transform: translateY(20%);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* Pop over */
    /* Timeline styling for events popover */
    .events-timeline {
      list-style: none;
      padding: 0;
      margin: 0;
      position: relative;
    }

    .events-timeline::before {
      content: '';
      position: absolute;
      left: 5px;
      /* Adjust to center the line with the dots */
      top: 0;
      bottom: 0;
      width: 2px;
      background-color: #cbd5e1;
      /* slate-300 */
    }

    .dark .events-timeline::before {
      background-color: #475569;
      /* slate-600 */
    }

    .events-timeline li {
      position: relative;
      padding-left: 25px;
      /* Space for the dot and line */
      margin-bottom: 20px;
      /* Space between events */
      line-height: 1.4;
    }

    .events-timeline li:last-child {
      margin-bottom: 0;
      /* No margin after the last item */
    }

    /* Dot for each event */
    .events-timeline li .rounded-full {
      position: absolute;
      left: -2px;
      /* Adjust to align with the line */
      top: 5px;
      /* Adjust vertical position */
      z-index: 10;
      /* Ensure dot is above the line */
      box-shadow: 0 0 0 4px #ffffff;
      /* White ring */
    }

    .dark .events-timeline li .rounded-full {
      box-shadow: 0 0 0 4px #1f2937;
      /* gray-800 ring for dark mode */
    }
/* Custom styles for the toggle switch */
        .toggle-switch-container {
            width: 44px; /* Pill shape width */
            height: 24px;
        }
        .toggle-switch-ball {
            width: 20px;
            height: 20px;
            top: 2px;
            left: 2px;
            transition: transform 0.2s;
        }
        /* Style for the checked state (Active) */
        .toggle-switch-input:checked ~ .toggle-switch-ball {
            transform: translateX(20px);
        }
        .toggle-switch-input:checked ~ .toggle-switch-container {
            background-color: #10B981; /* green-500 */
        }