/* ==========================================================================
   CI THEME OVERRIDES (BOOTSTRAP PRIMARY -> #2d8dc0)
   ========================================================================== */

/* Global (wirkt für Bootstrap-Komponenten, die CSS-Variablen verwenden) */
:root {
    --ci-blue: #2d8dc0;
    --ci-blue-rgb: 45, 141, 192;

    /* Bootstrap 5 Theme Vars */
    --bs-primary: var(--ci-blue);
    --bs-primary-rgb: var(--ci-blue-rgb);

    --bs-link-color: var(--ci-blue);
    --bs-link-hover-color: var(--ci-blue);

    --bs-focus-ring-color: rgba(45, 141, 192, 0.35);

    /* Optional: falls du auch "info" CI-blau willst (statt Bootstrap-cyan) */
    --bs-info: var(--ci-blue);
    --bs-info-rgb: var(--ci-blue-rgb);

    /* Action Buttons */
    --action-btn-size: 34px;
    --action-btn-radius: .375rem;
    --action-btn-border: #dee2e6;
    --action-btn-bg: #fff;
    --action-btn-bg-hover: #f8f9fa;
}

/* Scoped (falls TYPO3/Plugin-Bereich gekapselt ist) */
.tx-jn-phpcontentelement {
    --ci-blue: #2d8dc0;
    --ci-blue-rgb: 45, 141, 192;

    --bs-primary: var(--ci-blue);
    --bs-primary-rgb: var(--ci-blue-rgb);

    --bs-link-color: var(--ci-blue);
    --bs-link-hover-color: var(--ci-blue);

    --bs-focus-ring-color: rgba(45, 141, 192, 0.35);

    --bs-info: var(--ci-blue);
    --bs-info-rgb: var(--ci-blue-rgb);
}

/* ==========================================================================
   KAS SIDEBAR NAV – sauberer Active/Hover State (CI #2d8dc0)
   Markup: #sidebar .kas-nav-link + .kas-nav-active
   ========================================================================== */

#sidebar .kas-nav-link {
    position: relative;
    border-radius: .5rem;
    padding: .55rem .75rem;
    color: #495057;
    background-color: var(--kas-nav-bg, #f1f3f5);
    transition: background-color .15s ease-in-out,
                color .15s ease-in-out,
                box-shadow .15s ease-in-out;
}

/* Icons erben die Link-Farbe */
#sidebar .kas-nav-link i {
    color: currentColor;
}

/* Hover (nicht active) – dezenter Hintergrund, CI Text */
#sidebar .kas-nav-link:not(.kas-nav-active):not(.text-danger):hover {
    background-color: rgba(45, 141, 192, 0.10);
    color: #2d8dc0;
}

/* Active State – CI Blau, weißer Text, klare Kontur */
#sidebar .kas-nav-link.kas-nav-active {
    background-color: #2d8dc0 !important;
    color: #fff !important;
    box-shadow: 0 0 0 .2rem rgba(45, 141, 192, 0.25);
}

/* Optional: linker Akzent-Balken (dezent, modern) */
#sidebar .kas-nav-link.kas-nav-active::before {
    content: '';
    position: absolute;
    left: 0;
    top: .35rem;
    bottom: .35rem;
    width: 4px;
    border-radius: 0 .25rem .25rem 0;
    background-color: rgba(255, 255, 255, 0.85);
}

/* Fokus (Tastatur) */
#sidebar .kas-nav-link:focus-visible {
    outline: none;
    box-shadow: 0 0 0 .25rem rgba(45, 141, 192, 0.35);
}

/* Logout-Link (text-danger) soll rot bleiben, aber Hover sauber */
#sidebar .kas-nav-link.text-danger {
    color: #dc3545 !important;
}

#sidebar .kas-nav-link.text-danger:hover {
    background-color: #fff0f0; /* wie bei dir inline angedeutet */
    color: #dc3545 !important;
}
code {
    font-size: 16px;
}




/* ==========================================================================
   GLOBAL LAYOUT
   ========================================================================== */

body {
    max-width: 1920px;
    margin: 0 auto;
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
}

.tx-jn-phpcontentelement .navbar {
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    position: relative;
    left: 0;
    top: 0;
    right: 0;
    z-index: 97;
    background-color: #fff !important;
    box-shadow: none;
}

.tx-jn-phpcontentelement .bg-light {
    --bs-bg-opacity: 1;
    background-color: var(--bs-white) !important;
}

.tx-jn-phpcontentelement .text-black {
    z-index: -99999 !important;
}

.bg-light {
    background-color: #ffffff !important;
}

main {
    background-color: #fff;
}

.sidebar {
    /*min-height: 100vh;*/
}

@media (max-width: 991.98px) {
    .sidebar {
        min-height: auto;
    }
}

/* ==========================================================================
   NAVIGATION (SIDEBAR / NAV-PILLS / ACTIVE STATES) -> CI BLUE
   ========================================================================== */

/* Häufiges Pattern: Sidebar mit .nav-pills */
.sidebar .nav-pills .nav-link.active,
.sidebar .nav-pills .show > .nav-link,
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: var(--ci-blue) !important;
    color: #fff !important;
}

/* Hover in Sidebar */
.sidebar .nav-pills .nav-link:hover,
.nav-pills .nav-link:hover {
    color: var(--ci-blue) !important;
}

/* Falls du .list-group für Sidebar nutzt */
.sidebar .list-group-item.active,
.list-group-item.active {
    background-color: var(--ci-blue) !important;
    border-color: var(--ci-blue) !important;
    color: #fff !important;
}

/* Links im Nav allgemein */
.nav-link,
a {
    /* nur Bootstrap-Links, die nicht explizit anders gefärbt sind */
}

a.text-primary,
.text-primary {
    color: var(--ci-blue) !important;
}

.bg-primary {
    background-color: var(--ci-blue) !important;
}

.border-primary {
    border-color: var(--ci-blue) !important;
}

/* ==========================================================================
   TABS
   ========================================================================== */

/* Tabs: klarer, nicht aktive Tabs sichtbarer */
.nav-tabs .nav-link {
    color: #495057;
}

.nav-tabs .nav-link:not(.active) {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-bottom: none;
}

.nav-tabs .nav-link.active {
    background-color: #fff;
    border-bottom: 1px solid #fff;
    color: var(--ci-blue) !important;
}

/* ==========================================================================
   BUTTONS (PRIMARY) -> CI BLUE
   ========================================================================== */

.btn-primary {
    background-color: var(--ci-blue) !important;
    border-color: var(--ci-blue) !important;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--ci-blue) !important;
    border-color: var(--ci-blue) !important;
    filter: brightness(0.93);
}

.btn-outline-primary {
    color: var(--ci-blue) !important;
    border-color: var(--ci-blue) !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background-color: var(--ci-blue) !important;
    border-color: var(--ci-blue) !important;
    color: #fff !important;
}

.btn-link {
    color: var(--ci-blue) !important;
}

.btn-link:hover,
.btn-link:focus {
    color: var(--ci-blue) !important;
    filter: brightness(0.93);
}

/* Focus Ring (Bootstrap) */
.btn:focus,
.btn:focus-visible {
    box-shadow: 0 0 0 .25rem rgba(45, 141, 192, .35) !important;
}

/* ==========================================================================
   STATUS-MELDUNGEN (ALERTS / BADGES) -> CI BLUE
   ========================================================================== */

/* Viele "Status-Meldungen" sind Alerts */
.alert-primary {
    background-color: rgba(45, 141, 192, 0.12) !important;
    border-color: rgba(45, 141, 192, 0.35) !important;
    color: #1f5f82 !important;
}

.alert-primary .alert-link {
    color: #1f5f82 !important;
    text-decoration: underline;
}

/* Du nutzt in deinem Code .alert-info – das ziehen wir ebenfalls auf CI */
.alert.alert-info {
    background-color: rgba(45, 141, 192, 0.12) !important;
    border-color: rgba(45, 141, 192, 0.35) !important;
    color: #1f5f82 !important;
}

.alert.alert-info .alert-link {
    color: #1f5f82 !important;
    text-decoration: underline;
}

/* Badges */
.badge.bg-primary,
.badge.text-bg-primary,
.text-bg-primary {
    background-color: var(--ci-blue) !important;
}

/* ==========================================================================
   PAGINATION / DROPDOWN ACTIVE (häufige Bootstrap Blaureste)
   ========================================================================== */

.page-link {
    color: var(--ci-blue) !important;
}

.page-link:hover,
.page-link:focus {
    color: var(--ci-blue) !important;
    box-shadow: 0 0 0 .25rem rgba(45, 141, 192, .35) !important;
}

.page-item.active .page-link {
    background-color: var(--ci-blue) !important;
    border-color: var(--ci-blue) !important;
    color: #fff !important;
}

.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--ci-blue) !important;
    color: #fff !important;
}

/* ==========================================================================
   EINHEITLICHE ACTION-BUTTONS / ICONS
   (funktioniert ohne HTML-Anpassungen)
   ========================================================================== */

/* Wrapper für Action-Spalten */
.action-col {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: .5rem;
}

.action-col .btn,
.action-col .btn-icon,
.action-col span {
    margin: 0 !important;
}

/* NEUES PATTERN: .btn-icon */
.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--action-btn-size);
    height: var(--action-btn-size);
    border: 1px solid var(--action-btn-border);
    border-radius: var(--action-btn-radius);
    background-color: var(--action-btn-bg);
    color: #495057;
    text-decoration: none;
    vertical-align: middle;
    transition: background-color .15s ease-in-out,
                border-color .15s ease-in-out,
                color .15s ease-in-out;
}

.btn-icon:hover {
    background-color: var(--action-btn-bg-hover);
    text-decoration: none;
}

/* ==========================================================================
   BOOTSTRAP BUTTONS IN ACTION-SPALTEN (ANGLEICHEN)
   ========================================================================== */

td.text-end .btn.btn-sm,
td.text-end .btn.btn-sm.btn-outline-primary,
td.text-end .btn.btn-sm.btn-outline-danger {
    width: var(--action-btn-size);
    height: var(--action-btn-size);
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--action-btn-radius);
    background-color: var(--action-btn-bg);
    transition: background-color .15s ease-in-out,
                border-color .15s ease-in-out,
                color .15s ease-in-out;
}

/* Icon sauber zentrieren */
td.text-end .btn.btn-sm i {
    line-height: 1;
}

/* ==========================================================================
   RICHTIGE HOVER-FARBEN (CI-BLAU / ROT)
   ========================================================================== */

/* Bearbeiten (Primary / CI-Blau) */
td.text-end .btn.btn-sm.btn-outline-primary:hover,
td.text-end .btn.btn-sm.btn-outline-primary:focus {
    background-color: var(--ci-blue) !important;
    border-color: var(--ci-blue) !important;
    color: #fff !important;
}

td.text-end .btn.btn-sm.btn-outline-primary:hover i {
    color: #fff;
}

/* Löschen (Danger / Rot) */
td.text-end .btn.btn-sm.btn-outline-danger:hover,
td.text-end .btn.btn-sm.btn-outline-danger:focus {
    background-color: #dc3545;
    border-color: #dc3545;
    color: #fff;
}

td.text-end .btn.btn-sm.btn-outline-danger:hover i {
    color: #fff;
}

/* ==========================================================================
   STATUS-ICONS ALS <span class="text-muted"> (NICHT KLICKBAR)
   ========================================================================== */

td.text-end span.text-muted {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--action-btn-size);
    height: var(--action-btn-size);
    border: 1px solid var(--action-btn-border);
    border-radius: var(--action-btn-radius);
    background-color: var(--action-btn-bg);
    color: #6c757d;
    vertical-align: middle;
}

td.text-end span.text-muted:hover {
    background-color: var(--action-btn-bg-hover);
}

/* ==========================================================================
   ABSTÄNDE (FALLS KEIN .action-col GENUTZT WIRD)
   ========================================================================== */

td.text-end .btn.btn-sm + .btn.btn-sm,
td.text-end .btn.btn-sm + span.text-muted,
td.text-end span.text-muted + .btn.btn-sm,
td.text-end span.text-muted + span.text-muted,
td.text-end .btn-icon + .btn-icon,
td.text-end .btn-icon + span.text-muted,
td.text-end span.text-muted + .btn-icon {
    margin-left: .5rem;
}

/* ==========================================================================
   STATUS: IN BEARBEITUNG (SANDUHR)
   ========================================================================== */

.status-progress,
td.text-end span.text-muted.status-progress {
    color: #856404;
    border-color: #ffeeba;
    background-color: #fff;
}

/* Sanduhr-Animation */
.status-progress i {
    animation: hourglass-spin 1.6s linear infinite;
}

@keyframes hourglass-spin {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(180deg); }
}

/* ==========================================================================
   FONTS: MONTSERRAT
   ========================================================================== */

/* montserrat-300 - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/montserrat/montserrat-v15-latin-300.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/montserrat/montserrat-v15-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/montserrat/montserrat-v15-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/montserrat/montserrat-v15-latin-300.woff') format('woff'), /* Modern Browsers */
       url('../fonts/montserrat/montserrat-v15-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/montserrat/montserrat-v15-latin-300.svg#Montserrat') format('svg'); /* Legacy iOS */
}

/* montserrat-regular - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/montserrat/montserrat-v15-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/montserrat/montserrat-v15-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/montserrat/montserrat-v15-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/montserrat/montserrat-v15-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/montserrat/montserrat-v15-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/montserrat/montserrat-v15-latin-regular.svg#Montserrat') format('svg'); /* Legacy iOS */
}

/* montserrat-500 - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/montserrat/montserrat-v15-latin-500.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/montserrat/montserrat-v15-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/montserrat/montserrat-v15-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/montserrat/montserrat-v15-latin-500.woff') format('woff'), /* Modern Browsers */
       url('../fonts/montserrat/montserrat-v15-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/montserrat/montserrat-v15-latin-500.svg#Montserrat') format('svg'); /* Legacy iOS */
}

/* montserrat-600 - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/montserrat/montserrat-v15-latin-600.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/montserrat/montserrat-v15-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/montserrat/montserrat-v15-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/montserrat/montserrat-v15-latin-600.woff') format('woff'), /* Modern Browsers */
       url('../fonts/montserrat/montserrat-v15-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/montserrat/montserrat-v15-latin-600.svg#Montserrat') format('svg'); /* Legacy iOS */
}

/* montserrat-700 - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/montserrat/montserrat-v15-latin-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/montserrat/montserrat-v15-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/montserrat/montserrat-v15-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/montserrat/montserrat-v15-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/montserrat/montserrat-v15-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/montserrat/montserrat-v15-latin-700.svg#Montserrat') format('svg'); /* Legacy iOS */
}

/* montserrat-800 - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  src: url('../fonts/montserrat/montserrat-v15-latin-800.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/montserrat/montserrat-v15-latin-800.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/montserrat/montserrat-v15-latin-800.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/montserrat/montserrat-v15-latin-800.woff') format('woff'), /* Modern Browsers */
       url('../fonts/montserrat/montserrat-v15-latin-800.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/montserrat/montserrat-v15-latin-800.svg#Montserrat') format('svg'); /* Legacy iOS */
}