/*
 * Nomad UI — app-wide uniformity layer.
 * Loaded after site.css in _Layout_NomadV2 so every page shares one compact
 * control height, label style, button shape and grid density.
 * Styling only: no layout, visibility or behavior changes.
 * Multi-line controls (textarea, multiselect chips, rich text) keep their own height;
 * they only share the font, border and corner radius.
 */
:root {
    --nui-font: 'Segoe UI', Arial, sans-serif;
    --nui-font-size: 13px;
    --nui-label-size: 12px;
    --nui-control-h: 30px;
    --nui-radius: 5px;
    --nui-btn-radius: 1.4rem;
    --nui-ink: #1f2328;
    --nui-muted: #59636e;
    --nui-line: #a19f9d;
    --nui-accent: #0078d4;
    --nui-grid-row-h: 30px;
}

/* ---- Labels ---- */
/* !important on size: pages declare their own .form-label sizes after this file loads */
.form-label,
.col-form-label,
.e-float-text {
    font-family: var(--nui-font);
    font-size: var(--nui-label-size) !important;
    font-weight: 600;
    color: var(--nui-ink);
}

.form-check-label,
label.form-check,
.e-checkbox-wrapper .e-label,
.e-css.e-checkbox-wrapper .e-label,
.e-radio + label .e-label {
    font-family: var(--nui-font);
    font-size: var(--nui-font-size) !important;
}

/* ---- Text fields: Bootstrap ---- */
input.form-control:not([type=file]):not([type=color]),
select.form-control,
.form-select {
    height: var(--nui-control-h);
    min-height: var(--nui-control-h);
    padding: 3px 8px;
    font-family: var(--nui-font);
    font-size: var(--nui-font-size);
    line-height: 1.4;
    border-radius: var(--nui-radius);
}

/* ---- Text areas: same font, border and corners as the single-line fields ---- */
textarea.form-control,
textarea:not(.e-input) {
    font-family: var(--nui-font);
    font-size: var(--nui-font-size);
    border: 1px solid var(--nui-line);
    border-radius: var(--nui-radius);
    padding: 4px 8px;
}

textarea.e-input,
.e-multi-line-input textarea {
    font-family: var(--nui-font);
    font-size: var(--nui-font-size) !important;
}

.e-input-group.e-multi-line-input {
    border-radius: var(--nui-radius);
}

/* ---- Checkboxes and radios: Bootstrap ones match the Syncfusion 20px accent style ---- */
.form-check-input[type=checkbox],
.form-check-input[type=radio] {
    width: 20px;
    height: 20px;
    margin-top: 0;
    vertical-align: middle;
    border: 1px solid var(--nui-ink);
}

.form-check-input[type=checkbox] {
    border-radius: 2px;
}

.form-check-input:checked {
    background-color: var(--nui-accent);
    border-color: var(--nui-accent);
}

.form-check-input:focus {
    border-color: var(--nui-accent);
    box-shadow: none;
}

/* Bootstrap switches keep their pill track */
.form-switch .form-check-input[type=checkbox] {
    width: 2.2em;
    border-radius: 2em;
}

/* ---- Text fields: Syncfusion single-line inputs (textbox, dropdown, combo, date, numeric) ---- */
.e-input-group:not(.e-multi-line-input):not(.e-multiselect),
.e-input-group.e-control-wrapper:not(.e-multi-line-input):not(.e-multiselect) {
    min-height: var(--nui-control-h);
    border-radius: var(--nui-radius);
    font-family: var(--nui-font);
}

.e-input-group:not(.e-multi-line-input):not(.e-multiselect) input.e-input,
.e-input-group.e-control-wrapper:not(.e-multi-line-input):not(.e-multiselect) input.e-input,
.e-input-group:not(.e-multi-line-input):not(.e-multiselect) .e-input:not(textarea),
.e-ddl.e-input-group.e-control-wrapper .e-input,
.e-float-input.e-input-group:not(.e-multi-line-input):not(.e-multiselect) input.e-control {
    height: calc(var(--nui-control-h) - 2px);
    min-height: calc(var(--nui-control-h) - 2px);
    padding: 0 8px;
    font-family: var(--nui-font);
    font-size: var(--nui-font-size) !important;
}

.e-input-group:not(.e-multi-line-input):not(.e-multiselect) .e-input-group-icon,
.e-input-group.e-control-wrapper:not(.e-multi-line-input):not(.e-multiselect) .e-input-group-icon {
    min-height: calc(var(--nui-control-h) - 2px);
    min-width: 28px;
}

input.e-input:not(.e-input-group input),
.e-input:not(.e-input-group .e-input):not(textarea) {
    font-family: var(--nui-font);
    font-size: var(--nui-font-size);
}

/* Keep the rounded corners while a field has focus (the Syncfusion theme squares them) */
.e-input-group.e-input-focus:not(.e-multiselect),
.e-input-group.e-control-wrapper.e-input-focus:not(.e-multiselect) {
    border-radius: var(--nui-radius) !important;
}

/* Syncfusion wrappers that also carry Bootstrap's .form-control: drop the doubled padding */
.e-input-group.form-control:not(.e-multi-line-input):not(.e-multiselect) {
    height: var(--nui-control-h);
    min-height: var(--nui-control-h);
    padding: 0;
}

.e-multiselect.e-input-group,
.e-multiselect .e-dropdownbase {
    min-height: var(--nui-control-h);
    border-radius: var(--nui-radius);
    font-family: var(--nui-font);
    font-size: var(--nui-font-size);
}

/* Inner parts sit inside the wrapper's 1px border */
.e-multiselect.e-input-group .e-multi-select-wrapper,
.e-multiselect.e-input-group .e-dropdownbase,
.e-multiselect.e-input-group .e-multi-select-wrapper .e-input-group-icon {
    min-height: calc(var(--nui-control-h) - 2px);
}

.e-multiselect.e-input-group .e-dropdownbase {
    height: calc(var(--nui-control-h) - 2px);
}

/* Dropdown popups share the control type size */
.e-dropdownbase .e-list-item,
.e-popup .e-list-item {
    font-family: var(--nui-font);
    font-size: var(--nui-font-size);
    min-height: 28px;
    line-height: 28px;
}

/* ---- Buttons: one height, the app's pill shape ---- */
.btn:not(.btn-link):not(.btn-close) {
    min-height: var(--nui-control-h);
    font-family: var(--nui-font);
    font-size: var(--nui-font-size) !important;
    font-weight: 600;
    line-height: 1.2;
    padding: 0.3rem 1rem !important;
    border-radius: var(--nui-btn-radius) !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

/* Disabled primary keeps the app blue instead of falling back to Bootstrap's */
.btn-primary:disabled,
.btn-primary.disabled {
    background-color: var(--nui-accent);
    border-color: var(--nui-accent);
}

/* Standalone Syncfusion buttons share the Bootstrap button shape.
   Buttons owned by other components (toolbar, pager, calendar, editors, grid cells, dialog chrome) are left alone. */
.e-btn:not(.e-tbar-btn):not(.e-icon-btn):not(.e-dlg-closeicon-btn):not(.e-unboundcelldiv .e-btn):not(.e-pager .e-btn):not(.e-calendar .e-btn):not(.e-rte-container .e-btn):not(.e-footer-content .e-btn):not(.e-input-group .e-btn) {
    height: var(--nui-control-h);
    min-height: var(--nui-control-h);
    font-family: var(--nui-font);
    font-size: var(--nui-font-size) !important;
    font-weight: 600;
    line-height: 1.2;
    padding: 0 1rem;
    border-radius: var(--nui-btn-radius);
    text-transform: none;
}

.btn:focus-visible,
.e-btn:focus-visible {
    outline: 2px solid var(--nui-accent);
    outline-offset: 2px;
    box-shadow: none;
}

/* Syncfusion dialog footer buttons match the Bootstrap buttons; some pages reuse
   .e-footer-content outside a dialog for their Save/Cancel row
   (!important beats site.css's .e-footer-content .e-btn.e-flat override) */
.e-dialog .e-footer-content .e-btn,
.e-dialog .e-footer-content .e-btn.e-flat:not([disabled]),
.e-footer-content .e-btn,
.e-footer-content .e-btn.e-flat:not([disabled]) {
    height: var(--nui-control-h);
    min-height: var(--nui-control-h);
    font-family: var(--nui-font);
    font-size: var(--nui-font-size) !important;
    font-weight: 600;
    line-height: 1.2;
    padding: 0 1rem !important;
    border-radius: var(--nui-btn-radius);
    text-transform: none;
}

/* ---- Dialogs ---- */
.e-dialog .e-dlg-header,
.e-dialog .e-dlg-header * {
    font-family: var(--nui-font);
    font-size: 16px;
    font-weight: 600;
}

/* Bootstrap modal titles match the Syncfusion dialog headers
   (!important beats per-page #modalId .modal-title sizes) */
.modal .modal-title {
    font-family: var(--nui-font);
    font-size: 16px !important;
    font-weight: 600 !important;
}

.e-dialog .e-dlg-content {
    font-family: var(--nui-font);
    font-size: var(--nui-font-size);
    line-height: 1.5;
}

/* ---- Grids: compact, same type size as the controls ---- */
.e-grid,
.e-grid .e-rowcell,
.e-grid .e-headercell,
.e-grid .e-headercelldiv,
.e-grid .e-headertext,
.e-grid .e-summarycell {
    font-family: var(--nui-font);
    font-size: var(--nui-font-size);
}

.e-grid .e-headercelldiv,
.e-grid .e-headertext {
    font-weight: 600;
}

.e-grid .e-row .e-rowcell:not(.e-editedbatchcell):not(.e-inline-edit) {
    padding-top: 4px;
    padding-bottom: 4px;
}

.e-grid .e-row {
    height: var(--nui-grid-row-h);
}

/* Grid toolbar (Add / Edit / Delete / Search): control height and type size */
.e-grid .e-toolbar,
.e-grid .e-toolbar .e-toolbar-items,
.e-grid .e-toolbar .e-toolbar-item {
    min-height: calc(var(--nui-control-h) + 8px);
}

.e-grid .e-toolbar .e-toolbar-item .e-tbar-btn {
    height: var(--nui-control-h);
    min-height: var(--nui-control-h);
    padding: 0 8px;
    font-family: var(--nui-font);
}

.e-grid .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text,
.e-grid .e-toolbar .e-toolbar-item .e-tbar-btn {
    font-size: var(--nui-font-size) !important;
}

.e-grid .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons {
    font-size: 14px;
    min-height: 0;
}

.e-grid .e-toolbar .e-input-group input.e-input,
.e-grid .e-toolbar .e-search input {
    font-size: var(--nui-font-size) !important;
}

/* Grid pager: same type size as the rows */
.e-pager,
.e-pager .e-pagercontainer,
.e-pager .e-numericitem,
.e-pager .e-pagecountmsg,
.e-pager .e-parentmsgbar,
.e-pager .e-pagesizes,
.e-pager .e-pagerdropdown input {
    font-family: var(--nui-font);
    font-size: var(--nui-font-size) !important;
}

.e-grid .e-gridpager {
    padding-top: 2px;
    padding-bottom: 2px;
}

/* Page-number links make the container 35px; keep pagers without them (empty or
   single-page sub-grids) the same height */
.e-grid .e-gridpager .e-pagercontainer {
    min-height: 35px;
}

/* ---- Tabs ---- */
.nav-tabs .nav-link,
.e-tab .e-tab-header .e-tab-text {
    font-family: var(--nui-font);
    font-size: var(--nui-font-size) !important;
}

/* Syncfusion tabs: separate rounded-top tabs on every page (the style Reservation used)
   (!important beats the theme's per-state tab margins) */
.e-tab .e-tab-header .e-toolbar-item {
    padding: 5px 0 !important;
    margin: 0 8px 0 0 !important;
    border-radius: 10px 10px 0 0 !important;
}

/* Grid command-column buttons (Edit, Details...) fit inside the compact row */
.e-grid .e-unboundcelldiv {
    line-height: 1;
}

.e-grid .e-unboundcelldiv .e-btn {
    height: 20px;
    min-height: 20px;
    padding: 0 8px;
    line-height: 18px;
    font-family: var(--nui-font);
    font-size: var(--nui-font-size);
}
