/* ============================================
   CHOSEN CLARITY - DARK THEME
   ============================================ */

/* Apply dark theme when html has dark-style class */
html.dark-style {
  color-scheme: dark;
  --bs-body-bg: transparent !important;
  --bs-body-bg-rgb: 26, 11, 46 !important;
  --bs-body-color: #c5c7e0 !important;
  --bs-body-color-rgb: 197, 199, 224 !important;
}

html.dark-style,
html.dark-style body {
  background: linear-gradient(135deg, #1a0b2e 0%, #16213e 50%, #0f3460 100%) !important;
  background-attachment: fixed !important;
  min-height: 100vh !important;
}

/* ============================================
   CORE COLORS & BACKGROUNDS
   ============================================ */
.dark-style body {
  background: linear-gradient(135deg, #1a0b2e 0%, #16213e 50%, #0f3460 100%) !important;
  background-attachment: fixed !important;
  color: #c5c7e0 !important;
  min-height: 100vh;
}

.dark-style .bg-body {
  background: transparent !important;
}

/* Layout & Menu */
.dark-style .layout-menu,
.dark-style .bg-menu-theme {
  background-color: #2b2c40 !important;
}

.dark-style .menu-inner-shadow {
  background: linear-gradient(#2b2c40 40%, rgba(43, 44, 64, 0.1) 95%, rgba(43, 44, 64, 0.05));
}

.dark-style .layout-page,
.dark-style .content-wrapper {
  background-color: transparent !important;
}

/* Force all containers to be transparent so gradient shows */
.dark-style .layout-wrapper,
.dark-style .container,
.dark-style .container-fluid,
.dark-style .container-xxl,
.dark-style .layout-container,
.dark-style .row {
  background: transparent !important;
  background-color: transparent !important;
}

/* ============================================
   CARDS & CONTAINERS
   ============================================ */
.dark-style .card {
  background-color: #2f3349 !important;
  border-color: #4a4d6d !important;
  box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.4) !important;
}

.dark-style .card-header {
  background-color: transparent !important;
  border-bottom-color: #3b3c56 !important;
}

.dark-style .card-footer {
  background-color: transparent !important;
  border-top-color: #3b3c56 !important;
}

.dark-style .card-title,
.dark-style .card-header h5,
.dark-style .card-header h6 {
  color: #cfd0e6 !important;
}

/* ============================================
   TEXT COLORS
   ============================================ */
.dark-style h1, .dark-style h2, .dark-style h3, 
.dark-style h4, .dark-style h5, .dark-style h6 {
  color: #cfd0e6 !important;
}

.dark-style p,
.dark-style span:not(.badge):not(.btn *),
.dark-style label {
  color: #a3a4cc !important;
}

.dark-style .text-muted {
  color: #7c7e9a !important;
}

.dark-style a:not(.btn):not(.nav-link):not(.dropdown-item) {
  color: #8c8dff !important;
}

.dark-style a:not(.btn):not(.nav-link):not(.dropdown-item):hover {
  color: #a5a6ff !important;
}

/* ============================================
   NAVIGATION & MENU
   ============================================ */
.dark-style .menu-item .menu-link {
  color: #a3a4cc !important;
}

.dark-style .menu-item .menu-link:hover,
.dark-style .menu-item.active > .menu-link {
  background-color: rgba(105, 108, 255, 0.16) !important;
  color: #696cff !important;
}

.dark-style .menu-item.open > .menu-link,
.dark-style .menu-item.active > .menu-link {
  color: #696cff !important;
}

.dark-style .menu-header {
  color: #7c7e9a !important;
}

.dark-style .app-brand-text {
  color: #cfd0e6 !important;
}

/* Nav Pills */
.dark-style .nav-pills .nav-link {
  color: #a3a4cc !important;
}

.dark-style .nav-pills .nav-link.active {
  background: linear-gradient(135deg, #696cff, #5f63f2) !important;
  color: white !important;
}

/* Tabs */
.dark-style .nav-tabs {
  border-bottom-color: #3b3c56 !important;
}

.dark-style .nav-tabs .nav-link {
  color: #a3a4cc !important;
  border-color: transparent !important;
}

.dark-style .nav-tabs .nav-link.active {
  background-color: #2b2c40 !important;
  border-color: #3b3c56 #3b3c56 #2b2c40 !important;
  color: #696cff !important;
}

/* ============================================
   FORMS & INPUTS
   ============================================ */
.dark-style .form-control,
.dark-style .form-select {
  background-color: #2b2c40 !important;
  border-color: #3b3c56 !important;
  color: #cfd0e6 !important;
}

.dark-style .form-control:focus,
.dark-style .form-select:focus {
  background-color: #2b2c40 !important;
  border-color: #696cff !important;
  color: #cfd0e6 !important;
  box-shadow: 0 0 0 0.2rem rgba(105, 108, 255, 0.25) !important;
}

.dark-style .form-control::placeholder {
  color: #6c6d8a !important;
}

.dark-style .form-label {
  color: #a3a4cc !important;
}

.dark-style .form-check-input {
  background-color: #3b3c56 !important;
  border-color: #4b4c66 !important;
}

.dark-style .form-check-input:checked {
  background-color: #696cff !important;
  border-color: #696cff !important;
}

.dark-style .input-group-text {
  background-color: #3b3c56 !important;
  border-color: #3b3c56 !important;
  color: #a3a4cc !important;
}

/* Range inputs */
.dark-style input[type="range"] {
  background: transparent !important;
}

.dark-style input[type="range"]::-webkit-slider-track {
  background: #3b3c56 !important;
}

.dark-style input[type="range"]::-webkit-slider-thumb {
  background: #696cff !important;
}

/* ============================================
   BUTTONS
   ============================================ */
.dark-style .btn-outline-secondary {
  border-color: #4b4c66 !important;
  color: #a3a4cc !important;
}

.dark-style .btn-outline-secondary:hover {
  background-color: #3b3c56 !important;
  border-color: #4b4c66 !important;
  color: #cfd0e6 !important;
}

.dark-style .btn-label-secondary {
  background-color: rgba(133, 146, 163, 0.16) !important;
  color: #8592a3 !important;
}

.dark-style .btn-label-primary {
  background-color: rgba(105, 108, 255, 0.16) !important;
}

/* ============================================
   TABLES
   ============================================ */
.dark-style .table {
  color: #a3a4cc !important;
}

.dark-style .table > :not(caption) > * > * {
  background-color: transparent !important;
  border-bottom-color: #3b3c56 !important;
  color: #a3a4cc !important;
}

.dark-style .table-hover > tbody > tr:hover > * {
  background-color: rgba(105, 108, 255, 0.08) !important;
}

.dark-style .table thead th {
  background-color: #2f3044 !important;
  color: #cfd0e6 !important;
}

.dark-style .table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: rgba(255, 255, 255, 0.02) !important;
}

/* ============================================
   DROPDOWNS
   ============================================ */
.dark-style .dropdown-menu {
  background-color: #2b2c40 !important;
  border-color: #3b3c56 !important;
  box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.4) !important;
}

.dark-style .dropdown-item {
  color: #a3a4cc !important;
}

.dark-style .dropdown-item:hover,
.dark-style .dropdown-item:focus {
  background-color: rgba(105, 108, 255, 0.08) !important;
  color: #696cff !important;
}

.dark-style .dropdown-divider {
  border-top-color: #3b3c56 !important;
}

/* ============================================
   MODALS
   ============================================ */
.dark-style .modal-content {
  background-color: #2b2c40 !important;
  border-color: #3b3c56 !important;
}

.dark-style .modal-header {
  border-bottom-color: #3b3c56 !important;
}

.dark-style .modal-footer {
  border-top-color: #3b3c56 !important;
}

.dark-style .modal-title {
  color: #cfd0e6 !important;
}

.dark-style .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

/* ============================================
   ALERTS
   ============================================ */
.dark-style .alert-secondary {
  background-color: rgba(133, 146, 163, 0.16) !important;
  border-color: rgba(133, 146, 163, 0.3) !important;
  color: #a3a4cc !important;
}

.dark-style .alert-info {
  background-color: rgba(3, 195, 236, 0.16) !important;
  border-color: rgba(3, 195, 236, 0.3) !important;
}

/* ============================================
   BADGES
   ============================================ */
.dark-style .bg-label-secondary {
  background-color: rgba(133, 146, 163, 0.16) !important;
  color: #8592a3 !important;
}

.dark-style .bg-label-primary {
  background-color: rgba(105, 108, 255, 0.16) !important;
}

/* ============================================
   CODE & PRE
   ============================================ */
.dark-style pre,
.dark-style code {
  background-color: #1e1e2d !important;
  color: #e4e6f0 !important;
}

.dark-style .model-id {
  background-color: #3b3c56 !important;
  color: #a3a4cc !important;
}

/* ============================================
   CUSTOM COMPONENTS
   ============================================ */

/* Preview Box */
.dark-style .preview-box {
  background: linear-gradient(135deg, #2b2c40, #232333) !important;
  border-color: #3b3c56 !important;
  color: #a3a4cc !important;
}

/* Suggestion Cards */
.dark-style .suggestion-card .card-header {
  background: linear-gradient(135deg, #2f3044, #2b2c40) !important;
  border-bottom-color: #3b3c56 !important;
}

.dark-style .suggestion-card .card-body.collapse {
  background: #252536 !important;
}

/* Personality Cards */
.dark-style .personality-card:hover {
  box-shadow: 0 4px 12px rgba(105, 108, 255, 0.25) !important;
}

/* AI Icons */
.dark-style .ai-icon.gemini {
  box-shadow: 0 2px 8px rgba(66, 133, 244, 0.3);
}

.dark-style .ai-icon.grok {
  box-shadow: 0 2px 8px rgba(0, 212, 170, 0.3);
}

/* Range Value */
.dark-style .range-value {
  color: #8c8dff !important;
}

/* Setting Label */
.dark-style .setting-label {
  color: #a3a4cc !important;
}

/* Variable Tags */
.dark-style .variable-tag {
  background: linear-gradient(135deg, #696cff, #5f63f2) !important;
}

/* Dividers */
.dark-style .section-divider {
  border-top-color: #3b3c56 !important;
}

.dark-style hr {
  border-color: #3b3c56 !important;
}

/* ============================================
   SCROLLBARS
   ============================================ */
.dark-style ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.dark-style ::-webkit-scrollbar-track {
  background: #232333;
}

.dark-style ::-webkit-scrollbar-thumb {
  background: #4b4c66;
  border-radius: 4px;
}

.dark-style ::-webkit-scrollbar-thumb:hover {
  background: #5b5c76;
}

/* Perfect Scrollbar */
.dark-style .ps__thumb-y {
  background-color: #4b4c66 !important;
}

/* ============================================
   NAVBAR
   ============================================ */
.dark-style .layout-navbar {
  background-color: #2b2c40 !important;
  box-shadow: 0 1px 0 #3b3c56 !important;
}

.dark-style .navbar-nav .nav-link {
  color: #a3a4cc !important;
}

.dark-style .navbar-nav .nav-link:hover {
  color: #696cff !important;
}

/* ============================================
   FOOTER
   ============================================ */
.dark-style .content-footer {
  background-color: transparent !important;
  color: #7c7e9a !important;
}

/* ============================================
   LOADING STATES
   ============================================ */
.dark-style .spinner-border {
  color: #696cff !important;
}

/* ============================================
   API TESTER SPECIFIC
   ============================================ */
.dark-style #imageModelSelector {
  background: #252536 !important;
}

.dark-style #testerResponse {
  background-color: #1e1e2d !important;
  color: #a3a4cc !important;
}

.dark-style #testerResponse pre {
  background-color: transparent !important;
}

/* ============================================
   TOAST NOTIFICATIONS
   ============================================ */
.dark-style .toast {
  background-color: #2b2c40 !important;
  border-color: #3b3c56 !important;
}

.dark-style .toast-header {
  background-color: #2f3044 !important;
  border-bottom-color: #3b3c56 !important;
  color: #cfd0e6 !important;
}

.dark-style .toast-body {
  color: #a3a4cc !important;
}

/* ============================================
   THEME TOGGLE BUTTON
   ============================================ */
.theme-toggle {
  position: fixed;
  bottom: 1.5rem;
  left: 1.5rem;
  z-index: 1080;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, #696cff, #5f63f2);
  color: white;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(105, 108, 255, 0.4);
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
}

.theme-toggle:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 16px rgba(105, 108, 255, 0.5);
}

.dark-style .theme-toggle {
  background: linear-gradient(135deg, #ffab00, #ff9800);
  box-shadow: 0 4px 12px rgba(255, 171, 0, 0.4);
}

.dark-style .theme-toggle:hover {
  box-shadow: 0 6px 16px rgba(255, 171, 0, 0.5);
}

/* Hide icons based on theme */
.theme-toggle .bx-moon {
  display: inline;
}
.theme-toggle .bx-sun {
  display: none;
}
.dark-style .theme-toggle .bx-moon {
  display: none;
}
.dark-style .theme-toggle .bx-sun {
  display: inline;
}

/* ============================================
   SPECIAL OVERRIDES FOR SNEAT TEMPLATE
   ============================================ */
.dark-style [class*="bg-lighter"] {
  background-color: #2f3044 !important;
}

.dark-style .border {
  border-color: #3b3c56 !important;
}

.dark-style .border-top {
  border-top-color: #3b3c56 !important;
}

.dark-style .border-bottom {
  border-bottom-color: #3b3c56 !important;
}

.dark-style .shadow-sm {
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.3) !important;
}

.dark-style .shadow {
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.4) !important;
}

/* ============================================
   FORCE GRADIENT - NUCLEAR OPTION (DARK MODE ONLY)
   Override any Sneat template backgrounds
   ============================================ */
.dark-style body,
.dark-style body.bg-body,
.dark-style .layout-wrapper,
.dark-style .layout-container,
.dark-style .layout-page,
.dark-style .content-wrapper,
.dark-style .container-xxl {
  background: transparent !important;
  background-color: transparent !important;
}

/* Ensure gradient is always visible in dark mode */
html.dark-style::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #1a0b2e 0%, #16213e 50%, #0f3460 100%);
  z-index: -9999;
  pointer-events: none;
}