/*!
 * Werk Brüggen – App-Theme (Hell / Dunkel)
 * Beide Modi: festes Farbschema, keine Nutzer-Anpassungen.
 */

/* ------------------------------------------------------------------------- */
/* Hell — festes Schema                                                      */
/* ------------------------------------------------------------------------- */
html[data-wb-theme="light"] {
  color-scheme: light;
  --wb-primary: #2563eb;
  --wb-primary-rgb: 37, 99, 235;
  --wb-accent: #0d9488;
  --wb-accent-rgb: 13, 148, 136;
  --wb-surface: #f1f5f9;
  --wb-elevated: #ffffff;
  --wb-text: #0f172a;
  --wb-muted: #64748b;
  --wb-border: rgba(15, 23, 42, 0.08);
  --bs-primary: var(--wb-primary);
  --bs-primary-rgb: var(--wb-primary-rgb);
  --bs-link-color: var(--wb-primary);
  --bs-link-hover-color: var(--wb-primary);
  --bs-body-bg: var(--wb-surface);
  --bs-body-color: var(--wb-text);
  --bs-border-color: rgba(15, 23, 42, 0.1);
  --bs-secondary: #64748b;
  --bs-secondary-rgb: 100, 116, 139;
}

html[data-wb-theme="light"] body.sb-nav-fixed {
  background-color: var(--wb-surface);
}

html[data-wb-theme="light"] #layoutSidenav_content {
  background: linear-gradient(180deg, var(--wb-surface) 0%, color-mix(in srgb, var(--wb-surface) 92%, var(--wb-primary)) 100%);
}

@supports not (background: color-mix(in srgb, white 50%, black)) {
  html[data-wb-theme="light"] #layoutSidenav_content {
    background: var(--wb-surface);
  }
}

html[data-wb-theme="light"] .sb-topnav.navbar-dark.bg-dark {
  background-color: var(--wb-elevated) !important;
  background-image: none !important;
  border-bottom: 1px solid var(--wb-border);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

html[data-wb-theme="light"] .sb-topnav .navbar-brand,
html[data-wb-theme="light"] .sb-topnav .nav-link,
html[data-wb-theme="light"] .sb-topnav .text-white-50 {
  color: var(--wb-text) !important;
}

html[data-wb-theme="light"] .sb-topnav .btn-link {
  color: var(--wb-muted) !important;
}

html[data-wb-theme="light"] .sb-topnav .form-control {
  background-color: #f8fafc;
  border-color: var(--wb-border);
  color: var(--wb-text);
}

html[data-wb-theme="light"] .sb-topnav .btn-primary {
  --bs-btn-bg: var(--wb-primary);
  --bs-btn-border-color: var(--wb-primary);
}

html[data-wb-theme="light"] .sb-topnav .btn-primary:hover {
  filter: brightness(0.92);
}

html[data-wb-theme="light"] .sb-topnav .badge.bg-secondary {
  background-color: #e2e8f0 !important;
  color: var(--wb-muted) !important;
}

html[data-wb-theme="light"] #layoutSidenav_nav .sb-sidenav.sb-sidenav-dark {
  background-color: var(--wb-elevated) !important;
  background-image: none !important;
  border-right: 1px solid var(--wb-border);
}

html[data-wb-theme="light"] .sb-sidenav-dark .sb-sidenav-menu-heading,
html[data-wb-theme="light"] .sb-sidenav-dark .nav-link {
  color: rgba(15, 23, 42, 0.82) !important;
}

html[data-wb-theme="light"] .sb-sidenav-dark .nav-link:hover {
  color: var(--wb-primary) !important;
}

html[data-wb-theme="light"] .sb-sidenav-dark .sb-sidenav-menu-nested .nav-link {
  color: rgba(15, 23, 42, 0.72) !important;
}

html[data-wb-theme="light"] .sb-sidenav-dark .sb-sidenav-footer {
  background-color: #f8fafc !important;
  color: var(--wb-muted) !important;
  border-top: 1px solid var(--wb-border);
}

html[data-wb-theme="light"] .sb-sidenav-dark .sb-sidenav-footer .small {
  color: var(--wb-muted) !important;
}

html[data-wb-theme="light"] .sb-sidenav-dark .sb-nav-link-icon {
  color: var(--wb-accent) !important;
}

html[data-wb-theme="light"] .sb-sidenav .wb-nav-admin-heading {
  border-top-color: var(--wb-border);
}

html[data-wb-theme="light"] .card {
  border-radius: 0.75rem;
  border-color: var(--wb-border);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  background-color: var(--wb-elevated);
}

html[data-wb-theme="light"] .card-header {
  background-color: rgba(248, 250, 252, 0.95);
  border-bottom-color: var(--wb-border);
  font-weight: 600;
}

html[data-wb-theme="light"] footer.bg-light {
  background-color: var(--wb-elevated) !important;
  border-top: 1px solid var(--wb-border) !important;
}

html[data-wb-theme="light"] .dropdown-menu {
  border-radius: 0.65rem;
  border: 1px solid var(--wb-border);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}

html[data-wb-theme="light"] .modal-content {
  border-radius: 0.85rem;
  border: 1px solid var(--wb-border);
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.12);
}

html[data-wb-theme="light"] .breadcrumb {
  --bs-breadcrumb-divider-color: var(--wb-muted);
}

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

/* Akzent: sekundäre Buttons / Links in Sidebar-Unterpunkten */
html[data-wb-theme="light"] .btn-outline-primary {
  --bs-btn-color: var(--wb-primary);
  --bs-btn-border-color: var(--wb-primary);
}

html[data-wb-theme="light"] .btn-outline-success {
  --bs-btn-color: var(--wb-accent);
  --bs-btn-border-color: var(--wb-accent);
}

/* ------------------------------------------------------------------------- */
/* Dunkel — festes Schema (Schiefer / Blau)                                  */
/* ------------------------------------------------------------------------- */
html[data-wb-theme="dark"] {
  color-scheme: dark;
  --wb-d-bg: #0b1120;
  --wb-d-surface: #111827;
  --wb-d-elevated: #1e293b;
  --wb-d-text: #e2e8f0;
  --wb-d-muted: #94a3b8;
  --wb-d-border: rgba(148, 163, 184, 0.18);
  --bs-primary: #38bdf8;
  --bs-primary-rgb: 56, 189, 248;
  --bs-link-color: #7dd3fc;
  --bs-link-hover-color: #bae6fd;
  --bs-body-bg: var(--wb-d-bg);
  --bs-body-color: var(--wb-d-text);
  --bs-border-color: var(--wb-d-border);
  --bs-secondary: #94a3b8;
  --bs-secondary-rgb: 148, 163, 184;
  --bs-dark: #0f172a;
  --bs-light: #334155;
}

html[data-wb-theme="dark"] body.sb-nav-fixed {
  background-color: var(--wb-d-bg);
}

html[data-wb-theme="dark"] #layoutSidenav_content {
  background: radial-gradient(900px 500px at 15% 0%, rgba(56, 189, 248, 0.12), transparent 55%),
    radial-gradient(800px 480px at 85% 5%, rgba(99, 102, 241, 0.1), transparent 50%),
    var(--wb-d-bg);
}

html[data-wb-theme="dark"] .sb-topnav.navbar-dark.bg-dark {
  background-color: #020617 !important;
  background-image: none !important;
  border-bottom: 1px solid var(--wb-d-border);
}

html[data-wb-theme="dark"] .sb-topnav .form-control {
  background-color: rgba(15, 23, 42, 0.65);
  border-color: var(--wb-d-border);
  color: var(--wb-d-text);
}

html[data-wb-theme="dark"] #layoutSidenav_nav .sb-sidenav.sb-sidenav-dark {
  background-color: #020617 !important;
  background-image: none !important;
  border-right: 1px solid var(--wb-d-border);
}

html[data-wb-theme="dark"] .sb-sidenav-dark .sb-sidenav-footer {
  background-color: rgba(2, 6, 23, 0.95) !important;
}

html[data-wb-theme="dark"] .card {
  background-color: rgba(30, 41, 59, 0.75);
  border-color: rgba(148, 163, 184, 0.12);
  border-radius: 0.75rem;
  color: var(--wb-d-text);
  backdrop-filter: blur(8px);
}

html[data-wb-theme="dark"] .card-header {
  background-color: rgba(15, 23, 42, 0.5);
  border-bottom-color: rgba(148, 163, 184, 0.12);
  color: var(--wb-d-text);
}

html[data-wb-theme="dark"] .form-control,
html[data-wb-theme="dark"] .form-select {
  background-color: rgba(15, 23, 42, 0.55);
  border-color: var(--wb-d-border);
  color: var(--wb-d-text);
}

html[data-wb-theme="dark"] .form-control::placeholder {
  color: rgba(203, 213, 225, 0.82);
}

html[data-wb-theme="dark"] .form-text {
  color: var(--wb-d-muted);
}

/* Lager-Konfiguration: Hilfstexte & Code-Hinweise im Dunkelmodus gut lesbar */
html[data-wb-theme="dark"] #wb-lager-cfg-root .form-label code.wb-cfg-code-hint {
  color: #bae6fd;
  background-color: rgba(56, 189, 248, 0.12);
  padding: 0.12em 0.4em;
  border-radius: 0.25rem;
  font-size: 0.9em;
}

html[data-wb-theme="dark"] footer.bg-light {
  background-color: rgba(15, 23, 42, 0.92) !important;
  border-top: 1px solid var(--wb-d-border) !important;
  color: var(--wb-d-text);
}

html[data-wb-theme="dark"] footer.bg-light .text-muted {
  color: #e2e8f0 !important;
}

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

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

html[data-wb-theme="dark"] .dropdown-item:hover {
  background-color: rgba(56, 189, 248, 0.12);
  color: #f8fafc;
}

html[data-wb-theme="dark"] .dropdown-header {
  color: var(--wb-d-muted);
}

html[data-wb-theme="dark"] .modal-content {
  background-color: var(--wb-d-elevated);
  border: 1px solid var(--wb-d-border);
  color: var(--wb-d-text);
}

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

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

html[data-wb-theme="dark"] .table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--wb-d-text);
  border-color: var(--wb-d-border);
}

html[data-wb-theme="dark"] .table > :not(caption) > * > * {
  border-bottom-color: rgba(148, 163, 184, 0.12);
}

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

/* To-do-Deadline-Badges (werk-brueggen.css: dunkle Schrift auf hellem Gelb/Rot) */
html[data-wb-theme="dark"] .wb-due-soon,
html[data-wb-theme="dark"] label.wb-due-soon {
  color: #fef9c3 !important;
  background: rgba(202, 138, 4, 0.55) !important;
  border: 1px solid rgba(250, 204, 21, 0.65);
}

html[data-wb-theme="dark"] .wb-due-urgent,
html[data-wb-theme="dark"] label.wb-due-urgent {
  color: #fee2e2 !important;
  background: rgba(185, 28, 28, 0.55) !important;
  border: 1px solid rgba(248, 113, 113, 0.65);
}

/*
 * Tagebuch: SB-Admin styles.css setzt .text-muted auf #6c757d !important — auf dunklen Karten
 * fast unsichtbar. Hier höhere Spezifität + Meta-Zeile/Autor explizit auf Theme-Farben.
 */
html[data-wb-theme="dark"] #wb-tagebuch-list .wb-tagebuch-entry {
  color: var(--wb-d-text);
}

html[data-wb-theme="dark"] #wb-tagebuch-list .wb-tagebuch-entry .wb-tagebuch-meta,
html[data-wb-theme="dark"] #wb-tagebuch-list .wb-tagebuch-entry .wb-tagebuch-meta .text-muted,
html[data-wb-theme="dark"] #wb-tagebuch-list .wb-tagebuch-entry .wb-tagebuch-updated {
  color: var(--wb-d-muted) !important;
}

html[data-wb-theme="dark"] #wb-tagebuch-list .wb-tagebuch-entry .wb-tagebuch-meta strong.text-body,
html[data-wb-theme="dark"] #wb-tagebuch-list .wb-tagebuch-entry .wb-tagebuch-author {
  color: var(--wb-d-text) !important;
}

html[data-wb-theme="dark"] #wb-tagebuch-list .wb-tagebuch-entry .wb-tagebuch-entry-title {
  color: var(--wb-d-text);
}

html[data-wb-theme="dark"] #wb-tagebuch-list .wb-tagebuch-entry .wb-tagebuch-text {
  color: var(--wb-d-text);
}

html[data-wb-theme="dark"] #wb-tagebuch-list .wb-tagebuch-entry .wb-tagebuch-text a {
  color: var(--bs-link-color);
}

html[data-wb-theme="dark"] #wb-tagebuch-list > p.text-muted {
  color: var(--wb-d-muted) !important;
}

/* To-do-Board Detail: eingelassene Panels (Checkliste, Historie) — kein hartes bg-white/bg-light */
html[data-wb-theme="light"] #wb-bd-clist.wb-bd-inset-panel,
html[data-wb-theme="light"] #wb-bd-activity.wb-bd-inset-panel {
  background-color: var(--wb-elevated);
  border-color: var(--wb-border) !important;
  color: var(--wb-text);
}

html[data-wb-theme="dark"] #wb-bd-clist.wb-bd-inset-panel,
html[data-wb-theme="dark"] #wb-bd-activity.wb-bd-inset-panel {
  background-color: rgba(15, 23, 42, 0.55);
  border-color: var(--wb-d-border) !important;
  color: var(--wb-d-text);
}

html[data-wb-theme="light"] #wb-bd-activity .wb-bd-act-item {
  border-bottom-color: rgba(15, 23, 42, 0.1) !important;
}

html[data-wb-theme="dark"] #wb-bd-activity .wb-bd-act-item {
  border-bottom-color: rgba(148, 163, 184, 0.2) !important;
}

/* ------------------------------------------------------------------------- */
/* Login / Auth-Seiten                                                       */
/* ------------------------------------------------------------------------- */
html[data-wb-theme="light"] body.wb-auth-page {
  background: linear-gradient(145deg, var(--wb-primary) 0%, color-mix(in srgb, var(--wb-primary) 65%, #0f172a) 100%) !important;
}

html[data-wb-theme="dark"] body.wb-auth-page {
  background: linear-gradient(145deg, #0f172a 0%, #020617 50%, #0c4a6e 100%) !important;
}

html[data-wb-theme="dark"] body.wb-auth-page .card {
  background-color: rgba(30, 41, 59, 0.92);
  border-color: rgba(148, 163, 184, 0.15);
}

html[data-wb-theme="light"] body.wb-auth-page .card-header,
html[data-wb-theme="dark"] body.wb-auth-page .card-header {
  background: transparent;
}

/* Markenzeile unter Auth-Karten (z. B. login.php, benutzer-reauth.php) */
.wb-auth-page .wb-auth-page-footer-brand {
  font-size: 1.15rem;
}

/* Theme-Steuerung Navbar */
.wb-theme-nav-btn {
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

html[data-wb-theme="light"] .wb-theme-nav-btn {
  background: rgba(15, 23, 42, 0.06);
  border: 1px solid var(--wb-border);
  color: var(--wb-text);
}

html[data-wb-theme="dark"] .wb-theme-nav-btn {
  background: rgba(148, 163, 184, 0.12);
  border: 1px solid var(--wb-d-border);
  color: #e2e8f0;
}

.wb-theme-nav-btn:hover {
  filter: brightness(1.08);
}

/* Login: schwebender Theme-Knopf */
.wb-auth-theme-fab {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 1050;
}

html[data-wb-theme="light"] .sb-sidenav-dark .nav-link.active {
  background-color: rgba(var(--wb-primary-rgb), 0.12) !important;
  color: var(--wb-primary) !important;
}

html[data-wb-theme="dark"] .sb-sidenav-dark .nav-link.active {
  background-color: rgba(56, 189, 248, 0.12) !important;
  color: #e0f2fe !important;
}

/* Login: Floating-Label bei Browser-Autofill */
.wb-auth-page .form-floating > .form-control:-webkit-autofill ~ label {
  opacity: 0.65;
  transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
}