/* =====================================================
   Fam. Götze – Glassmorphism Design Theme
   Version 1.0.0
   Kompatibel mit Bootstrap 5.3+ und Jinja2 / Flask
   ===================================================== */

/* -------------------------------------------------------
   CSS Custom Properties
   ------------------------------------------------------- */
:root {
    /* Light Mode – Standard */
    --color-background-1: linear-gradient(135deg, #e3f2fd 0%, #f5f5f5 50%, #fce4ec 100%);
    --color-background-2: rgba(255, 255, 255, 0.6);
    --color-background-3: rgba(255, 255, 255, 0.8);

    --color-foreground-1: #1a1a1a;
    --color-foreground-2: #5f6368;
    --color-foreground-inverse: #ffffff;

    --color-border: rgba(255, 255, 255, 0.3);
    --color-shadow: rgba(0, 0, 0, 0.1);

    --color-primary: #0071e3;
    --color-primary-hover: #0057b8;
    --color-primary-light: rgba(0, 113, 227, 0.15);

    --color-warning: #ff9500;
    --color-error: #ff3b30;
    --color-success: #34c759;

    --blur-strength: 20px;
    --glass-border: 1px solid rgba(255, 255, 255, 0.3);

    --sidebar-width: 210px;
    --sidebar-collapsed-width: 60px;
    --header-height: 110px;
    --footer-height: 46px;
}

@media (prefers-color-scheme: dark) {
    :root {
        --color-background-1: linear-gradient(135deg, #1a1d2e 0%, #2d1b4e 35%, #1e3a5f 65%, #2a4858 100%);
        --color-background-2: rgba(30, 35, 50, 0.6);
        --color-background-3: rgba(45, 50, 70, 0.7);

        --color-foreground-1: #e8eaed;
        --color-foreground-2: #9aa0a6;

        --color-border: rgba(255, 255, 255, 0.1);
        --color-shadow: rgba(0, 0, 0, 0.3);

        --color-primary-light: rgba(0, 113, 227, 0.2);

        --blur-strength: 30px;
        --glass-border: 1px solid rgba(255, 255, 255, 0.1);
    }
}

/* -------------------------------------------------------
   Reset / Basis
   ------------------------------------------------------- */
*, *::before, *::after {
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    background: var(--color-background-1) !important;
    background-attachment: fixed !important;
    color: var(--color-foreground-1) !important;
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
}

/* -------------------------------------------------------
   Header mit Panorama-Banner
   ------------------------------------------------------- */
header#site-header {
    background: var(--color-background-2);
    backdrop-filter: blur(var(--blur-strength)) saturate(180%);
    -webkit-backdrop-filter: blur(var(--blur-strength)) saturate(180%);
    border-bottom: var(--glass-border);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 20px 30px;
    min-height: var(--header-height);
    position: relative;
    flex-shrink: 0;
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1600px;
    margin: 0 auto;
}

.header-brand h1 {
    color: var(--color-foreground-inverse);
    font-size: 26px;
    font-weight: 700;
    margin: 0;
    text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}

.header-brand .app-subtitle {
    color: var(--color-foreground-inverse);
    font-size: 13px;
    font-weight: 400;
    opacity: 0.85;
    margin: 2px 0 0 0;
    text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

.header-greeting {
    color: var(--color-foreground-inverse);
    font-size: 15px;
    font-weight: 300;
    margin: 6px 0 0 0;
    opacity: 0.9;
    text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

.header-user {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--color-foreground-inverse);
    font-size: 14px;
    font-weight: 500;
    text-shadow: 0 1px 3px rgba(0,0,0,0.4);
    background: rgba(0,0,0,0.25);
    padding: 6px 14px;
    border-radius: 20px;
    backdrop-filter: blur(10px);
}

.header-user i {
    font-size: 18px;
}

/* -------------------------------------------------------
   Breadcrumb-Leiste
   ------------------------------------------------------- */
nav#breadcrumb {
    background: var(--color-background-2);
    backdrop-filter: blur(var(--blur-strength)) saturate(180%);
    -webkit-backdrop-filter: blur(var(--blur-strength)) saturate(180%);
    border-bottom: var(--glass-border);
    padding: 8px 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    flex-shrink: 0;
}

nav#breadcrumb a {
    color: var(--color-primary);
    text-decoration: none;
}

nav#breadcrumb a:hover {
    text-decoration: underline;
    color: var(--color-primary-hover);
}

nav#breadcrumb .bc-separator {
    color: var(--color-foreground-2);
}

nav#breadcrumb .bc-current {
    color: var(--color-foreground-1);
    font-weight: 600;
}

/* -------------------------------------------------------
   Haupt-Layout: Sidebar + Content
   ------------------------------------------------------- */
.site-wrapper {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* -------------------------------------------------------
   Sidebar
   ------------------------------------------------------- */
.sidebar {
    width: var(--sidebar-width);
    background: var(--color-background-2);
    backdrop-filter: blur(var(--blur-strength)) saturate(180%);
    -webkit-backdrop-filter: blur(var(--blur-strength)) saturate(180%);
    border-right: var(--glass-border);
    display: flex;
    flex-direction: column;
    padding: 16px 0;
    transition: width 0.3s ease;
    overflow: hidden;
    flex-shrink: 0;
}

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

.sidebar-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 12px 16px 12px;
    cursor: pointer;
    user-select: none;
    border-bottom: var(--glass-border);
    margin-bottom: 8px;
}

.sidebar-header:hover {
    opacity: 0.8;
}

.sidebar-header .sidebar-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-foreground-1);
    white-space: nowrap;
    flex: 1;
}

.sidebar.collapsed .sidebar-title,
.sidebar.collapsed .menu-text {
    display: none;
}

.sidebar.collapsed .toggle-arrow {
    display: none;
}

.sidebar.collapsed .sidebar-header {
    justify-content: center;
    padding: 0 0 16px 0;
}

.sidebar.collapsed .nav-menu > li > a {
    justify-content: center;
    padding: 12px 0;
}

.nav-menu {
    list-style: none;
    margin: 0;
    padding: 0 8px;
    flex: 1;
}

.nav-menu li {
    margin-bottom: 4px;
}

.nav-menu li a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 10px;
    border-radius: 8px;
    color: var(--color-foreground-1);
    text-decoration: none;
    font-size: 14px;
    transition: background 0.2s ease;
    white-space: nowrap;
}

.nav-menu li a:hover {
    background: var(--color-background-3);
}

.nav-menu li.active > a {
    color: var(--color-primary);
    font-weight: 600;
    background: var(--color-primary-light);
}

.nav-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    filter: brightness(0) saturate(100%) invert(0%) sepia(0%) saturate(0%) hue-rotate(0deg);
    opacity: 0.65;
}

@media (prefers-color-scheme: dark) {
    .nav-icon {
        filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg);
        opacity: 0.75;
    }
}

.nav-menu li.active .nav-icon {
    filter: brightness(0) saturate(100%) invert(38%) sepia(78%) saturate(2476%) hue-rotate(195deg) brightness(94%) contrast(88%);
    opacity: 1;
    width: 22px;
    height: 22px;
}

/* Tooltip bei eingeklappter Sidebar */
.sidebar.collapsed .nav-menu li {
    position: relative;
}

.sidebar.collapsed .nav-menu li a::after {
    content: attr(data-tooltip);
    position: absolute;
    left: calc(var(--sidebar-collapsed-width) - 4px);
    top: 50%;
    transform: translateY(-50%);
    background: var(--color-background-2);
    backdrop-filter: blur(var(--blur-strength)) saturate(180%);
    border: var(--glass-border);
    border-radius: 8px;
    padding: 7px 12px;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    color: var(--color-foreground-1);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 1000;
    box-shadow: 0 4px 16px var(--color-shadow);
}

.sidebar.collapsed .nav-menu li a:hover::after {
    opacity: 1;
}

/* Abmelden-Link am Ende der Sidebar */
.sidebar-footer {
    padding: 8px 8px 0 8px;
    border-top: var(--glass-border);
    margin-top: 8px;
}

.nav-logout {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 10px;
    border-radius: 8px;
    color: var(--color-error) !important;
    text-decoration: none;
    font-size: 14px;
    transition: background 0.2s ease;
    white-space: nowrap;
}

.nav-logout:hover {
    background: rgba(255, 59, 48, 0.1);
}

.nav-logout .nav-icon {
    filter: brightness(0) saturate(100%) invert(24%) sepia(96%) saturate(2588%) hue-rotate(344deg) brightness(97%) contrast(108%);
    opacity: 1;
}

.sidebar.collapsed .nav-logout {
    justify-content: center;
}

/* -------------------------------------------------------
   Main Content
   ------------------------------------------------------- */
main.site-main {
    flex: 1;
    overflow-y: auto;
    padding: 24px 30px;
}

/* -------------------------------------------------------
   Footer
   ------------------------------------------------------- */
footer#site-footer {
    background: var(--color-background-2);
    backdrop-filter: blur(var(--blur-strength)) saturate(180%);
    -webkit-backdrop-filter: blur(var(--blur-strength)) saturate(180%);
    border-top: var(--glass-border);
    padding: 12px 30px;
    text-align: center;
    flex-shrink: 0;
}

footer#site-footer p {
    color: var(--color-foreground-2);
    font-size: 12px;
    margin: 0;
}

/* -------------------------------------------------------
   Bootstrap-Overrides: Cards
   ------------------------------------------------------- */
.card {
    background: var(--color-background-2) !important;
    backdrop-filter: blur(var(--blur-strength)) saturate(180%);
    -webkit-backdrop-filter: blur(var(--blur-strength)) saturate(180%);
    border: var(--glass-border) !important;
    border-radius: 14px !important;
    box-shadow: 0 8px 32px var(--color-shadow) !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    color: var(--color-foreground-1) !important;
}

.card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 40px var(--color-shadow) !important;
}

.card-header {
    background: var(--color-background-3) !important;
    border-bottom: var(--glass-border) !important;
    border-radius: 14px 14px 0 0 !important;
    color: var(--color-foreground-1) !important;
    font-weight: 600;
    padding: 12px 18px;
}

.card-body {
    padding: 20px 18px;
}

/* -------------------------------------------------------
   Bootstrap-Overrides: Form-Elemente
   ------------------------------------------------------- */
.form-control,
.form-select {
    background: var(--color-background-3) !important;
    border: var(--glass-border) !important;
    border-radius: 8px !important;
    color: var(--color-foreground-1) !important;
    backdrop-filter: blur(10px);
}

.form-control:focus,
.form-select:focus {
    background: var(--color-background-3) !important;
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 0.2rem var(--color-primary-light) !important;
    color: var(--color-foreground-1) !important;
}

.form-control::placeholder {
    color: var(--color-foreground-2) !important;
    opacity: 0.8;
}

.form-label {
    color: var(--color-foreground-1);
    font-weight: 500;
}

.form-text {
    color: var(--color-foreground-2) !important;
}

/* -------------------------------------------------------
   Bootstrap-Overrides: Buttons
   ------------------------------------------------------- */
.btn-primary {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    border-radius: 8px !important;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--color-primary-hover) !important;
    border-color: var(--color-primary-hover) !important;
}

.btn-danger {
    border-radius: 8px !important;
}

.btn-outline-secondary {
    border-radius: 8px !important;
    color: var(--color-foreground-1) !important;
    border-color: var(--color-border) !important;
}

.btn-outline-secondary:hover {
    background: var(--color-background-3) !important;
    color: var(--color-foreground-1) !important;
}

/* -------------------------------------------------------
   Bootstrap-Overrides: Alerts
   ------------------------------------------------------- */
.alert {
    background: var(--color-background-2) !important;
    backdrop-filter: blur(var(--blur-strength)) saturate(180%);
    border-radius: 10px !important;
    border: var(--glass-border) !important;
    color: var(--color-foreground-1) !important;
}

.alert-success {
    border-left: 4px solid var(--color-success) !important;
}

.alert-danger {
    border-left: 4px solid var(--color-error) !important;
}

.alert-warning {
    border-left: 4px solid var(--color-warning) !important;
}

.alert-info {
    border-left: 4px solid var(--color-primary) !important;
}

/* -------------------------------------------------------
   Bootstrap-Overrides: Tabs (Einstellungen)
   ------------------------------------------------------- */
.nav-tabs {
    border-bottom: var(--glass-border) !important;
}

.nav-tabs .nav-link {
    color: var(--color-foreground-2) !important;
    border-radius: 8px 8px 0 0 !important;
    border: none !important;
}

.nav-tabs .nav-link:hover {
    color: var(--color-foreground-1) !important;
    background: var(--color-background-3) !important;
}

.nav-tabs .nav-link.active {
    background: var(--color-background-2) !important;
    color: var(--color-primary) !important;
    border-bottom: 2px solid var(--color-primary) !important;
    font-weight: 600;
}

/* -------------------------------------------------------
   Bootstrap-Overrides: Tabellen
   Glassmorphism-Zebra-Striping:
     ─ Gleiche RGB-Basis wie card-background-2
     ─ Gerade Zeilen:  15 % Opazität  (sehr transparent)
     ─ Ungerade Zeilen: 35 % Opazität  (etwas sichtbarer)
     ─ Dark Mode: dunklere RGB-Basis
   ------------------------------------------------------- */

:root {
    /* Tabellen-Stripes – Light Mode (Basis: 255 255 255) */
    --table-row-even:  rgba(255, 255, 255, 0.15);
    --table-row-odd:   rgba(255, 255, 255, 0.38);
    --table-row-hover: rgba(255, 255, 255, 0.58);
}

@media (prefers-color-scheme: dark) {
    :root {
        /* Tabellen-Stripes – Dark Mode (Basis: 30 35 50) */
        --table-row-even:  rgba(30, 35, 50, 0.15);
        --table-row-odd:   rgba(30, 35, 50, 0.50);
        --table-row-hover: rgba(255, 255, 255, 0.08);
    }
}

.table {
    color: var(--color-foreground-1) !important;
}

.table thead th {
    color: var(--color-foreground-2) !important;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding-top: 10px;
    padding-bottom: 10px;
    background: transparent !important;
}

/* Zebra-Stripes */
.table > tbody > tr:nth-child(even) > * {
    background-color: var(--table-row-even) !important;
}

.table > tbody > tr:nth-child(odd) > * {
    background-color: var(--table-row-odd) !important;
}

/* Hover überschreibt Stripe */
.table-hover > tbody > tr:hover > * {
    background-color: var(--table-row-hover) !important;
    color: var(--color-foreground-1) !important;
}

/* Bootstrap table-light vollständig neutralisieren */
.table-light,
.table-light > th,
.table-light > td {
    --bs-table-bg: transparent !important;
    --bs-table-color: var(--color-foreground-2) !important;
    --bs-table-border-color: transparent !important;
    background-color: transparent !important;
}

.table-borderless td,
.table-borderless th {
    color: var(--color-foreground-1) !important;
}

.text-muted {
    color: var(--color-foreground-2) !important;
}

/* -------------------------------------------------------
   Login-Seite (kein Sidebar)
   ------------------------------------------------------- */
.login-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
}

.login-card {
    width: 100%;
    max-width: 400px;
    background: var(--color-background-2) !important;
    backdrop-filter: blur(var(--blur-strength)) saturate(180%);
    -webkit-backdrop-filter: blur(var(--blur-strength)) saturate(180%);
    border: var(--glass-border) !important;
    border-radius: 18px !important;
    box-shadow: 0 16px 48px var(--color-shadow) !important;
}

/* -------------------------------------------------------
   Responsive
   ------------------------------------------------------- */
@media (max-width: 768px) {
    header#site-header {
        padding: 12px 16px;
        min-height: 70px;
    }

    .header-brand h1 {
        font-size: 18px;
    }

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

    .sidebar .menu-text,
    .sidebar .sidebar-title,
    .sidebar .toggle-arrow {
        display: none !important;
    }

    .sidebar .nav-menu li a {
        justify-content: center;
    }

    main.site-main {
        padding: 16px;
    }
}