:root {
  --bs-body-font-size: 12px;
  --bs-btn-font-size: 12px;
}

.bd-placeholder-img {
    font-size: 1.125rem;
    text-anchor: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
  }

  #nav {
    width: 200px;
    position: fixed;
    left: -200px;
    transition: left 0.3s ease;
  }

  #nav.active {
    left: 0;
    z-index:99;
    background-color: rgb(240, 240, 240);
    box-shadow: 2px 0 8px rgba(0,0,0,0.3);
    overflow-y: auto;
    max-height: 100vh;
  }
  #nav.visible {
    left: 0 !important;
  }
  #menu-button {
    display: block;
    padding: 10px;
    cursor: pointer;
  }

  /* Mobile-Header: Logo + Menu-Button oben fixiert */
  #mobile-header {
    display: none;
  }

  @media (min-width: 768px) {
    .bd-placeholder-img-lg {
      font-size: 3.5rem;
    }

    #nav {
      position: static;
      min-width: 200px;
      left: 0;
    }

    #menu-button {
      display: none;
    }
  }

  .b-example-divider {
    height: 3rem;
    background-color: rgba(0, 0, 0, .1);
    border: solid rgba(0, 0, 0, .15);
    border-width: 1px 0;
    box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
  }

  .b-example-vr {
    flex-shrink: 0;
    width: 1.5rem;
    height: 160vh;
  }

  .b-example-divider-vert {
    width: 100%;
    height: 1.5rem;
    background-color: rgba(0, 0, 0, .1);
    border: solid rgba(0, 0, 0, .15);
    border-width: 1px 0;
    box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
  }

  .bi {
    vertical-align: -.125em;
    fill: currentColor;
  }

  .nav-scroller {
    position: relative;
    z-index: 2;
    height: 2.75rem;
    overflow-y: hidden;
  }

  .nav-scroller .nav {
    display: flex;
    flex-wrap: nowrap;
    padding-bottom: 1rem;
    margin-top: -1px;
    overflow-x: auto;
    text-align: center;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }

.upperContent {
    height:700px;
    padding-left:2px;
    overflow: auto;
}

.lowerContent {
    height:500px;
    padding-left:2px;
}

#tablePos{
    width:1300px;
    overflow-y:auto;
}

#tablePosDetail{
  width:1770px;
  overflow-y:auto;
}

#orderDetailBody{
    width:1758px;
    overflow-y:auto;
}


#commProBody{
  width:1318px;
  overflow-y:scroll;
}

#commProBody td{
  padding-top: 0;
  padding-bottom: 0;
  white-space: pre-line;
}

#commDetailBody{
  width:1318px;
  overflow-y:scroll;
}

#commDetailBody td{
  padding-top: 0;
  padding-bottom: 0;
}

#docDetailBody{
  width:1318px;
  overflow-y:scroll; 
}

#docDetailBody td{
  padding-top: 0;
  padding-bottom: 0;
  white-space: pre-line;
}

#docDetailBodyT{
  width:1318px;
  overflow-y:scroll; 
}

#docDetailBodyT td{
  padding-top: 0;
  padding-bottom: 0;
  white-space: pre-line;
}

table{
    table-layout:fixed;
    font-size: 12px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

/* Sticky Header: bleibt beim Scrollen oben, Spalten bleiben mit Body synchron.
   Selektor muss spezifischer sein als Bootstrap's ".table > :not(caption) > * > *"
   damit background-color nicht als transparent überschrieben wird. */
.table > thead > tr > th {
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: #fff;  /* muss deckend sein, sonst scrollt Body durch */
}

/* Tabelle stoppt bei Summe der Spaltenbreiten, table-responsive scrollt danach.
   Auf Mobile wird min-width im Media Query auf 0 zurückgesetzt. */
#oderMainTableBody {
    min-width: 1135px;
}

/* min-width/max-width in th-Inline-Styles verhindern proportionales Skalieren →
   th bleibt eingefroren, td skaliert mit → Desync. Beide aufheben: */
#oderMainTableBody thead tr > th {
    min-width: 0 !important;
    max-width: none !important;
}

.thead-blue{
  color: #0000FF;
}

th {
  /* KEIN overflow:hidden hier – das unterbindet position:sticky in Safari/WebKit */
  font-weight: normal;
  white-space: nowrap;
  box-sizing: border-box;
}

td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-sizing: border-box;
}

#orderDetailBody td{
  padding-top: 0;
  padding-bottom: 0;
  border-right: 1px solid lightgray;
}

/* Design/Ausführung/Material/Name: Zeilenumbrüche im Text immer anzeigen,
   unabhängig davon ob die Zelle gerade editierbar (x-editable) ist oder nicht -
   sonst wirkt die Spalte je nach Aufruf (Produktion vs. produzierte Bestellungen)
   inkonsistent mehrzeilig/einzeilig. */
#orderDetailBody td a {
  white-space: pre-line;
}

/* Höhe jetzt am scroll-Container, nicht am tbody */

#orderTableBody tr.active {
  background: #ccc !important;
}

#orderTableBody td{
 /* padding-top: 0.3rem;
  padding-bottom: 0.3rem;*/
  border-right: 1px solid lightgray;
  white-space: pre-line;
}

#myTabContent{
  height:500px;
  padding-left:8px;
}

/* =============================================
   LOGIN
   ============================================= */

.login {
  width: 100%;
  max-width: 420px;
  padding: 20px;
}

.login-inner {
  /* kein hardcoded padding-left mehr */
}

.login-logo {
  max-width: 100%;
  height: auto;
}

.card-signin {
  border: none;
  box-shadow: 0 2px 12px rgba(0,0,0,0.12);
}

@media (max-width: 767.98px) {
  .login {
    max-width: 100%;
    padding: 16px;
  }

  .login .card-body {
    padding: 1.25rem;
  }
}

.loggedInContent{
  display: none;
}

.editableWidth{
  width: 300px !important;
}

.editableColor{
  color: #0088cc !important;
}

.nav-link{
  padding: 8px 16px;
}

#orderTableBody tr.intern {
  background: #F2D393;
}

#orderTableBody tr.geplant {
  background: #A3E77F;
}
#orderTableBody tr.original {
  background: #FAFF80;
}

#orderTableBody tr.diemSports {
  background: #9dceeb;
}

#orderTableBody tr.pumax {
  background: #97db99;
}

#orderTableBody tr.quest {
  background: #ff7171;
}

#orderTableBody tr.lightGreen {
  background: #c4db9b;
}

#orderTableBody tr.bespo {
  background: #c5c5c5;
}

#orderTableBody tr.pink {
  background: #f29fc5;
}

#orderTableBody tr.extern {
  background: #9fcaf2;
}

#orderDetailBody tr.pink {
  background: #f29fc5;
}

.choosenLink{
  color: #0d6efd !important;
  font-weight: bold;
  font-size: larger;
}

/* =============================================
   RESPONSIVE / MOBILE OVERRIDES
   ============================================= */

/* Nav-Overlay Backdrop für Mobile */
#nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 98;
}
#nav-overlay.active {
  display: block;
}

@media (max-width: 767.98px) {

  /* Vertikaler Trenner auf Mobile ausblenden */
  .b-example-vr {
    display: none !important;
  }

  /* Main-Content auf volle Breite */
  .mainContent {
    width: 100% !important;
    overflow-x: hidden;
  }

  /* Oberer und unterer Inhaltsbereich: flexible Höhe */
  .upperContent {
    height: auto;
    min-height: 250px;
  }

  .lowerContent {
    height: auto;
    min-height: 200px;
  }

  /* Tab-Inhalt: flexible Höhe */
  #myTabContent {
    height: auto;
    min-height: 300px;
  }

  #orderDetailBody,
  #commProBody,
  #commDetailBody,
  #docDetailBody,
  #docDetailBodyT {
    width: auto;
  }

  /* iOS Zoom bei Inputs verhindern (min 16px) */
  input:not([type="checkbox"]):not([type="radio"]),
  textarea,
  select {
    font-size: 16px !important;
  }

  /* Tabs horizontal scrollbar bei zu vielen Tabs */
  .nav-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .nav-tabs::-webkit-scrollbar {
    display: none;
  }
  .nav-tabs .nav-link {
    white-space: nowrap;
    font-size: 11px;
    padding: 6px 8px;
  }

  /* Buttons in Formularen umbrechen */
  .btn-group-mobile {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  /* Touch-freundlichere Buttons */
  .btn {
    min-height: 38px;
  }

  /* Mobile-Header: Logo + Menu-Button */
  #mobile-header {
    display: flex;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 40px;
    background: rgb(240, 240, 240);
    z-index: 101;
    padding: 0 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
  }

  #mobile-logo {
    height: 40px;
    width: auto;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }

  /* Menu-Button: kein eigenes Positioning mehr – lebt im mobile-header */
  #menu-button {
    position: static;
    background: none;
    border-radius: 6px;
    padding: 6px 10px;
    z-index: auto;
  }

  /* Nav-Menü startet unterhalb des Headers, etwas mehr Abstand */
  #nav {
    top: 40px;
  }
  #nav.active {
    max-height: calc(100vh - 40px);
  }

  /* Main-Content: Platz für den fixen Header lassen */
  main {
    padding-top: 40px;
  }

  /* Nav-Logo auf Mobile kleiner skalieren */
  #nav > div > img {
    width: 60% !important;
  }

  /* -----------------------------------------------
     MOBILE RESPONSIVE TABELLE (order.html)
     Nur Spalten 1-3 sichtbar, Rest per Klick aufklappbar
  ----------------------------------------------- */

  /* Erste Spalte: kein extra Padding mehr nötig (kein fixed menu-button im Content) */
  #oderMainTableBody thead tr > th:first-child {
    padding-left: 8px;
  }

  /* Spalte 3 (Auftrags Nr.) und Spalte 4 (Bestelldatum) und ab 7 ausblenden;
     Spalte 5 (Lt eintreffend) und Spalte 6 (Event) bleiben sichtbar */
  #oderMainTableBody thead tr > th:nth-child(3),
  #oderMainTableBody tbody tr > td:nth-child(3),
  #oderMainTableBody thead tr > th:nth-child(4),
  #oderMainTableBody tbody tr > td:nth-child(4),
  #oderMainTableBody thead tr > th:nth-child(n+7),
  #oderMainTableBody tbody tr > td:nth-child(n+7) {
    display: none;
  }

  /* Flexible Spaltenbreiten für die 3 sichtbaren Spalten */
  #oderMainTableBody {
    table-layout: auto;
    width: 100%;
    min-width: 0;
  }
  #oderMainTableBody thead tr > th,
  #oderMainTableBody tbody tr > td {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  /* Klick-Cursor auf Datenzeilen */
  #orderTableBody > tr {
    cursor: pointer;
  }

  /* Aufklapp-Pfeil nur bei echten Datenzeilen (td ohne colspan = keine Sub-Header) */
  #orderTableBody > tr > td:first-child:not([colspan])::before {
    content: '▸ ';
    color: #0d6efd;
  }
  #orderTableBody > tr.mobile-expanded > td:first-child:not([colspan])::before {
    content: '▾ ';
    color: #0d6efd;
  }

  /* Sub-Header nicht klickbar */
  #orderTableBody > tr:has(td[colspan]) {
    cursor: default;
  }

  /* -----------------------------------------------
     MOBILE ACCORDION FÜR UNTERES PANEL
     (kein Bootstrap-Collapse – reines CSS/JS-Toggle)
  ----------------------------------------------- */
  #mobileAccordion {
    border-top: 2px solid #0d6efd;
    margin-top: 4px;
  }
  .mobile-acc-item {
    border-bottom: 1px solid #dee2e6;
  }
  .mobile-acc-header {
    cursor: pointer;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: bold;
    color: #0d6efd;
    background-color: #f0f4ff;
    display: flex;
    align-items: center;
    user-select: none;
    -webkit-user-select: none;
  }
  .mobile-acc-header:active {
    background-color: #d0deff;
  }
  .mobile-acc-open .mobile-acc-header {
    background-color: #0d6efd;
    color: #fff;
  }
  .mobile-acc-arrow {
    font-size: 14px;
    line-height: 1;
  }
  .mobile-acc-body {
    padding: 8px 4px;
  }

  /* Tabellen im Accordion horizontal scrollbar machen */
  .mobile-acc-body .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
    max-width: 100%;
  }
  .mobile-acc-body .table-responsive table {
    table-layout: auto;
    width: auto;
    min-width: max-content;
  }

  /* Detail-Zeile: volle Breite, normaler Textfluss */
  #orderTableBody > tr.mobile-detail-row > td {
    overflow: visible !important;
    white-space: normal !important;
    padding: 0 !important;
    border: none !important;
  }

  /* Detail-Card */
  .mobile-detail-card {
    padding: 10px 14px;
    background: #f0f4ff;
    border-left: 3px solid #0d6efd;
    border-bottom: 2px solid #c8d8f0;
  }
  .mobile-detail-card .detail-item {
    display: flex;
    gap: 8px;
    padding: 5px 0;
    border-bottom: 1px dotted #c8d8f0;
    font-size: 12px;
    line-height: 1.5;
    align-items: flex-start;
  }
  .mobile-detail-card .detail-item:last-child {
    border-bottom: none;
  }
  .mobile-detail-card .detail-label {
    font-weight: bold;
    color: #555;
    min-width: 115px;
    flex-shrink: 0;
  }
}