/* INVOXA: Dark theme component adjustments */

/* Dark mode adjustments for toggle */
html.dark .toggle-switch {
  background-color: #475569; /* Dark mode off state */
}

html.dark .toggle-switch[data-state="true"] {
  background-color: var(--primary-light); /* Dark mode on state */
}

html.dark .toggle-thumb {
  background-color: #e2e8f0; /* Dark mode thumb color */
}

html.dark .admin-nav-tab {
  color: #cbd5e1;
}

html.dark .admin-nav-tab:hover,
html.dark .admin-nav-tab.is-active {
  background: rgba(99, 102, 241, 0.18);
  color: #c4b5fd;
}

html.dark .admin-action-btn.is-remove {
  background: rgba(225, 29, 72, 0.15);
  color: #fda4af;
}

html.dark .admin-action-btn.is-secondary {
  background: #263247;
  color: #cbd5e1;
}

html.dark .premium-package-order {
  background: rgba(99, 102, 241, 0.2);
  color: #c4b5fd;
}

html.dark .premium-package-move-btn {
  border-color: #334155;
  background: #172033;
  color: #cbd5e1;
}

html.dark .premium-package-move-btn:hover:not(:disabled) {
  border-color: #6366f1;
  background: #312e81;
  color: white;
}

html.dark #adminUserModal > div,
html.dark #adminModalBody .bg-gray-50 {
  border-color: #334155;
  background: #172033 !important;
  color: #e5e7eb;
}

html.dark {
  color-scheme: dark;
  --surface-page: #0b1120;
  --surface-card: #172033;
  --surface-card-strong: #111827;
  --surface-control: #0f172a;
  --surface-hover: #1e293b;
  --border-subtle: #334155;
  --text-primary: #f8fafc;
  --text-secondary: #cbd5e1;
  --text-muted: #94a3b8;
}

html.dark body {
  background: linear-gradient(145deg, #0b1120 0%, #111827 100%) !important;
  color: #e5e7eb;
}

html.dark .glass,
html.dark .glass-card {
  background: rgba(15, 23, 42, 0.86) !important;
  border-color: rgba(148, 163, 184, 0.2) !important;
  box-shadow: 0 10px 28px -12px rgba(0, 0, 0, 0.7);
}

html.dark .bg-white:not(.invoice-a4):not(.invoice-a4 *),
html.dark .bg-white\/70:not(.invoice-a4):not(.invoice-a4 *),
html.dark .bg-white\/80:not(.invoice-a4):not(.invoice-a4 *),
html.dark .bg-white\/90:not(.invoice-a4):not(.invoice-a4 *) {
  background-color: #172033 !important;
}

html.dark .bg-gray-50:not(.invoice-a4):not(.invoice-a4 *),
html.dark .bg-gray-100:not(.invoice-a4):not(.invoice-a4 *),
html.dark .bg-indigo-50:not(.invoice-a4):not(.invoice-a4 *),
html.dark .bg-purple-50:not(.invoice-a4):not(.invoice-a4 *) {
  background-color: #101827 !important;
}

html.dark .text-gray-900:not(.invoice-a4 *),
html.dark .text-gray-800:not(.invoice-a4 *),
html.dark .text-gray-700:not(.invoice-a4 *) {
  color: #f3f4f6 !important;
}

html.dark .text-gray-600:not(.invoice-a4 *),
html.dark .text-gray-500:not(.invoice-a4 *),
html.dark .text-gray-400:not(.invoice-a4 *) {
  color: #aeb9ca !important;
}

html.dark .border-gray-100:not(.invoice-a4 *),
html.dark .border-gray-200:not(.invoice-a4 *),
html.dark .border-gray-300:not(.invoice-a4 *),
html.dark .border-white\/30:not(.invoice-a4 *),
html.dark .border-white\/50:not(.invoice-a4 *),
html.dark .border-white\/60:not(.invoice-a4 *) {
  border-color: #334155 !important;
}

html.dark input,
html.dark select,
html.dark textarea {
  background-color: #0f172a !important;
  border-color: #334155 !important;
  color: #f8fafc !important;
}

html.dark input::placeholder,
html.dark textarea::placeholder {
  color: #94a3b8;
  opacity: 1;
}

html.dark input:disabled,
html.dark select:disabled,
html.dark textarea:disabled,
html.dark button:disabled {
  color: #94a3b8 !important;
  opacity: 0.7;
}

html.dark input:-webkit-autofill,
html.dark input:-webkit-autofill:hover,
html.dark input:-webkit-autofill:focus {
  -webkit-text-fill-color: #f8fafc;
  box-shadow: 0 0 0 1000px #0f172a inset !important;
  caret-color: #f8fafc;
}

html.dark th:not(.invoice-a4 *) {
  color: #cbd5e1;
  background: #111827;
}

html.dark td:not(.invoice-a4 *),
html.dark th:not(.invoice-a4 *) {
  border-bottom-color: #293548;
}

html.dark tr:not(.invoice-a4 *) {
  color: #e5e7eb;
}

html.dark tr:hover td:not(.invoice-a4 *) {
  background-color: #1a2437;
}

html.dark .notification {
  background: #172033;
  color: #f3f4f6;
  border: 1px solid #334155;
}

html.dark .theme-toggle {
  border-color: #475569;
  background: rgba(15, 23, 42, 0.94);
  color: #f8fafc;
}

html.dark ::-webkit-scrollbar-track {
  background: #0f172a;
}

html.dark ::-webkit-scrollbar-thumb {
  background: #475569;
  border-color: #0f172a;
}

html.dark :focus-visible {
  outline-color: #818cf8;
}

/* Shared surfaces that use authored CSS instead of Tailwind utilities. */
html.dark .position-item,
html.dark .custom-select-trigger,
html.dark .custom-select-menu,
html.dark .custom-date-trigger,
html.dark .custom-date-panel,
html.dark .admin-select,
html.dark .admin-users-table-container {
  background-color: var(--surface-card) !important;
  border-color: var(--border-subtle) !important;
  color: var(--text-primary) !important;
}

html.dark .position-item:hover,
html.dark .custom-select-trigger:hover,
html.dark .custom-select-option:hover,
html.dark .custom-select-option.is-focused,
html.dark .custom-date-nav:hover,
html.dark .custom-date-actions button:hover,
html.dark .custom-date-day:hover,
html.dark .custom-date-day:focus-visible {
  background-color: var(--surface-hover) !important;
}

html.dark .custom-date-title,
html.dark .custom-date-day {
  color: var(--text-primary);
}

html.dark .custom-date-day.is-outside,
html.dark .custom-date-weekdays,
html.dark .custom-date-trigger.is-placeholder .custom-date-value {
  color: var(--text-muted) !important;
}

html.dark .custom-date-day.is-selected {
  background: #4f46e5 !important;
  color: #fff !important;
}

html.dark .custom-select-placeholder,
html.dark .expense-scan-empty,
html.dark .expense-document-meta span {
  color: var(--text-muted) !important;
}

/* Neutral utility shades. Dark CSS is loaded last so these remain authoritative. */
html.dark .bg-gray-50\/80:not(.invoice-a4 *),
html.dark .bg-slate-100:not(.invoice-a4 *),
html.dark .bg-slate-100\/80:not(.invoice-a4 *) {
  background-color: #101827 !important;
}

html.dark .bg-gray-300:not(.invoice-a4 *) {
  background-color: #475569 !important;
}

html.dark .text-slate-950:not(.invoice-a4 *),
html.dark .text-slate-700:not(.invoice-a4 *) {
  color: #f1f5f9 !important;
}

html.dark .divide-gray-100 > :not([hidden]) ~ :not([hidden]) {
  border-color: #293548 !important;
}

html.dark .border-gray-50:not(.invoice-a4 *) {
  border-color: #293548 !important;
}

/* Accessible dark variants for semantic pastel badges and notice panels. */
html.dark .bg-red-50:not(.invoice-a4 *),
html.dark .bg-red-100:not(.invoice-a4 *),
html.dark .bg-rose-100:not(.invoice-a4 *) {
  background-color: rgba(225, 29, 72, 0.16) !important;
}

html.dark .text-red-500:not(.invoice-a4 *),
html.dark .text-red-600:not(.invoice-a4 *),
html.dark .text-red-700:not(.invoice-a4 *),
html.dark .text-red-800:not(.invoice-a4 *),
html.dark .text-rose-700:not(.invoice-a4 *),
html.dark .text-rose-950:not(.invoice-a4 *) {
  color: #fda4af !important;
}

html.dark .border-red-100:not(.invoice-a4 *),
html.dark .border-red-200:not(.invoice-a4 *) {
  border-color: rgba(251, 113, 133, 0.4) !important;
}

html.dark .bg-green-50:not(.invoice-a4 *),
html.dark .bg-green-100:not(.invoice-a4 *),
html.dark .bg-emerald-50:not(.invoice-a4 *),
html.dark .bg-emerald-50\/60:not(.invoice-a4 *),
html.dark .bg-emerald-100:not(.invoice-a4 *),
html.dark .bg-emerald-100\/70:not(.invoice-a4 *) {
  background-color: rgba(5, 150, 105, 0.17) !important;
}

html.dark .text-green-500:not(.invoice-a4 *),
html.dark .text-green-600:not(.invoice-a4 *),
html.dark .text-green-700:not(.invoice-a4 *),
html.dark .text-green-800:not(.invoice-a4 *),
html.dark .text-emerald-600:not(.invoice-a4 *),
html.dark .text-emerald-700:not(.invoice-a4 *),
html.dark .text-emerald-800:not(.invoice-a4 *),
html.dark .text-emerald-900:not(.invoice-a4 *),
html.dark .text-emerald-950:not(.invoice-a4 *) {
  color: #6ee7b7 !important;
}

html.dark .border-green-200:not(.invoice-a4 *),
html.dark .border-emerald-100:not(.invoice-a4 *) {
  border-color: rgba(52, 211, 153, 0.38) !important;
}

html.dark .bg-yellow-50:not(.invoice-a4 *),
html.dark .bg-yellow-100:not(.invoice-a4 *),
html.dark .bg-amber-50:not(.invoice-a4 *),
html.dark .bg-amber-100:not(.invoice-a4 *),
html.dark .bg-amber-100\/75:not(.invoice-a4 *) {
  background-color: rgba(217, 119, 6, 0.18) !important;
}

html.dark .text-yellow-700:not(.invoice-a4 *),
html.dark .text-yellow-800:not(.invoice-a4 *),
html.dark .text-yellow-900:not(.invoice-a4 *),
html.dark .text-amber-600:not(.invoice-a4 *),
html.dark .text-amber-700:not(.invoice-a4 *),
html.dark .text-amber-800:not(.invoice-a4 *),
html.dark .text-amber-950:not(.invoice-a4 *) {
  color: #fcd34d !important;
}

html.dark .border-yellow-200:not(.invoice-a4 *),
html.dark .border-amber-200:not(.invoice-a4 *) {
  border-color: rgba(251, 191, 36, 0.4) !important;
}

html.dark .bg-blue-50:not(.invoice-a4 *),
html.dark .bg-blue-100:not(.invoice-a4 *),
html.dark .bg-blue-100\/70:not(.invoice-a4 *),
html.dark .bg-sky-50:not(.invoice-a4 *),
html.dark .bg-sky-100:not(.invoice-a4 *),
html.dark .bg-cyan-50:not(.invoice-a4 *),
html.dark .bg-cyan-50\/50:not(.invoice-a4 *),
html.dark .bg-cyan-100:not(.invoice-a4 *),
html.dark .bg-cyan-100\/70:not(.invoice-a4 *) {
  background-color: rgba(14, 116, 144, 0.2) !important;
}

html.dark .text-blue-700:not(.invoice-a4 *),
html.dark .text-blue-800:not(.invoice-a4 *),
html.dark .text-blue-900:not(.invoice-a4 *),
html.dark .text-blue-950:not(.invoice-a4 *),
html.dark .text-sky-700:not(.invoice-a4 *),
html.dark .text-cyan-600:not(.invoice-a4 *),
html.dark .text-cyan-700:not(.invoice-a4 *),
html.dark .text-cyan-950:not(.invoice-a4 *) {
  color: #7dd3fc !important;
}

html.dark .border-blue-200:not(.invoice-a4 *),
html.dark .border-cyan-200:not(.invoice-a4 *),
html.dark .border-cyan-300:not(.invoice-a4 *),
html.dark .border-cyan-400:not(.invoice-a4 *) {
  border-color: rgba(34, 211, 238, 0.38) !important;
}

html.dark .bg-indigo-100:not(.invoice-a4 *),
html.dark .bg-indigo-100\/70:not(.invoice-a4 *),
html.dark .bg-indigo-50\/60:not(.invoice-a4 *),
html.dark .bg-purple-50:not(.invoice-a4 *),
html.dark .bg-purple-100:not(.invoice-a4 *),
html.dark .bg-purple-100\/70:not(.invoice-a4 *) {
  background-color: rgba(99, 102, 241, 0.18) !important;
}

html.dark .text-indigo-600:not(.invoice-a4 *),
html.dark .text-indigo-700:not(.invoice-a4 *),
html.dark .text-indigo-800:not(.invoice-a4 *),
html.dark .text-indigo-900:not(.invoice-a4 *),
html.dark .text-indigo-950:not(.invoice-a4 *),
html.dark .text-purple-500:not(.invoice-a4 *),
html.dark .text-purple-600:not(.invoice-a4 *),
html.dark .text-purple-700:not(.invoice-a4 *),
html.dark .text-purple-800:not(.invoice-a4 *),
html.dark .text-purple-950:not(.invoice-a4 *) {
  color: #c4b5fd !important;
}

html.dark .border-indigo-100:not(.invoice-a4 *),
html.dark .border-indigo-200:not(.invoice-a4 *),
html.dark .border-indigo-300:not(.invoice-a4 *),
html.dark .border-purple-200:not(.invoice-a4 *) {
  border-color: rgba(165, 180, 252, 0.4) !important;
}

html.dark .bg-orange-100:not(.invoice-a4 *) {
  background-color: rgba(234, 88, 12, 0.17) !important;
}

html.dark .text-orange-800:not(.invoice-a4 *) {
  color: #fdba74 !important;
}

html.dark .bg-teal-100:not(.invoice-a4 *) {
  background-color: rgba(13, 148, 136, 0.18) !important;
}

html.dark .text-teal-800:not(.invoice-a4 *) {
  color: #5eead4 !important;
}

/* Expenses page: cards, QR block, editor modal and mobile rows. */
html.dark .expense-hero {
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.96), rgba(30, 27, 75, 0.88));
  border-color: rgba(129, 140, 248, 0.28);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.28);
}

html.dark .expense-kicker,
html.dark .expense-section-title,
html.dark .expense-total-box,
html.dark .expense-grand-total {
  color: #c4b5fd;
}

html.dark .expense-secondary-btn,
html.dark .expense-qr-card,
html.dark .expense-qr-result,
html.dark .expense-modal-panel,
html.dark .expense-section,
html.dark .expense-item-row {
  background: #172033;
  border-color: #334155;
  color: #f8fafc;
}

html.dark .expense-secondary-btn:hover,
html.dark .expense-icon-btn:hover {
  background: #1e293b;
  border-color: #6366f1;
  color: #c4b5fd;
}

html.dark .expense-modal-header,
html.dark .expense-modal-footer,
html.dark .expense-item-head,
html.dark .expense-grand-total {
  border-color: #334155;
}

html.dark .expense-form-grid label,
html.dark .expense-document-meta strong {
  color: #e2e8f0;
}

html.dark .expense-input,
html.dark .expense-scan-preview {
  background: #0f172a;
  border-color: #334155;
  color: #f8fafc;
}

html.dark .expense-input:focus {
  border-color: #818cf8;
  box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.2);
}

html.dark .expense-document-meta {
  background: rgba(225, 29, 72, 0.14);
  border-color: rgba(251, 113, 133, 0.38);
  color: #fda4af;
}

html.dark .expense-qr-result canvas {
  border: 5px solid #fff;
}

html.dark .expense-mobile-card {
  background: #172033;
  border-color: #334155;
  color: #f8fafc;
}

/* Rechnungen bleiben am Bildschirm, im PDF und beim Drucken immer weiß. */
html.dark .invoice-a4,
html.dark #invoicePreviewContent {
  color-scheme: light;
  background: white !important;
  color: #1f2937 !important;
}