/* INCON Portal — Shell, Farben, Komponenten (wird auch nach public/css kopiert für Deploy ohne Vite) */

html {
    height: 100%;
}

body.portal-app {
    margin: 0;
    min-height: 100%;
}

/* INCON Farbwelt */
:root {
    --incon-primary: #00234f;
    --incon-primary-80: #23426e;
    --incon-primary-60: #51678f;
    --incon-primary-40: #8592b3;
    --incon-primary-20: #bfc5d9;
    --incon-secondary: #4a5154;
    --incon-secondary-80: #71787c;
    --incon-secondary-60: #959ca0;
    --incon-accent: #009ee3;
    --incon-accent-hover: #0080b8;
    --incon-sidebar-bg: #eceff3;
    --incon-main-bg: #e4e7ec;

    --bs-primary: var(--incon-accent);
    --bs-primary-rgb: 0, 158, 227;
    --bs-link-color: var(--incon-accent);
    --bs-link-hover-color: var(--incon-accent-hover);
    --bs-body-color: var(--incon-secondary);
    --bs-secondary: var(--incon-secondary-60);
    --bs-secondary-rgb: 149, 156, 160;
    --bs-border-color: var(--incon-primary-20);
}

/* App-Shell */
.portal-app {
    display: flex;
    min-height: 100vh;
    color: var(--incon-secondary);
}

.portal-sidebar {
    width: 4.5rem;
    flex-shrink: 0;
    background: var(--incon-sidebar-bg);
    border-right: 1px solid rgba(0, 35, 79, 0.08);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding-top: 0.5rem;
}

.portal-sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0 0.35rem;
}

.portal-sidebar-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1;
    max-height: 3rem;
    color: var(--incon-secondary-80);
    border-radius: 0.5rem;
    text-decoration: none;
    position: relative;
    transition:
        color 0.15s ease,
        background-color 0.15s ease;
}

.portal-sidebar-link:hover:not(.portal-sidebar-link--disabled) {
    color: var(--incon-primary);
    background: rgba(0, 35, 79, 0.06);
}

.portal-sidebar-link.is-active {
    color: var(--incon-primary);
    background: rgba(0, 158, 227, 0.1);
}

.portal-sidebar-link.is-active::before {
    content: '';
    position: absolute;
    left: -0.35rem;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 60%;
    background: var(--incon-accent);
    border-radius: 0 2px 2px 0;
}

.portal-sidebar-link--disabled {
    opacity: 0.38;
    cursor: not-allowed;
    pointer-events: none;
}

.portal-sidebar-link i {
    font-size: 1.35rem;
}

.portal-shell {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Topbar */
.portal-topbar {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.6fr) minmax(0, 1.1fr);
    gap: 0.75rem 1rem;
    align-items: center;
    padding: 0.65rem 1.25rem;
    background: var(--incon-primary);
    color: #fff;
    box-shadow: 0 0.125rem 1rem rgba(0, 35, 79, 0.22);
}

@media (max-width: 991.98px) {
    .portal-topbar {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }

    .portal-topbar__brand {
        order: 1;
    }

    .portal-topbar__titles {
        order: 3;
    }

    .portal-topbar__actions {
        order: 2;
    }
}

.portal-topbar__logo-link {
    display: inline-block;
    line-height: 0;
    text-decoration: none;
}

.portal-topbar__logo-link:hover {
    opacity: 0.92;
}

/* Externes incon-vm.de-Logo (SVG als <img>, inkl. Claim): für dunkle Topbar einheitlich weiß */
.portal-topbar .portal-logo-topbar {
    height: 2.65rem;
    width: auto;
    max-width: min(100%, 320px);
    display: block;
    filter: brightness(0) invert(1);
}

.portal-topbar__heading {
    font-size: clamp(1.15rem, 2.5vw, 1.5rem);
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
}

.portal-topbar__sub {
    color: rgba(255, 255, 255, 0.82);
    font-size: clamp(0.78rem, 0.7rem + 0.35vw, 0.875rem);
    line-height: 1.45;
    max-width: min(100%, 34rem);
    margin-inline: auto;
    padding-inline: clamp(0.35rem, 3vw, 0.75rem);
    box-sizing: border-box;
    hyphens: auto;
    overflow-wrap: break-word;
    text-wrap: pretty;
}

@media (min-width: 768px) {
    .portal-topbar__sub {
        line-height: 1.38;
    }
}

.portal-topbar__sub strong {
    color: #fff;
    font-weight: 600;
}

/* Lesbarkeit: Fließtext im Dashboard nicht über die volle Breite */
.portal-intro-copy {
    max-width: 42rem;
}

.portal-topbar__brand {
    justify-self: start;
}

.portal-topbar__titles {
    justify-self: center;
    text-align: center;
}

.portal-topbar__actions {
    justify-self: end;
}

@media (max-width: 991.98px) {
    .portal-topbar__brand,
    .portal-topbar__titles,
    .portal-topbar__actions {
        justify-self: center;
        text-align: center;
    }
}

.portal-topbar .btn-outline-light {
    --bs-btn-color: #fff;
    --bs-btn-border-color: rgba(255, 255, 255, 0.65);
    --bs-btn-hover-bg: rgba(255, 255, 255, 0.12);
    --bs-btn-hover-border-color: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: rgba(255, 255, 255, 0.2);
    --bs-btn-active-border-color: #fff;
}

.portal-main {
    flex: 1;
    background: var(--incon-main-bg);
    overflow-y: auto;
}

/* column: sonst wird die .row als Flex-Item in der Zeile auf Mindestbreite gequetscht */
.portal-main--centered > .container-fluid {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    min-height: calc(100vh - 11rem);
    box-sizing: border-box;
}

.portal-main--centered > .container-fluid > .row {
    width: 100%;
    max-width: 100%;
}

.portal-footer-dark {
    flex-shrink: 0;
    background: var(--incon-primary);
    color: rgba(255, 255, 255, 0.82);
    border-top: 3px solid var(--incon-accent);
    padding: 0.85rem 1rem;
    font-size: 0.8125rem;
}

.portal-footer-dark a {
    color: #fff;
    text-decoration: none;
    opacity: 0.92;
}

.portal-footer-dark a:hover {
    color: #fff;
    opacity: 1;
    text-decoration: underline;
}

.portal-footer-dark .portal-footer-sep {
    opacity: 0.45;
    user-select: none;
}

.portal-card {
    border: 1px solid var(--incon-primary-20);
    box-shadow: 0 0.35rem 1.25rem rgba(0, 35, 79, 0.07);
    border-radius: 0.5rem;
    background: #fff;
}

.portal-card .card-title,
.portal-card h1,
.portal-card h2 {
    color: var(--incon-primary);
}

/* Bootstrap setzt code oft auf Pink — INCON-Farben durchsetzen */
.portal-app code {
    color: var(--incon-primary);
}

.portal-code {
    color: var(--incon-primary) !important;
    background-color: rgba(0, 158, 227, 0.1) !important;
    border: 1px solid rgba(0, 158, 227, 0.35) !important;
    padding: 0.15rem 0.4rem;
    border-radius: 0.25rem;
    font-size: 0.9em;
}

.btn-primary {
    --bs-btn-bg: var(--incon-accent);
    --bs-btn-border-color: var(--incon-accent);
    --bs-btn-hover-bg: var(--incon-accent-hover);
    --bs-btn-hover-border-color: var(--incon-accent-hover);
    --bs-btn-active-bg: var(--incon-accent-hover);
    --bs-btn-active-border-color: var(--incon-accent-hover);
    font-weight: 600;
}

.form-control:focus {
    border-color: var(--incon-accent);
    box-shadow: 0 0 0 0.2rem rgba(0, 158, 227, 0.2);
}