@import url("https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700&family=Space+Grotesk:wght@400;500;600;700&display=swap");

/* RisingLiberty – Keycloak Login; Dark: warmes Braun/Gold statt Blau */

html[data-theme="dark"] {
    color-scheme: dark;
    --rl-ease: cubic-bezier(0.2, 0.9, 0.2, 1);
    --rl-radius: 22px;
    --rl-text: #f2e8de;
    --rl-text-dim: #a89888;
    --rl-title: #f6ede3;
    --rl-label: #d4c4b4;
    --rl-header-title: #e8d4b8;
    --rl-link-muted: #b8a898;
    --rl-primary: #c9a45c;
    --rl-primary-hover: #dcc070;
    --rl-accent: #c9a45c;
    --rl-accent-2: #8b5a2b;
    --rl-border: rgba(180, 140, 100, 0.32);
    --rl-border-strong: rgba(220, 170, 110, 0.48);
    /* Liquid-Glass: eher transparent, weniger Vollton-Blau */
    --rl-card: rgba(38, 26, 18, 0.28);
    --rl-card-deep: rgba(16, 11, 8, 0.42);
    --rl-glass-shadow:
        0 20px 56px rgba(0, 0, 0, 0.42),
        inset 0 0 0 1px rgba(255, 230, 200, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
    --rl-page-grad:
        radial-gradient(900px 640px at 6% 0%, rgba(120, 70, 45, 0.38), transparent 55%),
        radial-gradient(700px 520px at 96% 12%, rgba(60, 40, 28, 0.45), transparent 58%),
        linear-gradient(180deg, #0b0705 0%, #150f0b 45%, #0a0604 100%);
    --rl-input-bg: rgba(8, 6, 5, 0.45);
    --rl-input-hover: rgba(200, 150, 100, 0.28);
    --rl-btn-sec: rgba(255, 255, 255, 0.05);
    --rl-btn-sec-txt: #e0d0c0;
    --rl-error-txt: #f0a0a0;
    --rl-data-bg: rgba(18, 12, 9, 0.55);
    --rl-header-shadow: 0 0 20px rgba(200, 150, 80, 0.15);
    --rl-header-title-shadow: 0 0 18px rgba(200, 150, 90, 0.2);
    --rl-focus-ring: rgba(210, 160, 90, 0.45);
    --rl-tile-halo: rgba(200, 150, 100, 0.28);
    --rl-alert-dang-bg: rgba(80, 28, 22, 0.45);
    --rl-alert-dang-brd: rgba(200, 100, 90, 0.45);
    --rl-alert-succ-bg: rgba(32, 70, 36, 0.35);
    --rl-alert-succ-brd: rgba(100, 180, 100, 0.4);
    --rl-alert-warn-bg: rgba(90, 60, 20, 0.45);
    --rl-alert-warn-brd: rgba(220, 170, 80, 0.5);
    --rl-alert-info-bg: rgba(55, 40, 28, 0.55);
    --rl-alert-info-brd: rgba(180, 150, 100, 0.42);
    --rl-alert-dang-txt: #ffe8e4;
    --rl-alert-succ-txt: #d8f0dc;
    --rl-alert-warn-txt: #fff4d8;
    --rl-alert-info-txt: #f0e6d8;
    --rl-primary-border: rgba(200, 160, 90, 0.5);
    --rl-primary-grad-1: #a87840;
    --rl-primary-grad-2: #5c3d22;
    --rl-primary-inset: rgba(255, 210, 150, 0.12);
    --rl-btn-primary-txt: #fff7ed;
    --rl-bar: linear-gradient(90deg, #6b3d1e, #c9a45c, #4a2e18);
    min-height: 100%;
    background: var(--rl-page-grad) !important;
    background-color: #0a0604 !important;
    --pf-v5-global--BackgroundColor--dark-100: #0a0604;
    --pf-v5-global--BackgroundColor--dark-200: #150f0b;
    --pf-v5-global--BackgroundColor--dark-300: #1c1410;
}

html[data-theme="light"] {
    color-scheme: light;
    --rl-ease: cubic-bezier(0.2, 0.9, 0.2, 1);
    --rl-radius: 22px;
    --rl-text: #2a333c;
    --rl-text-dim: #4a5a6a;
    --rl-title: #1f2a35;
    --rl-label: #3a4a5a;
    --rl-header-title: #2d3842;
    --rl-link-muted: #3d4d5c;
    --rl-primary: #2d6a9a;
    --rl-primary-hover: #1f4f78;
    --rl-accent: #2d6a9a;
    --rl-accent-2: #3a5568;
    --rl-border: rgba(80, 115, 140, 0.35);
    --rl-border-strong: rgba(60, 105, 145, 0.55);
    --rl-card: rgba(255, 255, 255, 0.28);
    --rl-card-deep: rgba(210, 220, 232, 0.4);
    --rl-glass-shadow:
        0 18px 40px rgba(30, 50, 80, 0.14),
        inset 0 0 0 1px rgba(255, 255, 255, 0.55);
    --rl-page-grad:
        radial-gradient(880px 520px at 8% 0%, rgba(90, 145, 185, 0.38), transparent 58%),
        radial-gradient(720px 480px at 92% 12%, rgba(130, 155, 175, 0.32), transparent 58%),
        linear-gradient(180deg, #98b0c3 0%, #a4b1c0 45%, #929fad 100%);
    --rl-input-bg: rgba(255, 255, 255, 0.92);
    --rl-input-hover: rgba(100, 160, 200, 0.45);
    --rl-btn-sec: rgba(255, 255, 255, 0.55);
    --rl-btn-sec-txt: #2a4050;
    --rl-error-txt: #a02828;
    --rl-data-bg: rgba(240, 244, 248, 0.9);
    --rl-header-shadow: 0 2px 12px rgba(40, 70, 100, 0.12);
    --rl-header-title-shadow: none;
    --rl-focus-ring: rgba(60, 120, 180, 0.4);
    --rl-tile-halo: rgba(100, 150, 200, 0.25);
    --rl-alert-dang-bg: rgba(255, 220, 220, 0.9);
    --rl-alert-dang-brd: rgba(200, 80, 80, 0.4);
    --rl-alert-succ-bg: rgba(210, 245, 225, 0.95);
    --rl-alert-succ-brd: rgba(50, 140, 90, 0.45);
    --rl-alert-warn-bg: rgba(255, 240, 210, 0.95);
    --rl-alert-warn-brd: rgba(200, 140, 50, 0.45);
    --rl-alert-info-bg: rgba(220, 235, 250, 0.95);
    --rl-alert-info-brd: rgba(80, 130, 180, 0.4);
    --rl-alert-dang-txt: #5a1010;
    --rl-alert-succ-txt: #144022;
    --rl-alert-warn-txt: #4a3000;
    --rl-alert-info-txt: #1a3048;
    --rl-primary-border: rgba(60, 105, 145, 0.45);
    --rl-primary-grad-1: #4a8ab8;
    --rl-primary-grad-2: #3a5568;
    --rl-primary-inset: rgba(255, 255, 255, 0.12);
    --rl-btn-primary-txt: #f8fcff;
    --rl-bar: linear-gradient(90deg, #4a7a9a, #5a8eb8, #6a7a88);
    min-height: 100%;
    background: var(--rl-page-grad) !important;
    background-color: #a2aeba !important;
}

body#keycloak-bg {
    margin: 0;
    min-height: 100vh;
    font-family: "Space Grotesk", "Inter", "Segoe UI", system-ui, sans-serif !important;
    font-size: clamp(15px, 0.35vw + 13px, 17px);
    line-height: 1.55;
    color: var(--rl-text) !important;
    background: var(--rl-page-grad) !important;
    background-color: #0a0604 !important;
    background-image: var(--rl-page-grad) !important;
    background-attachment: fixed !important;
    --pf-v5-c-page--BackgroundColor: transparent !important;
    --pf-v5-c-login__PageBackgroundColor: transparent !important;
}

html[data-theme="light"] body#keycloak-bg {
    background: var(--rl-page-grad) !important;
    background-color: #a2aeba !important;
    background-image: var(--rl-page-grad) !important;
}

/* PatternFly v5 Dark-Theme-Blau überschreiben (Hintergrund) */
html.pf-v5-theme-dark body#keycloak-bg,
html.pf-v5-theme-dark,
html[data-theme="dark"] {
    --pf-v5-c-page--BackgroundColor: transparent !important;
    --pf-v5-c-login--BackgroundColor: transparent !important;
}

.pf-v5-c-login,
.pf-v5-c-login__container {
    background: transparent !important;
    min-height: auto;
    color: var(--rl-text) !important;
}

#kc-content-wrapper,
.pf-v5-c-page,
.pf-v5-c-page__main-section {
    background: transparent !important;
}

#kc-header {
    margin-bottom: 0.6rem;
}

#kc-header-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-top: 0.2rem;
    background: none !important;
    background-image: none !important;
}

/* Keycloak/PatternFly: nur das klickbare Logo (#rl-kc-header-logo) bleibt – alle sonstigen Bilder im Header aus */
#kc-header * img:not(#rl-kc-header-logo),
/* Theme nutzt nur <img> im Link, kein <picture> – ein evtl. PF-<picture> ist das Doppel-Logo */
#kc-header picture {
    display: none !important;
    width: 0 !important;
    max-width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    visibility: hidden !important;
    position: absolute !important;
    left: -9999px !important;
    clip: rect(0, 0, 0, 0) !important;
    pointer-events: none !important;
}

/* Eingeschobene Brand-Bereiche (z. B. zusaetzliches <div>/<img> vor dem Link) */
#kc-header-wrapper > *:not(a.rl-kc-logo-link):not(p.rl-kc-realm-name) {
    display: none !important;
}

#kc-header #kc-header-wrapper > svg {
    display: none !important;
}

#kc-header .pf-v5-c-brand::before,
#kc-header .pf-v5-c-brand::after,
#kc-header-wrapper.pf-v5-c-brand::before,
#kc-header-wrapper.pf-v5-c-brand::after {
    content: none !important;
    display: none !important;
    background: none !important;
    background-image: none !important;
    mask: none !important;
    -webkit-mask: none !important;
}

.rl-kc-logo-link,
.rl-kc-logo-btn {
    display: inline-block;
    line-height: 0;
    border: none;
    padding: 0;
    margin: 0 0 0.5rem;
    background: transparent;
    cursor: pointer;
    border-radius: 14px;
    transition: transform 0.25s var(--rl-ease), filter 0.25s var(--rl-ease), box-shadow 0.25s var(--rl-ease);
    -webkit-tap-highlight-color: transparent;
    text-decoration: none;
}

.rl-kc-logo-link:hover,
.rl-kc-logo-btn:hover {
    transform: scale(1.04);
    filter: brightness(1.06);
}

.rl-kc-logo-link:focus-visible {
    outline: 2px solid var(--rl-primary);
    outline-offset: 4px;
}

.rl-kc-logo {
    display: block;
    width: 100px;
    height: auto;
    max-width: min(100px, 28vw);
    margin: 0 auto;
    border-radius: 10px;
}

.rl-kc-realm-name {
    margin: 0;
    font-family: "Orbitron", "Space Grotesk", sans-serif !important;
    font-size: clamp(0.9rem, 2.2vw, 1.2rem) !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    line-height: 1.3 !important;
    color: var(--rl-header-title) !important;
    text-shadow: var(--rl-header-title-shadow) !important;
}

.pf-v5-c-login__header {
    margin-bottom: 0.25rem !important;
}

#kc-page-title {
    font-family: "Orbitron", "Space Grotesk", sans-serif !important;
    color: var(--rl-title) !important;
    letter-spacing: 0.04em !important;
    font-weight: 700 !important;
}

.pf-v5-c-login__main {
    --pf-v5-c-login__main--BackgroundColor: transparent !important;
    --pf-v5-c-login--BackgroundColor: transparent !important;
    position: relative;
    overflow: hidden;
    background: linear-gradient(165deg, var(--rl-card) 0%, var(--rl-card-deep) 100%) !important;
    background-color: rgba(18, 12, 9, 0.25) !important;
    border: 1px solid rgba(200, 170, 130, 0.22) !important;
    border-radius: var(--rl-radius) !important;
    backdrop-filter: blur(26px) saturate(1.35) !important;
    -webkit-backdrop-filter: blur(26px) saturate(1.35) !important;
    box-shadow: var(--rl-glass-shadow) !important;
    padding: 1.5rem 1.35rem 1.35rem;
}

html[data-theme="light"] .pf-v5-c-login__main {
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.4), rgba(200, 210, 222, 0.32)) !important;
    background-color: rgba(255, 255, 255, 0.22) !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    backdrop-filter: blur(24px) saturate(1.2) !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.2) !important;
}

html[data-theme="dark"] .pf-v5-c-login__main,
html.pf-v5-theme-dark .pf-v5-c-login__main {
    background: linear-gradient(160deg, rgba(48, 32, 22, 0.35), rgba(12, 8, 6, 0.45)) !important;
    background-color: rgba(20, 14, 10, 0.3) !important;
    border-color: rgba(200, 170, 120, 0.2) !important;
    box-shadow:
        0 24px 60px rgba(0, 0, 0, 0.45),
        inset 0 0 0 1px rgba(255, 220, 180, 0.07) !important;
}

.pf-v5-c-login__main::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--rl-bar);
    opacity: 0.85;
    pointer-events: none;
    border-radius: var(--rl-radius) var(--rl-radius) 0 0;
}

.pf-v5-c-login__main::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--rl-radius);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
    pointer-events: none;
    z-index: 0;
}

.pf-v5-c-login__main-header,
.pf-v5-c-login__main-body {
    position: relative;
    z-index: 1;
    color: var(--rl-text) !important;
}

.pf-v5-c-login__main-header {
    padding-bottom: 0.25rem;
}

.pf-v5-c-login__main-body {
    padding-top: 0.35rem;
}

.pf-v5-c-login__main-footer {
    position: relative;
    z-index: 1;
    border-top: 1px solid var(--rl-border) !important;
    padding-top: 0.9rem !important;
    margin-top: 0.2rem;
}

.pf-v5-c-login__main-footer-band,
.pf-v5-c-login__main-footer-links {
    border-color: transparent !important;
}

.pf-v5-c-form__label,
.pf-v5-c-form__label-text {
    color: var(--rl-label) !important;
    font-weight: 600 !important;
}

.pf-v5-c-form-control,
select.pf-v5-c-form-control {
    background: var(--rl-input-bg) !important;
    border: 1px solid var(--rl-border) !important;
    color: var(--rl-text) !important;
    border-radius: 12px !important;
    transition: border-color 0.2s var(--rl-ease), box-shadow 0.2s var(--rl-ease) !important;
}

.pf-v5-c-form-control:hover {
    border-color: var(--rl-input-hover) !important;
}

.pf-v5-c-form-control:focus-within,
.pf-v5-c-form-control:focus {
    border-color: var(--rl-border-strong) !important;
    box-shadow: 0 0 0 1px var(--rl-focus-ring) !important;
}

.pf-v5-c-form-control input,
.pf-v5-c-form-control textarea {
    color: var(--rl-text) !important;
    background: transparent !important;
}

.pf-v5-c-form-control::placeholder,
.pf-v5-c-form-control input::placeholder {
    color: var(--rl-text-dim) !important;
    opacity: 0.9;
}

.pf-v5-c-button.pf-m-control {
    color: var(--rl-primary) !important;
    border-color: var(--rl-border) !important;
    background: var(--rl-btn-sec) !important;
    border-radius: 10px !important;
}

.pf-v5-c-button.pf-m-primary {
    border-radius: 12px !important;
    border: 1px solid var(--rl-primary-border) !important;
    background: linear-gradient(180deg, var(--rl-primary-grad-1), var(--rl-primary-grad-2)) !important;
    color: var(--rl-btn-primary-txt) !important;
    font-weight: 600 !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
    transition: transform 0.2s var(--rl-ease), border-color 0.2s var(--rl-ease), filter 0.2s var(--rl-ease) !important;
}

html[data-theme="light"] .pf-v5-c-button.pf-m-primary {
    color: #eef4f8 !important;
    box-shadow: 0 8px 20px rgba(30, 55, 80, 0.18), inset 0 0 16px var(--rl-primary-inset) !important;
}

.pf-v5-c-button.pf-m-primary:hover {
    border-color: var(--rl-border-strong) !important;
    filter: brightness(1.05);
    transform: translateY(-1px);
}

.pf-v5-c-button.pf-m-secondary,
.pf-v5-c-button.pf-m-link,
.pf-v5-c-login__main-footer-links-item-link {
    color: var(--rl-btn-sec-txt) !important;
}

.pf-v5-c-button.pf-m-secondary {
    border-color: var(--rl-border) !important;
    background: var(--rl-btn-sec) !important;
    border-radius: 12px !important;
}

.pf-v5-c-button.pf-m-link:hover {
    color: var(--rl-primary-hover) !important;
}

.pf-v5-c-helper-text__item-text {
    color: var(--rl-text-dim) !important;
}

.pf-v5-c-helper-text__item-text.pf-m-error,
.kc-feedback-text {
    color: var(--rl-error-txt) !important;
}

.pf-v5-c-login a {
    color: var(--rl-link-muted) !important;
    font-weight: 500;
}

.pf-v5-c-login a:hover {
    color: var(--rl-primary) !important;
}

.pf-v5-c-alert {
    border-radius: 12px !important;
    border-width: 1px !important;
}

.pf-v5-c-alert.pf-m-inline.pf-m-danger,
.pf-v5-c-alert.pf-m-inline[class*="danger"] {
    background: var(--rl-alert-dang-bg) !important;
    border-color: var(--rl-alert-dang-brd) !important;
    color: var(--rl-alert-dang-txt) !important;
}

.pf-v5-c-alert.pf-m-inline.pf-m-success {
    background: var(--rl-alert-succ-bg) !important;
    border-color: var(--rl-alert-succ-brd) !important;
    color: var(--rl-alert-succ-txt) !important;
}

.pf-v5-c-alert.pf-m-inline.pf-m-warning {
    background: var(--rl-alert-warn-bg) !important;
    border-color: var(--rl-alert-warn-brd) !important;
    color: var(--rl-alert-warn-txt) !important;
}

.pf-v5-c-alert.pf-m-inline.pf-m-info {
    background: var(--rl-alert-info-bg) !important;
    border-color: var(--rl-alert-info-brd) !important;
    color: var(--rl-alert-info-txt) !important;
}

.pf-v5-c-check__label {
    color: var(--rl-label) !important;
}

.pf-v5-c-check__input {
    accent-color: var(--rl-primary);
}

.pf-v5-c-data-list,
.pf-v5-c-tile {
    --pf-v5-c-data-list--BorderTopColor: var(--rl-border);
    border-color: var(--rl-border) !important;
    background: var(--rl-data-bg) !important;
    border-radius: 12px !important;
}

.pf-v5-c-tile.pf-m-selected {
    border-color: var(--rl-border-strong) !important;
    box-shadow: 0 0 0 1px var(--rl-tile-halo) !important;
}

.select-auth-box-headline {
    color: var(--rl-text) !important;
}

.select-auth-box-desc {
    color: var(--rl-text-dim) !important;
}

/* Abstand unten, kein doppelter Marken-Text (Logo + Realmname reichen) */
.rl-kc-footer {
    width: 100%;
    min-height: 0.5rem;
    padding: 0 0 1.25rem;
    box-sizing: border-box;
}

.rl-kc-footer__spacer {
    height: 0.5rem;
}

/* PatternFly-Standard (blauer Primär-Button) im Dark-Modus hart überschreiben */
html[data-theme="dark"] .pf-v5-c-button.pf-m-primary,
html.pf-v5-theme-dark .pf-v5-c-button.pf-m-primary {
    background: linear-gradient(180deg, #a87840, #5c3d22) !important;
    background-image: linear-gradient(180deg, #a87840, #5c3d22) !important;
    border-color: rgba(200, 160, 90, 0.55) !important;
    color: #fff7ed !important;
}

/* Logout-Bestätigung (Keycloak): Abbrechen unter dem Logout-Button */
.rl-kc-logout-cancel-wrap {
    margin: 0.75rem 0 0;
    text-align: center;
}

.rl-kc-logout-cancel {
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 0.12em;
    color: rgba(180, 200, 220, 0.95) !important;
}

html[data-theme="light"] .rl-kc-logout-cancel {
    color: rgba(30, 70, 110, 0.95) !important;
}

.rl-kc-logout-cancel:hover {
    color: #fff4e8 !important;
}

html[data-theme="light"] .rl-kc-logout-cancel:hover {
    color: #0a3055 !important;
}