/* ==================================================================================================================== */
/* HABUS - Gesamt-CSS                                                                                                   */
/* Alle Gestaltungsregeln von HABUS. Farben, Schriftgroessen, Abstaende usw. kommen als Variablen aus habus_parameter.css, */
/* die IMMER vor dieser Datei geladen werden muss (frame.php, reset.php, mobile/index.php).                             */
/*                                                                                                                      */
/* Aufbau:                                                                                                              */
/*   Teil A  Basis - allgemeine Regeln (frueher habus_style/frame/nav/table/buttons/matrix/overlays_and_forms/msgbox.css). */
/*           Reihenfolge = fruehere Ladereihenfolge, da spaetere Regeln bei gleicher Spezifitaet gewinnen.              */
/*   Teil B  Datei-spezifische Regeln, alphabetisch nach Dateipfad (z. B. pages/kontierungen/kontieren.php).            */
/*           Hier stehen die frueheren <style>-Bloecke und style="..."-Attribute der jeweiligen Datei.                  */
/*                                                                                                                      */
/* Eigenstaendige Seiten ohne Frame setzen am <html> die Klasse habus-eigenseite (reset.php, Mobile-App), die Mobile-App */
/* zusaetzlich habus-mobile. Grundlayout (html/body) bzw. Desktop-Elementregeln sind per :where() davon ausgenommen,    */
/* :where() erhoeht die Spezifitaet dabei nicht.                                                                        */
/* ==================================================================================================================== */

/* ==================================================================================================================== */
/* TEIL A - BASIS                                                                                                       */
/* ==================================================================================================================== */

/* ==================================================================================================================== */
/* A: habus_style                                                                                                       */
/* ==================================================================================================================== */

/* ================================================================================================= */
/*   HABUS – CSS
/* ================================================================================================= */

/* --------------------------------------------------------------------------------------------------*/
/* 1) Text Alignment Helper */
/* --------------------------------------------------------------------------------------------------*/

	.habus-text-left { text-align: left !important; }
	.habus-text-center { text-align: center !important; }
	.habus-text-right { text-align: right !important; }

/* --------------------------------------------------------------------------------------------------*/
/* 2) Form Row Alignment Helper */
/* --------------------------------------------------------------------------------------------------*/

	.habus-form-row {
	  display: flex;
	  flex-direction: row;
	  gap: 12px;
	  align-items: center;
	  flex-wrap: nowrap;
	}
	
	/* Standard: Inputs teilen sich den Platz */
	.habus-form-row > * {
	  flex: 1;
	  min-width: 0;
	}

   /* Column: Elemente untereinander */
	.habus-form-col {
	  display: flex;
	  flex-direction: column;
	  gap: 10px;
	}

	/* Mobile Verhalten: Rows werden automatisch Columns */
	@media (max-width: 768px) {
	
	  /* Row bricht auf Mobile standardmäßig um */
	  .habus-form-row {
	    flex-direction: column;
	    align-items: stretch;
	    gap: 10px;
	  }
	
	  /* Ausnahme: Datum-Row soll nebeneinander bleiben */
	  .habus-form-row.habus-date-row {
	    flex-direction: row !important;
	    gap: 8px;
	  }
	
	  .habus-form-row.habus-date-row > input[type="date"], .habus-form-row.habus-date-row > input[type="time"], .habus-form-row.habus-date-row > input[type="datetime-local"] {
	    flex: 1;
	    font-size: var(--habus-fs-16) !important;
	    padding: 8px !important;
	  }
	}

/* --------------------------------------------------------------------------------------------------*/
/* 3) Formulare, Buttons & Utility */
/* --------------------------------------------------------------------------------------------------*/

	/* Standard Button */
	:where(html:not(.habus-mobile)) button {
	    padding: 6px 12px;
	    font-size: var(--habus-font-size-base);
	    border: none;
	    border-radius: var(--habus-button-radius);
	    color: var(--habus-schwarz);
	    cursor: pointer;
	}
	
	/* SVG Buttons / Icons */
	.habus-action { text-align: center; }
	
	.habus-btn {
	    border: 0;
	    background: var(--habus-color-btn);
	    cursor: pointer;
	    padding: 6px 8px;
	    border-radius: var(--habus-button-radius);
	    line-height: 1;
	    color: var(--habus-schwarz);
	    transition: .15s;
	}
	.habus-btn:hover { background: var(--habus-primaer-a15); }
	
	.habus-icon {
	    display: block;
	    width: 18px;
	    height: 18px;
	}
	
	.habus-color-btn-loeschen { background: var(--habus-color-btn-loeschen); }
	.habus-color-btn-aendern { background: var(--habus-color-btn-aendern); }
	.habus-color-btn-bestaetigen{ background: var(--habus-color-btn-bestaetigen); }
	.habus-color-btn-krank { background: var(--habus-color-btn-krank); }
	.habus-color-btn-urlaub { background: var(--habus-color-btn-urlaub); }
	
	/* Optional: farbige Akzente */
	.habus-btn.is-ok { color: var(--habus-gruen-630); }
	.habus-btn.is-danger { color: var(--habus-rot-450); }
	.habus-btn.is-accent {
	    --habus-accent:  #FFD24D;
	    --habus-accent2: #3A8DFF;
	}
	
	/* Spezielle Buttonarten (Komma-Selektoren korrekt zusammengefasst) */
	.habus-update-btn, .update-btn { background: var(--habus-color-btn-update); }
	
	.habus-delete-btn, .delete-btn { background: var(--habus-color-btn-delete); }
	
	.habus-create-btn, .create-btn { background: var(--habus-color-btn-create); }
	
	.symbol-btn { background: var(--habus-color-btn-neutral); }
	.text-btn { background: var(--habus-color-btn-neutral); }
	
	:where(html:not(.habus-mobile)) .disabled { opacity: 0.1; cursor: not-allowed; }
	.success { color: var(--habus-gruen-750); }
	
	:where(html:not(.habus-mobile)) input[type=text], :where(html:not(.habus-mobile)) input[type=password], :where(html:not(.habus-mobile)) select {
	    width: 100%;
	    border: none;
	    background: transparent;
	    text-align: center;
	    font-size: var(--habus-font-size-base);
	}
	
	.filter-input {
	    margin: 10px 0;
	    padding: 6px;
	    width: 300px;
	    font-size: var(--habus-font-size-base);
	}
	
	/* Selects – inkl. Anwesenheitsfilter */
	:where(html:not(.habus-mobile)) select, #userSelect, #monatSelect {
	    padding: 8px 12px;
	    font-size: var(--habus-font-size-base);
	    font-weight: bold;
	}
	
	#userSelect { min-width: 150px; }
	
	.habus-selectionfilter {
	    display: flex;
	    align-items: center;
	    gap: 15px;
	    width: 100%;
	}
	
	.habus-selectionfilter_rightgroup {
	    margin-left: auto;
	    display: flex;
	    align-items: center;
	    gap: 15px;
	}

/* Popup – zentriert und verschiebbar via JS */
/* Layout-Helfer */
.date-row {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
}

.date-row > div {
    display: flex;
    flex-direction: column;
}

#statusMessage {
    margin-top: 1rem;
    color: var(--habus-grau-80);
    font-size: var(--habus-font-size-base);
}

/* Mobile */
@media screen and (max-width: 480px) {
    #statusMessage { font-size: var(--habus-font-size-base); }
}

/* ================================================================================================= */

/* ==================================================================================================================== */
/* A: habus_frame                                                                                                       */
/* ==================================================================================================================== */

/* =================================================================================================
   HABUS – Gesamt-CSS (merged)
   Enthält: Design-Variablen, Global/Layout, Navigation, Buttons/Utility, Tabellen, Kalender/Urlaub,
            Overlay/Popup (einmalig, konsolidiert)
================================================================================================= */

/* ============================================================================================= */
/* 2) Global Reset & Grundlayout                                                                 */
/* ============================================================================================= */

* { box-sizing: border-box; }

html:where(:not(.habus-eigenseite)), :where(html:not(.habus-eigenseite)) body {
    margin: 0;
    padding: 0;
    font-size: var(--habus-font-size-base);
    font-family: var(--habus-font-sans);
    height: 100%;
}

/* Flex-Layout: Navigation links, Content rechts */
.flex-container {
    display: flex;
    min-height: 100vh;
    align-items: stretch;
}

/* Content-Bereich (rechts) */
.content {
    flex: 9;
    padding: 10px;
    background-color: var(--habus-color-bg-page);
	min-width: 0;              /* WICHTIG: erlaubt horizontales "Einschrumpfen" */
}

.content_header {
    flex: 9;
    padding: 0;
    min-height: 10vh;
    background-color: var(--habus-color-bg-page);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    margin-bottom: 12px;
}

/* ── Header-Bar (modern) ────────────────────────────────────────────────── */
.habus-header-bar {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 16px 20px;
    background: var(--habus-weiss-55);
    border-radius: var(--habus-radius-16);
    box-shadow: 0 2px 10px var(--habus-schatten-6);
}

.habus-header-titlewrap {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.habus-header-title {
    margin: 0;
    font-size: clamp(var(--habus-fs-14), 1.6vw, var(--habus-fs-18));
    font-weight: 700;
    color: var(--habus-color-text);
    letter-spacing: .01em;
}

.habus-header-mgmtview {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    font-size: var(--habus-fs-11);
    font-weight: 600;
    color: var(--habus-orange-760);
    background: var(--habus-warnung-hell-90);
    border: 1px solid var(--habus-gelb-280);
    border-radius: var(--habus-radius-20);
    padding: 3px 10px;
    text-decoration: none;
    white-space: nowrap;
}

.habus-header-mgmtview:hover { filter: brightness(.97); }
.habus-header-mgmtview i { font-size: var(--habus-fs-10); }

.habus-header-user {
    display: flex;
    align-items: center;
    gap: 10px;
}

.habus-user-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.habus-user-lastlogin {
    font-size: var(--habus-fs-9);
    font-weight: 400;
    color: var(--habus-color-text);
    opacity: .65;
    padding-left: 14px;
    white-space: nowrap;
}

.habus-user-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: var(--habus-fs-13);
    font-weight: 600;
    color: var(--habus-color-primary-light);
    background: var(--habus-petrol-a12);
    border-radius: var(--habus-radius-20);
    padding: 7px 14px;
    white-space: nowrap;
}

.habus-user-pill i { font-size: var(--habus-fs-12); opacity: .8; }

/* Mitarbeiter-Auswahl in der Kopfzeile (Monatsübersicht ab Level 2, siehe frame.php): mittleres Element in
   .habus-header-bar (space-between) -> zentriert zwischen Überschrift und Login-Name. Aufbau parallel zu
   .habus-user-info: Pill mit Namen (Schrift wie der Login-Name, aber dunkelrot), darunter "Dateneinträge für"
   wie "Letzter Login". Doppelte Klasse, damit die Farbe die von .habus-user-pill sicher überschreibt. */
.habus-header-userselect {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.habus-header-userselect-label {
    font-size: var(--habus-fs-9);
    font-weight: 400;
    color: var(--habus-color-text);
    opacity: .65;
    padding-left: 14px;
    white-space: nowrap;
}

.habus-user-pill.habus-user-pill--select { color: var(--habus-color-text-fehler-dunkel); }

.habus-user-pill--select select {
    max-width: 220px;
    margin: 0;
    padding: 0;
    font: inherit;
    line-height: inherit;
    color: inherit;
    background: transparent;
    border: none;
    cursor: pointer;
}

.habus-user-pill--select select:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.habus-user-pill--select option { color: var(--habus-color-text); font-weight: 400; }

.habus-logout-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--habus-color-primary-light);
    color: var(--habus-weiss);
    text-decoration: none;
    font-size: var(--habus-fs-14);
    box-shadow: 0 2px 8px var(--habus-schatten-15);
    transition: filter .15s ease, transform .12s ease;
}

.habus-logout-btn:hover { filter: brightness(1.1); }
.habus-logout-btn:active { transform: scale(.92); }

@media (max-width: 480px) {
    .habus-header-bar { padding: 12px 14px; gap: 8px; }
    .habus-user-pill span.pill-text { display: none; }
}

.content_body {
    flex: 9;
    padding: 0;
    min-height: 80vh;
    background-color: var(--habus-color-bg-page);
}

.footer {
    min-height: 5vh;
    margin-right: 10px;
    background-color: lightgray;
}

.debug_window { background-color: var(--habus-grau-50); }

/* Responsive: kleines Display → Navigation oben */
@media (max-width: 360px) {
    .flex-container { flex-direction: column; }
    .content { margin: 0; }
}

/* ============================================================================================= */
/* 9) Urlaubsübersicht                                                                           */
/* ============================================================================================= */

.habus-urlaub-wrapper {
    font-size: var(--habus-fs-12);
    margin: 10px 0;
}

.urlaub-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.urlaub-header h2 {
    margin: 0;
    font-size: var(--habus-fs-14);
}

.urlaub-month-nav {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: var(--habus-fs-10);
}

.urlaub-month-nav label {
    display: flex;
    align-items: center;
    gap: 5px;
}

.habus-urlaubstabelle {
    border-collapse: collapse;
    width: 100%;
    table-layout: fixed;
}

.habus-urlaubstabelle th, .habus-urlaubstabelle td {
    border: 1px solid var(--habus-color-table-border);
    padding: 3px 4px;
    text-align: center;
    vertical-align: middle;
    font-size: var(--habus-fs-10);
}

.month-cell {
    background: var(--habus-color-primary-light);
    color: var(--habus-weiss);
    font-weight: bold;
    min-width: 90px;
}

.month-cell-rowlabel { background: var(--habus-weiss); }

.fixed-col {
    background: var(--habus-gedaempft-hell-95);
    white-space: nowrap;
}

.name-cell {
    text-align: left;
    padding-left: 6px;
}

.day-header {
    background: var(--habus-color-primary-light);
    color: var(--habus-weiss);
    font-weight: bold;
}

.day-number {
    background: var(--habus-weiss);
    font-weight: bold;
}

.day-cell {
    height: 18px;
    background: var(--habus-weiss);
}

.weekend { background-color: var(--habus-color-weekend); }

.abs-tag {
    display: inline-block;
    min-width: 22px;
    padding: 2px 4px;
    margin: 1px;
    border-radius: var(--habus-button-radius);
    font-size: var(--habus-fs-10);
    font-weight: bold;
    text-align: center;
    color: var(--habus-weiss);
}

.abs-tag.abs-anwesend {
    background-color: var(--habus-color-primary);
    color: var(--habus-weiss);
    font-weight: bold;
}

.abs-urlaub { background-color: var(--habus-color-urlaub); }
.abs-krank { background-color: var(--habus-color-krank); }
.abs-ueberstunden { background-color: var(--habus-color-abs-ueberstunden); }
.abs-fortbildung { background-color: var(--habus-color-abs-fortbildung); }
.abs-sonstiges { background-color: var(--habus-color-abs-sonstiges); }
.abs-elternzeit { background-color: var(--habus-color-abs-elternzeit); }
.abs-sabbatical { background-color: var(--habus-color-abs-sabbatical); }
.abs-dauerkrank { background-color: var(--habus-color-abs-dauerkrank); }

.habus-urlaubstabelle tbody tr:hover td { background-color: var(--habus-gedaempft-hell-85); }

.habus-urlaubstabelle .scroll-container thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: var(--habus-color-primary-light);
    color: var(--habus-weiss);
}


/* ============================================================================================= */
/* 10) Overlay & Popup (konsolidiert) */
/*     sollte in der hbaus_overlay.css sein hier ist nur noch der rest. */
/* ============================================================================================= */

/* Close-Button */
.close-btn {
    position: absolute;
    top: 4px;
    right: 4px;
    border: none;
    background: transparent;
    cursor: pointer;
}

.close-btn .close-icon {
    width: 15px;
    height: 15px;
    color: var(--habus-grau-65);
    transition: color 0.2s ease;
}

.close-btn:hover .close-icon { color: var(--habus-rot-420); }

/* Button-Zustände im Popup */
.kommt, .senden {
    background-color: var(--habus-color-btn-comes);
    color: var(--habus-weiss);
}

.geht, :where(html:not(.habus-mobile)) .krank {
    background-color: var(--habus-color-btn-goes);
    color: var(--habus-weiss);
}

:where(html:not(.habus-mobile)) .dienstgang {
    background-color: var(--habus-color-btn-dienstgang);
    color: var(--habus-weiss);
}

:where(html:not(.habus-mobile)) .dienstgang {
    background-color: var(--habus-color-btn-dienstgang);
    color: var(--habus-weiss);
}

.urlaub {
    background-color: var(--habus-color-btn-urlaub);
    color: var(--habus-weiss);
}

/* Hover auf Close-Buttons */
.close-btn:hover {
    color: var(--habus-rot-500);
}

/* Layout-Helfer */
.date-row {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
}

.date-row > div {
    display: flex;
    flex-direction: column;
}

#statusMessage {
    margin-top: 1rem;
    color: var(--habus-grau-80);
    font-size: var(--habus-font-size-base);
}

/* Mobile */
@media screen and (max-width: 480px) {
    #statusMessage { font-size: var(--habus-font-size-base); }
}

/* ================================================================================================= */

/* ==================================================================================================================== */
/* A: habus_nav                                                                                                         */
/* ==================================================================================================================== */

/* =============================================================================================
   HABUS – Navigation Sidebar (NO SCROLL / FIT ONE PAGE)
   File: habus_nav.css
   ============================================================================================= */

/* =============================================================================================
   0) Safety defaults
   ============================================================================================= */

.navigator, .navigator * {
  box-sizing: border-box;
}

/* =============================================================================================
   1) Sidebar Container (no slider / fits one page)
   ============================================================================================= */

.navigator {
  width: var(--habus-nav-width, 170px);
  height: 100vh;

  flex-shrink: 0;
  display: flex;
  flex-direction: column;

  padding: 10px;

  background-color: var(--habus-color-nav-bg);

  overflow: hidden;     /* ✅ kein horizontaler UND kein vertikaler Slider */

  /* Bleibt beim Scrollen langer Seiten (z.B. Karten-/Auswertungsseiten) im Viewport sichtbar,
     statt mit dem Content-Bereich aus dem sichtbaren Bereich zu scrollen. */
  position: sticky;
  top: 0;
  align-self: flex-start;
}

/* =============================================================================================
   1b) Resize-Slider (Drag-Handle zwischen Navigator und Content)
   ============================================================================================= */

.habus-nav-resizer {
  width: 6px;
  flex-shrink: 0;
  cursor: col-resize;

  position: sticky;
  top: 0;
  height: 100vh;
  align-self: flex-start;

  background: var(--habus-schatten-8);
  transition: background-color .12s ease;
}

.habus-nav-resizer:hover, .habus-nav-resizer.is-dragging {
  background: var(--habus-color-primary-light);
}

/* =============================================================================================
   2) Lists
   ============================================================================================= */

.navigation, .sub-navigation {
  margin: 0;
  padding: 0;
  list-style: none;

  font-family: var(--habus-font-arial);
  font-size: var(--habus-font-size-navigation);
}

/* Das Menü nimmt den verfügbaren Platz ein */
.navigation {
  flex: 1 1 auto;
  overflow: hidden; /* ✅ kein Scroll */
}

/* =============================================================================================
   3) Items (compact spacing)
   ============================================================================================= */

.navigation li {
  width: 100%;
  margin: 4px 0;     /* ✅ kompakter als vorher */
}

/* =============================================================================================
   4) Links (no overflow)
   ============================================================================================= */

.navigation a, .sub-navigation a {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;

  padding: 6px 8px;       /* ✅ kompakter */
  border-radius: var(--habus-radius-large);

  color: var(--habus-color-bg-page);
  font-weight: 700;
  text-decoration: none;

  overflow: hidden;       /* ✅ Link-Inhalt darf nicht raus */
}

/* Hover */
.navigation a:hover, .sub-navigation a:hover {
  background-color: var(--habus-weiss-12);
}

/* =============================================================================================
   5) Icons + Text
   ============================================================================================= */

.navigation i, .sub-navigation i {
  width: 18px;
  text-align: center;
  flex-shrink: 0;
}

.nav-text {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;   /* ✅ wenn zu lang -> ... */
  min-width: 0;              /* ✅ wichtig für flex overflow */
}

/* =============================================================================================
   6) Submenu (compact + controlled)
   ============================================================================================= */

.sub-navigation {
  margin-top: 4px;
  padding-left: 18px;   /* ✅ etwas eingerückt, aber nicht zu viel */
}

/* standard: versteckt */
li.has-children > .sub-navigation {
  display: none;
}

/* sichtbar wenn open */
li.has-children.open > .sub-navigation {
  display: block;
}

/* Pfeil-Indikator für aufklappbare Hauptpunkte */
li.has-children > a .nav-caret {
  margin-left: auto;
  flex-shrink: 0;
  transition: transform 0.18s ease;
}

li.has-children.open > a .nav-caret {
  transform: rotate(90deg);
}

/* =============================================================================================
   7) Footer (small, no space waste)
   ============================================================================================= */

.navigator-footer {
  margin-top: auto;    /* schiebt ihn ganz nach unten */
  padding: 6px;

  font-size: var(--habus-fs-9);
  text-align: left;    /* jetzt links */
  opacity: 0.6;
  color: var(--habus-text-hell-85);

  line-height: 1.1;
}

/* =============================================================================================
   8) Mobile: optional off-canvas (ohne Scroll/Slider)
   ============================================================================================= */

.habus-nav-toggle {
  display: none;

  width: 42px;
  height: 42px;

  border-radius: var(--habus-radius-12);
  border: 1px solid var(--habus-schatten-15);

  background: var(--habus-weiss);
  cursor: pointer;

  margin-bottom: 8px;
}

.habus-nav-toggle i {
  font-size: var(--habus-fs-18);
}

.habus-nav-backdrop {
  display: none;
  position: fixed;
  inset: 0;

  background: var(--habus-schatten-45);
  z-index: 2400;
}

@media (max-width: 860px) {
  .habus-nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .habus-nav-resizer {
    display: none;      /* Off-Canvas-Menü statt Sidebar -> keine Breitenanpassung per Slider */
  }

  .navigator {
    position: fixed;
    left: 0;
    top: 0;

    width: 320px;
    max-width: 86vw;

    transform: translateX(-110%);
    transition: transform 0.22s ease;

    z-index: 2500;
    box-shadow: 0 10px 30px var(--habus-schatten-25);
  }

  .navigator.is-open {
    transform: translateX(0);
  }

  .habus-nav-backdrop.is-open {
    display: block;
  }
}

/* Mobile: Hamburger immer oben links fest */
@media (max-width: 860px) {

  /* Der Button sitzt in deinem Header, soll aber fixed sein */
  #habusNavToggle.habus-nav-toggle{
    position: fixed;
    top: 10px;
    left: 10px;
    margin: 0;
    z-index: 2601; /* über Backdrop (2400) und Panel (2500) */
  }

  /* Optional: damit nichts unter dem Button "klebt" */
  .content{
    /* padding-top: 64px; /* vorher 20px -> jetzt Platz für den fixed Button */
    padding-top: 20px;
  }
}

/* ==================================================================================================================== */
/* A: habus_table                                                                                                       */
/* ==================================================================================================================== */

/* =================================================================================================
   HABUS – Tabellen / Kalender / Urlaub / Anwesenheit
================================================================================================= */

/* ============================================================================================= */
/* Scroll-Container                                                                           */
/* ============================================================================================= */

.scroll-container{
  width: 100%;
  max-width: 100%;
  overflow: auto;
  max-height: 70vh;
  box-sizing: border-box;
}

.scroll-container table{
  min-width: 100%;
  width: max-content !important;      /* ok, erzeugt Overflow */
}

.scroll-container thead th {
  position: sticky;
  top: 0;
  background: var(--habus-weiss);   /* wichtig, sonst scheint der Content durch */
  z-index: 10;        /* damit es über den Zellen liegt */
  box-shadow: 0 2px 0 var(--habus-schatten-8);
}

.scroll-container th, .scroll-container td{
  white-space: nowrap;
}

/* ============================================================================================= */
/* TABELLEN (GENERIC)                                                                            */
/* ============================================================================================= */

/* muss noch einsortiert werden */

.habus-table-left{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}

.habus-table-global, .habus-table-filter, .habus-table-input{
  padding: 6px 10px;
  border-radius: var(--habus-radius-large);
  border: 1px solid var(--habus-schatten-15);
  width: 180px;
  max-width: 50vw;
}

.habus-table-filterrow td{
  background: var(--habus-schatten-3);
}

.habus-dt-actions .habus-btn{
  padding: 6px 8px;
}

.habus-dt-saving{
  opacity: .65;
}

.habus-dt-select-col, .habus-dt-select{
  width: 34px;
  text-align: center;
}

.habus-dt-bulkbar{
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
  padding: 8px 12px;
  border-radius: var(--habus-radius-8);
  background: var(--habus-color-primary-light, #eef3ee);
}

.habus-dt-bulk-count{
  font-weight: 600;
  white-space: nowrap;
}

.habus-dt-bulk-actions{
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

/* hier rein ****/

.habus-table-toolbar, .habus-table-header {
    display: flex;
    align-items: center;
    gap: 15px;
    width: 100%;
}

.habus-table-header_rightgroup {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 15px;
}

.habus-table-header-field {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    white-space: nowrap;
}

.habus-table-header-input {
	background-color: var(--habus-weiss);
    max-width: 150px;
    width: 100%;
    padding: 6px 8px;
    align-items: left;
    border: 1px solid var(--habus-grau-20);
    border-radius: var(--habus-radius-4);
    font-size: var(--habus-font-size-base);
    box-sizing: border-box;
}

#habus_table, .habus-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--habus-font-arial);
    font-size: var(--habus-font-size-base);
    background: var(--habus-color-card-bg, #fff);
}

/* Zellen */
#habus_table th, #habus_table td, .habus-table th, .habus-table td {
    border: 1px solid var(--habus-color-table-border, #ddd);
    padding: 8px 10px;
    vertical-align: middle;
}

/* Kopf */
.habus-table thead th, #habus_table thead th {
    background-color: var(--habus-color-table-header);
    color: var(--habus-weiss);
    font-weight: 600;
    padding: 12px 10px;
    text-align: left;
}

/* Zebra */
.habus-table tbody tr:nth-child(even), #habus_table tbody tr:nth-child(even) {
    background-color: var(--habus-color-table-row-alt);
}

/* Hover */
.habus-table tbody tr:hover, #habus_table tbody tr:hover {
    background-color: var(--habus-gedaempft-hell-85);
}

/* Spezialzeilen */
.habus-table-row-future { background: var(--habus-color-future) !important; }
.habus-table-row-closed { background: var(--habus-color-closed) !important; }
.habus-table-row-noworkingday { background: var(--habus-color-noworkingday) !important; }
.habus-table-row-weekend { background: var(--habus-color-weekend) !important; }
.habus-table-row-error { background: var(--habus-color-error) !important; }
.habus-table-row-requested { background: var(--habus-color-requested) !important; }
.habus-table-row-krank { background: var(--habus-color-row-krank) !important; }
.habus-table-row-urlaub { background: var(--habus-color-row-urlaub) !important; }
.habus-table-row-elternzeit { background: var(--habus-color-row-elternzeit) !important; }
.habus-table-row-sabbatical { background: var(--habus-color-row-sabbatical) !important; }
.habus-table-row-dauerkrank { background: var(--habus-color-row-dauerkrank) !important; }
.habus-table-row-autobooking { background: var(--habus-color-autobooking) !important; font-style: italic; }
.habus-table-row-summary { background: var(--habus-color-table-row-alt) !important; }
.habus-table-row-summary td { border-top: 2px solid var(--habus-color-table-border, #ddd); }

/* Spezialzeilen */
.habus-table-cell-white { background: var(--habus-weiss) !important; }
.habus-table-cell-future { background: var(--habus-color-future) !important; }
.habus-table-cell-closed { background: var(--habus-color-closed) !important; }
.habus-table-cell-noworkingday { background: var(--habus-color-noworkingday) !important; }
.habus-table-cell-weekend { background: var(--habus-color-weekend) !important; }
.habus-table-cell-error { background: var(--habus-color-error) !important; }
.habus-table-cell-requested { background: var(--habus-color-requested) !important; }
.habus-table-cell-urlaub { background: var(--habus-color-urlaub) !important; }
.habus-table-cell-krank { background: var(--habus-color-krank) !important; }
.habus-table-cell-elternzeit { background: var(--habus-color-abs-elternzeit) !important; }
.habus-table-cell-sabbatical { background: var(--habus-color-abs-sabbatical) !important; }
.habus-table-cell-dauerkrank { background: var(--habus-color-abs-dauerkrank) !important; }

/* Filter/Input-Zeilen */
#habus_table tr.filterline, #habus_table tr.filterline th { background: var(--habus-gelb-100) !important; color: var(--habus-schwarz); }

#habus_table tr.inputline, #habus_table tr.inputline th { background: var(--habus-gruen-70) !important; color: var(--habus-schwarz); }

/* KW-Spalte */
#habus_table th.kw-column {
    width: 50px;
    white-space: nowrap;
}

/* ============================================================================================= */
/* TABLE HEADER/FOOTER LAYOUT                                                                    */
/* ============================================================================================= */

#habus_table_header, #habus_table_underthetable {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

#habus_table_header {
    justify-content: space-between;
    margin-bottom: 10px;
    background: var(--habus-color-nav-bg);
}

#habus_table_header > div {
    display: flex;
    align-items: center;
    gap: 10px;
}

#habus_table_underthetable {
    justify-content: flex-end;
    margin-bottom: 10px;
}

/* ============================================================================================= */
/* BUCHUNGSKALENDER                                                                              */
/* ============================================================================================= */

.buchungstag, #habus_table_buchungstag {
    min-height: 100px;
    padding: 6px;
    border: 1px solid var(--habus-color-table-border);
    background: var(--habus-weiss);
    position: relative;
}

.buchungstag:hover, #habus_table_buchungstag:hover {
    background: var(--habus-gedaempft-hell-85);
    cursor: pointer;
}

.buchungstag.wochenende, #habus_table_buchungstag.wochenende {
    background: var(--habus-color-weekend);
}

/* Datum im Feld */
.buchungstag.datum, #habus_table_buchungstag.datum {
    position: absolute;
    top: 5px;
    right: 8px;
    font-weight: bold;
    color: var(--habus-grau-65);
}

.buchungskalender-header, #habus_table_buchungskalender-header {
    height: 40px;
    padding: 8px 0;
    text-align: center;
    font-weight: bold;
    background: var(--habus-color-primary);
    color: var(--habus-weiss);
}

.buchungskalender-header-kw {
    background: transparent;
}

/* ============================================================================================= */
/* ANWESENHEIT                                                                                   */
/* ============================================================================================= */

.habus-anwesenheit-wrapper {
    padding: 16px;
    border-radius: var(--habus-button-radius);
    background: var(--habus-color-bg-page);
}

.anwesenheit-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin-bottom: 12px;
}

.anwesenheit-filter > div {
    display: flex;
    align-items: center;
    gap: 4px;
}

.anwesenheit-filter label {
    font-weight: bold;
}

.anwesenheit-filter input, .anwesenheit-filter select {
    padding: 2px 6px;
}

.monat-navigation {
    display: flex;
    align-items: center;
    gap: 6px;
}

.monat-navigation button {
    padding: 2px 8px;
    border-radius: var(--habus-button-radius);
    border: 1px solid var(--habus-color-primary);
    background: var(--habus-weiss);
    cursor: pointer;
}

.monat-navigation button:hover {
    background: var(--habus-gedaempft-hell-80);
}

#monatLabel {
    font-weight: bold;
    min-width: 80px;
    text-align: center;
}

.anwesenheit-meta {
    display: flex;
    gap: 16px;
    font-size: 0.9rem;
    margin-bottom: 8px;
}

.row-fehler { background: var(--habus-fehler-hell-85); }

.anwesenheit-status {
    margin-top: 8px;
    font-size: 0.85rem;
}

/* ============================================================================================= */
/* ANTRÄGE FREIGEBEN – Typ-Filter (Urlaub / Krank / Buchungsanträge)                             */
/* ============================================================================================= */

.habus-antraege-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
    margin: 10px 0 14px;
}

.habus-antraege-filter-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: var(--habus-button-radius, 6px);
    border: 1px solid var(--habus-color-table-border, #ddd);
    background: var(--habus-color-card-bg, #fff);
    cursor: pointer;
    font-weight: 600;
    user-select: none;
}

.habus-antraege-filter-item input[type="checkbox"] {
    cursor: pointer;
}

.habus-antraege-filter-count {
    display: inline-block;
    min-width: 20px;
    padding: 1px 7px;
    border-radius: var(--habus-radius-999);
    background: var(--habus-color-primary, #555);
    color: var(--habus-weiss);
    font-size: 0.85em;
    font-weight: 700;
    text-align: center;
}

.habus-antraege-filter-item--urlaub .habus-antraege-filter-count { background: var(--habus-color-urlaub); }
.habus-antraege-filter-item--krank .habus-antraege-filter-count { background: var(--habus-color-krank); }

/* ============================================================================================= */
/* URLAUBSÜBERSICHT                                                                              */
/* ============================================================================================= */

.habus-urlaub-wrapper {
    margin: 10px 0;
    font-size: var(--habus-fs-12);
}

.urlaub-header {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.urlaub-header h2 {
    margin: 0;
    font-size: var(--habus-fs-14);
}

.urlaub-month-nav {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: var(--habus-fs-10);
}

.urlaub-month-nav label {
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Urlaubstabelle */
.habus-urlaubstabelle {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.habus-urlaubstabelle th, .habus-urlaubstabelle td {
    border: 1px solid var(--habus-color-table-border);
    padding: 3px 4px;
    text-align: center;
    font-size: var(--habus-fs-10);
    vertical-align: middle;
}

.month-cell, .day-header {
    background: var(--habus-color-primary-light);
    color: var(--habus-weiss);
    font-weight: bold;
}

.month-cell-rowlabel { background: var(--habus-weiss); }

.fixed-col {
    background: var(--habus-gedaempft-hell-95);
    white-space: nowrap;
    text-align: left;
}

.name-cell { text-align: left; padding-left: 6px; }

.day-number { background: var(--habus-weiss); font-weight: bold; }

.day-cell { height: 18px; background: var(--habus-weiss); }

.weekend { background: var(--habus-color-weekend); }

.habus-urlaubstabelle tbody tr:hover td { background: var(--habus-gedaempft-hell-85); }

/* Sticky Header (wenn du wirklich thead sticky nutzt) */
.habus-urlaubstabelle .scroll-container thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--habus-color-primary-light);
    color: var(--habus-weiss);
}

/* Tags */
.abs-tag {
    display: inline-block;
    min-width: 22px;
    padding: 2px 4px;
    margin: 1px;
    border-radius: var(--habus-button-radius);
    font-size: var(--habus-fs-10);
    font-weight: bold;
    text-align: center;
    color: var(--habus-weiss);
}

.abs-tag.abs-anwesend {
    background: var(--habus-color-primary);
}

.abs-tag.abs-autobooking {
    background: var(--habus-color-autobooking);
    color: var(--habus-grau-80);
    border: 1px dashed var(--habus-gelb-620);
}

/* Abwesenheit-Farben */
.abs-urlaub { background: var(--habus-color-urlaub); }
.abs-krank { background: var(--habus-color-krank); }
.abs-ueberstunden { background: var(--habus-color-abs-ueberstunden); }
.abs-fortbildung { background: var(--habus-color-abs-fortbildung); }
.abs-sonstiges { background: var(--habus-color-abs-sonstiges); }
.abs-elternzeit { background: var(--habus-color-abs-elternzeit); }
.abs-sabbatical { background: var(--habus-color-abs-sabbatical); }
.abs-dauerkrank { background: var(--habus-color-abs-dauerkrank); }

/* ==================================================================================================================== */
/* A: habus_buttons                                                                                                     */
/* ==================================================================================================================== */

/* ============================================================================================= */
/* HABUS BUTTONS                                                                                       */
/* ============================================================================================= */

.habus-btn {
    padding: 8px 12px;
    border-radius: var(--habus-radius);
    border: none;
    cursor: pointer;
    transition: background 0.2s ease;
    font-size: var(--habus-font-size-base);
    background-color: var(--habus-color-btn);
}

.habus-btn:hover {
    background: var(--habus-color-btn-over);
}

.habus-btn--primary {
    background-color: var(--habus-color-btn-primary);
}

.habus-btn--primary:hover {
    background: var(--habus-color-btn-over-primary);
}

.habus-btn--login {
  width: 100%;
  padding: 12px 14px;
  border: 0;
  border-radius: 0;
  background: var(--habus-overlay-header);
  color: var(--habus-weiss);
  font-weight: 700;
  font-size: var(--habus-fs-14);
  cursor: pointer;
}
.habus-btn--login:hover { filter: brightness(0.95); }

.habus-btn--danger {
    background: var(--habus-rot-600);
    color: var(--habus-weiss);
    border: 1px solid var(--habus-rot-600);
}

.habus-btn--danger:hover {
    filter: brightness(0.95);
}

/* ============================================================================================= */
/* ICON Buttons                                                                                  */
/* ============================================================================================= */

.habus-iconbtn {
    border: 1px solid var(--habus-color-table-border, #ddd);
    background: var(--habus-color-card-bg, #fff);
    border-radius: var(--habus-radius-large);
    padding: 6px 8px;
    cursor: pointer;
}

.habus-iconbtn:hover {
    filter: brightness(0.98);
}

.habus-iconbtn--danger { border-color: var(--habus-rot-420-a35); }
.habus-iconbtn--ok { border-color: var(--habus-gruen-510-a35); }

/* ============================================================================================= */
/* UTILITY / TYPO                                                                               */
/* ============================================================================================= */

/* Layout-Helpers (aus deinem Block am Ende) */
.habus-bst-head { margin-bottom: 12px; }
.habus-bst-title { margin: 0 0 4px 0; font-size: 1.1rem; }

.habus-bst-actions {
    margin-top: 10px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.bst-actions {
    white-space: nowrap;
    display: flex;
    gap: 6px;
}

.habus-bst-msg {
    margin: 10px 0;
    padding: 10px 12px;
    border: 1px solid var(--habus-color-border, #ddd);
    border-radius: var(--habus-radius-large);
    background: var(--habus-color-card-bg, #fafafa);
}

.habus-bst-empty {
    text-align: center;
    color: var(--habus-color-text-muted,#777);
    padding: 16px;
}

/* Button-Zustände im Popup */
.kommt, .senden {
    background-color: var(--habus-color-btn-comes);
    color: var(--habus-weiss);
}

.geht, :where(html:not(.habus-mobile)) .krank {
    background-color: var(--habus-color-btn-goes);
    color: var(--habus-weiss);
}

:where(html:not(.habus-mobile)) .dienstgang {
    background-color: var(--habus-color-btn-dienstgang);
    color: var(--habus-weiss);
}

:where(html:not(.habus-mobile)) .dienstgang {
    background-color: var(--habus-color-btn-dienstgang);
    color: var(--habus-weiss);
}

.urlaub {
    background-color: var(--habus-color-btn-urlaub);
    color: var(--habus-weiss);
}

/* Hover auf Close-Buttons */
.close-btn:hover {
    color: var(--habus-rot-500);
}

/* ============================================================================================= */
/* 10) Overlay & Popup (konsolidiert) */
/*     sollte in der hbaus_overlay.css sein hier ist nur noch der rest. */
/* ============================================================================================= */

/* Close-Button */
.habus-bst-dt {
    position: absolute;
    top: 4px;
    right: 4px;
    border: none;
    background: transparent;
    cursor: pointer;
}

.close-btn .close-icon {
    width: 15px;
    height: 15px;
    color: var(--habus-grau-65);
    transition: color 0.2s ease;
}

.close-btn:hover .close-icon { color: var(--habus-rot-420); }

/* ==================================================================================================================== */
/* A: habus_matrix                                                                                                      */
/* ==================================================================================================================== */

/* =================================================================================================
   HABUS – Gesamt-CSS (merged)
   Enthält: Design-Variablen, Global/Layout, Navigation, Buttons/Utility, Tabellen, Kalender/Urlaub,
            Overlay/Popup (einmalig, konsolidiert)
================================================================================================= */


/* ============================================================================================= */
/* 7b) Matrix-Grundlayout                                                                        */
/* ============================================================================================= */

#habus_matrix, .habus-matrix {
    font-family: var(--habus-font-arial);
    font-size: var(--habus-font-size-base);
    border-collapse: collapse;
    width: 100%;
    table-layout: fixed;
}

#habus_matrix th.kw-column, .habus-matrix th.kw-column {
    width: 60px;
    min-width: 50px;
    max-width: 50px;
    white-space: nowrap;
}

#habus_matrix th:not(.kw-column), #habus_matrix td:not(.kw-column), .habus-matrix th:not(.kw-column), .habus-matrix td:not(.kw-column) {
    width: calc((100% - 60px) / 7);
}

#habus_matrix td, #habus_matrix th, .habus-matrix td, .habus-matrix th {
    border: 1px solid var(--habus-color-table-border);
    padding: 8px;
    font-size: var(--habus-font-size-base);
}

#habus_matrix td, .habus-matrix td {
    height: 13vh;
    vertical-align: top;
    white-space: normal;
    word-break: break-word;
}

#habus_matrix tr:hover, .habus-matrix tr:hover { background-color: var(--habus-gedaempft-hell-75); }

#habus_matrix th, .habus-matrix th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: left;
    background-color: var(--habus-color-table-header);
    color: var(--habus-weiss);
}

#habus_matrix td .datum, .habus-matrix td .datum {
    font-weight: bold;
    display: block;
    margin-bottom: 4px;
}

/* ==================================================================================================================== */
/* A: habus_overlays_and_forms                                                                                          */
/* ==================================================================================================================== */

/* =================================================================================================
   HABUS – CSS for Overlays
   .habus-overlay
================================================================================================= */

.habus-login {
  max-width: 420px;
  width: min(420px, 100%);
  margin: 0 auto;
  padding: 6px 10px 20px 10px;
  box-sizing: border-box;
}

.habus-login__logo {
  width: 96px;
  height: 96px;
  object-fit: contain;
  display: block;
  margin: 0 auto 12px auto;
}

.habus-login__title {
  margin: 0;
  font-size: var(--habus-fs-16);
  font-weight: 700;
  color: var(--habus-gedaempft-dunkel-70);
}

.habus-login__subtitle {
  margin: 6px 0 16px 0;
  font-size: var(--habus-fs-13);
  color: var(--habus-schatten-65);
}

.habus-login__subtitle--error {
  color: var(--habus-rot-580);
  font-weight: 600;
}

.habus-login__error {
  border: 1px solid var(--habus-rot-490-a35);
  background: var(--habus-rot-490-a8);
  color: var(--habus-rot-580);
  padding: 10px 12px;
  margin: 12px 0;
  text-align: left;
}

.habus-login__info {
  border: 1px solid var(--habus-gruen-640-a35);
  background: var(--habus-gruen-640-a8);
  color: var(--habus-erfolg-dunkel-30);
  padding: 10px 12px;
  margin: 12px 0;
  text-align: left;
}

.habus-login__btn {
  width: 100%;
  padding: 12px 14px;
  border: 0;
  border-radius: 0;
  background: var(--habus-overlay-header);
  color: var(--habus-weiss);
  font-weight: 700;
  font-size: var(--habus-fs-14);
  cursor: pointer;
}
.habus-login__btn:hover { filter: brightness(0.95); }

.habus-login a {
  font-size: var(--habus-fs-12);
  color: var(--habus-schatten-75);
  text-decoration: underline;
}
.habus-login a:hover { color: var(--habus-schatten-90); }

.habus-login__footer {
  margin-top: 18px;
  font-size: var(--habus-fs-12);
  color: var(--habus-schatten-55);
}

.habus-login__divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px 0;
  color: var(--habus-schatten-40);
  font-size: var(--habus-fs-12);
}
.habus-login__divider::before, .habus-login__divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--habus-schatten-12);
}

.habus-login__btn--webauthn {
  background: var(--habus-weiss);
  color: var(--habus-overlay-header);
  border: 1px solid var(--habus-overlay-header);
}
.habus-login__btn--webauthn:hover { background: var(--habus-schatten-3); filter: none; }
.habus-login__btn--webauthn:disabled { opacity: 0.6; cursor: wait; }



/* =================================================================================================
   Overlay Window (Desktop)
================================================================================================= */

.habus-form-root.hidden, .habus-overlay-root.hidden { display:none; }

.habus-form-root, .habus-overlay-root {
  position: fixed; inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.habus-form-backdrop, .habus-overlay-backdrop {
  position:absolute; inset:0;
  background: var(--habus-schatten-45);
}


.habus-form-window, .habus-overlay-window {
  position: absolute;

  width: fit-content;
  max-width: 92vw;
  min-width: 160px;
  max-height: 86vh;

  background: var(--habus-weiss);
  border-radius: var(--habus-overlay-radius);
  box-shadow: 0 12px 40px var(--habus-schatten-35);
  overflow: hidden;
}

.habus-form-header, .habus-overlay-header {
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 1rem;
  padding: 10px 12px;
  background: var(--habus-overlay-header);
  color: var(--habus-weiss);
  cursor: grab;
  user-select: none;
}

.habus-form-header:active, .habus-overlay-header:active { cursor: grabbing; }

.habus-form-window.hide-header .habus-form-header, .habus-overlay-window.hide-header .habus-overlay-header {
  display: none !important;
}

.habus-form-window.hide-header .habus-form-body, .habus-form-window.hide-header .habus-form-centerbody, .habus-overlay-window.hide-header .habus-overlay-body, .habus-overlay-window.hide-header .habus-overlay-centerbody {
  max-height: 86vh !important;
}

@media (max-width: 768px) {

  .habus-form-window, .habus-overlay-window {
    left: 0 !important;
    top: 0 !important;

    width: 100vw !important;
    height: 80dvh !important;

    max-width: 100vw !important;
    max-height: 80dvh !important;

    border-radius: 0 !important;
  }

  /* Fenster als Spalte: Kopfzeile fix, Inhalt füllt den Rest und ist der EINZIGE Scrollbereich. Vorher hatte der
     Inhalt eine eigene max-height (größer als das Fenster, overflow: hidden) und der innere centerbody scrollte
     zusätzlich - der untere Teil (Haken, Buttons) war abgeschnitten und auf dem iPhone nicht erreichbar.
     Selektoren mit Fenster-Präfix, damit die allgemeine max-height weiter unten in dieser Datei nicht gewinnt. */
  .habus-form-window, .habus-overlay-window {
    display: flex;
    flex-direction: column;
  }

  .habus-form-window .habus-form-header, .habus-overlay-window .habus-overlay-header {
    flex: 0 0 auto;
  }

  .habus-form-window .habus-form-body, .habus-overlay-window .habus-overlay-body {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    -webkit-overflow-scrolling: touch;
  }

  .habus-form-window .habus-form-body .habus-form-centerbody, .habus-overlay-window .habus-overlay-body .habus-overlay-centerbody {
    max-height: none;
    overflow: visible;
    padding: 0;
  }

  /* Nicht schließbare Startup-Schritte (Passwort, EULA, Nachricht) über die volle Höhe - der Hintergrund ist dort
     ohnehin nicht bedienbar und die Buttons sollen ohne Scrollen sichtbar sein. */
  .habus-overlay-window.habus-overlay-window--locked {
    height: 100dvh !important;
    max-height: 100dvh !important;
  }

  /* Buttons bei schmalem Bildschirm umbrechen statt aus dem Fenster zu laufen */
  .habus-form-footer, .habus-overlay-footer {
    flex-wrap: wrap;
    gap: 10px;
  }

  /* Kopflose Overlays (Login, Logout, Passwort-Reset) wirken wie eigene Seiten
     und sollen daher den Bildschirm exakt ausfüllen statt nur 80dvh. */
  .habus-form-window.hide-header, .habus-overlay-window.hide-header {
    height: 100dvh !important;
    max-height: 100dvh !important;
  }

  .habus-form-window.hide-header .habus-form-body, .habus-form-window.hide-header .habus-form-centerbody, .habus-overlay-window.hide-header .habus-overlay-body, .habus-overlay-window.hide-header .habus-overlay-centerbody {
    max-height: 100dvh !important;
  }

  .habus-login__logo {
    width: 110px;
    height: 110px;
  }
  .habus-login__title { font-size: var(--habus-fs-18); }
  .habus-login__btn { font-size: var(--habus-fs-16); padding: 14px 16px; }
}

.habus-form-title, .habus-overlay-title {
  font-size: 1.4rem;
  font-weight: 700;
  margin: 0;
}

.habus-form-body, .habus-form-centerbody, .habus-overlay-body, .habus-overlay-centerbody {
  padding: 12px;
  overflow: auto;
  max-height: calc(86vh - 44px);

  /* Kein sichtbarer Scrollbar/Slider im Overlay-Fenster - Scrollen bleibt per Wheel/Touch möglich */
  scrollbar-width: none;      /* Firefox */
  -ms-overflow-style: none;   /* Edge/IE Legacy */
}

.habus-form-body::-webkit-scrollbar, .habus-form-centerbody::-webkit-scrollbar, .habus-overlay-body::-webkit-scrollbar, .habus-overlay-centerbody::-webkit-scrollbar {
  display: none;              /* Chrome/Safari/Edge */
}

.habus-form-centerbody, .habus-overlay-centerbody {
  text-align: center;
}

/* =================================================================================================
   Close Button
================================================================================================= */

.habus-form-close, .habus-overlay-close {
  border: none;
  color: var(--habus-weiss);
  background: var(--habus-overlay-header);

  width: 34px;
  height: 34px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: var(--habus-button-radius);
  font-size: var(--habus-fs-22);
  line-height: 1;

  padding: 0;
  margin: 0;

  cursor: pointer;
}

.habus-form-close:hover, .habus-overlay-close:hover { color: var(--habus-rot-500); }

.habus-form-close:focus-visible, .habus-overlay-close:focus-visible {
  outline: none;
  box-shadow: none;
}

/* Nicht schließbares Overlay (Startup-Schritte nach dem Login, opts.locked in inc/overlay_mgnt.js): kein X-Knopf */
.habus-overlay-window--locked .habus-overlay-close { display: none; }

/* Scrollbarer Textblock im Overlay (EULA-Text, persönliche Nachricht) */
.habus-overlay-textbox {
  max-height: 45vh;
  overflow-y: auto;
  padding: 10px 12px;
  border: 1px solid var(--habus-grau-20);
  border-radius: var(--habus-button-radius);
  white-space: pre-line;
}

/* Handy: Text kleiner halten, damit Haken und Buttons darunter auf den Bildschirm passen */
@media (max-width: 768px) {
  .habus-overlay-textbox { max-height: 30dvh; }
}

/* =================================================================================================
   Inputs / Selects
================================================================================================= */

.habus-form-body input, .habus-form-body select, .habus-form-body textarea, .habus-form-centerbody input, .habus-form-centerbody select, .habus-form-centerbody textarea, .habus-overlay-body input, .habus-overlay-body select, .habus-overlay-body textarea, .habus-overlay-centerbody input, .habus-overlay-centerbody select, .habus-overlay-centerbody textarea {
  border: 1px solid var(--habus-schatten-25);
  background: var(--habus-weiss);
  padding: 10px 12px;
  box-sizing: border-box;
}

.habus-form-body input:focus, .habus-form-body select:focus, .habus-form-body textarea:focus, .habus-form-centerbody input:focus, .habus-form-centerbody select:focus, .habus-form-centerbody textarea:focus, .habus-overlay-body input:focus, .habus-overlay-body select:focus, .habus-overlay-body textarea:focus, .habus-overlay-centerbody input:focus, .habus-overlay-centerbody select:focus, .habus-overlay-centerbody textarea:focus {
  outline: none;
  border-color: var(--habus-primaer-a85);
}

/* =================================================================================================
   Pre Blocks
================================================================================================= */

.habus-form-body pre, .habus-overlay-body pre {
  background: var(--habus-text-hell-95);
  padding: 8px;
  border-radius: var(--habus-overlay-radius);
  overflow: auto;
}

/* =================================================================================================
   Button Rows
================================================================================================= */

.habus-form-button-row, .habus-overlay-button-row {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-top: 15px;
  flex-wrap: wrap;
}

/* Footer */

.habus-form-footer, .habus-overlay-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
  padding-top: 15px;
  border-top: 1px solid var(--habus-schatten-10);
}

/* ================================================================================================= 
   Form Layout / Cards 
   ================================================================================================= */
   .habus-form-page-title {
  margin: 0 0 14px 0;
}

.habus-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.habus-form-layout {
  display: grid;
  grid-template-columns: repeat(3, minmax(260px, 1fr));
  gap: 16px;
  align-items: start;
}

.habus-form-card {
  background: var(--habus-weiss);
  border: 1px solid var(--habus-gedaempft-hell-80);
  border-radius: var(--habus-radius-14);
  padding: 16px;
  box-shadow: 0 2px 8px var(--habus-schatten-4);
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: 100%;
}

.habus-form-card-title {
  margin: 0 0 4px 0;
  font-size: var(--habus-fs-16);
  font-weight: 700;
  color: var(--habus-primaer-dunkel-35);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--habus-primaer-hell-90);
}

.habus-form-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* Beschriftung links, Feld rechts - alle Felder einer Gruppe exakt untereinander (z. B. Kachel "Konto" in personaldaten.php) */
.habus-form-label-grid {
    display: grid;
    grid-template-columns: max-content 1fr;
    align-items: center;
    gap: 10px 12px;
}

.habus-form-label-grid > label { margin: 0; white-space: nowrap; }

.habus-form-label-grid > .habus-input,
.habus-form-label-grid > .habus-btn { width: 100%; min-width: 0; box-sizing: border-box; }

/* Zwei Beschriftung/Feld-Paare je Reihe (z. B. Startzeit + Endzeit in der Kachel "Arbeitszeit"), schmal wieder ein Paar je Reihe */
.habus-form-label-grid--2paare { grid-template-columns: max-content 1fr max-content 1fr; }

@media (max-width: 480px) {
    .habus-form-label-grid--2paare { grid-template-columns: max-content 1fr; }
}

.habus-form-group {
    display: flex;
    flex-direction: column;
	gap: 4px;
}

.habus-input {
    width: 100%;
    box-sizing: border-box;
}

/* Eingabefelder in Formular-Kacheln sichtbar umranden (habus_style.css setzt input[type=text]/select sonst auf
   border:none + transparent, dadurch waren z. B. Benutzername/E-Mail nicht als Eingabefeld erkennbar) */
.habus-form .habus-input, .habus-form input[type="text"], .habus-form input[type="email"], .habus-form input[type="number"], .habus-form input[type="date"], .habus-form input[type="time"], .habus-form select, .habus-form textarea {
    border: 1px solid var(--habus-gedaempft-hell-65);
    border-radius: var(--habus-radius);
    background: var(--habus-weiss);
    padding: 6px 8px;
    text-align: left;
    font-size: var(--habus-font-size-base);
    box-sizing: border-box;
}

.habus-form .habus-input:focus, .habus-form input:focus, .habus-form select:focus, .habus-form textarea:focus {
    outline: none;
    border-color: var(--habus-primaer-a85);
}

.habus-form .habus-input:disabled, .habus-form .habus-input[readonly] {
    background: var(--habus-text-hell-95);
}

/* Arbeitstage mit (optional) abweichenden Zeiten je Wochentag (pages/bearbeiten/personaldaten.php) - je Tag ein Zeitraum
   und optional ein zweiter nach der Mittagspause (Spalten: Tag | Zeitraum | 2. Zeitraum) */
.habus-form-daytimes {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--habus-primaer-hell-95);
  border: 1px solid var(--habus-primaer-hell-85);
  border-radius: var(--habus-radius-large);
  padding: 10px;
}

/* je Tag: Kommt – Geht nebeneinander, 2. Zeitraum (nach der Mittagspause) darunter */
.habus-form-daytime-row {
  display: grid;
  grid-template-columns: 64px 1fr;
  align-items: center;
  gap: 6px 12px;
}

.habus-form-daytime-block--2 {
  grid-column: 2;
}

/* Spaltenüberschriften Kommt / Geht exakt über den Eingabefeldern (gleicher Aufbau wie .habus-form-daytime-block) */
.habus-form-daytime-label {
  flex: 1 1 0;
  min-width: 0;
}

.habus-form-daytime-head .habus-form-daytime-sep {
  visibility: hidden;
}

.habus-form-daytime-hint2 {
  grid-column: 2;
  margin-top: -2px;
}

.habus-form-daytime-head {
  font-size: var(--habus-fs-12);
  color: var(--habus-gedaempft-dunkel-15);
}

.habus-form-daytime-block {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.habus-form-daytime-block .habus-input.habus-form-daytime {
  flex: 1 1 0;
  min-width: 0;
}

/* ohne "Unterschiedliche Zeiten je Wochentag" nur die Tages-Haken - kompakt, alle sieben Tage in einer Reihe
   (sehr schmal wieder vier je Reihe) */
.habus-form-daytimes--aus {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.habus-form-daytimes--aus .habus-form-day {
  gap: 4px;
  padding: 4px;
  justify-content: center;
  min-width: 0;
}

@media (max-width: 480px) {
  .habus-form-daytimes--aus { grid-template-columns: repeat(4, 1fr); }
}

.habus-form-daytimes--aus .habus-form-daytime-row {
  display: flex;
}

.habus-form-daytimes--aus .habus-form-daytime-block, .habus-form-daytimes--aus .habus-form-daytime-head {
  display: none;
}

.habus-form-daytimes--aus .habus-form-daytime-row .habus-form-day {
  flex: 1 1 auto;
}

.habus-form-days-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  background: var(--habus-primaer-hell-95);
  border: 1px solid var(--habus-primaer-hell-85);
  border-radius: var(--habus-radius-large);
  padding: 10px;
}

.habus-form-day {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: var(--habus-radius-8);
  background: var(--habus-weiss);
  border: 1px solid var(--habus-primaer-hell-85);
}

.habus-form-check-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--habus-primaer-hell-95);
  border: 1px solid var(--habus-primaer-hell-85);
  border-radius: var(--habus-radius-large);
  padding: 10px;
}

.habus-form-check {
  display: flex;
  align-items: center;
  gap: 10px;
}

.habus-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 4px;
}

.habus-form-hint {
  font-size: var(--habus-fs-6);
  margin-top: 4px;
  color: var(--habus-gedaempft-dunkel-15);
}

.habus-form-msg {
  margin-top: 4px;
  padding: 10px 12px;
  border-radius: var(--habus-radius-large);
  border: 1px solid var(--habus-gedaempft-hell-75);
  background: var(--habus-weiss);
}

.habus-form-msg--success {
  border-color: var(--habus-color-primary);
  color: var(--habus-primaer-dunkel-35);
  background: var(--habus-primaer-hell-95);
}

.habus-form-msg--error {
  border-color: var(--habus-rot-650);
  color: var(--habus-rot-700);
  background: var(--habus-fehler-hell-95);
}

@media (max-width: 1100px) {
  .habus-form-layout {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 720px) {
  .habus-form-layout, .habus-form-grid-2 {
    grid-template-columns: 1fr;
  }

  .habus-form-days-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .habus-form-actions {
    flex-direction: column;
  }
}

/* ==================================================================================================================== */
/* A: habus_msgbox                                                                                                      */
/* ==================================================================================================================== */

.habus-msgbox-backdrop {
    position: fixed;
    inset: 0;
    background: var(--habus-schatten-45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    padding: 20px;
}

.habus-msgbox {
    width: 100%;
    max-width: 420px;
    background: var(--habus-weiss);
    border-radius: var(--habus-radius-14);
    box-shadow: 0 12px 40px var(--habus-schatten-28);
    overflow: hidden;
    border-top: 6px solid var(--habus-color-primary-light);
    animation: habusMsgBoxFadeIn 0.18s ease-out;
}

.habus-msgbox--info {
    border-top-color: var(--habus-color-primary-light);
}

.habus-msgbox--warn {
    border-top-color: var(--habus-gelb-570);
}

.habus-msgbox--error {
    border-top-color: var(--habus-fehler-hell-5);
}

.habus-msgbox__title {
    font-size: var(--habus-fs-20);
    font-weight: 700;
    padding: 18px 20px 8px 20px;
    color: var(--habus-gedaempft-dunkel-70);
}

.habus-msgbox__text {
    font-size: var(--habus-fs-16);
    line-height: 1.45;
    color: var(--habus-grau-80);
    padding: 0 20px 20px 20px;
    white-space: pre-wrap;
}

.habus-msgbox__actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    padding: 0 20px 20px 20px;
}

.habus-msgbox__okbtn, .habus-msgbox__cancelbtn {
    min-width: 120px;
}

/* Zugangsdaten nach "Neuer Mitarbeiter" (personaldaten.php): markier-/kopierbar, Buttons duerfen umbrechen */
.habus-msgbox__text--kopierbar {
    user-select: text;
    font-family: var(--habus-font-mono, monospace);
    font-size: var(--habus-fs-14);
    word-break: break-all;
}

.habus-msgbox__actions {
    flex-wrap: wrap;
}

@keyframes habusMsgBoxFadeIn {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ==================================================================================================================== */
/* A: habus_hilfsklassen                                                                                                */
/* ==================================================================================================================== */

/* Hilfsklassen - ersetzen die frueheren style="..."-Attribute in PHP/JS (eine Klasse je Angabe, kombinierbar).
   Mit !important, damit sie wie vorher die Inline-Angabe Vorrang vor allgemeineren Regeln behalten.
   Ausnahme display (habus-u-flex/-inline/-inline-block): ohne !important, damit Umschaltungen per Klasse greifen.
   Textfarben kommen aus habus_parameter.css (--habus-color-text-*). */

/* Sichtbarkeit / Zustaende (per JS umgeschaltet: classList.add/remove/toggle) */
.habus-hidden        { display: none !important; }
.habus-no-scroll     { overflow: hidden !important; }   /* body, solange ein Overlay offen ist (inc/overlay_mgnt.js) */
.habus-no-select     { user-select: none !important; }  /* body, waehrend die Navigation in der Breite gezogen wird */

/* Display / Flex */
.habus-u-flex            { display: flex; }
.habus-u-inline          { display: inline; }
.habus-u-inline-block    { display: inline-block; }
.habus-u-row             { flex-direction: row !important; }
.habus-u-wrap            { flex-wrap: wrap !important; }
.habus-u-items-center    { align-items: center !important; }
.habus-u-justify-between { justify-content: space-between !important; }
.habus-u-justify-start   { justify-content: flex-start !important; }
.habus-u-flex-fix        { flex: 0 0 auto !important; }
.habus-u-flex-grow       { flex: 1 1 auto !important; }
.habus-u-gap-5           { gap: 5px !important; }
.habus-u-gap-8           { gap: 8px !important; }
.habus-u-gap-12          { gap: 12px !important; }
.habus-u-gap-20          { gap: 20px !important; }

/* Abstaende */
.habus-u-m-0             { margin: 0 !important; }
.habus-u-mt-4            { margin-top: 4px !important; }
.habus-u-mt-6            { margin-top: 6px !important; }
.habus-u-mt-8            { margin-top: 8px !important; }
.habus-u-mt-10           { margin-top: 10px !important; }
.habus-u-mt-12           { margin-top: 12px !important; }
.habus-u-mt-16           { margin-top: 16px !important; }
.habus-u-mt-20           { margin-top: 20px !important; }
.habus-u-mt-30           { margin-top: 30px !important; }
.habus-u-mb-0            { margin-bottom: 0 !important; }
.habus-u-mb-8            { margin-bottom: 8px !important; }
.habus-u-mb-10           { margin-bottom: 10px !important; }
.habus-u-mb-12           { margin-bottom: 12px !important; }

/* Breite */
.habus-u-w-auto          { width: auto !important; }
.habus-u-w-100           { width: 100% !important; }

/* Text */
.habus-text-right        { text-align: right !important; }   /* habus-text-left/-center siehe A: habus_style */
.habus-u-nowrap          { white-space: nowrap !important; }
.habus-u-fs-11           { font-size: var(--habus-fs-11) !important; }
.habus-u-fs-12           { font-size: var(--habus-fs-12) !important; }
.habus-u-fs-13           { font-size: var(--habus-fs-13) !important; }
.habus-u-fs-085rem       { font-size: 0.85rem !important; }
.habus-u-fw-600          { font-weight: 600 !important; }
.habus-u-fw-normal       { font-weight: normal !important; }
.habus-u-underline       { text-decoration: underline !important; }
.habus-u-no-underline    { text-decoration: none !important; }

/* Sonstiges */
.habus-u-pointer         { cursor: pointer !important; }
.habus-u-opacity-75      { opacity: .75 !important; }

/* Textfarben */
.habus-u-text-fehler          { color: var(--habus-color-text-fehler) !important; }
.habus-u-text-fehler-dunkel   { color: var(--habus-color-text-fehler-dunkel) !important; }
.habus-u-text-fehler-weinrot  { color: var(--habus-color-text-fehler-weinrot) !important; }
.habus-u-text-fehler-signal   { color: var(--habus-color-text-fehler-signal) !important; }
.habus-u-text-fehler-hell     { color: var(--habus-color-text-fehler-hell) !important; }
.habus-u-text-warnung         { color: var(--habus-color-text-warnung) !important; }
.habus-u-text-ok              { color: var(--habus-color-text-ok) !important; }
.habus-u-text-primaer         { color: var(--habus-primary) !important; }
.habus-u-text-gedaempft       { color: var(--habus-color-text-gedaempft) !important; }
.habus-u-text-gedaempft-dunkel{ color: var(--habus-color-text-gedaempft-dunkel) !important; }
.habus-u-text-gedaempft-tief  { color: var(--habus-color-text-gedaempft-tief) !important; }
.habus-u-text-muted           { color: var(--habus-color-text-muted, #555) !important; }
.habus-u-text-grau            { color: var(--habus-color-text-grau) !important; }
.habus-u-text-grau-hell       { color: var(--habus-color-text-grau-hell) !important; }
.habus-u-text-kopf-meta       { color: var(--habus-color-text-kopf-meta) !important; }
.habus-u-text-violett         { color: var(--habus-color-text-violett) !important; }


/* ==================================================================================================================== */
/* TEIL B - DATEI-SPEZIFISCH (alphabetisch nach Dateipfad)                                                              */
/* ==================================================================================================================== */

/* ==================================================================================================================== */
/* B: admin/export/export_database.php                                                                                  */
/* ==================================================================================================================== */

.habus-export-page { max-width: 700px; margin: 2rem auto; font-family: var(--habus-font-sans); }
.habus-export-page table { width: 100%; border-collapse: collapse; margin-top: 1rem; }
.habus-export-page th, .habus-export-page td { padding: 0.4rem 0.6rem; border-bottom: 1px solid var(--habus-gedaempft-hell-75); text-align: left; }
.habus-export-page th { background: var(--habus-text-hell-95); }
.habus-export-page .habus-export-error { color: var(--habus-rot-650); }
.habus-export-page .habus-export-actions { margin-top: 1rem; }
.habus-export-page button { padding: 0.5rem 1.2rem; cursor: pointer; }
.habus-export-tabs { display: flex; gap: 0.5rem; margin-bottom: 1rem; }
.habus-export-tabs a { padding: 0.4rem 1rem; border-radius: var(--habus-radius-5); text-decoration: none; font-size: 0.9rem; font-weight: 600; border: 1px solid var(--habus-grau-20); color: var(--habus-color-text); }
.habus-export-tabs a.active { background: var(--habus-color-primary); border-color: var(--habus-color-primary); color: var(--habus-weiss); }

/* ==================================================================================================================== */
/* B: admin/install/check_database.php                                                                                  */
/* ==================================================================================================================== */

.inst-page--checkdb.inst-page{max-width:1100px;margin:0 auto}
.inst-page--checkdb .inst-header{display:flex;align-items:center;justify-content:space-between;background:var(--habus-nav);color:var(--habus-weiss);padding:16px 24px;border-radius:var(--habus-radius-8) var(--habus-radius-8) 0 0}
.inst-page--checkdb .inst-header h1{font-size:var(--habus-fs-18);font-weight:600}
.inst-page--checkdb .inst-header .inst-meta{font-size:var(--habus-fs-12);color:var(--habus-petrol-hell-75);margin-top:4px}
.inst-page--checkdb .inst-summary-bar{display:flex;gap:12px;background:var(--habus-weiss);padding:14px 24px;border-bottom:2px solid var(--habus-nav);flex-wrap:wrap;align-items:center}
.inst-page--checkdb .inst-stat{display:flex;align-items:center;gap:6px;font-size:var(--habus-fs-13)}
.inst-page--checkdb .inst-stat-num{font-size:var(--habus-fs-20);font-weight:700;line-height:1}
.inst-page--checkdb .inst-stat-num.red{color:var(--habus-color-danger)}.inst-page--checkdb .inst-stat-num.orange{color:var(--habus-color-warning)}.inst-page--checkdb .inst-stat-num.green{color:var(--habus-primary)}
.inst-page--checkdb .inst-spacer{flex:1}
.inst-page--checkdb .inst-body{background:var(--habus-weiss);border-radius:0 0 var(--habus-radius-8) var(--habus-radius-8);padding:24px}
.inst-page--checkdb .inst-messages{margin-bottom:20px;display:flex;flex-direction:column;gap:8px}
.inst-page--checkdb .inst-msg{padding:10px 14px;border-radius:var(--habus-radius);font-size:var(--habus-fs-13);display:flex;align-items:center;gap:8px}
.inst-page--checkdb .inst-msg.ok {background:var(--habus-bg-ok);border:1px solid var(--habus-gruen-250);color:var(--habus-gruen-700)}
.inst-page--checkdb .inst-msg.error{background:var(--habus-bg-error);border:1px solid var(--habus-fehler-hell-55);color:var(--habus-rot-680)}
.inst-page--checkdb .inst-msg.info {background:var(--habus-petrol-hell-85);border:1px solid var(--habus-petrol-330);color:var(--habus-petrol-dunkel-40)}
.inst-page--checkdb .inst-alert{padding:16px 20px;border-radius:var(--habus-radius);margin-bottom:20px;font-size:var(--habus-fs-13)}
.inst-page--checkdb .inst-alert.error{background:var(--habus-bg-error);border:1px solid var(--habus-fehler-hell-55);color:var(--habus-rot-680)}
.inst-page--checkdb .inst-alert.warn {background:var(--habus-bg-warn);border:1px solid var(--habus-gelb-280);color:var(--habus-orange-760)}
.inst-page--checkdb .inst-cards{display:flex;flex-direction:column;gap:16px}
.inst-page--checkdb .inst-card{border:1px solid var(--habus-border);border-radius:var(--habus-radius-8);overflow:hidden}
.inst-page--checkdb .inst-card.ok {border-left:4px solid var(--habus-primary)}
.inst-page--checkdb .inst-card.error {border-left:4px solid var(--habus-danger)}
.inst-page--checkdb .inst-card.warn {border-left:4px solid var(--habus-color-warning)}
.inst-page--checkdb .inst-card.missing{border-left:4px solid var(--habus-danger);background:var(--habus-bg-error)}
.inst-page--checkdb .inst-card-head{display:flex;align-items:center;gap:10px;padding:12px 16px;background:var(--habus-bg-card);border-bottom:1px solid var(--habus-border);cursor:pointer;user-select:none}
.inst-page--checkdb .inst-card-head:hover{filter:brightness(.97)}
.inst-page--checkdb .inst-card.ok .inst-card-head{background:var(--habus-bg-ok)}
.inst-page--checkdb .inst-card.missing .inst-card-head{background:var(--habus-fehler-hell-85)}
.inst-page--checkdb .inst-card-title{font-weight:600;font-size:var(--habus-fs-14);font-family:var(--habus-font-mono)}
.inst-page--checkdb .inst-card-spacer{flex:1}
.inst-page--checkdb .inst-card-toggle{font-size:var(--habus-fs-12);color:var(--habus-grau-60)}
.inst-page--checkdb .inst-card-body{padding:16px;display:none}
.inst-page--checkdb .inst-card.open .inst-card-body{display:block}
.inst-page--checkdb .inst-badge{display:inline-block;padding:2px 8px;border-radius:var(--habus-radius-12);font-size:var(--habus-fs-11);font-weight:600;white-space:nowrap}
.inst-page--checkdb .inst-badge-ok {background:var(--habus-bg-ok);color:var(--habus-primary)}
.inst-page--checkdb .inst-badge-error {background:var(--habus-bg-error);color:var(--habus-rot-680)}
.inst-page--checkdb .inst-badge-warn {background:var(--habus-bg-warn);color:var(--habus-orange-760)}
.inst-page--checkdb .inst-badge-info {background:var(--habus-petrol-hell-80);color:var(--habus-nav)}
.inst-page--checkdb .inst-badge-missing{background:var(--habus-bg-error);color:var(--habus-rot-680)}
.inst-page--checkdb .inst-badge-extra {background:var(--habus-violett-60);color:var(--habus-violett-660)}
.inst-page--checkdb .inst-table{width:100%;border-collapse:collapse;font-size:var(--habus-fs-13);margin-bottom:14px}
.inst-page--checkdb .inst-table th{background:var(--habus-nav);color:var(--habus-weiss);text-align:left;padding:7px 12px;font-size:var(--habus-fs-11);text-transform:uppercase;letter-spacing:.05em}
.inst-page--checkdb .inst-table td{padding:7px 12px;border-bottom:1px solid var(--habus-petrol-hell-90);vertical-align:middle}
.inst-page--checkdb .inst-table tr:last-child td{border-bottom:none}
.inst-page--checkdb .inst-table tr.inst-row-missing{background:var(--habus-bg-error)}
.inst-page--checkdb .inst-table tr.inst-row-extra {background:var(--habus-text-hell-95)}
.inst-page--checkdb .inst-table tr.inst-row-warn {background:var(--habus-bg-warn)}
.inst-page--checkdb .inst-code{font-family:var(--habus-font-mono);font-size:var(--habus-fs-12);background:var(--habus-gedaempft-hell-90);padding:2px 6px;border-radius:var(--habus-radius-3);color:var(--habus-primaer-dunkel-65)}
.inst-page--checkdb .inst-code-pre{white-space:pre-wrap;word-break:break-word;background:var(--habus-gedaempft-hell-90);padding:10px 12px;border-radius:var(--habus-radius);font-family:var(--habus-font-mono);font-size:var(--habus-fs-12);color:var(--habus-primaer-dunkel-65);margin:0 0 8px;overflow-x:auto}
.inst-page--checkdb .inst-sql-block{margin-bottom:8px}
.inst-page--checkdb .inst-btn{display:inline-flex;align-items:center;gap:4px;padding:5px 12px;border-radius:var(--habus-radius-5);border:none;cursor:pointer;font-size:var(--habus-fs-12);font-weight:600;transition:opacity .15s;white-space:nowrap;text-decoration:none}
.inst-page--checkdb .inst-btn:hover{opacity:.85}
.inst-page--checkdb .inst-btn-fix {background:var(--habus-accent);color:var(--habus-weiss)}
.inst-page--checkdb .inst-btn-create{background:var(--habus-danger);color:var(--habus-weiss)}
.inst-page--checkdb .inst-target-select{min-width:220px;padding:7px 10px;border:1px solid var(--habus-border);border-radius:var(--habus-radius);font-size:var(--habus-fs-13);background:var(--habus-weiss)}
.inst-page--checkdb .inst-btn-all {background:var(--habus-primary);color:var(--habus-weiss)}
.inst-page--checkdb .inst-btn-back {background:var(--habus-nav);color:var(--habus-weiss)}
.inst-page--checkdb .inst-btn-refresh{background:var(--habus-gedaempft-hell-90);color:var(--habus-color-text);border:1px solid var(--habus-border)}
.inst-page--checkdb .inst-btn-csv {background:var(--habus-color-success);color:var(--habus-weiss)}
.inst-page--checkdb .inst-csv-hint {display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--habus-erfolg-hell-95);border:1px solid var(--habus-erfolg-hell-55);border-radius:var(--habus-radius);font-size:var(--habus-fs-12);color:var(--habus-erfolg-dunkel-50);margin-bottom:10px}
.inst-page--checkdb .inst-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.inst-page--checkdb .inst-section-title{font-size:var(--habus-fs-11);font-weight:600;color:var(--habus-nav);margin-bottom:10px;margin-top:14px;text-transform:uppercase;letter-spacing:.06em}
.inst-page--checkdb .inst-section-title:first-child{margin-top:0}
.inst-page--checkdb .inst-extra-list{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}

/* Eigener Scroll-Bereich für die Tabellen-/Spaltenliste: bei viel Inhalt scrollt nur dieser
   Bereich (Slider rechts), das Navigationsmenü links bleibt stehen und scrollt nicht mit. */
.inst-page--checkdb .inst-diff-scroll{max-height:65vh;overflow-y:auto;overflow-x:hidden;padding-right:4px}

@media(max-width:700px){.inst-page--checkdb .inst-summary-bar{flex-direction:column;align-items:flex-start}.inst-page--checkdb .inst-table th, .inst-page--checkdb .inst-table td{padding:6px 8px}}

/* ==================================================================================================================== */
/* B: admin/install/check_for_update.php                                                                                */
/* ==================================================================================================================== */

.inst-page--update.inst-page{max-width:1200px;margin:0 auto}

/* Header */
.inst-page--update .inst-header{display:flex;align-items:center;justify-content:space-between;background:var(--habus-nav);color:var(--habus-weiss);padding:16px 24px;border-radius:var(--habus-radius-8) var(--habus-radius-8) 0 0;flex-wrap:wrap;gap:8px}
.inst-page--update .inst-header h1{font-size:var(--habus-fs-18);font-weight:600}
.inst-page--update .inst-header .inst-meta{font-size:var(--habus-fs-12);color:var(--habus-petrol-hell-75);margin-top:4px}

/* Summary bar */
.inst-page--update .inst-summary-bar{display:flex;gap:12px;background:var(--habus-weiss);padding:14px 24px;border-bottom:2px solid var(--habus-nav);flex-wrap:wrap;align-items:center}
.inst-page--update .inst-stat{display:flex;align-items:center;gap:6px;font-size:var(--habus-fs-13)}
.inst-page--update .inst-stat-num{font-size:var(--habus-fs-20);font-weight:700;line-height:1}
.inst-page--update .inst-stat-num.col-new{color:var(--habus-accent)}.inst-page--update .inst-stat-num.col-changed{color:var(--habus-color-warning)}
.inst-page--update .inst-stat-num.col-ok{color:var(--habus-primary)}.inst-page--update .inst-stat-num.col-extra{color:var(--habus-violett-490)}
.inst-page--update .inst-spacer{flex:1}

/* Body */
.inst-page--update .inst-body{background:var(--habus-weiss);border-radius:0 0 var(--habus-radius-8) var(--habus-radius-8);padding:24px}

/* Alert */
.inst-page--update .inst-alert{padding:14px 18px;border-radius:var(--habus-radius);margin-bottom:18px;font-size:var(--habus-fs-13)}
.inst-page--update .inst-alert.error{background:var(--habus-bg-error);border:1px solid var(--habus-fehler-hell-55);color:var(--habus-rot-680)}
.inst-page--update .inst-alert.info {background:var(--habus-petrol-hell-85);border:1px solid var(--habus-petrol-330);color:var(--habus-petrol-dunkel-40)}
.inst-page--update .inst-alert.ok   {background:var(--habus-bg-ok);border:1px solid var(--habus-gruen-250);color:var(--habus-gruen-700)}

/* Source form */
.inst-page--update .inst-cards-row{display:flex;gap:20px;align-items:stretch;flex-wrap:wrap;margin-bottom:20px}
.inst-page--update .inst-cards-row > .inst-source-card{flex:1;min-width:320px;margin-bottom:0;display:flex;flex-direction:column}
.inst-page--update .inst-source-card{background:var(--habus-bg-card);border:1px solid var(--habus-border);border-radius:var(--habus-radius-8);padding:20px;margin-bottom:20px}
.inst-page--update .inst-source-card h3{font-size:var(--habus-fs-14);font-weight:600;color:var(--habus-nav);margin-bottom:14px}
.inst-page--update .inst-path-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.inst-page--update .inst-btn-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:10px}
.inst-page--update .inst-path-input{flex:1;min-width:200px;padding:8px 12px;border:1px solid var(--habus-border);border-radius:var(--habus-radius);font-size:var(--habus-fs-13);font-family:var(--habus-font-mono);background:var(--habus-weiss)}
.inst-page--update .inst-path-input:focus{outline:none;border-color:var(--habus-nav)}
.inst-page--update .inst-hint{font-size:var(--habus-fs-11);color:var(--habus-color-muted);margin-top:6px}

/* Badges */
.inst-page--update .inst-badge{display:inline-block;padding:2px 8px;border-radius:var(--habus-radius-12);font-size:var(--habus-fs-11);font-weight:600;white-space:nowrap}
.inst-page--update .inst-badge-ok {background:var(--habus-bg-ok);color:var(--habus-primary)}
.inst-page--update .inst-badge-new {background:var(--habus-akzent-hell-80);color:var(--habus-akzent-dunkel-45)}
.inst-page--update .inst-badge-changed {background:var(--habus-bg-warn);color:var(--habus-orange-760)}
.inst-page--update .inst-badge-extra {background:var(--habus-violett-60);color:var(--habus-violett-660)}
.inst-page--update .inst-badge-error {background:var(--habus-bg-error);color:var(--habus-rot-680)}

/* Filter tabs */
.inst-page--update .inst-filter-bar{display:flex;gap:4px;margin-bottom:16px;flex-wrap:wrap;border-bottom:2px solid var(--habus-border);padding-bottom:8px}
.inst-page--update .inst-filter-tab{padding:6px 14px;border-radius:var(--habus-radius) var(--habus-radius) 0 0;border:none;cursor:pointer;font-size:var(--habus-fs-12);font-weight:600;background:var(--habus-gedaempft-hell-90);color:var(--habus-gedaempft-dunkel-20);transition:background .15s}
.inst-page--update .inst-filter-tab:hover{background:var(--habus-gedaempft-hell-80)}
.inst-page--update .inst-filter-tab.active{background:var(--habus-nav);color:var(--habus-weiss)}
.inst-page--update .inst-filter-count{display:inline-block;background:var(--habus-weiss-25);border-radius:var(--habus-radius-large);padding:0 5px;margin-left:4px;font-size:var(--habus-fs-10)}
.inst-page--update .inst-filter-tab:not(.active) .inst-filter-count{background:var(--habus-schatten-10)}

/* Eigener Scroll-Bereich für Massenaktionen/Filter/Tabelle: bei viel Inhalt scrollt nur dieser Bereich
   (Slider rechts), das Navigationsmenü links bleibt stehen und scrollt nicht mit. */
.inst-page--update .inst-diff-scroll{max-height:65vh;overflow-y:auto;overflow-x:hidden;padding-right:4px}

/* File table */
.inst-page--update .inst-table-wrap{max-height:60vh;overflow-y:auto;overflow-x:auto;border:1px solid var(--habus-border);border-radius:var(--habus-radius)}
.inst-page--update .inst-table{width:100%;border-collapse:collapse;font-size:var(--habus-fs-12)}
.inst-page--update .inst-table th{background:var(--habus-nav);color:var(--habus-weiss);text-align:left;padding:8px 10px;font-size:var(--habus-fs-11);text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;position:sticky;top:0;z-index:1}
.inst-page--update .inst-table th:last-child{text-align:center}
.inst-page--update .inst-table td{padding:6px 10px;border-bottom:1px solid var(--habus-gedaempft-hell-85);vertical-align:middle}
.inst-page--update .inst-table tr:last-child td{border-bottom:none}
.inst-page--update .inst-table tr.row-new {background:var(--habus-akzent-hell-95)}
.inst-page--update .inst-table tr.row-changed {background:var(--habus-bg-warn)}
.inst-page--update .inst-table tr.row-identical{background:var(--habus-gedaempft-hell-95)}
.inst-page--update .inst-table tr.row-habus_only{background:var(--habus-akzent-hell-95)}
.inst-page--update .inst-table tr:hover td{filter:brightness(.97)}
.inst-page--update .inst-code{font-family:var(--habus-font-mono);font-size:var(--habus-fs-11);color:var(--habus-primaer-dunkel-65);word-break:break-all}
.inst-page--update .inst-size{color:var(--habus-color-muted);white-space:nowrap}
.inst-page--update .inst-warn-icon{color:var(--habus-color-danger);cursor:help;margin-left:4px;font-size:var(--habus-fs-12)}
.inst-page--update .inst-date{color:var(--habus-color-muted);font-size:var(--habus-fs-11);white-space:nowrap}

/* Buttons */
.inst-page--update .inst-btn{display:inline-flex;align-items:center;gap:4px;padding:5px 12px;border-radius:var(--habus-radius-5);border:none;cursor:pointer;font-size:var(--habus-fs-12);font-weight:600;transition:opacity .15s;white-space:nowrap}
.inst-page--update .inst-btn:hover{opacity:.85}
.inst-page--update .inst-btn-fix {background:var(--habus-accent);color:var(--habus-weiss)}
.inst-page--update .inst-btn-create {background:var(--habus-danger);color:var(--habus-weiss)}
.inst-page--update .inst-btn-all {background:var(--habus-primary);color:var(--habus-weiss)}
.inst-page--update .inst-btn-back {background:var(--habus-nav);color:var(--habus-weiss)}
.inst-page--update .inst-btn-refresh{background:var(--habus-gedaempft-hell-90);color:var(--habus-color-text);border:1px solid var(--habus-border)}
.inst-page--update .inst-btn-analyze{background:var(--habus-primary);color:var(--habus-weiss);padding:8px 20px;font-size:var(--habus-fs-13)}

.inst-page--update .inst-bulk-bar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px;padding:10px 14px;background:var(--habus-bg-card);border-radius:var(--habus-radius);align-items:center}
.inst-page--update .inst-bulk-bar span{font-size:var(--habus-fs-12);font-weight:600;color:var(--habus-gedaempft-dunkel-20);margin-right:4px}

.inst-page--update .inst-section-title{font-size:var(--habus-fs-11);font-weight:600;color:var(--habus-nav);margin-bottom:10px;text-transform:uppercase;letter-spacing:.06em}
.inst-page--update .inst-empty{text-align:center;padding:32px;color:var(--habus-color-muted);font-size:var(--habus-fs-13)}

@media(max-width:700px){.inst-page--update .inst-path-row{flex-direction:column}.inst-page--update .inst-summary-bar{flex-direction:column;align-items:flex-start}.inst-page--update .inst-bulk-bar{flex-direction:column;align-items:flex-start}}

.upd-ov-table td{font-size:var(--habus-fs-13);padding:8px 10px}
.upd-ov-row{cursor:pointer}
.upd-ov-row.need td{background:var(--habus-bg-warn)}
.upd-ov-check{width:32px;text-align:center}
.upd-ov-check input{width:16px;height:16px;cursor:pointer}
.upd-ov-bar{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-top:14px;padding:12px 14px;background:var(--habus-bg-card);border:1px solid var(--habus-border);border-radius:var(--habus-radius);font-size:var(--habus-fs-13)}
.upd-ov-bar label{display:flex;align-items:center;gap:6px;cursor:pointer}
.upd-ov-ergebnis{margin-top:4px}

/* Quellen-/Ziel-Karten: farbiger Rand links bei Update-Hinweis bzw. Warnung (fremde Installation, DB-Update noetig) */
.inst-page--update .inst-source-card--hinweis { border-left: 4px solid var(--habus-accent); }
.inst-page--update .inst-source-card--warnung { border-left: 4px solid var(--habus-danger); }
.inst-page--update .inst-source-text          { font-size: var(--habus-fs-12); color: var(--habus-color-text-gedaempft-tief); margin-bottom: 0; }

/* ==================================================================================================================== */
/* B: admin/install/navigation_packages.php                                                                             */
/* ==================================================================================================================== */

.npm-page{max-width:1100px;margin:0 auto}
.npm-header{background:var(--habus-nav,#408080);color:var(--habus-weiss);padding:16px 24px;border-radius:var(--habus-radius-8) var(--habus-radius-8) 0 0}
.npm-header h1{font-size:var(--habus-fs-18);font-weight:600}
.npm-body{background:var(--habus-weiss);border:1px solid var(--habus-gedaempft-hell-60);border-top:none;border-radius:0 0 var(--habus-radius-8) var(--habus-radius-8);padding:24px}
.npm-alert{padding:14px 18px;border-radius:var(--habus-radius);margin-bottom:18px;font-size:var(--habus-fs-13)}
.npm-alert.ok{background:var(--habus-erfolg-hell-90);border:1px solid var(--habus-gruen-250);color:var(--habus-gruen-700)}
.npm-alert.error{background:var(--habus-fehler-hell-90);border:1px solid var(--habus-fehler-hell-55);color:var(--habus-rot-680)}
.npm-alert code{display:block;margin-top:8px;padding:8px;background:var(--habus-weiss);border:1px solid var(--habus-fehler-hell-55);border-radius:var(--habus-radius-4);font-size:var(--habus-fs-12);white-space:pre-wrap;word-break:break-all}
.npm-hint{font-size:var(--habus-fs-11);color:var(--habus-color-muted);margin-bottom:16px}
.npm-table-wrap{overflow:auto;max-height:70vh}
.npm-table{border-collapse:collapse;font-size:var(--habus-fs-12);min-width:100%}
.npm-table th,.npm-table td{padding:6px 8px;border-bottom:1px solid var(--habus-gedaempft-hell-80);text-align:center;white-space:nowrap}
.npm-table thead th{color:var(--habus-gedaempft-dunkel-50);font-weight:600;vertical-align:bottom;position:sticky;top:0;background:var(--habus-weiss);z-index:10;box-shadow:0 2px 0 var(--habus-schatten-8)}
.npm-table th.npm-col-name{text-align:left}
.npm-table td.npm-col-name{text-align:left}
.npm-table tr:hover td{background:var(--habus-gedaempft-hell-95)}
.npm-table tr.npm-startpage-row td{background:var(--habus-gedaempft-hell-95);font-size:var(--habus-fs-11);white-space:normal;border-bottom:2px solid var(--habus-gedaempft-hell-60)}
.npm-name-cell{display:flex;align-items:center;gap:6px}
.npm-name{font-weight:600;color:var(--habus-primaer-dunkel-65)}
.npm-meta{font-size:var(--habus-fs-10);color:var(--habus-gedaempft-hell-25);font-family:var(--habus-font-mono)}
.npm-pkg-th{font-size:var(--habus-fs-11);font-weight:600;color:var(--habus-gedaempft-dunkel-50);max-width:90px;white-space:normal}
.npm-pkg-name-input{width:90px;padding:3px 5px;border:1px solid var(--habus-gedaempft-hell-60);border-radius:var(--habus-radius-4);font-size:var(--habus-fs-11);font-weight:600;text-align:center}
.npm-level-input{width:44px;padding:3px 4px;border:1px solid var(--habus-gedaempft-hell-60);border-radius:var(--habus-radius-4);font-size:var(--habus-fs-12);text-align:center}
.npm-btn{display:inline-flex;align-items:center;gap:6px;padding:9px 18px;border-radius:var(--habus-radius);border:none;cursor:pointer;font-size:var(--habus-fs-13);font-weight:600;background:var(--habus-primary,#5B7940);color:var(--habus-weiss);margin-top:16px}
.npm-btn:hover{opacity:.9}

/* ==================================================================================================================== */
/* B: admin/install/new_installation.php                                                                                */
/* ==================================================================================================================== */

.inst-page--neuinstall.inst-page{max-width:900px;margin:0 auto}
.inst-page--neuinstall .inst-header{display:flex;align-items:center;justify-content:space-between;background:var(--habus-nav);color:var(--habus-weiss);padding:16px 24px;border-radius:var(--habus-radius-8) var(--habus-radius-8) 0 0}
.inst-page--neuinstall .inst-header h1{font-size:var(--habus-fs-18);font-weight:600}
.inst-page--neuinstall .inst-body{background:var(--habus-weiss);border-radius:0 0 var(--habus-radius-8) var(--habus-radius-8);padding:24px;border:1px solid var(--habus-border);border-top:none}
.inst-page--neuinstall .inst-msg{padding:10px 14px;border-radius:var(--habus-radius);font-size:var(--habus-fs-13);display:flex;align-items:flex-start;gap:8px;margin-bottom:6px;word-break:break-word}
.inst-page--neuinstall .inst-msg.ok {background:var(--habus-bg-ok);border:1px solid var(--habus-gruen-250);color:var(--habus-gruen-700)}
.inst-page--neuinstall .inst-msg.error{background:var(--habus-bg-error);border:1px solid var(--habus-fehler-hell-55);color:var(--habus-rot-680)}
.inst-page--neuinstall .inst-msg.info {background:var(--habus-petrol-hell-85);border:1px solid var(--habus-petrol-330);color:var(--habus-petrol-dunkel-40)}
.inst-page--neuinstall .inst-alert{padding:16px 20px;border-radius:var(--habus-radius);margin-bottom:20px;font-size:var(--habus-fs-13)}
.inst-page--neuinstall .inst-alert.error{background:var(--habus-bg-error);border:1px solid var(--habus-fehler-hell-55);color:var(--habus-rot-680)}
.inst-page--neuinstall .inst-alert.warn {background:var(--habus-bg-warn);border:1px solid var(--habus-gelb-280);color:var(--habus-orange-760)}
.inst-page--neuinstall .inst-alert.ok {background:var(--habus-bg-ok);border:1px solid var(--habus-gruen-250);color:var(--habus-gruen-700)}
.inst-page--neuinstall .inst-card{border:1px solid var(--habus-border);border-radius:var(--habus-radius-8);overflow:hidden;margin-top:14px}
.inst-page--neuinstall .inst-card-head{padding:8px 14px;background:var(--habus-bg-card);border-bottom:1px solid var(--habus-border);font-weight:600;font-size:var(--habus-fs-12);text-transform:uppercase;letter-spacing:.03em;color:var(--habus-nav)}
.inst-page--neuinstall .inst-card-body{padding:12px 14px}
.inst-page--neuinstall .inst-form-section{border:1px solid var(--habus-border);border-radius:var(--habus-radius-8);padding:16px 18px;margin-bottom:16px}
.inst-page--neuinstall .inst-form-section h3{font-size:var(--habus-fs-13);text-transform:uppercase;letter-spacing:.05em;color:var(--habus-nav);margin-bottom:12px}
.inst-page--neuinstall .inst-form-row{display:flex;flex-direction:column;gap:4px;margin-bottom:12px}
.inst-page--neuinstall .inst-form-row label{font-size:var(--habus-fs-12);font-weight:600;color:var(--habus-gedaempft-dunkel-50)}
.inst-page--neuinstall .inst-form-row input[type=text], .inst-page--neuinstall .inst-form-row input[type=email], .inst-page--neuinstall .inst-form-row input[type=password], .inst-page--neuinstall .inst-form-row select{
    padding:7px 10px;border:1px solid var(--habus-border);border-radius:var(--habus-radius-5);font-size:var(--habus-fs-13);max-width:420px}
.inst-page--neuinstall .inst-form-hint{font-size:var(--habus-fs-11);color:var(--habus-color-muted)}
.inst-page--neuinstall .inst-radio-row{display:flex;gap:18px;align-items:center;margin-bottom:10px;font-size:var(--habus-fs-13)}
.inst-page--neuinstall .inst-btn{display:inline-flex;align-items:center;gap:6px;padding:9px 18px;border-radius:var(--habus-radius);border:none;cursor:pointer;font-size:var(--habus-fs-13);font-weight:600}
.inst-page--neuinstall .inst-btn-primary{background:var(--habus-primary);color:var(--habus-weiss)}
.inst-page--neuinstall .inst-btn-primary:hover{opacity:.9}
.inst-page--neuinstall .inst-btn+.inst-btn{margin-left:8px}

.inst-page--neuinstall .inst-pakete   { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.inst-page--neuinstall .inst-btn-test { background: var(--habus-accent); color: var(--habus-weiss); }
.inst-page--neuinstall .inst-btn-create { background: var(--habus-danger); color: var(--habus-weiss); }

/* ==================================================================================================================== */
/* B: admin/install/switch_config.php                                                                                   */
/* ==================================================================================================================== */

.swc-page{max-width:820px;margin:0 auto}
.swc-page--wide{max-width:1200px}
.swc-overview{width:100%;border-collapse:collapse;font-size:var(--habus-fs-13)}
.swc-overview th{text-align:left;padding:8px 10px;border-bottom:2px solid var(--habus-gedaempft-hell-60);color:var(--habus-gedaempft-dunkel-35)}
.swc-overview td{padding:8px 10px;border-bottom:1px solid var(--habus-gedaempft-hell-80);vertical-align:middle}
.swc-ov-row{cursor:pointer}
.swc-ov-row:hover{background:var(--habus-primaer-hell-95)}
.swc-ov-row.inactive td{color:var(--habus-grau-45)}
.swc-ov-actions{white-space:nowrap;text-align:right}
.swc-ov-actions form{display:inline}
.swc-badge{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:var(--habus-radius-large);background:var(--habus-primaer-hell-85);color:var(--habus-gedaempft-dunkel-35);font-size:var(--habus-fs-11)}
.swc-badge.warn{background:var(--habus-warnung-hell-85);color:var(--habus-orange-760)}
.swc-back{display:inline-block;margin-bottom:14px;font-size:var(--habus-fs-13)}
.swc-instbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px;padding:10px 14px;background:var(--habus-gedaempft-hell-90);border:1px solid var(--habus-gedaempft-hell-60);border-radius:var(--habus-radius);font-size:var(--habus-fs-13)}
.swc-instbar select{padding:4px 8px;border-radius:var(--habus-radius-4);border:1px solid var(--habus-gedaempft-hell-60)}
.swc-header{background:var(--habus-nav,#408080);color:var(--habus-weiss);padding:16px 24px;border-radius:var(--habus-radius-8) var(--habus-radius-8) 0 0}
.swc-header h1{font-size:var(--habus-fs-18);font-weight:600}
.swc-body{background:var(--habus-weiss);border:1px solid var(--habus-gedaempft-hell-60);border-top:none;border-radius:0 0 var(--habus-radius-8) var(--habus-radius-8);padding:24px}
.swc-alert{padding:14px 18px;border-radius:var(--habus-radius);margin-bottom:18px;font-size:var(--habus-fs-13)}
.swc-alert.ok{background:var(--habus-erfolg-hell-90);border:1px solid var(--habus-gruen-250);color:var(--habus-gruen-700)}
.swc-alert.error{background:var(--habus-fehler-hell-90);border:1px solid var(--habus-fehler-hell-55);color:var(--habus-rot-680)}
.swc-alert.warn{background:var(--habus-warnung-hell-90);border:1px solid var(--habus-gelb-280);color:var(--habus-orange-760)}
.swc-alert code{display:block;margin-top:8px;padding:8px;background:var(--habus-weiss);border:1px solid var(--habus-gelb-280);border-radius:var(--habus-radius-4);font-size:var(--habus-fs-12);white-space:pre-wrap;word-break:break-all}
.swc-card{border:1px solid var(--habus-gedaempft-hell-60);border-radius:var(--habus-radius-8);padding:16px 18px;margin-bottom:16px}
.swc-card h3{font-size:var(--habus-fs-13);text-transform:uppercase;letter-spacing:.05em;color:var(--habus-nav,#408080);margin-bottom:10px}
.swc-row{display:flex;flex-direction:column;gap:4px;margin-bottom:12px}
.swc-row label{font-size:var(--habus-fs-12);font-weight:600;color:var(--habus-gedaempft-dunkel-50)}
.swc-row input[type=text],.swc-row input[type=password],.swc-row select{padding:7px 10px;border:1px solid var(--habus-gedaempft-hell-60);border-radius:var(--habus-radius-5);font-size:var(--habus-fs-13);max-width:420px}
.swc-check{display:flex;align-items:center;gap:8px;font-size:var(--habus-fs-13);margin-bottom:12px}
.swc-hint{font-size:var(--habus-fs-11);color:var(--habus-color-muted)}
.swc-table{width:100%;border-collapse:collapse;font-size:var(--habus-fs-12);margin-top:6px}
.swc-table th,.swc-table td{padding:6px 8px;border-bottom:1px solid var(--habus-gedaempft-hell-80);text-align:left}
.swc-table th{color:var(--habus-color-muted);font-weight:600}
.swc-table tr.active td{font-weight:600;background:var(--habus-text-hell-95)}
.swc-btn{display:inline-flex;align-items:center;gap:6px;padding:9px 18px;border-radius:var(--habus-radius);border:none;cursor:pointer;font-size:var(--habus-fs-13);font-weight:600;background:var(--habus-primary,#5B7940);color:var(--habus-weiss)}
.swc-btn:hover{opacity:.9}
.swc-btn.secondary{background:var(--habus-weiss);color:var(--habus-nav,#408080);border:1px solid var(--habus-gedaempft-hell-60)}
.swc-link-btn{background:none;border:none;padding:0;margin:0;color:var(--habus-nav,#408080);text-decoration:underline;cursor:pointer;font-size:inherit;font-family:inherit}
.swc-link-btn:hover{opacity:.8}
.swc-pkg-grid{display:flex;flex-wrap:wrap;gap:8px 20px;margin-bottom:4px}
.swc-pkg-item{display:flex;align-items:center;gap:6px;font-size:var(--habus-fs-13)}
.swc-inline{display:flex;align-items:center;gap:8px;max-width:420px}
.swc-inline input{flex:1}
.swc-warn-text{color:var(--habus-rot-680)}

.swc-wechsel-form { margin: -4px 0 16px; }

/* ==================================================================================================================== */
/* B: admin/tables/table_manager.php                                                                                    */
/* ==================================================================================================================== */

.tblmgr-page { max-width: 1000px; margin: 0 auto; }
.tblmgr-page table { width: 100%; border-collapse: collapse; margin-top: 1rem; font-size: var(--habus-fs-13); }
.tblmgr-page th, .tblmgr-page td { padding: 0.4rem 0.6rem; border-bottom: 1px solid var(--habus-gedaempft-hell-85); text-align: left; vertical-align: middle; }
.tblmgr-page th { background: var(--habus-color-primary-light); color: var(--habus-weiss); font-size: var(--habus-fs-11); text-transform: uppercase; letter-spacing: .04em; }
.tblmgr-page tr:hover td { background: var(--habus-gedaempft-hell-95); }
.tblmgr-flash { padding: 10px 16px; border-radius: var(--habus-radius); margin: 1rem 0; font-size: var(--habus-fs-13); }
.tblmgr-flash.ok    { background: var(--habus-erfolg-hell-90); color: var(--habus-gruen-770-2); border: 1px solid var(--habus-gruen-250); }
.tblmgr-flash.error { background: var(--habus-fehler-hell-90); color: var(--habus-rot-680); border: 1px solid var(--habus-fehler-hell-55); }
.tblmgr-flash.info  { background: var(--habus-petrol-hell-85); color: var(--habus-petrol-dunkel-40); border: 1px solid var(--habus-petrol-330); }
.tblmgr-btn { padding: 4px 10px; border-radius: var(--habus-radius-5); border: 1px solid var(--habus-grau-20); background: var(--habus-gedaempft-hell-90); cursor: pointer; font-size: var(--habus-fs-12); margin-right: 4px; }
.tblmgr-btn:hover { opacity: .85; }
.tblmgr-btn-danger { background: var(--habus-color-danger); color: var(--habus-weiss); border-color: var(--habus-color-danger); }
.tblmgr-source-card { background: var(--habus-gedaempft-hell-90); border: 1px solid var(--habus-gedaempft-hell-60); border-radius: var(--habus-radius-8); padding: 16px 20px; margin: 1rem 0; }
.tblmgr-source-card h3 { font-size: var(--habus-fs-14); color: var(--habus-color-primary-light); margin-bottom: 10px; }
.tblmgr-path-input { padding: 6px 10px; border: 1px solid var(--habus-gedaempft-hell-60); border-radius: var(--habus-radius); font-size: var(--habus-fs-13); min-width: 260px; }

.tblmgr-fehler { color: var(--habus-color-text-fehler-weinrot); font-size: var(--habus-fs-12); margin: 1rem 0; }

/* ==================================================================================================================== */
/* B: inc/overlay_mgnt.js                                                                                               */
/* ==================================================================================================================== */

/* Platzhalter waehrend der Overlay-Inhalt nachgeladen wird */
.habus-overlay-loading { padding: 8px; }

/* ==================================================================================================================== */
/* B: mobile/index.php                                                                                                  */
/* ==================================================================================================================== */

/* Mobile-App (Stempeluhr/Kontieren/Heute). Eigene Seite ohne Frame: alle Regeln ueber :where(html.habus-mobile-app)
   auf diese Seite begrenzt (ohne zusaetzliche Spezifitaet), Basis-Elementregeln des Desktops gelten hier nicht. */
:where(html.habus-mobile-app) *, :where(html.habus-mobile-app) *::before, :where(html.habus-mobile-app) *::after { box-sizing: border-box; margin: 0; padding: 0; }

html:where(.habus-mobile-app), :where(html.habus-mobile-app) body {
    height: 100%;
    font-family: var(--habus-font-system);
    background: var(--hb-bg);
    color: var(--hb-text);
    -webkit-tap-highlight-color: transparent;
    overflow: hidden;
}

/* ── Layout ─────────────────────────────────────────────────── */
:where(html.habus-mobile-app) .mob-shell {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    max-width: 420px;
    margin: 0 auto;
    padding: env(safe-area-inset-top, 10px) 20px calc(env(safe-area-inset-bottom, 16px) + 10px);
    background: var(--hb-bg);
}

/* ── Schließen-Button (nur Desktop-Popup, siehe Media Query unten) ─────────────────── */
:where(html.habus-mobile-app) .mob-close-btn {
    display: none;
    position: absolute;
    top: -14px;
    left: -14px;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: var(--habus-weiss);
    color: var(--hb-text);
    font-size: var(--habus-fs-15);
    line-height: 1;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 3px 10px var(--habus-schatten-25);
    z-index: 10;
}
:where(html.habus-mobile-app) .mob-close-btn:active { transform: scale(.92); }

/* ── Hintergrund-Dashboard + Abdunklung (nur Desktop-Popup, siehe Media Query unten) ───────────────── */
:where(html.habus-mobile-app) .mob-bg-frame, :where(html.habus-mobile-app) .mob-bg-dim { display: none; }

/* ── Desktop/Laptop: als schwebendes Popup-Fenster über dem ganz normalen HABUS-Dashboard (Header/
   Navigator/Footer im Hintergrund-iframe, siehe .mob-bg-frame) statt als vollflächige "App"-Seite - auf
   echten Handys (schmale Viewports) bleibt die Seite unverändert vollflächig, siehe mobile-web-app-capable
   Meta-Tags oben. */
@media (min-width: 768px) {
    html:where(.habus-mobile-app), :where(html.habus-mobile-app) body { overflow: auto; }
    :where(html.habus-mobile-app) body {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 16px;
    }
    :where(html.habus-mobile-app) .mob-bg-frame {
        display: block;
        position: fixed;
        inset: 0;
        width: 100%;
        height: 100%;
        border: none;
        z-index: 1;
    }
    :where(html.habus-mobile-app) .mob-bg-dim {
        display: block;
        position: fixed;
        inset: 0;
        background: var(--habus-gedaempft-dunkel-75-a55);
        z-index: 2;
    }
    :where(html.habus-mobile-app) .mob-shell {
        position: relative;
        z-index: 3;
        width: 420px;
        height: auto;
        max-height: 96vh;
        overflow-y: auto;
        border-radius: var(--habus-radius-24);
        box-shadow: 0 24px 70px var(--habus-schatten-40);
        padding-top: 16px;
    }
    :where(html.habus-mobile-app) .mob-close-btn { display: flex; }
}

/* ── Header ─────────────────────────────────────────────────── */
:where(html.habus-mobile-app) .mob-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 10px 0 7px;
    flex-shrink: 0;
}
:where(html.habus-mobile-app) .mob-logo {
    font-size: var(--habus-fs-13);
    font-weight: 700;
    color: var(--hb-nav);
    letter-spacing: .04em;
    text-transform: uppercase;
    padding-top: 4px;
}
:where(html.habus-mobile-app) .mob-user-pill {
    font-size: var(--habus-fs-12);
    color: var(--hb-muted);
    background: var(--habus-weiss-60);
    border-radius: var(--habus-radius-20);
    padding: 4px 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}
:where(html.habus-mobile-app) .mob-header-links { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
:where(html.habus-mobile-app) .mob-logout {
    color: var(--hb-nav);
    text-decoration: none;
    font-size: var(--habus-fs-11);
    font-weight: 600;
    opacity: .7;
}
:where(html.habus-mobile-app) .mob-logout:hover { opacity: 1; }

/* ── Seiten-Wischen (Stempeluhr / Kontieren / Heute kontiert) ─────────────────────── */
:where(html.habus-mobile-app) .mob-pages {
    flex: 1;
    min-height: 0; /* wichtig: erlaubt dem Flex-Item, kleiner als sein Inhalt zu sein (siehe .mob-page overflow-y) */
    overflow: hidden;
    width: 100%;
}
:where(html.habus-mobile-app) .mob-pages-track {
    display: flex;
    width: 300%;
    height: 100%;
    transition: transform .32s cubic-bezier(.22, .61, .36, 1);
    touch-action: pan-y;
}
:where(html.habus-mobile-app) .mob-page {
    width: 33.3334%;
    flex: 0 0 33.3334%;
    min-width: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
:where(html.habus-mobile-app) .mob-page-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 6px 0 2px;
    flex-shrink: 0;
}
:where(html.habus-mobile-app) .mob-page-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--habus-gedaempft-dunkel-20-a30);
    cursor: pointer;
    transition: background .25s, transform .25s;
    -webkit-appearance: none;
}
:where(html.habus-mobile-app) .mob-page-dot.active { background: var(--hb-nav); transform: scale(1.3); }
:where(html.habus-mobile-app) .mob-page-dots[hidden] { display: none; }

/* ══════════════════════════════════════════════════════════════════════════════════ */
/* Seite 1: Stempeluhr                                                                 */
/* ══════════════════════════════════════════════════════════════════════════════════ */

:where(html.habus-mobile-app) .mob-clock-wrap {
    text-align: center;
    padding: 16px 0 26px;
    flex-shrink: 0;
}
:where(html.habus-mobile-app) .mob-clock {
    font-size: clamp(var(--habus-fs-42), 13vw, var(--habus-fs-58));
    font-weight: 200;
    letter-spacing: .06em;
    color: var(--hb-text);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
:where(html.habus-mobile-app) .mob-clock-secs {
    font-size: .5em;
    opacity: .5;
    vertical-align: super;
}
:where(html.habus-mobile-app) .mob-date {
    font-size: var(--habus-fs-14);
    color: var(--hb-muted);
    margin-top: 4px;
    font-weight: 500;
}

:where(html.habus-mobile-app) .mob-center {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 12px 0;
}

:where(html.habus-mobile-app) .mob-btn-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

:where(html.habus-mobile-app) .mob-status-btn {
    width: clamp(140px, 36vw, 176px);
    height: clamp(140px, 36vw, 176px);
    border-radius: 50%;
    border: none;
    cursor: pointer;
    transition: background .35s ease, transform .12s ease, box-shadow .35s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: var(--hb-btn-shadow);
    outline: none;
    -webkit-appearance: none;
}
:where(html.habus-mobile-app) .mob-status-btn:active { transform: scale(.94); }
:where(html.habus-mobile-app) .mob-status-btn.anwesend {
    background: var(--hb-green);
    box-shadow: 0 6px 30px var(--habus-erfolg-a45), var(--hb-btn-shadow);
}
:where(html.habus-mobile-app) .mob-status-btn.abwesend {
    background: var(--hb-gray);
}
:where(html.habus-mobile-app) .mob-status-btn.dienstgang {
    background: var(--hb-dienstgang);
    box-shadow: 0 6px 30px var(--habus-akzent-a45), var(--hb-btn-shadow);
}

/* Zweitknopf unter dem Status: "Dienstgang Anfang" (anwesend) bzw. "Geht buchen" (im Dienstgang) */
:where(html.habus-mobile-app) .mob-dg-btn {
    border: none;
    border-radius: var(--habus-radius-20);
    padding: 8px 18px;
    font-size: var(--habus-fs-14);
    font-weight: 600;
    color: var(--habus-weiss);
    background: var(--hb-dienstgang);
    box-shadow: 0 3px 10px var(--habus-schatten-18);
    cursor: pointer;
}
:where(html.habus-mobile-app) .mob-dg-btn:active { transform: scale(.96); }
:where(html.habus-mobile-app) .mob-dg-btn:disabled { opacity: .6; cursor: wait; }
:where(html.habus-mobile-app) .mob-dg-btn[hidden] { display: none; }
:where(html.habus-mobile-app) .mob-status-btn.loading {
    background: var(--habus-gedaempft-hell-50);
    cursor: wait;
}

:where(html.habus-mobile-app) .mob-btn-icon {
    font-size: var(--habus-fs-38);
    line-height: 1;
    filter: drop-shadow(0 2px 4px var(--habus-schatten-20));
}
:where(html.habus-mobile-app) .mob-btn-label {
    font-size: var(--habus-fs-14);
    font-weight: 700;
    color: var(--habus-weiss);
    letter-spacing: .04em;
    text-transform: uppercase;
    text-align: center;
    padding: 0 8px;
}

:where(html.habus-mobile-app) .mob-status-info {
    text-align: center;
    line-height: 1.4;
}
:where(html.habus-mobile-app) .mob-status-text {
    font-size: var(--habus-fs-16);
    font-weight: 600;
    color: var(--hb-text);
}
:where(html.habus-mobile-app) .mob-status-since {
    font-size: var(--habus-fs-12);
    color: var(--hb-muted);
    margin-top: 2px;
    min-height: 1.4em; /* reserviert die Zeile auch leer, damit das Desktop-Popup (height:auto) beim Start/Stop des Timers nicht springt */
}
:where(html.habus-mobile-app) .mob-status-timer {
    font-size: var(--habus-fs-20);
    font-weight: 600;
    color: var(--hb-nav);
    font-variant-numeric: tabular-nums;
    margin-top: 6px;
    min-height: 1.4em; /* siehe .mob-status-since */
}

:where(html.habus-mobile-app) .mob-feedback {
    min-height: 32px;
    text-align: center;
    font-size: var(--habus-fs-13);
    font-weight: 600;
    padding: 6px 16px;
    border-radius: var(--habus-radius-20);
    transition: opacity .4s;
}
:where(html.habus-mobile-app) .mob-feedback:empty { opacity: 0; }
:where(html.habus-mobile-app) .mob-feedback.ok { background: var(--habus-erfolg-hell-80); color: var(--habus-erfolg-dunkel-50); }
:where(html.habus-mobile-app) .mob-feedback.error { background: var(--habus-fehler-hell-90); color: var(--habus-rot-680); }
:where(html.habus-mobile-app) .mob-feedback.info { background: var(--habus-petrol-hell-80); color: var(--habus-petrol-dunkel-50); }

:where(html.habus-mobile-app) .mob-bottom {
    flex-shrink: 0;
    display: flex;
    gap: 12px;
    padding: 12px 0 4px;
}

:where(html.habus-mobile-app) .mob-action-btn {
    flex: 1;
    padding: 16px 8px;
    border: none;
    border-radius: var(--habus-radius-14);
    font-size: var(--habus-fs-15);
    font-weight: 700;
    cursor: pointer;
    transition: opacity .15s, transform .12s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    box-shadow: 0 3px 12px var(--habus-schatten-15);
    -webkit-appearance: none;
    outline: none;
}
:where(html.habus-mobile-app) .mob-action-btn:active { transform: scale(.96); opacity: .85; }

:where(html.habus-mobile-app) .mob-action-btn .mob-a-icon { font-size: var(--habus-fs-26); line-height: 1; }
:where(html.habus-mobile-app) .mob-action-btn .mob-a-label { font-size: var(--habus-fs-12); font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }

:where(html.habus-mobile-app) .mob-btn-urlaub { background: var(--hb-urlaub); color: var(--habus-weiss); }
:where(html.habus-mobile-app) .mob-btn-krank { background: var(--hb-krank);  color: var(--habus-weiss); }

/* "Automatik einrichten" (WLAN-Auto-Buchung, nur in der HABUS-Android-App nutzbar) */
:where(html.habus-mobile-app) .mob-auto-link {
    align-self: center;
    flex-shrink: 0;
    margin: 4px 0 2px;
    padding: 8px 14px;
    border: none;
    background: transparent;
    color: var(--hb-nav);
    font-size: var(--habus-fs-12);
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
    -webkit-appearance: none;
}
:where(html.habus-mobile-app) .auto-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid var(--habus-primaer-hell-90);
    font-size: var(--habus-fs-14);
}
:where(html.habus-mobile-app) .auto-label { color: var(--hb-muted); flex-shrink: 0; }
:where(html.habus-mobile-app) .auto-value { font-weight: 700; text-align: right; word-break: break-word; }
:where(html.habus-mobile-app) .auto-msg { min-height: 1.4em; font-size: var(--habus-fs-13); font-weight: 600; margin: 12px 0 2px; }
:where(html.habus-mobile-app) .auto-msg.error { color: var(--habus-rot-680); }
:where(html.habus-mobile-app) .auto-msg.ok { color: var(--habus-erfolg-dunkel-50); }
:where(html.habus-mobile-app) .auto-msg.info { color: var(--habus-petrol-dunkel-50); }
:where(html.habus-mobile-app) .auto-btns { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
:where(html.habus-mobile-app) .auto-btns button {
    padding: 13px;
    border: none;
    border-radius: var(--habus-radius-large);
    font-size: var(--habus-fs-14);
    font-weight: 700;
    cursor: pointer;
}
:where(html.habus-mobile-app) .auto-btns button:active { opacity: .8; }
:where(html.habus-mobile-app) .auto-btns button:disabled { opacity: .5; cursor: not-allowed; }
:where(html.habus-mobile-app) .auto-btns button[hidden] { display: none; }
:where(html.habus-mobile-app) .auto-btn-primary { background: var(--hb-nav); color: var(--habus-weiss); }
:where(html.habus-mobile-app) .auto-btn-danger { background: var(--habus-fehler-hell-90); color: var(--habus-rot-680); }
:where(html.habus-mobile-app) .auto-btn-cancel { background: var(--habus-gedaempft-hell-85); color: var(--hb-text); }

/* ══════════════════════════════════════════════════════════════════════════════════ */
/* Seite 2: Kontieren + Seite 3: Heute kontiert                                        */
/* ══════════════════════════════════════════════════════════════════════════════════ */

:where(html.habus-mobile-app) .kst-clock-wrap {
    text-align: center;
    padding: 8px 0 5px;
    flex-shrink: 0;
}
:where(html.habus-mobile-app) .kst-clock {
    font-size: clamp(var(--habus-fs-42), 13vw, var(--habus-fs-58));
    font-weight: 200;
    letter-spacing: .06em;
    color: var(--hb-text);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
:where(html.habus-mobile-app) .kst-clock-secs {
    font-size: .5em;
    opacity: .5;
    vertical-align: super;
}
:where(html.habus-mobile-app) .kst-date {
    font-size: var(--habus-fs-14);
    color: var(--hb-muted);
    margin-top: 4px;
    font-weight: 500;
}

:where(html.habus-mobile-app) .kst-select-box {
    background: var(--habus-weiss-70);
    border: none;
    border-radius: var(--habus-radius-14);
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    cursor: pointer;
    text-align: left;
    box-shadow: 0 2px 8px var(--habus-schatten-8);
    -webkit-appearance: none;
    margin-top: 5px;
}
:where(html.habus-mobile-app) .kst-select-box .kst-select-icon { font-size: var(--habus-fs-20); flex-shrink: 0; }
:where(html.habus-mobile-app) .kst-select-box .kst-select-text { flex: 1; min-width: 0; }
:where(html.habus-mobile-app) .kst-select-box .kst-select-label { font-size: var(--habus-fs-11); color: var(--hb-muted); text-transform: uppercase; letter-spacing: .04em; }
:where(html.habus-mobile-app) .kst-select-box .kst-select-value { font-size: var(--habus-fs-15); font-weight: 700; color: var(--hb-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:where(html.habus-mobile-app) .kst-select-box .kst-select-value.placeholder { color: var(--hb-muted); font-weight: 500; }
:where(html.habus-mobile-app) .kst-select-box .kst-select-chevron { color: var(--hb-nav); font-size: var(--habus-fs-14); flex-shrink: 0; }

:where(html.habus-mobile-app) .kst-center {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 16px 0 8px;
}

:where(html.habus-mobile-app) .kst-btn-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

:where(html.habus-mobile-app) .kst-status-btn {
    width: clamp(140px, 36vw, 176px);
    height: clamp(140px, 36vw, 176px);
    border-radius: 50%;
    border: none;
    cursor: pointer;
    transition: background .35s ease, transform .12s ease, box-shadow .35s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: var(--hb-btn-shadow);
    outline: none;
    -webkit-appearance: none;
}
:where(html.habus-mobile-app) .kst-status-btn:active { transform: scale(.94); }
:where(html.habus-mobile-app) .kst-status-btn.running {
    background: var(--hb-green);
    box-shadow: 0 6px 30px var(--habus-erfolg-a45), var(--hb-btn-shadow);
}
:where(html.habus-mobile-app) .kst-status-btn.idle {
    background: var(--hb-gray);
}
:where(html.habus-mobile-app) .kst-status-btn.disabled, :where(html.habus-mobile-app) .kst-status-btn:disabled {
    background: var(--habus-gedaempft-hell-60);
    cursor: not-allowed;
    box-shadow: none;
}

:where(html.habus-mobile-app) .kst-btn-icon {
    font-size: var(--habus-fs-38);
    line-height: 1;
    filter: drop-shadow(0 2px 4px var(--habus-schatten-20));
}
:where(html.habus-mobile-app) .kst-btn-label {
    font-size: var(--habus-fs-14);
    font-weight: 700;
    color: var(--habus-weiss);
    letter-spacing: .04em;
    text-transform: uppercase;
    text-align: center;
    padding: 0 8px;
}

:where(html.habus-mobile-app) .kst-status-info { text-align: center; line-height: 1.4; }
:where(html.habus-mobile-app) .kst-status-text { font-size: var(--habus-fs-15); font-weight: 600; color: var(--hb-text); }
:where(html.habus-mobile-app) .kst-status-since { font-size: var(--habus-fs-12); color: var(--hb-muted); margin-top: 2px; min-height: 1.4em; }
:where(html.habus-mobile-app) .kst-status-timer {
    font-size: var(--habus-fs-18);
    font-weight: 600;
    color: var(--hb-nav);
    font-variant-numeric: tabular-nums;
    margin-top: 3px;
    min-height: 1.4em;
}

:where(html.habus-mobile-app) .kst-taetigkeit-wrap { width: 100%; margin-top: 4px; }
:where(html.habus-mobile-app) .kst-taetigkeit-wrap label { font-size: var(--habus-fs-11); color: var(--hb-muted); text-transform: uppercase; letter-spacing: .04em; display: block; margin-bottom: 4px; }
:where(html.habus-mobile-app) #kst-taetigkeit-input {
    width: 100%;
    padding: 9px 12px;
    border: none;
    border-radius: var(--habus-radius-large);
    font-size: var(--habus-fs-14);
    background: var(--habus-weiss-70);
    color: var(--hb-text);
}
:where(html.habus-mobile-app) #kst-taetigkeit-input:focus { outline: 2px solid var(--hb-nav); }

:where(html.habus-mobile-app) .kst-feedback {
    min-height: 26px;
    text-align: center;
    font-size: var(--habus-fs-13);
    font-weight: 600;
    padding: 5px 16px;
    border-radius: var(--habus-radius-20);
    transition: opacity .4s;
}
:where(html.habus-mobile-app) .kst-feedback:empty { opacity: 0; }
:where(html.habus-mobile-app) .kst-feedback.ok { background: var(--habus-erfolg-hell-80); color: var(--habus-erfolg-dunkel-50); }
:where(html.habus-mobile-app) .kst-feedback.error { background: var(--habus-fehler-hell-90); color: var(--habus-rot-680); }
:where(html.habus-mobile-app) .kst-feedback.info { background: var(--habus-petrol-hell-80); color: var(--habus-petrol-dunkel-50); }

:where(html.habus-mobile-app) .kst-today {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin-top: 10px;
}
:where(html.habus-mobile-app) .kst-today-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--habus-fs-13);
    font-weight: 700;
    color: var(--hb-muted);
    margin-bottom: 5px;
    padding: 0 2px;
}
:where(html.habus-mobile-app) .kst-today-sum { color: var(--hb-nav); flex-shrink: 0; }
:where(html.habus-mobile-app) .kst-today-gebucht { font-size: var(--habus-fs-12); color: var(--hb-muted); margin: -1px 0 8px; padding: 0 2px; min-height: 1.4em; }

/* Am unteren Seitenrand: bei kurzer Liste dank margin-top:auto (Flex-Elternteil .kst-today) an den unteren
   Rand geschoben, bei langer Liste einfach das letzte Element im normalen Fluss. */
:where(html.habus-mobile-app) .kst-today-heute-btn {
    width: 100%;
    padding: 12px 10px;
    border: none;
    border-radius: var(--habus-radius-large);
    background: var(--hb-nav);
    color: var(--habus-weiss);
    font-size: var(--habus-fs-13);
    font-weight: 700;
    cursor: pointer;
    -webkit-appearance: none;
    margin-top: auto;
    flex-shrink: 0;
}
:where(html.habus-mobile-app) .kst-today-heute-btn:active { opacity: .85; }
:where(html.habus-mobile-app) .kst-today-heute-btn[hidden] { display: none; }
:where(html.habus-mobile-app) .kst-today-list { display: flex; flex-direction: column; gap: 5px; }

:where(html.habus-mobile-app) .kst-nachtrag-box {
    background: var(--habus-weiss-70);
    border-radius: var(--habus-radius-12);
    padding: 12px 14px;
    margin-top: 10px;
    text-align: center;
    flex-shrink: 0;
}
:where(html.habus-mobile-app) .kst-nachtrag-hint { font-size: var(--habus-fs-12); color: var(--hb-muted); margin-bottom: 8px; }
:where(html.habus-mobile-app) .kst-nachtrag-btns { display: flex; flex-direction: column; gap: 8px; }
:where(html.habus-mobile-app) .kst-nachtrag-btn {
    width: 100%;
    padding: 12px 10px;
    border: none;
    border-radius: var(--habus-radius-large);
    background: var(--hb-nav);
    color: var(--habus-weiss);
    font-size: var(--habus-fs-13);
    font-weight: 700;
    cursor: pointer;
    -webkit-appearance: none;
}
:where(html.habus-mobile-app) .kst-nachtrag-btn:active { opacity: .85; }
:where(html.habus-mobile-app) .kst-nachtrag-btn:disabled { opacity: .6; cursor: wait; }
:where(html.habus-mobile-app) .kst-today-empty {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--habus-fs-13);
    color: var(--hb-muted);
    padding: 9px 2px;
    text-align: center;
}
:where(html.habus-mobile-app) .kst-today-row {
    background: var(--habus-weiss-70);
    border-radius: var(--habus-radius-large);
    padding: 7px 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}
:where(html.habus-mobile-app) .kst-today-row .kst-row-main { flex: 1; min-width: 0; }
:where(html.habus-mobile-app) .kst-today-row .kst-row-kst { font-size: var(--habus-fs-13); font-weight: 700; color: var(--hb-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:where(html.habus-mobile-app) .kst-today-row .kst-row-meta { font-size: var(--habus-fs-11); color: var(--hb-muted); }
:where(html.habus-mobile-app) .kst-today-row .kst-row-min { font-size: var(--habus-fs-13); font-weight: 700; color: var(--hb-nav); flex-shrink: 0; }
:where(html.habus-mobile-app) .kst-today-row .kst-row-del {
    flex-shrink: 0;
    border: none;
    background: transparent;
    font-size: var(--habus-fs-15);
    cursor: pointer;
    padding: 4px 2px;
    opacity: .6;
}
:where(html.habus-mobile-app) .kst-today-row .kst-row-del:active { opacity: 1; }

/* ── Dialoge (Urlaub/Krank-Bestätigung + Kostenstellen-Auswahl) ────────────────────── */
:where(html.habus-mobile-app) .mob-overlay {
    position: fixed; inset: 0;
    background: var(--habus-schatten-50);
    z-index: 100;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 16px;
}
:where(html.habus-mobile-app) .mob-overlay[hidden] { display: none; }
:where(html.habus-mobile-app) .mob-dialog {
    background: var(--habus-weiss);
    border-radius: var(--habus-radius-20) var(--habus-radius-20) var(--habus-radius-16) var(--habus-radius-16);
    padding: 28px 24px 24px;
    width: 100%;
    max-width: 380px;
}
:where(html.habus-mobile-app) .mob-dialog h3 { font-size: var(--habus-fs-18); font-weight: 700; margin-bottom: 8px; }
:where(html.habus-mobile-app) .mob-dialog p { font-size: var(--habus-fs-14); color: var(--hb-muted); margin-bottom: 22px; }
:where(html.habus-mobile-app) .mob-dialog-btns { display: flex; gap: 10px; }
:where(html.habus-mobile-app) .mob-dialog-btns button {
    flex: 1; padding: 14px; border: none; border-radius: var(--habus-radius-large);
    font-size: var(--habus-fs-15); font-weight: 700; cursor: pointer; transition: opacity .15s;
}
:where(html.habus-mobile-app) .mob-dialog-btns button:active { opacity: .8; }
:where(html.habus-mobile-app) .mob-dialog-cancel { background: var(--habus-gedaempft-hell-85); color: var(--hb-text); }
:where(html.habus-mobile-app) .mob-dialog-confirm { background: var(--hb-urlaub); color: var(--habus-weiss); }
:where(html.habus-mobile-app) .mob-dialog-confirm.krank { background: var(--hb-krank); }

/* Kostenstellen-Picker: eigene Größe/Scroll-Verhalten (variable Trefferliste statt kurzem Bestätigungstext) */
:where(html.habus-mobile-app) .mob-dialog--picker {
    padding: 20px 18px 18px;
    max-width: 400px;
    max-height: 82vh;
    display: flex;
    flex-direction: column;
}
:where(html.habus-mobile-app) .mob-dialog--picker h3 { margin-bottom: 12px; flex-shrink: 0; }

:where(html.habus-mobile-app) .kst-picker-tabs { display: flex; gap: 8px; margin-bottom: 12px; flex-shrink: 0; }
:where(html.habus-mobile-app) .kst-tab {
    flex: 1;
    padding: 9px 4px;
    border: none;
    border-radius: var(--habus-radius-large);
    background: var(--habus-gedaempft-hell-90);
    color: var(--hb-muted);
    font-size: var(--habus-fs-13);
    font-weight: 700;
    cursor: pointer;
}
:where(html.habus-mobile-app) .kst-tab.active { background: var(--hb-nav); color: var(--habus-weiss); }

:where(html.habus-mobile-app) .kst-picker-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
:where(html.habus-mobile-app) .kst-tab-panel { flex: 1; min-height: 0; display: flex; flex-direction: column; }
:where(html.habus-mobile-app) .kst-tab-panel[hidden] { display: none; }

:where(html.habus-mobile-app) #kst-search-input {
    width: 100%;
    padding: 11px 12px;
    border: 1px solid var(--habus-primaer-hell-80);
    border-radius: var(--habus-radius-large);
    font-size: var(--habus-fs-15);
    margin-bottom: 10px;
    flex-shrink: 0;
}
:where(html.habus-mobile-app) #kst-search-input:focus { outline: 2px solid var(--hb-nav); border-color: var(--hb-nav); }

:where(html.habus-mobile-app) .kst-breadcrumb {
    font-size: var(--habus-fs-12);
    color: var(--hb-nav);
    margin-bottom: 8px;
    flex-shrink: 0;
    line-height: 1.5;
}
:where(html.habus-mobile-app) .kst-breadcrumb .kst-crumb { cursor: pointer; text-decoration: underline; }
:where(html.habus-mobile-app) .kst-breadcrumb .kst-crumb-sep { color: var(--hb-muted); margin: 0 3px; }

:where(html.habus-mobile-app) .kst-result-list { overflow-y: auto; flex: 1; min-height: 60px; -webkit-overflow-scrolling: touch; }
:where(html.habus-mobile-app) .kst-result-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 8px;
    border-bottom: 1px solid var(--habus-gedaempft-hell-90);
    cursor: pointer;
}
:where(html.habus-mobile-app) .kst-result-item:active { background: var(--habus-primaer-hell-95); }
:where(html.habus-mobile-app) .kst-result-item .kst-ri-icon { flex-shrink: 0; font-size: var(--habus-fs-15); width: 18px; text-align: center; }
:where(html.habus-mobile-app) .kst-result-item .kst-ri-nummer { flex-shrink: 0; font-size: var(--habus-fs-13); font-weight: 700; color: var(--hb-nav); min-width: 44px; }
:where(html.habus-mobile-app) .kst-result-item .kst-ri-name { flex: 1; min-width: 0; font-size: var(--habus-fs-14); color: var(--hb-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:where(html.habus-mobile-app) .kst-result-item .kst-ri-chevron { flex-shrink: 0; color: var(--hb-muted); font-size: var(--habus-fs-13); }
:where(html.habus-mobile-app) .kst-result-item.kst-ri-self { background: var(--habus-primaer-hell-95); font-weight: 700; }
:where(html.habus-mobile-app) .kst-result-empty { padding: 16px 8px; text-align: center; font-size: var(--habus-fs-13); color: var(--hb-muted); }

:where(html.habus-mobile-app) .kst-picker-close {
    width: 100%; padding: 13px; border: none; border-radius: var(--habus-radius-large);
    font-size: var(--habus-fs-15); font-weight: 700; cursor: pointer;
    background: var(--habus-gedaempft-hell-85); color: var(--hb-text); margin-top: 14px; flex-shrink: 0;
}
:where(html.habus-mobile-app) .kst-picker-close:active { opacity: .8; }

/* Hinweis-Seite "Mobile App nicht freigeschaltet" */
:where(html.habus-mobile-gesperrt) *{box-sizing:border-box;margin:0;padding:0}
html:where(.habus-mobile-gesperrt), :where(html.habus-mobile-gesperrt) body{height:100%;font-family:var(--habus-font-system);background:var(--habus-color-bg-page);color:var(--habus-color-text)}
:where(html.habus-mobile-gesperrt) body{display:flex;align-items:center;justify-content:center;padding:20px;text-align:center}
:where(html.habus-mobile-gesperrt) .mob-disabled-box{background:var(--habus-gedaempft-hell-90);border-radius:var(--habus-radius-20);padding:32px 26px;max-width:340px;box-shadow:0 6px 24px var(--habus-schatten-15)}
:where(html.habus-mobile-gesperrt) .mob-disabled-box h1{font-size:var(--habus-fs-16);font-weight:700;color:var(--habus-color-primary-light);margin-bottom:10px}
:where(html.habus-mobile-gesperrt) .mob-disabled-box p{font-size:var(--habus-fs-14);color:var(--habus-gedaempft-dunkel-20);line-height:1.5;margin-bottom:20px}
:where(html.habus-mobile-gesperrt) .mob-disabled-box a{display:inline-block;padding:12px 22px;border-radius:var(--habus-radius-large);background:var(--habus-color-primary-light);color:var(--habus-weiss);text-decoration:none;font-size:var(--habus-fs-14);font-weight:700}

/* ==================================================================================================================== */
/* B: mysql/table_editor.php                                                                                            */
/* ==================================================================================================================== */

.habus-tableeditor-select { width: 220px; }

/* ==================================================================================================================== */
/* B: overlays/changelog.php                                                                                            */
/* ==================================================================================================================== */

.habus-changelog{padding:4px 2px 8px 2px;max-width:640px}
.habus-changelog h2{font-size:var(--habus-fs-16);font-weight:700;color:var(--habus-color-primary-light);margin:0 0 10px 0}
.habus-changelog h3{font-size:var(--habus-fs-13);font-weight:700;color:var(--habus-color-primary);margin:18px 0 8px 0;text-transform:uppercase;letter-spacing:.03em}
.habus-changelog h3:first-of-type{margin-top:0}
.habus-changelog p{font-size:var(--habus-fs-13);color:var(--habus-gedaempft-dunkel-50);margin:0 0 8px 0;line-height:1.5}
.habus-changelog ul{margin:0 0 6px 0;padding-left:20px}
.habus-changelog li{font-size:var(--habus-fs-13);color:var(--habus-gedaempft-dunkel-50);line-height:1.55;margin-bottom:5px}
.habus-changelog code{background:var(--habus-gedaempft-hell-90);border:1px solid var(--habus-primaer-hell-80);border-radius:var(--habus-radius-3);padding:1px 5px;font-size:var(--habus-fs-12)}
.habus-changelog-empty{font-size:var(--habus-fs-13);color:var(--habus-color-muted);padding:12px 4px}

/* ==================================================================================================================== */
/* B: overlays/tage_bearbeiten.js                                                                                       */
/* ==================================================================================================================== */

.habus-edit-input--zeit { width: 7em; }
.habus-edit-input--typ  { width: 10em; }
.habus-edit-input--text { width: 8em; }

/* ==================================================================================================================== */
/* B: pages/auswertung/anwesenheit.php                                                                                  */
/* ==================================================================================================================== */

/* Farbe der grauen Schließzeiten des Standorts im Diagramm - versteckter Farbträger, ausgelesen per getComputedStyle() */
.anwesenheit-geschlossen-farbe { color: var(--habus-gedaempft-a20); }

/* ==================================================================================================================== */
/* B: pages/auswertung/buchungsstatus.php                                                                               */
/* ==================================================================================================================== */

/* HABUS-like defaults (mit Fallbacks auf CSS-Variablen wenn vorhanden) */
.anwesenheit-wrapper { margin: 16px 0; }
.anwesenheit-wrapper h2 { margin: 0 0 8px 0; }

table.anwesenheit {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
  background: var(--habus-color-card-bg, #fff);
}

table.anwesenheit th,
table.anwesenheit td {
  border: 1px solid var(--habus-color-border, #d0d0d0);
  padding: 8px 10px;
  text-align: left;
  vertical-align: middle;
}

table.anwesenheit th {
  background: var(--habus-color-table-head, #f2f2f2);
  font-weight: 600;
}

.anwesenheit-name { font-weight: 600; }
.anwesenheit-status-text { white-space: nowrap; }

/* Ampel */
.ampel {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  margin-right: 6px;
  box-shadow: 0 0 4px var(--habus-schatten-35);
  vertical-align: middle;
}
.ampel-green  { background-color: var(--habus-gruen-510); }
.ampel-yellow { background-color: var(--habus-gelb-380); }
.ampel-gray   { background-color: var(--habus-grau-40); }
.ampel-red    { background-color: var(--habus-rot-420); }
.ampel-blue   { background-color: var(--habus-color-accent); }

.anwesenheit-legend {
  margin-top: 10px;
  font-size: 0.85rem;
  color: var(--habus-color-text-muted, #555);
}
.anwesenheit-legend .ampel { margin-right: 3px; }

.habus-row-clickable { cursor: pointer; }
.habus-row-clickable:hover { background: var(--habus-color-table-head, #f2f2f2); }

.habus-live-clock {
  font-size: 1rem;
  font-weight: 600;
  white-space: nowrap;
  text-align: right;
}

/* ==================================================================================================================== */
/* B: pages/auswertung/geobuchungen.php                                                                                 */
/* ==================================================================================================================== */

.habus-typfilter { position: relative; display: inline-block; }
.habus-typfilter-summary { cursor: pointer; list-style: none; user-select: none; }
.habus-typfilter-summary::-webkit-details-marker { display: none; }
.habus-typfilter-panel {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 10000; /* muss ueber den Leaflet-Kartenpanes liegen (Leaflet nutzt intern bis ~1000) */
    min-width: 220px;
    background: var(--habus-weiss);
    border: 1px solid var(--habus-grau-20);
    border-radius: var(--habus-radius);
    box-shadow: 0 4px 14px var(--habus-schatten-15);
    padding: 10px 12px;
}
.habus-typfilter-panel label {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 0;
    font-size: var(--habus-fs-12);
    white-space: nowrap;
    cursor: pointer;
}
.habus-typfilter-actions { display: flex; gap: 8px; margin-top: 6px; }

#geoMap { width: 100%; height: 600px; border: 1px solid var(--habus-grau-20); border-radius: var(--habus-radius-4); }
/* Beschriftung der Standort-Marker auf der Karte (Leaflet divIcon) */
.geo-standort-label {
    background: var(--habus-grau-80); color: var(--habus-weiss); border-radius: var(--habus-radius-4); padding: 2px 6px; font-size: var(--habus-fs-11); white-space: nowrap;
    transform: translate(-50%, -100%); box-shadow: 0 1px 3px var(--habus-schatten-40);
}
.geo-warnung { color: var(--habus-rot-390); }
/* Legende: ein Eintrag je Mitarbeiter mit Farbpunkt */
.geo-legende-eintrag { display: flex; align-items: center; gap: 6px; cursor: pointer; font-size: var(--habus-fs-13); }
.geo-legende-farbe   { display: inline-block; width: 12px; height: 12px; border-radius: 50%; }

/* ==================================================================================================================== */
/* B: pages/auswertung/sollist.php                                                                                      */
/* ==================================================================================================================== */

/* Werte-Filter Ist/Soll/Differenz: Kacheln in der Optik von "Anträge freigeben" (.habus-antraege-filter*), in der Kopfzeile ohne Außenabstand */
.sollist-wertwahl.habus-antraege-filter { margin: 0; gap: 8px; }
/* Tabelle im Standard-Layout (#habus_table); Monatsansicht mit vielen Tages-Spalten kompakter */
#habus_table.sollist-tabelle .sollist-wert-zelle { text-align: right; white-space: nowrap; }
#habus_table.sollist-tabelle .sollist-name { white-space: nowrap; }
#habus_table.sollist-tabelle--tage th, #habus_table.sollist-tabelle--tage td { padding: 6px 4px; }
#habus_table.sollist-tabelle--tage thead th { text-align: center; }
.sollist-tabelle .sollist-summe { font-weight: 700; }
/* Klickbares Wertefeld -> Monatsübersicht des Mitarbeiters */
.sollist-tabelle .sollist-link { cursor: pointer; }
.sollist-tabelle .sollist-link:hover { background: var(--habus-primaer-a15); text-decoration: underline; }
/* Je Zelle bis zu drei Zeilen (Ist, Soll gedämpft, Differenz grün/rot), Legende rechts neben dem Namen. Gleiche Zeilenhöhe
   in Legende und Zellen, damit die Werte über die ganze Zeile auf einer Linie liegen. */
.sollist-name-inhalt { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sollist-legende { display: flex; flex-direction: column; text-align: right; font-size: 0.75em; font-weight: 400; color: var(--habus-color-muted); }
.sollist-legende span, .sollist-kombi span { display: block; line-height: 1.35em; }
.sollist-legende span { line-height: calc(1.35em / 0.75); }
.sollist-kombi { display: flex; flex-direction: column; }
.sollist-kombi-soll { color: var(--habus-color-muted); }
.sollist-kombi-diff { font-weight: 700; }
.sollist-kombi-diff:not(:first-child) { border-top: 1px solid var(--habus-color-table-border); }
.sollist-tabelle tbody tr:not(.sollist-rolle) td { vertical-align: middle; }

/* ==================================================================================================================== */
/* B: pages/auswertung/wochenplan.php                                                                                   */
/* ==================================================================================================================== */

/* Kacheln zum Ein-/Ausblenden wie beim Soll/Ist-Dashboard */
.wochenplan-wahl.habus-antraege-filter { margin: 0; gap: 8px; }
#habus_table.wochenplan-tabelle td { vertical-align: top; white-space: nowrap; }
#habus_table.wochenplan-tabelle thead th { text-align: center; }
.wochenplan-datum { display: block; font-size: 0.8em; font-weight: 400; }
/* Namen unter der Rollen-Zwischenzeile eingerückt */
#habus_table.wochenplan-tabelle td.wochenplan-name { font-weight: 700; padding-left: 24px; }
/* Je Angabe eine Zeile in der Zelle */
.wochenplan-zeile { display: block; line-height: 1.4em; }
.wochenplan-dauer { color: var(--habus-color-muted); }
.wochenplan-frei { color: var(--habus-color-muted); font-size: 0.85em; font-style: italic; }
.wochenplan-soll { font-size: 0.85em; color: var(--habus-color-muted); border-top: 1px dotted var(--habus-color-table-border); }
.wochenplan-summe { font-weight: 700; }
/* Wochensumme der geplanten Arbeitsdauer passt nicht zur Soll-Summe - nur rot, wenn "Soll-Arbeitszeit" eingeblendet ist */
.wochenplan-tabelle .wochenplan-summe-abweichung { color: var(--habus-color-danger); }
/* Klickbare Tageszelle -> Personaldaten (Arbeitszeit) des Mitarbeiters */
.wochenplan-tabelle .wochenplan-link { cursor: pointer; }
.wochenplan-tabelle .wochenplan-link:hover { background: var(--habus-primaer-a15); }
/* Urlaub/Krank/Elternzeit/Sabbatical/Dauerkrank der Woche - nur mit eingeblendetem Datum oder Gebucht (sonst unten ausgeblendet) */
.wochenplan-abwesend { font-weight: 700; }
.wochenplan-tabelle:not(.wochenplan--aus-datum) td.wochenplan-abwesend--urlaub,
.wochenplan-tabelle:not(.wochenplan--aus-gebucht) td.wochenplan-abwesend--urlaub { background: var(--habus-color-urlaub); }
.wochenplan-tabelle:not(.wochenplan--aus-datum) td.wochenplan-abwesend--krank,
.wochenplan-tabelle:not(.wochenplan--aus-gebucht) td.wochenplan-abwesend--krank { background: var(--habus-color-krank); }
.wochenplan-tabelle:not(.wochenplan--aus-datum) td.wochenplan-abwesend--ueberstunden,
.wochenplan-tabelle:not(.wochenplan--aus-gebucht) td.wochenplan-abwesend--ueberstunden { background: var(--habus-color-abs-ueberstunden); }
.wochenplan-tabelle:not(.wochenplan--aus-datum) td.wochenplan-abwesend--fortbildung,
.wochenplan-tabelle:not(.wochenplan--aus-gebucht) td.wochenplan-abwesend--fortbildung { background: var(--habus-color-abs-fortbildung); }
.wochenplan-tabelle:not(.wochenplan--aus-datum) td.wochenplan-abwesend--elternzeit,
.wochenplan-tabelle:not(.wochenplan--aus-gebucht) td.wochenplan-abwesend--elternzeit { background: var(--habus-color-abs-elternzeit); }
.wochenplan-tabelle:not(.wochenplan--aus-datum) td.wochenplan-abwesend--sabbatical,
.wochenplan-tabelle:not(.wochenplan--aus-gebucht) td.wochenplan-abwesend--sabbatical { background: var(--habus-color-abs-sabbatical); }
.wochenplan-tabelle:not(.wochenplan--aus-datum) td.wochenplan-abwesend--dauerkrank,
.wochenplan-tabelle:not(.wochenplan--aus-gebucht) td.wochenplan-abwesend--dauerkrank { background: var(--habus-color-abs-dauerkrank); color: var(--habus-weiss); }
/* Kachel "Gebucht": tatsächlich gebuchte Zeiträume unter dem Plan, abgesetzt durch eine gepunktete Linie */
.wochenplan-gebucht { font-size: 0.85em; color: var(--habus-color-primary); }
.wochenplan-gebucht--erste { border-top: 1px dotted var(--habus-color-table-border); }
/* Rollen-Zwischenzeile innerhalb einer Standort-Gruppe */
#habus_table.wochenplan-tabelle .wochenplan-rolle td { font-weight: 700; }
/* Standort-Gruppenzeile über die ganze Breite leicht in der Hauptfarbe (Habus-Grün) hinterlegt */
#habus_table.wochenplan-tabelle .wochenplan-gruppe td { background: var(--habus-primaer-hell-85); }
/* Ausgeblendete Angaben (Klassen setzt das JS an der Tabelle); die Summenspalte ist die letzte Spalte (Kopf ohne eigene Klasse, da über habus_echoTableHeader() erzeugt) */
.wochenplan--aus-datum .wochenplan-datum,
.wochenplan--aus-datum.wochenplan--aus-gebucht [data-wert="abwesenheit"],
.wochenplan--aus-gebucht [data-wert="gebucht"],
.wochenplan--aus-summe thead th:last-child,
.wochenplan--aus-summe td.wochenplan-summe,
.wochenplan--aus-zeiten [data-wert="zeiten"],
.wochenplan--aus-dauer [data-wert="dauer"],
.wochenplan--aus-datum .wochenplan-langzeit-plan { display: none; }   /* geplante Zeiten bei Elternzeit/Sabbatical/Dauerkrank nur mit Datum */

/* ==================================================================================================================== */
/* B: pages/auswertung/systemlog.php                                                                                   */
/* ==================================================================================================================== */

.syslog-page{max-width:1200px;margin:0 auto}
.syslog-instbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px;padding:10px 14px;background:var(--habus-gedaempft-hell-90);border:1px solid var(--habus-gedaempft-hell-60);border-radius:var(--habus-radius);font-size:var(--habus-fs-13)}
.syslog-instbar select{padding:4px 8px;border-radius:var(--habus-radius-4);border:1px solid var(--habus-gedaempft-hell-60)}
.syslog-stats{display:flex;gap:18px;flex-wrap:wrap;margin:10px 0 16px}
.syslog-stat{font-size:var(--habus-fs-13)}
.syslog-stat b{font-size:var(--habus-fs-18);display:block}
.syslog-section{margin-bottom:32px}
.syslog-section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.syslog-section-head h3{margin-bottom:6px}
.syslog-hint{padding:10px 14px;background:var(--habus-warnung-hell-90);border:1px solid var(--habus-gelb-280);border-radius:var(--habus-radius);font-size:var(--habus-fs-13);color:var(--habus-orange-760);margin-bottom:12px}
.syslog-hint a{color:var(--habus-orange-760);font-weight:600}
.syslog-flash{padding:10px 14px;border-radius:var(--habus-radius);font-size:var(--habus-fs-13);margin-bottom:16px}
.syslog-flash--success{background:var(--habus-erfolg-hell-90);border:1px solid var(--habus-gruen-250-2);color:var(--habus-gruen-750-2)}
.syslog-flash--error{background:var(--habus-fehler-hell-90);border:1px solid var(--habus-fehler-hell-60);color:var(--habus-fehler-dunkel-35)}
.syslog-back{display:inline-block;margin-bottom:14px;font-size:var(--habus-fs-13)}
/* Uebersichtstabelle: Grundstil kommt von .habus-table (Kopf, Rahmen, Zebra), hier nur die Ergaenzungen */
.syslog-overview th.syslog-num,.syslog-overview td.syslog-num{text-align:right;white-space:nowrap}
.syslog-overview th.syslog-group{text-align:center}
.syslog-overview .syslog-sep{border-left:2px solid var(--habus-color-table-border)}
.syslog-overview thead th.syslog-sep{border-left-color:var(--habus-gedaempft-hell-60)}
.syslog-overview tfoot td{border-top:2px solid var(--habus-color-table-header);font-weight:600;background:var(--habus-color-table-row-alt)}
.syslog-lastlogin{white-space:nowrap}
.syslog-lastlogin-user{display:block;font-size:var(--habus-fs-11);color:var(--habus-grau-35)}
.syslog-ov-row{cursor:pointer}
.syslog-ov-row:hover td{filter:brightness(0.96)}
.syslog-ov-hint{color:var(--habus-grau-35)}
.syslog-ov-actions{white-space:nowrap;text-align:right}
.syslog-ov-actions form{display:inline}
.syslog-badge{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:var(--habus-radius-large);background:var(--habus-primaer-hell-85);color:var(--habus-gedaempft-dunkel-35);font-size:var(--habus-fs-11)}

/* ==================================================================================================================== */
/* B: pages/auswertung/verrechnung.php                                                                                  */
/* ==================================================================================================================== */

#verrechnungTable td.verrechnung-col-zahl { text-align: right; white-space: nowrap; }
#verrechnungTable tr.verrechnung-row-gruppe td { font-weight: bold; background: var(--habus-color-table-row-alt, #f2f2f2); }
#verrechnungTable tr.verrechnung-row-kind td:first-child { color: var(--habus-grau-65); }
#verrechnungTable td.verrechnung-col-summe { font-weight: bold; }

/* Filterfeld der DataTables (Verrechnung, Analysen, Anwesenheit, Geo-Buchungen) mit weißem Hintergrund */
.dataTables_wrapper .dataTables_filter input { background-color: var(--habus-bg-white); }
#verrechnungTable th.verrechnung-col-zahl { text-align: right; white-space: nowrap; }

/* Einrückung der Bezeichnung je Ebene im Kostenstellen-Baum */
#verrechnungTable td.verrechnung-ebene-1 { padding-left: 26px; }
#verrechnungTable td.verrechnung-ebene-2 { padding-left: 44px; }
#verrechnungTable td.verrechnung-ebene-3 { padding-left: 62px; }
#verrechnungTable td.verrechnung-ebene-4 { padding-left: 80px; }
#verrechnungTable td.verrechnung-ebene-5 { padding-left: 98px; }

.verrechnung-kw-input { width: 70px; }

/* ==================================================================================================================== */
/* B: pages/bearbeiten/darstellung.php                                                                                  */
/* ==================================================================================================================== */

/* Verwaltung -> Darstellung: eine Zeile je Parameter (Beschriftung | Farbwahl | Wert | Standard-Knopf, Hinweis darunter) */
.darstellung-einleitung { margin: 8px 0 12px; color: var(--habus-color-muted); }
.darstellung-kontrast   { margin-bottom: 12px; }

.darstellung-zeile {
    display: grid;
    grid-template-columns: 1fr auto 64px auto;
    align-items: center;
    gap: 4px 8px;
    padding: 4px 6px;
    border-left: 3px solid transparent;
    border-radius: var(--habus-radius-4);
}
.darstellung-zeile--geaendert { border-left-color: var(--habus-color-accent); background: var(--habus-akzent-hell-95); }
.darstellung-zeile label      { margin: 0; }
.darstellung-hinweis          { grid-column: 1 / -1; margin-top: 0; }

.darstellung-farbe {
    width: 44px;
    height: 26px;
    padding: 0 2px;
    border: 1px solid var(--habus-grau-20);
    border-radius: var(--habus-radius-4);
    background: var(--habus-weiss);
    cursor: pointer;
}
.habus-form .habus-input.darstellung-zahl { width: 64px; }
.darstellung-wert     { font-family: var(--habus-font-mono); color: var(--habus-color-muted); }
.darstellung-standard { padding: 2px 8px; }

/* ==================================================================================================================== */
/* B: pages/bearbeiten/fehlbuchungen.php                                                                                */
/* ==================================================================================================================== */

.fehlbuchungen-liste { margin: 0; padding-left: 1.1em; }
/* Filterleiste nutzt die Optik des Typ-Filters aus "Anträge freigeben" (.habus-antraege-filter*) */
.fehlbuchungen-filterleiste .fehlbuchungen-ansicht-btn { margin-left: auto; }
.fehlbuchungen-filterleiste .fehlbuchungen-ansicht-btn + .fehlbuchungen-suche { margin-left: 0; }
/* Zusammenfassung (Matrix Mitarbeiter x Tage/Monate), Aufbau wie die Soll/Ist-Übersicht */
.fehlbuchungen-matrix { width: 100%; border-collapse: collapse; }
.fehlbuchungen-matrix th, .fehlbuchungen-matrix td { padding: 6px 8px; border: 1px solid var(--habus-color-table-border); text-align: center; white-space: nowrap; }
.fehlbuchungen-matrix--tage th, .fehlbuchungen-matrix--tage td { padding: 6px 3px; }
.fehlbuchungen-matrix td.habus-text-left { text-align: left; }
.fehlbuchungen-matrix .fehlbuchungen-matrix-summe, .fehlbuchungen-matrix .fehlbuchungen-matrix-spaltensumme { font-weight: 700; }
.fehlbuchungen-matrix .fehlbuchungen-matrix-fehler { color: var(--habus-color-text-fehler-dunkel); font-weight: 700; background: var(--habus-fehler-hell-95); cursor: pointer; }
.fehlbuchungen-matrix .fehlbuchungen-matrix-fehler:hover { background: var(--habus-primaer-a15); text-decoration: underline; }
.fehlbuchungen-aktionen { white-space: nowrap; }
.fehlbuchungen-filterleiste .fehlbuchungen-suche { margin-left: auto; max-width: 260px; }

/* Chipkarten-Kachel in den Personaldaten (pages/bearbeiten/personaldaten.php + chipkarten.js) */
.habus-chip-liste { margin-bottom: 8px; }
.habus-chip-tabelle { width: 100%; border-collapse: collapse; font-size: var(--habus-fs-12); }
.habus-chip-tabelle th { text-align: left; font-weight: 600; padding: 4px 6px; border-bottom: 1px solid var(--habus-gedaempft-hell-80); }
.habus-chip-tabelle td { vertical-align: top; padding: 6px; border-bottom: 1px solid var(--habus-gedaempft-hell-90); }
.habus-chip-tabelle code { word-break: break-all; }
.habus-chip-aktionen { white-space: nowrap; text-align: right; }
.habus-chip-aktionen .habus-btn { margin-left: 4px; }

/* ==================================================================================================================== */
/* B: pages/bearbeiten/personaldaten.php                                                                                */
/* ==================================================================================================================== */

/* Tabellen-Ansicht: Zeile anklickbar, ausgetretene Mitarbeiter abgeblendet */
.habus-user-row              { cursor: pointer; }
.habus-user-row--ausgetreten { opacity: .55; }

/* Admin-Haken (Vertragsarbeitszeit, Bezahlte Pausen) direkt in der Tabelle umschaltbar - Zelle öffnet keine Kachel-Ansicht */
.habus-user-flag                     { text-align: center; white-space: nowrap; cursor: default; }
.habus-user-flag .habus-user-flag-check { cursor: pointer; }

/* ==================================================================================================================== */
/* B: pages/bearbeiten/rollen.php                                                                                       */
/* ==================================================================================================================== */

/* Verwaltung -> Rollen: je Rolle ID | Name (editierbar) | Anzahl Benutzer | Darf | Darf nicht */
.rollen-einleitung { margin: 8px 0 12px; color: var(--habus-color-muted); }
#rollenMsg         { white-space: pre-line; margin-bottom: 8px; }

/* Tabelle passt in die Seitenbreite: feste Spaltenbreiten, Darf/Darf nicht teilen sich den Rest und brechen um */
.rollen-tabelle                       { width: 100%; table-layout: fixed; }
.rollen-tabelle th                    { white-space: normal; }
.rollen-tabelle .rollen-sp-id         { width: 3.5em; }
.rollen-tabelle .rollen-sp-name       { width: 13em; }
.rollen-tabelle .rollen-sp-level      { width: 5.5em; }
.rollen-tabelle .rollen-sp-anzahl     { width: 5.5em; }
.rollen-tabelle .rollen-sp-darf       { width: 55%; }
.rollen-tabelle .rollen-sp-nicht      { width: 45%; }
.rollen-tabelle .rollen-sp-aktion     { width: 40px; }
.rollen-tabelle .rollen-darf,
.rollen-tabelle .rollen-nicht         { overflow-wrap: anywhere; }
.rollen-tabelle td                    { vertical-align: top; }
.rollen-tabelle .rollen-id,
.rollen-tabelle .rollen-level,
.rollen-tabelle .rollen-anzahl        { text-align: right; white-space: nowrap; font-family: var(--habus-font-mono); }
.rollen-tabelle .habus-input.rollen-eingabe { width: 100%; box-sizing: border-box; }
/* Security Level in derselben Schrift wie ID/Benutzer; gesperrte Felder ganz ohne Rahmen/Pfeile, also wie reine Zahlen */
.rollen-tabelle .habus-input.rollen-level-eingabe,
.rollen-neu .habus-input.rollen-level-eingabe { width: 5em; text-align: right; font-family: var(--habus-font-mono); font-size: inherit; }
.rollen-tabelle .habus-input.rollen-level-eingabe:disabled {
    border-color: transparent; background: transparent; color: inherit; padding-left: 0; padding-right: 0;
    appearance: textfield; -moz-appearance: textfield; cursor: default;
}
.rollen-tabelle .habus-input.rollen-level-eingabe:disabled::-webkit-inner-spin-button,
.rollen-tabelle .habus-input.rollen-level-eingabe:disabled::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.rollen-tabelle .rollen-aktion        { text-align: center; white-space: nowrap; }
.rollen-tabelle .habus-btn--icon      { width: 26px; height: 26px; padding: 0; display: inline-flex; align-items: center; justify-content: center; font-size: var(--habus-fs-13); line-height: 1; }
.rollen-tabelle .habus-btn--icon:disabled { opacity: .35; cursor: not-allowed; filter: none; }
/* Zeile "Neue Rolle" ueber der Tabelle */
.rollen-neu                           { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 12px; }
.rollen-neu .rollen-neu-titel         { font-weight: 600; }
.rollen-neu .habus-input.rollen-neu-name { width: 16em; }
/* Schmale Bildschirme: wieder automatische Spaltenbreiten (mit horizontalem Scrollen im scroll-container) */
@media (max-width: 900px) {
    .rollen-tabelle                   { table-layout: auto; }
    .rollen-tabelle .rollen-name      { min-width: 140px; }
    .rollen-tabelle .rollen-darf,
    .rollen-tabelle .rollen-nicht     { min-width: 220px; }
}
.rollen-liste                         { margin: 0; padding-left: 1.1em; }
.rollen-liste li                      { margin: 2px 0; }
.rollen-tabelle tr.rollen-zeile--geaendert td:first-child { box-shadow: inset 3px 0 0 var(--habus-color-accent); }
.rollen-tabelle tr.rollen-zeile--geaendert .rollen-eingabe { background: var(--habus-akzent-hell-95); }

/* ==================================================================================================================== */
/* B: pages/bearbeiten/standortdaten.php                                                                               */
/* ==================================================================================================================== */

.standort-mitarbeiter-scroll { max-height: 320px; }
.standort-mitarbeiter-check  { width: 40px; }
/* Aktionsleiste über den Kacheln: Statusmeldung links, Buttons rechts */
.standort-aktionen { flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.standort-aktionen .standort-aktionen-msg { margin: 0 auto 0 0; padding: 6px 12px; }
/* Eigenes Feld "Arbeitszeitberechnung" in der Karte "Arbeitstage am Standort" */
.standort-arbeitszeit-feld { margin-top: 14px; padding: 10px 12px; border: 1px solid var(--habus-color-table-border); border-radius: var(--habus-button-radius); }
.standort-arbeitszeit-feld legend { padding: 0 6px; font-weight: 600; }

/* ==================================================================================================================== */
/* B: pages/kontierungen/kontieren.php                                                                                  */
/* ==================================================================================================================== */

#kstSeite .kst-tag-card { border: 1px solid var(--habus-color-table-border, #ccc); border-radius: var(--habus-radius); margin-bottom: 10px; overflow: hidden; }
#kstSeite .kst-tag-card.habus-table-cell-weekend .kst-tag-header    { background: var(--habus-color-weekend); }
#kstSeite .kst-tag-card.habus-table-cell-future .kst-tag-header     { background: var(--habus-color-future); }
#kstSeite .kst-tag-card.habus-table-cell-noworkingday .kst-tag-header { background: var(--habus-color-noworkingday); }
#kstSeite .kst-tag-header { display: flex; align-items: center; gap: 14px; padding: 8px 12px; background: var(--habus-gedaempft-hell-90); flex-wrap: wrap; }
#kstSeite .kst-tag-daylabel { font-weight: bold; min-width: 90px; }
/* Alles in der Tageskopfzeile außer dem Tag/Datum-Label in derselben (kleinen) Schriftgröße wie die
   Kontierungseinträge selbst (--habus-font-size-base, siehe css/habus_parameter.css) - auch die Knöpfe.
   !important, da .habus-btn (css/habus_buttons.css) sonst je nach Ladereihenfolge eine eigene Schriftgröße
   auf denselben Elementen setzen könnte. */
#kstSeite .kst-tag-header > *:not(.kst-tag-daylabel),
#kstSeite .kst-tag-header button { font-size: var(--habus-font-size-base) !important; }
#kstSeite .kst-tag-zeiten { color: var(--habus-grau-60); }
#kstSeite .kst-tag-header .kst-tag-spacer { flex: 1; }
#kstSeite .kst-tag-status.kst-status-ok       { color: var(--habus-gruen-700); font-weight: bold; }
#kstSeite .kst-tag-status.kst-status-mismatch { color: var(--habus-rot-680); font-weight: bold; }
#kstSeite .kst-zeilen-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
#kstSeite .kst-zeilen-table th, #kstSeite .kst-zeilen-table td { padding: 4px 8px; text-align: left; border-bottom: 1px solid var(--habus-primaer-hell-90); }
#kstSeite .kst-zeilen-table th { font-size: var(--habus-fs-12); color: var(--habus-grau-60); font-weight: normal; }
/* Feste Breiten für Kostenstelle/Std./Löschen, die Tätigkeits-Spalte bekommt den gesamten Rest (kein eigenes
   width!) - bei table-layout: fixed müssen die Breiten NICHT auf 100% aufsummiert werden, wenn eine Spalte
   unbemaßt bleibt: fehlten sie doch, fügt der Browser die Differenz als leere Phantom-Spalte ein. */
#kstSeite .kst-col-kostenstelle { width: 520px; }
#kstSeite .kst-col-zeit         { width: 160px; }
#kstSeite .kst-col-stunden      { width: 90px; }
#kstSeite .kst-col-aktionen { width: 70px; }
/* display:flex sitzt auf einem DIV innerhalb der Zelle statt direkt auf dem <td> - direkt auf <td> führte
   in Kombination mit table-layout: fixed wiederholt zu Umbrüchen in der Zeile. */
#kstSeite .kst-cell-flex { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; white-space: nowrap; width: 100%; }
/* Alle editierbaren Felder: gleiche Schriftgröße wie die normale Tabellenschrift (wie Tätigkeit) und
   weißer Hintergrund (wie Std.) - das globale input[type=text]{background:transparent} aus habus_style.css
   wird hier gezielt für diese Seite übersteuert. */
#kstSeite .kst-input-nummer,
#kstSeite .kst-input-von,
#kstSeite .kst-input-bis,
#kstSeite .kst-input-taetigkeit,
#kstSeite .kst-input-stunden {
    background: var(--habus-weiss);
    font-size: var(--habus-font-size-base, 14px);
}
#kstSeite .kst-input-nummer  { width: 45px; flex: none; text-align: left; }
#kstSeite .kst-input-von, #kstSeite .kst-input-bis { width: 62px; flex: none; text-align: center; }
#kstSeite .kst-zeit-trenner { flex: none; color: var(--habus-grau-45); }
#kstSeite .kst-input-stunden { width: 70px; text-align: center; }
#kstSeite .kst-input-taetigkeit { width: 100%; text-align: left; }
#kstSeite .kst-zeile-label { flex: 1 1 auto; min-width: 0; color: var(--habus-grau-75); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Buttons (Kostenstelle wählen, Speichern, Löschen) einheitlich gleich groß, unabhängig vom Glyphen/Emoji */
#kstSeite .habus-btn--icon { width: 26px; height: 26px; padding: 0; flex: none; display: inline-flex; align-items: center; justify-content: center; font-size: var(--habus-fs-13); line-height: 1; }
#kstSeite .kst-btn-addrow { margin-left: 8px; }
#kstSeite .kst-nachtrag-wrap { display: flex; gap: 8px; margin-left: 8px; }
#kstSeite .kst-btn-nachtragen { margin-left: 0; }
#kstSeite .kst-picker-panel {
    position: absolute; z-index: 50; background: var(--habus-weiss); border: 1px solid var(--habus-grau-20); border-radius: var(--habus-radius);
    box-shadow: 0 4px 14px var(--habus-schatten-15); padding: 10px; min-width: 260px; display: none;
}
#kstSeite .kst-picker-panel.open { display: block; }
#kstSeite .kst-picker-panel select { display: block; width: 100%; margin-bottom: 6px; }
#kstSeite .kst-picker-panel .kst-picker-close { float: right; }
#kstSeite .kst-month-summary { margin: 10px 0; font-weight: bold; }
/* Alles vor der Tagesliste (Filter-Titelzeile, Hinweistext, Monatssumme) bleibt beim Scrollen oben stehen.
   !important auf position/top, damit eine eventuell konkurrierende Regel mit gleicher Spezifität diese
   gezielte Überlagerung nicht verhindern kann. */
#kstSeite .kst-sticky-head {
    position: sticky !important;
    top: 0 !important;
    z-index: 5;
    background: var(--habus-color-bg-page, #fff);
    padding-bottom: 4px;
}

/* ==================================================================================================================== */
/* B: pages/kontierungen/kontierungs_matrix.php                                                                         */
/* ==================================================================================================================== */

#kontierungMatrix th, #kontierungMatrix td { text-align: center; white-space: nowrap; }
#kontierungMatrix input.kontierung-cell { width: 55px; text-align: center; background: var(--habus-weiss); }
/* Zellen mit bereits zugeordneten Stunden heben sich ab - egal ob beim Öffnen aus der DB geladen
   oder gerade erst (noch ungespeichert) eingetragen. */
#kontierungMatrix input.kontierung-cell.kontierung-cell-filled { background: var(--habus-akzent-hell-90); border-color: var(--habus-akzent-hell-35); font-weight: bold; }
#kontierungMatrix .kontierung-rest.kontierung-status-ok       { background: var(--habus-erfolg-hell-90); color: var(--habus-gruen-700); font-weight: bold; }
#kontierungMatrix .kontierung-rest.kontierung-status-mismatch { background: var(--habus-fehler-hell-90); color: var(--habus-rot-680); font-weight: bold; }
#kontierungMatrix tr.kontierung-row-gebucht td { font-weight: bold; }
#kontierungMatrix tr.kontierung-row-picker td  { text-align: left; }

/* Zeilenbezeichnung + Summenspalte bleiben beim horizontalen Scrollen stehen (sticky, feste Breite nötig
   damit die Summenspalte immer exakt rechts neben der Zeilenbezeichnung "andockt"). */
#kontierungMatrix th.kontierung-rowlabel,
#kontierungMatrix td.kontierung-rowlabel {
    position: sticky;
    left: 0;
    width: 190px;
    max-width: 190px;
    text-align: left;
}
#kontierungMatrix td.kontierung-rowlabel {
    display: flex;
    align-items: center;
    gap: 4px;
}
#kontierungMatrix .kontierung-rowlabel-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
#kontierungMatrix .kontierung-take-rest {
    flex: none;
    padding: 2px 5px;
    font-size: var(--habus-fs-12);
    line-height: 1;
}
#kontierungMatrix th.kontierung-summe,
#kontierungMatrix td.kontierung-summe {
    position: sticky;
    left: 170px;
    width: 75px;
    max-width: 75px;
    text-align: right;
    font-weight: bold;
    border-right: 2px solid var(--habus-color-table-border, #ccc);
}

/* Körperzellen: helles, sticky-typisches Grau, wie der Rest der Tabelle */
#kontierungMatrix td.kontierung-rowlabel,
#kontierungMatrix td.kontierung-summe {
    background: var(--habus-gedaempft-hell-95);
    z-index: 3;
}

/* Kopfzellen: gleicher grüner Standard-Hintergrund + weiße Schrift wie alle anderen Spaltenköpfe der Matrix
   (kommt aus .habus-table thead th), nur zusätzlich sticky nach links und mit höherem z-index, damit sie
   beim Scrollen über den anderen (nur nach oben sticky) Köpfen und den (nur nach links sticky) Körperzellen liegen. */
#kontierungMatrix thead th.kontierung-rowlabel,
#kontierungMatrix thead th.kontierung-summe {
    z-index: 15;
}

/* ======================================================================================================================== */
/* "Demnächst verfügbar" - Hinweis für noch nicht vorhandene Seiten (pages/content.php, default-Zweig)                    */
/* ======================================================================================================================== */
.habus-comingsoon {
    max-width: 520px;
    margin: 40px auto;
    padding: 36px 32px 28px;
    text-align: center;
    background: var(--habus-bg-white);
    border-radius: var(--habus-radius-16);
    border-top: 4px solid var(--habus-color-primary);
    box-shadow: var(--habus-overlay-shadow);
    animation: habusComingSoonFadeIn 0.4s ease-out;
}
.habus-comingsoon__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 84px;
    height: 84px;
    margin-bottom: 18px;
    border-radius: var(--habus-radius-999);
    background: var(--habus-primaer-hell-90);
    color: var(--habus-color-primary);
    font-size: var(--habus-fs-38);
}
.habus-comingsoon__icon i {
    animation: habusComingSoonFloat 2.4s ease-in-out infinite;
}
.habus-comingsoon__title {
    margin: 0 0 10px;
    color: var(--habus-color-primary);
    font-size: var(--habus-fs-26);
}
.habus-comingsoon__text {
    margin: 0 0 18px;
    color: var(--habus-color-text);
    font-size: var(--habus-fs-15);
    line-height: 1.5;
}
.habus-comingsoon__badge {
    display: inline-block;
    margin-bottom: 22px;
    padding: 4px 12px;
    border-radius: var(--habus-radius-999);
    background: var(--habus-petrol-hell-90);
    color: var(--habus-color-primary-light);
    font-family: var(--habus-font-mono);
    font-size: var(--habus-fs-12);
}
.habus-comingsoon__actions {
    margin-bottom: 20px;
}
.habus-comingsoon__hint {
    margin: 0;
    color: var(--habus-color-muted);
    font-size: var(--habus-fs-12);
}
.habus-comingsoon__hint a {
    color: var(--habus-color-primary-light);
}

@keyframes habusComingSoonFadeIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes habusComingSoonFloat {
    0%, 100% { transform: translateY(0) rotate(-8deg); }
    50%      { transform: translateY(-6px) rotate(-8deg); }
}
@media (prefers-reduced-motion: reduce) {
    .habus-comingsoon,
    .habus-comingsoon__icon i { animation: none; }
}
@media (max-width: 600px) {
    .habus-comingsoon { margin: 20px 16px; padding: 28px 20px 22px; }
}