@import url('./icons.css');

:root {
    --irad-font-sans: "Pretendard Variable", Pretendard, "Noto Sans KR", "Malgun Gothic", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;
    --dxds-font-family-sans-serif: var(--irad-font-sans);
}

html, body {
    color-scheme: dark;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    margin: 0;
}

body {
    background: #0b111d;
    color: var(--dxds-color-content-neutral-default-rest);
    font-family: var(--irad-font-sans);
    font-feature-settings: "kern" 1, "tnum" 1;
    font-size: 0.9375rem;
    line-height: 1.55;
    text-rendering: optimizeLegibility;
}

.language-switch {
    align-items: center;
    color: var(--dxds-color-content-neutral-subdued-rest);
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 0.75rem;
    gap: 0.2rem;
}

.language-option {
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    font: inherit;
    padding: 0.25rem 0.35rem;
    text-decoration: none;
}

.language-option:hover,
.language-option:focus-visible,
.language-option.active {
    color: var(--dxds-color-content-accent-default-rest);
}

.language-option.active {
    font-weight: 700;
}

button,
input,
select,
textarea {
    font: inherit;
}

/* Keep every data-list header, value, and in-cell action visually aligned. */
.dxbl-grid th,
.dxbl-grid td,
.dxbl-grid .dxbl-grid-header,
.dxbl-grid .dxbl-grid-cell,
.table th,
.table td {
    text-align: center !important;
    vertical-align: middle !important;
}

.dxbl-grid thead th,
.dxbl-grid .dxbl-grid-header,
.dxbl-grid .dxbl-grid-header-cell,
.table thead th {
    background-color: #17253b !important;
    color: #a9d0ff !important;
    font-weight: 750 !important;
    letter-spacing: 0.015em;
}

.dxbl-grid tbody td,
.dxbl-grid .dxbl-grid-cell,
.table tbody td {
    color: #d8e1ee;
}

.dxbl-grid th > *,
.dxbl-grid .dxbl-grid-header > *,
.dxbl-grid .dxbl-grid-header-content,
.dxbl-grid .dxbl-grid-header-cell-content {
    justify-content: center !important;
    text-align: center !important;
}

.dxbl-grid td .admin-toolbar,
.dxbl-grid td .user-row-actions,
.dxbl-grid td .system-row-actions,
.dxbl-grid td [class*="row-actions"],
.dxbl-grid .dxbl-grid-cell .admin-toolbar,
.dxbl-grid .dxbl-grid-cell [class*="row-actions"] {
    align-items: center;
    justify-content: center !important;
    margin-bottom: 0;
    width: 100%;
}

.dxbl-grid td .dxbl-btn,
.dxbl-grid .dxbl-grid-cell .dxbl-btn,
.table td .dxbl-btn {
    border-width: 1px;
    font-weight: 750;
    letter-spacing: 0.01em;
}

.dxbl-grid .dxbl-btn-primary,
.dxbl-grid .dxbl-btn-outline-primary,
.dxbl-grid .dxbl-btn-secondary,
.dxbl-grid .dxbl-btn-outline-secondary,
.table .dxbl-btn-primary,
.table .dxbl-btn-outline-primary,
.table .dxbl-btn-secondary,
.table .dxbl-btn-outline-secondary {
    background-color: rgb(40 91 153 / 0.28) !important;
    border-color: #619ee5 !important;
    color: #c5e0ff !important;
}

.dxbl-grid .dxbl-btn-success,
.dxbl-grid .dxbl-btn-outline-success,
.table .dxbl-btn-success,
.table .dxbl-btn-outline-success {
    background-color: rgb(25 110 82 / 0.3) !important;
    border-color: #43c596 !important;
    color: #a7f0d2 !important;
}

.dxbl-grid .dxbl-btn-danger,
.dxbl-grid .dxbl-btn-outline-danger,
.table .dxbl-btn-danger,
.table .dxbl-btn-outline-danger {
    background-color: rgb(151 48 61 / 0.3) !important;
    border-color: #ef7180 !important;
    color: #ffc0c8 !important;
}

.dxbl-grid .dxbl-btn:disabled,
.table .dxbl-btn:disabled {
    filter: saturate(0.45);
    opacity: 0.52;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--dxds-color-content-neutral-default-rest);
    font-family: inherit;
    letter-spacing: -0.018em;
    line-height: 1.3;
}

/* FocusOnNavigate moves accessibility focus to the page heading after routing.
   Keep that semantic focus without drawing the browser's temporary box. */
h1[tabindex="-1"]:focus,
.page-content-container h1:focus {
    box-shadow: none;
    outline: none;
}

.form-control,
.form-select,
.volume-editor-input,
.system-editor-input {
    background-color: var(--dxds-color-surface-neutral-default-rest);
    border: 1px solid var(--dxds-color-border-neutral-default-rest);
    border-radius: 0.35rem;
    box-sizing: border-box;
    color: var(--dxds-color-content-neutral-default-rest);
    min-height: 2.25rem;
    padding: 0.4rem 0.55rem;
}

.form-control:disabled,
.form-select:disabled,
.volume-editor-input:disabled,
.system-editor-input:disabled {
    cursor: not-allowed;
    opacity: 0.62;
}

.w-100 {
    width: 100% !important;
}

.h-100 {
    height: 100% !important;
}

.h-auto {
    height: auto !important;
}

.overflow-hidden {
    overflow: hidden !important;
}

.text-danger {
    color: var(--dxds-color-content-danger-default-rest);
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--dxds-color-border-success-default-rest);
}

.invalid {
    outline: 1px solid var(--dxds-color-border-danger-default-rest);
}

.validation-message {
    color: var(--dxds-color-content-danger-default-rest);
}

.button-link {
    text-decoration: unset;
}

.title {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem 0;
}

.title.title-secondary {
    padding: 0.313rem 0 0;
    color: var(--dxds-color-content-neutral-subdued-rest);
}

.title-header-text {
    font-size: var(--dxds-font-size-headline-lg);
    font-weight: var(--dxds-font-weight-headline-default);
    letter-spacing: var(--dxds-letter-spacing-headline-lg);
    line-height: var(--dxds-line-height-headline-lg);
}

.title-content-text {
    font-size: var(--dxds-font-size-base-lg);
    font-weight: var(--dxds-font-weight-base-default);
    letter-spacing: var(--dxds-letter-spacing-base-lg);
    line-height: var(--dxds-line-height-base-lg);
}

.main-content {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: center;
    width: 100%;
}

/* DevExpress moves drop-down content out of its original portal and into a
   body-level dxbl-popup-root cell. Raise the actual moved Institution Rule
   drop-down above the custom editor backdrop (z-index 1100). */
dxbl-popup-root > .dxbl-popup-cell:has(.institution-rule-dropdown) {
    z-index: 1200 !important;
}

.institution-rule-dropdown {
    z-index: 1200 !important;
}

/* The Rule deletion confirmation is a DevExpress body-level popup opened
   from inside the custom Institution editor backdrop (z-index 1100). */
dxbl-popup-root > .dxbl-popup-cell:has(.institution-rule-delete-popup) {
    z-index: 1300 !important;
}

/* Management by User opens confirmation dialogs above its main management popup. */
dxbl-popup-root > .dxbl-popup-cell:has(.by-user-management-popup) {
    z-index: 1200 !important;
}

dxbl-popup-root > .dxbl-popup-cell:has(.by-user-delete-popup) {
    z-index: 1300 !important;
}

/* Make the current Institution list page unmistakable in the dark theme. */
.institution-list-grid .dxbl-pager {
    --dxbl-pager-active-page-btn-bg: var(--dxds-color-surface-primary-default-rest);
    --dxbl-pager-active-page-btn-color: var(--dxds-color-content-neutral-default-static-dark-rest);
    --dxbl-pager-active-page-btn-border-color: var(--dxds-color-border-primary-default-rest);
}

.institution-list-grid .dxbl-pager > .dxbl-pager-active-page-btn {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--dxds-color-border-primary-default-rest) 55%, transparent);
    font-weight: 800;
    transform: translateY(-1px);
}