/* Shared visual language with the public bursary frontend. */
:root {
    --odg-font-sans: "IBM Plex Sans", "Segoe UI", sans-serif;
    --odg-font-size-body: 0.875rem;
    --odg-font-size-control: 0.8125rem;
    --odg-font-size-caption: 0.75rem;
    --odg-control-height: 42px;
    --odg-bg: #f8fafc;
    --odg-panel: #ffffff;
    --odg-surface: #ffffff;
    --odg-border: #e2e8f0;
    --odg-text: #1c1c1c;
    --odg-muted: #576f89;
    --odg-accent: #1a3f73;
    --odg-accent-strong: #102b52;
    --odg-accent-soft: #e9f0f8;
    --odg-radius: 10px;
    --odg-radius-pill: 999px;
    --odg-shadow: none;
    --bs-body-font-family: var(--odg-font-sans);
    --bs-body-color: #1c1c1c;
    --bs-body-bg: #f8fafc;
    --bs-primary: #1a3f73;
    --bs-primary-rgb: 26, 63, 115;
    --bs-link-color: #1a3f73;
    --bs-link-hover-color: #102b52;
    --bs-border-color: #e2e8f0;
    --bs-border-radius: 0.625rem;
    --bs-border-radius-sm: 0.625rem;
    --bs-border-radius-lg: 0.625rem;
}

html,
body,
button,
input,
select,
textarea,
.dx-widget {
    font-family: var(--odg-font-sans) !important;
}

body {
    background: var(--odg-bg) !important;
    color: var(--odg-text) !important;
    font-size: var(--odg-font-size-body) !important;
    line-height: 1.5;
}

button,
input,
select,
textarea {
    font-size: var(--odg-font-size-body) !important;
}

a {
    color: var(--odg-accent);
}

:is(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 3px solid var(--odg-accent) !important;
    outline-offset: 3px !important;
}

.odg-topbar {
    background: var(--odg-accent) !important;
    border-bottom-color: #17355f !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

.odg-brand,
.odg-brand:hover,
.odg-brand-title {
    color: #ffffff !important;
}

.odg-brand-sub {
    color: #dbe7f5 !important;
}

.odg-burger,
.odg-pill-link,
.odg-auth-nav-button {
    color: #ffffff !important;
    background: transparent !important;
    border-color: rgba(255, 255, 255, 0.62) !important;
    box-shadow: none !important;
}

.odg-burger:hover,
.odg-pill-link:hover,
.odg-auth-nav-button:hover {
    color: var(--odg-accent) !important;
    background: #ffffff !important;
    border-color: #ffffff !important;
}

.odg-shell.has-drawer {
    background: var(--odg-bg);
}

.odg-drawer {
    background: #ffffff !important;
    border-right-color: var(--odg-border) !important;
}

.odg-nav-link {
    border-radius: 10px !important;
    color: var(--odg-text) !important;
}

.odg-nav-link:hover {
    background: var(--odg-surface-hover, #f5f8fb) !important;
}

.odg-nav-link.is-active {
    color: var(--odg-accent) !important;
    background: var(--odg-accent-soft) !important;
}

.odg-nav-link.is-active::before {
    background: var(--odg-accent) !important;
}

.odg-nav-icon {
    width: 18px;
    color: currentColor;
    font-size: 1rem;
}

.odg-page {
    background: var(--odg-bg);
}

:is(.odg-card, .odg-grid-shell, .odg-card-soft, [class$="-card"], [class$="__card"]) {
    background: #ffffff !important;
    border-color: var(--odg-border) !important;
    border-radius: var(--odg-radius) !important;
    box-shadow: none !important;
}

:is([class$="-table-wrap"], [class$="__table-wrap"], .odg-modal__panel) {
    border-radius: var(--odg-radius) !important;
}

.odg-view-title,
.odg-section-title,
.odg-modal__title,
:is(h1, h2, h3, h4, h5, h6) {
    color: #1c1c1c;
    font-family: var(--odg-font-sans);
    letter-spacing: -0.02em;
}

.odg-view-title {
    font-size: 1.75rem !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
}

.odg-view-subtitle {
    font-size: 0.9375rem !important;
    line-height: 1.55 !important;
    color: var(--odg-muted) !important;
}

.odg-view-kicker,
.odg-section-label {
    color: var(--odg-accent) !important;
    font-size: var(--odg-font-size-caption) !important;
    font-weight: 600 !important;
    letter-spacing: 0.12em !important;
}

:is(.odg-label, .staff-field label) {
    color: #17304e !important;
    font-size: var(--odg-font-size-control) !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
}

:is(.et-filter__label, .elog-filter__label, .users-filter__label, .ps-filter-grid .odg-label) {
    color: #64748b !important;
    font-size: var(--odg-font-size-caption) !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
}

:is(
    .odg-btn-primary,
    .odg-btn-secondary,
    .odg-btn-ghost,
    .odg-pill-link,
    .odg-auth-nav-button,
    .lottery-btn-mini,
    .et-edit-link,
    .users-edit-link,
    .elog-action-link,
    .db-shortcut-link,
    .ps-btn-compact,
    .staff-search__button,
    .et-pager button,
    .elog-pager button,
    .users-pager button
) {
    min-height: var(--odg-control-height) !important;
    border-radius: var(--odg-radius) !important;
    padding: 0.6875rem 1rem !important;
    font-family: var(--odg-font-sans) !important;
    font-size: var(--odg-font-size-control) !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    box-shadow: none !important;
}

:is(.et-edit-link, .users-edit-link, .elog-action-link) {
    width: var(--odg-control-height) !important;
    height: var(--odg-control-height) !important;
    min-width: var(--odg-control-height) !important;
    padding: 0 !important;
    color: var(--odg-accent) !important;
    background: #ffffff !important;
    border: 1px solid #c8d3df !important;
}

:is(.et-edit-link, .users-edit-link, .elog-action-link):hover {
    color: var(--odg-accent-strong) !important;
    background: #f5f8fb !important;
    border-color: #8aa0ba !important;
}

:is(
    .newapp-help-btn,
    .completedapp-help-btn,
    .eval-help-btn,
    .lottery-help-btn,
    .et-help-btn,
    .ps-help-btn
) {
    width: 1.75rem !important;
    height: 1.75rem !important;
    min-width: 1.75rem !important;
    min-height: 1.75rem !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: var(--odg-radius-pill) !important;
    background: #eff6ff !important;
    color: var(--odg-accent) !important;
    font-size: var(--odg-font-size-caption) !important;
}

:is(.budget-currency-field, .vals-currency-field) {
    overflow: hidden !important;
    background: #f5f7fa !important;
    border: 1px solid #c8d3df !important;
    border-radius: var(--odg-radius) !important;
    box-shadow: none !important;
}

:is(.budget-currency-field, .vals-currency-field):focus-within {
    background: #ffffff !important;
    border-color: var(--odg-accent) !important;
    box-shadow: 0 0 0 3px rgba(26, 63, 115, 0.14) !important;
}

:is(.budget-currency-prefix, .vals-currency-prefix) {
    background: transparent !important;
    border-right: 1px solid #c8d3df !important;
}

:is(.budget-currency-input, .vals-currency-input),
:is(.budget-currency-input, .vals-currency-input):focus {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

:is(.odg-btn-primary, .lottery-btn-mini--primary) {
    color: #ffffff !important;
    background: var(--odg-accent) !important;
    border-color: var(--odg-accent) !important;
}

:is(.odg-btn-primary, .lottery-btn-mini--primary):hover {
    background: var(--odg-accent-strong) !important;
    border-color: var(--odg-accent-strong) !important;
}

.lottery-btn-mini--danger {
    color: #b91c1c !important;
    background: #fff1f2 !important;
    border-color: #fecdd3 !important;
}

:is(
    .odg-btn-secondary,
    .odg-btn-ghost,
    .db-shortcut-link,
    .et-pager button,
    .elog-pager button,
    .users-pager button,
    .lottery-btn-mini:not(.lottery-btn-mini--primary):not(.lottery-btn-mini--danger)
) {
    color: var(--odg-accent) !important;
    background: #ffffff !important;
    border-color: #c8d3df !important;
}

:is(
    .odg-btn-secondary,
    .odg-btn-ghost,
    .db-shortcut-link,
    .et-pager button,
    .elog-pager button,
    .users-pager button,
    .lottery-btn-mini:not(.lottery-btn-mini--primary):not(.lottery-btn-mini--danger)
):hover:not(:disabled) {
    color: var(--odg-accent-strong) !important;
    background: #f5f8fb !important;
    border-color: #8aa0ba !important;
}

:is(
    .odg-input,
    .odg-select,
    .odg-textarea,
    .form-control,
    .form-select,
    .et-filter__input,
    .et-filter__select,
    .elog-filter__input,
    .elog-filter__select,
    .users-filter__input,
    .users-filter__select,
    .staff-input,
    .staff-select
) {
    min-height: var(--odg-control-height) !important;
    color: var(--odg-text) !important;
    background-color: #f5f7fa !important;
    border: 1px solid #c8d3df !important;
    border-radius: var(--odg-radius) !important;
    padding: 0.6875rem 0.875rem !important;
    font-family: var(--odg-font-sans) !important;
    font-size: var(--odg-font-size-body) !important;
    line-height: 1.25 !important;
    box-shadow: none !important;
}

:is(
    .odg-input,
    .odg-select,
    .odg-textarea,
    .form-control,
    .form-select,
    .et-filter__input,
    .et-filter__select,
    .elog-filter__input,
    .elog-filter__select,
    .users-filter__input,
    .users-filter__select,
    .staff-input,
    .staff-select
):focus {
    background-color: #ffffff !important;
    border-color: var(--odg-accent) !important;
    box-shadow: 0 0 0 3px rgba(26, 63, 115, 0.14) !important;
}

.odg-modal__dialog,
.odg-toast,
.dx-overlay-content {
    border-color: var(--odg-border) !important;
    border-radius: var(--odg-radius) !important;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12) !important;
}

:is(
    .odg-badge,
    .badge,
    [class$="-badge"],
    [class$="__badge"],
    [class$="-pill"],
    [class$="__pill"],
    [class$="-status"],
    [class$="__status"],
    [class$="-count"],
    [class$="__count"],
    [class$="-feedback"],
    [class$="__feedback"]
) {
    border-radius: var(--odg-radius-pill) !important;
}

:is(
    .odg-badge,
    .newapp-badge,
    .completedapp-badge,
    .users-status,
    .vals-status,
    .lottery-app-status,
    .et-type-badge,
    .ps-seq-badge
) {
    min-height: 1.875rem !important;
    padding: 0.375rem 0.75rem !important;
    border-radius: var(--odg-radius-pill) !important;
    font-size: var(--odg-font-size-caption) !important;
    font-weight: 600 !important;
    line-height: 1 !important;
}

:is([class$="-table"], [class$="__table"], .table) {
    font-family: var(--odg-font-sans) !important;
    font-size: var(--odg-font-size-body) !important;
}

:is([class$="-table"], [class$="__table"], .table) thead th {
    padding: 0.75rem 0.875rem !important;
    font-size: var(--odg-font-size-caption) !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    letter-spacing: 0.04em !important;
}

:is([class$="-table"], [class$="__table"], .table) tbody td {
    padding: 0.875rem !important;
    font-size: var(--odg-font-size-body) !important;
    line-height: 1.45 !important;
}

.dx-datagrid,
.dx-datagrid-headers,
.dx-datagrid-rowsview,
.dx-datagrid-borders > .dx-datagrid-headers,
.dx-datagrid-borders > .dx-datagrid-rowsview {
    border-color: var(--odg-border) !important;
}

.dx-datagrid-headers,
.dx-header-row {
    color: #46596c !important;
    background: #f8fafc !important;
}

.dx-button {
    border-radius: 10px !important;
}

.odg-footer {
    background: #ffffff !important;
    border-top-color: var(--odg-border) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

@media (max-width: 640px) {
    .odg-page {
        padding: 1rem !important;
    }
}