/* Base styles (moved from templates/base.html) */
.glass-card {
      background: rgba(255, 255, 255, 0.95);
      /* High opacity white for light theme */
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border: 1px solid rgba(0, 0, 0, 0.08);
      /* Light gray border */
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    }

    .bg-gradient {
      background: #ffffff;
      /* Clean white background */
    }

    .nav-link,
    .main-nav-btn {
      min-height: 44px;
      border: 1px solid transparent;
    }

    /* Scrollbar styling */
    ::-webkit-scrollbar {
      width: 8px;
      height: 8px;
    }

    ::-webkit-scrollbar-track {
      background: rgba(243, 244, 246, 0.8);
      /* bg-gray-100 with opacity */
      border-radius: 10px;
    }

    ::-webkit-scrollbar-thumb {
      background: rgba(107, 114, 128, 0.6);
      /* gray-500 for light theme */
      border-radius: 10px;
    }

    ::-webkit-scrollbar-thumb:hover {
      background: rgba(75, 85, 99, 0.8);
      /* gray-600 for light theme */
    }

    /* Basic modal styles */
    .modal {
      display: none;
      position: fixed;
      z-index: 50;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      backdrop-filter: blur(4px);
    }

    .modal.show {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* Global modal content styling for light theme consistency */
    .modal .w-full[style*="background-color: rgba(70, 50, 150"],
    .modal .w-full[style*="background-color: rgba(80, 60, 160"] {
      background-color: rgba(255, 255, 255, 0.98) !important;
      color: #374151 !important;
      /* gray-700 */
      border: 1px solid rgba(0, 0, 0, 0.08) !important;
      box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
    }

    /* Global modal text color fixes */
    .modal .text-gray-100,
    .modal h2.text-gray-100,
    .modal h3.text-gray-100 {
      color: #1f2937 !important;
      /* gray-800 */
      font-weight: 600 !important;
    }

    .modal .text-gray-200,
    .modal .text-gray-300 {
      color: #6b7280 !important;
      /* gray-500 */
    }

    .modal .text-gray-300:hover {
      color: #374151 !important;
      /* gray-700 */
    }

    /* Global modal button styling */
    .modal .bg-violet-600,
    .modal button.bg-violet-600 {
      background-color: #3b82f6 !important;
      /* blue-500 - light blue */
      color: #ffffff !important;
    }

    .modal .bg-violet-600:hover,
    .modal button.bg-violet-600:hover {
      background-color: #2563eb !important;
      /* blue-600 - darker light blue */
    }

    /* Global modal blue button styling */
    .modal .bg-blue-500,
    .modal button.bg-blue-500,
    .modal .bg-blue-600,
    .modal button.bg-blue-600,
    .modal .bg-blue-700,
    .modal button.bg-blue-700 {
      background-color: #3b82f6 !important;
      /* blue-500 - light blue */
      color: #ffffff !important;
    }

    .modal .bg-blue-500:hover,
    .modal button.bg-blue-500:hover,
    .modal .bg-blue-600:hover,
    .modal button.bg-blue-600:hover,
    .modal .bg-blue-700:hover,
    .modal button.bg-blue-700:hover {
      background-color: #2563eb !important;
      /* blue-600 - darker light blue */
    }

    /* Global modal red button styling */
    .modal .bg-red-500,
    .modal button.bg-red-500,
    .modal .bg-red-600,
    .modal button.bg-red-600,
    .modal .bg-red-700,
    .modal button.bg-red-700 {
      background-color: #f87171 !important;
      /* red-400 - bright light red */
      color: #ffffff !important;
    }

    .modal .bg-red-500:hover,
    .modal button.bg-red-500:hover,
    .modal .bg-red-600:hover,
    .modal button.bg-red-600:hover,
    .modal .bg-red-700:hover,
    .modal button.bg-red-700:hover {
      background-color: #ef4444 !important;
      /* red-500 - darker bright light red */
    }

    /* Global modal gray button styling */
    .modal .bg-gray-500,
    .modal button.bg-gray-500,
    .modal .bg-gray-600,
    .modal button.bg-gray-600,
    .modal .bg-gray-700,
    .modal button.bg-gray-700 {
      background-color: #e5e7eb !important;
      /* gray-200 - light gray */
      color: #374151 !important;
      /* gray-700 - dark text for contrast */
    }

    .modal .bg-gray-500:hover,
    .modal button.bg-gray-500:hover,
    .modal .bg-gray-600:hover,
    .modal button.bg-gray-600:hover,
    .modal .bg-gray-700:hover,
    .modal button.bg-gray-700:hover {
      background-color: #d1d5db !important;
      /* gray-300 - darker light gray */
      color: #374151 !important;
      /* gray-700 - dark text for contrast */
    }

    /* Comprehensive button contrast fixes */
    /* Ensure all dark background buttons have white text */
    .bg-blue-500,
    .bg-blue-600,
    .bg-blue-700,
    .bg-blue-800,
    .bg-blue-900,
    .bg-red-500,
    .bg-red-600,
    .bg-red-700,
    .bg-red-800,
    .bg-red-900,
    .bg-green-500,
    .bg-green-600,
    .bg-green-700,
    .bg-green-800,
    .bg-green-900,
    .bg-purple-500,
    .bg-purple-600,
    .bg-purple-700,
    .bg-purple-800,
    .bg-purple-900,
    .bg-indigo-500,
    .bg-indigo-600,
    .bg-indigo-700,
    .bg-indigo-800,
    .bg-indigo-900,
    .bg-violet-500,
    .bg-violet-600,
    .bg-violet-700,
    .bg-violet-800,
    .bg-violet-900,
    .bg-sky-500,
    .bg-sky-600,
    .bg-sky-700,
    .bg-sky-800,
    .bg-sky-900,
    .bg-teal-500,
    .bg-teal-600,
    .bg-teal-700,
    .bg-teal-800,
    .bg-teal-900,
    .bg-gray-700,
    .bg-gray-800,
    .bg-gray-900,
    .bg-slate-500,
    .bg-slate-600,
    .bg-slate-700,
    .bg-slate-800,
    .bg-slate-900 {
      color: #ffffff !important;
    }

    /* Ensure all light background buttons have dark text */
    .bg-gray-50,
    .bg-gray-100,
    .bg-gray-200,
    .bg-gray-300,
    .bg-white,
    .bg-transparent {
      color: #374151 !important;
      /* gray-700 */
    }

    /* Fix button children text inheritance */
    .bg-blue-500 *,
    .bg-blue-600 *,
    .bg-blue-700 *,
    .bg-blue-800 *,
    .bg-blue-900 *,
    .bg-red-500 *,
    .bg-red-600 *,
    .bg-red-700 *,
    .bg-red-800 *,
    .bg-red-900 *,
    .bg-green-500 *,
    .bg-green-600 *,
    .bg-green-700 *,
    .bg-green-800 *,
    .bg-green-900 *,
    .bg-purple-500 *,
    .bg-purple-600 *,
    .bg-purple-700 *,
    .bg-purple-800 *,
    .bg-purple-900 *,
    .bg-violet-500 *,
    .bg-violet-600 *,
    .bg-violet-700 *,
    .bg-violet-800 *,
    .bg-violet-900 *,
    .bg-sky-500 *,
    .bg-sky-600 *,
    .bg-sky-700 *,
    .bg-sky-800 *,
    .bg-sky-900 *,
    .bg-teal-500 *,
    .bg-teal-600 *,
    .bg-teal-700 *,
    .bg-teal-800 *,
    .bg-teal-900 *,
    .bg-gray-700 *,
    .bg-gray-800 *,
    .bg-gray-900 *,
    .bg-slate-500 *,
    .bg-slate-600 *,
    .bg-slate-700 *,
    .bg-slate-800 *,
    .bg-slate-900 * {
      color: inherit !important;
    }

    /* Global form element styling for consistency */
    select,
    input[type="text"],
    input[type="number"],
    input[type="search"],
    input[type="email"],
    input[type="password"],
    input[type="datetime-local"],
    textarea,
    .form-input,
    .form-select {
      background-color: rgba(255, 255, 255, 0.95) !important;
      color: #374151 !important;
      /* gray-700 */
      border: 1px solid rgba(0, 0, 0, 0.12) !important;
      border-radius: 0.375rem !important;
      /* rounded-md */
    }

    select:focus,
    input:focus,
    textarea:focus,
    .form-input:focus,
    .form-select:focus {
      border-color: #3b82f6 !important;
      /* blue-500 */
      box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
      outline: none !important;
    }

    /* Fix dropdown option styling */
    select option {
      background-color: rgba(255, 255, 255, 0.98) !important;
      color: #374151 !important;
      /* gray-700 */
      padding: 8px !important;
    }

    /* Fix pagination controls globally */
    .pagination-button,
    .pagination a,
    .pagination button {
      background-color: rgba(255, 255, 255, 0.9) !important;
      color: #374151 !important;
      /* gray-700 */
      border: 1px solid rgba(0, 0, 0, 0.08) !important;
      transition: all 0.15s ease-in-out !important;
    }

    .pagination-button:hover,
    .pagination a:hover,
    .pagination button:hover {
      background-color: rgba(229, 231, 235, 1) !important;
      /* gray-200 */
      border-color: rgba(0, 0, 0, 0.12) !important;
      transform: translateY(-1px) !important;
    }

    .pagination-button.active,
    .pagination a.active,
    .pagination button.active {
      background-color: #3b82f6 !important;
      /* blue-500 - light blue */
      color: #ffffff !important;
      border-color: #2563eb !important;
      /* blue-600 - darker light blue */
      font-weight: 600 !important;
    }

    /* Loading spinner */
    .loading-spin {
      animation: spin 1s linear infinite;
    }

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

      to {
        transform: rotate(360deg);
      }
    }

    /* Notification */
    .notification {
      position: fixed;
      bottom: 1.5rem;
      left: 50%;
      transform: translateX(-50%);
      padding: 0.75rem 1.25rem;
      /* px-5 py-3 */
      border-radius: 0.5rem;
      /* rounded-lg */
      background-color: rgba(34, 197, 94, 0.95);
      /* green-500 for success */
      color: white;
      font-weight: 500;
      /* font-medium */
      z-index: 1000;
      /* Increased z-index */
      opacity: 0;
      transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    }

    .notification.show {
      opacity: 1;
      transform: translate(-50%, 0);
    }

    .notification.error {
      background-color: rgba(239, 68, 68, 0.95);
      /* red-500 for error */
    }

    /* Global overrides for light theme consistency */
    .text-gray-200,
    .text-gray-300,
    .text-gray-400 {
      color: #6b7280 !important;
      /* gray-500 for better contrast */
    }

    /* Navigation and header improvements */
    .bg-primary-600,
    .bg-primary-700 {
      background-color: #3b82f6 !important;
      /* blue-500 - light blue */
    }

    .text-primary-600,
    .text-primary-700 {
      color: #3b82f6 !important;
      /* blue-500 - light blue */
    }

    .border-primary-500,
    .focus\\:border-primary-500 {
      border-color: #3b82f6 !important;
      /* blue-500 */
    }

    .ring-primary-200,
    .focus\\:ring-primary-200 {
      --tw-ring-color: rgba(59, 130, 246, 0.2) !important;
      /* blue-500 with opacity */
    }

    /* Global purple to blue conversion */
    .bg-violet-50,
    .bg-violet-100,
    .bg-violet-200,
    .bg-violet-300,
    .bg-violet-400,
    .bg-violet-500,
    .bg-violet-600,
    .bg-violet-700,
    .bg-violet-800,
    .bg-violet-900 {
      background-color: #3b82f6 !important;
      /* blue-500 - light blue */
    }

    .text-violet-50,
    .text-violet-100,
    .text-violet-200,
    .text-violet-300,
    .text-violet-400,
    .text-violet-500,
    .text-violet-600,
    .text-violet-700,
    .text-violet-800,
    .text-violet-900 {
      color: #3b82f6 !important;
      /* blue-500 - light blue */
    }

    .border-violet-50,
    .border-violet-100,
    .border-violet-200,
    .border-violet-300,
    .border-violet-400,
    .border-violet-500,
    .border-violet-600,
    .border-violet-700,
    .border-violet-800,
    .border-violet-900 {
      border-color: #3b82f6 !important;
      /* blue-500 - light blue */
    }

    /* Global button color overrides */
    /* Blue buttons to light blue */
    .bg-blue-500,
    .bg-blue-600,
    .bg-blue-700,
    .bg-blue-800,
    .bg-blue-900,
    button.bg-blue-500,
    button.bg-blue-600,
    button.bg-blue-700,
    button.bg-blue-800,
    button.bg-blue-900 {
      background-color: #3b82f6 !important;
      /* blue-500 - light blue */
    }

    .bg-blue-500:hover,
    .bg-blue-600:hover,
    .bg-blue-700:hover,
    .bg-blue-800:hover,
    .bg-blue-900:hover,
    button.bg-blue-500:hover,
    button.bg-blue-600:hover,
    button.bg-blue-700:hover,
    button.bg-blue-800:hover,
    button.bg-blue-900:hover,
    .hover\\:bg-blue-600:hover,
    .hover\\:bg-blue-700:hover,
    .hover\\:bg-blue-800:hover {
      background-color: #2563eb !important;
      /* blue-600 - darker light blue */
    }

    /* Red buttons to bright light red */
    .bg-red-500,
    .bg-red-600,
    .bg-red-700,
    .bg-red-800,
    .bg-red-900,
    button.bg-red-500,
    button.bg-red-600,
    button.bg-red-700,
    button.bg-red-800,
    button.bg-red-900 {
      background-color: #f87171 !important;
      /* red-400 - bright light red */
    }

    .bg-red-500:hover,
    .bg-red-600:hover,
    .bg-red-700:hover,
    .bg-red-800:hover,
    .bg-red-900:hover,
    button.bg-red-500:hover,
    button.bg-red-600:hover,
    button.bg-red-700:hover,
    button.bg-red-800:hover,
    button.bg-red-900:hover,
    .hover\\:bg-red-600:hover,
    .hover\\:bg-red-700:hover,
    .hover\\:bg-red-800:hover {
      background-color: #ef4444 !important;
      /* red-500 - darker bright light red */
    }

    /* Gray buttons to light gray */
    .bg-gray-500,
    .bg-gray-600,
    .bg-gray-700,
    .bg-gray-800,
    .bg-gray-900,
    button.bg-gray-500,
    button.bg-gray-600,
    button.bg-gray-700,
    button.bg-gray-800,
    button.bg-gray-900 {
      background-color: #e5e7eb !important;
      /* gray-200 - light gray */
      color: #374151 !important;
      /* gray-700 - dark text for contrast */
    }

    .bg-gray-500:hover,
    .bg-gray-600:hover,
    .bg-gray-700:hover,
    .bg-gray-800:hover,
    .bg-gray-900:hover,
    button.bg-gray-500:hover,
    button.bg-gray-600:hover,
    button.bg-gray-700:hover,
    button.bg-gray-800:hover,
    button.bg-gray-900:hover,
    .hover\\:bg-gray-600:hover,
    .hover\\:bg-gray-700:hover,
    .hover\\:bg-gray-800:hover {
      background-color: #d1d5db !important;
      /* gray-300 - darker light gray */
      color: #374151 !important;
      /* gray-700 - dark text for contrast */
    }

    /* Fix dark button text - ensure white text on dark backgrounds */
    .bg-blue-500,
    .bg-blue-600,
    .bg-blue-700,
    .bg-blue-800,
    .bg-blue-900,
    .bg-red-500,
    .bg-red-600,
    .bg-red-700,
    .bg-red-800,
    .bg-red-900,
    .bg-green-500,
    .bg-green-600,
    .bg-green-700,
    .bg-green-800,
    .bg-green-900,
    .bg-purple-500,
    .bg-purple-600,
    .bg-purple-700,
    .bg-purple-800,
    .bg-purple-900,
    .bg-indigo-500,
    .bg-indigo-600,
    .bg-indigo-700,
    .bg-indigo-800,
    .bg-indigo-900,
    .bg-gray-700,
    .bg-gray-800,
    .bg-gray-900,
    .bg-sky-500,
    .bg-sky-600,
    .bg-sky-700,
    .bg-sky-800,
    .bg-sky-900 {
      color: #ffffff !important;
    }

    /* Ensure buttons with dark backgrounds have white text */
    button.bg-blue-500,
    button.bg-blue-600,
    button.bg-blue-700,
    button.bg-red-500,
    button.bg-red-600,
    button.bg-red-700,
    button.bg-green-500,
    button.bg-green-600,
    button.bg-green-700,
    button.bg-sky-500,
    button.bg-sky-600,
    button.bg-sky-700,
    .btn-primary,
    .btn-danger,
    .btn-success,
    .btn-info {
      color: #ffffff !important;
    }

    /* Override any nested text color rules for dark buttons */
    .bg-blue-500 *,
    .bg-blue-600 *,
    .bg-blue-700 *,
    .bg-red-500 *,
    .bg-red-600 *,
    .bg-red-700 *,
    .bg-green-500 *,
    .bg-green-600 *,
    .bg-green-700 *,
    .bg-sky-500 *,
    .bg-sky-600 *,
    .bg-sky-700 * {
      color: inherit !important;
    }


/* templates/auth.html */
/* auth.html specific styles */
    .auth-card { /* Auth page container */
        background: rgba(255, 255, 255, 0.95); /* High opacity white for light theme */
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border: 1px solid rgba(0, 0, 0, 0.08);
        box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    }
    .auth-page {
         background: #f8fafc; /* Light gray background for auth page */
    }
    /* .input-icon class removed, using direct Tailwind classes now */
    /* Keep button ripple effect if needed, or remove if base provides similar */
    .auth-button { /* Renamed to avoid conflict */
        position: relative;
        overflow: hidden;
    }
    .auth-button:after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 50%;
        transform: translate(-50%, -50%);
        transition: width 0.6s, height 0.6s;
    }
    .auth-button:active:after {
        width: 300px;
        height: 300px;
        opacity: 0;
    }


/* templates/tokens.html */
.nav-buttons-container {
    display: flex;
    justify-content: center;
  }
  .nav-link {
    background-color: rgba(229, 231, 235, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.08);
  }
  .main-nav-btn {
    border: 1px solid rgba(0, 0, 0, 0.08);
  }
  .token-card {
    background-color: rgba(255, 255, 255, 0.95);
    border-radius: 0.75rem;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
      0 2px 4px -1px rgba(0, 0, 0, 0.06);
  }
  .token-table th {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6b7280;
  }
  .token-table td {
    color: #374151;
  }
  .badge-active {
    background: #ecfdf5;
    color: #059669;
    border: 1px solid #a7f3d0;
  }
  .badge-revoked {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
  }


/* templates/google_accounts.html */
/* google_accounts.html specific styles */
.glass-card {
background-color: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(0, 0, 0, 0.08);
}

.stats-card {
background: white;
border-radius: 1rem;
border: 1px solid rgba(0, 0, 0, 0.05);
padding: 1.5rem;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
transition: transform 0.2s;
}

.stats-card:hover {
transform: translateY(-2px);
}

.account-item {
transition: all 0.2s ease-in-out;
}

.account-item:hover {
background-color: rgba(59, 130, 246, 0.05);
transform: scale(1.01);
}

.nav-buttons-container {
padding-top: 0.5rem;
padding-bottom: 0.75rem;
}

.nav-link {
background-color: rgba(229, 231, 235, 0.8);
color: #374151;
transition: all 0.2s ease-in-out;
}

.nav-link:hover {
background-color: rgba(59, 130, 246, 0.1) !important;
transform: scale(1.02);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.main-nav-btn {
background-color: #3b82f6 !important;
color: #ffffff !important;
}

.main-nav-btn:hover {
transform: scale(1.02) !important;
box-shadow: 0 8px 16px rgba(59, 130, 246, 0.3) !important;
}

.btn-primary {
background-color: #3b82f6 !important;
color: white !important;
}

.btn-danger {
background-color: #f87171 !important;
color: white !important;
}

.btn-secondary {
background-color: #6b7280 !important;
color: white !important;
}


/* templates/config_editor.html */
/* config_editor.html specific styles */
/* Animations (already in base.html, but keep fade-in class usage) */
.fade-in {
animation: fadeIn 0.3s ease forwards;
}

/* Modal specific styles (already in base.html) */
.array-container {
max-height: 300px;
overflow-y: auto;
padding: 1rem;
/* p-4 consistency */
margin-bottom: 0.5rem;
/* mb-2 consistency */
background-color: rgba(255, 255, 255, 0.95) !important;
/* light theme */
border: 1px solid rgba(0, 0, 0, 0.12) !important;
/* light gray border */
color: #374151 !important;
/* gray-700 for light theme */
border-radius: 0.5rem;
/* rounded-lg consistency */
}

#API_KEYS_container {
/* Keep specific ID styling if needed */
max-height: 300px;
overflow-y: auto;
}

.config-section {
display: none;
/* theming: new background and border for sections */
background-color: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: 0.75rem;
/* rounded-xl */
padding: 1.5rem;
/* p-6 */
margin-bottom: 1.5rem;
/* mb-6 */
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
0 2px 4px -1px rgba(0, 0, 0, 0.06);
/* shadow-lg */
}

.config-section.active {
display: block;
animation: fadeIn 0.3s ease forwards;
/* Use base animation */
}

.provider-config {
display: none;
}

.provider-config.active {
display: block;
}

/* Tailwind Toggle Switch Helper CSS */
.toggle-checkbox:checked {
right: 0;
border-color: #2563eb;
/* theming: blue-600 */
}

.toggle-checkbox:checked+.toggle-label {
background-color: #2563eb;
/* theming: blue-600 */
}

.toggle-label {
/* theming: style for unchecked state */
background-color: rgba(156, 163, 175, 0.3);
/* gray-400 */
}

/* Унифицировать стиль уведомлений, обеспечивая соответствие с keys_status */
.notification {
background: rgba(0, 0, 0, 0.8) !important;
color: #fff !important;
}

/* Theming for input fields - Исправление проблемы двойных границ */
.form-input-themed {
background-color: rgba(255, 255, 255, 0.95) !important;
border: 1px solid rgba(0, 0, 0, 0.12) !important;
/* Обеспечить границы для отдельных полей ввода */
color: #374151 !important;
/* gray-700 */
outline: none !important;
/* 移除默认outline */
box-shadow: none !important;
/* 移除默认box-shadow */
transition: border-color 0.15s ease-in-out !important;
}

.form-input-themed::placeholder {
color: #9ca3af !important;
/* gray-400 */
}

.form-input-themed:focus {
border-color: #3b82f6 !important;
/* focus时改变边框颜色 */
box-shadow: none !important;
/* 移除focus阴影，只保留边框变化 */
outline: none !important;
/* 确保没有outline */
}

/* 对于在数组容器内的输入框，移除边框 */
.array-container .form-input-themed {
border: none !important;
/* 在数组容器内的输入框移除边框 */
}

.array-container .form-input-themed:focus {
border: none !important;
/* 确保focus时也没有边框 */
}

/* 为独立的模型选择输入框保留边框 */
.flex.items-center .form-input-themed {
border: 1px solid rgba(0, 0, 0, 0.12) !important;
/* 保留边框 */
}

.flex.items-center .form-input-themed:focus {
border-color: #3b82f6 !important;
/* focus时改变边框颜色 */
}

/* Theming for select fields - 改进下拉框样式 */
.form-select-themed {
background-color: rgba(255, 255, 255, 0.95) !important;
/* 白色背景 */
border: 1px solid rgba(0, 0, 0, 0.12) !important;
/* 灰色边框 */
color: #374151 !important;
/* gray-700 文字颜色 */
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") !important;
/* 灰色箭头 */
appearance: none !important;
padding: 0.6rem 2.5rem 0.6rem 0.8rem !important;
/* 调整内边距 */
background-repeat: no-repeat !important;
background-position: right 0.6rem center !important;
background-size: 1.5em 1.5em !important;
border-radius: 0.5rem !important;
/* 圆角 */
font-weight: 500 !important;
/* 半粗体 */
height: auto !important;
/* 自动高度 */
box-shadow: none !important;
/* 移除阴影 */
cursor: pointer !important;
}

.form-select-themed:focus {
border-color: #3b82f6 !important;
/* blue-500 */
box-shadow: none !important;
/* 移除focus阴影 */
outline: none !important;
}

.form-select-themed option {
background-color: rgba(255,
255,
255,
0.98) !important;
/* white background */
color: #374151 !important;
/* gray-700 */
padding: 8px !important;
}

/* 日志级别样式 - 浅色主题统一设计 */
#LOG_LEVEL {
font-weight: 600 !important;
}

/* 统一的日志级别选项样式 - 使用浅色主题 */
#LOG_LEVEL option[value="DEBUG"] {
background-color: rgba(255, 255, 255, 0.98) !important;
/* 白色背景 */
color: #374151 !important;
/* gray-700 深灰色文字 */
}

#LOG_LEVEL option[value="INFO"] {
background-color: rgba(249,
250,
251,
0.98) !important;
/* gray-50 浅灰背景 */
color: #374151 !important;
/* gray-700 深灰色文字 */
}

#LOG_LEVEL option[value="WARNING"] {
background-color: rgba(243,
244,
246,
0.98) !important;
/* gray-100 稍深灰背景 */
color: #374151 !important;
/* gray-700 深灰色文字 */
}

#LOG_LEVEL option[value="ERROR"] {
background-color: rgba(229,
231,
235,
0.98) !important;
/* gray-200 中灰背景 */
color: #374151 !important;
/* gray-700 深灰色文字 */
}

#LOG_LEVEL option[value="CRITICAL"] {
background-color: rgba(209,
213,
219,
0.98) !important;
/* gray-300 深灰背景 */
color: #374151 !important;
/* gray-700 深灰色文字 */
}

/* 思考模型预算映射样式 */
.map-item {
background-color: rgba(60, 40, 130, 0.2) !important;
border-radius: 0.5rem !important;
padding: 0.5rem !important;
border: 1px solid rgba(167, 139, 250, 0.3) !important;
transition: all 0.2s ease-in-out !important;
}

.map-item:hover {
background-color: rgba(60, 40, 130, 0.3) !important;
border-color: rgba(167, 139, 250, 0.5) !important;
}

.map-key-input {
background-color: rgba(255, 255, 255, 0.95) !important;
border: 1px solid rgba(0, 0, 0, 0.12) !important;
color: #374151 !important;
/* gray-700 */
font-weight: 500 !important;
border-radius: 0.375rem !important;
}

.map-value-input {
background-color: rgba(255, 255, 255, 0.95) !important;
border: 1px solid rgba(0, 0, 0, 0.12) !important;
color: #374151 !important;
/* gray-700 */
font-weight: 600 !important;
border-radius: 0.375rem !important;
box-shadow: none !important;
transition: all 0.2s !important;
}

.map-value-input:focus {
background-color: rgba(255, 255, 255, 1) !important;
border-color: #3b82f6 !important;
/* blue-500 */
box-shadow: none !important;
/* 移除focus阴影 */
outline: none !important;
}

/* 警告文字样式 */
.warning-text {
color: #f87171 !important;
/* red-400 */
font-weight: 600 !important;
background-color: rgba(248, 113, 113, 0.15) !important;
padding: 0.5rem 0.75rem !important;
border-radius: 0.375rem !important;
border-left: 3px solid #ef4444 !important;
/* red-500 */
display: flex !important;
align-items: center !important;
margin-top: 0.5rem !important;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

.warning-text i {
margin-right: 0.5rem !important;
color: #ef4444 !important;
/* red-500 */
}

/* 令牌生成按钮样式 */
.generate-btn {
background-color: rgba(59, 130, 246, 0.1) !important;
/* blue-500 light */
color: #3b82f6 !important;
/* blue-500 */
border: 1px solid rgba(59, 130, 246, 0.3) !important;
border-left: none !important;
transition: all 0.2s ease !important;
}

.generate-btn:hover {
background-color: rgba(59,
130,
246,
0.2) !important;
/* blue-500 more opaque */
color: #1d4ed8 !important;
/* blue-700 */
box-shadow: 0 0 8px rgba(59, 130, 246, 0.3) !important;
}

.generate-btn:focus {
outline: none !important;
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5) !important;
}

/* 导航链接悬停样式 - 优化以避免遮挡内容 */
.nav-link {
transition: all 0.2s ease-in-out;
position: relative;
z-index: 1;
/* 确保不会遮挡重要内容 */
}

.nav-link:hover {
background-color: rgba(59, 130, 246, 0.1) !important;
/* blue-500 light */
transform: scale(1.02);
/* 使用缩放代替向上移动 */
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
/* 增强阴影效果 */
}

/* 导航按钮容器样式 - 为悬停效果预留空间 */
.nav-buttons-container {
padding-top: 0.5rem;
/* 为悬停效果预留上方空间 */
padding-bottom: 0.75rem;
/* 为悬停效果预留下方空间 */
}

/* 主导航按钮的优化悬停效果 */
.main-nav-btn:hover {
transform: scale(1.02) !important;
/* 使用缩放代替向上移动 */
box-shadow: 0 8px 16px rgba(59, 130, 246, 0.3) !important;
/* 蓝色阴影 */
}

/* 操作按钮的优化悬停效果 */
.action-btn {
position: relative;
z-index: 1;
}

.action-btn:hover {
transform: scale(1.02) !important;
/* 使用缩放代替向上移动 */
}

.action-btn:hover#saveBtn {
box-shadow: 0 8px 20px rgba(59, 130, 246, 0.4) !important;
/* 蓝色阴影 */
}

.action-btn:hover#resetBtn {
box-shadow: 0 8px 20px rgba(107, 114, 128, 0.4) !important;
/* 灰色阴影 */
}

/* 刷新按钮样式 - 与监控面板页面保持一致 */
.bg-white.bg-opacity-20 {
background-color: rgba(255, 255, 255, 0.9) !important;
color: #3b82f6 !important;
/* blue-500 - 与监控面板一致 */
}

.bg-white.bg-opacity-20:hover {
background-color: rgba(255, 255, 255, 1) !important;
color: #2563eb !important;
/* blue-600 - 悬停时稍深 */
}

/* General label and small text theming for light theme */
label {
color: #374151 !important;
/* Dark gray for labels in light theme */
font-weight: 600;
/* semibold */
}

small {
color: #6b7280 !important;
/* Medium gray for small text */
}

/* Override all violet/purple buttons to light blue */
.bg-violet-600,
button.bg-violet-600 {
background-color: #3b82f6 !important;
/* blue-500 - light blue */
}

.bg-violet-600:hover,
button.bg-violet-600:hover,
.hover\\:bg-violet-700:hover {
background-color: #2563eb !important;
/* blue-600 - darker light blue */
}

/* Override blue buttons to light blue */
.bg-blue-600,
button.bg-blue-600 {
background-color: #3b82f6 !important;
/* blue-500 - light blue */
}

.bg-blue-600:hover,
button.bg-blue-600:hover,
.hover\\:bg-blue-700:hover {
background-color: #2563eb !important;
/* blue-600 - darker light blue */
}

/* Override red buttons to bright light red */
.bg-red-600,
button.bg-red-600,
.bg-red-700,
button.bg-red-700,
.bg-red-800,
button.bg-red-800 {
background-color: #f87171 !important;
/* red-400 - bright light red */
}

.bg-red-600:hover,
button.bg-red-600:hover,
.bg-red-700:hover,
button.bg-red-700:hover,
.bg-red-800:hover,
button.bg-red-800:hover,
.hover\\:bg-red-700:hover,
.hover\\:bg-red-800:hover {
background-color: #ef4444 !important;
/* red-500 - darker bright light red */
}

/* Update section headings */
.config-section h2 {
color: #1f2937 !important;
/* gray-800 */
border-color: #d1d5db !important;
/* gray-300 */
}

.config-section h2 i {
color: #3b82f6 !important;
/* blue-500 */
}

/* Update tab button active state - 增强选中态样式，提高优先级 */
button.tab-btn.active {
background-color: #3b82f6 !important;
/* blue-500 */
color: #ffffff !important;
/* 确保白色文字 */
box-shadow: 0 4px 12px -2px rgba(59, 130, 246, 0.4),
0 2px 6px -1px rgba(59, 130, 246, 0.2) !important;
/* 蓝色阴影 */
transform: translateY(-2px) !important;
/* 更明显的上移效果 */
border: 2px solid #2563eb !important;
/* blue-600 边框 */
font-weight: 600 !important;
/* 加粗字体 */
}

/* Ensure inactive tabs have proper styling - 增强未选中态样式，提高优先级 */
button.tab-btn:not(.active) {
background-color: #f8fafc !important;
/* slate-50 更浅的背景 */
color: #64748b !important;
/* slate-500 更明显的灰色文字 */
border: 2px solid #e2e8f0 !important;
/* slate-200 边框 */
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1) !important;
/* 轻微阴影 */
font-weight: 500 !important;
/* 中等字体粗细 */
}

button.tab-btn:not(.active):hover {
background-color: #f1f5f9 !important;
/* slate-100 */
color: #475569 !important;
/* slate-600 更深的文字颜色 */
transform: translateY(-1px) !important;
border-color: #cbd5e1 !important;
/* slate-300 */
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
}

/* Add transition for smooth state changes - 提高优先级 */
button.tab-btn {
transition: all 0.2s ease-in-out !important;
cursor: pointer !important;
/* 确保基础样式不被Tailwind覆盖 */
padding: 0.5rem 1.25rem !important;
/* px-5 py-2 */
border-radius: 9999px !important;
/* rounded-full */
font-size: 0.875rem !important;
/* text-sm */
font-weight: 500 !important;
/* font-medium */
}

/* 额外的高优先级规则确保样式生效 */
.flex.justify-center.mb-6.flex-wrap.gap-2 button.tab-btn.active {
background-color: #3b82f6 !important;
color: #ffffff !important;
border: 2px solid #2563eb !important;
box-shadow: 0 4px 12px -2px rgba(59, 130, 246, 0.4),
0 2px 6px -1px rgba(59, 130, 246, 0.2) !important;
transform: translateY(-2px) !important;
font-weight: 600 !important;
}

.flex.justify-center.mb-6.flex-wrap.gap-2 button.tab-btn:not(.active) {
background-color: #f8fafc !important;
color: #64748b !important;
border: 2px solid #e2e8f0 !important;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1) !important;
font-weight: 500 !important;
transform: none !important;
}

/* Fix all modal backgrounds - comprehensive override */
.modal .w-full[style*="background-color: rgba(70, 50, 150"],
.modal .w-full.max-w-lg[style*="background-color: rgba(70, 50, 150"],
.modal .w-full.max-w-md[style*="background-color: rgba(70, 50, 150"] {
background-color: rgba(255, 255, 255, 0.98) !important;
color: #374151 !important;
/* gray-700 */
border-color: rgba(0, 0, 0, 0.08) !important;
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
}

/* Fix modal titles */
.modal h2.text-gray-800 {
color: #1f2937 !important;
/* gray-800 */
font-weight: 600 !important;
}

/* Fix modal close buttons */
.modal .text-gray-300 {
color: #6b7280 !important;
/* gray-500 */
}

.modal .text-gray-300:hover {
color: #374151 !important;
/* gray-700 */
}

/* Fix modal body text */
.modal p,
.modal label,
.modal span {
color: #374151 !important;
/* gray-700 */
}

/* Fix modal textarea and input styling */
.modal textarea,
.modal input {
background-color: rgba(255, 255, 255, 0.95) !important;
color: #374151 !important;
/* gray-700 */
border: 1px solid rgba(0, 0, 0, 0.12) !important;
}

.modal textarea:focus,
.modal input:focus {
border-color: #3b82f6 !important;
/* blue-500 */
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}

/* Fix modal button styling */
.modal .bg-violet-600,
.modal button.bg-violet-600 {
background-color: #3b82f6 !important;
/* blue-500 - light blue */
color: #ffffff !important;
border: 1px solid #2563eb !important;
/* blue-600 */
}

.modal .bg-violet-600:hover,
.modal button.bg-violet-600:hover {
background-color: #2563eb !important;
/* blue-600 - darker light blue */
transform: translateY(-1px) !important;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
}

/* Fix modal blue button styling */
.modal .bg-blue-500,
.modal button.bg-blue-500,
.modal .bg-blue-600,
.modal button.bg-blue-600,
.modal .bg-blue-700,
.modal button.bg-blue-700 {
background-color: #3b82f6 !important;
/* blue-500 - light blue */
color: #ffffff !important;
border: 1px solid #2563eb !important;
/* blue-600 */
}

.modal .bg-blue-500:hover,
.modal button.bg-blue-500:hover,
.modal .bg-blue-600:hover,
.modal button.bg-blue-600:hover,
.modal .bg-blue-700:hover,
.modal button.bg-blue-700:hover {
background-color: #2563eb !important;
/* blue-600 - darker light blue */
transform: translateY(-1px) !important;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
}

/* Fix modal cancel/secondary buttons */
.modal .bg-gray-500,
.modal button.bg-gray-500,
.modal .bg-gray-600,
.modal button.bg-gray-600 {
background-color: #e5e7eb !important;
/* gray-200 - light gray */
color: #374151 !important;
/* gray-700 - dark text for contrast */
border: 1px solid #d1d5db !important;
/* gray-300 */
}

.modal .bg-gray-500:hover,
.modal button.bg-gray-500:hover,
.modal .bg-gray-600:hover,
.modal button.bg-gray-600:hover {
background-color: #d1d5db !important;
/* gray-300 - darker light gray */
color: #374151 !important;
/* gray-700 - dark text for contrast */
transform: translateY(-1px) !important;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
}

/* Fix modal red/danger buttons */
.modal .bg-red-500,
.modal button.bg-red-500,
.modal .bg-red-600,
.modal button.bg-red-600,
.modal .bg-red-700,
.modal button.bg-red-700 {
background-color: #f87171 !important;
/* red-400 - bright light red */
color: #ffffff !important;
border: 1px solid #ef4444 !important;
/* red-500 */
}

.modal .bg-red-500:hover,
.modal button.bg-red-500:hover,
.modal .bg-red-600:hover,
.modal button.bg-red-600:hover,
.modal .bg-red-700:hover,
.modal button.bg-red-700:hover {
background-color: #ef4444 !important;
/* red-500 - darker bright light red */
transform: translateY(-1px) !important;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
}

/* Fix all container backgrounds with purple */
[style*="background-color: rgba(255, 255, 255, 0.05)"],
[style*="background-color: rgba(80, 60, 160"],
[style*="background-color: rgba(70, 50, 150"],
[style*="background-color: rgba(60, 40, 130"],
[style*="background-color: rgba(120, 100, 200"] {
background-color: rgba(255, 255, 255, 0.95) !important;
border-color: rgba(0, 0, 0, 0.08) !important;
color: #374151 !important;
}

/* Fix map item styling */
.map-item {
background-color: rgba(249, 250, 251, 0.8) !important;
/* gray-50 */
border: 1px solid rgba(0, 0, 0, 0.08) !important;
color: #374151 !important;
}

.map-item:hover {
background-color: rgba(243, 244, 246, 1) !important;
/* gray-100 */
border-color: rgba(0, 0, 0, 0.12) !important;
}

/* Update model helper buttons */
.model-helper-trigger-btn {
color: #3b82f6 !important;
/* blue-500 */
background-color: rgba(59, 130, 246, 0.1) !important;
}

.model-helper-trigger-btn:hover {
background-color: rgba(59, 130, 246, 0.2) !important;
color: #1d4ed8 !important;
/* blue-700 */
}

/* Comprehensive button text color fixes */
.bg-blue-500,
.bg-blue-600,
.bg-blue-700,
.bg-red-500,
.bg-red-600,
.bg-red-700,
.bg-red-800,
.bg-green-500,
.bg-green-600,
.bg-green-700,
.bg-sky-500,
.bg-sky-600,
.bg-sky-700,
.bg-purple-500,
.bg-purple-600,
.bg-purple-700,
.bg-violet-500,
.bg-violet-600,
.bg-violet-700 {
color: #ffffff !important;
}

/* Ensure button children inherit white text */
.bg-blue-500 *,
.bg-blue-600 *,
.bg-blue-700 *,
.bg-red-500 *,
.bg-red-600 *,
.bg-red-700 *,
.bg-red-800 *,
.bg-green-500 *,
.bg-green-600 *,
.bg-green-700 *,
.bg-sky-500 *,
.bg-sky-600 *,
.bg-sky-700 *,
.bg-purple-500 *,
.bg-purple-600 *,
.bg-purple-700 *,
.bg-violet-500 *,
.bg-violet-600 *,
.bg-violet-700 * {
color: inherit !important;
}

/* Fix page title gradient - comprehensive override */
h1.text-transparent,
.text-transparent.bg-clip-text,
.bg-gradient-to-r.from-violet-400.to-pink-400 {
background: none !important;
color: #1f2937 !important;
/* gray-800 - consistent with other pages */
-webkit-background-clip: unset !important;
background-clip: unset !important;
text-shadow: none !important;
font-weight: 800 !important;
/* font-extrabold */
}

/* Fix all gradient buttons to use solid blue */
.bg-gradient-to-r.from-violet-500.to-pink-500,
.bg-gradient-to-r.from-gray-600.to-gray-700 {
background: none !important;
}

/* Ensure all violet/purple colors are converted to blue theme */
.text-violet-300,
.text-violet-400,
.text-violet-100 {
color: #3b82f6 !important;
/* blue-500 */
}

.border-violet-300,
.border-violet-400 {
border-color: rgba(59,
130,
246,
0.3) !important;
/* blue-500 with opacity */
}

.hover\\:text-violet-400:hover,
.hover\\:text-violet-100:hover {
color: #2563eb !important;
/* blue-600 */
}

.hover\\:bg-violet-700:hover {
background-color: #2563eb !important;
/* blue-600 */
}

/* Fix focus states for form elements */
.focus-within\\:border-violet-400:focus-within,
.focus-within\\:ring-violet-400:focus-within {
border-color: #3b82f6 !important;
/* blue-500 */
box-shadow: none !important;
/* 移除focus阴影 */
}

/* Fix focus-within border color for auth token wrapper */
.focus-within\\:border-blue-500:focus-within {
border-color: #3b82f6 !important;
/* blue-500 */
}

/* More specific selector for auth token wrapper */
div.flex.items-center.flex-grow.border.rounded-md.focus-within\\:border-blue-500:focus-within {
border-color: #3b82f6 !important;
/* blue-500 */
}

/* Even more specific selector targeting the exact auth token wrapper */
.mb-6 .flex.items-center div.flex.items-center.flex-grow.border.rounded-md:focus-within {
border-color: #3b82f6 !important;
/* blue-500 */
}

/* Fix primary color focus states - convert purple to blue */
.focus\\:border-primary-500:focus,
.focus\\:border-primary-600:focus {
border-color: #3b82f6 !important;
/* blue-500 */
}

.focus\\:ring-primary-200:focus,
.focus\\:ring-primary-300:focus {
--tw-ring-color: rgba(59,
130,
246,
0.2) !important;
/* blue-500 with opacity */
}

/* Fix select element styling */
.form-select-themed {
background-color: rgba(255, 255, 255, 0.95) !important;
border: 1px solid rgba(0, 0, 0, 0.12) !important;
color: #374151 !important;
/* gray-700 */
outline: none !important;
box-shadow: none !important;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
}

.form-select-themed:focus {
border-color: #3b82f6 !important;
/* blue-500 */
box-shadow: none !important;
/* 移除focus阴影 */
outline: none !important;
}

/* Override any remaining primary colors */
.text-primary-600,
.text-primary-500 {
color: #3b82f6 !important;
/* blue-500 */
}

.bg-primary-600,
.bg-primary-500 {
background-color: #3b82f6 !important;
/* blue-500 */
}

.bg-primary-700:hover,
.hover\\:bg-primary-700:hover {
background-color: #2563eb !important;
/* blue-600 */
}

/* Fix dynamic input wrapper focus states - convert violet to blue */
.focus-within\\:border-violet-400:focus-within,
.focus-within\\:ring-violet-400:focus-within {
border-color: #3b82f6 !important;
/* blue-500 */
box-shadow: none !important;
/* 移除focus阴影 */
}

/* Ensure all array input wrappers use blue theme */
.array-container .flex.items-center.flex-grow.rounded-md {
border-color: rgba(0, 0, 0, 0.12) !important;
}

.array-container .flex.items-center.flex-grow.rounded-md:focus-within {
border-color: #3b82f6 !important;
/* blue-500 */
box-shadow: none !important;
/* 移除focus阴影 */
}
/* End of page specific styles */


/* templates/keys_status.html */
/* keys_status.html specific styles */
.key-content {
transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out,
padding 0.3s ease-in-out;
/* Added padding transition */
overflow: hidden;
/* Keep hidden initially and during collapse */
}

.key-content.collapsed {
max-height: 0 !important;
/* Use important to override inline style during transition */
opacity: 0;
padding-top: 0 !important;
/* Collapse padding */
padding-bottom: 0 !important;
/* Collapse padding */
/* overflow: hidden; */
/* Already set above */
}

.toggle-icon {
transition: transform 0.3s ease;
}

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

/* Copy status styling is handled by base.html's notification */

/* Современные стили статистики */
.stats-dashboard {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
margin-bottom: 2rem;
position: relative;
z-index: 10;
}

@media (min-width: 768px) {
.stats-dashboard {
grid-template-columns: 1fr 1fr;
}
}

/* Растянуть карточку графика на всю строку в сетке */
.stats-card.chart-wide {
grid-column: 1 / -1;
}

/* Фиксированная высота контейнера графика для Chart.js maintainAspectRatio:false */
.chart-container {
height: 300px;
}

@media (max-width: 640px) {
.chart-container {
height: 220px;
}
}

/* Стили карточек статистики */
.stats-card {
background-color: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border-radius: 0.75rem;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
0 2px 4px -1px rgba(0, 0, 0, 0.06);
border: 1px solid rgba(0, 0, 0, 0.08);
overflow: hidden;
transition: all 0.3s ease-in-out;
}

.stats-card:hover {
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
0 4px 6px -2px rgba(0, 0, 0, 0.05);
border-color: rgba(0, 0, 0, 0.12);
}

.stats-card-header {
background-color: rgba(249, 250, 251, 0.95);
padding: 0.75rem 1rem;
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
/* Allow wrapping for smaller screens */
gap: 0.5rem;
/* Add gap between items */
}

.stats-card-title {
display: flex;
align-items: center;
font-size: 1rem;
font-weight: 600;
color: #374151;
/* gray-700 for light theme */
text-shadow: none;
}

.stats-card-title i {
margin-right: 0.5rem;
color: #6b7280;
/* gray-500 for light theme */
}

.stats-card-header h2 {
color: #374151;
/* gray-700 for light theme */
}

.stats-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.5rem;
padding: 0.75rem;
}

/* Стили элементов статистики */
.stat-item {
padding: 0.75rem;
border-radius: 0.5rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
transition: all 0.3s ease-in-out;
position: relative;
overflow: hidden;
}

.stat-item::before {
content: "";
position: absolute;
inset: 0;
opacity: 0.15;
background-color: currentColor;
z-index: 0;
transition: opacity 0.3s ease-in-out;
}

.stat-item:hover::before {
opacity: 0.25;
}

.stat-item:hover {
transform: translateY(-2px);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
}

.stat-value {
font-size: 1.5rem;
font-weight: 700;
z-index: 10;
position: relative;
color: #1f2937;
/* gray-800 for light theme */
text-shadow: none;
}

.stat-label {
font-size: 0.75rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.05em;
margin-top: 0.25rem;
z-index: 10;
position: relative;
color: #6b7280;
/* gray-500 for light theme */
text-shadow: none;
}

.stat-icon {
position: absolute;
right: 0.5rem;
bottom: 0.25rem;
opacity: 0.15;
font-size: 1.875rem;
transform: rotate(12deg);
transition: all 0.3s ease-in-out;
}

.stat-item:hover .stat-icon {
opacity: 0.25;
transform: scale(1.1) rotate(0deg);
}

/* Стили типов статистики */
.stat-primary {
color: #3b82f6;
/* blue-500 */
background-color: rgba(59, 130, 246, 0.1);
}

.stat-success {
color: #10b981;
/* emerald-500 */
background-color: rgba(16, 185, 129, 0.1);
}

.stat-danger {
color: #ef4444;
/* red-500 */
background-color: rgba(239, 68, 68, 0.1);
}

.stat-warning {
color: #f59e0b;
/* amber-500 */
background-color: rgba(245, 158, 11, 0.1);
}

.stat-info {
color: #06b6d4;
/* cyan-500 */
background-color: rgba(6, 182, 212, 0.1);
}

/* Новое: настройка цвета фона при наведении для элементов статистики API-вызовов */
.stat-item.stat-warning:hover {
background-color: rgba(245,
158,
11,
0.2) !important;
/* amber-500 with higher opacity */
}

.stat-item.stat-info:hover {
background-color: rgba(6,
182,
212,
0.2) !important;
/* cyan-500 with higher opacity */
}

.stat-item.stat-primary:hover {
background-color: rgba(59,
130,
246,
0.2) !important;
/* blue-500 with higher opacity */
}

/* Адаптивные настройки */
@media (max-width: 640px) {
.stats-dashboard {
gap: 1rem;
}

.stats-grid {
grid-template-columns: repeat(2, 1fr);
gap: 0.5rem;
padding: 0.5rem;
}

.stat-item {
padding: 0.5rem;
}

.stat-value {
font-size: 1.25rem;
}

.stat-label {
font-size: 0.625rem;
}

.stats-card-header {
padding: 0.5rem 0.75rem;
}

/* Adjust header padding */
.key-content ul {
grid-template-columns: 1fr;
}

/* Stack keys vertically on small screens */
}

/* Tailwind Toggle Switch Helper CSS */
.toggle-checkbox:checked {
right: 0;
border-color: #2563eb;
}

.toggle-checkbox:checked+.toggle-label {
background-color: #2563eb;
}

/* Pagination Controls */
#validPaginationControls,
#invalidPaginationControls {
display: flex;
justify-content: center;
align-items: center;
margin-top: 1rem;
/* mt-4 */
gap: 0.5rem;
/* space-x-2 */
}

/* Ensure list items are flex for alignment */
#validKeys li,
#invalidKeys li {
display: flex;
align-items: flex-start;
/* Align checkbox with top of content */
gap: 0.75rem;
/* gap-3 */
}

/* Ensure grid layout for key lists */
#validKeys,
#invalidKeys {
display: grid;
grid-template-columns: 1fr;
/* Default single column */
gap: 0.75rem;
/* gap-3 */
}

@media (min-width: 768px) {

/* md breakpoint */
#validKeys,
#invalidKeys {
grid-template-columns: repeat(2,
1fr);
/* Two columns on medium screens and up */
}
}

/* Изменение фона списка ключей и стилей карточек */
.key-content {
background-color: rgba(249, 250, 251, 0.8) !important;
}

#validKeys li,
#invalidKeys li {
background-color: rgba(255, 255, 255, 0.9);
border: 1px solid rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
cursor: pointer;
position: relative;
padding-left: 2.5rem;
/* Место для кастомного чекбокса */
}

#validKeys li:hover,
#invalidKeys li:hover {
border-color: rgba(0, 0, 0, 0.12);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
background-color: rgba(249, 250, 251, 0.95);
}

#validKeys li.selected,
#invalidKeys li.selected {
background-color: rgba(239, 246, 255, 0.95);
border-color: rgba(59, 130, 246, 0.3);
}

/* Скрыть нативные чекбоксы */
#validKeys .key-checkbox,
#invalidKeys .key-checkbox {
display: none;
}

/* Кастомные стили чекбоксов */
#validKeys li::before,
#invalidKeys li::before {
content: "";
position: absolute;
left: 0.75rem;
top: 50%;
transform: translateY(-50%);
width: 1.25rem;
/* 20px */
height: 1.25rem;
/* 20px */
border: 2px solid rgba(156, 163, 175, 0.7);
/* gray-400 */
border-radius: 0.375rem;
/* 6px */
background-color: rgba(255, 255, 255, 0.9);
transition: all 0.2s ease-in-out;
}

#validKeys li.selected::before,
#invalidKeys li.selected::before {
background-color: #3b82f6;
/* blue-500 */
border-color: #2563eb;
/* blue-600 */
}

/* Кастомный стиль галочки чекбокса */
#validKeys li.selected::after,
#invalidKeys li.selected::after {
content: "\f00c";
/* Font Awesome check icon */
font-family: "Font Awesome 5 Free";
font-weight: 900;
position: absolute;
left: calc(0.75rem + 0.3rem);
/* Настройка позиции галочки */
top: 50%;
transform: translateY(-50%) scale(0.9);
color: white;
font-size: 0.8rem;
}

/* Стили списка примечательных ключей и выбранного состояния */
#attentionKeysList li {
display: flex;
align-items: center;
justify-content: space-between;
background-color: rgba(255, 255, 255, 0.9);
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: 0.5rem;
padding: 0.5rem 0.75rem;
transition: all 0.2s ease;
cursor: pointer;
}

#attentionKeysList li:hover {
border-color: rgba(0, 0, 0, 0.12);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
background-color: rgba(249, 250, 251, 0.95);
}

#attentionKeysList li.selected {
background-color: rgba(239, 246, 255, 0.95);
/* light blue */
border-color: rgba(59, 130, 246, 0.35);
}

#attentionKeysList .key-checkbox {
margin-right: 0.25rem;
}

.key-text {
color: #374151 !important;
/* gray-700 for light theme */
text-shadow: none;
font-weight: 500;
}

/* Настройка цвета фона модальных окон */
#apiCallDetailsModal .bg-white,
#keyUsageDetailsModal .bg-white,
#resultModal .bg-white,
#resetModal .bg-white,
#verifyModal .bg-white,
.modal .bg-white {
background-color: rgba(255, 255, 255, 0.98) !important;
color: #374151 !important;
/* gray-700 */
border-color: rgba(0, 0, 0, 0.08) !important;
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
}

/* Цвет заголовка модального окна */
#apiCallDetailsModalTitle,
#keyUsageDetailsModalTitle,
#resultModalTitle,
#resetModalTitle,
#verifyModalTitle {
color: #1f2937 !important;
/* gray-800 */
text-shadow: none;
font-weight: 600;
}

/* Специфические стили шапки модального окна деталей использования ключа */
#keyUsageDetailsModal .bg-white>div.border-b {
/* Нижняя граница для области заголовка */
border-bottom-color: rgba(0, 0, 0, 0.12) !important;
}

/* Цвет текста сообщения в модальном окне */
#apiCallDetailsContent,
#keyUsageDetailsContent,
#resultModalMessage,
#resetModalMessage,
#verifyModalMessage {
color: #374151 !important;
/* gray-700 */
}

/* Стили области сообщений в модальном окне результатов специфических настроек */
#resultModalMessage {
background-color: rgba(255, 255, 255, 0.95) !important;
/* Светлый фон */
border-color: rgba(0, 0, 0, 0.08) !important;
/* Светлая граница */
color: #374151 !important;
/* Темный текст */
}

/* Светлая тема для обычных списков (например, список успешных ключей) в результатах массовой проверки */
#resultModalMessage ul[class*="bg-gray-50"] {
/* Для ul с определенным серым фоном */
background-color: rgba(249, 250, 251, 0.95) !important;
/* Светло-серый фон */
border-color: rgba(0, 0, 0, 0.08) !important;
/* Светлая граница */
}

#resultModalMessage ul[class*="bg-gray-50"] li {
color: #374151 !important;
/* Темный текст */
}

/* Светлая тема для списка ошибок в результатах массовой проверки */
#resultModalMessage ul[class*="bg-red-50"] {
/* Для ul с определенным фоном */
background-color: rgba(254, 242, 242, 0.95) !important;
/* Светло-красный фон */
border-color: rgba(239, 68, 68, 0.2) !important;
/* Светло-красная граница */
}

/* Текст ключа в списке ошибок */
#resultModalMessage ul[class*="bg-red-50"] li span.font-mono {
color: #dc2626 !important;
/* Темно-красный текст */
}

/* Кнопка "Свернуть/Развернуть" в списке ошибок - красный дизайн */
#resultModalMessage ul[class*="bg-red-50"] li button[class*="bg-red-200"] {
background-color: #dc2626 !important;
/* Темно-красный фон кнопки */
color: #ffffff !important;
/* Белый текст кнопки */
border: 1px solid #b91c1c !important;
/* Более темная красная граница */
box-shadow: none !important;
font-weight: 500 !important;
/* Повышенная жирность текста для читаемости */
}

#resultModalMessage ul[class*="bg-red-50"] li button[class*="bg-red-200"]:hover {
background-color: #b91c1c !important;
/* Более темный красный фон при наведении */
color: #ffffff !important;
/* Белый текст при наведении */
transform: translateY(-1px) !important;
/* Эффект легкого подъема */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
/* Эффект тени при наведении */
}

/* Блок деталей ошибки в списке ошибок - красный дизайн */
#resultModalMessage ul[class*="bg-red-50"] li div[id^="error-details-"] {
background-color: rgba(254, 242, 242, 0.8) !important;
/* Более светлый красный фон */
border-color: rgba(248, 113, 113, 0.3) !important;
/* Светло-красная граница */
color: #7f1d1d !important;
/* Темно-красный текст для хорошего контраста */
font-weight: 500 !important;
/* Повышенная жирность текста для читаемости */
line-height: 1.5 !important;
/* Улучшенная высота строки для читаемости */
}

/* Стили заголовков таблицы внутри модального окна использования ключа */
#keyUsageDetailsModal #keyUsageDetailsContent table th {
background-color: rgba(243, 244, 246, 0.95) !important;
/* Светло-серый фон */
border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
/* Светлая рамка */
color: #374151 !important;
/* Темный текст */
text-shadow: none;
/* Удалить тень текста */
}

/* Стили ячеек таблицы использования ключей удалены, используются цвета по умолчанию для единообразия */

/* Цвет текста кнопки */
.stats-card button {
color: #ffffff;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}

/* Фон элементов формы */
.form-input,
.form-select {
background-color: rgba(255, 255, 255, 0.95) !important;
color: #374151 !important;
/* gray-700 */
border-color: rgba(0, 0, 0, 0.12) !important;
}

/* Цвет текста меток */
.text-gray-500,
.text-gray-600,
.text-gray-700 {
color: #374151 !important;
/* dark gray for light theme */
text-shadow: none;
}

/* Настройка глобального фонового цвета для гармонии с белым фоном */
.glass-card {
background-color: rgba(255, 255, 255, 0.95) !important;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(0, 0, 0, 0.08);
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* Улучшение стилей элементов пагинации */
.pagination-button {
background-color: rgba(255, 255, 255, 0.9);
color: #374151;
/* gray-700 */
border: 1px solid rgba(0, 0, 0, 0.08);
text-shadow: none;
}

.pagination-button.active {
background-color: #3b82f6;
/* blue-500 */
color: white;
border-color: #2563eb;
/* blue-600 */
}

/* Улучшение стилей статусных меток */
.inline-flex.items-center.px-2\.5.py-0\.5.rounded-full {
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}

/* Улучшение цветов кнопок */
button.bg-success-600,
button.bg-blue-600,
button.bg-slate-500,
button.bg-purple-600,
button.bg-primary-700,
button.bg-teal-600 {
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}

/* Стили текста чекбоксов */
input[type="checkbox"]+label {
color: #f1f5f9 !important;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}

/* Исправление цвета текста копирайта в футере */
.fixed.bottom-0.left-0.w-full.py-3.bg-white .text-gray-200,
.fixed.bottom-0.left-0.w-full.py-3.bg-white .text-gray-300,
.fixed.bottom-0.left-0.w-full.py-3.bg-white .text-gray-400,
.fixed.bottom-0.left-0.w-full.py-3.bg-white .text-gray-500,
.fixed.bottom-0.left-0.w-full.py-3.bg-white .text-gray-600,
.fixed.bottom-0.left-0.w-full.py-3.bg-white .text-gray-700 {
color: #1f2937 !important;
/* Использование темно-серого для повышения контраста */
text-shadow: none !important;
}

/* Стили наведения для ссылок навигации — оптимизированы во избежание перекрытия */
.nav-link {
transition: all 0.2s ease-in-out;
position: relative;
z-index: 1;
/* Гарантировать отсутствие перекрытия контента */
}

.nav-link:hover {
background-color: rgba(59, 130, 246, 0.1) !important;
/* blue-500 light */
transform: scale(1.02);
/* Использование масштабирования вместо смещения вверх */
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
/* Усиление эффекта тени */
}

/* Стили контейнера кнопок навигации — отступ для эффектов наведения */
.nav-buttons-container {
padding-top: 0.5rem;
/* Отступ сверху для эффекта наведения */
padding-bottom: 0.75rem;
/* Отступ снизу для эффекта наведения */
}

/* Оптимизированный эффект наведения для кнопок главной навигации */
.main-nav-btn:hover {
transform: scale(1.02) !important;
/* Использование масштабирования вместо смещения вверх */
box-shadow: 0 8px 16px rgba(59, 130, 246, 0.3) !important;
/* Голубая тень */
}

/* Active navigation tab */
.bg-violet-600 {
background-color: #3b82f6 !important;
/* blue-500 */
color: #ffffff !important;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
transform: translateY(-1px) !important;
border: 1px solid #2563eb !important;
/* blue-600 */
}

.bg-violet-600:hover {
background-color: #2563eb !important;
/* blue-600 */
transform: translateY(-2px) !important;
box-shadow: 0 6px 8px -1px rgba(0, 0, 0, 0.15), 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
}

/* Fix page title gradient */
.text-transparent.bg-clip-text.bg-gradient-to-r.from-violet-400.to-pink-400 {
background: none !important;
color: #1f2937 !important;
/* gray-800 */
-webkit-background-clip: unset !important;
background-clip: unset !important;
}

/* Fix refresh button */
.bg-white.bg-opacity-20 {
background-color: rgba(255, 255, 255, 0.9) !important;
color: #3b82f6 !important;
/* blue-500 */
}

.bg-white.bg-opacity-20:hover {
background-color: rgba(255, 255, 255, 1) !important;
}

/* Fix batch actions area purple background */
#validBatchActions,
#invalidBatchActions {
background-color: rgba(249, 250, 251, 0.95) !important;
/* light gray */
border-color: rgba(0, 0, 0, 0.08) !important;
}

#validBatchActions .text-gray-200,
#invalidBatchActions .text-gray-200 {
color: #374151 !important;
/* dark gray */
}

/* Fix primary button colors */
.bg-primary-600,
.bg-primary-700,
.bg-primary-800 {
background-color: #3b82f6 !important;
/* blue-500 */
}

.bg-primary-600:hover,
.bg-primary-700:hover,
.bg-primary-800:hover {
background-color: #2563eb !important;
/* blue-600 */
}

/* Fix text-primary colors */
.text-primary-600 {
color: #3b82f6 !important;
/* blue-500 */
}

/* Fix form input focus colors */
.focus\\:ring-primary-500:focus {
--tw-ring-color: rgba(59, 130, 246, 0.2) !important;
}

.focus\\:border-primary-500:focus {
border-color: #3b82f6 !important;
}

/* Новое: Настройка фона и цвета наведения для кнопок в списке ключей */
/* Кнопка проверки (зеленая) */
#validKeys li button.bg-success-600,
#invalidKeys li button.bg-success-600 {
background-color: rgba(22, 163, 74, 0.65) !important;
border: 1px solid rgba(22, 163, 74, 0.85);
}

#validKeys li button.bg-success-600:hover,
#invalidKeys li button.bg-success-600:hover {
background-color: rgba(21, 128, 61, 0.75) !important;
border-color: rgba(21, 128, 61, 0.95);
}

/* Кнопка сброса (темно-серый фон, белый текст) */
#validKeys li button.bg-gray-500,
#invalidKeys li button.bg-gray-500 {
background-color: #6b7280 !important;
/* gray-500 — темно-серый фон */
border: 1px solid #4b5563 !important;
/* gray-600 */
color: #ffffff !important;
/* white — белый текст */
}

#validKeys li button.bg-gray-500:hover,
#invalidKeys li button.bg-gray-500:hover {
background-color: #4b5563 !important;
/* gray-600 — еще более темный серый */
border-color: #374151 !important;
/* gray-700 */
color: #ffffff !important;
/* white — белый текст */
}

/* Кнопка копирования (синий фон, белый текст) */
#validKeys li button.bg-blue-500,
#invalidKeys li button.bg-blue-500 {
background-color: #3b82f6 !important;
/* blue-500 — синий фон */
border: 1px solid #2563eb !important;
/* blue-600 */
color: #ffffff !important;
/* Keep white text as specified in HTML */
}

#validKeys li button.bg-blue-500:hover,
#invalidKeys li button.bg-blue-500:hover {
background-color: #2563eb !important;
/* blue-600 — темно-синий при наведении */
border-color: #1d4ed8 !important;
/* blue-700 */
color: #ffffff !important;
/* Keep white text on hover */
}

/* Кнопка деталей (изменена на синюю) */
#validKeys li button.bg-purple-600,
#invalidKeys li button.bg-purple-600 {
background-color: rgba(59, 130, 246, 0.8) !important;
/* blue-500 */
border: 1px solid rgba(59, 130, 246, 0.9);
}

#validKeys li button.bg-purple-600:hover,
#invalidKeys li button.bg-purple-600:hover {
background-color: rgba(37, 99, 235, 0.9) !important;
/* blue-600 */
border-color: rgba(37, 99, 235, 1);
}

/* Кнопка удаления (ярко-красная) — в HTML используется bg-red-800 */
#validKeys li button.bg-red-800,
#invalidKeys li button.bg-red-800 {
background-color: #f87171 !important;
/* red-400 - bright light red */
border: 1px solid #ef4444 !important;
/* red-500 */
color: #ffffff !important;
/* Ensure white text */
}

#validKeys li button.bg-red-800:hover,
#invalidKeys li button.bg-red-800:hover {
background-color: #ef4444 !important;
/* red-500 - darker bright light red */
border-color: #dc2626 !important;
/* red-600 */
}

/* Comprehensive purple to light theme conversion */
[style*="background-color: rgba(80, 60, 160"],
[style*="background-color: rgba(70, 50, 150"],
[style*="background-color: rgba(120, 100, 200"] {
background-color: rgba(255, 255, 255, 0.95) !important;
border-color: rgba(0, 0, 0, 0.08) !important;
color: #374151 !important;
}

/* Fix modal button colors - specific overrides for keys_status.html */
/* Blue buttons in modals */
.bg-blue-600,
button.bg-blue-600,
.bg-blue-700,
button.bg-blue-700 {
background-color: #3b82f6 !important;
/* blue-500 - light blue */
}

.bg-blue-600:hover,
button.bg-blue-600:hover,
.bg-blue-700:hover,
button.bg-blue-700:hover,
.hover\\:bg-blue-700:hover,
.hover\\:bg-blue-800:hover {
background-color: #2563eb !important;
/* blue-600 - darker light blue */
}

/* Red buttons in modals */
.bg-red-700,
button.bg-red-700,
.bg-red-800,
button.bg-red-800 {
background-color: #f87171 !important;
/* red-400 - bright light red */
}

.bg-red-700:hover,
button.bg-red-700:hover,
.bg-red-800:hover,
button.bg-red-800:hover,
.hover\\:bg-red-800:hover {
background-color: #ef4444 !important;
/* red-500 - darker bright light red */
}

/* Primary buttons in modals */
.bg-primary-700,
button.bg-primary-700,
.bg-primary-800,
button.bg-primary-800 {
background-color: #3b82f6 !important;
/* blue-500 - light blue */
}

.bg-primary-700:hover,
button.bg-primary-700:hover,
.bg-primary-800:hover,
button.bg-primary-800:hover,
.hover\\:bg-primary-800:hover {
background-color: #2563eb !important;
/* blue-600 - darker light blue */
}

/* Teal buttons in modals (for verify button) */
.bg-teal-700,
button.bg-teal-700,
.bg-teal-800,
button.bg-teal-800 {
background-color: #3b82f6 !important;
/* blue-500 - light blue (change teal to light blue) */
}

.bg-teal-700:hover,
button.bg-teal-700:hover,
.bg-teal-800:hover,
button.bg-teal-800:hover,
.hover\\:bg-teal-800:hover {
background-color: #2563eb !important;
/* blue-600 - darker light blue */
}

/* Global slate/gray button color overrides - only for modal buttons */
/* Modal slate buttons should be light gray with dark text */
.modal .bg-slate-500,
.modal button.bg-slate-500,
.modal .bg-slate-600,
.modal button.bg-slate-600,
.modal .bg-slate-700,
.modal button.bg-slate-700 {
background-color: #e5e7eb !important;
/* gray-200 - light gray */
color: #374151 !important;
/* gray-700 - dark text for contrast */
}

.modal .bg-slate-500:hover,
.modal button.bg-slate-500:hover,
.modal .bg-slate-600:hover,
.modal button.bg-slate-600:hover,
.modal .bg-slate-700:hover,
.modal button.bg-slate-700:hover,
.modal .hover\\:bg-slate-600:hover,
.modal .hover\\:bg-slate-700:hover {
background-color: #d1d5db !important;
/* gray-300 - darker light gray */
color: #374151 !important;
/* gray-700 - dark text for contrast */
}

/* Fix any remaining button text color issues */
.bg-blue-500,
.bg-blue-600,
.bg-blue-700,
.bg-red-500,
.bg-red-600,
.bg-red-700,
.bg-red-800,
.bg-green-500,
.bg-green-600,
.bg-green-700,
.bg-sky-500,
.bg-sky-600,
.bg-sky-700,
.bg-purple-500,
.bg-purple-600,
.bg-purple-700,
.bg-primary-700,
.bg-primary-800,
.bg-teal-700,
.bg-teal-800 {
color: #ffffff !important;
}

/* Ensure button children inherit white text */
.bg-blue-500 *,
.bg-blue-600 *,
.bg-blue-700 *,
.bg-red-500 *,
.bg-red-600 *,
.bg-red-700 *,
.bg-red-800 *,
.bg-green-500 *,
.bg-green-600 *,
.bg-green-700 *,
.bg-sky-500 *,
.bg-sky-600 *,
.bg-sky-700 *,
.bg-purple-500 *,
.bg-purple-600 *,
.bg-purple-700 * {
color: inherit !important;
}

/* Fix key action buttons styling */
#validKeys li button,
#invalidKeys li button {
font-size: 0.75rem !important;
/* text-xs */
padding: 0.25rem 0.5rem !important;
/* px-2 py-1 */
border-radius: 0.375rem !important;
/* rounded-md */
font-weight: 500 !important;
/* font-medium */
transition: all 0.2s ease-in-out !important;
border: 1px solid transparent !important;
}

/* Verify button (green) */
#validKeys li button.bg-green-600,
#invalidKeys li button.bg-green-600 {
background-color: #16a34a !important;
/* green-600 */
color: #ffffff !important;
border-color: #15803d !important;
/* green-700 */
}

#validKeys li button.bg-green-600:hover,
#invalidKeys li button.bg-green-600:hover {
background-color: #15803d !important;
/* green-700 */
transform: translateY(-1px) !important;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

/* Details button (light blue) */
#validKeys li button.bg-blue-600,
#invalidKeys li button.bg-blue-600 {
background-color: #3b82f6 !important;
/* blue-500 - light blue */
color: #ffffff !important;
border-color: #2563eb !important;
/* blue-600 */
}

#validKeys li button.bg-blue-600:hover,
#invalidKeys li button.bg-blue-600:hover {
background-color: #2563eb !important;
/* blue-600 - darker light blue */
transform: translateY(-1px) !important;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

/* Disable/Enable button (yellow/orange) */
#validKeys li button.bg-yellow-500,
#invalidKeys li button.bg-yellow-500,
#validKeys li button.bg-orange-500,
#invalidKeys li button.bg-orange-500 {
background-color: #f59e0b !important;
/* amber-500 */
color: #ffffff !important;
border-color: #d97706 !important;
/* amber-600 */
}

#validKeys li button.bg-yellow-500:hover,
#invalidKeys li button.bg-yellow-500:hover,
#validKeys li button.bg-orange-500:hover,
#invalidKeys li button.bg-orange-500:hover {
background-color: #d97706 !important;
/* amber-600 */
transform: translateY(-1px) !important;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

/* Fix pagination dropdown styling */
.pagination-controls select {
background-color: rgba(255, 255, 255, 0.95) !important;
color: #374151 !important;
/* gray-700 */
border: 1px solid rgba(0, 0, 0, 0.12) !important;
border-radius: 0.375rem !important;
/* rounded-md */
padding: 0.25rem 0.5rem !important;
font-size: 0.875rem !important;
/* text-sm */
}

.pagination-controls select:focus {
border-color: #3b82f6 !important;
/* blue-500 */
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
outline: none !important;
}

/* Fix pagination text */
.pagination-controls span,
.pagination-controls label {
color: #374151 !important;
/* gray-700 */
font-weight: 500 !important;
}

/* Fix specific pagination elements by ID and class */
#validKeysPageSize,
#invalidKeysPageSize,
#itemsPerPageSelect,
#invalidItemsPerPageSelect {
background-color: rgba(255, 255, 255, 0.95) !important;
color: #374151 !important;
/* gray-700 */
border: 1px solid rgba(0, 0, 0, 0.12) !important;
border-radius: 0.375rem !important;
/* rounded-md */
padding: 0.25rem 0.5rem !important;
font-size: 0.875rem !important;
/* text-sm */
}

#validKeysPageSize:focus,
#invalidKeysPageSize:focus,
#itemsPerPageSelect:focus,
#invalidItemsPerPageSelect:focus {
border-color: #3b82f6 !important;
/* blue-500 */
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
outline: none !important;
}

/* Fix pagination container text */
.flex.items-center.gap-2 span {
color: #374151 !important;
/* gray-700 */
font-weight: 500 !important;
}

/* Fix any remaining form elements */
select,
input[type="text"],
input[type="number"] {
background-color: rgba(255, 255, 255, 0.95) !important;
color: #374151 !important;
/* gray-700 */
border: 1px solid rgba(0, 0, 0, 0.12) !important;
}

select:focus,
input[type="text"]:focus,
input[type="number"]:focus {
border-color: #3b82f6 !important;
/* blue-500 */
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
outline: none !important;
}

/* Comprehensive button text color fixes for all button states */
button.bg-success-600,
button.bg-success-700,
button.bg-blue-600,
button.bg-blue-700,
button.bg-purple-600,
button.bg-purple-700,
button.bg-red-800,
button.bg-red-900,
button.bg-teal-600,
button.bg-teal-700,
button.bg-primary-700,
button.bg-primary-800 {
color: #ffffff !important;
font-weight: 500 !important;
}

/* Slate buttons in modals use dark text on light background */
.modal button.bg-slate-500,
.modal button.bg-slate-600,
.modal button.bg-slate-700 {
color: #374151 !important;
/* gray-700 - dark text for contrast */
font-weight: 500 !important;
}

/* Ensure button children (icons and text) inherit color */
button.bg-success-600 *,
button.bg-success-700 *,
button.bg-blue-600 *,
button.bg-blue-700 *,
button.bg-purple-600 *,
button.bg-purple-700 *,
button.bg-red-800 *,
button.bg-red-900 *,
button.bg-teal-600 *,
button.bg-teal-700 *,
button.bg-primary-700 *,
button.bg-primary-800 *,
button.bg-slate-500 *,
button.bg-slate-600 *,
button.bg-slate-700 * {
color: inherit !important;
}

/* Fix specific button text visibility issues */
.stats-card button,
.key-content button {
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2) !important;
}

/* Fix specific label text visibility issues */
label[for="selectAllValid"],
label[for="selectAllInvalid"],
label[for="failCountThreshold"],
label[for="keySearchInput"],
label[for="itemsPerPageSelect"],
label[for="invalidFailCountThreshold"],
label[for="invalidKeySearchInput"],
label[for="invalidItemsPerPageSelect"] {
color: #1f2937 !important;
/* gray-800 for maximum contrast */
font-weight: 600 !important;
/* font-semibold for better visibility */
text-shadow: none !important;
}

/* Fix pagination and control text */
.pagination-controls span,
.pagination-controls label,
.stats-card-header span {
color: #1f2937 !important;
/* gray-800 */
font-weight: 500 !important;
text-shadow: none !important;
}

#validKeys li button.bg-red-800:hover,
#invalidKeys li button.bg-red-800:hover {
background-color: rgba(153, 27, 27, 0.75) !important;
/* Based on red-800 */
border-color: rgba(153, 27, 27, 0.95);
}

/* Новое: Настройка цвета статусных меток в списке ключей */
/* Метка "Действителен" (зеленая) — улучшен контраст */
#validKeys li span.bg-success-50.text-success-600,
#invalidKeys li span.bg-success-50.text-success-600 {
background-color: rgba(34, 197, 94, 0.15) !important;
/* green-500 with low opacity */
color: #16a34a !important;
/* green-600 for better contrast on light background */
border: 1px solid rgba(22, 163, 74, 0.3) !important;
/* green-600 border */
font-weight: 600 !important;
/* Make text bolder for better readability */
text-shadow: none !important;
/* Remove any text shadow */
}

/* Метка счетчика ошибок (желтая) — улучшен контраст */
#validKeys li span.bg-amber-50.text-amber-600,
#invalidKeys li span.bg-amber-50.text-amber-600 {
background-color: rgba(251, 191, 36, 0.15) !important;
/* amber-400 with low opacity */
color: #d97706 !important;
/* amber-600 for better contrast on light background */
border: 1px solid rgba(217, 119, 6, 0.3) !important;
/* amber-600 border */
position: absolute;
/* Переместить в правый нижний угол */
bottom: 0.75rem;
/* С учетом отступа p-3 у li */
right: 0.75rem;
z-index: 5;
/* Гарантировать отображение поверх других элементов */
font-weight: 600 !important;
/* Make text bolder for better readability */
text-shadow: none !important;
/* Remove any text shadow */
}

/* Метка "Недействителен" (красная) — для списка invalidKeys */
#invalidKeys li span.bg-danger-50.text-danger-600 {
background-color: rgba(239, 68, 68, 0.08) !important;
/* Более светлый фон */
color: #f87171 !important;
/* Более светлый красный текст */
border: 1px solid rgba(239, 68, 68, 0.15);
/* Более светлая рамка */
font-weight: 600 !important;
/* Жирный шрифт */
}

/* Remove border from the last row's cells in API Call Details Modal table */
#apiCallDetailsContent table tr:last-child td {
border-bottom: none !important;
}

/* Restore success/failure status colors and icon colors within the API call details table */
#apiCallDetailsContent table td span[class*="text-success"],
#apiCallDetailsContent table td span[class*="success"] {
color: #6ee7b7 !important;
/* Theme success green */
}

#apiCallDetailsContent table td span[class*="text-success"] i,
#apiCallDetailsContent table td span[class*="success"] i {
color: #6ee7b7 !important;
}

#apiCallDetailsContent table td span[class*="text-danger"],
#apiCallDetailsContent table td span[class*="failure"],
#apiCallDetailsContent table td span[class*="danger"] {
color: #fca5b3 !important;
/* Theme failure red */
}

#apiCallDetailsContent table td span[class*="text-danger"] i,
#apiCallDetailsContent table td span[class*="failure"] i,
#apiCallDetailsContent table td span[class*="danger"] i {
color: #fca5b3 !important;
}

/* End of API Call Details Modal Specific Styling Adjustments */

/* Стили выпадающего меню */
.dropdown-menu {
position: absolute;
top: 100%;
right: 0;
background-color: rgba(255, 255, 255, 0.98);
border: 1px solid rgba(0, 0, 0, 0.08);
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);
min-width: 200px;
z-index: 1000;
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: all 0.2s ease-in-out;
}

.dropdown-menu.show {
opacity: 1;
visibility: visible;
transform: translateY(0);
}

.dropdown-item {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem 1rem;
color: #374151;
text-decoration: none;
transition: all 0.2s ease-in-out;
cursor: pointer;
border: none;
background: none;
width: 100%;
text-align: left;
font-size: 0.875rem;
}

.dropdown-item:hover {
background-color: rgba(59, 130, 246, 0.1);
color: #3b82f6;
}

.dropdown-item:first-child {
border-top-left-radius: 0.5rem;
border-top-right-radius: 0.5rem;
}

.dropdown-item:last-child {
border-bottom-left-radius: 0.5rem;
border-bottom-right-radius: 0.5rem;
}

.dropdown-item i {
width: 1rem;
text-align: center;
}

.dropdown-toggle {
position: relative;
}
/* End of page specific styles */


/* templates/error_logs.html */
/* error_logs.html specific styles */
.styled-table th {
position: sticky;
top: 0;
background-color: rgba(249, 250, 251, 0.95) !important;
/* light gray header */
color: #374151 !important;
/* dark gray text */
z-index: 10;
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.styled-table tbody tr:hover {
background-color: rgba(59, 130, 246, 0.05) !important;
/* light blue hover */
}

.styled-table td {
padding: 12px 20px;
vertical-align: middle;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 250px;
color: #374151;
/* theming: table cell text (gray-700) */
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
/* light theme: cell border */
}

.styled-table td:nth-child(4) {
white-space: nowrap;
}

.btn-view-details {
background-color: #3b82f6 !important;
/* blue-600 for light theme */
color: #ffffff !important;
/* white text */
padding: 6px 12px;
border-radius: 6px;
font-weight: 500;
transition: all 0.2s ease-in-out;
border: 1px solid #2563eb !important;
/* blue-700 border */
}

.btn-view-details:hover {
background-color: #2563eb !important;
/* blue-700 on hover */
color: #ffffff !important;
/* white text on hover */
box-shadow: 0 4px 8px rgba(59, 130, 246, 0.3) !important;
/* blue shadow */
transform: translateY(-1px) !important;
/* slight lift effect */
}

@media (max-width: 768px) {
.search-container {
grid-template-columns: 1fr;
}

/* Макет основного контейнера для мобильных устройств */
.mobile-buttons-container {
display: flex !important;
flex-direction: column !important;
gap: 1rem !important;
align-items: stretch !important;
width: 100% !important;
padding: 0 !important;
margin: 0 !important;
}

/* 移动端搜索控件布局优化 */
.mobile-search-controls {
grid-template-columns: 1fr !important;
gap: 0.75rem !important;
width: 100% !important;
margin-bottom: 0.5rem !important;
}

/* 按钮容器在移动端的布局 */
.buttons-container-responsive {
display: flex !important;
flex-direction: column !important;
gap: 0.5rem !important;
width: 100% !important;
align-items: stretch !important;
justify-content: stretch !important;
}

/* 移动端所有按钮样式 */
.buttons-container-responsive button {
width: 100% !important;
max-width: 100% !important;
justify-content: center !important;
text-align: center !important;
min-width: 0 !important;
flex-shrink: 0 !important;
box-sizing: border-box !important;
padding: 0.5rem 1rem !important;
font-size: 0.875rem !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
}

/* 中等屏幕优化 */
@media (max-width: 1024px) and (min-width: 769px) {
.buttons-container-responsive {
flex-wrap: wrap !important;
justify-content: center !important;
}

.buttons-container-responsive button {
flex-shrink: 1 !important;
min-width: 0 !important;
padding-left: 0.75rem !important;
padding-right: 0.75rem !important;
}
}

/* 小屏幕(手机)特殊优化 - 确保按钮在边框内 */
@media (max-width: 640px) {

/* 强制重写主容器布局 */
.mobile-buttons-container {
display: flex !important;
flex-direction: column !important;
width: 100% !important;
padding: 0 !important;
margin: 0 !important;
gap: 1rem !important;
overflow: visible !important;
}

/* 搜索区域在移动端占满宽度 */
.mobile-search-controls {
width: 100% !important;
box-sizing: border-box !important;
}

/* 按钮区域完全重新布局 */
.buttons-container-responsive {
display: flex !important;
flex-direction: column !important;
width: 100% !important;
max-width: 100% !important;
gap: 0.5rem !important;
padding: 0 !important;
margin: 0 !important;
box-sizing: border-box !important;
overflow: visible !important;
}

/* 所有按钮统一样式 */
.buttons-container-responsive button {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
padding: 0.5rem 1rem !important;
margin: 0 !important;
font-size: 0.875rem !important;
line-height: 1.25rem !important;
border-radius: 0.5rem !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
flex-shrink: 0 !important;
}

/* 特别针对清空全部按钮 */
#deleteAllLogsBtn {
background-color: #f87171 !important;
border: 1px solid #f87171 !important;
}

#deleteAllLogsBtn:hover {
background-color: #ef4444 !important;
border: 1px solid #ef4444 !important;
}

/* 确保容器不会溢出父级 */
.mobile-buttons-container,
.mobile-buttons-container>*,
.buttons-container-responsive,
.buttons-container-responsive>* {
max-width: 100% !important;
box-sizing: border-box !important;
}

/* 额外的安全边距控制 */
.mobile-buttons-container .grid {
padding-left: 0 !important;
padding-right: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
}

/* 确保主内容区域有适当的内边距 */
.rounded-xl.p-6 {
padding-left: 1rem !important;
padding-right: 1rem !important;
}
}

/* 超小屏幕额外优化 */
@media (max-width: 480px) {
.mobile-buttons-container {
gap: 0.75rem !important;
}

.buttons-container-responsive {
gap: 0.4rem !important;
}

.buttons-container-responsive button {
padding: 0.4rem 0.8rem !important;
font-size: 0.8rem !important;
}

/* 主容器内边距进一步缩小 */
.rounded-xl.p-6 {
padding-left: 0.75rem !important;
padding-right: 0.75rem !important;
}

/* 确保清空全部按钮文字不会太挤 */
#deleteAllLogsBtn i {
margin-right: 0.25rem !important;
}
}

input[type="text"],
input[type="datetime-local"],
select,
button {
height: 36px !important;
}

.form-input-themed {
background-color: rgba(255, 255, 255, 0.95) !important;
border: 1px solid rgba(0, 0, 0, 0.12) !important;
color: #374151 !important;
/* gray-700 */
box-shadow: none !important;
outline: none !important;
}

input[type="datetime-local"],
select#pageSize {
background-color: rgba(255, 255, 255, 0.95) !important;
border: 1px solid rgba(0, 0, 0, 0.12) !important;
color: #374151 !important;
/* gray-700 */
box-shadow: none !important;
outline: none !important;
}

.form-input-themed::placeholder,
input[type="datetime-local"]::placeholder {
color: #9ca3af !important;
/* gray-400 */
}

.form-input-themed:focus,
input[type="datetime-local"]:focus,
select#pageSize:focus {
border-color: #3b82f6 !important;
/* blue-500 */
box-shadow: none !important;
/* 移除focus阴影 */
outline: none !important;
}

select#pageSize {
/* Light theme pagination dropdown styling */
background-color: rgba(255, 255, 255, 0.95) !important;
border: 1px solid rgba(0, 0, 0, 0.12) !important;
color: #374151 !important;
/* gray-700 */
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") !important;
appearance: none !important;
padding: 0.5rem 2.5rem 0.5rem 0.75rem !important;
background-repeat: no-repeat !important;
background-position: right 0.6rem center !important;
background-size: 1.2em 1.2em !important;
border-radius: 0.375rem !important;
font-weight: 500 !important;
height: auto !important;
min-height: 2.25rem !important;
/* 36px equivalent */
line-height: 1.25 !important;
display: inline-flex !important;
align-items: center !important;
vertical-align: middle !important;
box-shadow: none !important;
/* 移除默认阴影 */
cursor: pointer !important;
}

select#pageSize:focus {
border-color: #3b82f6 !important;
/* blue-500 */
box-shadow: none !important;
/* 移除focus阴影 */
outline: none !important;
}

select#pageSize option {
background-color: rgba(255, 255, 255, 0.98) !important;
color: #374151 !important;
/* gray-700 */
padding: 8px !important;
font-weight: 500 !important;
}

.date-range-container {
display: flex;
align-items: center;
gap: 0.5rem;
}

@media (max-width: 640px) {
input[type="datetime-local"] {
min-width: 0;
width: 100%;
}
}

label {
color: #e2e8f0 !important;
/* Light gray/white for labels */
font-weight: 500;
}

/* 导航链接悬停样式 (从 config_editor.html 复制) */
.nav-link {
transition: all 0.2s ease-in-out;
}

.nav-link:hover {
background-color: rgba(59, 130, 246, 0.1) !important;
/* blue-500 light */
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Fix all purple backgrounds to light theme */
.rounded-2xl[style*="background-color: rgba(80, 60, 160"],
.rounded-xl[style*="background-color: rgba(70, 50, 150"] {
background-color: rgba(255, 255, 255, 0.95) !important;
border-color: rgba(0, 0, 0, 0.08) !important;
}

/* Fix navigation styling */
.nav-link {
background-color: rgba(229, 231, 235, 0.8) !important;
/* gray-200 */
color: #374151 !important;
/* gray-700 */
transition: all 0.2s ease-in-out;
position: relative;
z-index: 1;
/* 确保不会遮挡重要内容 */
}

.nav-link:hover {
background-color: rgba(59, 130, 246, 0.1) !important;
/* blue-500 light */
transform: scale(1.02);
/* 使用缩放代替向上移动 */
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
/* 增强阴影效果 */
}

/* 导航按钮容器样式 - 为悬停效果预留空间 */
.nav-buttons-container {
padding-top: 0.5rem;
/* 为悬停效果预留上方空间 */
padding-bottom: 0.75rem;
/* 为悬停效果预留下方空间 */
}

/* 主导航按钮的优化悬停效果 */
.main-nav-btn:hover {
transform: scale(1.02) !important;
/* 使用缩放代替向上移动 */
box-shadow: 0 8px 16px rgba(59, 130, 246, 0.3) !important;
/* 蓝色阴影 */
}

.bg-violet-600 {
background-color: #3b82f6 !important;
/* blue-500 */
}

/* Fix page title gradient */
.text-transparent.bg-clip-text.bg-gradient-to-r.from-violet-400.to-pink-400 {
background: none !important;
color: #1f2937 !important;
/* gray-800 */
-webkit-background-clip: unset !important;
background-clip: unset !important;
}

/* Fix section headings */
.text-gray-100 {
color: #1f2937 !important;
/* gray-800 */
}

.border-violet-300 {
border-color: #d1d5db !important;
/* gray-300 */
}

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

/* Fix text colors for light theme */
.pagination-text,
.text-gray-300 {
color: #374151 !important;
/* dark gray for light theme */
font-weight: 500;
}

/* Fix button colors */
.bg-violet-600,
.bg-violet-700 {
background-color: #3b82f6 !important;
/* blue-500 - light blue */
}

.hover\\:bg-violet-700:hover {
background-color: #2563eb !important;
/* blue-600 - darker light blue */
}

/* Override blue buttons to light blue */
.bg-blue-600,
button.bg-blue-600 {
background-color: #3b82f6 !important;
/* blue-500 - light blue */
}

.bg-blue-600:hover,
button.bg-blue-600:hover,
.hover\\:bg-blue-700:hover {
background-color: #2563eb !important;
/* blue-600 - darker light blue */
}

/* Override red buttons to bright light red */
.bg-red-600,
button.bg-red-600,
.bg-red-700,
button.bg-red-700,
.bg-red-800,
button.bg-red-800 {
background-color: #f87171 !important;
/* red-400 - bright light red */
}

.bg-red-600:hover,
button.bg-red-600:hover,
.bg-red-700:hover,
button.bg-red-700:hover,
.bg-red-800:hover,
button.bg-red-800:hover,
.hover\\:bg-red-700:hover,
.hover\\:bg-red-800:hover {
background-color: #ef4444 !important;
/* red-500 - darker bright light red */
}

/* Fix form elements */
.text-violet-500 {
color: #3b82f6 !important;
/* blue-500 */
}

.focus\\:ring-violet-500:focus {
--tw-ring-color: rgba(59, 130, 246, 0.2) !important;
}

.focus\\:border-violet-400:focus {
border-color: #3b82f6 !important;
/* blue-500 */
}

/* Fix loading indicator */
.border-violet-400 {
border-color: #3b82f6 !important;
/* blue-500 */
}

/* New Pagination Styles (inspired by keys_status.html) */
ul.pagination a {
/* Targets the <a> tags directly within ul.pagination */
  display: inline-flex;
  /* Consistent with flex from addPaginationLink */
  align-items: center;
  justify-content: center;
  /* Tailwind classes from JS will handle padding, border-radius, font-size, transition */
  /* Defaults for non-active, non-disabled, non-hover buttons */
  background-color: rgba(255, 255, 255, 0.9) !important;
  color: #374151 !important;
  /* gray-700 */
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  text-shadow: none;
  min-width: 36px;
  /* Retain from original error_logs for consistency */
  text-align: center;
  /* Retain from original error_logs for consistency */
  /* Ensure base transition if not fully handled by JS's Tailwind classes */
  transition: background-color 0.15s ease-in-out,
  border-color 0.15s ease-in-out, color 0.15s ease-in-out;
  }

  ul.pagination a:hover:not(.active):not(.disabled) {
  /* Hover for non-active, non-disabled */
  background-color: rgba(229, 231, 235, 1) !important;
  /* gray-200 */
  border-color: rgba(0, 0, 0, 0.12) !important;
  color: #374151 !important;
  }

  ul.pagination a.active {
  /* Active state */
  background-color: #3b82f6 !important;
  /* blue-500 */
  border-color: #2563eb !important;
  /* blue-600 */
  color: #ffffff !important;
  /* Ensure text is white */
  font-weight: 600;
  /* Make active page number bolder */
  cursor: default;
  }

  ul.pagination a.disabled {
  /* Disabled state for '...' or prev/next unavailable */
  background-color: rgba(249, 250, 251, 0.5) !important;
  /* light gray */
  color: rgba(156, 163, 175, 0.8) !important;
  /* gray-400 */
  border-color: rgba(0, 0, 0, 0.04) !important;
  cursor: not-allowed;
  pointer-events: none;
  text-shadow: none;
  }

  /* Fix modal styling - comprehensive override */
  .modal .w-full.max-w-6xl[style*="background-color: rgba(70, 50, 150"],
  .modal .w-full.max-w-md[style*="background-color: rgba(70, 50, 150"] {
  background-color: rgba(255, 255, 255, 0.98) !important;
  color: #374151 !important;
  /* gray-700 */
  border-color: rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
  }

  /* Fix modal titles */
  .modal .text-gray-100,
  .modal h2.text-gray-100 {
  color: #1f2937 !important;
  /* gray-800 */
  font-weight: 600 !important;
  }

  /* Fix modal section labels */
  .modal .text-violet-200,
  .modal h6.text-violet-200 {
  color: #3b82f6 !important;
  /* blue-500 */
  font-weight: 600 !important;
  }

  /* Fix modal close buttons */
  .modal .text-gray-300 {
  color: #6b7280 !important;
  /* gray-500 */
  }

  .modal .text-gray-300:hover {
  color: #374151 !important;
  /* gray-700 */
  }

  /* Fix modal content areas with purple backgrounds */
  .modal [style*="background-color: rgba(80, 60, 160"] {
  background-color: rgba(249, 250, 251, 0.95) !important;
  /* gray-50 */
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  }

  /* Fix modal pre and code text */
  .modal pre,
  .modal code {
  background-color: rgba(243, 244, 246, 0.95) !important;
  /* gray-100 */
  color: #374151 !important;
  /* gray-700 */
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  }

  /* Fix modal text content */
  .modal .text-gray-200,
  .modal p.text-gray-200 {
  color: #374151 !important;
  /* gray-700 */
  }

  /* Fix modal error text */
  .modal .text-red-300 {
  color: #dc2626 !important;
  /* red-600 */
  font-weight: 500 !important;
  }

  /* Fix modal button styling */
  .modal .bg-gray-500,
  .modal button.bg-gray-500 {
  background-color: #6b7280 !important;
  /* gray-500 */
  color: #ffffff !important;
  border: 1px solid #4b5563 !important;
  /* gray-600 */
  }

  .modal .bg-gray-500:hover,
  .modal button.bg-gray-500:hover {
  background-color: #4b5563 !important;
  /* gray-600 */
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
  }

  /* Fix modal red/danger buttons */
  .modal .bg-red-600,
  .modal button.bg-red-600 {
  background-color: #dc2626 !important;
  /* red-600 */
  color: #ffffff !important;
  border: 1px solid #b91c1c !important;
  /* red-700 */
  }

  .modal .bg-red-600:hover,
  .modal button.bg-red-600:hover {
  background-color: #b91c1c !important;
  /* red-700 */
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
  }

  /* Fix modal copy buttons */
  .modal .copy-btn {
  background-color: rgba(107, 114, 128, 0.8) !important;
  /* gray-500 with opacity */
  color: #ffffff !important;
  border: 1px solid rgba(75, 85, 99, 0.8) !important;
  /* gray-600 with opacity */
  }

  .modal .copy-btn:hover {
  background-color: rgba(75, 85, 99, 0.9) !important;
  /* gray-600 with opacity */
  transform: translateY(-1px) !important;
  }

  /* 表格内容文字颜色修复 */
  .styled-table tbody td {
  color: #374151 !important;
  /* gray-700 for light theme */
  }

  .styled-table tbody tr:hover td {
  color: #1f2937 !important;
  /* gray-800 for better contrast on hover */
  }

  /* 表格头部文字颜色 */
  .styled-table thead th {
  color: #374151 !important;
  /* gray-700 for light theme */
  }

  /* 状态指示器文字颜色 */
  .text-gray-300 {
  color: #6b7280 !important;
  /* gray-500 for light theme */
  }

  .text-gray-400 {
  color: #9ca3af !important;
  /* gray-400 for light theme */
  }

  /* 分页文字颜色和对齐 */
  .pagination-text {
  color: #374151 !important;
  /* gray-700 for light theme */
  display: inline-flex !important;
  align-items: center !important;
  line-height: 1.25 !important;
  vertical-align: middle !important;
  }

  /* 分页容器对齐优化 */
  .pagination-container {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  }

  .pagination-container>* {
  display: inline-flex !important;
  align-items: center !important;
  vertical-align: middle !important;
  }

  /* Comprehensive button text color fixes */
  .bg-blue-500,
  .bg-blue-600,
  .bg-blue-700,
  .bg-red-500,
  .bg-red-600,
  .bg-red-700,
  .bg-red-800,
  .bg-green-500,
  .bg-green-600,
  .bg-green-700,
  .bg-sky-500,
  .bg-sky-600,
  .bg-sky-700,
  .bg-purple-500,
  .bg-purple-600,
  .bg-purple-700,
  .bg-violet-500,
  .bg-violet-600,
  .bg-violet-700 {
  color: #ffffff !important;
  }

  /* Ensure button children inherit white text */
  .bg-blue-500 *,
  .bg-blue-600 *,
  .bg-blue-700 *,
  .bg-red-500 *,
  .bg-red-600 *,
  .bg-red-700 *,
  .bg-red-800 *,
  .bg-green-500 *,
  .bg-green-600 *,
  .bg-green-700 *,
  .bg-sky-500 *,
  .bg-sky-600 *,
  .bg-sky-700 *,
  .bg-purple-500 *,
  .bg-purple-600 *,
  .bg-purple-700 *,
  .bg-violet-500 *,
  .bg-violet-600 *,
  .bg-violet-700 * {
  color: inherit !important;
  }

  /* Fix primary color focus states - convert purple to blue */
  .focus\\:border-primary-500:focus,
  .focus\\:border-primary-600:focus {
  border-color: #3b82f6 !important;
  /* blue-500 */
  }

  .focus\\:ring-primary-200:focus,
  .focus\\:ring-primary-300:focus {
  --tw-ring-color: rgba(59, 130, 246, 0.2) !important;
  /* blue-500 with opacity */
  }

  /* Override any remaining primary colors */
  .text-primary-600,
  .text-primary-500 {
  color: #3b82f6 !important;
  /* blue-500 */
  }

  .bg-primary-600,
  .bg-primary-500 {
  background-color: #3b82f6 !important;
  /* blue-500 */
  }

  .bg-primary-700:hover,
  .hover\\:bg-primary-700:hover {
  background-color: #2563eb !important;
  /* blue-600 */
  }

  /* Fix modal button colors - specific overrides for error_logs.html */
  /* Red buttons in modals */
  .bg-red-600,
  button.bg-red-600,
  .bg-red-700,
  button.bg-red-700 {
  background-color: #f87171 !important;
  /* red-400 - bright light red */
  }

  .bg-red-600:hover,
  button.bg-red-600:hover,
  .bg-red-700:hover,
  button.bg-red-700:hover,
  .hover\\:bg-red-700:hover {
  background-color: #ef4444 !important;
  /* red-500 - darker bright light red */
  }

  /* Gray buttons in modals (cancel buttons) */
  .bg-gray-500,
  button.bg-gray-500,
  .bg-gray-600,
  button.bg-gray-600 {
  background-color: #e5e7eb !important;
  /* gray-200 - light gray */
  color: #374151 !important;
  /* gray-700 - dark text for contrast */
  }

  .bg-gray-500:hover,
  button.bg-gray-500:hover,
  .bg-gray-600:hover,
  button.bg-gray-600:hover,
  .hover\\:bg-gray-600:hover {
  background-color: #d1d5db !important;
  /* gray-300 - darker light gray */
  color: #374151 !important;
  /* gray-700 - dark text for contrast */
  }

  /* Blue buttons in modals */
  .bg-blue-600,
  button.bg-blue-600,
  .bg-blue-700,
  button.bg-blue-700 {
  background-color: #3b82f6 !important;
  /* blue-500 - light blue */
  }

  .bg-blue-600:hover,
  button.bg-blue-600:hover,
  .bg-blue-700:hover,
  button.bg-blue-700:hover,
  .hover\\:bg-blue-700:hover {
  background-color: #2563eb !important;
  /* blue-600 - darker light blue */
  }

  /* Sky buttons in modals */
  .bg-sky-600,
  button.bg-sky-600,
  .bg-sky-700,
  button.bg-sky-700 {
  background-color: #3b82f6 !important;
  /* blue-500 - light blue (change sky to light blue) */
  }

  .bg-sky-600:hover,
  button.bg-sky-600:hover,
  .bg-sky-700:hover,
  button.bg-sky-700:hover,
  .hover\\:bg-sky-700:hover {
  background-color: #2563eb !important;
  /* blue-600 - darker light blue */
  }

  /* Specific fixes for delete confirmation modal buttons */
  #deleteConfirmModal .bg-red-600,
  #deleteConfirmModal button.bg-red-600 {
  background-color: #f87171 !important;
  /* red-400 - bright light red */
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  }

  #deleteConfirmModal .bg-red-600:hover,
  #deleteConfirmModal button.bg-red-600:hover {
  background-color: #ef4444 !important;
  /* red-500 - darker bright light red */
  }

  #deleteConfirmModal .bg-gray-500,
  #deleteConfirmModal button.bg-gray-500 {
  background-color: #e5e7eb !important;
  /* gray-200 - light gray */
  color: #374151 !important;
  /* gray-700 - dark text for contrast */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  }

  #deleteConfirmModal .bg-gray-500:hover,
  #deleteConfirmModal button.bg-gray-500:hover {
  background-color: #d1d5db !important;
  /* gray-300 - darker light gray */
  color: #374151 !important;
  /* gray-700 - dark text for contrast */
  }

  /* Ensure all modal buttons have proper text centering */
  .modal button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  }
  /* End of page specific styles */

/* Admin header layout */
.admin-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: nowrap;
}

.admin-header-title {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  text-align: left;
  font-size: 2.25rem;
  font-weight: 800;
  color: #1f2937;
  line-height: 1.1;
  min-width: 0;
  flex: 1 1 auto;
}

.admin-header-title span {
  display: inline-block;
}

.admin-header-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-left: auto;
  flex-shrink: 0;
}

@media (max-width: 900px) {
  .admin-header {
    flex-wrap: wrap;
  }

  .admin-header-title {
    font-size: 1.6rem;
  }

  .admin-header-actions {
    width: 100%;
    justify-content: flex-start;
  }
}

/* Unified navigation overrides */
.nav-buttons-container {
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding-bottom: 0.25rem;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.nav-buttons-container::-webkit-scrollbar {
  height: 6px;
}

.nav-buttons-container::-webkit-scrollbar-thumb {
  background-color: rgba(148, 163, 184, 0.5);
  border-radius: 999px;
}

.nav-link {
  background-color: rgba(229, 231, 235, 0.8);
  color: #374151;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: none;
}

.nav-link:hover {
  background-color: rgba(59, 130, 246, 0.1);
  color: #1f2937;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.12);
  transform: translateY(-1px);
}

.nav-link.is-active {
  background-color: #3b82f6;
  color: #ffffff;
  border-color: transparent;
  box-shadow: 0 8px 16px rgba(59, 130, 246, 0.3);
}

.nav-link.is-active:hover {
  background-color: #2563eb;
}

/* Animation delay helpers */
.anim-delay-100 {
  animation-delay: 0.1s;
}

.anim-delay-200 {
  animation-delay: 0.2s;
}

.anim-delay-400 {
  animation-delay: 0.4s;
}

/* Default progress bar width for JS-driven updates */
.progress-bar {
  width: 0%;
}

/* Consistent form control sizing */
.form-input-themed,
.form-select-themed,
.form-input,
.form-select,
input[type="text"],
input[type="number"],
input[type="password"],
input[type="datetime-local"],
select {
  min-height: 40px;
}

/* Consistent button sizing for primary actions */
.btn-primary,
.btn-secondary,
.btn-danger,
.btn-success,
.btn-info,
.action-btn {
  min-height: 40px;
  transition: all 0.2s ease;
}