/* =================================================================================================
   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: #fff;   /* wichtig, sonst scheint der Content durch */
  z-index: 10;        /* damit es über den Zellen liegt */
  box-shadow: 0 2px 0 rgba(0,0,0,0.08);
}

.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: 10px;
  border: 1px solid rgba(0,0,0,.15);
  width: 180px;
  max-width: 50vw;
}

.habus-table-filterrow td{
  background: rgba(0,0,0,.03);
}

.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: 8px;
  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: #ffffff;
    max-width: 150px;
    width: 100%;
    padding: 6px 8px;
    align-items: left;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: var(--habus-font-size-base);
    box-sizing: border-box;
}

#habus_table,
.habus-table {
    width: 100%;
    border-collapse: collapse;
    font-family: Arial, Helvetica, sans-serif;
    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: #fff;
    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: #eaeaea;
}

/* 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-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: white !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; }

/* Filter/Input-Zeilen */
#habus_table tr.filterline,
#habus_table tr.filterline th { background: #fffaca !important; color: #000; }

#habus_table tr.inputline,
#habus_table tr.inputline th { background: #dbffd9 !important; color: #000; }

/* 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: #fff;
    position: relative;
}

.buchungstag:hover,
#habus_table_buchungstag:hover {
    background: #eaeaea;
    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: #555;
}

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

.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: #fff;
    cursor: pointer;
}

.monat-navigation button:hover {
    background: #e0e8e0;
}

#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: #ffdddd; }

.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: 999px;
    background: var(--habus-color-primary, #555);
    color: #fff;
    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: 12px;
}

.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: 14px;
}

.urlaub-month-nav {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 10px;
}

.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: 10px;
    vertical-align: middle;
}

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

.month-cell-rowlabel { background: #fefefe; }

.fixed-col {
    background: #f9f9f9;
    white-space: nowrap;
    text-align: left;
}

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

.day-number { background: #fefefe; font-weight: bold; }

.day-cell { height: 18px; background: #fff; }

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

.habus-urlaubstabelle tbody tr:hover td { background: #eaeaea; }

/* 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: #fff;
}

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

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

.abs-tag.abs-autobooking {
    background: var(--habus-color-autobooking);
    color: #333;
    border: 1px dashed #b8860b;
}

/* 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); }