/*
 * Idbarah browser identity compatibility layer.
 * Official values are emitted from config/branding.php by layouts/brand.blade.php.
 */

@font-face {
    font-family: "Alexandria";
    src: url("../branding/fonts/Alexandria-VariableFont_wght.woff2") format("woff2"),
         url("../branding/fonts/Alexandria-VariableFont_wght.ttf") format("truetype");
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
}

:root {
    /* Compatibility aliases used by existing first-party dashboard/site CSS. */
    --brand-primary: var(--idbarah-primary);
    --brand-primary-rgb: var(--idbarah-primary-rgb);
    --brand-primary-hover: var(--idbarah-active);
    --brand-secondary: var(--idbarah-active);
    --brand-accent: var(--idbarah-focus);
    --brand-accent-rgb: var(--idbarah-focus-rgb);
    --brand-secondary-soft: var(--idbarah-brand-300);
    --brand-background: var(--idbarah-background);
    --brand-surface: var(--idbarah-surface);
    --brand-text: var(--idbarah-text-primary);
    --brand-text-rgb: var(--idbarah-text-primary-rgb);
    --brand-text-secondary: var(--idbarah-text-secondary);
    --brand-on-primary: var(--idbarah-on-primary);
    --brand-sidebar: var(--idbarah-surface);
    --brand-navigation: var(--idbarah-surface);
    --brand-font-family: var(--idbarah-font-family);

    --theme-color: var(--idbarah-primary);
    --theme-color-rgb: var(--idbarah-primary-rgb);
    --primary: var(--idbarah-primary);
    --primary-color-sidebar: var(--idbarah-primary);
    --primary-color: var(--idbarah-primary);
    --primary-hover-color: var(--idbarah-active);
    --secondary-color: var(--idbarah-active);
    --secondary-color1: var(--idbarah-focus);
    --secondary-color2: var(--idbarah-active);
    --secondary-color3: var(--idbarah-brand-300);
    --primary-background-color: var(--idbarah-background);
    --text--primary-color: var(--idbarah-surface-selected);
    --text--secondary-color: var(--idbarah-text-secondary);
    --text-white-color: var(--idbarah-on-primary);

    /* Authentication aliases. */
    --lp-primary: var(--idbarah-primary);
    --lp-primary-dk: var(--idbarah-active);
    --lp-text-main: var(--idbarah-text-primary);
    --lp-text-muted: var(--idbarah-text-secondary);
    --lp-bg-input: var(--idbarah-background);
    --lp-border: var(--idbarah-border);
    --lp-radius: 8px;
    --lp-shadow-btn: 0 4px 14px rgb(var(--idbarah-primary-rgb) / 25%);

    /* Existing component aliases. */
    --danger-color: var(--idbarah-error);
    --danger-soft: var(--idbarah-error-soft);

    /* Bootstrap-compatible runtime tokens. */
    --bs-primary: var(--idbarah-primary);
    --bs-primary-rgb: var(--idbarah-primary-rgb);
    --bs-body-color: var(--idbarah-text-primary);
    --bs-body-bg: var(--idbarah-background);
    --bs-border-color: var(--idbarah-border);
}

html,
body,
button,
input,
select,
textarea {
    font-family: var(--idbarah-font-family) !important;
}

body {
    color: var(--idbarah-text-primary);
    background-color: var(--idbarah-background);
}

.idbarah-h1 {
    font-size: var(--idbarah-h1-size);
    line-height: var(--idbarah-h1-line-height);
    font-weight: var(--idbarah-h1-weight);
}

.idbarah-h2 {
    font-size: var(--idbarah-h2-size);
    line-height: var(--idbarah-h2-line-height);
    font-weight: var(--idbarah-h2-weight);
}

.idbarah-section {
    font-size: var(--idbarah-section-size);
    line-height: var(--idbarah-section-line-height);
    font-weight: var(--idbarah-section-weight);
}

.idbarah-body {
    font-size: var(--idbarah-body-size);
    line-height: var(--idbarah-body-line-height);
    font-weight: var(--idbarah-body-weight);
}

.idbarah-label {
    font-size: var(--idbarah-label-size);
    line-height: var(--idbarah-label-line-height);
    font-weight: var(--idbarah-label-weight);
}

.idbarah-caption {
    font-size: var(--idbarah-caption-size);
    line-height: var(--idbarah-caption-line-height);
    font-weight: var(--idbarah-caption-weight);
}

.content-wrapper,
.page-body-wrapper,
.footer {
    background-color: var(--idbarah-background) !important;
}

.card,
.navbar,
.navbar .navbar-brand-wrapper,
.navbar .navbar-menu-wrapper,
.sidebar,
.dropdown-menu,
.modal-content {
    background-color: var(--idbarah-surface) !important;
}

.cache-clear-dropdown-form {
    width: 100%;
    min-width: 0;
    margin: 0;
}

.navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .dropdown-menu.navbar-dropdown .cache-clear-dropdown-item {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    text-align: start;
    white-space: normal;
}

.cache-clear-dropdown-item > i {
    flex: 0 0 auto;
}

.cache-clear-dropdown-label {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: normal;
}

.card,
.dropdown-menu,
.modal-content,
.form-control,
.custom-select {
    border-color: var(--idbarah-border) !important;
}

.sidebar .nav .nav-item .nav-link {
    color: var(--idbarah-text-primary);
}

.sidebar .nav .nav-item .nav-link:hover {
    background-color: var(--idbarah-surface-soft);
}

/* Center the desktop icon rail independently of expanded menu spacing. */
@media (min-width: 992px) {
    html body.sidebar-icon-only .sidebar .nav:not(.sub-menu) > .nav-item > .nav-link {
        justify-content: center;
        padding-inline: 0 !important;
        text-align: center;
    }

    html body.sidebar-icon-only .sidebar .nav:not(.sub-menu) > .nav-item > .nav-link > i.menu-icon {
        margin: 0 !important;
        width: 24px !important;
        flex: 0 0 24px;
        text-align: center;
    }

    body.sidebar-icon-only .navbar .navbar-brand-wrapper {
        flex: 0 0 70px;
        width: 70px;
        padding-inline: 0;
    }

    body.sidebar-icon-only .navbar .navbar-brand-wrapper .navbar-brand.brand-logo-mini {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
    }

    body.sidebar-icon-only .navbar .navbar-brand-wrapper .navbar-brand.brand-logo-mini img {
        width: 48px;
        height: 48px;
        max-width: calc(100% - 16px);
        object-fit: contain;
        margin: 0;
    }
}

.sidebar .nav .nav-item.active > .nav-link,
.sidebar .nav .nav-item .nav-link.active,
.sidebar .nav .nav-item.parent-active > .nav-link[data-toggle="collapse"] {
    color: var(--idbarah-primary) !important;
    background-color: var(--idbarah-surface-selected) !important;
}

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

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

.btn-primary:disabled,
.btn-primary.disabled {
    color: var(--idbarah-text-disabled) !important;
    background-color: var(--idbarah-surface-disabled) !important;
    border-color: var(--idbarah-brand-200) !important;
}

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

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

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

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

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

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

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

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

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

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

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

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

:focus-visible {
    outline: 2px solid var(--idbarah-focus);
    outline-offset: 2px;
}