/* ── Navbar Logo ───────────────────────────────────────────────────── */
#jazzy-navbar .brand-link img,
#jazzy-navbar img.brand-image {
    height: 40px !important;
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    filter: none !important;
    object-fit: contain !important;
    flex-shrink: 0 !important;
}

/* ── Login-Seite Logo ─────────────────────────────────────────────── */
.login-logo img {
    height: 80px !important;
    width: auto !important;
    max-width: 200px !important;
    object-fit: contain !important;
}

/* ── Jazzmin Version im Footer ausblenden ──────────────────────────── */
.app-footer .float-end {
    display: none !important;
}

/* ── Navbar Hintergrund & Text ─────────────────────────────────────── */
#jazzy-navbar {
    background-color: #ffffff !important;
    border-bottom: 1px solid #e0e0e0 !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08) !important;
}

#jazzy-navbar .nav-link,
#jazzy-navbar .navbar-brand,
#jazzy-navbar .dropdown-toggle {
    color: #333333 !important;
}

#jazzy-navbar .nav-link:hover,
#jazzy-navbar .dropdown-toggle:hover {
    color: #1a3a5c !important;
    background-color: rgba(0, 0, 0, 0.06) !important;
    border-radius: 4px;
}

/* ── Dropdown-Menü ─────────────────────────────────────────────────── */
#jazzy-navbar .dropdown-menu {
    background-color: #ffffff !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 6px !important;
    padding: 4px 0 !important;
    min-width: 200px !important;
    margin-top: 0 !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.10) !important;
}

#jazzy-navbar .dropdown-menu .dropdown-item {
    color: #333333 !important;
    padding: 7px 16px !important;
    font-size: 0.875rem !important;
}

#jazzy-navbar .dropdown-menu .dropdown-item:hover,
#jazzy-navbar .dropdown-menu .dropdown-item.active,
#jazzy-navbar .dropdown-menu .dropdown-item:active {
    background-color: #f0f4f8 !important;
    color: #1a3a5c !important;
}

/* ── Seiten-Hintergrund ────────────────────────────────────────────── */
body,
.wrapper,
.content-wrapper,
.app-wrapper {
    background-color: #f2f4f7 !important;
}

/* ── Content Bereich Grundlayout ──────────────────────────────────── */
.content-wrapper .container-fluid,
.app-content .container-fluid {
    padding: 24px !important;
}

/* ── Seitentitel ──────────────────────────────────────────────────── */
.content-header h1,
.app-content-header h1 {
    font-size: 1.4rem !important;
    font-weight: 600 !important;
    color: #1a2b3c !important;
    margin-bottom: 4px !important;
}

/* ── Breadcrumb ───────────────────────────────────────────────────── */
.breadcrumb {
    background: transparent !important;
    padding: 0 !important;
    margin-bottom: 0 !important;
    font-size: 0.8rem !important;
}
.breadcrumb-item a {
    color: #1a3a5c !important;
}
.breadcrumb-item.active {
    color: #888 !important;
}

/* ── Such- und Filterbereich ──────────────────────────────────────── */
#change-list-filters {
    background: #ffffff !important;
    border-radius: 8px !important;
    padding: 12px 16px !important;
    margin-bottom: 16px !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.07) !important;
    border: 1px solid #e8eaed !important;
    font-size: 0.8rem !important;
}

/* Filter-Labels (z.B. "Nach Abgabentyp •") */
#change-list-filters label,
#changelist-search label,
#changelist-search h3 {
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    color: #555 !important;
    margin-bottom: 0 !important;
    white-space: nowrap !important;
}

/* Filter-Dropdowns und Suchfeld */
#change-list-filters .form-control,
#change-list-filters select,
#changelist-search .form-control,
#changelist-search select {
    border-radius: 5px !important;
    border: 1px solid #d0d5dd !important;
    font-size: 0.8rem !important;
    height: 30px !important;
    padding: 0 8px !important;
    box-shadow: none !important;
}

#changelist-search .form-control:focus {
    border-color: #1a3a5c !important;
    box-shadow: 0 0 0 3px rgba(26,58,92,0.12) !important;
}

/* Alle Buttons im Filterbereich und Aktionsleiste */
#change-list-filters .btn,
#changelist-search .btn,
.change-list-actions .btn,
.change-list-actions button,
#changelist-form .btn,
#changelist-form button[type="submit"] {
    font-size: 0.8rem !important;
    height: 30px !important;
    padding: 0 12px !important;
    line-height: 28px !important;
    border-radius: 5px !important;
}

/* "Hinzufügen"-Button (object-tools) */
.object-tools a,
.object-tools .addlink {
    font-size: 0.8rem !important;
    padding: 5px 12px !important;
    border-radius: 5px !important;
    line-height: 1.4 !important;
}

/* ── Tabellen-Container ───────────────────────────────────────────── */
#changelist .module,
#changelist {
    background: #ffffff !important;
    border-radius: 8px !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.07) !important;
    border: 1px solid #e8eaed !important;
    overflow: hidden !important;
}

/* ── Tabelle ──────────────────────────────────────────────────────── */
#result_list {
    width: 100% !important;
    border-collapse: collapse !important;
    font-size: 0.875rem !important;
}

#result_list thead th {
    background-color: #f8f9fb !important;
    color: #444 !important;
    font-weight: 600 !important;
    font-size: 0.8rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    padding: 12px 16px !important;
    border-bottom: 2px solid #e8eaed !important;
    white-space: nowrap !important;
}

#result_list thead th a,
#result_list thead th a:hover {
    color: #444 !important;
}

#result_list tbody tr {
    border-bottom: 1px solid #f0f2f5 !important;
    transition: background-color 0.12s ease !important;
}

#result_list tbody tr:last-child {
    border-bottom: none !important;
}

#result_list tbody tr:hover {
    background-color: #f0f4f8 !important;
}

#result_list tbody td {
    padding: 11px 16px !important;
    color: #333 !important;
    vertical-align: middle !important;
}

#result_list tbody td a,
#result_list tbody td a:visited,
#result_list tbody th a,
#result_list tbody th a:visited {
    color: #333333 !important;
    font-weight: 500 !important;
    text-decoration: none !important;
}

#result_list tbody td a:hover,
#result_list tbody th a:hover {
    color: #333333 !important;
    text-decoration: underline !important;
}

/* ── Aktions-Zeile ────────────────────────────────────────────────── */
.change-list-actions select,
.actions select {
    border-radius: 5px !important;
    border: 1px solid #d0d5dd !important;
    font-size: 0.8rem !important;
    height: 30px !important;
    padding: 0 8px !important;
    background-color: #ffffff !important;
}

/* ── Ergebniszähler / Pagination ──────────────────────────────────── */
.paginator {
    font-size: 0.8rem !important;
    color: #888 !important;
    padding: 10px 16px !important;
}

/* ── Checkboxen ───────────────────────────────────────────────────── */
#result_list input[type="checkbox"] {
    width: 15px !important;
    height: 15px !important;
    cursor: pointer !important;
}

/* ── Submit-Row Buttons ───────────────────────────────────────────── */
.btn.btn-success,
.btn.btn-info,
.btn.btn-danger,
.btn.btn-secondary,
.btn.btn-primary,
.btn.btn-warning {
    background-color: #ffffff !important;
    color: #111 !important;
    border: 1px solid #ccc !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

.btn.btn-success:hover,
.btn.btn-info:hover,
.btn.btn-danger:hover,
.btn.btn-secondary:hover,
.btn.btn-primary:hover,
.btn.btn-warning:hover {
    background-color: #f0f0f0 !important;
    color: #111 !important;
    border-color: #aaa !important;
}

/* ── Select2-Dropdowns in Formularfeldern: nur so breit wie nötig ── */
.form-group .select2-container {
    width: auto !important;
    min-width: 200px;
    max-width: 100%;
}

/* ── Inline-Felder: einheitliches Aussehen wie Bootstrap form-control ─ */
.inline-group input[type="text"],
.inline-group input[type="email"],
.inline-group input[type="tel"],
.inline-group input[type="number"],
.inline-group select,
.inline-group textarea,
.inline-group .vTextField {
    width: 30em !important;
    max-width: 100% !important;
    border-radius: 0.375rem !important;
    border: 1px solid #ced4da !important;
    padding: 0.25rem 0.5rem !important;
    font-size: 0.875rem !important;
    line-height: 1.5 !important;
    color: #212529 !important;
    background-color: #fff !important;
    box-shadow: none !important;
}

.inline-group input[type="text"]:focus,
.inline-group input[type="email"]:focus,
.inline-group input[type="tel"]:focus,
.inline-group input[type="number"]:focus,
.inline-group select:focus,
.inline-group textarea:focus {
    border-color: #86b7fe !important;
    outline: 0 !important;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
}

/* ── Horizontal Tabs (changeform_format: horizontal_tabs) ─────────────── */

/* Tab-Leiste: Linie unter den Tabs als Trennlinie */
.nav-tabs {
    border-bottom: 2px solid #dee2e6 !important;
    flex-wrap: wrap !important;
    gap: 2px 0 !important;
}

/* Jedes Tab-Element */
.nav-tabs .nav-item {
    margin-bottom: -2px !important;
}

/* Tab-Links: schwarz, solide Kanten oben/links/rechts */
.nav-tabs .nav-link {
    color: #222 !important;
    background-color: #f5f5f5 !important;
    border: 1px solid #dee2e6 !important;
    border-bottom: none !important;
    border-radius: 6px 6px 0 0 !important;
    padding: 7px 14px !important;
    font-size: 0.82rem !important;
    font-weight: 500 !important;
    margin-right: 2px !important;
    transition: background-color 0.15s, color 0.15s !important;
    white-space: nowrap !important;
}

/* Hover-Zustand */
.nav-tabs .nav-link:hover {
    color: #000 !important;
    background-color: #e8e8e8 !important;
    border-color: #c8c8c8 !important;
    border-bottom-color: transparent !important;
}

/* Aktiver Tab: weißer Hintergrund, verbunden mit dem Content-Bereich */
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    color: #111 !important;
    background-color: #ffffff !important;
    border-color: #dee2e6 #dee2e6 #ffffff !important;
    font-weight: 600 !important;
}

/* ── Fieldset-Beschreibungen: gleiche Schriftgröße wie Formularinhalt ── */
fieldset .help,
.form-row .help,
p.help,
.tab-content .card-header .card-title {
    font-size: 0.8rem !important;
    font-weight: normal !important;
}

/* ── Abgaben-Inline: Spaltenbreiten & Zentrierung ───────────────────── */
.field-calculation_mode_icon,
th.column-calculation_mode_icon {
    text-align: center !important;
    min-width: 13rem;
    padding-right: 2rem !important;
}
th.column-display_name       { min-width: 14rem; padding-right: 2rem !important; }
th.column-valid_from         { min-width: 10rem; padding-right: 2rem !important; }
th.column-is_active          { min-width:  6rem; padding-right: 2rem !important; }
th.column-konfiguration_link { min-width: 12rem; }

/* ── Toggle-Switches für Admin-Checkboxen ──────────────────────────────── */
label.admin-toggle {
    display: inline-flex !important;
    align-items: center !important;
    cursor: pointer !important;
    margin: 0 !important;
    vertical-align: middle !important;
}

label.admin-toggle input[type="checkbox"] {
    position: absolute !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    pointer-events: none !important;
}

label.admin-toggle .admin-toggle-track {
    display: inline-block !important;
    width: 44px !important;
    height: 24px !important;
    background-color: #ccc !important;
    border-radius: 12px !important;
    position: relative !important;
    transition: background-color 0.2s ease !important;
    flex-shrink: 0 !important;
}

label.admin-toggle .admin-toggle-track::after {
    content: '' !important;
    position: absolute !important;
    width: 18px !important;
    height: 18px !important;
    border-radius: 50% !important;
    background-color: #fff !important;
    top: 3px !important;
    left: 3px !important;
    transition: transform 0.2s ease !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

label.admin-toggle.is-checked .admin-toggle-track {
    background-color: #1a3a5c !important;
}

label.admin-toggle.is-checked .admin-toggle-track::after {
    transform: translateX(20px) !important;
}

label.admin-toggle:focus-within .admin-toggle-track {
    box-shadow: 0 0 0 3px rgba(26, 58, 92, 0.2) !important;
}

label.admin-toggle:hover .admin-toggle-track {
    opacity: 0.9 !important;
}