/*
 * NoTraffic MOS — Keycloak Admin Console Theme
 * Colors from NoTraffic design system (ui/react/src/index.css)
 */

@import url('https://fonts.googleapis.com/css2?family=Rubik&display=swap');

/* ══════════════════════════════════════════════
   PF5 ROOT VARIABLE OVERRIDES
   Using real NoTraffic design tokens from index.css
   ══════════════════════════════════════════════ */
:root {
    /* Dark backgrounds for header/sidebar */
    --pf-v5-global--BackgroundColor--dark-100: #051125 !important;
    --pf-v5-global--BackgroundColor--dark-200: #131B2F !important;
    --pf-v5-global--BackgroundColor--dark-300: #131B2F !important;
    --pf-v5-global--BackgroundColor--dark-400: #3C4656 !important;

    /* Primary — from --cyan-400, --cyan-600 */
    --pf-v5-global--primary-color--100: #3CCCCC !important;
    --pf-v5-global--primary-color--200: #2B97A3 !important;
    --pf-v5-global--primary-color--light-100: #96F7ED !important;
    --pf-v5-global--primary-color--dark-100: #3CCCCC !important;

    /* Links */
    --pf-v5-global--link--Color: #2B97A3 !important;
    --pf-v5-global--link--Color--hover: #3CCCCC !important;
    --pf-v5-global--link--Color--light: #96F7ED !important;
    --pf-v5-global--link--Color--light--hover: #C0FBF5 !important;
    --pf-v5-global--link--Color--dark: #96F7ED !important;
    --pf-v5-global--link--Color--dark--hover: #3CCCCC !important;

    /* Active */
    --pf-v5-global--active-color--100: #3CCCCC !important;

    /* Danger — from --red-400 */
    --pf-v5-global--danger-color--100: #FF3F3F !important;
    --pf-v5-global--danger-color--200: #C40002 !important;

    /* Success — from --green-500 */
    --pf-v5-global--success-color--100: #008000 !important;
    --pf-v5-global--success-color--200: #2D5016 !important;

    /* Warning — from --amber-300 */
    --pf-v5-global--warning-color--100: #FFC671 !important;

    /* Info — from --blue-300 */
    --pf-v5-global--info-color--100: #5BCEFF !important;
}

/* ══════════════════════════════════════════════
   FONT — Rubik with system fallback
   ══════════════════════════════════════════════ */
*:not(.fas):not(.far):not(.fab):not(.fa):not(.pf-v5-pficon):not([class*="fa-"]) {
    font-family: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* ══════════════════════════════════════════════
   MASTHEAD — Replace Keycloak logo with NoTraffic
   ══════════════════════════════════════════════ */
.pf-v5-c-masthead {
    background-color: #051125 !important;
    border-bottom: 1px solid #3C4656 !important;
}

/* Show username but disable dropdown on non-master realms */
html:not([data-kc-realm="master"]) .pf-v5-c-masthead .pf-v5-c-menu-toggle {
    pointer-events: none !important;
    cursor: default !important;
}

html:not([data-kc-realm="master"]) .pf-v5-c-masthead .pf-v5-c-menu-toggle__controls,
html:not([data-kc-realm="master"]) .pf-v5-c-masthead .pf-v5-c-menu-toggle .fa-caret-down,
html:not([data-kc-realm="master"]) .pf-v5-c-masthead .pf-v5-c-menu-toggle .pf-v5-c-menu-toggle__icon {
    display: none !important;
}

.pf-v5-c-masthead__brand img,
.pf-v5-c-brand {
    content: url(../img/notraffic-logo-white.png) !important;
    height: 32px !important;
    width: auto !important;
}

/* ══════════════════════════════════════════════
   SIDEBAR / NAV — dark
   ══════════════════════════════════════════════ */
.pf-v5-c-page__sidebar,
.pf-v5-c-page__sidebar-body,
.pf-v5-c-nav {
    background-color: #131B2F !important;
}

.pf-v5-c-nav__link {
    color: #C4C4C4 !important;
}

.pf-v5-c-nav__link:hover {
    color: #96F7ED !important;
    background-color: rgba(150, 247, 237, 0.1) !important;
}

.pf-v5-c-nav__link.pf-m-current,
.pf-v5-c-nav__item.pf-m-current > .pf-v5-c-nav__link {
    color: #96F7ED !important;
    background-color: rgba(150, 247, 237, 0.1) !important;
    border-left: 3px solid #3CCCCC !important;
}

.pf-v5-c-nav__section-title {
    color: #96F7ED !important;
    border-color: #808080 !important;
}

hr.pf-v5-c-divider {
    border: none !important;
    border-top: 1px solid #808080 !important;
    background: none !important;
    height: 0 !important;
}

div.pf-v5-c-divider,
.pf-v5-c-divider:not(hr) {
    --pf-v5-c-divider--BackgroundColor: #808080 !important;
    background-color: #808080 !important;
}

.pf-v5-c-nav__separator,
.pf-v5-c-nav hr {
    border: none !important;
    border-top: 1px solid #808080 !important;
}

/* ══════════════════════════════════════════════
   MAIN CONTENT AREA — #f1f1f1 background
   ══════════════════════════════════════════════ */
#kc-main-content-page-container {
    background-color: #f1f1f1 !important;
}

/* ══════════════════════════════════════════════
   BUTTONS — SSO style (transparent bg + border)
   ══════════════════════════════════════════════ */
.pf-v5-c-button.pf-m-primary {
    background-color: transparent !important;
    border: 1px solid #3CCCCC !important;
    color: #3CCCCC !important;
    border-radius: 4px !important;
}

.pf-v5-c-button.pf-m-primary:hover {
    background-color: rgba(60, 204, 204, 0.1) !important;
    border-color: #2AB5C5 !important;
    color: #2AB5C5 !important;
}

.pf-v5-c-button.pf-m-secondary {
    background-color: transparent !important;
    border: 1px solid #96F7ED !important;
    color: #2B97A3 !important;
    border-radius: 4px !important;
}

.pf-v5-c-button.pf-m-secondary:hover {
    border-color: #3CCCCC !important;
    color: #3CCCCC !important;
}

.pf-v5-c-button.pf-m-link {
    color: #2B97A3 !important;
}

.pf-v5-c-button.pf-m-link:hover {
    color: #3CCCCC !important;
}

.pf-v5-c-button.pf-m-danger {
    background-color: transparent !important;
    border: 1px solid #FF3F3F !important;
    color: #FF3F3F !important;
}

.pf-v5-c-button.pf-m-danger:hover {
    background-color: rgba(255, 63, 63, 0.1) !important;
}

/* ══════════════════════════════════════════════
   SWITCHES
   ══════════════════════════════════════════════ */
.pf-v5-c-switch__input:checked ~ .pf-v5-c-switch__toggle {
    background-color: #3CCCCC !important;
}

/* ══════════════════════════════════════════════
   TABS — use NoTraffic accent
   ══════════════════════════════════════════════ */
.pf-v5-c-tabs__item.pf-m-current .pf-v5-c-tabs__link::after {
    border-bottom-color: #3CCCCC !important;
}

/* ══════════════════════════════════════════════
   CHIPS / LABELS
   ══════════════════════════════════════════════ */
.pf-v5-c-chip,
.pf-v5-c-label {
    background-color: rgba(60, 204, 204, 0.1) !important;
    color: #2B97A3 !important;
    border-color: #3CCCCC !important;
}

.pf-v5-c-label__content,
.pf-v5-c-label__text,
.pf-v5-c-chip__text {
    color: #2B97A3 !important;
}

/* ══════════════════════════════════════════════
   ALERTS
   ══════════════════════════════════════════════ */
.pf-v5-c-alert.pf-m-danger {
    background-color: rgba(255, 63, 63, 0.1) !important;
    border: 1px solid #FF3F3F !important;
}

.pf-v5-c-alert.pf-m-success {
    background-color: rgba(0, 128, 0, 0.1) !important;
    border: 1px solid #008000 !important;
}

.pf-v5-c-alert.pf-m-warning {
    background-color: rgba(255, 198, 113, 0.1) !important;
    border: 1px solid #FFC671 !important;
}

.pf-v5-c-alert.pf-m-info {
    background-color: rgba(91, 206, 255, 0.1) !important;
    border: 1px solid #5BCEFF !important;
}

/* Toast alerts (floating notifications) */
.pf-v5-c-alert-group.pf-m-toast .pf-v5-c-alert {
    background-color: #FFFFFF !important;
    border-radius: 5px !important;
    box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.15) !important;
}

.pf-v5-c-alert-group.pf-m-toast .pf-v5-c-alert.pf-m-success {
    background-color: #D9F0CE !important;
    border: 1px solid #008000 !important;
}

.pf-v5-c-alert-group.pf-m-toast .pf-v5-c-alert.pf-m-danger {
    background-color: #FFE5E5 !important;
    border: 1px solid #FF3F3F !important;
}

.pf-v5-c-alert-group.pf-m-toast .pf-v5-c-alert.pf-m-warning {
    background-color: #FFF4E5 !important;
    border: 1px solid #FFC671 !important;
}

.pf-v5-c-alert-group.pf-m-toast .pf-v5-c-alert.pf-m-info {
    background-color: #E5F3FF !important;
    border: 1px solid #5BCEFF !important;
}

/* ══════════════════════════════════════════════
   GENERAL LINKS
   ══════════════════════════════════════════════ */
a {
    color: #2B97A3 !important;
}

a:hover {
    color: #3CCCCC !important;
}