/* ============================================================
   HTWD Bibliothek – Corporate Design Extension für LibreBooking
   ------------------------------------------------------------
   Basiert auf dem Corporate Design QuickGuide der
   Hochschulbibliothek der HTW Dresden (Version #6).

   Einbindung in /var/www/librebooking/config/config.php:
       $conf['settings']['css.extension.file'] = '/css/htwd-librebooking.css';
   Datei ablegen unter:
       /var/www/librebooking/Web/css/htwd-librebooking.css

   Empfehlung: Theme-Basis 'orange' setzen, dann greift diese
   Extension am stimmigsten:
       $conf['settings']['css.theme'] = 'orange';
   ============================================================ */

/* ------------------------------------------------------------
   1. Markenfarben als CSS-Variablen (aus QuickGuide)
   ------------------------------------------------------------ */
:root {
    /* Markenfarben */
    --htwd-orange:        #ec660c;  /* HTWD Orange  (Primär) */
    --htwd-black:         #000000;
    --htwd-white:         #ffffff;

    /* Sekundärfarben */
    --htwd-light-orange:  #f7a600;
    --htwd-yellow:        #ffdd00;
    --htwd-light-green:   #cbd00f;
    --htwd-green:         #83be63;
    --htwd-purple:        #bc99c7;
    --htwd-blue:          #8baddb;
    --htwd-light-blue:    #a1d9f7;
    --htwd-turquoise:     #87ccd3;
    --htwd-beige:         #cebfad;
    --htwd-grey:          #bdc1d0;

    /* Abgeleitete Funktionswerte */
    --htwd-orange-hover:  #d25a0a;  /* etwas dunkler für Hover */
    --htwd-orange-active: #b94f09;
    --htwd-text:          #1a1a1a;
    --htwd-border:        #d9dce4;  /* helleres Grau für Rahmen */
    --htwd-bg-soft:       #f4f5f8;  /* sehr helles Grau für Flächen */
}

/* ------------------------------------------------------------
   2. Schriftart – Open Sans (Markenschrift)
   Besley wird als Akzent-/Headline-Serifenschrift definiert.
   Open Sans wird per Google Fonts geladen; falls der Server
    offline betrieben wird, Fonts lokal unter /css/fonts/
   ablegen und @font-face entsprechend anpassen.
   ------------------------------------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Besley:ital,wght@0,400..700;1,400..700&display=swap');

body,
input, select, textarea, button,
.form-control, .btn {
    font-family: 'Open Sans', 'Segoe UI', Arial, sans-serif !important;
    color: var(--htwd-text);
}

/* ------------------------------------------------------------
   3. Topbar / Banner – schwarz (HTWD)
   Trifft gezielt die oberste Kopfleiste (direktes Kind von body)
   ------------------------------------------------------------ */
body > div.d-flex.align-items-center.gap-2.m-2 {
    background-color: var(--htwd-black) !important;
    border-bottom: 3px solid var(--htwd-orange) !important;
    margin: 0 !important;          /* m-2 aufheben, randlos */
    padding: 12px 16px !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

/* Trennlinie zwischen Logo und Titel auf Schwarz sichtbar halten */
body > div.d-flex.align-items-center.gap-2.m-2 .border-start {
    border-left-color: rgba(255, 255, 255, 0.25) !important;
}

/* Titel-Link – link-primary gezielt überschreiben, im HTWD-Orange */
body > div.d-flex.align-items-center.gap-2.m-2 h5 a,
body > div.d-flex.align-items-center.gap-2.m-2 a.link-primary {
    color: var(--htwd-white) !important;
    text-decoration: none !important;
}

body > div.d-flex.align-items-center.gap-2.m-2 a.link-primary:hover {
    color: var(--htwd-light-orange) !important;
    text-decoration: none !important;
}

/* Falls weiterer Text (z. B. spans) im Banner steht – hell */
body > div.d-flex.align-items-center.gap-2.m-2 h5,
body > div.d-flex.align-items-center.gap-2.m-2 span:not(.link-primary) {
    color: var(--htwd-white) !important;
}

/* ------------------------------------------------------------
   3. Topbar / Navigation
   ------------------------------------------------------------ */
.navbar,
.navbar-default,
#header,
.app-header {
    background-color: var(--htwd-white) !important;
    border-bottom: 3px solid var(--htwd-orange) !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.navbar-default .navbar-nav > li > a,
.navbar-nav > li > a {
    color: var(--htwd-text) !important;
    font-weight: 600;
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus,
.navbar-nav > li > a:hover {
    color: var(--htwd-orange) !important;
    background-color: transparent !important;
}

.navbar-default .navbar-nav > .active > a,
.navbar-nav > .active > a {
    color: var(--htwd-orange) !important;
    border-bottom: 2px solid var(--htwd-orange);
    background-color: transparent !important;
}

/* Markenname/Brand in der Topbar */
.navbar-brand {
    font-weight: 700 !important;
    color: var(--htwd-text) !important;
}

/* ------------------------------------------------------------
   4. Buttons – Primäraktion in HTWD Orange
   ------------------------------------------------------------ */
.btn-primary,
button.primary,
input[type="submit"].primary,
.btn-success {
    background-color: var(--htwd-orange) !important;
    border-color: var(--htwd-orange) !important;
    color: var(--htwd-white) !important;
    font-weight: 600;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.btn-primary:hover,
.btn-primary:focus,
button.primary:hover,
.btn-success:hover {
    background-color: var(--htwd-orange-hover) !important;
    border-color: var(--htwd-orange-hover) !important;
    color: var(--htwd-white) !important;
}

.btn-primary:active,
.btn-primary.active {
    background-color: var(--htwd-orange-active) !important;
    border-color: var(--htwd-orange-active) !important;
}

/* Sekundär-Buttons dezent mit oranger Kontur */
.btn-default,
.btn-secondary {
    background-color: var(--htwd-white) !important;
    border-color: var(--htwd-border) !important;
    color: var(--htwd-text) !important;
}

.btn-default:hover,
.btn-secondary:hover {
    border-color: var(--htwd-orange) !important;
    color: var(--htwd-orange) !important;
}

/* ------------------------------------------------------------
   5. Links
   ------------------------------------------------------------ */
a,
a:visited {
    color: var(--htwd-orange);
}

a:hover,
a:focus {
    color: var(--htwd-orange-hover);
    text-decoration: underline;
}

/* ------------------------------------------------------------
   6. Login-Seite
   ------------------------------------------------------------ */
.login-box,
.loginContainer,
#loginBox {
    border-top: 4px solid var(--htwd-orange);
    border-radius: 4px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.10);
}

.login-logo,
.loginLogo {
    color: var(--htwd-orange);
    font-weight: 700;
}

/* ------------------------------------------------------------
   7. Überschriften / Seitentitel
   ------------------------------------------------------------ */
h1, h2, h3,
.page-header,
.panel-title {
    color: var(--htwd-text);
}

h1, h2 {
    font-family: 'Besley', 'Open Sans', Georgia, serif;
    font-weight: 600;
}

.page-header {
    border-bottom: 2px solid var(--htwd-orange);
    padding-bottom: 8px;
}

/* ------------------------------------------------------------
   8. Panels / Kacheln (Dashboard)
   ------------------------------------------------------------ */
.panel-heading,
.dashboard-widget-header,
.widget-header {
    background-color: var(--htwd-orange) !important;
    color: var(--htwd-white) !important;
    border-color: var(--htwd-orange) !important;
}

.panel-heading a,
.widget-header a {
    color: var(--htwd-white) !important;
}

.panel,
.dashboard-widget {
    border-color: var(--htwd-border) !important;
    border-radius: 4px;
}

/* ------------------------------------------------------------
   9. Tabellen
   ------------------------------------------------------------ */
.table > thead > tr > th,
table.dataTable thead th {
    background-color: var(--htwd-bg-soft);
    color: var(--htwd-text);
    border-bottom: 2px solid var(--htwd-orange) !important;
    font-weight: 600;
}

.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: var(--htwd-bg-soft);
}

.table-hover > tbody > tr:hover {
    background-color: rgba(236, 102, 12, 0.06);
}

/* ------------------------------------------------------------
   10. Kalender / Schedule – Reservierungsblöcke
   ------------------------------------------------------------ */
.reservwith,
.reserved,
.reservation-slot.reserved {
    background-color: var(--htwd-orange) !important;
    border-color: var(--htwd-orange-active) !important;
    color: var(--htwd-white) !important;
}

.reservable:hover,
.slot.reservable:hover {
    background-color: var(--htwd-light-orange) !important;
    cursor: pointer;
}

.pending,
.reservation-slot.pending {
    background-color: var(--htwd-yellow) !important;
    color: var(--htwd-text) !important;
    border-color: var(--htwd-light-orange) !important;
}

.unreservable {
    background-color: var(--htwd-grey) !important;
    color: #555 !important;
}

/* Heutiger Tag im Kalender hervorheben */
.today,
.fc-today,
td.today {
    background-color: rgba(236, 102, 12, 0.08) !important;
}

/* ------------------------------------------------------------
   11. Formularelemente – Fokuszustand
   ------------------------------------------------------------ */
.form-control:focus,
input:focus,
select:focus,
textarea:focus {
    border-color: var(--htwd-orange) !important;
    box-shadow: 0 0 0 2px rgba(236, 102, 12, 0.18) !important;
    outline: none;
}

/* ------------------------------------------------------------
   12. Hinweis-/Statusboxen (Alerts)
   ------------------------------------------------------------ */
.alert-success {
    background-color: rgba(131, 190, 99, 0.18);
    border-color: var(--htwd-green);
    color: #2f5520;
}

.alert-info {
    background-color: rgba(139, 173, 219, 0.18);
    border-color: var(--htwd-blue);
    color: #2c4a72;
}

.alert-warning {
    background-color: rgba(247, 166, 0, 0.18);
    border-color: var(--htwd-light-orange);
    color: #7a5200;
}

.alert-danger {
    background-color: rgba(236, 102, 12, 0.15);
    border-color: var(--htwd-orange);
    color: #8a3c06;
}

/* ------------------------------------------------------------
   13. Badges / Labels
   ------------------------------------------------------------ */
.label-primary,
.badge-primary,
.badge {
    background-color: var(--htwd-orange) !important;
    color: var(--htwd-white) !important;
}

/* ------------------------------------------------------------
   14. Paginierung & aktive Elemente
   ------------------------------------------------------------ */
.pagination > .active > a,
.pagination > .active > span,
.nav-pills > li.active > a {
    background-color: var(--htwd-orange) !important;
    border-color: var(--htwd-orange) !important;
    color: var(--htwd-white) !important;
}

.pagination > li > a {
    color: var(--htwd-orange);
}

/* ------------------------------------------------------------
   15. Fortschritts-/Ladebalken
   ------------------------------------------------------------ */
.progress-bar {
    background-color: var(--htwd-orange) !important;
}

/* ------------------------------------------------------------
   16. Footer
   ------------------------------------------------------------ */
#footer,
.app-footer,
.footer {
    border-top: 1px solid var(--htwd-border);
    color: #6a6f7d;
    font-size: 0.85em;
}

/* ------------------------------------------------------------
   17. Barrierefreiheit – Fokus klar sichtbar machen
   ------------------------------------------------------------ */
*:focus-visible {
    outline: 2px solid var(--htwd-orange);
    outline-offset: 2px;
}