/* =====================================================================
   Client Config Wizard - popup edit forms
   Applies to any TelerikForm with Class="cfg-wizard-form" and
   Orientation="FormOrientation.Horizontal".
   Layout: left-aligned "Label:" beside its control, all single-line
   controls at the same height as the standard .fc-std textbox (28px).
   FormItems with Class="cfg-stacked" (embedded child grids) keep the
   heading above a full-width body.
   ===================================================================== */

.cfg-wizard-form {
    --cfg-label-w: 150px;
    --cfg-label-gap: 10px;
    --cfg-ctl-h: 28px;
}

/* Form-level: short labels (Name, Description...) -> narrow label column */
.cfg-wizard-form.cfg-labels-compact {
    --cfg-label-w: 80px;
}

/* ---- Row layout ---- */
.cfg-wizard-form.k-form-horizontal .k-form-field {
    display: flex;
    align-items: flex-start;
    margin-top: 0;
    margin-bottom: .25rem;
}

/* Telerik's grid layout adds its own row gap between items */
.cfg-wizard-form .k-form-layout {
    row-gap: 0 !important;
}

/* Block, so the ":" flows right after the last word when a label wraps.
   (Telerik's horizontal rule sets flex column wrap - overridden here.) */
.cfg-wizard-form.k-form-horizontal .k-form-field > .k-form-label {
    display: block;
    flex: 0 0 var(--cfg-label-w);
    width: var(--cfg-label-w);
    margin: 0 var(--cfg-label-gap) 0 0;
    padding-top: 4px;
    min-height: var(--cfg-ctl-h);
    text-align: left;
    align-self: flex-start;
    font-size: .8125rem;
    font-weight: 600;
    line-height: 1.5;
    white-space: normal;
}

/* Telerik's auto-generated labels (self-closing FormItem - the only labels
   with a for= attribute) end with a whitespace text node. Flex drops it,
   avoiding "Display Order :". Templated labels stay block (above). */
.cfg-wizard-form.k-form-horizontal .k-form-field > label.k-form-label[for] {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: baseline;
}

.cfg-wizard-form.k-form-horizontal .k-form-field > .k-form-label::after {
    content: ":";
}

/* Required fields: FormItem Class="cfg-required" -> "* Label:" */
.cfg-wizard-form .k-form-field.cfg-required > .k-form-label::before {
    content: "*";
    color: var(--bs-danger, #dc3545);
    margin-right: 3px;
}

.cfg-wizard-form.k-form-horizontal .k-form-field > .k-form-field-wrap {
    flex: 1 1 0%;
    min-width: 0;
    max-width: none;
    min-height: var(--cfg-ctl-h);
}

/* Read-only values (e.g. ID) line up with the label text */
.cfg-wizard-form .k-form-field-wrap > .cfg-readonly {
    display: block;
    padding-top: 4px;
    font-size: .8125rem;
    line-height: 1.5;
}

/* ---- Uniform control height ---- */
.cfg-wizard-form .k-form-field-wrap .k-textbox,
.cfg-wizard-form .k-form-field-wrap .k-numerictextbox,
.cfg-wizard-form .k-form-field-wrap .k-dropdownlist,
.cfg-wizard-form .k-form-field-wrap .k-combobox,
.cfg-wizard-form .k-form-field-wrap .k-dateinput,
.cfg-wizard-form .k-form-field-wrap .k-datepicker {
    width: 100%;
    height: var(--cfg-ctl-h);
    min-height: var(--cfg-ctl-h);
    padding-top: 0;
    padding-bottom: 0;
    box-sizing: border-box;
}

.cfg-wizard-form .k-form-field-wrap .k-textbox .k-input-inner,
.cfg-wizard-form .k-form-field-wrap .k-numerictextbox .k-input-inner,
.cfg-wizard-form .k-form-field-wrap .k-dropdownlist .k-input-inner,
.cfg-wizard-form .k-form-field-wrap .k-combobox .k-input-inner {
    height: 100%;
    padding-left: .25rem !important;
    padding-right: .25rem !important;
}

.cfg-wizard-form .k-form-field-wrap .k-dropdownlist > .k-input-button {
    height: 100% !important;
}

/* Numeric spinner: split the control height between the two arrows
   (overrides the global 26px .k-input-button rule in app-override) */
.cfg-wizard-form .k-numerictextbox .k-input-spinner {
    height: 100%;
}

.cfg-wizard-form .k-numerictextbox .k-input-spinner .k-input-button {
    height: 50% !important;
    line-height: 1 !important;
    width: 24px !important;
}

/* Textareas grow naturally but share the textbox padding */
.cfg-wizard-form .k-form-field-wrap .k-textarea {
    width: 100%;
    min-height: var(--cfg-ctl-h);
}

/* Checkboxes: vertically centred against the 28px row */
.cfg-wizard-form .k-form-field-wrap > .k-checkbox-wrap,
.cfg-wizard-form .k-form-field-wrap > .k-checkbox {
    margin-top: 6px;
}

/* Validation messages sit under the control, not beside it */
.cfg-wizard-form .k-form-field-wrap .validation-message,
.cfg-wizard-form .k-form-field-wrap .k-form-error {
    display: block;
    margin-top: 2px;
}

/* ---- Stacked items: embedded child grids, full width ---- */
.cfg-wizard-form.k-form-horizontal .k-form-field.cfg-stacked {
    flex-direction: column;
    align-items: stretch;
    margin-top: .5rem;
}

.cfg-wizard-form.k-form-horizontal .k-form-field.cfg-stacked > .k-form-label {
    flex: none;
    width: auto;
    min-height: 0;
    justify-content: flex-start;
    margin: 0 0 .25rem 0;
    padding-top: 0;
    text-align: left;
    font-size: .9375rem;
    font-weight: 600;
}

.cfg-wizard-form.k-form-horizontal .k-form-field.cfg-stacked > .k-form-label::after {
    content: none;
}

.cfg-wizard-form.k-form-horizontal .k-form-field.cfg-stacked > .k-form-field-wrap {
    width: 100%;
    min-height: 0;
}

/* Narrow label for short controls (number box, checkbox) in a side column */
.cfg-wizard-form .k-form-field.cfg-label-sm {
    --cfg-label-w: 95px;
}

/* ---- Main/side layout: Form Class="cfg-main-side" with Columns="2" ----
   Column 1 (Name, Description...) takes all remaining width; column 2
   (short controls: number box, checkbox) is a fixed narrow strip.
   Overrides Telerik's equal-width .k-grid-cols-2. */
.cfg-wizard-form.cfg-main-side .k-form-layout {
    grid-template-columns: minmax(0, 1fr) 185px !important;
}

/* ---- Embedded grid flush with its toolbar: TelerikGrid Class="cfg-flush-grid" ----
   Removes the grid's outer frame (which also boxes the toolbar row) and the
   toolbar's bottom border/padding, so the toolbar button sits flush-left
   with the grid. The frame is re-drawn around the header, rows and pager. */
.k-grid.cfg-flush-grid {
    border: 0 !important;
    background: transparent;
}

.k-grid.cfg-flush-grid .k-grid-toolbar {
    border: 0 !important;
    padding: 0 0 4px 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.k-grid.cfg-flush-grid .k-grid-header,
.k-grid.cfg-flush-grid .k-grid-container,
.k-grid.cfg-flush-grid .k-pager,
.k-grid.cfg-flush-grid .k-grid-pager {
    border: 1px solid var(--kendo-color-border, rgba(0, 0, 0, 0.08)) !important;
}

/* Inline-edit Save/Cancel stay side by side */
.k-grid.cfg-flush-grid .k-command-cell {
    white-space: nowrap;
}

.k-grid.cfg-flush-grid .k-grid-container {
    border-top: 0 !important;
    border-bottom: 0 !important;
}

/* ---- Group legends ---- */
.cfg-wizard-form .k-form-fieldset {
    margin-top: .75rem;
}

.cfg-wizard-form .k-form-fieldset > .k-form-legend {
    font-size: .875rem;
    font-weight: 600;
    margin-bottom: .5rem;
}

/* ---- Narrow screens: fall back to label above control ---- */
@media (max-width: 575.98px) {
    .cfg-wizard-form.k-form-horizontal .k-form-field {
        flex-direction: column;
    }

    .cfg-wizard-form.k-form-horizontal .k-form-field > .k-form-label {
        flex: none;
        width: auto;
        min-height: 0;
        text-align: left;
        margin: 0 0 .25rem 0;
    }
}

/* =====================================================================
   Role editor window (RolesConfig.razor) - TelerikWindow Class="cfg-role-editor"
   ===================================================================== */

/* Name / Landing Page on one row, same label style as the wizard forms */
.cfg-role-editor .cfg-inline-label {
    flex: 0 0 auto;
    margin: 0 10px 0 0;
    font-size: .8125rem;
    font-weight: 600;
    white-space: nowrap;
}

.cfg-role-editor .cfg-role-header .cfg-inline-label {
    min-width: 50px;
}

.cfg-role-editor .cfg-role-header .k-dropdownlist {
    height: 28px;
    min-height: 28px;
}

/* All three cards: same height, body scrolls. Two card rows share what's
   left of the 90vh window after the titlebar, Name row, gaps and footer,
   so Save/Cancel stay visible without scrolling the window. */
.cfg-role-editor .cfg-role-card {
    height: calc((90vh - 240px) / 2);
    min-height: 180px;
    display: flex;
    flex-direction: column;
    margin-bottom: 0 !important;
}

.cfg-role-editor .cfg-role-card > .card-header {
    flex: 0 0 auto;
}

.cfg-role-editor .cfg-role-card > .card-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

/* Let the card body be the scroller so the table header can stick */
.cfg-role-editor .cfg-role-card .table-responsive {
    overflow: visible;
}

/* Same text size in every card (Menu Access grid, Widgets, Email Templates) */
.cfg-role-editor .cfg-role-card .k-grid,
.cfg-role-editor .cfg-role-table {
    font-size: .8125rem;
}

.cfg-role-editor .cfg-role-table {
    margin-bottom: 0;
}

.cfg-role-editor .cfg-role-table > thead > tr > th {
    position: sticky;
    top: -15px; /* offsets .form-card-body padding */
    z-index: 1;
    background: #093b5d;
    color: #fff;
    font-size: .8125rem;
    font-weight: 600;
}

.cfg-role-editor .cfg-role-table > :not(caption) > * > * {
    padding: .3rem .5rem;
    vertical-align: middle;
}

.cfg-role-editor .cfg-role-table .form-check {
    margin-bottom: 0;
    min-height: 0;
}

/* Footer: buttons are floated right globally, so the footer never wrapped
   them and bottom padding landed above them. Flex contains the buttons;
   row-reverse keeps Save rightmost like the float did. */
.cfg-role-editor .k-modal-footer {
    display: flex;
    flex-direction: row-reverse;
    gap: 4px;
    padding-bottom: 0 !important;
    margin-bottom: 1rem;
}

.cfg-role-editor .k-modal-footer button {
    float: none;
    margin-right: 0;
}

/* =====================================================================
   Wizard page (ClientConfigWizard.razor) - TelerikWizard Class="cfg-wizard"
   ===================================================================== */

/* One height for every step's main grid (toolbar + rows + pager), based on
   the viewport so the page itself doesn't scroll - the grid does.
   Tune the 380px (page chrome above/below the grid) here only. */
:root {
    --cfg-step-grid-h: max(260px, calc(100vh - 380px));
}

/* Pull the step content up closer to the step icons (Telerik default 2rem) */
.k-wizard-horizontal.cfg-wizard .k-wizard-steps {
    margin-top: .75rem;
}

/* "Step x of 8" line under the grid (Telerik default 2rem) */
.cfg-wizard .k-wizard-buttons {
    margin-top: .5rem;
}

/* Back/Next sit right-aligned in the grid toolbar row */
.cfg-step-nav {
    display: flex;
    gap: .5rem;
}

/* Toolbar-like header row for steps without a grid toolbar (Table Generator) */
.cfg-step-toolbar {
    display: flex;
    align-items: center;
    padding-bottom: .5rem;
}

/* Telerik scopes .k-toolbar-spacer to .k-toolbar, so push the nav right here */
.cfg-step-toolbar > .cfg-step-nav {
    margin-left: auto;
}

/* Grid heading outside a form - same look as the stacked grid headings
   (Roles, Fields, Menu Items...) */
.cfg-grid-heading {
    display: block;
    margin: 0;
    color: #1d9ad6;
    font-size: .9375rem;
    font-weight: 600;
}

/* Info-alert "No Records Found" inside a grid's empty row */
.k-grid .k-grid-norecords .alert {
    width: 100%;
}

/* FormGroup has no ColSpan parameter: Class="cfg-group-full" makes a group
   span every column of the parent form grid */
.cfg-wizard-form .cfg-group-full {
    grid-column: 1 / -1;
}

/* Grid heading with the same dashed rule as the FormGroup legends:
   FormItem Class="cfg-stacked cfg-stacked-rule" */
.cfg-wizard-form.k-form-horizontal .k-form-field.cfg-stacked-rule > .k-form-label {
    width: 100%;
    padding-bottom: 5px;
    margin-bottom: .5rem;
    border-bottom: 1px dashed #093b5d; /* matches .k-form .k-form-legend in app-override */
}

/* Popup opened from inside another popup: info-colored title bar so the
   stacking is obvious. TelerikWindow / GridPopupEditSettings Class="cfg-child-window" */
.k-window.cfg-child-window .k-window-titlebar {
    background-color: var(--CAMeo2Blazor-info, #67baf1) !important;
    border-color: var(--CAMeo2Blazor-info, #67baf1) !important;
    color: #fff;
}

/* Flush grids without a pager: the pager normally draws the bottom edge,
   so close the frame on the rows container instead */
.k-grid.cfg-flush-grid:not(:has(.k-pager)) .k-grid-container {
    border-bottom: 1px solid var(--kendo-color-border, rgba(0, 0, 0, 0.08)) !important;
}

/* Delete confirmation dialog (CfgDeleteConfirmDialog) - impact list */
.cfg-delete-dialog .cfg-delete-impact {
    font-size: .8125rem;
}

.cfg-delete-dialog .cfg-delete-impact td {
    padding: .25rem .5rem;
}

/* "Unsaved changes" note in a popup footer (child-grid changes wait for the popup's Save).
   The footer buttons float right (app-override), so the note floats left beside them. */
.k-modal-footer .cfg-unsaved-note {
    float: left;
    padding: .45rem .75rem;
    font-size: .8125rem;
    line-height: 1.3;
}