@import url(outfitthin.css);


:root{
  --bxso-bg: #151618;
  --bxso-fg: #dddddd;
  --bxso-accent: #ed6e2b;

  --bs-font-sans-serif: "Outfit", sans-serif !important;
  --bs-body-font-family: "Outfit", sans-serif !important;

  --sb-width: 240px;          /* expanded width */
  --sb-width-collapsed: 76px; /* collapsed width (icons only) */

  --app-pad: 24px;            /* Desktop-Innenabstand */
  --app-pad-mobile: 12px;      /* Mobile-Innenabstand */
  --border-col: rgba(237,110,43,0.25);

  --icon-box: 40px;           /* Kachelgröße für Icons */
  --icon-radius: 10px;        /* Eckenradius Icon-Kachel */
}

html, body {
  height: 100%;
  background: var(--bxso-bg);
  color: var(--bxso-fg);
  font-weight: 100;
}
    
body { overflow: hidden; }

/* --- App Container (vereinfacht) ---
Kein Grid-Spalten-Shift mehr; Sidebar ist fixed.
Der Content schiebt sich NUR per margin-left. */
.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;
}

/* im collapsed-Zustand die ganze Logozeile zentrieren */
.collapsed .sb-logo { justify-content: center; }

/* Logo-Box bleibt quadratisch */
/* Logo-Box bleibt wie definiert; nur Bild sauber einpassen */
.sb-logo .logo-box {
  width: var(--icon-box); height: var(--icon-box);
  border-radius: 0;
  background: none;
  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 */
}


/* Inhalt der Box wirklich mittig */
.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;         /* Kachel ja #1a1b1e */
  border: none;                 /* <-- Kontur weg */
  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; }

/* nur aktive Route bekommt Rahmen an Icon UND leicht hervorgehobenen Link-Hintergrund */
.bxso-nav a.active {
  background: none; /* #221f1b */
  color: #fff;
}

.bxso-nav a.active .sb-ico {
  border: 1px solid rgba(237,110,43,0.45) ; /* <-- nur aktiv umrandet rgba(237,110,43,0.45) */
}

/* im collapsed Zustand Icons zentrieren */
.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;  /* solid var(--border-col); */
  color: var(--bxso-fg); cursor: pointer;
}
.sb-toggle:hover { background: #1f2023; }

/* Collapsed: nur Icons, zentriert */
.collapsed .bxso-sidebar { width: var(--sb-width-collapsed); }
.collapsed .sb-text { display: none !important; }
.collapsed .bxso-nav a { justify-content: center; } /* zentrierte Icon-Kacheln */

/* --- Main (Content) ---
Kein Grid mehr – nur margin-left passend zur Sidebar.
=> verhindert den breiten, leeren Rand. */
.app-main {
  height: 100vh;
  overflow: auto;
  padding: var(--app-pad);
  margin-left: var(--sb-width);
  transition: margin-left 160ms ease;
  will-change: margin-left;
}

.collapsed .app-main { margin-left: var(--sb-width-collapsed); }
.app-inner { max-width: none; margin: 0; }

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

/* Sidebar nur ab iPad/Tablet sichtbar (>=768px) */
@media (max-width: 767.98px) {
  .bxso-sidebar { display: none; }
  .app-main { margin-left: 0; padding: var(--app-pad-mobile); }
  body { overflow: auto; }
}


body {
  background: var(--bxso-bg);
  color: #ddd;
  font-family: "Outfit", sans-serif !important;
}

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

a:hover {
  text-decoration: underline;
}

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

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

/* Fallback, falls später noch etwas reingrätscht */
html, body, button, input, select, textarea, table {
  font-family: "Outfit", sans-serif !important;
}

/* BXSO Dark Table Theme – für <table class="table table-dark table-hover table-bxso-dark"> */
.table-bxso-dark {
  /* Bootstrap Table-CSS-Variablen überschreiben */
  --bs-table-bg: #151618;          /* Tabellen-Hintergrund */
  --bs-table-color: #e9ecef;       /* Standard-Textfarbe */
  --bs-table-border-color: #2a2c2f;/* Rahmenlinien */
  --bs-table-striped-bg: #1b1d20;  /* Zebra-Zeilen */
  --bs-table-striped-color: inherit;
  --bs-table-hover-bg: #202326;    /* Hover-Zeilen */
  --bs-table-hover-color: inherit;
  --bs-table-active-bg: #24272b;   /* .table-active */
  --bs-table-active-color: inherit;
}

/* Tabellenkopf betonen (optional) */
.table-bxso-dark thead th {
  background-color: #151618;
  color: #ffffff;
  border-bottom: none ; /* 2px solid #ed6e2b */
}

/* Erste Spalte leicht hervorheben (optional) */
.table-bxso-dark tbody td:first-child,
.table-bxso-dark thead th:first-child {
  border-left: none ; /* 2px solid #ed6e2b */
}

/* Letzte Zeile oben betonen (optional) */
.table-bxso-dark tbody tr:last-child td {
  border-bottom: 1px solid #2a2c2f;
}

/* Kompaktere Zellen (optional) */
.table-bxso-dark > :not(caption) > * > * {
  padding-top: .55rem;
  padding-bottom: .55rem;
  vertical-align: middle;
}

/* Hover-Rand minimal sichtbar (optional, dezent) */
.table-bxso-dark.table-hover tbody tr:hover {
  outline: 1px solid #2a2c2f;
}

/* ===== BXSO Modal Theme (dunkel) ===== */
.modal-bxso {
  /* Bootstrap-Variablen für Modals überschreiben */
  --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;

  /* Default-Breite – passt sich per Media-Query an */
  --bs-modal-width: 95vw;
}

/* Größere Breiten ab Breakpoints */
@media (min-width: 768px) {
  .modal-bxso { --bs-modal-width: 720px; }
}
@media (min-width: 992px) {
  .modal-bxso { --bs-modal-width: 900px; }
}

/* Kopf/Fuß optisch absetzen */
.modal-bxso .modal-header {
  background: #101113;
}
.modal-bxso .modal-title {
  font-weight: 400;
  letter-spacing: .2px;
}

/* Close-Button im Dark-UI sichtbar machen */
.modal-bxso .btn-close {
  filter: invert(1) grayscale(100%);
  opacity: .7;
}
.modal-bxso .btn-close:hover { opacity: 1; }

/* Buttons im Footer – Akzentfarbe #ed6e2b */
.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;
}

/* Form-Felder im Modal */
.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);
}

/* Checks & Switches */
.modal-bxso .form-check-input {
  background-color: #1b1d20;
  border-color: #2a2c2f;
}
.modal-bxso .form-check-input:checked {
  background-color: #ed6e2b;
  border-color: #ed6e2b;
}

/* Backdrop (abgedunkelter Hintergrund) */
.modal-bxso ~ .modal-backdrop {
  background-color: #0b0c0f;
}
.modal-bxso.show ~ .modal-backdrop {
  opacity: .85; /* stärker abdunkeln */
}

/* Optionale, dezentere Scrollbar im Modal-Body (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;
}

/* ========= BXSO Button Theme ========= */
:root {
  --bxso-bg: #151618;
  --bxso-fg: #e9ecef;
  --bxso-accent: #ed6e2b;     /* Akzent (Orange) */
  --bxso-accent-2: #ff7c39;   /* Hover/Active */
  --bxso-border: #2a2c2f;

  --bxso-success: #27ae60;    /* Buchen (positiv) */
  --bxso-success-2: #2ecc71;

  --bxso-warning: #d1a306;    /* Bearbeiten (neutral/warnend) */
  --bxso-warning-2: #f2bd07;

  --bxso-danger: #cf3b3b;     /* Löschen (Gefahr) */
  --bxso-danger-2: #e14f4f;
}

/* Basis-Optik – dunkel, klar umrissen */
.btn-bxso {
  color: var(--bxso-fg) !important;
  background: transparent;
  border: none;
  border-radius: none;
  padding: .55rem .9rem;
  line-height: 1.2;
  font-weight: 200 !important;
  letter-spacing: .2px;
}
.btn-bxso:hover { transform: translateY(0); }
.btn-bxso:active { transform: translateY(0); }

/* Fokus klar sichtbar */
.btn-bxso:focus-visible {
  outline: 0;
  box-shadow: none; /* 0 0 0 .25rem rgba(237,110,43,.25) */
}

/* Deaktiviert */
.btn-bxso:disabled,
.btn-bxso.disabled {
  opacity: .55;
  cursor: not-allowed;
}

/* -------- Varianten -------- */

/* Bearbeiten = gelblich (neutral/soft warning) */
.btn-edit {
  border-color: var(--bxso-warning);
  color: var(--bxso-warning) !important;
}
.btn-edit:hover,
.btn-edit:focus {
  /* background: color-mix(in srgb, var(--bxso-warning) 14%, transparent);  */
  /* border-color: var(--bxso-warning-2);  */
  /* color: var(--bxso-warning-2) !important;  */
  text-decoration: none;
}

/* Buchen = grün (positiv) */
.btn-book {
  border-color: var(--bxso-success);
  color: var(--bxso-success) !important;
}
.btn-book:hover,
.btn-book:focus {
  /* background: color-mix(in srgb, var(--bxso-warning) 14%, transparent);  */
  /* border-color: var(--bxso-warning-2);  */
  /* color: var(--bxso-warning-2) !important;  */
  text-decoration: none;
}

/* Löschen = rot (danger) */
.btn-delete {
  border-color: var(--bxso-danger);
  color: var(--bxso-danger) !important;
}
.btn-delete:hover,
.btn-delete:focus {
  /* background: color-mix(in srgb, var(--bxso-danger) 14%, transparent);  */
  /* border-color: var(--bxso-warning-2);  */
  /* color: var(--bxso-warning-2) !important;  */
  text-decoration: none;
}

/* Gefüllte (solide) Varianten – wenn du sie lieber „primary-like“ willst */
.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); }

/* Icon-Helfer (falls du Bootstrap Icons o.ä. nutzt) */
.btn-bxso .icon-left { margin-right: .45rem; display: inline-flex; }
.btn-bxso .icon-right { margin-left: .45rem; display: inline-flex; }

/* Kompakter/Größer */
.btn-bxso.btn-sm { padding: .4rem .65rem; border-radius: .6rem; font-weight: 600; }
.btn-bxso.btn-lg { padding: .75rem 1.1rem; border-radius: 1rem; }

/* Button-Gruppen mit engem, aber klaren Abstand */
.btn-group-bxso .btn-bxso { margin-right: .5rem; }
.btn-group-bxso .btn-bxso:last-child { margin-right: 0; }

/* Respektiere reduzierte Bewegung */
@media (prefers-reduced-motion: reduce) {
  .btn-bxso { transition: none; }
  .btn-bxso:hover, .btn-bxso:active { transform: none; }
}

/* ===== Icon-Only Action Buttons ===== */
:root{
  --bxso-border:#2a2c2f;
  --bxso-fg:#e9ecef;
  --bxso-bg:#151618;

  --bxso-edit:#d1a306;
  --bxso-edit-2:#f2bd07;

  --bxso-book:#27ae60;
  --bxso-book-2:#2ecc71;

  --bxso-delete:#cf3b3b;
  --bxso-delete-2:#e14f4f;
}

/* Grundform: klickbares Quadrat mit runden Ecken */
.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;
  margin-right: 0;
}
.action-icon:last-child { margin-right: 0; }
.action-icon:hover { transform: translateY(-0); }
.action-icon:active { transform: translateY(0); }
.action-icon:focus-visible {
  /*outline: 0;
  box-shadow: 0 0 0 .25rem rgba(237,110,43,.25);*/
}

/* Varianten */
.action-icon.edit     { border-color: var(--bxso-edit);   color: var(--bxso-edit); }
.action-icon.book     { border-color: var(--bxso-book);   color: var(--bxso-book); }
.action-icon.delete   { border-color: var(--bxso-delete); color: var(--bxso-delete); }

.action-icon.edit:hover   { /* background: color-mix(in srgb, var(--bxso-edit) 14%, transparent);   border-color: var(--bxso-edit-2);   color: var(--bxso-edit-2); */ }
.action-icon.book:hover   { /* background: color-mix(in srgb, var(--bxso-book) 14%, transparent);   border-color: var(--bxso-book-2);   color: var(--bxso-book-2); */ }
.action-icon.delete:hover { /* background: color-mix(in srgb, var(--bxso-delete) 14%, transparent); border-color: var(--bxso-delete-2); color: var(--bxso-delete-2); */ }

/* Icon-Größe */
.action-icon i { font-size: 20px; }

/* Gruppe bündig */
.action-icons { display:flex; align-items:center; gap:.5rem; }

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  .action-icon { transition: none; }
  .action-icon:hover, .action-icon:active { transform:none; }
}

/* Header-Zellen vertikal zentrieren */
.table thead th {
  vertical-align: middle;             /* Bootstrap respektiert das */
  padding-top: .6rem;                 /* optional: einheitliche Höhe */
  padding-bottom: .6rem;
}

/* Link bleibt gleich – hier nur für Abstand */
.table .sort-link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;              /* Luft zwischen Label und Icon */
  color: inherit;
  text-decoration: none;
  line-height: 1;
}

/* Fester Icon-Platz + übereinanderliegende Pfeile */
.table .sort-icon {
  position: relative;
  width: 1.25rem;          /* fester Platz */
  height: 1.25rem;
  display: inline-block;   /* kein Layout-Shift */
}

/* Beide Icons exakt zentriert übereinander */
.table .sort-icon .bi {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;              /* unsichtbar, aber belegt keinen extra Platz */
  transition: opacity .12s ease;
  pointer-events: none;    /* Klick bleibt auf dem Link */
}

/* Nur der aktive Pfeil wird eingeblendet */
.table .sort-link.sorted-asc  .bi-arrow-up { opacity: 1; }
.table .sort-link.sorted-desc .bi-arrow-down { opacity: 1; }