/* Dark appearance for KSWAN dashboard (Admin + App) and auth/profile pages.
   Activated via <html data-bs-theme="dark"> set by theme.js. */

html[data-bs-theme="dark"] {
  --kswan-primary: #3d8fd4;
  --kswan-primary-dark: #2a6fa8;
  --kswan-primary-light: #1a2d40;
  --kswan-accent: #2bb896;
  --kswan-ink: #e8eef4;
  --kswan-ink-soft: #9aabbc;
  --kswan-border: #2d3a48;
  --kswan-bg: #0f1419;
  --kswan-surface: #1a222c;
  --kswan-green: #2bb896;
  --kswan-green-bg: #123628;
  --kswan-amber: #fdb022;
  --kswan-amber-bg: #3a2a10;
  --kswan-red: #f97066;
  --kswan-red-bg: #3b1a18;
  --kswan-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 4px 16px rgba(0, 0, 0, 0.35);

  --auth-primary: #3d8fd4;
  --auth-primary-dark: #2a6fa8;
  --auth-accent: #5baef0;
  --auth-bg: #0f1419;
  --auth-surface: #1a222c;
  --auth-text: #e8eef4;
  --auth-muted: #9aabbc;
  --auth-border: #2d3a48;
  --auth-danger: #f97066;
  --auth-danger-bg: #3b1a18;
  --auth-success-bg: #123628;
  --auth-warning-bg: #3a2a10;
  --auth-info-bg: #1a2d40;
  --auth-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
}

html[data-bs-theme="dark"] body,
html[data-bs-theme="dark"] body.kswan-app,
html[data-bs-theme="dark"] body.kswan-has-sidebar,
html[data-bs-theme="dark"] body.kswan-auth {
  background: var(--kswan-bg);
  color: var(--kswan-ink);
}

html[data-bs-theme="dark"] .kswan-sidebar-inner,
html[data-bs-theme="dark"] .kswan-mobilebar,
html[data-bs-theme="dark"] .kswan-card,
html[data-bs-theme="dark"] .card,
html[data-bs-theme="dark"] .modal-content,
html[data-bs-theme="dark"] .dropdown-menu,
html[data-bs-theme="dark"] .offcanvas,
html[data-bs-theme="dark"] .list-group-item,
html[data-bs-theme="dark"] .auth-card,
html[data-bs-theme="dark"] .auth-spinner-card {
  background: var(--kswan-surface) !important;
  color: var(--kswan-ink);
  border-color: var(--kswan-border) !important;
}

html[data-bs-theme="dark"] .kswan-sidebar-brand {
  background: linear-gradient(180deg, var(--kswan-primary-light) 0%, var(--kswan-surface) 100%);
  border-bottom-color: var(--kswan-border);
}

html[data-bs-theme="dark"] .kswan-sidebar-brand .title {
  color: var(--kswan-primary);
}

html[data-bs-theme="dark"] .kswan-sidebar-brand .sub,
html[data-bs-theme="dark"] .kswan-nav-section,
html[data-bs-theme="dark"] .auth-muted,
html[data-bs-theme="dark"] .auth-note,
html[data-bs-theme="dark"] .text-muted {
  color: var(--kswan-ink-soft) !important;
}

html[data-bs-theme="dark"] .kswan-nav-link {
  color: var(--kswan-ink);
}

html[data-bs-theme="dark"] .kswan-nav-link:hover,
html[data-bs-theme="dark"] .kswan-nav-link.active {
  background: var(--kswan-primary-light);
  color: var(--kswan-primary);
}

html[data-bs-theme="dark"] .kswan-footer,
html[data-bs-theme="dark"] .table,
html[data-bs-theme="dark"] .table > :not(caption) > * > * {
  color: var(--kswan-ink);
  border-color: var(--kswan-border);
}

html[data-bs-theme="dark"] .table thead th,
html[data-bs-theme="dark"] .table-light,
html[data-bs-theme="dark"] .bg-light,
html[data-bs-theme="dark"] .bg-white {
  background-color: #141b24 !important;
  color: var(--kswan-ink) !important;
  border-color: var(--kswan-border) !important;
}

html[data-bs-theme="dark"] .form-control,
html[data-bs-theme="dark"] .form-select,
html[data-bs-theme="dark"] .auth-input,
html[data-bs-theme="dark"] input.auth-input {
  background-color: #121820;
  border-color: var(--kswan-border);
  color: var(--kswan-ink);
}

html[data-bs-theme="dark"] .form-control:focus,
html[data-bs-theme="dark"] .form-select:focus,
html[data-bs-theme="dark"] .auth-input:focus {
  background-color: #121820;
  border-color: var(--kswan-primary);
  color: var(--kswan-ink);
  box-shadow: 0 0 0 0.2rem rgba(61, 143, 212, 0.25);
}

html[data-bs-theme="dark"] .form-control::placeholder,
html[data-bs-theme="dark"] .auth-input::placeholder {
  color: var(--kswan-ink-soft);
  opacity: 0.85;
}

html[data-bs-theme="dark"] .text-dark,
html[data-bs-theme="dark"] .fw-semibold.text-dark {
  color: var(--kswan-ink) !important;
}

html[data-bs-theme="dark"] .border,
html[data-bs-theme="dark"] .border-bottom,
html[data-bs-theme="dark"] .border-top,
html[data-bs-theme="dark"] hr {
  border-color: var(--kswan-border) !important;
}

html[data-bs-theme="dark"] .auth-section {
  border-color: var(--kswan-border);
}

html[data-bs-theme="dark"] .auth-dl dt {
  color: var(--kswan-ink-soft);
}

html[data-bs-theme="dark"] .auth-dl dd {
  color: var(--kswan-ink);
}

html[data-bs-theme="dark"] .auth-links a {
  color: var(--kswan-primary);
}

html[data-bs-theme="dark"] .auth-emblem-ring {
  background: #fff;
}

/* Appearance picker on Profile */
.kswan-theme-picker {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
}

.kswan-theme-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding: 0.85rem 0.5rem;
  border: 1px solid var(--kswan-border, var(--auth-border, #d0d5dd));
  border-radius: 12px;
  background: var(--kswan-surface, var(--auth-surface, #fff));
  color: var(--kswan-ink, var(--auth-text, #122033));
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  font-size: 0.9rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.kswan-theme-option i {
  font-size: 1.25rem;
  color: var(--kswan-primary, var(--auth-primary, #0b4f8a));
}

.kswan-theme-option:hover {
  border-color: var(--kswan-primary, var(--auth-primary, #0b4f8a));
}

.kswan-theme-option.is-selected {
  border-color: var(--kswan-primary, var(--auth-primary, #0b4f8a));
  box-shadow: 0 0 0 2px rgba(11, 95, 165, 0.22);
  background: var(--kswan-primary-light, var(--auth-info-bg, #e8f1fb));
}

.kswan-theme-option small {
  font-weight: 500;
  font-size: 0.72rem;
  color: var(--kswan-ink-soft, var(--auth-muted, #667085));
}

@media (max-width: 420px) {
  .kswan-theme-picker {
    grid-template-columns: 1fr;
  }
}

/* App language picker (Profile) — symbol tiles */
.auth-lang-picker {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
}

.auth-lang-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  padding: 0.9rem 0.5rem;
  border: 1px solid var(--kswan-border, var(--auth-border, #d0d5dd));
  border-radius: 14px;
  background: var(--kswan-surface, var(--auth-surface, #fff));
  color: var(--kswan-ink, var(--auth-text, #122033));
  cursor: pointer;
  font: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.auth-lang-option:hover {
  border-color: var(--kswan-primary, var(--auth-primary, #0b4f8a));
}

.auth-lang-option.is-active {
  border-color: var(--kswan-primary, var(--auth-primary, #0b4f8a));
  box-shadow: 0 0 0 2px rgba(11, 95, 165, 0.22);
  background: var(--kswan-primary-light, var(--auth-info-bg, #e8f1fb));
}

.auth-lang-symbol {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 1.05rem;
  color: #fff;
  background: var(--kswan-primary, var(--auth-primary, #0b4f8a));
}

.auth-lang-label {
  font-weight: 700;
  font-size: 0.95rem;
}

.auth-lang-option small {
  font-weight: 500;
  font-size: 0.72rem;
  color: var(--kswan-ink-soft, var(--auth-muted, #667085));
}
