/* ==========================================================================
   Zahlenzentrale Theme - überschreibt Bootstrap 5.3.0 (Light only)
   Alle Farben laufen über Variablen, damit ein Dark Mode nachrüstbar bleibt.
   ========================================================================== */

/* ---- Inter (self-hosted) ------------------------------------------------ */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/inter-latin-ext-wght-normal-d41afbece57a3d66b2ee22fd630ad4ce.woff2") format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/inter-latin-wght-normal-1b3ec095194194abe1625b02c945e2f1.woff2") format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- Design Tokens ------------------------------------------------------ */
:root {
    --zz-primary: #255c99;
    --zz-primary-hover: #1e4a7d;
    --zz-primary-active: #173b66;
    --zz-primary-rgb: 37, 92, 153;
    --zz-primary-soft: #eef3f9;
    --zz-primary-soft-border: #c9d9ea;

    --zz-app-bg: #ffffff;
    --zz-panel-bg: #ffffff;
    --zz-border: #e3e8ef;
    --zz-text: #1f2430;
    --zz-text-muted: #6b7280;

    --zz-sidebar-bg: #16314f;
    --zz-sidebar-text: #cfdcec;
    --zz-sidebar-heading: #7ea3cc;
    --zz-sidebar-hover-bg: rgba(126, 163, 204, .13);
    --zz-sidebar-active-bg: rgba(126, 163, 204, .24);
    --zz-sidebar-width: 248px;
    --zz-sidebar-width-collapsed: 64px;
    --zz-topbar-height: 56px;

    --zz-radius: .5rem;
    --zz-shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);
    --zz-shadow: 0 1px 3px rgba(16, 24, 40, .08), 0 1px 2px rgba(16, 24, 40, .04);

    /* Bootstrap-Variablen */
    --bs-font-sans-serif: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --bs-body-font-family: var(--bs-font-sans-serif);
    --bs-body-font-size: .9375rem;
    --bs-body-color: var(--zz-text);
    --bs-body-color-rgb: 31, 36, 48;
    --bs-body-bg: var(--zz-app-bg);
    --bs-body-bg-rgb: 255, 255, 255;
    --bs-secondary-color: var(--zz-text-muted);
    --bs-border-color: var(--zz-border);
    --bs-border-radius: var(--zz-radius);
    --bs-border-radius-sm: .375rem;
    --bs-border-radius-lg: .75rem;
    --bs-primary: var(--zz-primary);
    --bs-primary-rgb: var(--zz-primary-rgb);
    --bs-primary-bg-subtle: var(--zz-primary-soft);
    --bs-primary-border-subtle: var(--zz-primary-soft-border);
    --bs-primary-text-emphasis: var(--zz-primary-active);
    --bs-link-color: var(--zz-primary);
    --bs-link-color-rgb: var(--zz-primary-rgb);
    --bs-link-hover-color: var(--zz-primary-hover);
    --bs-link-hover-color-rgb: 30, 74, 125;
    --bs-focus-ring-color: rgba(var(--zz-primary-rgb), .25);
    --bs-secondary-bg: #edf0f5;
    --bs-tertiary-bg: #f6f8fb;
}

body {
    font-feature-settings: 'cv11', 'ss01';
    -webkit-font-smoothing: antialiased;
}

/* ---- Typografie --------------------------------------------------------- */
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--zz-text);
}
h1, .h1 { font-size: 1.5rem; }
h2, .h2 { font-size: 1.3rem; }
h3, .h3 { font-size: 1.15rem; }
h4, .h4 { font-size: 1.05rem; }
h5, .h5 { font-size: .95rem; }
h6, .h6 { font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; color: var(--zz-text-muted); }

/* ---- Buttons ------------------------------------------------------------ */
.btn {
    --bs-btn-font-weight: 500;
    --bs-btn-border-radius: var(--zz-radius);
    transition: background-color .12s, border-color .12s, box-shadow .12s, color .12s;
}
.btn-primary {
    --bs-btn-bg: var(--zz-primary);
    --bs-btn-border-color: var(--zz-primary);
    --bs-btn-hover-bg: var(--zz-primary-hover);
    --bs-btn-hover-border-color: var(--zz-primary-hover);
    --bs-btn-active-bg: var(--zz-primary-active);
    --bs-btn-active-border-color: var(--zz-primary-active);
    --bs-btn-disabled-bg: var(--zz-primary);
    --bs-btn-disabled-border-color: var(--zz-primary);
    --bs-btn-focus-shadow-rgb: var(--zz-primary-rgb);
    box-shadow: var(--zz-shadow-sm);
}
.btn-outline-primary {
    --bs-btn-color: var(--zz-primary);
    --bs-btn-border-color: var(--zz-primary-soft-border);
    --bs-btn-hover-bg: var(--zz-primary);
    --bs-btn-hover-border-color: var(--zz-primary);
    --bs-btn-active-bg: var(--zz-primary-active);
    --bs-btn-active-border-color: var(--zz-primary-active);
    --bs-btn-disabled-color: var(--zz-primary);
    --bs-btn-disabled-border-color: var(--zz-primary-soft-border);
    --bs-btn-focus-shadow-rgb: var(--zz-primary-rgb);
}
.btn-secondary {
    --bs-btn-bg: #fff;
    --bs-btn-color: var(--zz-text);
    --bs-btn-border-color: #d5d8e3;
    --bs-btn-hover-bg: #f3f4f8;
    --bs-btn-hover-color: var(--zz-text);
    --bs-btn-hover-border-color: #c3c7d6;
    --bs-btn-active-bg: #e9ebf2;
    --bs-btn-active-color: var(--zz-text);
    --bs-btn-active-border-color: #c3c7d6;
    --bs-btn-disabled-bg: #fff;
    --bs-btn-disabled-color: var(--zz-text-muted);
    --bs-btn-disabled-border-color: #d5d8e3;
    --bs-btn-focus-shadow-rgb: 107, 114, 128;
    box-shadow: var(--zz-shadow-sm);
}
.btn-outline-secondary {
    --bs-btn-color: #4b5160;
    --bs-btn-border-color: #d5d8e3;
    --bs-btn-hover-bg: #f3f4f8;
    --bs-btn-hover-color: var(--zz-text);
    --bs-btn-hover-border-color: #c3c7d6;
    --bs-btn-active-bg: #e9ebf2;
    --bs-btn-active-color: var(--zz-text);
    --bs-btn-active-border-color: #c3c7d6;
    --bs-btn-focus-shadow-rgb: 107, 114, 128;
}
.btn-xs {
    --bs-btn-border-radius: .375rem;
}

/* ---- Formulare ---------------------------------------------------------- */
.form-control,
.form-select {
    border-color: #d5d8e3;
    background-color: #fff;
}
.form-control:focus,
.form-select:focus {
    border-color: var(--zz-primary);
    box-shadow: 0 0 0 .2rem rgba(var(--zz-primary-rgb), .18);
}
.form-check-input:checked {
    background-color: var(--zz-primary);
    border-color: var(--zz-primary);
}
.form-check-input:focus {
    border-color: var(--zz-primary);
    box-shadow: 0 0 0 .2rem rgba(var(--zz-primary-rgb), .18);
}
.form-label {
    font-weight: 500;
    font-size: .875rem;
}
.form-control.disabled,
.form-control:disabled,
.form-control[readonly] {
    background-color: #f3f4f8;
}

/* ---- Tabellen: Linien statt Streifen ----------------------------------- */
.table {
    --bs-table-bg: transparent;
    --bs-table-striped-bg: transparent;
    --bs-table-striped-color: var(--bs-body-color);
    --bs-table-hover-bg: #f4f7fb;
    --bs-table-hover-color: var(--bs-body-color);
    --bs-table-border-color: var(--zz-border);
    font-variant-numeric: tabular-nums;
}
.table > :not(caption) > * > * {
    border-bottom-width: 1px;
}
.table > thead > tr > th,
.table > thead > tr > td {
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--zz-text-muted);
    background-color: #f6f8fb;
    border-bottom: 1px solid var(--zz-border);
    white-space: nowrap;
}
.table-dark,
.table > .table-dark,
thead.table-dark {
    --bs-table-bg: #f6f8fb;
    --bs-table-color: var(--zz-text-muted);
    --bs-table-border-color: var(--zz-border);
    --bs-table-striped-bg: transparent;
    --bs-table-striped-color: var(--zz-text-muted);
    --bs-table-hover-bg: #f6f8fb;
    --bs-table-hover-color: var(--zz-text-muted);
}
.table-info,
.table > .table-info,
tr.table-info > * {
    --bs-table-bg: var(--zz-primary-soft);
    --bs-table-color: var(--zz-text);
    --bs-table-border-color: var(--zz-primary-soft-border);
    --bs-table-striped-bg: var(--zz-primary-soft);
    --bs-table-striped-color: var(--zz-text);
    --bs-table-hover-bg: #dde8f4;
    --bs-table-hover-color: var(--zz-text);
}
.table-responsive {
    border-radius: var(--zz-radius);
}

/* ---- Cards -------------------------------------------------------------- */
.card {
    --bs-card-border-color: var(--zz-border);
    --bs-card-border-radius: .75rem;
    --bs-card-inner-border-radius: calc(.75rem - 1px);
    --bs-card-cap-bg: #f6f8fb;
    box-shadow: var(--zz-shadow-sm);
}
.card-header,
.card-footer {
    font-weight: 500;
}
.card-subtitle {
    font-size: .8rem;
}

/* ---- Alerts ------------------------------------------------------------- */
.alert {
    --bs-alert-border-radius: var(--zz-radius);
    box-shadow: var(--zz-shadow-sm);
}
.alert-info    { background-color: var(--zz-primary-soft); border-color: var(--zz-primary-soft-border); color: var(--zz-primary-active); }
.alert-info .alert-link { color: var(--zz-primary-active); }

/* ---- Badges ------------------------------------------------------------- */
.badge {
    font-weight: 500;
    letter-spacing: .01em;
}
.badge.bg-primary,
.badge.text-bg-primary {
    background-color: var(--zz-primary) !important;
    color: #fff !important;
}
.badge.bg-secondary,
.badge.text-bg-secondary {
    background-color: #e6e8f1 !important;
    color: #4b5160 !important;
}
.badge.bg-info,
.badge.text-bg-info {
    background-color: var(--zz-primary-soft) !important;
    color: var(--zz-primary-active) !important;
}

/* ---- Tabs / Nav --------------------------------------------------------- */
.nav-tabs {
    --bs-nav-tabs-border-color: var(--zz-border);
    --bs-nav-tabs-link-active-color: var(--zz-primary);
    --bs-nav-tabs-link-active-border-color: var(--zz-border) var(--zz-border) #fff;
    --bs-nav-tabs-border-radius: var(--zz-radius);
    --bs-nav-link-color: var(--zz-text-muted);
    --bs-nav-link-hover-color: var(--zz-text);
    --bs-nav-link-font-weight: 500;
}
.nav-pills {
    --bs-nav-pills-link-active-bg: var(--zz-primary);
}
.page-link {
    --bs-pagination-color: var(--zz-primary);
    --bs-pagination-hover-color: var(--zz-primary-hover);
    --bs-pagination-active-bg: var(--zz-primary);
    --bs-pagination-active-border-color: var(--zz-primary);
    --bs-pagination-focus-box-shadow: 0 0 0 .2rem rgba(var(--zz-primary-rgb), .18);
}

/* ---- Dropdowns, Modals, List-Groups ------------------------------------ */
.dropdown-menu {
    --bs-dropdown-border-color: var(--zz-border);
    --bs-dropdown-border-radius: .625rem;
    --bs-dropdown-link-active-bg: var(--zz-primary);
    --bs-dropdown-font-size: .9rem;
    box-shadow: 0 8px 24px rgba(16, 24, 40, .12);
}
.modal-content {
    border: 0;
    border-radius: .875rem;
    box-shadow: 0 20px 50px rgba(16, 24, 40, .25);
}
.modal-header {
    border-bottom-color: var(--zz-border);
}
.modal-footer {
    border-top-color: var(--zz-border);
}
.list-group {
    --bs-list-group-border-color: var(--zz-border);
    --bs-list-group-active-bg: var(--zz-primary);
    --bs-list-group-active-border-color: var(--zz-primary);
}
.progress {
    --bs-progress-bar-bg: var(--zz-primary);
}

/* ---- Drittbibliotheken -------------------------------------------------- */
/* TomSelect */
.ts-wrapper.single .ts-control,
.ts-wrapper.multi .ts-control {
    border-color: #d5d8e3;
    border-radius: var(--zz-radius);
}
.ts-wrapper.focus .ts-control {
    border-color: var(--zz-primary);
    box-shadow: 0 0 0 .2rem rgba(var(--zz-primary-rgb), .18);
}
.ts-wrapper.multi .ts-control > div {
    background: var(--zz-primary-soft);
    color: var(--zz-primary-active);
    border-radius: .375rem;
}
.ts-dropdown {
    border-color: var(--zz-border);
    border-radius: .625rem;
    box-shadow: 0 8px 24px rgba(16, 24, 40, .12);
}
.ts-dropdown .active {
    background-color: var(--zz-primary-soft);
    color: var(--zz-primary-active);
}

/* SweetAlert2 */
.swal2-popup {
    font-family: var(--bs-font-sans-serif);
    border-radius: .875rem;
}
.swal2-styled.swal2-confirm {
    background-color: var(--zz-primary);
    border-radius: var(--zz-radius);
}
.swal2-styled.swal2-confirm:focus {
    box-shadow: 0 0 0 .2rem rgba(var(--zz-primary-rgb), .3);
}
.swal2-styled.swal2-cancel {
    border-radius: var(--zz-radius);
}

/* Dropzone */
.dropzone {
    border: 2px dashed var(--zz-primary-soft-border);
    border-radius: .75rem;
    background: var(--zz-primary-soft);
}
.dropzone:hover {
    border-color: var(--zz-primary);
}

/* EasyMDE / CodeMirror */
.EasyMDEContainer .CodeMirror,
.editor-toolbar {
    border-color: #d5d8e3;
}
.EasyMDEContainer .CodeMirror {
    border-bottom-left-radius: var(--zz-radius);
    border-bottom-right-radius: var(--zz-radius);
}
.editor-toolbar {
    border-top-left-radius: var(--zz-radius);
    border-top-right-radius: var(--zz-radius);
}

/* Sprach-Dropdown: an die übrigen Toolbar-Buttons angleichen (statt weißem Kasten mit Dreieck) */
.editor-toolbar .easymde-dropdown,
.editor-toolbar .easymde-dropdown:hover {
    background: none;
    border: 1px solid transparent;
    border-radius: 3px;
    vertical-align: top;
}
.editor-toolbar .easymde-dropdown:hover,
.editor-toolbar .easymde-dropdown:focus-within {
    background: #fcfcfc;
    border-color: #95a5a6;
}
.editor-toolbar .easymde-dropdown::after {
    content: "";
    position: absolute;
    right: 3px;
    bottom: 4px;
    border: 3px solid transparent;
    border-top-color: currentColor;
    border-bottom: 0;
    opacity: .6;
    pointer-events: none;
}
.easymde-dropdown-content {
    min-width: 9rem;
    border-radius: var(--zz-radius);
    text-align: left;
}
.easymde-dropdown-content button {
    width: 100%;
    text-align: left;
    font-weight: 400;
}

/* ApexCharts */
.apexcharts-canvas {
    font-family: var(--bs-font-sans-serif);
}

/* ==========================================================================
   App-Layout: Topbar, Sidebar, Content-Panel
   ========================================================================== */
.app-body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.app-topbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    height: var(--zz-topbar-height);
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
    background: var(--zz-panel-bg);
    border-bottom: 1px solid var(--zz-border);
}
.app-topbar form[role=search] {
    width: 16rem;
}
.app-brand {
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: -.02em;
    color: var(--zz-text);
    text-decoration: none;
}
.app-brand-tld {
    color: #950952;
}
.app-brand:hover {
    color: var(--zz-text);
}

.app-shell {
    flex: 1 1 auto;
    display: flex;
    min-width: 0;
}
.app-content {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
}
.app-panel {
    flex: 1 0 auto;
}
.app-footer {
    flex: 0 0 auto;
    padding: 1.25rem .25rem 0;
    font-size: .8rem;
    color: var(--zz-text-muted);
}
.app-footer a {
    color: var(--zz-text-muted);
}
.app-content > .alert {
    margin-bottom: 1rem;
}

/* ---- Sidebar ------------------------------------------------------------ */
.app-sidebar {
    background-color: var(--zz-sidebar-bg);
    color: var(--zz-sidebar-text);
    --bs-offcanvas-bg: var(--zz-sidebar-bg);
    --bs-offcanvas-color: var(--zz-sidebar-text);
    --bs-offcanvas-width: var(--zz-sidebar-width);
}
.app-sidebar .offcanvas-header {
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.app-sidebar-nav {
    padding: .75rem 0;
}
.app-sidebar .sidebar-heading {
    padding: .9rem 1.25rem .3rem;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--zz-sidebar-heading);
    white-space: nowrap;
}
.app-sidebar .sidebar-link {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: .1rem .6rem;
    padding: .45rem .65rem;
    font-size: .9rem;
    font-weight: 500;
    color: var(--zz-sidebar-text);
    white-space: nowrap;
    border-radius: .5rem;
}
.app-sidebar .sidebar-link .bi:first-child {
    flex: 0 0 1.25rem;
    font-size: 1.05rem;
    text-align: center;
}
.app-sidebar .sidebar-link:hover {
    background-color: var(--zz-sidebar-hover-bg);
    color: #fff;
}
.app-sidebar .sidebar-link.active {
    background-color: var(--zz-sidebar-active-bg);
    color: #fff;
}

@media (min-width: 992px) {
    /* !important: Bootstrap's .offcanvas-lg überschreibt diese Werte ab 992px mit !important */
    .app-sidebar {
        flex: 0 0 auto;
        width: var(--zz-sidebar-width) !important;
        position: sticky;
        top: var(--zz-topbar-height);
        height: calc(100vh - var(--zz-topbar-height)) !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        background-color: var(--zz-sidebar-bg) !important;
        transition: width .15s ease-in-out;
    }
    html.sidebar-collapsed .app-sidebar {
        width: var(--zz-sidebar-width-collapsed) !important;
    }
    html.sidebar-collapsed .app-sidebar .sidebar-label {
        display: none;
    }
    html.sidebar-collapsed .app-sidebar .sidebar-heading {
        height: 1px;
        margin: .9rem 1rem .4rem;
        padding: 0;
        background-color: rgba(255, 255, 255, .12);
    }
    html.sidebar-collapsed .app-sidebar .sidebar-link {
        justify-content: center;
        padding-left: 0;
        padding-right: 0;
    }
}

@media (max-width: 991.98px) {
    .app-content {
        padding: 1rem;
    }
}

/* ---- Public-Layout ------------------------------------------------------ */
.public-content {
    flex: 1 0 auto;
    padding: 2rem 0 3rem;
}
.public-footer {
    flex: 0 0 auto;
}
.public-auth-card {
    max-width: 26rem;
    margin: 3rem auto 0;
}
.public-auth-card .card {
    border-radius: 1rem;
    box-shadow: 0 10px 30px rgba(16, 24, 40, .08);
}
.public-auth-card .card-body {
    padding: 2rem;
}

/* ---- Seitenkopf (templates/partials/page_header.html.twig) -------------- */
.page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem 1.5rem;
    margin-bottom: 1.25rem;
}
.page-header-main {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    min-width: 0;
}
.page-header-title {
    margin: 0;
    font-size: 1.5rem;
    line-height: 1.3;
    overflow-wrap: anywhere;
}
.page-header-pretitle {
    color: var(--zz-text-muted);
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.2;
}

.page-header-subtitle {
    margin-top: .15rem;
    color: var(--zz-text-muted);
    font-size: .9rem;
}
.page-header-badges {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin-top: .4rem;
}
.page-header-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    margin-top: .1rem;
    border: 1px solid var(--zz-border);
    border-radius: var(--zz-radius);
    color: var(--zz-text-muted);
    text-decoration: none;
}
.page-header-back:hover {
    background: var(--bs-tertiary-bg);
    color: var(--zz-text);
}
.page-header-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}
/* Tabs direkt unter dem Seitenkopf; ersetzt die alten <p><br></p>-Abstände */
.page-header + .nav-tabs {
    margin-top: -.25rem;
}
.nav-tabs {
    margin-bottom: 1.25rem;
}

/* ---- Randlose Tabellen in Karten: Zellen bündig mit dem Kartentext ---- */
.card > .table-responsive > .table > :not(caption) > * > :first-child {
    padding-left: 1rem;
}
.card > .table-responsive > .table > :not(caption) > * > :last-child {
    padding-right: 1rem;
}

/* ---- Aktionsleiste unter langen Formularen: bleibt beim Scrollen am unteren Rand sichtbar ---- */
.form-action-bar {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-top: 1rem;
    padding: .75rem 1rem;
    background-color: var(--bs-body-bg);
    border: 1px solid var(--zz-border);
    border-radius: var(--zz-radius);
    box-shadow: 0 -4px 12px rgba(16, 24, 40, .08);
}