/* =========================
   Root / Design Tokens
========================= */
:root {
  --bxso-bg: #151618;
  --bxso-fg: #e9ecef;
  --bxso-accent: #ed6e2b;
  --bxso-accent-2: #ff7c39;
  --bxso-border: #2a2c2f;

  --sb-width: 240px;
  --sb-width-collapsed: 76px;

  --app-pad: 24px;
  --app-pad-mobile: 12px;
  --border-col: rgba(237,110,43,0.25);

  --icon-box: 40px;
  --icon-radius: 10px;

  /* Bootstrap Font Override */
  --bs-font-sans-serif: "Outfit", sans-serif !important;
  --bs-body-font-family: "Outfit", sans-serif !important;

  /* Button-Farben */
  --bxso-success: #27ae60;
  --bxso-success-2: #2ecc71;
  --bxso-warning: #d1a306;
  --bxso-warning-2: #f2bd07;
  --bxso-danger: #cf3b3b;
  --bxso-danger-2: #e14f4f;
}

/* =========================
   Fonts
========================= */

.outfit-light {
  font-family: "Outfit", sans-serif;
  font-optical-sizing: auto;
  font-weight: 100;
  font-style: normal;
}

/* =========================
   Text
========================= */

.text-muted-bxso .form-text-bxso{
  color: var(--bxso-fg) !important;
  font-weight: 100;
  font-family: "Outfit", sans-serif !important;
}

/* =========================
   Base
========================= */
html, body {
  height: 100%;
  background: var(--bxso-bg);
  color: var(--bxso-fg);
  font-weight: 100;
  font-family: "Outfit", sans-serif !important;
}
body { overflow: hidden; }

a { color: var(--bxso-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Fallback – falls etwas Fonts überschreibt */
html, body, button, input, select, textarea, table {
  font-family: "Outfit", sans-serif !important;
}

/* iPad Landscape ~1024px Breite */
@media (min-width: 992px) and (max-width: 1200px){
  .container, .container-lg, .container-xl { max-width: 980px; }
}

/* =========================
   App Layout
========================= */
.bxso-app { height: 100vh; width: 100%; }

/* Sidebar */
.bxso-sidebar {
  position: fixed; left: 0; top: 0; bottom: 0;
  width: var(--sb-width);
  background: #101112;
  border-right: 1px solid var(--border-col);
  display: flex; flex-direction: column;
  padding: 10px 6px;
  z-index: 1040;
  user-select: none;
}
.sb-logo { display: flex; align-items: center; gap: 10px; padding: 6px 8px; margin-bottom: 6px; }
.collapsed .sb-logo { justify-content: center; }

/* Logo-Box bleibt wie definiert; nur Bild sauber einpassen */
.sb-logo .logo-box {
  width: var(--icon-box); height: var(--icon-box);
  border-radius: var(--icon-radius);
  background: transparent;
  border: none;
  display: inline-flex; align-items: center; justify-content: center;
  line-height: 1;
  overflow: hidden; /* falls SVG größer ist */
}

.sb-logo .logo-svg {
  width: 100%;                /* Skaliert in der Box */
  height: 100%;
  display: block;
  object-fit: contain;       /* sicheres Einpassen */
}

.sb-logo .logo-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  font-weight: 700; font-size: 14px; color: var(--bxso-accent);
}

.bxso-nav a {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 9px; margin: 4px 1px;
  border-radius: 10px; color: var(--bxso-fg); text-decoration: none;
}
.bxso-nav a .sb-ico {
  width: var(--icon-box); height: var(--icon-box);
  border-radius: var(--icon-radius);
  background: none; border: none;
  display: inline-flex; align-items: center; justify-content: center;
}
.bxso-nav a .sb-ico .bi { font-size: 20px; line-height: 1; }
.bxso-nav a:hover { background: #191a1d; color: #fff; }
.bxso-nav a.active { background: none; color: #fff; }
.bxso-nav a.active .sb-ico { border: 1px solid rgba(237,110,43,0.45); }

.collapsed .bxso-nav a { justify-content: center; }
.collapsed .sb-text { display: none !important; }
.sb-spacer { flex: 1 1 auto; }
.sb-toggle {
  display: flex; align-items: center; justify-content: center;
  margin: 4px; padding: 9px; border-radius: 10px;
  background: none; border: none; color: var(--bxso-fg); cursor: pointer;
}
.sb-toggle:hover { background: #1f2023; }
.collapsed .bxso-sidebar { width: var(--sb-width-collapsed); }
.collapsed .app-main { margin-left: var(--sb-width-collapsed); }

/* Main */
.app-main {
  height: 100vh; overflow: auto;
  padding: var(--app-pad);
  margin-left: var(--sb-width);
  transition: margin-left 160ms ease;
  will-change: margin-left;
}
.app-inner { max-width: none; margin: 0; }

/* Mobile: Sidebar ausblenden */
@media (max-width: 767.98px) {
  .bxso-sidebar { display: none; }
  .app-main { margin-left: 0; padding: var(--app-pad-mobile); }
  body { overflow: auto; }
}

/* =========================
   Tabellen / Sort Header
========================= */
.table { --bs-table-bg: #0f1012; }
.table td, .table th { padding: .45rem .5rem; }

/* Dark Table Theme */
.table-bxso-dark {
  --bs-table-bg: #151618;
  --bs-table-color: #e9ecef;
  --bs-table-border-color: #2a2c2f;
  --bs-table-striped-bg: #1b1d20;
  --bs-table-striped-color: inherit;
  --bs-table-hover-bg: #202326;
  --bs-table-hover-color: inherit;
  --bs-table-active-bg: #24272b;
  --bs-table-active-color: inherit;
}
.table-bxso-dark thead th {
  background-color: #151618;
  color: #ffffff;
  border-bottom: none;
}
.table-bxso-dark tbody tr:last-child td { border-bottom: 1px solid #2a2c2f; }
.table-bxso-dark > :not(caption) > * > * { padding-top: .55rem; padding-bottom: .55rem; vertical-align: middle; }
.table-bxso-dark.table-hover tbody tr:hover { outline: 1px solid #2a2c2f; }

/* Sortier-Header: vertikal mittig + kein Springen */
.table thead th { vertical-align: middle; padding-top: .6rem; padding-bottom: .6rem; }
.table .sort-link {
  display: inline-flex; align-items: center; gap: .5rem;
  color: inherit; text-decoration: none; line-height: 1; white-space: nowrap;
}
.table .sort-icon {
  position: relative; width: 1.25rem; height: 1.25rem; display: inline-block;
}
.table .sort-icon .bi {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  opacity: 0; transition: opacity .12s ease; pointer-events: none;
}
.table .sort-link.sorted-asc  .bi-arrow-up-short  { opacity: 1; }
.table .sort-link.sorted-desc .bi-arrow-down-short{ opacity: 1; }

/* =========================
   Modal Theme (dunkel)
========================= */
.modal-bxso {
  --bs-modal-bg: #151618;
  --bs-modal-color: #e9ecef;
  --bs-modal-border-color: #2a2c2f;
  --bs-modal-border-radius: 1rem;
  --bs-modal-padding: 1rem 1.25rem;
  --bs-modal-header-border-color: #2a2c2f;
  --bs-modal-footer-border-color: #2a2c2f;
  --bs-modal-width: 95vw;
}
@media (min-width: 768px) { .modal-bxso { --bs-modal-width: 720px; } }
@media (min-width: 992px) { .modal-bxso { --bs-modal-width: 900px; } }

.modal-bxso .modal-header { background: #101113; }
.modal-bxso .modal-title { font-weight: 400; letter-spacing: .2px; }
.modal-bxso .btn-close { filter: invert(1) grayscale(100%); opacity: .7; }
.modal-bxso .btn-close:hover { opacity: 1; }

.modal-bxso .modal-footer .btn-primary { background-color: #ed6e2b; border-color: #ed6e2b; }
.modal-bxso .modal-footer .btn-primary:hover,
.modal-bxso .modal-footer .btn-primary:focus { background-color: #ff7c39; border-color: #ff7c39; }
.modal-bxso .modal-footer .btn-outline-secondary { color: #e9ecef; border-color: #2a2c2f; }
.modal-bxso .modal-footer .btn-outline-secondary:hover { background: #1b1d20; }

.modal-bxso .form-control,
.modal-bxso .form-select,
.modal-bxso .form-control:disabled,
.modal-bxso .form-select:disabled {
  background: #1b1d20; color: #e9ecef; border-color: #2a2c2f;
}
.modal-bxso .form-control::placeholder { color: #9aa0a6; }
.modal-bxso .form-control:focus,
.modal-bxso .form-select:focus {
  background: #1f2225; color: #fff; border-color: #ed6e2b;
  box-shadow: 0 0 0 .25rem rgba(237,110,43,.15);
}
.modal-bxso .form-check-input { background-color: #1b1d20; border-color: #2a2c2f; }
.modal-bxso .form-check-input:checked { background-color: #ed6e2b; border-color: #ed6e2b; }
.modal-bxso ~ .modal-backdrop { background-color: #0b0c0f; }
.modal-bxso.show ~ .modal-backdrop { opacity: .85; }

/* Scrollbar (WebKit) */
.modal-bxso .modal-body::-webkit-scrollbar { width: 10px; }
.modal-bxso .modal-body::-webkit-scrollbar-track { background: #101113; }
.modal-bxso .modal-body::-webkit-scrollbar-thumb { background: #2a2c2f; }
.modal-bxso .modal-body::-webkit-scrollbar-thumb:hover { background: #34363a; }

.text-muted-bxso { color: #ffffff; }

/* =========================
   Buttons (Text-Buttons)
========================= */
.btn-bxso {
  color: var(--bxso-fg) !important;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: .55rem .9rem;
  line-height: 1.2;
  font-weight: 200 !important;
  letter-spacing: .2px;
}
.btn-bxso:hover,
.btn-bxso:focus { text-decoration: none; }
.btn-bxso:focus-visible { outline: 0; box-shadow: none; }
.btn-bxso:disabled, .btn-bxso.disabled { opacity: .55; cursor: not-allowed; }

.btn-edit { color: var(--bxso-warning) !important; }
.btn-book { color: var(--bxso-success) !important; }
.btn-delete { color: var(--bxso-danger) !important; }

.btn-edit.solid { background: var(--bxso-warning); color: #0b0c0f !important; border-color: var(--bxso-warning); }
.btn-edit.solid:hover { background: var(--bxso-warning-2); border-color: var(--bxso-warning-2); }
.btn-book.solid { background: var(--bxso-success); color: #0b0c0f !important; border-color: var(--bxso-success); }
.btn-book.solid:hover { background: var(--bxso-success-2); border-color: var(--bxso-success-2); }
.btn-delete.solid { background: var(--bxso-danger); color: #fff !important; border-color: var(--bxso-danger); }
.btn-delete.solid:hover { background: var(--bxso-danger-2); border-color: var(--bxso-danger-2); }

.btn-bxso .icon-left { margin-right: .45rem; display: inline-flex; }
.btn-bxso .icon-right { margin-left: .45rem; display: inline-flex; }
.btn-bxso.btn-sm { padding: .4rem .65rem; border-radius: .6rem; font-weight: 600; }
.btn-bxso.btn-lg { padding: .75rem 1.1rem; border-radius: 1rem; }
.btn-group-bxso .btn-bxso { margin-right: .5rem; }
.btn-group-bxso .btn-bxso:last-child { margin-right: 0; }

@media (prefers-reduced-motion: reduce) {
  .btn-bxso { transition: none; }
}

/* =========================
   Icon-Only Action Buttons
========================= */
.action-icon {
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: none; color: var(--bxso-fg);
  text-decoration: none; line-height: 1;
}
.action-icon i { font-size: 20px; }
.action-icons { display:flex; align-items:center; gap:.5rem; }

.action-icon.edit   { color: var(--bxso-warning); }
.action-icon.book   { color: var(--bxso-success); }
.action-icon.delete { color: var(--bxso-danger); }

@media (prefers-reduced-motion: reduce) {
  .action-icon { transition: none; }
}

/* =========================
   Preview / Upload / Cards
========================= */
#preview { width: 100%; aspect-ratio: 1 / 1; background: #000; border: 1px solid #333; object-fit: cover; }

.drop-zone { background:#1a1b1d; cursor:pointer; transition:all .15s ease; }
.drop-zone.hover { background:#222327; border-color:#ed6e2b; }

.thumb img { transition:transform .2s ease; }
.thumb img:hover { transform:scale(1.05); }

.preview-box {
  background:#101113; border:1px solid var(--border-col);
  border-radius:10px; color:#e9ecef; font-family:"Outfit",sans-serif;
}
.preview-text {
  white-space:pre-wrap; font-size:15px; line-height:1.5;
  color:#fff; min-height:6rem;
}

.card-soft { background:#0f1012; border:1px solid var(--border-col); border-radius:12px; }
.card-none { background:transparent; border:none; }

/* =========================
   FullCalendar Theme
========================= */
#calendar { width:100%; min-height:70vh; padding:.5rem; }

#calendar .fc .fc-button { background:#1b1d20; border-color:#2a2c2f; }
#calendar .fc .fc-button:hover { background:#22262a; border-color:#2a2c2f; }
#calendar .fc .fc-button-primary:not(:disabled).fc-button-active {
  background:#ed6e2b; border-color:#ed6e2b;
}

/* Upload */
.drop-zone {
  background:#1a1b1d;
  cursor:pointer;
  transition:all .15s ease;
}
.drop-zone.hover {
  background:#222327;
  border-color:#ed6e2b;
}
.thumb img { transition:transform .2s ease; }
.thumb img:hover { transform:scale(1.05); }

/* ===== FullCalendar – Feintuning ===== */

/* Globale Variablen (Farben, Konturen, Today-Highlight usw.) */
#calendar .fc {
  --fc-border-color: rgba(255,255,255,.10);  /* Zellränder */
  --fc-page-bg-color: transparent;           /* Seitenhintergrund */
  --fc-neutral-bg-color: rgba(255,255,255,.04);
  --fc-today-bg-color: rgba(237,110,43,.10); /* "Heute"-Hintergrund */
  --fc-now-indicator-color: #ed6e2b;         /* "Jetzt"-Linie in timeGrid */
  --fc-event-bg-color: #24272b;              /* Event-Badge BG (Standard) */
  --fc-event-border-color: #2f3236;          /* Event-Badge Rand */
  --fc-event-text-color: #e9ecef;            /* Event-Text */
  --fc-highlight-color: rgba(237,110,43,.18);/* Auswahl/Drag-Selection */
  color: #e9ecef;                            /* Standard-Schriftfarbe im Kalender */
}

/* Kopfzeile / Toolbar */
#calendar .fc .fc-toolbar-title {
  color: #e9ecef;
  letter-spacing: .3px;
  font-weight: 400;
}
#calendar .fc .fc-col-header-cell {
  background: #121315;
  border-color: var(--fc-border-color);
  color: #cfd4da;
  text-transform: uppercase;
  font-size: .8rem;
  letter-spacing: .6px;
}

/* Buttons in der Toolbar */
#calendar .fc .fc-button {
  background: #1b1d20;
  border-color: #2a2c2f;
  color: #e9ecef;
}
#calendar .fc .fc-button:hover {
  background: #22262a;
  border-color: #2a2c2f;
}
#calendar .fc .fc-button-primary:not(:disabled).fc-button-active,
#calendar .fc .fc-button-primary:focus {
  background: #ed6e2b;
  border-color: #ed6e2b;
  box-shadow: 0 0 0 .2rem rgba(237,110,43,.2);
}

/* DayGrid: Zellen, Ränder, Tagesnummern */
#calendar .fc .fc-daygrid-day,
#calendar .fc .fc-timegrid-slot,
#calendar .fc table,
#calendar .fc th,
#calendar .fc td {
  border-color: var(--fc-border-color) !important;
}
#calendar .fc .fc-daygrid-day-number {
  color: #cfd4da !important;
  font-weight: 400;
  padding: .35rem .45rem;
}
#calendar .fc .fc-daygrid-day-top {
  align-items: center; /* Nummer mittig ausrichten */
  padding-top: .15rem;
}

/* Heute markanter hervorheben (Ring + BG) */
#calendar .fc .fc-day-today .fc-daygrid-day-frame {
  background: var(--fc-today-bg-color);
  outline: 1px solid rgba(237,110,43,.35);
  outline-offset: -1px;
}

/* Wochenende leicht abdunkeln */
#calendar .fc .fc-day-sat .fc-daygrid-day-frame,
#calendar .fc .fc-day-sun .fc-daygrid-day-frame {
  background: rgba(255,255,255,.03);
}

/* Vergangene Tage minimal entsättigen */
#calendar .fc .fc-day-past .fc-daygrid-day-number { color: #a9afb7; }

/* Events (Badges) – abgerundet, dezente Kontur, Hover-Effekt */
#calendar .fc .fc-event {
  background: var(--fc-event-bg-color);
  border: 1px solid var(--fc-event-border-color);
  border-radius: 10px;
  overflow: hidden;
}
#calendar .fc .fc-h-event .fc-event-main {
  padding: .15rem .35rem;
  color: var(--fc-event-text-color);
  font-weight: 500;
}
#calendar .fc .fc-event:hover {
  filter: brightness(1.05);
  box-shadow: 0 0 0 .15rem rgba(237,110,43,.15);
}

/* Event-Farbcodes (optional je nach Kategorie/Status eigene Klassen vergeben) */
#calendar .fc .event-green { 
  --fc-event-bg-color:#1f3327; --fc-event-border-color:#28513a; --fc-event-text-color:#cfead8;
}
#calendar .fc .event-orange{ 
  --fc-event-bg-color:#2f241d; --fc-event-border-color:#4b382b; --fc-event-text-color:#ffd9bf;
}
#calendar .fc .event-red   { 
  --fc-event-bg-color:#362022; --fc-event-border-color:#553338; --fc-event-text-color:#ffd1d6;
}

/* TimeGrid (Wochen/Tag-Ansicht): Jetzt-Linie stärker zeigen */
#calendar .fc .fc-timegrid-now-indicator-line { border-color: var(--fc-now-indicator-color); }
#calendar .fc .fc-timegrid-now-indicator-arrow { border-top-color: var(--fc-now-indicator-color); }

/* Auswahl/Drag-Selection */
#calendar .fc .fc-highlight {
  background: var(--fc-highlight-color);
}

/* Popover (wenn Tag überläuft) */
#calendar .fc .fc-popover {
  background: #151618;
  border: 1px solid #2a2c2f;
  border-radius: 12px;
  color: #e9ecef;
}
#calendar .fc .fc-popover-header {
  background: #101113;
  border-bottom: 1px solid #2a2c2f;
  color: #fff;
}

/* ===== FullCalendar: Link-Farben neutralisieren (überschreibt globales a{color}) ===== */
#calendar .fc {
  color: #e9ecef;                 /* Standard-Schriftfarbe im Kalender */
  /* Falls Bootstrap-Theme aktiv ist, zusätzlich: */
  --bs-link-color: #e9ecef;
  --bs-link-hover-color: #ffffff;
}

#calendar .fc a {
  color: #e9ecef;                 /* Links im Kalender */
  text-decoration: none;
}
#calendar .fc a:hover,
#calendar .fc a:focus {
  color: #ffffff;
  text-decoration: underline;     /* optional */
}

/* Tageszahlen, Headertexte usw. explizit auf hell setzen */
#calendar .fc .fc-col-header-cell,
#calendar .fc .fc-col-header-cell-cushion,
#calendar .fc .fc-daygrid-day-number,
#calendar .fc .fc-toolbar-title {
  color: #e9ecef;
}

/* Event-Titel/Text sicher hell – unabhängig von globalen Link-Regeln */
#calendar .fc .fc-event,
#calendar .fc .fc-h-event .fc-event-main,
#calendar .fc .fc-daygrid-event .fc-event-title,
#calendar .fc .fc-timegrid-event .fc-event-title {
  color: #e9ecef;
}

/* Wenn weiterhin irgendwo Orange „durchblutet“, letzte Eskalationsstufe: */
#calendar .fc a,
#calendar .fc .fc-event,
#calendar .fc .fc-event * {
  color: #e9ecef !important;      /* nur nutzen, wenn nötig */
}


/* Dashboard-Module: feine Kontur + leicht angehobener Hintergrund */
.module-card {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  background: #18191b; /* minimal heller als der Grund-Background */
}

/* Etwas Abstand zwischen List-Items im Modul */
.module-row {
  border-color: rgba(255, 255, 255, 0.06);
}

/* Lesbarkeit im Modul "Nächste geplante Posts" verbessern */
.text-upcoming-meta {
  color: #b8b8c2; /* heller als Standard-muted */
}

.text-upcoming-body {
  color: #f4f4f6; /* richtig hell für den Post-Text */
  font-size: 0.95rem;
}

/* Drop-Zone für Schnell-Post */
#qpDropZone {
  border: 1px dashed rgba(255, 255, 255, 0.25);
  border-radius: 10px;
  background-color: rgba(0, 0, 0, 0.25);
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

#qpDropZone.hover {
  border-color: rgba(237, 110, 43, 0.7); /* BXSO-Orange leicht */
  background-color: rgba(255, 255, 255, 0.03);
}