/**
 * dark-premium.css — rechnung.best
 *
 * Deep-premium dark theme overrides.
 * Loaded LAST on every page — wins all specificity battles via html[data-theme="dark"] prefix.
 *
 * Sections:
 *   Z) Universal improvements — ALL modes (light + dark)
 *   A) Body + page chrome
 *   B) Sidebar — premium dark redesign
 *   C) Mobile navigation
 *   D) Page header — typography hierarchy
 *   E) Cards + surfaces
 *   F) Tables
 *   G) Forms
 *   H) Buttons
 *   I) Modals + overlays
 *   J) Page backgrounds
 *   K) Status badges + tags
 *   L) Stat cards / KPI widgets
 *   M) Scrollbars
 *   N) Page-specific overrides (dashboard, invoices, cashbook …)
 *   O) Trial banner + toast
 *
 * @date 2026-02-28
 */

/* =================================================================
   Z) UNIVERSAL IMPROVEMENTS — ALL MODES
   These apply regardless of light/dark theme. They clean up the
   header typography hierarchy across the app (remove JS-injected
   hero banner was only the first step — the static header also
   needs clean typography).
   ================================================================= */

/* Cleaner page header shell — all modes */
.header,
.page-header,
.page-header-with-actions {
  border-radius: 12px !important;
  margin-bottom: 24px !important;
}

/* Full-width banner for app pages (desktop + tablet only) */
@media (min-width: 769px) {
  body:has(.premium-sidebar) .main-content > .header,
  body:has(.premium-sidebar) .main-content > .page-header,
  body:has(.premium-sidebar) .main-content > .page-header-with-actions {
    border-radius: 0 !important;
    margin: 0 calc(-1 * var(--page-pad-right, 32px)) 24px 0 !important;
    padding: 22px calc(var(--page-pad-right, 32px) + 24px) 22px 24px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(0,0,0,0.08) !important;
    box-shadow: 0 1px 6px rgba(0,0,0,0.05) !important;
  }
}

/* Header h1: clean up the icon + text alignment */
.header-title,
.header h1,
.page-title {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-size: 1.375rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.025em !important;
  line-height: 1.2 !important;
  margin-bottom: 4px !important;
}

/* Header subtitle — visible but secondary */
.header-subtitle,
.header p,
.page-subtitle {
  font-size: 0.875rem !important;
  line-height: 1.5 !important;
  margin-top: 0 !important;
}

/* Header icon — consistent sizing */
.header-title svg,
.header h1 svg,
.page-title svg {
  width: 20px !important;
  height: 20px !important;
  flex-shrink: 0 !important;
  opacity: 0.85 !important;
}

/* =================================================================
   A) BODY + PAGE CHROME
   ================================================================= */

html[data-theme="dark"] body {
  background-color: #0D0D14;
  color: #F0F0FF;
}

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] body {
    background-color: #0D0D14;
    color: #F0F0FF;
  }
}

html[data-theme="dark"] .main-content,
html[data-theme="dark"] .app-content,
html[data-theme="dark"] .content-area {
  background-color: #0D0D14 !important;
}

html[data-theme="dark"] .page-wrapper,
html[data-theme="dark"] .app-wrapper {
  background-color: #0D0D14 !important;
}

/* Subtle ambient glow behind main content area */
html[data-theme="dark"] .main-content::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 80% 60% at 15% 10%, rgba(59, 123, 247, 0.04) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 85% 90%, rgba(99, 102, 241, 0.03) 0%, transparent 60%);
}

/* =================================================================
   B) SIDEBAR — PREMIUM DARK REDESIGN
   ================================================================= */

html[data-theme="dark"] {
  --sidebar-bg: #08080F;
  --sidebar-bg-hover: rgba(255, 255, 255, 0.045);
  --sidebar-bg-active: rgba(59, 123, 247, 0.11);
  --sidebar-border: rgba(255, 255, 255, 0.07);
  --sidebar-header-bg: #08080F;
  --sidebar-footer-bg: #08080F;

  --sidebar-text-primary: #E0E0F0;
  --sidebar-text-secondary: #6A6A88;
  --sidebar-text-muted: #3D3D55;
  --sidebar-text-active: #5A93FF;
  --sidebar-text-hover: #F0F0FF;

  --sidebar-accent: #3B7BF7;
  --sidebar-accent-hover: #5A93FF;
  --sidebar-indicator-gradient: linear-gradient(180deg, #3B7BF7 0%, #6366F1 100%);
  --sidebar-indicator-glow: 0 0 10px rgba(59, 123, 247, 0.6);

  --mobile-nav-bg: rgba(8, 8, 15, 0.97);
  --mobile-menu-bg: #0D0D14;
  --mobile-header-bg: rgba(8, 8, 15, 0.97);
}

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] {
    --sidebar-bg: #08080F;
    --sidebar-bg-hover: rgba(255, 255, 255, 0.045);
    --sidebar-bg-active: rgba(59, 123, 247, 0.11);
    --sidebar-border: rgba(255, 255, 255, 0.07);
    --sidebar-header-bg: #08080F;
    --sidebar-footer-bg: #08080F;

    --sidebar-text-primary: #E0E0F0;
    --sidebar-text-secondary: #6A6A88;
    --sidebar-text-muted: #3D3D55;
    --sidebar-text-active: #5A93FF;
    --sidebar-text-hover: #F0F0FF;

    --sidebar-accent: #3B7BF7;
    --sidebar-accent-hover: #5A93FF;
    --sidebar-indicator-gradient: linear-gradient(180deg, #3B7BF7 0%, #6366F1 100%);
    --sidebar-indicator-glow: 0 0 10px rgba(59, 123, 247, 0.6);

    --mobile-nav-bg: rgba(8, 8, 15, 0.97);
    --mobile-menu-bg: #0D0D14;
    --mobile-header-bg: rgba(8, 8, 15, 0.97);
  }
}

/* Sidebar shell */
html[data-theme="dark"] .premium-sidebar {
  background: #08080F !important;
  border-right: 1px solid rgba(255, 255, 255, 0.07) !important;
  box-shadow: none !important;
}

/* Logo icon — glowing blue */
html[data-theme="dark"] .premium-logo-icon {
  background: linear-gradient(135deg, #3B7BF7 0%, #2563EB 100%) !important;
  box-shadow: 0 2px 14px rgba(59, 123, 247, 0.40) !important;
}

html[data-theme="dark"] .premium-logo-text {
  color: #E0E0F0 !important;
}

html[data-theme="dark"] .premium-logo-subtitle {
  color: #4A4A62 !important;
}

/* Section labels */
html[data-theme="dark"] .premium-nav-section-title {
  color: #30304A !important;
  letter-spacing: 0.12em !important;
  font-size: 0.65rem !important;
}

/* Nav links — default */
html[data-theme="dark"] .premium-nav-link {
  color: #8B8BA7 !important;
  border-radius: 8px !important;
}

html[data-theme="dark"] .premium-nav-link:hover {
  background-color: rgba(255, 255, 255, 0.045) !important;
  color: #F0F0FF !important;
  transform: translateX(2px) !important;
}

/* Active nav item */
html[data-theme="dark"] .premium-nav-link.active {
  background-color: rgba(59, 123, 247, 0.11) !important;
  color: #5A93FF !important;
  font-weight: 600 !important;
}

/* Active indicator — glowing left bar */
html[data-theme="dark"] .premium-nav-link.active::before {
  background: linear-gradient(180deg, #3B7BF7 0%, #6366F1 100%) !important;
  box-shadow: 0 0 10px rgba(59, 123, 247, 0.65) !important;
  width: 3px !important;
  border-radius: 0 2px 2px 0 !important;
}

/* Nav icons */
html[data-theme="dark"] .premium-nav-icon {
  opacity: 0.55 !important;
}

html[data-theme="dark"] .premium-nav-link:hover .premium-nav-icon,
html[data-theme="dark"] .premium-nav-link.active .premium-nav-icon {
  opacity: 1 !important;
}

/* Section divider */
html[data-theme="dark"] .premium-nav-divider {
  border-color: rgba(255, 255, 255, 0.05) !important;
}

/* Sidebar footer (user profile) */
html[data-theme="dark"] .premium-sidebar-footer {
  background: #08080F !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}

html[data-theme="dark"] .premium-user-profile {
  border-radius: 8px !important;
}

html[data-theme="dark"] .premium-user-profile:hover {
  background-color: rgba(255, 255, 255, 0.04) !important;
}

html[data-theme="dark"] .premium-user-name {
  color: #E0E0F0 !important;
}

html[data-theme="dark"] .premium-user-role {
  color: #4A4A62 !important;
}

/* Scrollbar in sidebar */
html[data-theme="dark"] .premium-sidebar-nav::-webkit-scrollbar-track {
  background: transparent !important;
}

html[data-theme="dark"] .premium-sidebar-nav::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.08) !important;
  border-radius: 3px !important;
}

/* Locked/upgrade nav items */
html[data-theme="dark"] .nav-locked {
  opacity: 0.38 !important;
}

html[data-theme="dark"] .nav-upgrade-badge {
  background: linear-gradient(135deg, #8B5CF6 0%, #6D28D9 100%) !important;
  box-shadow: 0 2px 8px rgba(109, 40, 217, 0.40) !important;
}

/* =================================================================
   C) MOBILE NAVIGATION
   ================================================================= */

html[data-theme="dark"] .premium-mobile-header {
  background: rgba(8, 8, 15, 0.97) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
  backdrop-filter: blur(20px) !important;
}

html[data-theme="dark"] .premium-mobile-title {
  color: #E0E0F0 !important;
}

html[data-theme="dark"] .premium-hamburger span {
  background-color: #E0E0F0 !important;
}

html[data-theme="dark"] .premium-mobile-nav,
html[data-theme="dark"] .mobile-bottom-nav {
  background: rgba(8, 8, 15, 0.97) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.07) !important;
  backdrop-filter: blur(20px) !important;
}

html[data-theme="dark"] .premium-mobile-menu {
  background: #0D0D14 !important;
  border-right: 1px solid rgba(255, 255, 255, 0.07) !important;
}

html[data-theme="dark"] .premium-mobile-menu-overlay {
  background: rgba(0, 0, 0, 0.70) !important;
}

html[data-theme="dark"] .premium-mobile-menu-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* Mobile FAB */
html[data-theme="dark"] .premium-mobile-fab,
html[data-theme="dark"] .nav-fab {
  background: linear-gradient(135deg, #3B7BF7 0%, #2563EB 100%) !important;
  box-shadow: 0 4px 18px rgba(59, 123, 247, 0.50) !important;
}

html[data-theme="dark"] .premium-fab-menu {
  background: #141419 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.65) !important;
}

html[data-theme="dark"] .premium-fab-menu-item {
  background: #1C1C24 !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  color: #E0E0F0 !important;
}

html[data-theme="dark"] .premium-fab-menu-item:hover {
  background: #26263A !important;
}

html[data-theme="dark"] .mobile-overlay-menu {
  background: transparent !important;
}

html[data-theme="dark"] .mobile-overlay-content {
  background: #141419 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] .mobile-menu-item {
  color: #C0C0D8 !important;
}

html[data-theme="dark"] .mobile-menu-item:hover {
  background: rgba(255, 255, 255, 0.04) !important;
}

/* Mobile bottom nav items */
html[data-theme="dark"] .nav-item {
  color: #5C5C7A !important;
}

html[data-theme="dark"] .nav-item.active,
html[data-theme="dark"] .nav-item[aria-current="page"] {
  color: #5A93FF !important;
}

/* =================================================================
   D) PAGE HEADER — DUPLICATION FIX
   Visual strategy: .page-title → small muted breadcrumb label
                    .header-subtitle → visual heading (promoted)
   No HTML edits needed — CSS transforms the appearance.
   ================================================================= */

/* --- Container --- */
html[data-theme="dark"] .page-header-with-actions,
html[data-theme="dark"] .page-header,
html[data-theme="dark"] .header {
  background: linear-gradient(135deg, #141419 0%, #18181F 100%) !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* --- h1 page title → compact breadcrumb label --- */
html[data-theme="dark"] .page-title,
html[data-theme="dark"] h1.page-title {
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #4A4A62 !important;
  /* Cancel gradient text from visual-enhancements.css */
  background: none !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: #4A4A62 !important;
  background-clip: unset !important;
  margin-bottom: 4px !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}

/* Shrink the inline SVG icon */
html[data-theme="dark"] .page-title svg,
html[data-theme="dark"] h1.page-title svg {
  width: 12px !important;
  height: 12px !important;
  opacity: 0.5 !important;
  flex-shrink: 0 !important;
}

/* --- Subtitle → promoted visual heading --- */
html[data-theme="dark"] .header-subtitle,
html[data-theme="dark"] .page-subtitle {
  font-size: 1.125rem !important;
  font-weight: 600 !important;
  color: #F0F0FF !important;
  letter-spacing: -0.01em !important;
  line-height: 1.35 !important;
  margin-top: 0 !important;
}

/* --- Dashboard special structure ---
   dashboard.html uses <header class="header"><h1>Dashboard</h1><p class="header-subtitle">Willkommen...</p>
   Apply same treatment: h1 becomes label, subtitle stays prominent
*/
html[data-theme="dark"] body[data-page-context="dashboard"] .header,
html[data-theme="dark"] body[data-page-context="dashboard"] header.header {
  background: linear-gradient(135deg, #141419 0%, #18181F 100%) !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

html[data-theme="dark"] body[data-page-context="dashboard"] .header h1,
html[data-theme="dark"] body[data-page-context="dashboard"] header.header h1 {
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #4A4A62 !important;
  margin-bottom: 4px !important;
  background: none !important;
  -webkit-text-fill-color: #4A4A62 !important;
}

html[data-theme="dark"] body[data-page-context="dashboard"] .header .header-subtitle,
html[data-theme="dark"] body[data-page-context="dashboard"] header.header .header-subtitle {
  font-size: 1.25rem !important;
  font-weight: 600 !important;
  color: #F0F0FF !important;
}

/* =================================================================
   E) CARDS + SURFACES
   ================================================================= */

html[data-theme="dark"] .card,
html[data-theme="dark"] .rb-card,
html[data-theme="dark"] .section,
html[data-theme="dark"] .content-card,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .rb-section,
html[data-theme="dark"] .widget {
  background: #141419 !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.40) !important;
}

html[data-theme="dark"] .card:hover,
html[data-theme="dark"] .rb-card:hover {
  border-color: rgba(255, 255, 255, 0.10) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.50) !important;
  background: #18181F !important;
}

html[data-theme="dark"] .section-title,
html[data-theme="dark"] .card-title {
  color: #F0F0FF !important;
}

html[data-theme="dark"] .section-subtitle,
html[data-theme="dark"] .card-subtitle {
  color: #8B8BA7 !important;
}

/* Stat / KPI cards */
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .kpi-card,
html[data-theme="dark"] .metric-card,
html[data-theme="dark"] .summary-card {
  background: #141419 !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
}

html[data-theme="dark"] .stat-value,
html[data-theme="dark"] .kpi-value,
html[data-theme="dark"] .metric-value {
  color: #F0F0FF !important;
}

html[data-theme="dark"] .stat-label,
html[data-theme="dark"] .kpi-label {
  color: #8B8BA7 !important;
}

/* =================================================================
   F) TABLES
   ================================================================= */

html[data-theme="dark"] .table-container,
html[data-theme="dark"] .data-table-wrapper {
  background: #141419 !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}

html[data-theme="dark"] table,
html[data-theme="dark"] .data-table,
html[data-theme="dark"] .invoices-table,
html[data-theme="dark"] .pending-table {
  background: #141419 !important;
}

html[data-theme="dark"] thead,
html[data-theme="dark"] thead tr {
  background: #1C1C24 !important;
}

html[data-theme="dark"] th {
  background: #1C1C24 !important;
  color: #5C5C7A !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.09em !important;
  text-transform: uppercase !important;
}

html[data-theme="dark"] td {
  border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
  color: #C0C0D8 !important;
}

html[data-theme="dark"] tr:hover td {
  background: rgba(255, 255, 255, 0.025) !important;
}

/* Alternating rows (subtle) */
html[data-theme="dark"] tbody tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.012) !important;
}

/* =================================================================
   G) FORMS + INPUTS
   ================================================================= */

html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .form-input,
html[data-theme="dark"] .searchable-input {
  background: #1C1C24 !important;
  color: #F0F0FF !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-radius: 8px !important;
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
  color: #4A4A62 !important;
}

html[data-theme="dark"] input:focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] textarea:focus,
html[data-theme="dark"] .form-input:focus {
  background: #20202A !important;
  border-color: #3B7BF7 !important;
  box-shadow: 0 0 0 3px rgba(59, 123, 247, 0.15) !important;
  outline: none !important;
}

html[data-theme="dark"] label,
html[data-theme="dark"] .form-label {
  color: #8B8BA7 !important;
}

html[data-theme="dark"] .form-group {
  border-color: rgba(255, 255, 255, 0.06) !important;
}

/* Search inputs */
html[data-theme="dark"] .search-input,
html[data-theme="dark"] .filter-input {
  background: #1C1C24 !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
  color: #F0F0FF !important;
}

/* Date inputs */
html[data-theme="dark"] .date-input,
html[data-theme="dark"] input[type="date"] {
  background: #1C1C24 !important;
  color: #F0F0FF !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
  color-scheme: dark !important;
}

/* Select dropdowns */
html[data-theme="dark"] select option {
  background: #1C1C24 !important;
  color: #F0F0FF !important;
}

/* =================================================================
   H) BUTTONS
   ================================================================= */

html[data-theme="dark"] .btn-primary,
html[data-theme="dark"] button.btn-primary {
  background: #3B7BF7 !important;
  color: #FFFFFF !important;
  border-color: transparent !important;
  box-shadow: 0 2px 8px rgba(59, 123, 247, 0.28) !important;
}

html[data-theme="dark"] .btn-primary:hover {
  background: #5A93FF !important;
  box-shadow: 0 4px 14px rgba(59, 123, 247, 0.42) !important;
  transform: translateY(-1px) !important;
}

html[data-theme="dark"] .btn-secondary,
html[data-theme="dark"] .btn-outline,
html[data-theme="dark"] button.btn-secondary,
html[data-theme="dark"] button.btn-outline {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #C0C0D8 !important;
}

html[data-theme="dark"] .btn-secondary:hover,
html[data-theme="dark"] .btn-outline:hover {
  background: rgba(255, 255, 255, 0.10) !important;
  border-color: rgba(255, 255, 255, 0.20) !important;
  color: #F0F0FF !important;
}

html[data-theme="dark"] .btn-danger {
  background: rgba(240, 80, 80, 0.15) !important;
  color: #F05050 !important;
  border-color: rgba(240, 80, 80, 0.25) !important;
}

html[data-theme="dark"] .btn-danger:hover {
  background: #F05050 !important;
  color: #FFFFFF !important;
}

html[data-theme="dark"] .btn-success {
  background: rgba(35, 209, 139, 0.15) !important;
  color: #23D18B !important;
  border-color: rgba(35, 209, 139, 0.25) !important;
}

html[data-theme="dark"] .btn-success:hover {
  background: #23D18B !important;
  color: #000000 !important;
}

/* Small buttons */
html[data-theme="dark"] .btn-sm {
  font-size: 0.75rem !important;
}

/* Link buttons */
html[data-theme="dark"] .btn-link {
  color: #5A93FF !important;
  background: transparent !important;
}

html[data-theme="dark"] .btn-link:hover {
  color: #7BABFF !important;
}

/* Filter buttons (table column filters) */
html[data-theme="dark"] .filter-btn {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #8B8BA7 !important;
}

html[data-theme="dark"] .filter-btn.active {
  background: rgba(59, 123, 247, 0.15) !important;
  border-color: rgba(59, 123, 247, 0.30) !important;
  color: #5A93FF !important;
}

/* =================================================================
   I) MODALS + OVERLAYS
   ================================================================= */

html[data-theme="dark"] .modal,
html[data-theme="dark"] .modal-overlay {
  background: rgba(0, 0, 0, 0.65) !important;
  backdrop-filter: blur(4px) !important;
}

html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .modal-dialog {
  background: #141419 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.70) !important;
  border-radius: 16px !important;
}

html[data-theme="dark"] .modal-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  background: #18181F !important;
}

html[data-theme="dark"] .modal-header h3,
html[data-theme="dark"] .modal-title {
  color: #F0F0FF !important;
}

html[data-theme="dark"] .modal-body {
  background: #141419 !important;
  color: #C0C0D8 !important;
}

html[data-theme="dark"] .modal-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  background: #18181F !important;
}

html[data-theme="dark"] .modal-close {
  color: #8B8BA7 !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] .modal-close:hover {
  background: rgba(255, 255, 255, 0.10) !important;
  color: #F0F0FF !important;
}

/* Article-modal-* (used on articles, pickup-locations, construction-sites) */
html[data-theme="dark"] .article-modal-overlay {
  background: rgba(0, 0, 0, 0.72) !important;
  backdrop-filter: blur(6px) !important;
}

html[data-theme="dark"] .article-modal-container {
  background: #141419 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.75) !important;
}

html[data-theme="dark"] .article-modal-header {
  background: #18181F !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
}

html[data-theme="dark"] .article-modal-title {
  color: #F0F0FF !important;
}

html[data-theme="dark"] .article-modal-close {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #8B8BA7 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] .article-modal-close:hover {
  background: #ef4444 !important;
  color: #fff !important;
}

html[data-theme="dark"] .article-modal-body {
  background: #141419 !important;
  color: #C0C0D8 !important;
}

html[data-theme="dark"] .article-modal-footer {
  background: #18181F !important;
  border-top: 1px solid rgba(255, 255, 255, 0.07) !important;
}

html[data-theme="dark"] .modal-section {
  background: #18181F !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
}

html[data-theme="dark"] .modal-section h4 {
  border-bottom: 2px solid rgba(255, 255, 255, 0.08) !important;
  /* color overridden per page-context in page-banners.css */
}

/* Dropdown menus */
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .search-dropdown {
  background: #18181F !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.60) !important;
}

html[data-theme="dark"] .dropdown-item,
html[data-theme="dark"] .search-dropdown-item {
  color: #C0C0D8 !important;
}

html[data-theme="dark"] .dropdown-item:hover,
html[data-theme="dark"] .search-dropdown-item:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  color: #F0F0FF !important;
}

/* =================================================================
   J) PAGE BACKGROUNDS (override Unsplash photos for dark mode)
   ================================================================= */

html[data-theme="dark"] .dashboard-hero-photo::before,
html[data-theme="dark"] [class*="-page-photo"]::before,
html[data-theme="dark"] .page-header-with-photo::before {
  opacity: 0 !important;
  display: none !important;
}

/* Page background overlay from page-backgrounds.css */
html[data-theme="dark"] body::after {
  display: none !important;
}

/* =================================================================
   K) STATUS BADGES + TAGS
   ================================================================= */

/* Status badges: keep semantic colors vivid on dark */
html[data-theme="dark"] .badge,
html[data-theme="dark"] .status-badge,
html[data-theme="dark"] .tag {
  font-size: 0.6875rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
}

html[data-theme="dark"] .badge-success,
html[data-theme="dark"] .status-paid,
html[data-theme="dark"] .status-PAID {
  background: rgba(35, 209, 139, 0.15) !important;
  color: #23D18B !important;
  border: 1px solid rgba(35, 209, 139, 0.25) !important;
}

html[data-theme="dark"] .badge-warning,
html[data-theme="dark"] .status-open,
html[data-theme="dark"] .status-OPEN,
html[data-theme="dark"] .status-pending {
  background: rgba(240, 160, 32, 0.15) !important;
  color: #F0A020 !important;
  border: 1px solid rgba(240, 160, 32, 0.25) !important;
}

html[data-theme="dark"] .badge-danger,
html[data-theme="dark"] .status-overdue,
html[data-theme="dark"] .status-OVERDUE,
html[data-theme="dark"] .status-cancelled,
html[data-theme="dark"] .status-CANCELLED {
  background: rgba(240, 80, 80, 0.15) !important;
  color: #F05050 !important;
  border: 1px solid rgba(240, 80, 80, 0.25) !important;
}

html[data-theme="dark"] .badge-info,
html[data-theme="dark"] .status-partial,
html[data-theme="dark"] .status-PARTIALLY_PAID {
  background: rgba(80, 200, 240, 0.15) !important;
  color: #50C8F0 !important;
  border: 1px solid rgba(80, 200, 240, 0.25) !important;
}

/* =================================================================
   L) PAGINATION
   ================================================================= */

html[data-theme="dark"] .pagination,
html[data-theme="dark"] .pagination-wrapper {
  color: #8B8BA7 !important;
}

html[data-theme="dark"] .pagination-btn,
html[data-theme="dark"] .page-btn {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  color: #8B8BA7 !important;
  border-radius: 6px !important;
}

html[data-theme="dark"] .pagination-btn:hover,
html[data-theme="dark"] .page-btn:hover {
  background: rgba(255, 255, 255, 0.09) !important;
  color: #F0F0FF !important;
}

html[data-theme="dark"] .pagination-btn.active,
html[data-theme="dark"] .page-btn.active {
  background: #3B7BF7 !important;
  border-color: #3B7BF7 !important;
  color: #FFFFFF !important;
}

html[data-theme="dark"] .pagination-btn:disabled {
  opacity: 0.3 !important;
  cursor: not-allowed !important;
}

html[data-theme="dark"] .pagination-info {
  color: #5C5C7A !important;
}

/* =================================================================
   M) SCROLLBARS
   ================================================================= */

html[data-theme="dark"] ::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

html[data-theme="dark"] ::-webkit-scrollbar-track {
  background: transparent;
}

html[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.10);
  border-radius: 3px;
}

html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background-color: rgba(255, 255, 255, 0.18);
}

/* =================================================================
   N) PAGE-SPECIFIC OVERRIDES
   ================================================================= */

/* --- Dashboard --- */
html[data-theme="dark"] body[data-page-context="dashboard"] .dashboard-stats,
html[data-theme="dark"] body[data-page-context="dashboard"] .stats-grid {
  background: transparent !important;
}

html[data-theme="dark"] body[data-page-context="dashboard"] .stat-card {
  background: #141419 !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
}

html[data-theme="dark"] body[data-page-context="dashboard"] .rb-section,
html[data-theme="dark"] body[data-page-context="dashboard"] .dashboard-section {
  background: #141419 !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* --- Invoices / Rechnungen --- */
html[data-theme="dark"] .pending-card {
  background: #141419 !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
}

html[data-theme="dark"] .pending-card:hover {
  background: #18181F !important;
  border-color: rgba(59, 123, 247, 0.20) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45) !important;
}

html[data-theme="dark"] .pending-tab {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  color: #8B8BA7 !important;
}

html[data-theme="dark"] .pending-tab.active {
  background: rgba(59, 123, 247, 0.12) !important;
  border-color: rgba(59, 123, 247, 0.25) !important;
  color: #5A93FF !important;
}

/* --- Cashbook --- */
html[data-theme="dark"] body[data-page-context="kassenbuch"] .cb-header-row,
html[data-theme="dark"] body[data-page-context="kassenbuch"] .cashbook-header {
  background: #141419 !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* --- Settings --- */
html[data-theme="dark"] .settings-section,
html[data-theme="dark"] .settings-card {
  background: #141419 !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
}

html[data-theme="dark"] .settings-label {
  color: #8B8BA7 !important;
}

/* --- Empty states --- */
html[data-theme="dark"] .empty-state {
  background: transparent !important;
}

html[data-theme="dark"] .empty-state h3 {
  color: #E0E0F0 !important;
}

html[data-theme="dark"] .empty-state p {
  color: #8B8BA7 !important;
}

/* =================================================================
   O) TRIAL BANNER + TOASTS
   ================================================================= */

html[data-theme="dark"] .trial-banner,
html[data-theme="dark"] .rb-trial-banner {
  background: linear-gradient(135deg, #141419 0%, #1C1C24 100%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  color: #C0C0D8 !important;
}

html[data-theme="dark"] .toast {
  background: #1C1C24 !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55) !important;
  color: #E0E0F0 !important;
}

/* =================================================================
   Q) THEME TOGGLE BUTTON (sidebar footer)
   ================================================================= */

.premium-theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.10);
  background: rgba(0, 0, 0, 0.05);
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s, transform 0.15s;
  flex-shrink: 0;
  margin-left: 4px;
  color: #6b7280;
}

.premium-theme-toggle:hover {
  background: rgba(0, 0, 0, 0.09);
  border-color: rgba(0, 0, 0, 0.18);
  color: #1f2937;
  transform: scale(1.08);
}

/* In dark mode: show sun icon (to switch to light), hide moon */
html[data-theme="dark"] .premium-theme-toggle .icon-moon,
html[data-theme="light"] .premium-theme-toggle .icon-sun {
  display: none;
}

/* In light mode: show moon icon (to switch to dark), hide sun */
html[data-theme="light"] .premium-theme-toggle .icon-moon,
html[data-theme="dark"] .premium-theme-toggle .icon-sun {
  display: block;
}

/* Default (auto): show moon (switch to dark if system=light) */
html:not([data-theme]) .premium-theme-toggle .icon-moon,
html[data-theme="auto"] .premium-theme-toggle .icon-moon {
  display: block;
}
html:not([data-theme]) .premium-theme-toggle .icon-sun,
html[data-theme="auto"] .premium-theme-toggle .icon-sun {
  display: none;
}

/* Dark mode toggle button styling */
html[data-theme="dark"] .premium-theme-toggle {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
  color: #8B8BA7 !important;
}

html[data-theme="dark"] .premium-theme-toggle:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.20) !important;
  color: #F0F0FF !important;
  transform: scale(1.08) !important;
}

/* Sidebar footer layout adjustment to fit the toggle */
.premium-sidebar-footer {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 12px 16px !important;
}

.premium-user-profile {
  flex: 1 !important;
  min-width: 0 !important;
}

/* =================================================================
   R) DARK MODE — STRONGER CONTRAST OVERRIDES
   Extra rules that make dark mode unmistakably different.
   ================================================================= */

/* Override layout.css light background on main-content */
html[data-theme="dark"] .main-content {
  background: #0D0D14 !important;
  min-height: 100vh !important;
}

/* Page body background — cover every container */
html[data-theme="dark"] body,
html[data-theme="dark"] .app-layout,
html[data-theme="dark"] .layout-wrapper,
html[data-theme="dark"] #app {
  background: #0D0D14 !important;
}

/* Content-wrapper white background (layout.css line 543) */
html[data-theme="dark"] .content-wrapper,
html[data-theme="dark"] .content-section,
html[data-theme="dark"] .data-section,
html[data-theme="dark"] .list-section,
html[data-theme="dark"] .table-section {
  background: #141419 !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 12px !important;
}

/* apple-design-system.css overrides — reset Apple white surfaces */
html[data-theme="dark"] .rb-card,
html[data-theme="dark"] .card-body,
html[data-theme="dark"] .card-header,
html[data-theme="dark"] .section-card,
html[data-theme="dark"] .form-card,
html[data-theme="dark"] .list-card {
  background: #141419 !important;
  border-color: rgba(255, 255, 255, 0.07) !important;
  color: #C0C0D8 !important;
}

/* Strong text overrides — ensure text is light */
html[data-theme="dark"] h1, html[data-theme="dark"] h2,
html[data-theme="dark"] h3, html[data-theme="dark"] h4,
html[data-theme="dark"] h5, html[data-theme="dark"] h6 {
  color: #F0F0FF !important;
  -webkit-text-fill-color: #F0F0FF !important;
}

/* Exception: page-title stays as breadcrumb label in dark */
html[data-theme="dark"] h1.page-title,
html[data-theme="dark"] .page-title,
html[data-theme="dark"] .header-title {
  color: #F0F0FF !important;
  -webkit-text-fill-color: #F0F0FF !important;
}

/* Paragraphs and spans */
html[data-theme="dark"] p,
html[data-theme="dark"] span:not(.badge):not(.status-badge):not(.nav-upgrade-badge) {
  color: #C0C0D8 !important;
}

/* Navigation text — should NOT get overridden by paragraph rule */
html[data-theme="dark"] .premium-nav-link {
  color: #8B8BA7 !important;
}
html[data-theme="dark"] .premium-nav-link.active {
  color: #5A93FF !important;
}

/* apple-near-black override for dark mode */
html[data-theme="dark"] {
  --apple-near-black: #F0F0FF;
  --apple-gray: #8B8BA7;
  --apple-light-gray: #1C1C24;
  --apple-white: #141419;
  --apple-secondary-label: #8B8BA7;
}

/* Dividers and separators */
html[data-theme="dark"] hr,
html[data-theme="dark"] .divider,
html[data-theme="dark"] .separator {
  border-color: rgba(255, 255, 255, 0.06) !important;
}

/* Links */
html[data-theme="dark"] a:not(.btn):not(.premium-nav-link):not(.premium-mobile-nav-item) {
  color: #5A93FF !important;
}

html[data-theme="dark"] a:not(.btn):not(.premium-nav-link):hover {
  color: #7BABFF !important;
}

/* Filter controls bar */
html[data-theme="dark"] .filter-controls {
  background: #141419 !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 10px !important;
}

/* Notification/info boxes */
html[data-theme="dark"] .info-box,
html[data-theme="dark"] .alert,
html[data-theme="dark"] .notice {
  background: #18181F !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/* =================================================================
   P) PRINT — always light, unchanged
   ================================================================= */

@media print {
  html[data-theme="dark"] body {
    background: white !important;
    color: black !important;
  }

  html[data-theme="dark"] .premium-sidebar,
  html[data-theme="dark"] .premium-mobile-header,
  html[data-theme="dark"] .premium-mobile-nav {
    display: none !important;
  }
}