﻿@import 'biss-styling.css';

@font-face {
    font-family: 'StreamLineIconsLight';
    src: url('../fonts/streamline/fonts/StreamLineIconsLight.ttf') format('truetype'), url('../fonts/streamline/fonts/StreamLineIconsLight.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: dmsans;
    src: url(../fonts/DMSans.ttf);
}


:root {
    --rz-panel-menu-item-2nd-level-background-color: transparent !important;
    --rz-panel-menu-item-2nd-level-offset: 16px !important;
    /* Light-Theme: Panel-Menu Items - alle Level */
    --rz-panel-menu-item-background-color: white !important;
    --rz-panel-menu-item-hover-background-color: #f5f5f5 !important;
    --rz-panel-menu-item-active-background-color: white !important;
    --rz-panel-menu-item-color: var(--ColorBase600) !important;
    --rz-panel-menu-item-hover-color: var(--ColorBase700) !important;
    --rz-panel-menu-item-active-color: var(--ColorBase600) !important;
    /* 2nd Level Items */
    --rz-panel-menu-item-2nd-level-background-color: white !important;
    --rz-panel-menu-item-2nd-level-hover-background-color: #f5f5f5 !important;
    --rz-panel-menu-item-2nd-level-active-background-color: white !important;
    /* 3rd Level Items (falls vorhanden) */
    --rz-panel-menu-item-3rd-level-background-color: white !important;
    --rz-panel-menu-item-3rd-level-hover-background-color: #f5f5f5 !important;
    --rz-selectbar-selected-color: var(--ColorPrimary) !important;
    --rz-selectbar-border-radius: 12px !important;
    --rz-grid-foot-cell-color: var(--ColorTextLight) !important;
    /* Status-Badge-Farben, gemeinsam genutzt von BxAttendanceGantt und BxVwtStatusBadge
       (Urlaub, Zeitausgleich, Feiertag, Wochenende) – Single Source of Truth für beide
       Komponenten, damit Light/Dark an einer Stelle gepflegt werden. */
    --status-holiday-bg: #f7c3a1;
    --status-holiday-icon: #a54f10;
    --status-comp-time-bg: #a0ccf8;
    --status-comp-time-icon: #1a5f9e;
    --status-company-holiday-bg: #b380ff;
    --status-company-holiday-icon: #4c1d95;
    /* Wochenende teilt sich den Farbton mit "Kein Dienstvertrag" - an beiden Tagen gibt es nichts zu
       buchen. Die Werte zeigen per var() auf die No-Contract-Variablen, damit Light und Dark automatisch
       gleich bleiben: der .dark-Block überschreibt nur noch No-Contract, das Wochenende folgt.
       --status-weekend-fg ist die Schriftfarbe auf diesem dunklen Hintergrund (DatePicker, Gantt-Kopf). */
    --status-weekend-bg: var(--status-no-contract-bg);
    --status-weekend-icon: var(--status-no-contract-icon);
    --status-weekend-fg: var(--status-no-contract-fg);
    /* Die Anwesenheitsübersicht (BxAttendanceGantt) behält bewusst den alten hellen Wochenend-Ton:
       dort ist das Wochenende nur eine Spaltenmarkierung und soll nicht dominieren. */
    --status-gantt-weekend-bg: #f1f3f6;
    /* Buchungsstatus-Farben, genutzt von BxVwtStatusBadge (Legende + Tabellenzeile) und
       vom DatePicker in ViewTimeBookings, der die Tage in denselben Farben hinterlegt. */
    --status-booked-full-bg: #a9dcbc;
    --status-booked-full-icon: #276a44;
    --status-booked-partial-bg: #f0cf72;
    --status-booked-partial-icon: #6b4e05;
    --status-not-booked-bg: #e06666;
    --status-not-booked-icon: #5c1010;
    --status-open-bg: #dde1e6;
    --status-open-icon: #55606b;
    /* Homeoffice-Antrag: DatePicker in HomeOfficeForm - Tage außerhalb des
       Buchungszeitraums bzw. bereits gebuchte Homeoffice-Tage. */
    --status-home-office-bg: #ff80b3;
    --status-home-office-icon: #9d174d;
    /* Bewusst kühles Blaugrau statt eines warmen Grautons, damit sich der Tag klar von
       Urlaub (Pfirsich) und Feiertag (Violett) abhebt. */
    --status-out-of-range-bg: #c3cbd9;
    /* Tag ohne Dienstvertrag - gedecktes Grau, weil dort weder gebucht noch etwas angesehen werden kann.
       Das Wochenende zeigt oben auf diese Werte, beide Tage sehen daher gleich aus.
       --status-no-contract-fg ist die Schriftfarbe für die Tageszelle im DatePicker. */
    --status-no-contract-bg: #6b7280;
    --status-no-contract-icon: #ffffff;
    --status-no-contract-fg: #e5e7eb;
    /* Hintergrund eines fixierten Spaltenkopfes in scrollenden Grids. StyBase setzt den Grid-Header
       bewusst auf transparent (--rz-grid-header-background-color), damit die Karte darunter die
       Fläche liefert - ein stehender Kopf würde dadurch die durchscrollenden Zeilen zeigen.
       Der Wert entspricht der Kartenfarbe (.rz-card in StyBase.min.css). */
    --vwt-grid-sticky-header-bg: var(--ColorBase50);
    --rz-border-disabled: var(--rz-border-width) solid var(--rz-base-800) !important;
}

    :root .dark {
        --rz-grid-foot-cell-color: var(--ColorTextDark) !important;
        --status-holiday-bg: #4a3a1a;
        --status-holiday-icon: #e0b768;
        --status-comp-time-bg: #1d5a8a;
        --status-comp-time-icon: #cfe6f9;
        --status-company-holiday-bg: #6b3fb0;
        --status-company-holiday-icon: #e0ccff;
        --status-booked-full-bg: #2e6b48;
        --status-booked-full-icon: #a0eec0;
        --status-booked-partial-bg: #9c7815;
        --status-booked-partial-icon: #f5dc8a;
        --status-not-booked-bg: #a34a4a;
        --status-not-booked-icon: #f7bcb8;
        --status-open-bg: #414a53;
        --status-open-icon: #c6ced6;
        --status-home-office-bg: #b03f6b;
        --status-home-office-icon: #ffcce0;
        --status-out-of-range-bg: #38414d;
        /* Dark-Theme: Panel-Menu Items - alle Level */
        --status-no-contract-bg: #3a3f46;
        --status-no-contract-icon: #f3f4f6;
        --status-gantt-weekend-bg: #5f6061;
        --status-no-contract-fg: #b9c0c8;
        /* Kartenfarbe im Dark-Theme (.dark .rz-card in StyBase.min.css). */
        --vwt-grid-sticky-header-bg: var(--ColorBase700);
        --rz-panel-menu-item-background-color: var(--rz-base-900, #0d0d0d) !important;
        --rz-panel-menu-item-hover-background-color: var(--rz-base-800, #1a1a1a) !important;
        --rz-panel-menu-item-active-background-color: var(--rz-base-900, #0d0d0d) !important;
        --rz-panel-menu-item-color: var(--ColorTextDark) !important;
        --rz-panel-menu-item-hover-color: #ffffff !important;
        --rz-panel-menu-item-active-color: var(--ColorTextDark) !important;
        /* 2nd Level Items */
        --rz-panel-menu-item-2nd-level-background-color: var(--rz-base-900, #0d0d0d) !important;
        --rz-panel-menu-item-2nd-level-hover-background-color: var(--rz-base-800, #1a1a1a) !important;
        --rz-panel-menu-item-2nd-level-active-background-color: var(--rz-base-900, #0d0d0d) !important;
        /* 3rd Level Items (falls vorhanden) */
        --rz-panel-menu-item-3rd-level-background-color: var(--rz-base-900, #0d0d0d) !important;
        --rz-panel-menu-item-3rd-level-hover-background-color: var(--rz-base-800, #1a1a1a) !important;
        --rz-dropdown-item-selected-color: var(--ColorTextDark) !important;
    }

html, body {
    font-family: var(--DefaultFontFamily);
}

body {
    background: white !important;
}

/* Sidebar-Menü: Light-Theme hell, Dark-Theme dunkel via CSS-Variablen */
:root {
    --rz-panel-menu-background-color: white !important;
    --rz-panel-menu-item-background-color: white !important;
}

:root.dark {
    --rz-panel-menu-background-color: var(--rz-base-900, #0d0d0d) !important;
    --rz-panel-menu-item-background-color: var(--rz-base-900, #0d0d0d) !important;
}

/* Sidebar-Menü im Dark Mode dunkelgrau */
.dark .rz-sidebar,
.dark .rz-sidebar .rz-panel-menu,
.dark .rz-sidebar .rz-navigation-menu {
    background-color: var(--ColorBase800) !important;
}

.sl-icon {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'StreamLineIconsLight' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    font-size: 18px;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.rz-dialog {
    max-width: 850px !important;
    width: 100% !important;
}


#bx-filter-container-content .rz-tabview-panel{
    padding-bottom:0 !important;
}

.rz-dialog.bisspdfviewer{
    max-width: 1400px !important;
}

/* Zeilenumbrüche im Filter-Tooltip (BxFilterContainer) anzeigen. */
.rz-tooltip-content {
    white-space: pre-line;
}

.rz-button.bx-button {
    border-radius: var(--corner-radius-default) !important;
    border: 1px solid var(--ColorBase400) !important;
    margin: 0 !important;
    box-shadow: none !important;
    cursor: pointer !important;
}

.rz-button-md {
    font-size: var(--font-size-default) !important;
    padding: var(--padding-default) !important;
}

.rz-button-lg {
    padding: 16px !important;
}

.rz-button-xs {
    padding: 4px !important;
}

.rz-button-sm {
    padding: 8px !important;
}

.rz-header img,
.employee-img {
    object-fit: cover !important;
    object-position: top !important;
}

.rz-header img {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
}

.employee-img {
    width: 144px !important;
    height: 144px !important;
    border-radius: 8px !important;
}

.rz-button.bx-button {
    border-radius: var(--corner-radius-default) !important;
    border: 1px solid var(--ColorBase400) !important;
    margin: 0 !important;
    box-shadow: none !important;
    cursor: pointer !important;
}

.rz-button-md {
    font-size: var(--font-size-default) !important;
    padding: var(--padding-default) !important;
}

.rz-button-lg {
    padding: 16px !important;
}

.rz-button-xs {
    padding: 4px !important;
}

.rz-button-sm {
    padding: 8px !important;
}

.dark .rz-listbox-list-wrapper .rz-listbox-item {
    color: var(--ColorTextDark) !important;
}

.rz-tabview-left > .rz-tabview-nav .rz-tabview-selected {
    border-left-color: var(--ColorPrimary) !important;
    border-left-width: 4px !important;
}

.time-booking-stack {
    padding: 4px 8px;
    border-bottom: 1px solid var(--rz-base-300);
    background-color: var(--ColorBase400);
    position: sticky;
    top: 0;
    z-index: 1;
}

.dark .time-booking-stack{
    background-color: var(--ColorBase800);
}