/*
 * GUYCOLLE Design System – Filament CSS Overrides
 *
 * Kern-Prinzipien:
 * - 0px Border-Radius (komplett eckig)
 * - Keine Schatten (nur Borders)
 * - Source Sans 3 Font
 * - Primary: #00AEEF / Dark: #231F20
 */

/* ========================================
   Typography Tokens
   (gespiegelt aus guycolle-standalone.css für Filament-Scope)
   Smallest = 14px, Faktor 14/12 vs. Ur-Skala
   ======================================== */

:root {
    --gc-text-xs:   14px;  /* Meta, Labels, Badges, Footer */
    --gc-text-sm:   15px;  /* Tabellen, Navigation */
    --gc-text-base: 16px;  /* Body, Buttons, Inputs */
    --gc-text-md:   18px;  /* Card-Header, kleine Headings */
    --gc-text-lg:   21px;  /* h3 */
    --gc-text-xl:   26px;  /* h2 */
    --gc-text-2xl:  33px;  /* h1 */
}

/* ========================================
   Border-Radius: 0px überall
   ======================================== */

/* Cards, Modals, Dropdowns */
.fi-card,
.fi-modal-window,
.fi-dropdown-panel,
.fi-section,
.fi-ta-ctn,
.fi-wi-stats-overview-stat {
    border-radius: 0 !important;
}

/* Buttons */
.fi-btn,
.fi-icon-btn,
.fi-dropdown-trigger {
    border-radius: 0 !important;
}

/* Inputs */
.fi-input-wrp,
.fi-select-input,
.fi-ta-wrp,
.fi-checkbox-input,
.fi-radio-input {
    border-radius: 0 !important;
}

/* Badges / Tags */
.fi-badge {
    border-radius: 0 !important;
}

/* Notifications */
.fi-notification {
    border-radius: 0 !important;
}

/* Sidebar */
.fi-sidebar,
.fi-sidebar-nav-group,
.fi-topbar {
    border-radius: 0 !important;
}

/* Tabs */
.fi-tabs-tab {
    border-radius: 0 !important;
}

/* Avatar */
.fi-avatar {
    border-radius: 0 !important;
}

/* ========================================
   Schatten entfernen, Borders stattdessen
   ======================================== */

.fi-card,
.fi-section,
.fi-modal-window,
.fi-dropdown-panel {
    box-shadow: none !important;
    border: 1px solid rgb(var(--gray-200)) !important;
}

.dark .fi-card,
.dark .fi-section,
.dark .fi-modal-window,
.dark .fi-dropdown-panel {
    border-color: rgb(var(--gray-700)) !important;
}

/* ========================================
   Sidebar Styling (Dunkelgrau)
   ======================================== */

.fi-sidebar {
    background-color: #231F20 !important;
}

.fi-sidebar-nav-item-label {
    font-family: 'Source Sans 3', 'Source Sans Pro', sans-serif !important;
}

/* ========================================
   v1.0.2 – Sidebar Contrast & Logo Dark-Mode Fixes
   Ref: QualiPlus 2.0 QA Walkthrough 2026-04-10 (Issue #70)
   Sidebar-BG ist in beiden Modi #231F20 → Text-/Icon-Farben
   müssen explizit hell sein, sonst fallen Filament-Defaults
   im Light Mode auf dunkle Werte zurück (unlesbar, 1.35:1).
   ======================================== */

/* F-04: Sidebar-Header an Sidebar-BG angleichen (beide Modi) */
.fi-sidebar-header {
    background-color: #231F20 !important;
}

/* F-01: Inaktive Sidebar-Items lesbar machen */
.fi-sidebar-item-label,
.fi-sidebar-item-button .fi-sidebar-item-label {
    color: #D5D3D3 !important;
}

.fi-sidebar-item .fi-sidebar-item-icon {
    color: #8E8A8A !important;
}

/* F-02: Group-Labels lesbar machen */
.fi-sidebar-group-label {
    color: #8E8A8A !important;
}

/* Active Nav Item */
.fi-sidebar-item-active {
    background-color: rgba(0, 174, 239, 0.08) !important;
}

/* F-03: Active-Nav korrekter Selector (ohne "-nav-" Infix) */
.fi-sidebar-item-active .fi-sidebar-item-label,
.fi-sidebar-item-active .fi-sidebar-item-icon {
    color: #00AEEF !important;
}

/* ========================================
   v1.1.0 – Sidebar-Logo sauber via dedizierte SVG-Variante
   Ref: QualiPlus 2.0 QA Walkthrough #70 Runde 2, Finding S-01
   Sidebar-Header ist in beiden Modi #231F20 → das Original
   logo-full.svg (GUY-Schriftzug + Deko-Rects in rgb(35,31,32))
   verschwindet im Light Mode im Header-BG. Wir swappen deshalb
   grundsätzlich auf logo-full-dark.svg (identische Geometrie,
   dunkle Fills auf weiss getauscht). Ersetzt den v1.0.2
   Invert-Filter-Hack mit pixel-scharfem Original-SVG.
   ======================================== */

.fi-sidebar-header .fi-logo {
    content: url('/vendor/guycolle-theme/logo-full-dark.svg');
}

/* ========================================
   Login Page
   ======================================== */

.fi-simple-layout {
    background-color: #F5F4F4 !important;
}

.dark .fi-simple-layout {
    background-color: #171415 !important;
}

.fi-simple-main-ctn {
    border-radius: 0 !important;
    box-shadow: none !important;
    border: 1px solid rgb(var(--gray-200)) !important;
}

.dark .fi-simple-main-ctn {
    border-color: rgb(var(--gray-700)) !important;
}

/* ========================================
   Theme Blade Components
   (<x-guycolle-theme::footer />, ::login-logo)
   ======================================== */

/* Footer component */
.gc-theme-footer {
    border-top: 1px solid rgb(var(--gray-200));
    padding: 12px 24px;
    font-family: 'Source Sans 3', 'Source Sans Pro', sans-serif;
    font-size: var(--gc-text-xs);
    color: #6B6566;
    background: transparent;
}

.dark .gc-theme-footer {
    border-top-color: rgb(var(--gray-700));
    color: #8E8A8A;
}

.gc-theme-footer-inner {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
}

.gc-theme-footer-sep {
    opacity: 0.5;
}

/* Login logo component */
.gc-theme-login-brand {
    display: flex;
    justify-content: center;
    padding: 8px 0 16px;
}

.gc-theme-login-logo {
    height: 40px;
    width: auto;
    display: block;
}

.dark .gc-theme-login-logo {
    filter: invert(1) hue-rotate(180deg);
}