/* Spiegelt BPA_MainView_Window.xaml.cs DarkPalette/LightPalette 1:1 als CSS-Variablen,
   damit die Web-Oberfläche exakt dieselben Farbwerte nutzt wie die WPF-Anwendung. */

:root {
    --br-bg-base: #1E1E1E;
    --br-bg-surface: #2D2D30;
    --br-bg-elevated: #3E3E42;
    --br-bg-sidebar: #252526;
    --br-bg-panel: #2D2D30;
    --br-accent: #00BCD4;
    --br-accent-dark: #0097A7;
    --br-text-primary: #E8E8E8;
    --br-text-secondary: #9D9D9D;
    --br-text-muted: #666669;
    --br-border: #3F3F46;
    --br-border-subtle: #2A2A2D;
    --br-success: #4EC9B0;
    --br-danger: #FF5252;
    --br-submenu-bg: #1A1A1C;
    --br-hover: #333337;
    --br-error-bg: #2A1414;

    --sidebar-width-expanded: 250px;
    --sidebar-width-collapsed: 60px;
}

.pbs-root.theme-light {
    --br-bg-base: #F4F6F8;
    --br-bg-surface: #FFFFFF;
    --br-bg-elevated: #EDEFF2;
    --br-bg-sidebar: #FFFFFF;
    --br-bg-panel: #FFFFFF;
    --br-accent: #0097A7;
    --br-accent-dark: #00767F;
    --br-text-primary: #1C1F26;
    --br-text-secondary: #5C6470;
    --br-text-muted: #9AA1AB;
    --br-border: #DCE1E6;
    --br-border-subtle: #E8EBEE;
    --br-success: #1B8E73;
    --br-danger: #D9362E;
    --br-submenu-bg: #F4F6F8;
    --br-hover: #EEF1F4;
    --br-error-bg: #FCE8E6;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: "Segoe UI", Roboto, Arial, sans-serif;
}

.pbs-root {
    display: grid;
    grid-template-columns: var(--sidebar-width-expanded) 1fr;
    height: 100vh;
    /* Verhindert, dass zu hoher Inhalt (z.B. eine lange Tabelle) das Grid und
       damit das ganze Browser-Fenster aufbläht — ohne min-height:0 ignoriert
       ein Grid-/Flex-Item seinen eigenen Inhalt bei der Höhenberechnung nicht,
       wodurch am Ende die ganze Seite statt nur des Inhaltsbereichs scrollt
       und darunter der weiße Browser-Hintergrund durchscheint. */
    min-height: 0;
    overflow: hidden;
    background: var(--br-bg-base);
    color: var(--br-text-primary);
    transition: grid-template-columns 0.15s ease;
}

.pbs-root.sidebar-collapsed {
    grid-template-columns: var(--sidebar-width-collapsed) 1fr;
}

/* ── Sidebar ─────────────────────────────────────── */

.pbs-sidebar {
    background: var(--br-bg-sidebar);
    border-right: 1px solid var(--br-border);
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.pbs-sidebar-header {
    display: flex;
    align-items: center;
    padding: 12px 0 4px 0;
}

.pbs-logo {
    flex: 1;
    margin-left: 20px;
}

.pbs-logo .title {
    color: var(--br-accent);
    font-size: 18px;
    font-weight: bold;
    white-space: nowrap;
}

.pbs-logo .subtitle {
    color: var(--br-text-secondary);
    font-size: 9px;
    font-weight: 600;
    white-space: nowrap;
}

.pbs-icon-btn {
    width: 36px;
    height: 36px;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: var(--br-text-secondary);
    font-size: 15px;
    cursor: pointer;
    margin: 0 2px;
    flex-shrink: 0;
}

.pbs-icon-btn:hover {
    background: var(--br-hover);
    color: var(--br-accent);
}

.pbs-menu {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
}

.pbs-menu-btn {
    display: flex;
    align-items: center;
    width: 100%;
    background: transparent;
    border: none;
    color: var(--br-text-primary);
    padding: 11px 20px;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
    white-space: nowrap;
}

.pbs-menu-btn:hover {
    background: var(--br-hover);
}

.pbs-menu-btn .icon {
    margin-right: 10px;
}

.pbs-menu-btn .chevron {
    margin-left: auto;
    color: var(--br-accent);
    font-size: 10px;
}

.pbs-menu-btn.danger {
    color: var(--br-danger);
}

.pbs-submenu {
    background: var(--br-submenu-bg);
    margin-left: 20px;
}

.pbs-submenu .pbs-menu-btn {
    height: 40px;
    font-size: 11px;
}

.pbs-section-label {
    color: var(--br-accent);
    font-size: 13px;
    font-weight: bold;
    margin: 25px 0 5px 20px;
    white-space: nowrap;
}

.pbs-sidebar-footer {
    background: var(--br-submenu-bg);
    border-top: 1px solid var(--br-border);
}

.pbs-sidebar-footer .pbs-menu-btn {
    height: 50px;
    font-weight: 600;
}

/* Wenn eingeklappt: Text/Labels/Submenüs ausblenden, nur Icons zeigen */
.pbs-root.sidebar-collapsed .menu-label,
.pbs-root.sidebar-collapsed .pbs-logo,
.pbs-root.sidebar-collapsed .pbs-submenu,
.pbs-root.sidebar-collapsed .pbs-section-label,
.pbs-root.sidebar-collapsed .chevron {
    display: none;
}

/* ── Hauptbereich / Info-Panel ──────────────────────*/

.pbs-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    height: 100%;
}

.pbs-infopanel {
    background: var(--br-bg-panel);
    border-bottom: 1px solid var(--br-border);
    height: 95px;
    flex-shrink: 0;
    display: flex;
    align-items: stretch;
    padding: 5px 15px;
    gap: 10px;
    /* Bewusst NICHT overflow:hidden: das Spalten-Dropdown (position:absolute,
       öffnet nach unten) muss über den unteren Rand des 95px hohen Infopanels
       hinausragen können, sonst wird es genau an dieser Kante abgeschnitten. */
    overflow: visible;
}

.pbs-infocol {
    border-right: 1px solid var(--br-border-subtle);
    padding-right: 15px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    flex-shrink: 0;
}

.pbs-infocol:last-child {
    border-right: none;
}

.pbs-infocol .col-caption {
    position: absolute;
    bottom: 2px;
    left: 0;
    right: 0;
    text-align: center;
    color: var(--br-text-muted);
    font-size: 8px;
}

.pbs-eyebrow {
    color: var(--br-accent);
    font-size: 9px;
    font-weight: bold;
    margin: 2px 0 4px 0;
}

.pbs-schema-value {
    color: var(--br-text-primary);
    font-size: 13px;
    font-weight: 600;
    max-width: 170px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pbs-warning-badge {
    background: var(--br-danger);
    color: white;
    border-radius: 3px;
    padding: 2px 5px;
    font-size: 9px;
    font-weight: bold;
    display: inline-block;
    margin-top: 5px;
}

.pbs-filter-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 10px;
    color: var(--br-text-primary);
    margin-bottom: 4px;
}

.pbs-filter-row label {
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    white-space: nowrap;
}

.pbs-filter-row .danger { color: var(--br-danger); }

.pbs-error-badge {
    background: var(--br-danger);
    color: white;
    border-radius: 8px;
    padding: 0 5px;
    font-size: 9px;
    font-weight: bold;
    margin-left: 4px;
}

.pbs-count-badge {
    background: var(--br-bg-base);
    color: var(--br-text-secondary);
    border: 1px solid var(--br-border);
    border-radius: 8px;
    padding: 0 5px;
    font-size: 9px;
    font-weight: bold;
    margin-left: 4px;
}
.pbs-count-badge.erfolg {
    color: var(--br-success);
    border-color: var(--br-success);
}

.pbs-ansicht-umschalter {
    display: flex;
    gap: 6px;
    margin-top: 12px;
}
.pbs-umschalt-btn {
    flex: 1;
    padding: 10px 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    background: var(--br-bg-elevated);
    color: var(--br-text-secondary);
    border: 1px solid var(--br-border);
    border-radius: 6px;
}
.pbs-umschalt-btn:hover {
    border-color: var(--br-accent);
}
.pbs-umschalt-btn.aktiv {
    background: var(--br-accent);
    color: #1E1E1E;
    border-color: var(--br-accent);
}

.pbs-fehlerliste-btn {
    margin-left: 10px;
    padding: 2px 8px;
    font-size: 10px;
    cursor: pointer;
    background: var(--br-bg-elevated);
    color: var(--br-danger);
    border: 1px solid var(--br-border);
    border-radius: 4px;
}

.pbs-fehlerliste-btn:hover {
    border-color: var(--br-accent);
}

.pbs-buendeln-meldung {
    margin: 6px 12px 0;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 11px;
    line-height: 1.4;
}
.pbs-buendeln-meldung.erfolg {
    background: rgba(76, 175, 80, 0.15);
    color: var(--br-success);
}
.pbs-buendeln-meldung.fehler {
    background: var(--br-error-bg);
    color: var(--br-danger);
}

.pbs-stat-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 100%;
}

.pbs-stat {
    text-align: center;
    padding: 0 12px;
}

.pbs-stat .label {
    color: var(--br-text-secondary);
    font-size: 9px;
}

.pbs-stat .value {
    font-size: 18px;
    font-weight: bold;
}

.pbs-stat-divider {
    width: 1px;
    height: 25px;
    background: var(--br-border-subtle);
}

.pbs-projectinfo {
    text-align: right;
    margin: 0 20px;
}

.pbs-projectinfo .title {
    color: var(--br-accent);
    font-size: 14px;
    font-weight: bold;
}

.pbs-projectinfo .name {
    color: var(--br-text-primary);
    font-size: 12px;
    max-width: 180px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-left: auto;
}

.pbs-projectinfo .status {
    color: var(--br-success);
    font-size: 14px;
}

.pbs-right-block {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pbs-right-block .mini-label {
    color: var(--br-text-muted);
    font-size: 8px;
    font-weight: bold;
    text-align: right;
}

.pbs-right-block .mini-value {
    font-size: 12px;
    font-weight: 600;
    text-align: right;
    max-width: 160px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pbs-status-chip {
    background: var(--br-bg-elevated);
    border: 1px solid var(--br-border);
    border-radius: 6px;
    padding: 5px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.pbs-status-led {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--br-success);
    box-shadow: 0 0 5px var(--br-success);
    flex-shrink: 0;
}

.pbs-content-area {
    flex: 1;
    min-width: 0;
    min-height: 0;
    color: var(--br-text-secondary);
    font-size: 14px;
    overflow-y: auto;
    overflow-x: hidden;
}

.pbs-content-area .pbs-placeholder {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}