/**
 * URL Rotator — Light / Dark theme tokens + surface overrides
 * Brand accent stays purple; surfaces/text adapt.
 */

:root,
html[data-theme="light"] {
  color-scheme: light;
  --ur-primary: #667eea;
  --ur-secondary: #764ba2;
  --ur-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --ur-bg: #f5f5f5;
  --ur-bg-elevated: #ffffff;
  --ur-surface: #ffffff;
  --ur-surface-2: #f8fafc;
  --ur-text: #1e293b;
  --ur-text-muted: #64748b;
  --ur-border: #e2e8f0;
  --ur-border-soft: #f0f0f0;
  --ur-input-bg: #f9f9f9;
  --ur-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
  --ur-shadow-sm: 0 2px 10px rgba(15, 23, 42, 0.06);
  --ur-sidebar-w: 280px;
  --ur-success: #10b981;
  --ur-danger: #ef4444;
  --ur-warning: #f59e0b;
  --ur-overlay: rgba(15, 23, 42, 0.45);
  --ur-hero-text: #ffffff;
  --ur-card-filter: none;
  --primary: var(--ur-primary);
  --secondary: var(--ur-secondary);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --ur-primary: #9aa8ff;
  --ur-secondary: #c4b5fd;
  --ur-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --ur-bg: #0c111b;
  --ur-bg-elevated: #121a27;
  --ur-surface: #161e2e;
  --ur-surface-2: #1c2638;
  --ur-text: #e8edf7;
  --ur-text-muted: #9aa8bd;
  --ur-border: #2c3850;
  --ur-border-soft: #243044;
  --ur-input-bg: #101826;
  --ur-shadow: 0 14px 40px rgba(0, 0, 0, 0.5);
  --ur-shadow-sm: 0 2px 14px rgba(0, 0, 0, 0.38);
  --ur-success: #34d399;
  --ur-danger: #f87171;
  --ur-warning: #fbbf24;
  --ur-overlay: rgba(0, 0, 0, 0.55);
  --ur-hero-text: #f8fafc;
  --primary: var(--ur-primary);
  --secondary: var(--ur-secondary);
}

/* Base surfaces */
html {
  background: var(--ur-bg);
}

body {
  background: var(--ur-bg) !important;
  color: var(--ur-text);
  transition: background-color 180ms ease, color 180ms ease;
}

/* Theme toggle control */
.ur-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  min-width: 44px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--ur-border);
  background: var(--ur-surface);
  color: var(--ur-text);
  box-shadow: var(--ur-shadow-sm);
  cursor: pointer;
  font-weight: 600;
  font-size: 0.875rem;
  line-height: 1;
  transition: transform 120ms ease, background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}

.ur-theme-toggle:hover {
  transform: translateY(-1px);
  border-color: var(--ur-primary);
  color: var(--ur-primary);
}

.ur-theme-toggle:active {
  transform: translateY(0);
}

.ur-theme-toggle:focus-visible {
  outline: 2px solid var(--ur-primary);
  outline-offset: 2px;
}

.ur-theme-toggle i {
  font-size: 1rem;
}

.ur-theme-toggle-floating {
  position: fixed;
  top: 16px;
  inset-inline-end: 16px;
  z-index: 10050;
}

.ur-theme-toggle-auth {
  position: absolute;
  top: 18px;
  inset-inline-end: 18px;
  z-index: 5;
}

.ur-theme-toggle-compact .ur-theme-toggle-label {
  display: none;
}

@media (max-width: 576px) {
  .ur-theme-toggle-label {
    display: none;
  }
}

/* Admin chrome */
.sidebar {
  background: var(--ur-surface) !important;
  border-inline-end: 1px solid var(--ur-border-soft);
  box-shadow: var(--ur-shadow-sm) !important;
}

.sidebar-brand {
  border-bottom-color: var(--ur-border-soft) !important;
}

.sidebar-menu a {
  color: var(--ur-text-muted) !important;
}

.sidebar-menu a:hover,
.sidebar-menu a.active {
  color: var(--ur-primary) !important;
  background: color-mix(in srgb, var(--ur-primary) 12%, transparent) !important;
}

.sidebar-menu li[style*="border-top"] {
  border-top-color: var(--ur-border-soft) !important;
}

.main-content,
.content-area {
  background: var(--ur-bg) !important;
  color: var(--ur-text);
}

.top-bar {
  background: var(--ur-surface) !important;
  border-bottom: 1px solid var(--ur-border-soft);
  box-shadow: var(--ur-shadow-sm);
}

.top-bar h4,
.top-bar h4[style],
.user-info div[style*="color"],
.user-info small[style] {
  color: var(--ur-text) !important;
}

.user-info small {
  color: var(--ur-text-muted) !important;
}

/* Cards / panels common patterns */
.card,
.settings-card,
.form-card,
.stat-card,
.link-card,
.login-card,
.register-card,
.content-box,
.table-card,
.modern-card {
  background: var(--ur-surface) !important;
  color: var(--ur-text) !important;
  border-color: var(--ur-border) !important;
  box-shadow: var(--ur-shadow-sm);
}

.card-header,
.card-body,
.card-footer {
  background: transparent !important;
  color: inherit;
  border-color: var(--ur-border-soft) !important;
}

/* Forms */
.form-control,
.form-select,
textarea.form-control,
input.form-control {
  background-color: var(--ur-input-bg) !important;
  color: var(--ur-text) !important;
  border-color: var(--ur-border) !important;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--ur-primary) !important;
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--ur-primary) 25%, transparent) !important;
  background-color: var(--ur-input-bg) !important;
  color: var(--ur-text) !important;
}

.form-control::placeholder {
  color: var(--ur-text-muted) !important;
}

.form-label,
.form-text,
.text-muted {
  color: var(--ur-text-muted) !important;
}

/* Tables */
.table {
  --bs-table-bg: var(--ur-surface);
  --bs-table-color: var(--ur-text);
  --bs-table-border-color: var(--ur-border);
  --bs-table-striped-bg: var(--ur-surface-2);
  --bs-table-hover-bg: color-mix(in srgb, var(--ur-primary) 10%, var(--ur-surface));
  color: var(--ur-text) !important;
}

.table > :not(caption) > * > * {
  background-color: transparent !important;
  color: inherit !important;
  border-bottom-color: var(--ur-border) !important;
}

.table thead th {
  color: var(--ur-text-muted) !important;
  border-bottom-color: var(--ur-border) !important;
}

/* Bootstrap utils overrides in dark */
html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .bg-light {
  background-color: var(--ur-surface) !important;
  color: var(--ur-text) !important;
}

html[data-theme="dark"] .text-dark {
  color: var(--ur-text) !important;
}

html[data-theme="dark"] .border,
html[data-theme="dark"] .border-bottom,
html[data-theme="dark"] .border-top {
  border-color: var(--ur-border) !important;
}

html[data-theme="dark"] .modal-content {
  background: var(--ur-surface);
  color: var(--ur-text);
  border-color: var(--ur-border);
}

html[data-theme="dark"] .dropdown-menu {
  background: var(--ur-surface);
  color: var(--ur-text);
  border-color: var(--ur-border);
}

html[data-theme="dark"] .dropdown-item {
  color: var(--ur-text);
}

html[data-theme="dark"] .dropdown-item:hover {
  background: var(--ur-surface-2);
  color: var(--ur-primary);
}

html[data-theme="dark"] .list-group-item {
  background: var(--ur-surface);
  color: var(--ur-text);
  border-color: var(--ur-border);
}

/* Alerts keep semantic colors but readable */
.alert {
  border: 1px solid var(--ur-border);
}

/* Auth pages — gradient stays branded; cards adapt */
.login-container,
body > .login-wrapper {
  min-height: 100vh;
}

.login-card,
.register-card {
  background: var(--ur-surface) !important;
}

.login-body,
.login-card .form-label {
  color: var(--ur-text);
}

.security-info {
  background: color-mix(in srgb, var(--ur-primary) 10%, var(--ur-surface)) !important;
  color: var(--ur-text-muted) !important;
  border-inline-start-color: var(--ur-primary) !important;
}

.divider {
  background: linear-gradient(90deg, transparent, var(--ur-border), transparent) !important;
}

/* Public welcome */
.features {
  background: var(--ur-bg) !important;
  color: var(--ur-text);
}

.features h2[style],
.feature-card h5,
.feature-card p {
  color: var(--ur-text) !important;
}

.feature-card {
  background: var(--ur-surface) !important;
  border: 1px solid var(--ur-border);
  box-shadow: var(--ur-shadow-sm);
}

.stats-section,
.cta-section {
  background: var(--ur-bg-elevated) !important;
  color: var(--ur-text);
}

html[data-theme="dark"] .hero {
  /* Keep brand gradient; slightly deeper for contrast */
  background: linear-gradient(135deg, #4f5fd4 0%, #5b3d85 100%) !important;
}

html[data-theme="dark"] .error-card,
html[data-theme="dark"] .card {
  background: var(--ur-surface) !important;
}

/* Email settings / dashboard specific hardcodes */
.status-banner {
  border-color: color-mix(in srgb, #fff 8%, transparent);
}

.settings-list li {
  border-bottom-color: var(--ur-border) !important;
}

.settings-list span,
.settings-card h3,
.form-card h3 {
  color: var(--ur-text) !important;
}

.settings-card p,
.form-card .hint,
.pwd-hint {
  color: var(--ur-text-muted) !important;
}

.info-chip {
  background: color-mix(in srgb, var(--ur-primary) 16%, var(--ur-surface)) !important;
  color: var(--ur-primary) !important;
}

.template-preview {
  background: var(--ur-bg-elevated) !important;
  color: var(--ur-text) !important;
  border: 1px solid var(--ur-border);
}

/* Links */
a {
  color: var(--ur-primary);
}

a:hover {
  color: var(--ur-secondary);
}

a.back-link,
.back-link {
  color: var(--ur-primary) !important;
}

/* Top bar flex for toggle */
.top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.top-bar .ur-top-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-inline-start: auto;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

html[data-theme="dark"] .status-on {
  background: color-mix(in srgb, #14b8a6 22%, var(--ur-surface)) !important;
  color: #5eead4 !important;
}

html[data-theme="dark"] .status-off {
  background: color-mix(in srgb, #ef4444 22%, var(--ur-surface)) !important;
  color: #fca5a5 !important;
}

/* ── Dashboard / shell deep dark polish (beats inline page CSS) ── */
html[data-theme="dark"] body {
  background: var(--ur-bg) !important;
  color: var(--ur-text) !important;
}

html[data-theme="dark"] .sidebar-brand,
html[data-theme="dark"] .sidebar-brand i {
  color: var(--ur-primary) !important;
  -webkit-text-fill-color: var(--ur-primary) !important;
  border-bottom-color: var(--ur-border-soft) !important;
}

html[data-theme="dark"] .sidebar-menu a {
  color: var(--ur-text-muted) !important;
  border-left-color: transparent !important;
}

html[data-theme="dark"] .sidebar-menu a:hover,
html[data-theme="dark"] .sidebar-menu a.active {
  color: #fff !important;
  background: color-mix(in srgb, var(--ur-primary) 18%, var(--ur-surface)) !important;
  border-left-color: var(--ur-primary) !important;
}

html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .add-link-card,
html[data-theme="dark"] .data-table,
html[data-theme="dark"] .forgot-card,
html[data-theme="dark"] .reset-card,
html[data-theme="dark"] .register-card,
html[data-theme="dark"] .login-card {
  background: var(--ur-surface) !important;
  border: 1px solid var(--ur-border) !important;
  box-shadow: var(--ur-shadow-sm) !important;
  color: var(--ur-text) !important;
}

html[data-theme="dark"] .stat-card::before {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--ur-primary) 18%, transparent),
    color-mix(in srgb, var(--ur-secondary) 14%, transparent)
  ) !important;
}

html[data-theme="dark"] .stat-text h3,
html[data-theme="dark"] .add-link-card h5 {
  color: var(--ur-primary) !important;
}

html[data-theme="dark"] .stat-number {
  color: var(--ur-text) !important;
}

html[data-theme="dark"] .stat-icon {
  color: var(--ur-primary) !important;
  opacity: 0.45 !important;
}

html[data-theme="dark"] .data-table-header {
  background: var(--ur-gradient) !important;
  color: #fff !important;
  border-bottom: 1px solid transparent;
}

html[data-theme="dark"] .data-table-header .btn {
  background: rgba(255, 255, 255, 0.14) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
}

html[data-theme="dark"] .data-table-header .btn:hover {
  background: rgba(255, 255, 255, 0.24) !important;
  color: #fff !important;
}

html[data-theme="dark"] .data-table thead th {
  background: var(--ur-surface-2) !important;
  color: var(--ur-primary) !important;
  border-color: var(--ur-border) !important;
}

html[data-theme="dark"] .data-table tbody td,
html[data-theme="dark"] .data-table tbody tr {
  background: transparent !important;
  color: var(--ur-text) !important;
  border-color: var(--ur-border-soft) !important;
}

html[data-theme="dark"] .data-table tbody tr:hover {
  background: color-mix(in srgb, var(--ur-primary) 10%, var(--ur-surface)) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--ur-text);
  --bs-table-border-color: var(--ur-border);
  --bs-table-striped-bg: var(--ur-surface-2);
  --bs-table-hover-bg: color-mix(in srgb, var(--ur-primary) 10%, var(--ur-surface));
  --bs-table-hover-color: var(--ur-text);
  color: var(--ur-text) !important;
}

html[data-theme="dark"] .table > :not(caption) > * > * {
  color: var(--ur-text) !important;
  border-bottom-color: var(--ur-border-soft) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] a[style*="#667eea"],
html[data-theme="dark"] a[style*="color: #667eea"],
html[data-theme="dark"] span[style*="#667eea"] {
  color: var(--ur-primary) !important;
}

html[data-theme="dark"] .form-label {
  color: var(--ur-text) !important;
}

html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] textarea.form-control {
  background-color: var(--ur-input-bg) !important;
  border: 1px solid var(--ur-border) !important;
  color: var(--ur-text) !important;
}

html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-select:focus {
  background-color: var(--ur-input-bg) !important;
  border-color: var(--ur-primary) !important;
  color: var(--ur-text) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ur-primary) 22%, transparent) !important;
}

html[data-theme="dark"] .btn-outline-primary {
  color: var(--ur-primary) !important;
  border-color: var(--ur-primary) !important;
  background: transparent !important;
}

html[data-theme="dark"] .btn-outline-primary:hover {
  background: color-mix(in srgb, var(--ur-primary) 18%, transparent) !important;
  color: #fff !important;
}

html[data-theme="dark"] .btn-primary {
  background: var(--ur-gradient) !important;
  border: none !important;
  color: #fff !important;
}

html[data-theme="dark"] .text-muted,
html[data-theme="dark"] small.text-muted,
html[data-theme="dark"] .text-muted[style] {
  color: var(--ur-text-muted) !important;
}

html[data-theme="dark"] .copy-btn {
  border-color: var(--ur-border) !important;
  color: var(--ur-primary) !important;
}

/* Soften purple auth backgrounds in dark so cards remain readable */
html[data-theme="dark"] body:has(.login-card),
html[data-theme="dark"] body:has(.register-card),
html[data-theme="dark"] body:has(.forgot-card),
html[data-theme="dark"] body:has(.reset-card) {
  background: radial-gradient(1200px 600px at 20% -10%, #2a2458 0%, transparent 55%),
    radial-gradient(900px 500px at 100% 10%, #1f2a4d 0%, transparent 50%),
    var(--ur-bg) !important;
}

/* Create rotator + manage groups + setup + bootstrap leftovers */
html[data-theme="dark"] .main-card,
html[data-theme="dark"] .setup-card,
html[data-theme="dark"] .table-card,
html[data-theme="dark"] .card {
  background: var(--ur-surface) !important;
  color: var(--ur-text) !important;
  border-color: var(--ur-border) !important;
}

html[data-theme="dark"] .main-card h2,
html[data-theme="dark"] .setup-card h2,
html[data-theme="dark"] .setup-card h3,
html[data-theme="dark"] .main-card h5 {
  color: var(--ur-text) !important;
}

html[data-theme="dark"] .generated-url-box {
  background: color-mix(in srgb, var(--ur-primary) 14%, var(--ur-surface)) !important;
  border-color: var(--ur-primary) !important;
  color: var(--ur-text) !important;
}

html[data-theme="dark"] .generated-url-box .url {
  color: var(--ur-primary) !important;
}

html[data-theme="dark"] .input-group-text {
  background: var(--ur-surface-2) !important;
  color: var(--ur-text-muted) !important;
  border-color: var(--ur-border) !important;
}

html[data-theme="dark"] .table-light,
html[data-theme="dark"] .table-light > th,
html[data-theme="dark"] .table-light > td,
html[data-theme="dark"] thead.table-light th {
  --bs-table-bg: var(--ur-surface-2);
  --bs-table-color: var(--ur-text);
  --bs-table-border-color: var(--ur-border);
  background-color: var(--ur-surface-2) !important;
  color: var(--ur-text) !important;
  border-color: var(--ur-border) !important;
}

html[data-theme="dark"] .card-header.bg-primary,
html[data-theme="dark"] .card-header.bg-dark {
  background: var(--ur-gradient) !important;
  border-bottom-color: transparent !important;
  color: #fff !important;
}

html[data-theme="dark"] .card-header.bg-dark {
  background: var(--ur-surface-2) !important;
  border-bottom: 1px solid var(--ur-border) !important;
}

html[data-theme="dark"] .btn-close {
  filter: invert(1) grayscale(100%);
  opacity: 0.75;
}

html[data-theme="dark"] .modal-content {
  background: var(--ur-surface) !important;
  color: var(--ur-text) !important;
  border-color: var(--ur-border) !important;
}

html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer {
  border-color: var(--ur-border) !important;
}

html[data-theme="dark"] .form-card {
  background: var(--ur-surface) !important;
  border-color: var(--ur-border) !important;
  color: var(--ur-text) !important;
}

html[data-theme="dark"] .status-exists {
  background: color-mix(in srgb, #10b981 22%, var(--ur-surface)) !important;
  color: #6ee7b7 !important;
}

html[data-theme="dark"] .status-missing {
  background: color-mix(in srgb, #ef4444 22%, var(--ur-surface)) !important;
  color: #fca5a5 !important;
}

html[data-theme="dark"] .btn-outline-secondary {
  color: var(--ur-text-muted) !important;
  border-color: var(--ur-border) !important;
}

html[data-theme="dark"] .btn-outline-secondary:hover {
  background: var(--ur-surface-2) !important;
  color: var(--ur-text) !important;
}

html[data-theme="dark"] .btn-light {
  background: rgba(255, 255, 255, 0.14) !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
}

html[data-theme="dark"] .url-cell {
  color: var(--ur-text) !important;
}

html[data-theme="dark"] .features,
html[data-theme="dark"] .footer-cta {
  background: var(--ur-bg) !important;
  color: var(--ur-text) !important;
}

html[data-theme="dark"] .feature-card {
  background: var(--ur-surface) !important;
  border: 1px solid var(--ur-border) !important;
  color: var(--ur-text) !important;
}

html[data-theme="dark"] .feature-card h5 {
  color: var(--ur-text) !important;
}

html[data-theme="dark"] .feature-card p,
html[data-theme="dark"] .footer-cta p {
  color: var(--ur-text-muted) !important;
}

html[data-theme="dark"] .footer-cta h2 {
  color: var(--ur-primary) !important;
}

html[data-theme="dark"] .stats {
  background: var(--ur-gradient) !important;
}

@media (prefers-reduced-motion: reduce) {
  body,
  .ur-theme-toggle {
    transition: none !important;
  }
}