/* Dark theme (toggled via [data-theme="dark"] on <html>). */

.theme-toggle .fa-sun {
  display: none;
}
[data-theme="dark"] .theme-toggle .fa-moon {
  display: none;
}
[data-theme="dark"] .theme-toggle .fa-sun {
  display: inline;
}

[data-theme="dark"] {
  color-scheme: dark;

  --bg: #111715;
  --surface: #1a221e;
  --surface-2: #232d28;
  --text: #e7efea;
  --text-soft: #9fb0a8;
  --border: #2c3832;

  --accent: #2dd4bf;
  --accent-dark: #5eead4;
  --accent-soft: rgba(45, 212, 191, 0.14);

  --shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);

  --danger: #f87171;
  --danger-soft: rgba(248, 113, 113, 0.14);
  --danger-strong: #a52f22;
  --danger-strong-hover: #c2412f;
  --amber: #fbbf24;
  --warn-soft: rgba(251, 191, 36, 0.14);
  --warn-text: #fcd34d;

  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239fb0a8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");

  --glass-bg: rgb(26, 34, 30);
  --glass-blur: blur(10px);
  --glass-border: rgba(255, 255, 255, 0.06);
}


[data-theme="dark"] .btn {
  color: #0c1311;
}

[data-theme="dark"] .btn:hover {
  color: #0c1311;
}
[data-theme="dark"] .ai-badge,
[data-theme="dark"] .auth-tab.active,
[data-theme="dark"] .page-link.active,
[data-theme="dark"] .badge-accent,
[data-theme="dark"] .nav-avatar,
[data-theme="dark"] .to-top {
  color: #0c1311;
}
[data-theme="dark"] .admin-side-nav a.active {
  color: var(--accent-dark);
}
[data-theme="dark"] .nav-avatar {
  color: #0c1311;
}

[data-theme="dark"] .ql-toolbar .ql-stroke {
  stroke: var(--text-soft);
}
[data-theme="dark"] .ql-toolbar .ql-fill {
  fill: var(--text-soft);
}
[data-theme="dark"] .ql-toolbar .ql-picker {
  color: var(--text-soft);
}
[data-theme="dark"] .ql-editor.ql-blank::before {
  color: var(--text-soft);
}

body,
.site-header,
.nav-search input,
.field input,
.field select,
.field textarea,
.blog-card,
.data-table,
.panel,
.stat-card,
.content-page,
.post,
.nav-menu,
.admin-sidebar {
  transition:
    background-color 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease;
}

/* Autofill. color-scheme handles most of this; the inset shadow covers the
   rest. The focus ring is repeated because a box-shadow on :focus would
   otherwise replace the inset fill. */
:root {
  --autofill-bg: var(--surface);
}
.cat-edit input,
.hero-search input {
  --autofill-bg: transparent;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
select:-webkit-autofill,
select:-webkit-autofill:hover {
  -webkit-text-fill-color: var(--text);
  caret-color: var(--text);
  -webkit-box-shadow: 0 0 0 100px var(--autofill-bg) inset;
  box-shadow: 0 0 0 100px var(--autofill-bg) inset;
  transition:
    background-color 9999s ease-in-out 0s,
    color 9999s ease-in-out 0s;
}

input:-webkit-autofill:focus,
textarea:-webkit-autofill:focus,
select:-webkit-autofill:focus,
.field input:-webkit-autofill:focus,
.field textarea:-webkit-autofill:focus,
.field select:-webkit-autofill:focus,
.nav-search input:-webkit-autofill:focus,
.widget-search input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text);
  caret-color: var(--text);
  -webkit-box-shadow:
    0 0 0 3px var(--accent-soft),
    0 0 0 100px var(--autofill-bg) inset;
  box-shadow:
    0 0 0 3px var(--accent-soft),
    0 0 0 100px var(--autofill-bg) inset;
}

input:autofill,
textarea:autofill,
select:autofill {
  background-color: var(--autofill-bg);
  color: var(--text);
}