/* ================================================================
   Querenburg – Design System
   Fonts:   Lora (Überschriften) · DM Sans (UI) · JetBrains Mono (Zahlen)
   Palette: Tintenblau-Sidebar · Amber-Akzent · Warmes Off-White
   ================================================================ */

/* ── Marken-Variablen ──────────────────────────────────────── */
:root {
  --qb-ink-950:   #0d1b2a;
  --qb-ink-900:   #152238;
  --qb-ink-800:   #1e3a5f;
  --qb-ink-700:   #1a5276;

  --qb-amber-400: #fbbf24;
  --qb-amber-500: #f59e0b;
  --qb-amber-600: #d97706;
  --qb-amber-700: #b45309;
  --qb-amber-800: #92400e;

  --qb-sky-300:   #7dd3fc;

  --qb-warm-50:   #faf9f7;
  --qb-warm-100:  #f5f3ef;
  --qb-warm-200:  #e8e4dc;
  --qb-warm-300:  #d4cfc5;

  /* CoreUI-Primärfarbe überschreiben */
  --cui-primary:           #1a5276;
  --cui-primary-rgb:       26, 82, 118;
  --cui-link-color:        var(--qb-ink-700);
  --cui-link-color-rgb:    26, 82, 118;
  --cui-link-hover-color:  var(--qb-ink-800);

  /* Schriften */
  --cui-font-sans-serif: 'Inter', system-ui, -apple-system, sans-serif;
  --qb-font-serif:       'Lora', Georgia, 'Times New Roman', serif;
  --qb-font-mono:        'JetBrains Mono', 'Courier New', monospace;

  /* Hintergrund + Rahmen */
  --cui-body-bg:     var(--qb-warm-50);
  --cui-border-color: var(--qb-warm-200);

  /* Sidebar-Breite */
  --cui-sidebar-width: 230px;
}

/* Dark-Mode */
[data-coreui-theme="dark"] {
  --cui-body-bg:      #0c111a;
  --cui-border-color: #1e2d3d;
  --qb-warm-50:       #0c111a;
  --qb-warm-100:      #111a28;
  --qb-warm-200:      #1e2d3d;
  --qb-warm-300:      #2a3f55;
}

/* ── Basis-Typografie ──────────────────────────────────────── */
body {
  font-family: var(--cui-font-sans-serif);
  font-size: 1rem;
  font-variant-numeric: slashed-zero;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: var(--qb-warm-50);
}

h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4 {
  font-family: var(--qb-font-serif);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.3;
}

/* ── Sidebar ───────────────────────────────────────────────── */
.sidebar.sidebar-dark {
  --cui-sidebar-bg:                       var(--qb-ink-950);
  --cui-sidebar-color:                    rgba(255,255,255,.72);
  --cui-sidebar-nav-link-color:           rgba(255,255,255,.65);
  --cui-sidebar-nav-link-icon-color:      rgba(255,255,255,.4);
  --cui-sidebar-nav-link-hover-bg:        rgba(251,191,36,.12);
  --cui-sidebar-nav-link-hover-color:     var(--qb-amber-400);
  --cui-sidebar-nav-link-hover-icon-color:var(--qb-amber-400);
  --cui-sidebar-nav-link-active-bg:       rgba(251,191,36,.18);
  --cui-sidebar-nav-link-active-color:    var(--qb-amber-400);
  --cui-sidebar-nav-link-active-icon-color:var(--qb-amber-400);
  --cui-sidebar-nav-title-color:          #3d5166;
  --cui-sidebar-border-color:             var(--qb-ink-900);
  border-color: var(--qb-ink-900) !important;
  background: var(--qb-ink-950);
}

.sidebar-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--qb-ink-900) !important;
}

.sidebar-brand-full {
  font-family: var(--qb-font-serif);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #fff;
}

.sidebar-brand-narrow {
  font-family: var(--qb-font-serif);
  font-weight: 700;
  color: var(--qb-amber-400);
}

.sidebar-nav .nav-link {
  font-size: 0.875rem;
  padding: 0.45rem 1.25rem;
  border-radius: 0;
  transition: background-color 0.12s ease, color 0.12s ease;
  gap: 0.625rem;
}

.sidebar-nav .nav-title {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding-top: 1rem;
  padding-bottom: 0.25rem;
}

.sidebar-nav .nav-divider {
  border-top: 1px solid var(--qb-ink-900);
  margin: 0.375rem 0;
}

/* ── Einklappbare Nav-Sektionen ───────────────────────────── */
.sidebar-nav .qb-nav-toggle {
  display: flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
  font-size: 0.72rem;
}
.sidebar-nav .qb-nav-toggle:hover {
  opacity: .75;
}
.qb-nav-chevron {
  display: block;
  width: 0.65rem !important;
  height: 0.65rem !important;
  min-width: 0.65rem;
  min-height: 0.65rem;
  margin-left: auto;
  flex-shrink: 0;
  opacity: .5;
  fill: currentColor;
  transition: transform .2s ease;
}
.qb-nav-toggle.qb-collapsed .qb-nav-chevron {
  transform: rotate(-90deg);
}
.sidebar-nav .qb-nav-toggle.qb-after-collapsed {
  padding-top: 0.3rem;
}

.sidebar-footer {
  border-top: 1px solid var(--qb-ink-900) !important;
}

/* ── Sidebar-Breite (Layout) ───────────────────────────────── */
@media (min-width: 992px) {
  .sidebar:not(.hide):not(.sidebar-narrow):not(.sidebar-narrow-unfoldable:not(:hover)):not(.sidebar-narrow-unfoldable):not(.sidebar-overlaid):not(.sidebar-end) ~ * {
    --cui-sidebar-occupy-start: var(--cui-sidebar-width, 16rem);
  }
  .wrapper {
    margin-inline-start: var(--cui-sidebar-occupy-start, 0);
    transition: margin-inline-start 0.15s;
  }
}

/* ── Header ────────────────────────────────────────────────── */
.header {
  background: #fff;
  border-bottom: 1px solid var(--cui-border-color);
  box-shadow: 0 1px 0 rgba(0,0,0,.04);
}

[data-coreui-theme="dark"] .header {
  background: #111822;
  border-bottom-color: #1e2d3d;
}

.breadcrumb {
  font-size: 0.8125rem;
}

/* ── Cards ─────────────────────────────────────────────────── */
.card {
  border: 1px solid var(--qb-warm-200);
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px rgba(0,0,0,.05), 0 1px 2px rgba(0,0,0,.03);
  overflow: hidden;
}

.card-header {
  background: #fff;
  border-bottom: 1px solid var(--qb-warm-200);
  padding: 0.875rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.005em;
}

[data-coreui-theme="dark"] .card-header {
  background: var(--cui-card-bg);
  border-bottom-color: #1e2d3d;
}

/* ── Tabellen ──────────────────────────────────────────────── */
.table {
  font-size: 1rem;
  margin-bottom: 0;
}

.table > thead > tr > th {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  white-space: nowrap;
  vertical-align: middle;
}

.table > tbody > tr > td {
  padding-top: 0.525rem;
  padding-bottom: 0.525rem;
  vertical-align: middle;
}

/* Zahlen: Mono + tabulare Ziffern */
.qb-mono {
  font-family: var(--qb-font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  font-size: 1rem;
}

/* Sortierbare Header-Links */
a.sort-link {
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}
a.sort-link:hover { opacity: 0.75; }

.sort-icon {
  font-size: 0.7em;
  vertical-align: middle;
  opacity: 0.6;
}

/* ── Buttons ───────────────────────────────────────────────── */
.btn {
  font-weight: 500;
  font-size: 0.875rem;
  letter-spacing: 0.01em;
}

.btn-primary {
  --cui-btn-bg:               var(--qb-ink-700);
  --cui-btn-border-color:     var(--qb-ink-700);
  --cui-btn-hover-bg:         var(--qb-ink-800);
  --cui-btn-hover-border-color: var(--qb-ink-800);
  --cui-btn-active-bg:        var(--qb-ink-800);
  --cui-btn-color:            #fff;
  --cui-btn-hover-color:      #fff;
}

.btn-outline-primary {
  --cui-btn-color:            var(--qb-ink-700);
  --cui-btn-border-color:     var(--qb-ink-700);
  --cui-btn-hover-bg:         var(--qb-ink-700);
  --cui-btn-hover-color:      #fff;
  --cui-btn-hover-border-color: var(--qb-ink-700);
}

.btn-outline-secondary {
  font-size: 0.8125rem;
}

/* ── Formularfelder ────────────────────────────────────────── */
.form-control:focus,
.form-select:focus {
  border-color: var(--qb-ink-700);
  box-shadow: 0 0 0 0.2rem rgba(26, 82, 118, 0.18);
}

.form-label {
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 0.35rem;
  color: var(--cui-body-color);
  opacity: 0.85;
}

/* ── Badges ────────────────────────────────────────────────── */
.badge {
  font-weight: 600;
  font-size: 0.68rem;
  letter-spacing: 0.03em;
  padding: 0.28em 0.55em;
  border-radius: 0.3rem;
}

/* Status-Farben (Auftragsstatus) */
.bg-eingang-status           { background-color: #64748b !important; color: #fff !important; }
.bg-kv_versandt-status       { background-color: #2563eb !important; color: #fff !important; }
.bg-ab_eingetroffen-status   { background-color: #0891b2 !important; color: #fff !important; }
.bg-rechnung_versandt-status { background-color: #d97706 !important; color: #fff !important; }
.bg-ze_versandt-status       { background-color: #7c3aed !important; color: #fff !important; }
.bg-mahnung-status           { background-color: #dc2626 !important; color: #fff !important; }
.bg-abgeschlossen-status     { background-color: #16a34a !important; color: #fff !important; }
.bg-nicht_erhalten-status    { background-color: #9ca3af !important; color: #fff !important; }
.bg-storno-status            { background-color: #374151 !important; color: #fff !important; }

/* ── Alerts ────────────────────────────────────────────────── */
.alert {
  border-radius: 0.5rem;
  border: none;
  border-left: 3px solid currentColor;
  font-size: 0.875rem;
}

/* ── Footer ────────────────────────────────────────────────── */
.footer {
  font-size: 0.8rem;
  opacity: 0.55;
  border-top: 1px solid var(--qb-warm-200) !important;
}

/* ── Glocken-Badge am Avatar ───────────────────────────────── */
.qb-bell-wrapper {
  position: absolute;
  top: 4px;
  left: 4px;
  z-index: 20;
}

.qb-bell-btn {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 2px 5px 2px 4px;
  background: var(--qb-amber-600);
  border: 2px solid var(--cui-header-bg, #fff);
  border-radius: 999px;
  cursor: pointer;
  color: #fff;
  font-size: 0.6rem;
  font-weight: 700;
  line-height: 1;
  animation: qb-bell-ring 4s ease-in-out infinite;
}

.qb-bell-btn:hover {
  background: var(--qb-amber-700);
}

.qb-bell-btn svg {
  display: block;
  fill: currentColor;
}

@keyframes qb-bell-ring {
  0%, 85%, 100% { transform: rotate(0deg); }
  88%           { transform: rotate(-12deg); }
  92%           { transform: rotate(12deg); }
  96%           { transform: rotate(-8deg); }
  98%           { transform: rotate(6deg); }
}

/* ── Dashboard Widget-Controls ────────────────────────────── */
.widget-controls {
  opacity: 0;
  transition: opacity 0.15s ease;
}

.position-relative:hover .widget-controls {
  opacity: 1;
}

/* ── Login-Seite ───────────────────────────────────────────── */
body.login-page {
  background: var(--cui-body-bg);
}

/* ── Dokument-Editor ───────────────────────────────────────── */
.document-editor {
  border: 1px solid var(--cui-border-color);
  border-radius: 0.375rem;
  min-height: 600px;
}
.document-editor .ProseMirror {
  min-height: 580px;
  padding: 1.5rem 2rem;
  outline: none;
}

/* ── table-dark: Tintenblau statt Schwarz ──────────────────── */
.table-dark {
  --cui-table-bg:              var(--qb-ink-900);
  --cui-table-striped-bg:      #1c2e45;
  --cui-table-active-bg:       #22395a;
  --cui-table-hover-bg:        #22395a;
  --cui-table-border-color:    var(--qb-ink-800);
  --cui-table-color:           rgba(255,255,255,.88);
}

/* table-light: warmes Hellgrau */
.table-light {
  --cui-table-bg:           var(--qb-warm-100);
  --cui-table-striped-bg:   #edeae4;
  --cui-table-border-color: var(--qb-warm-200);
}

/* Sort-Links in dunklen Headern */
.table-dark a.sort-link {
  color: rgba(255,255,255,.88);
}

/* ── Kompakte Tabellen ─────────────────────────────────────── */
.table-compact td,
.table-compact th {
  padding: 0.4rem 0.75rem;
  font-size: 0.875rem;
}

/* Eingabefelder in rechtsbündigen Tabellenzellen */
.table td.text-end input[type="text"],
.table td.text-end input[type="number"],
.table td.text-end input:not([type]) {
  text-align: right;
}

/* ── Theme-Dot im Design-Dropdown ──────────────────────────── */
.qb-theme-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
}

/* ================================================================
   Theme: Großschrift – barrierefreie Lesbarkeit
   Font: Atkinson Hyperlegible · Grüner Akzent
   ================================================================ */

html[data-qb-theme="large"] {
  --cui-primary:           #276749;
  --cui-primary-rgb:       39, 103, 73;
  --cui-link-color:        #276749;
  --cui-link-color-rgb:    39, 103, 73;
  --cui-link-hover-color:  #1e5439;
  --cui-font-sans-serif:   'Atkinson Hyperlegible', system-ui, sans-serif;
  --qb-font-serif:         'Atkinson Hyperlegible', system-ui, sans-serif;
}

html[data-qb-theme="large"] body {
  font-size: 1.0625rem;
  line-height: 1.65;
}

html[data-qb-theme="large"] h1, html[data-qb-theme="large"] .h1,
html[data-qb-theme="large"] h2, html[data-qb-theme="large"] .h2,
html[data-qb-theme="large"] h3, html[data-qb-theme="large"] .h3,
html[data-qb-theme="large"] h4, html[data-qb-theme="large"] .h4 {
  font-family: 'Atkinson Hyperlegible', system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
}

html[data-qb-theme="large"] .sidebar-nav .nav-link {
  font-size: 0.9375rem;
  padding: 0.55rem 1.25rem;
}

html[data-qb-theme="large"] .sidebar.sidebar-dark {
  --cui-sidebar-nav-link-hover-bg:          rgba(39,103,73,.14);
  --cui-sidebar-nav-link-hover-color:       #5bc490;
  --cui-sidebar-nav-link-hover-icon-color:  #5bc490;
  --cui-sidebar-nav-link-active-bg:         rgba(39,103,73,.22);
  --cui-sidebar-nav-link-active-color:      #5bc490;
  --cui-sidebar-nav-link-active-icon-color: #5bc490;
}

html[data-qb-theme="large"] .card-header {
  font-size: 1rem;
  padding: 1rem 1.25rem;
}

html[data-qb-theme="large"] .table {
  font-size: 1rem;
}

html[data-qb-theme="large"] .table > thead > tr > th {
  font-size: 0.8125rem;
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
}

html[data-qb-theme="large"] .table > tbody > tr > td {
  padding-top: 0.65rem;
  padding-bottom: 0.65rem;
}

html[data-qb-theme="large"] .form-label {
  font-size: 0.9375rem;
}

html[data-qb-theme="large"] .btn {
  font-size: 1rem;
}

html[data-qb-theme="large"] .btn-primary {
  --cui-btn-bg:               #276749;
  --cui-btn-border-color:     #276749;
  --cui-btn-hover-bg:         #1e5439;
  --cui-btn-hover-border-color: #1e5439;
  --cui-btn-active-bg:        #1e5439;
  --cui-btn-color:            #fff;
  --cui-btn-hover-color:      #fff;
}

html[data-qb-theme="large"] .btn-outline-primary {
  --cui-btn-color:            #276749;
  --cui-btn-border-color:     #276749;
  --cui-btn-hover-bg:         #276749;
  --cui-btn-hover-color:      #fff;
  --cui-btn-hover-border-color: #276749;
}

html[data-qb-theme="large"] .form-control:focus,
html[data-qb-theme="large"] .form-select:focus {
  border-color: #276749;
  box-shadow: 0 0 0 0.2rem rgba(39, 103, 73, 0.18);
}

/* ================================================================
   Theme: Material – Material Design 3-inspiriert
   Font: Roboto · Violetter Akzent
   ================================================================ */

html[data-qb-theme="material"] {
  --cui-primary:           #6750A4;
  --cui-primary-rgb:       103, 80, 164;
  --cui-link-color:        #6750A4;
  --cui-link-color-rgb:    103, 80, 164;
  --cui-link-hover-color:  #4f3d83;
  --cui-font-sans-serif:   'Roboto', system-ui, sans-serif;
  --qb-font-serif:         'Roboto', system-ui, sans-serif;
  --qb-font-mono:          'Roboto Mono', monospace;
  --cui-border-color:      #CAC4D0;
}

/* Hintergrund nur im Light-Mode überschreiben */
html:not([data-coreui-theme="dark"])[data-qb-theme="material"] {
  --qb-warm-50:   #FFFBFE;
  --qb-warm-100:  #F4EFF4;
  --qb-warm-200:  #E8DEF8;
  --qb-warm-300:  #CAC4D0;
  --cui-body-bg:  #FFFBFE;
}

html[data-qb-theme="material"] body {
  font-size: 0.9375rem;
}

html[data-qb-theme="material"] h1, html[data-qb-theme="material"] .h1,
html[data-qb-theme="material"] h2, html[data-qb-theme="material"] .h2,
html[data-qb-theme="material"] h3, html[data-qb-theme="material"] .h3,
html[data-qb-theme="material"] h4, html[data-qb-theme="material"] .h4 {
  font-family: 'Roboto', system-ui, sans-serif;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.4;
}

html[data-qb-theme="material"] .card {
  border: none;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.07);
}

html[data-qb-theme="material"] .card-header {
  border-radius: 12px 12px 0 0;
  background: #F4EFF4;
}

html[data-coreui-theme="dark"][data-qb-theme="material"] .card-header {
  background: rgba(208,188,255,.06);
}

html[data-qb-theme="material"] .btn {
  border-radius: 20px;
  letter-spacing: 0.00625em;
}

html[data-qb-theme="material"] .btn-sm {
  border-radius: 16px;
}

html[data-qb-theme="material"] .btn-primary {
  --cui-btn-bg:               #6750A4;
  --cui-btn-border-color:     #6750A4;
  --cui-btn-hover-bg:         #5c4699;
  --cui-btn-hover-border-color: #5c4699;
  --cui-btn-active-bg:        #4f3d83;
  --cui-btn-color:            #fff;
  --cui-btn-hover-color:      #fff;
}

html[data-qb-theme="material"] .btn-outline-primary {
  --cui-btn-color:            #6750A4;
  --cui-btn-border-color:     #6750A4;
  --cui-btn-hover-bg:         #6750A4;
  --cui-btn-hover-color:      #fff;
  --cui-btn-hover-border-color: #6750A4;
}

html[data-qb-theme="material"] .form-control:focus,
html[data-qb-theme="material"] .form-select:focus {
  border-color: #6750A4;
  box-shadow: 0 0 0 0.2rem rgba(103, 80, 164, 0.18);
}

html[data-qb-theme="material"] .badge {
  border-radius: 6px;
}

html[data-qb-theme="material"] .alert {
  border-radius: 12px;
  border-left: none;
  border: 1px solid currentColor;
}

html[data-qb-theme="material"] .sidebar.sidebar-dark {
  --cui-sidebar-bg:                         #1C1B1F;
  --cui-sidebar-nav-link-hover-bg:          rgba(208,188,255,.12);
  --cui-sidebar-nav-link-hover-color:       #D0BCFF;
  --cui-sidebar-nav-link-hover-icon-color:  #D0BCFF;
  --cui-sidebar-nav-link-active-bg:         rgba(208,188,255,.18);
  --cui-sidebar-nav-link-active-color:      #D0BCFF;
  --cui-sidebar-nav-link-active-icon-color: #D0BCFF;
  background: #1C1B1F;
}

html[data-qb-theme="material"] .header {
  box-shadow: 0 2px 4px rgba(0,0,0,.08);
}

/* ── Zahlenfelder: keine Pfeilbuttons ──────────────────────── */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type=number] { -moz-appearance: textfield; }

html:not([data-coreui-theme="dark"])[data-qb-theme="material"] .table-light {
  --cui-table-bg: #F4EFF4;
  --cui-table-border-color: #E8DEF8;
}