/*
  JV Custom Portal CSS – Refactored
  --------------------------------------------------

  Struktur
  1) Design Tokens (Variablen)
  2) Base / Reset / Typografie
  3) Utilities (Text, Hintergrund, Border)
  4) Components (Buttons, Badges, Form, Avatar, Navigation, Pagination, Tooltip, CKEditor, Cards, Dropdown)
  5) Helpers / Effects
  6) i18n / Misc
-------------------------------------------------- */

/* 1) Design Tokens -------------------------------------------------------- */
:root {
    /* Brand Colors */
    --color-primary: #052d41;
    --color-success: #9cbe16;
    --color-warning: #eea535;
    --color-info: #9b59b6;
    --color-danger: #e73363;
    --color-orange: #ff681f;
    --color-grey: #e3e3e3;
    --color-white: #ffffff;
    --color-black: #000000;
    /* Typography */
    --font-sans: "Inter", Helvetica, Arial, sans-serif;
    --font-heading: "Montserrat", var(--font-sans);
    --heading-transform: uppercase;
    --heading-letterspacing: 2px;
    /* Effects */
    --focus-ring-color: var(--color-primary);
    --focus-ring-shadow: 0 0 0 0.2rem rgba(5, 45, 65, 0.25);
    /* Opacities */
    --alpha-xxs: 0.05;
    --alpha-xs: 0.1;
    --alpha-sm: 0.2;
}

/* 2) Base / Reset / Typografie ------------------------------------------- */
html * {
    font-family: var(--font-sans);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading) !important;
}

h1 {
    text-transform: var(--heading-transform);
    letter-spacing: var(--heading-letterspacing);
}

h4 {
    font-weight: 500;
    text-transform: var(--heading-transform);
    letter-spacing: var(--heading-letterspacing);
}

h5 {
    font-weight: 500;
}

/* Links */
a:hover, a:focus {
    text-decoration-color: var(--color-success);
}

/* 3) Utilities ------------------------------------------------------------- */
/* Text Colors */
.text-primary {
    color: var(--color-primary) !important;
}

.text-success {
    color: var(--color-success) !important;
}

.text-info {
    color: var(--color-info) !important;
}

.text-warning {
    color: var(--color-warning) !important;
}

.text-danger {
    color: var(--color-danger) !important;
}

.text-orange {
    color: var(--color-orange) !important;
}

/* Link Utility Overrides */
a.text-primary:hover,
a.text-primary:focus {
    color: var(--color-success) !important;
}

/* Backgrounds */
.bg-primary {
    background-color: var(--color-primary) !important;
}

.bg-success {
    background-color: var(--color-success) !important;
}

.bg-warning {
    background-color: var(--color-warning) !important;
}

.bg-info {
    background-color: var(--color-info) !important;
}

.bg-danger {
    background-color: var(--color-danger) !important;
}

.bg-grey-enventa {
    background-color: var(--color-grey);
}

/* Backgrounds with Opacity */
.bg-primary-opacity {
    background-color: rgba(5, 45, 65, var(--alpha-sm)) !important;
}

.bg-success-opacity {
    background-color: rgba(156, 190, 22, var(--alpha-xs)) !important;
}

.bg-secondary-opacity {
    background-color: rgba(108, 117, 125, var(--alpha-xs)) !important;
}

.bg-info-opacity {
    background-color: rgba(23, 162, 184, var(--alpha-xs)) !important;
}

.bg-warning-opacity {
    background-color: rgba(239, 166, 53, var(--alpha-xs)) !important;
}

.bg-danger-opacity {
    background-color: rgba(232, 51, 99, var(--alpha-xs)) !important;
}

/* Borders */
.border-primary {
    border-color: var(--color-primary) !important;
}

/* 4) Components ------------------------------------------------------------ */
/* Buttons */
.btn:focus {
    box-shadow: none;
    outline: none;
}

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

    .btn-primary:hover {
        background-color: var(--color-success) !important;
        border-color: var(--color-success) !important;
        color: var(--color-white);
    }

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

    .btn-outline-primary:hover,
    .btn-outline-primary:focus,
    .btn-outline-primary:active {
        color: var(--color-white) !important;
        background-color: var(--color-primary) !important;
        border-color: var(--color-primary) !important;
    }

.btn-success {
    background-color: var(--color-success) !important;
    border-color: var(--color-success) !important;
}

    .btn-success:hover,
    .btn-success:focus {
        filter: brightness(110%) !important;
    }

.btn-warning {
    background-color: var(--color-warning) !important;
    border-color: var(--color-warning) !important;
}

.btn-info {
    background-color: var(--color-info) !important;
    border-color: var(--color-info) !important;
}

.btn-danger {
    background-color: var(--color-danger) !important;
    border-color: var(--color-danger) !important;
}

/* Badges */
.badge-primary, .badge-primary-no-hover:hover {
    background-color: var(--color-primary) !important;
}

.badge-success {
    background-color: var(--color-success) !important;
}

.badge-warning {
    background-color: var(--color-warning) !important;
}

.badge-info {
    background-color: var(--color-info) !important;
}

.badge-outline-info {
    color: var(--color-info);
    border: 1px solid var(--color-info);
    background-color: transparent;
}

.badge-danger {
    background-color: var(--color-danger) !important;
}

/* Forms */
.form-signin {
    width: 100%;
    max-width: 330px;
    padding: 15px;
    margin-inline: auto;
}

.form-control:focus {
    color: var(--color-primary);
    background-color: var(--color-white);
    border-color: var(--color-primary);
    outline: 0;
    /* Einheitliche Focus-Darstellung */
    box-shadow: var(--focus-ring-shadow);
}

/* Pagination */
.page-item.active .page-link {
    z-index: 3;
    color: var(--color-white);
    background-color: var(--color-primary);
    border-color: #007bff; /* belassen für Bootstrap-Kompatibilität */
    border: 1px solid #dee2e6;
}

.page-link {
    color: var(--color-primary);
    border: 1px solid #dee2e6;
}

    .page-link:hover {
        color: var(--color-primary);
    }

    .page-link:focus {
        box-shadow: none;
    }

/* Tooltip */
.tooltip-inner {
    background: var(--color-primary) !important;
    color: var(--color-white) !important;
    font-weight: 700;
}

/* CKEditor */
.ck-editor__editable:not(.ck-editor__nested-editable) {
    min-height: 250px;
    max-height: 750px;
}

.ck-editor__editable > p {
    margin: 0;
}

/* Cards / Images */
.card-img-top {
    max-height: 18rem;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

/* Avatar (gemeinsame Basis + Größenvarianten) */
.avatar,
.avatar-small {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #555555;
    color: var(--color-white);
}

.avatar {
    font-size: 16px;
    width: 3em;
    height: 3em;
}

.avatar-small {
    font-size: 14px;
    width: 3em;
    height: 3em;
}

    .avatar::after,
    .avatar-small::after {
        content: attr(data-label);
        font-family: var(--font-heading) !important;
    }

/* Navigation */
.nav-dropdown-item-main:hover {
    background-color: var(--color-primary);
    color: var(--color-white) !important;
    font-weight: bold !important;
}

/* Dropdowns */
.dropdown-item-custom:hover {
    background: var(--color-success);
}

.dropdown-item:active {
    background-color: rgba(5, 45, 65, var(--alpha-xs)) !important;
}

.dropdown-item.active {
    background-color: rgba(5, 45, 65, var(--alpha-xs)) !important;
    color: var(--color-primary) !important;
    font-weight: bold;
}

/* Fullscreen Image (Vorgang) */
#fullscreen {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.9);
}

#fullscreen-img {
    max-width: 100%;
    max-height: 100%;
}

#close-btn {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 3rem;
    color: var(--color-white);
    cursor: pointer;
}

/* 5) Helpers / Effects ----------------------------------------------------- */
.custom-card-hover:hover {
    transform: scale(1.01);
    box-shadow: 0 10px 20px rgba(0, 0, 0, .12), 0 4px 8px rgba(0, 0, 0, .06);
}

.suggesthover:hover {
    background-color: #f8f9fa;
}

.etts-custom-hover:hover {
    color: var(--color-success) !important;
}

.etts-custom-hover-blue:hover {
    color: var(--color-primary) !important;
}

.etts-custom-hover-btn-blue:hover {
    background-color: var(--color-primary) !important;
}

.etts-custom-hover-btn-white {
    background-color: var(--color-success) !important;
}

    .etts-custom-hover-btn-white:hover {
        background-color: var(--color-white) !important;
        border-color: var(--color-white);
    }

.backlogdetail-tooltip {
    position: absolute;
    z-index: 1;
    visibility: hidden;
    width: 190px;
    background-color: var(--color-black);
    color: var(--color-white);
    text-align: left;
    border-radius: 6px;
}

/* 6) i18n / Misc ----------------------------------------------------------- */
.custom-file-input:lang(de) ~ .custom-file-label::after {
    content: "Durchsuchen";
}

/* Accessibility: Reduzierte Animationen respektieren */
@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        animation: none !important;
    }
}