/* ==========================================================================
   GRUNDEINSTELLUNGEN
   ========================================================================== */

/* Timer Badge Anpassungen */
:root {
    --timer-badge-x-offset: -165%; /* horizontale Verschiebung */
    --timer-badge-y-offset: +30%; /* vertikale Verschiebung */
    /* Sidebar Variablen */ 
    --sidebar-width-expanded: 280px;
    --sidebar-width-collapsed: 4.5rem;
    --sidebar-transition: 0.3s ease-in-out;
    --topbar-height: 56px; /* Höhe der Topbar */
    --bs-body-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans";
}

/* Timer-Badge Styling */
.timer-badge:not(.d-none) {
    transform: translate(var(--timer-badge-x-offset), var(--timer-badge-y-offset)) !important;
    font-size: 0.65rem !important;
    padding: 0.2rem !important;
    min-width: 1.0rem !important;
    height: 1.0rem !important;
    line-height: 0.8 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius:50% !important;
}

/* Badge anpassen für mehrstellige Zahlen */
.timer-badge:has(.timer-count:not([data-count="1"])) {
    border-radius: 0.8rem !important;
    padding: 0.2rem 0.35rem !important;
}

/* Nur das Stoppuhr-Icon in der Topbar vergrößern */
.topbar-stopwatch {
    font-size: 1.5rem !important;
}

/* ==========================================================================
   LAYOUT & GRUNDSTRUKTUR
   ========================================================================== */

html, body {
    overflow-x: hidden;
    max-width: 100%;
    width: 100%;
}

.container-fluid {
    max-width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    overflow-x: hidden;
}

/* Tabellen und andere breite Elemente responsiv machen */
.table-responsive,
table,
img,
.card,
.row {
    max-width: 100%;
}

/* Tabellen und Bilder responsive machen */
.table-responsive {
    overflow-x: auto;
    width: 100% !important;
    -webkit-overflow-scrolling: touch;
}

table {
    width: 100% !important;
}

img {
    height: auto;
    max-width: 100%;
}

/* Logo-Bilder in der Sidebar explizit behandeln */
.theme-logo {
    height: 32px !important;
    width: auto !important;
    max-height: 32px !important;
    max-width: none !important;
    object-fit: contain !important;
}

/* Spezifische Größe für das Logo auf der Login-Seite */
.login-logo {
    height: 150px !important;
    max-height: 150px !important;
    width: auto !important;
    max-width: none !important;
    object-fit: contain !important;
}

/* ==========================================================================
   TABELLEN DARK MODE ANPASSUNGEN 
   ========================================================================== */

/* Anpassung der Tabellenfarben für Dark Mode */
/* Warning (Gelb) */
[data-bs-theme="dark"] .table-warning,
[data-bs-theme="dark"] .table-warning > th,
[data-bs-theme="dark"] .table-warning > td {
    background-color: #664d03 !important;
    color: #fff !important;
}

[data-bs-theme="dark"] .table-warning:hover,
[data-bs-theme="dark"] .table-warning:hover > td {
    background-color: #513e03 !important;
    color: #fff !important;
}

/* Danger (Rot) */
[data-bs-theme="dark"] .table-danger,
[data-bs-theme="dark"] .table-danger > th,
[data-bs-theme="dark"] .table-danger > td {
    background-color: #842029 !important;
    color: #fff !important;
}

[data-bs-theme="dark"] .table-danger:hover,
[data-bs-theme="dark"] .table-danger:hover > td {
    background-color: #6a1a21 !important;
    color: #fff !important;
}

/* Success (Grün) */
[data-bs-theme="dark"] .table-success,
[data-bs-theme="dark"] .table-success > th,
[data-bs-theme="dark"] .table-success > td {
    background-color: #0f5132 !important;
    color: #fff !important;
}

[data-bs-theme="dark"] .table-success:hover,
[data-bs-theme="dark"] .table-success:hover > td {
    background-color: #0c4128 !important;
    color: #fff !important;
}

/* Info (Blau) */
[data-bs-theme="dark"] .table-info,
[data-bs-theme="dark"] .table-info > th,
[data-bs-theme="dark"] .table-info > td {
    background-color: #055160 !important;
    color: #fff !important;
}

[data-bs-theme="dark"] .table-info:hover,
[data-bs-theme="dark"] .table-info:hover > td {
    background-color: #04414d !important;
    color: #fff !important;
}

/* Header Toolbar für Theme und Sprachumschaltung */
/* WICHTIG: Aktuelle Version - 1.0.2 */
.fixed-top {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: 0 !important;
    z-index: 1030 !important;
}

.header-toolbar {
    height: var(--topbar-height);
    width: 100% !important;
    padding: 0;
    transition: none;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* Platz für die fixierte Toolbar schaffen im Wrapper */
.d-flex.flex-row {
    padding-top: var(--topbar-height);
}

/* Platz für die fixierte Toolbar entfernt, da wir jetzt den Wrapper nutzen */
main .container-fluid {
    padding-top: 0;
}

/* Flexbox-Fix für den Hauptinhalt, um "Quetschen" zu verhindern */
.main-content {
    min-width: 0;
    overflow-x: auto; /* Stellt sicher, dass breiter Inhalt scrollbar ist */
}

/* Korrigierte Positionierung für Dropdowns in der Header-Toolbar */
.header-toolbar .dropdown,
.header-toolbar .language-selector {
    position: relative;
}

.header-toolbar .dropdown-menu {
    position: absolute;
    right: 0;
    left: auto;
    min-width: max-content;
}

/* Outline für Sprachumschalter und Theme-Toggler in der Topbar entfernen */
.header-toolbar .language-selector .btn,
.header-toolbar .theme-toggler .btn {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Flaggen-Icon optimieren */
.flag-icon {
    width: 20px;
    height: 15px;
    object-fit: cover;
    border-radius: 2px;
    display: inline-block;
    vertical-align: middle;
}

/* Theme-Toggle Icon */


.theme-toggler .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Dropdown-Items mit gleich grosse Flags */
.dropdown-item .flag-icon {
    margin-right: 8px;
}

/* Responsive Anpassungen für Header-Toolbar */
@media (max-width: 767.98px) {
    .header-toolbar {
        position: sticky;
    }
}

/* ==========================================================================
   TABS & FORMULARE
   ========================================================================== */

/* Tab Styles */
.supplier-form .nav-tabs {
    border-bottom: 1px solid #dee2e6 !important;
}

/* Light Theme Tabs */
body:not([data-bs-theme="dark"]) .supplier-form .nav-tabs .nav-link {
    color: #000 !important;
    background-color: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 0.375rem 0.375rem 0 0 !important;
    margin-bottom: -1px !important;
    padding: 0.5rem 1rem !important;
    font-weight: 500 !important;
}

body:not([data-bs-theme="dark"]) .supplier-form .nav-tabs .nav-link:hover {
    color: #000 !important;
    background-color: rgba(13, 110, 253, 0.1) !important;
    border-color: #e9ecef #e9ecef #dee2e6 !important;
}

body:not([data-bs-theme="dark"]) .supplier-form .nav-tabs .nav-link.active {
    color: #fff !important;
    background-color: #0d6efd !important;
    border-color: #0d6efd !important;
    font-weight: 700 !important;
}

/* Dark Theme Tabs */
[data-bs-theme="dark"] .supplier-form .nav-tabs {
    border-bottom-color: #495057 !important;
}

/* Grundstyle für alle Nav-Links im dunklen Theme */
[data-bs-theme="dark"] .supplier-form .nav-tabs .nav-link,
[data-bs-theme="dark"] .supplier-form .nav-tabs .nav-link:hover,
[data-bs-theme="dark"] .supplier-form .nav-tabs .nav-link:focus,
[data-bs-theme="dark"] .supplier-form .nav-tabs .nav-link.active {
    color: #fff !important;
    font-weight: 500 !important;
}

/* Spezifische Styles für verschiedene Zustände */
[data-bs-theme="dark"] .supplier-form .nav-tabs .nav-link {
    background-color: transparent !important;
    border-color: transparent !important;
}

[data-bs-theme="dark"] .supplier-form .nav-tabs .nav-link:hover {
    background-color: rgba(13, 110, 253, 0.2) !important;
    border-color: #495057 !important;
}

[data-bs-theme="dark"] .supplier-form .nav-tabs .nav-link.active {
    background-color: #0d6efd !important;
    border-color: #0d6efd !important;
    font-weight: 700 !important;
}

[data-bs-theme="dark"] .nav-tabs .nav-link {
    color: var(--bs-nav-tabs-link-active-color);
    background-color: var(--bs-nav-tabs-link-active-bg);
}

/* ==========================================================================
   SUCHE & NAVIGATIONS-ELEMENTE
   ========================================================================== */

.search-container {
    max-width: 500px;
    width: 100%;
    transition: all 0.3s ease;
}

/* Allgemeine Icon-Stile */
.btn .bi {
    font-size: 1.2rem;
}

/* ==========================================================================
   BUTTON MOBILE ANPASSUNGEN
   ========================================================================== */

/* Standard-Margin für Icons in Buttons mit Text */
.btn .bi {
    margin-right: 0.5rem;
}

/* Spezifische Regeln für Buttons ohne Text */
/* 1. Explizite Klasse für Icon-Only Buttons */
.btn-icon-only .bi {
    margin-right: 0 !important;
}

/* 2. Aktions-Buttons in Tabellen (typischerweise nur Icons) */
.table .btn .bi,
.datatable .btn .bi,
.btn-group .btn-sm .bi {
    margin-right: 0 !important;
}

/* 3. Buttons mit title-Attribut aber ohne Text-Klasse (typisch für Icon-Only-Buttons mit Tooltip) */
.btn[title]:not(.has-text) .bi {
    margin-right: 0 !important;
}

/* Klasse für Buttons, die nur ein Icon enthalten sollen */
.btn-icon-only {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 0.375rem;
}

/* Hilfsklasse, um anzuzeigen, dass ein Button Text enthält */
.has-text .bi {
    margin-right: 0.5rem !important;
}

/* In der mobilen Ansicht nur Icons anzeigen, Text ausblenden */
@media (max-width: 767.98px) {
    .btn .btn-text {
        display: none;
    }
    
    /* Sicherstellen, dass Icons immer angezeigt werden */
    .btn .bi {
        margin: 0;
    }
    
    /* Buttons mit fester Breite für bessere Darstellung */
    .btn {
        padding: 0.375rem 0.5rem;
        min-width: 38px;
        display: inline-flex;
        justify-content: center;
        align-items: center;
    }
}

/* ==========================================================================
   BENUTZERPROFILE & BILDER
   ========================================================================== */

/* Profilbild und User-Bereich Styles */
.profile-pic {
    border-radius: 50%;
    transition: transform 0.3s ease;
    object-fit: cover;
}

.profile-pic:hover {
    transform: scale(1.05);
}

/* Benutzerbereich in der Sidebar */
.user-info {
    transition: opacity 0.3s ease, max-width 0.3s ease;
    max-width: 250px;
    overflow: hidden;
    white-space: nowrap;
}

/* Wenn Sidebar eingeklappt ist, Benutzerinfo ausblenden */
.sidebar-collapsed .user-info {
    opacity: 0;
    max-width: 0;
    display: none;
}

/* Sicherstellen, dass das User-Icon/Avatar korrekt angezeigt wird */
.user-avatar,
.user-icon {
    flex-shrink: 0;
    position: relative;
    border-radius: 50%; /* Macht das Bild kreisrund */
    transition: transform 0.3s ease;
    object-fit: cover;
    aspect-ratio: 1/1; /* Erzwingt ein quadratisches Verhältnis */
    overflow: hidden; /* Versteckt Inhalte außerhalb des Kreises */
}

.user-avatar:hover {
    transform: scale(1.05);
}

/* Benutzerdropdown im eingeklappten Zustand */
.user-dropdown {
    position: relative;
    outline: none !important;
}

/* Entferne blauen Fokus-Rahmen */
.user-dropdown:focus,
.user-dropdown:active {
    box-shadow: none !important;
    outline: none !important;
}

/* Entferne Outline für alle Dropdown-Toggles */
.dropdown-toggle:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* Hover-Effekt für Löschbutton */
.btn-profile-delete:hover {
    transform: scale(1.1);
}

/* Flaggen-Icons im Sprachumschalter */
.flag-icon {
    width: 24px;
    height: 16px;
    object-fit: contain;
    vertical-align: middle;
    display: inline-block;
}

/* Zentrale Avatar-Regel: Avatar IMMER exakt 40x40px, unabhängig vom Kontext */
.user-avatar {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    max-width: 40px !important;
    max-height: 40px !important;
    object-fit: cover;
    aspect-ratio: 1/1;
    display: block;
}


.user-icon {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    max-width: 40px !important;
    max-height: 40px !important;
    font-size: 40px !important;
    line-height: 40px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: none !important;
    color: #7da2d9 !important; /* oder passend zum Theme */
}



/* Status-Badge: Nur reines Icon, kein weißer Kreis/Hintergrund/Umrandung */
.user-status-badge {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    width: auto !important;
    height: auto !important;
}

/* Verfügbar-Status (hellgrün) */
.user-status-badge .bi-check-circle-fill {
    color: #7fff7f !important;
}

/* Auch im Dropdown der Sidebar: Verfügbar hellgrün */
.dropdown-item .bi-check-circle-fill,
.dropdown-menu .bi-check-circle-fill,
.text-success.bi-check-circle-fill {
    color: #7fff7f !important;
}



/* ==========================================================================
   BADGES & ZÄHLER
   ========================================================================== */

/* Counter Icon */
.bi-counter::before {
    content: "\F3E1"; /* Bootstrap Icon Hash */
}

.badge-count {
    font-size: 0.9rem;
    padding: 0.35rem 0.75rem;
    vertical-align: middle;
}

/* ==========================================================================
   SIDEBAR & NAVIGATION
   ========================================================================== */

.user-info {
    margin-left: 0.5rem;
}

/* Grundstruktur der Sidebar */
.sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1050;
    width: var(--sidebar-width-expanded);
    overflow-y: visible;
    background-color: var(--bs-body-tertiary);
    transition: width var(--sidebar-transition);
}

/* Sidebar-Spacer um Platz für die fixierte Sidebar zu schaffen */
.sidebar-spacer {
    /* Standardbreite wird jetzt über JavaScript gesteuert */
    transition: width var(--sidebar-transition), min-width var(--sidebar-transition);
    flex-shrink: 0;
    display: block;
    position: relative;
}

/* Steuerung des Sidebar-Spacers über dedizierte Klassen */
.sidebar-spacer {
    flex-shrink: 0;
    transition: width var(--sidebar-transition), min-width var(--sidebar-transition);
}

.sidebar-spacer.spacer-expanded {
    width: var(--sidebar-width-expanded);
    min-width: var(--sidebar-width-expanded);
}

.sidebar-spacer.spacer-collapsed {
    width: var(--sidebar-width-collapsed);
    min-width: var(--sidebar-width-collapsed);
}

/* Logo-Bereich in der Sidebar */
.sidebar-logo-area {
    height: var(--topbar-height);
    min-height: var(--topbar-height);
    padding: 0 1rem;
    display: flex;
    align-items: center;
    position: sticky !important;
    top: 0;
    z-index: 1020;
    background-color: var(--bs-body-tertiary);
    border-bottom: 1px solid var(--bs-border-color);
}

.sidebar-collapsed {
    width: 4.5rem;
}

.sidebar-expanded {
    width: 280px;
}

/* Anpassung des Hauptinhalts */
main {
    min-height: 100vh;
    transition: margin-left .3s;
}

/* Topbar-Icons immer rechts fixieren */
.header-toolbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    min-height: var(--topbar-height);
    background: var(--bs-body-bg);
    border-bottom: 1px solid var(--bs-border-color);
    padding-right: 0;
}

.header-toolbar .topbar-icons,
.header-toolbar .d-flex.justify-content-end {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-right: 1rem;
    z-index: 1040;
    background: transparent;
}

@media (max-width: 767.98px) {
    .header-toolbar .topbar-icons,
    .header-toolbar .d-flex.justify-content-end {
        right: 0;
        gap: 0.5rem;
        padding-right: 0.5rem;
    }
}


/* Sidebar-Menüpunkte im eingeklappten Zustand */
.sidebar-collapsed .nav-link span,
.sidebar-collapsed .sidebar-title span {
    display: none;
}

.sidebar-collapsed .ms-4 {
    margin-left: 1rem !important;
}

.sidebar-collapsed .nav-link i {
    margin-right: 0;
}

/* Steuerung der Sichtbarkeit abhängig vom Sidebar-Zustand */
.sidebar-expanded-only {
    display: flex !important;
}

.sidebar-collapsed-only {
    display: none !important;
}

.sidebar-collapsed .sidebar-expanded-only {
    display: none !important;
}

.sidebar-collapsed .sidebar-collapsed-only {
    display: flex !important;
}

/* Dropdown-Pfeile in Untermenüs im eingeklappten Zustand ausblenden */
.sidebar-collapsed .nav-link i.bi-chevron-down {
    display: none !important;
}

/* Benutzer-Dropdown-Pfeil anpassen */
.user-dropdown::after {
    margin-left: 0.3em;
    vertical-align: middle;
}

/* Dropdown-Toggle bei kleinen Bildschirmen anpassen */
.sidebar-collapsed .user-dropdown::after {
    position: absolute;
    left: 48px;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 0;
}

/* Sidebar Navigation Struktur */
.sidebar-nav {
    padding-left: 0;
    list-style: none;
}

/* Sidebar-Initialisierung für Mobile-Ansicht - nur initial anwenden */
html.sidebar-mobile-view #sidebar:not(.sidebar-expanded) {
    width: var(--sidebar-width-collapsed);
    min-width: var(--sidebar-width-collapsed);
}

html.sidebar-mobile-view .sidebar-spacer:not(.spacer-expanded) {
    width: var(--sidebar-width-collapsed);
    min-width: var(--sidebar-width-collapsed);
}

/* Nur auf eingeklappte Sidebars anwenden, nicht auf alle */
html.sidebar-mobile-view #sidebar:not(.sidebar-expanded) .nav-link span {
    display: none;
}

/* Der Sidebar-Titel muss in der mobilen Ansicht immer ausgeblendet werden wenn sidebar collapsed */
html.sidebar-mobile-view #sidebar:not(.sidebar-expanded) .sidebar-title {
    display: none !important;
}

html.sidebar-mobile-view #sidebar:not(.sidebar-expanded) .sidebar-expanded-only {
    display: none !important;
}

html.sidebar-mobile-view #sidebar:not(.sidebar-expanded) .sidebar-collapsed-only {
    display: flex !important;
}

/* Allgemeine Stile für Nav-Links */
.sidebar .nav-link {
    color: var(--bs-body-color);
    padding: .5rem 1rem;
    display: flex;
    align-items: center;
    transition: all 0.2s ease;
}

.sidebar .nav-link:hover {
    background-color: rgba(var(--bs-primary-rgb), .1);
}

/* Icons in der Navigation */
.sidebar .nav-link i {
    min-width: 1.5rem;
    text-align: center;
    margin-right: 0.5rem;
}

/* Aktiver Navigationspunkt */
.sidebar .nav-link.active {
    background-color: rgba(var(--bs-primary-rgb), .2);
    color: var(--bs-primary);
    font-weight: 600;
}

.sidebar .nav-link.active i {
    color: var(--bs-primary);
}

/* Spezieller Stil für aktive Menüpunkte im Dark-Mode mit verbesserter Lesbarkeit */
[data-bs-theme="dark"] .sidebar .nav-link.active {
    background-color: rgba(var(--bs-primary-rgb), .3);
    color: #ffffff;
    font-weight: 600;
}

[data-bs-theme="dark"] .sidebar .nav-link.active i {
    color: #ffffff;
}

/* ==========================================================================
   THEME TOGGLING & LOGOS
   ========================================================================== */

/* Logo-Umschaltung zwischen Light und Dark Mode */
.light-mode-only {
    display: none;
}

.dark-mode-only {
    display: none;
}

[data-bs-theme="light"] .light-mode-only {
    display: inline-block;
}

[data-bs-theme="dark"] .dark-mode-only {
    display: inline-block;
}

html[data-bs-theme="light"] .dark-mode-only {
    display: none !important;
}

html[data-bs-theme="light"] .light-mode-only {
    display: block !important;
}

html[data-bs-theme="dark"] .light-mode-only {
    display: none !important;
}

html[data-bs-theme="dark"] .dark-mode-only {
    display: block !important;
}

/* =============================
   USER STATUS BADGE (Sidebar)
   ============================= */
.user-status-badge {
    width: 15px;
    height: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1.5px solid #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.15);
    font-size: 1rem;
    position: absolute;
    bottom: 0;
    right: 0;
    transform: translate(20%, 20%);
    z-index: 2;
    background: #fff;
    box-sizing: border-box;
    padding: 0;
    overflow: visible;
}

/* Hellgrüner Hintergrund nur in der User-Liste für Status 'verfügbar' */
.list-view-table .user-status-badge:has(.bi-check-circle-fill),
.user-list .user-status-badge:has(.bi-check-circle-fill) {
    background: #40e37b;
}

.user-status-badge i {
    font-size: 0.85em;
    line-height: 1;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}