/* ??????????????????????????????????????????????????????????????????????????????
   1) Farb-Variablen (CSS-Custom-Properties) in .bookyt_kalender
   ??????????????????????????????????????????????????????????????????????????????? */
.bookyt_kalender {
    /* Grundfarben */
    --bp-color-text:                    #333333;
    --bp-color-bg:                      #ffffff;
    --bp-color-bg-alt:                  #f5f5f5;
    --bp-color-bg-alt-2:                #e8e8e8;
    --bp-color-border:                  #cccccc;
    /* Termin-Farbe */
    --bp-color-appointment-bg:          #005a9e;
    --bp-color-appointment-text:        #ffffff;
    /* Hover */
    --bp-color-hover:                   #e0e0e0;
    /* Überschriften */
    --bp-color-category-heading-bg:     #dddddd;
    /* Resource-Spalte (linke Spalte) */
    --bp-color-resource-bg:             #fafafa;
}

/* ??????????????????????????????????????????????????????????????????????????????
   2) Alle bestehenden Styles, nun mit CSS-Variablen belegt
   ??????????????????????????????????????????????????????????????????????????????? */

/* Textfarbe und allgemeiner Hintergrund */
.bookyt_kalender {
    color: var(--bp-color-text);
    background: var(--bp-color-bg);
}

/* Tabs-Navigation */
.bookyt_kalender .ui-tabs .ui-tabs-nav {
    padding: 0;
    margin: 0;
    background: var(--bp-color-bg);
    border: none;
    border-bottom: 1px solid var(--bp-color-border);
}

/* Einzelne Tab-Links */
.bookyt_kalender .ui-tabs .ui-tabs-nav li a {
    display: block;
    padding: 10px 20px;
    font-size: 1em;
    text-decoration: none;
    color: var(--bp-color-text);
    background: var(--bp-color-bg-alt);
    border-right: 1px solid var(--bp-color-border);
    outline: none;
}

/* Aktiver Tab */
.bookyt_kalender .ui-tabs .ui-tabs-nav li.ui-tabs-active a {
    background: var(--bp-color-bg);
    border: none;
    color: var(--bp-color-text);
    outline: none;
}

/* Tabs-Panel (Inhalt) */
.bookyt_kalender .ui-tabs .ui-tabs-panel {
    border: none;
    padding: 10px 0; /* oben und unten jeweils 10px */
    background: var(--bp-color-bg);
}

/* Steuerungsknöpfe, Select und Date?Picker */
.bookyt_kalender .controls {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px;
    align-items: center;
}

.bookyt_kalender .controls button,
.bookyt_kalender .controls select,
.bookyt_kalender .controls input[type="date"] {
    padding: 8px 12px;
    font-size: 1em;
    height: 40px;
    line-height: 24px;
    border: 1px solid var(--bp-color-border);
    border-radius: 3px;
    background: var(--bp-color-bg-alt);
    color: var(--bp-color-text);
    box-sizing: border-box;
}

.bookyt_kalender .controls button:hover,
.bookyt_kalender .controls select:hover,
.bookyt_kalender .controls input[type="date"]:hover {
    background: var(--bp-color-hover);
}

/* Container für den Kalender (horizontal scrollbar) */
.bookyt_kalender #calendar,
.bookyt_kalender .calendar-container {
    overflow-x: auto;
    padding: 10px;
}

/* ????????????????????????????????????????????????????????????????????????????
   Tabellen-Stil
   ???????????????????????????????????????????????????????????????????????????? */
.bookyt_kalender table {
    border-collapse: collapse;
    margin-top: 10px;
    table-layout: auto;
    width: 100%;
}

.bookyt_kalender th,
.bookyt_kalender td {
    border: 1px solid var(--bp-color-border);
    padding: 5px;
    word-wrap: break-word;
    font-size: 0.9em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
    background: var(--bp-color-bg);
    color: var(--bp-color-text);
}

/* Kopfzeilen (z. B. die kleinen Tageszahlen) */
.bookyt_kalender th.small-header {
    background: var(--bp-color-bg-alt-2);
    color: var(--bp-color-text);
    font-weight: normal;
    text-align: center;
}

/* Kategorie-Überschrift (ganze Zeile) */
.bookyt_kalender .category-heading {
    background: var(--bp-color-category-heading-bg);
    font-weight: normal;
    text-align: left;
    color: var(--bp-color-text);
}

/* Ressourcenspalte (erste Spalte in jeder Zeile) */
.bookyt_kalender .resource {
    background: var(--bp-color-resource-bg);
    font-weight: bold;
    min-width: 50px;
    max-width: 60px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Abwechselnde Zeilenfarbe (z. B. für extra Lesbarkeit) */
.bookyt_kalender tr:nth-child(even) td:not(.resource):not(.appointment) {
    background: var(--bp-color-bg-alt);
}

/* Terminzelle (appointment) */
.bookyt_kalender .appointment {
    background: var(--bp-color-appointment-bg);
    color: var(--bp-color-appointment-text);
    font-size: 0.8em;
    padding: 2px;
    margin: 1px;
    text-align: left;
    border-radius: 2px;       /* leicht abgerundet wirkt moderner */
}

/* Hover-Effekt auf leeren Terminzellen (kein .appointment) */
.bookyt_kalender td[data-resource]:not(.appointment):hover {
    background: var(--bp-color-hover);
}

/* Responsive Schriftgrößen und Abstände */
@media (max-width: 768px) {
    .bookyt_kalender th,
    .bookyt_kalender td {
        font-size: 0.75em;
        padding: 4px;
    }
    .bookyt_kalender .controls button,
    .bookyt_kalender .controls select,
    .bookyt_kalender .controls input[type="date"] {
        height: 36px;
        font-size: 0.9em;
        padding: 6px 10px;
    }
    .bookyt_kalender .resource {
        max-width: 150px;
    }
}

/* Feinjustierung der aktiven/hover-Klassen bei Tabs */
.bookyt_kalender .ui-tabs .ui-tabs-nav li.ui-tabs-active,
.bookyt_kalender .ui-tabs .ui-tabs-nav li.ui-tabs-hover {
    margin-bottom: unset;
    padding-bottom: unset;
}