/* Mr. Fusion · Keycloak Admin Console overrides
 *
 * Vanilla theme that inherits `keycloak.v2`. The admin console is a compiled
 * React/PatternFly v5 SPA — we can override CSS variables and selectors but
 * NOT the component structure.
 *
 * Brand tokens mirror frontend/src/index.css (dark mode).
 */

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

:root {
    /* Brand — pushed darker for admin console */
    --mf-bg: rgb(5, 12, 13);
    --mf-bg-deep: rgb(2, 6, 7);
    --mf-surface: rgb(11, 22, 23);
    --mf-surface-alt: rgb(8, 16, 17);
    --mf-surface-hover: rgb(16, 30, 32);
    --mf-text: rgb(255, 243, 240);
    --mf-text-dim: rgb(195, 214, 214);
    --mf-text-subtle: rgb(98, 128, 128);
    --mf-primary: rgb(171, 227, 227);
    --mf-secondary: rgb(226, 92, 0);
    --mf-accent: rgb(122, 181, 181);
    --mf-border: rgba(171, 227, 227, 0.15);
    --mf-border-strong: rgba(171, 227, 227, 0.4);
    --mf-border-orange: rgba(226, 92, 0, 0.4);

    /* PatternFly v5 global colour overrides — pull the whole UI dark */
    --pf-v5-global--BackgroundColor--100: rgb(5, 12, 13);
    --pf-v5-global--BackgroundColor--200: rgb(8, 16, 17);
    --pf-v5-global--BackgroundColor--light-100: rgb(11, 22, 23);
    --pf-v5-global--BackgroundColor--dark-100: rgb(2, 6, 7);
    --pf-v5-global--BackgroundColor--dark-200: rgb(5, 12, 13);
    --pf-v5-global--BackgroundColor--dark-300: rgb(8, 16, 17);
    --pf-v5-global--Color--100: rgb(255, 243, 240);
    --pf-v5-global--Color--200: rgb(212, 228, 228);
    --pf-v5-global--Color--light-100: rgb(255, 243, 240);
    --pf-v5-global--Color--dark-100: rgb(255, 243, 240);
    --pf-v5-global--Color--dark-200: rgb(212, 228, 228);
    --pf-v5-global--BorderColor--100: rgba(171, 227, 227, 0.2);
    --pf-v5-global--BorderColor--200: rgba(171, 227, 227, 0.15);
    --pf-v5-global--BorderColor--300: rgba(171, 227, 227, 0.1);
    --pf-v5-global--BorderColor--light-100: rgba(171, 227, 227, 0.2);
    --pf-v5-global--BorderColor--dark-100: rgba(171, 227, 227, 0.3);

    /* PatternFly primary / link colours */
    --pf-v5-global--primary-color--100: rgb(226, 92, 0);
    --pf-v5-global--primary-color--200: rgb(255, 110, 0);
    --pf-v5-global--primary-color--light-100: rgb(255, 130, 30);
    --pf-v5-global--primary-color--dark-100: rgb(226, 92, 0);
    --pf-v5-global--link--Color: rgb(171, 227, 227);
    --pf-v5-global--link--Color--hover: rgb(255, 243, 240);

    /* Surfaces used inside cards / dropdowns */
    --pf-v5-global--palette--black-150: rgb(11, 22, 23);
    --pf-v5-global--palette--black-200: rgb(16, 30, 32);
    --pf-v5-global--palette--black-300: rgb(24, 42, 44);
    --pf-v5-global--palette--black-500: rgb(48, 75, 75);
    --pf-v5-global--palette--black-700: rgb(195, 214, 214);
    --pf-v5-global--palette--black-800: rgb(235, 246, 246);
    --pf-v5-global--palette--black-900: rgb(255, 243, 240);

    /* Font */
    --pf-v5-global--FontFamily--text:
        "IBM Plex Mono", ui-monospace, monospace;
    --pf-v5-global--FontFamily--heading:
        "IBM Plex Mono", ui-monospace, monospace;
    --pf-v5-global--FontFamily--monospace:
        "IBM Plex Mono", ui-monospace, monospace;
    --pf-v5-global--FontFamily--sans-serif:
        "IBM Plex Mono", ui-monospace, monospace;
}

html,
body {
    background: var(--mf-bg) !important;
    color: var(--mf-text) !important;
    font-family: "IBM Plex Mono", ui-monospace, monospace !important;
    -webkit-font-smoothing: antialiased;
}

/* ===== Page chrome ===== */

.pf-v5-c-page,
.pf-c-page {
    background: var(--mf-bg) !important;
}

.pf-v5-c-page__header,
.pf-c-page__header,
.pf-v5-c-masthead {
    background: var(--mf-bg-deep) !important;
    color: var(--mf-text) !important;
    border-bottom: 1px solid var(--mf-border) !important;
    position: relative;
}

.pf-v5-c-page__header::after,
.pf-c-page__header::after,
.pf-v5-c-masthead::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--mf-secondary) 18%,
        var(--mf-secondary) 32%,
        transparent 100%
    );
    opacity: 0.5;
    pointer-events: none;
}

/* Brand logo in masthead */
.pf-v5-c-page__header-brand img,
.pf-c-page__header-brand img,
.pf-v5-c-masthead__brand img,
.pf-v5-c-brand {
    height: 28px !important;
    width: auto !important;
    filter: drop-shadow(0 0 6px rgba(226, 92, 0, 0.35));
}

/* Header tools (right side) */
.pf-v5-c-page__header-tools,
.pf-c-page__header-tools,
.pf-v5-c-masthead__content {
    color: var(--mf-text-dim) !important;
}

/* ===== Sidebar ===== */

.pf-v5-c-page__sidebar,
.pf-c-page__sidebar {
    background: var(--mf-bg-deep) !important;
    border-right: 1px solid var(--mf-border) !important;
}

.pf-v5-c-nav__link,
.pf-c-nav__link {
    color: var(--mf-text-dim) !important;
    font-size: 13px;
    letter-spacing: 0.5px;
    border-left: 2px solid transparent;
    transition:
        background 0.15s,
        border-left-color 0.15s,
        color 0.15s;
}

.pf-v5-c-nav__link:hover,
.pf-c-nav__link:hover {
    background: rgba(171, 227, 227, 0.04) !important;
    color: var(--mf-text) !important;
    border-left-color: var(--mf-accent) !important;
}

.pf-v5-c-nav__link.pf-m-current,
.pf-v5-c-nav__link[aria-current="page"],
.pf-c-nav__link.pf-m-current {
    background: rgba(226, 92, 0, 0.08) !important;
    color: var(--mf-text) !important;
    border-left-color: var(--mf-secondary) !important;
    font-weight: 600;
}

/* Realm switcher / dropdowns */
.pf-v5-c-menu,
.pf-v5-c-dropdown__menu,
.pf-c-dropdown__menu {
    background: var(--mf-surface) !important;
    border: 1px solid var(--mf-border) !important;
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.4) !important;
    border-radius: 0 !important;
}

.pf-v5-c-menu__list-item,
.pf-v5-c-dropdown__menu-item,
.pf-c-dropdown__menu-item {
    color: var(--mf-text) !important;
}

.pf-v5-c-menu__list-item:hover,
.pf-v5-c-dropdown__menu-item:hover,
.pf-c-dropdown__menu-item:hover {
    background: var(--mf-surface-hover) !important;
}

/* ===== Main area ===== */

.pf-v5-c-page__main,
.pf-c-page__main {
    background: var(--mf-bg) !important;
}

.pf-v5-c-page__main-section,
.pf-c-page__main-section {
    background: transparent !important;
    color: var(--mf-text) !important;
}

.pf-v5-c-content h1,
.pf-v5-c-content h2,
.pf-v5-c-content h3,
.pf-v5-c-title,
h1,
h2,
h3,
h4 {
    color: var(--mf-text) !important;
    font-family: "IBM Plex Mono", monospace !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px;
}

/* ===== Cards / tiles ===== */

.pf-v5-c-card,
.pf-c-card {
    background: var(--mf-surface) !important;
    border: 1px solid var(--mf-border) !important;
    border-radius: 0 !important;
    color: var(--mf-text) !important;
    box-shadow: none !important;
    position: relative;
}

.pf-v5-c-card::before,
.pf-c-card::before {
    content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    width: 10px;
    height: 10px;
    border-top: 2px solid var(--mf-secondary);
    border-left: 2px solid var(--mf-secondary);
    pointer-events: none;
}

.pf-v5-c-card__title,
.pf-c-card__title {
    color: var(--mf-text) !important;
    font-family: "IBM Plex Mono", monospace !important;
    font-weight: 600 !important;
}

.pf-v5-c-card__body,
.pf-c-card__body {
    color: var(--mf-text-dim) !important;
}

/* ===== Tables ===== */

.pf-v5-c-table,
.pf-c-table {
    background: var(--mf-surface) !important;
    color: var(--mf-text) !important;
    border: 1px solid var(--mf-border) !important;
    border-radius: 0 !important;
}

.pf-v5-c-table thead,
.pf-c-table thead {
    background: var(--mf-surface-alt) !important;
}

.pf-v5-c-table th,
.pf-c-table th {
    color: var(--mf-primary) !important;
    font-family: "IBM Plex Mono", monospace !important;
    font-size: 11px !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    font-weight: 500 !important;
    border-bottom: 1px solid var(--mf-border) !important;
}

.pf-v5-c-table tbody tr,
.pf-c-table tbody tr {
    border-bottom: 1px solid rgba(171, 227, 227, 0.08) !important;
}

.pf-v5-c-table tbody tr:hover,
.pf-c-table tbody tr:hover {
    background: var(--mf-surface-hover) !important;
}

.pf-v5-c-table td,
.pf-c-table td {
    color: var(--mf-text-dim) !important;
}

/* ===== Buttons ===== */

.pf-v5-c-button,
.pf-c-button {
    border-radius: 0 !important;
    font-family: "IBM Plex Mono", monospace !important;
    font-weight: 600 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    font-size: 12px !important;
    transition:
        background 0.15s,
        border-color 0.15s !important;
}

.pf-v5-c-button.pf-m-primary,
.pf-c-button.pf-m-primary {
    background: var(--mf-secondary) !important;
    border: 1px solid var(--mf-secondary) !important;
    color: var(--mf-bg) !important;
}

.pf-v5-c-button.pf-m-primary:hover,
.pf-c-button.pf-m-primary:hover {
    background: rgb(255, 110, 0) !important;
    border-color: rgb(255, 110, 0) !important;
}

.pf-v5-c-button.pf-m-secondary,
.pf-c-button.pf-m-secondary {
    background: transparent !important;
    border: 1px solid var(--mf-border-strong) !important;
    color: var(--mf-primary) !important;
}

.pf-v5-c-button.pf-m-secondary:hover,
.pf-c-button.pf-m-secondary:hover {
    background: rgba(171, 227, 227, 0.06) !important;
    border-color: var(--mf-primary) !important;
}

.pf-v5-c-button.pf-m-tertiary,
.pf-c-button.pf-m-tertiary {
    background: transparent !important;
    border: 1px dashed var(--mf-border) !important;
    color: var(--mf-text-dim) !important;
}

.pf-v5-c-button.pf-m-link,
.pf-c-button.pf-m-link {
    color: var(--mf-primary) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

/* ===== Form fields ===== */

.pf-v5-c-form__label,
.pf-c-form__label,
.pf-v5-c-form-control label,
.pf-v5-c-form__label-text {
    color: var(--mf-primary) !important;
    font-size: 11px !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    font-weight: 500 !important;
}

.pf-v5-c-form-control,
.pf-c-form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
select,
textarea {
    background: var(--mf-surface-alt) !important;
    border: 1px solid var(--mf-border) !important;
    color: var(--mf-text) !important;
    border-radius: 0 !important;
    font-family: "IBM Plex Mono", monospace !important;
    font-size: 13px !important;
    padding: 10px 12px !important;
    box-shadow: none !important;
}

.pf-v5-c-form-control:focus,
.pf-c-form-control:focus,
input:focus,
select:focus,
textarea:focus {
    border-color: var(--mf-secondary) !important;
    outline: none !important;
    box-shadow: 0 0 0 1px var(--mf-secondary) !important;
}

/* ===== Switch / toggle ===== */

.pf-v5-c-switch__toggle,
.pf-c-switch__toggle {
    background: var(--mf-surface-alt) !important;
    border: 1px solid var(--mf-border) !important;
}

.pf-v5-c-switch__input:checked + .pf-v5-c-switch__toggle,
.pf-c-switch__input:checked + .pf-c-switch__toggle {
    background: var(--mf-secondary) !important;
    border-color: var(--mf-secondary) !important;
}

/* ===== Tabs ===== */

.pf-v5-c-tabs,
.pf-c-tabs {
    background: transparent !important;
    border-bottom: 1px solid var(--mf-border) !important;
}

.pf-v5-c-tabs__link,
.pf-c-tabs__link {
    color: var(--mf-text-subtle) !important;
    font-family: "IBM Plex Mono", monospace !important;
    font-size: 12px !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    border-radius: 0 !important;
}

.pf-v5-c-tabs__item.pf-m-current .pf-v5-c-tabs__link,
.pf-c-tabs__item.pf-m-current .pf-c-tabs__link {
    color: var(--mf-text) !important;
    border-bottom: 2px solid var(--mf-secondary) !important;
}

/* ===== Badges / labels ===== */

.pf-v5-c-label,
.pf-c-label,
.pf-v5-c-badge,
.pf-c-badge {
    background: rgba(171, 227, 227, 0.1) !important;
    color: var(--mf-primary) !important;
    border: 1px solid var(--mf-border) !important;
    border-radius: 0 !important;
    font-family: "IBM Plex Mono", monospace !important;
    font-size: 10px !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    padding: 3px 8px !important;
}

.pf-v5-c-label.pf-m-orange,
.pf-v5-c-label.pf-m-red {
    background: rgba(226, 92, 0, 0.12) !important;
    color: var(--mf-secondary) !important;
    border-color: var(--mf-border-orange) !important;
}

.pf-v5-c-label.pf-m-green {
    background: rgba(110, 231, 183, 0.08) !important;
    color: rgb(110, 231, 183) !important;
    border-color: rgba(110, 231, 183, 0.3) !important;
}

/* ===== Alerts ===== */

.pf-v5-c-alert,
.pf-c-alert {
    background: var(--mf-surface) !important;
    border: 1px solid var(--mf-border) !important;
    border-left: 3px solid var(--mf-primary) !important;
    border-radius: 0 !important;
    color: var(--mf-text) !important;
}

.pf-v5-c-alert.pf-m-danger {
    border-left-color: var(--mf-secondary) !important;
    background: rgba(226, 92, 0, 0.05) !important;
}

.pf-v5-c-alert.pf-m-warning {
    border-left-color: #f5b800 !important;
}

.pf-v5-c-alert.pf-m-success {
    border-left-color: #6ee7b7 !important;
}

/* ===== Modal ===== */

.pf-v5-c-modal-box,
.pf-c-modal-box {
    background: var(--mf-surface) !important;
    border: 1px solid var(--mf-border) !important;
    border-radius: 0 !important;
    color: var(--mf-text) !important;
}

.pf-v5-c-modal-box__title,
.pf-c-modal-box__title {
    color: var(--mf-text) !important;
    font-family: "IBM Plex Mono", monospace !important;
}

/* ===== Scrollbars ===== */

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--mf-bg-deep);
}

::-webkit-scrollbar-thumb {
    background: rgba(171, 227, 227, 0.15);
    border-radius: 0;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(171, 227, 227, 0.25);
}