/*
 * AksaErp Radzen component styling hooks.
 * Load after Metronic and Radzen CSS.
 * Scope is intentionally limited to wrapper classes injected by:
 * - AksaRadzenDataGrid<TItem>  => .ak-grid
 * - AksaRadzenDropDown<TValue> => .ak-dropdown
 * - AksaRadzenNumeric<TValue>  => .ak-numeric / .ak-numeric-group
 */

:root {
    --ak-rz-radius: .65rem;
    --ak-rz-radius-sm: .375rem;
    --ak-rz-border: var(--bs-border-color, #e4e6ef);
    --ak-rz-border-strong: var(--bs-gray-300, #d8dbe5);
    --ak-rz-bg: var(--bs-body-bg, #fff);
    --ak-rz-soft-bg: var(--bs-gray-100, #f5f8fa);
    --ak-rz-hover-bg: var(--bs-gray-100, #f5f8fa);
    --ak-rz-header-bg: var(--bs-gray-100, #f5f8fa);
    --ak-rz-text: var(--bs-gray-800, #252f4a);
    --ak-rz-muted: var(--bs-gray-600, #78829d);
    --ak-rz-primary: var(--bs-primary, #3b82f6);
    --ak-rz-danger: var(--bs-danger, #f1416c);
    --ak-rz-warning: var(--bs-warning, #ffc700);
    --ak-rz-shadow: 0 .125rem .625rem rgba(0, 0, 0, .04);
    --ak-rz-focus-shadow: 0 0 0 .2rem color-mix(in srgb, var(--ak-rz-primary) 18%, transparent);
    --rz-input-height: 32px;
    --ak-rz-control-height: 32px;
    --ak-rz-control-height-sm: 30px;
    --ak-rz-font-size: .8125rem;
    --ak-erp-body-font-size: .875rem;
    --ak-erp-label-font-size: .78rem;
    --ak-erp-button-font-size: .8125rem;
}

/* --------------------------------------------------------------------------
   Shared safe defaults
   -------------------------------------------------------------------------- */

.ak-grid,
.ak-dropdown,
.ak-numeric,
.ak-numeric-group {
    box-sizing: border-box;
}

.ak-dropdown *,
.ak-numeric *,
.ak-numeric-group *,
.ak-grid * {
    box-sizing: border-box;
}

/* Keep global override output stable in dense ERP forms. */
.ak-dropdown,
.ak-numeric {
    max-width: 100%;
}

/* --------------------------------------------------------------------------
   ERP compact typography and density layer
   -------------------------------------------------------------------------- */

body {
    font-size: var(--ak-erp-body-font-size);
}

.form-label,
.col-form-label,
.rz-label {
    font-size: var(--ak-erp-label-font-size);
    font-weight: 600;
    margin-bottom: .25rem;
    color: var(--ak-rz-muted);
}

.btn:not(.btn-lg):not(.btn-sm),
.rz-button:not(.rz-button-lg):not(.rz-button-sm) {
    min-height: var(--ak-rz-control-height-sm);
    padding-block: .32rem;
    padding-inline: .5rem;
    font-size: var(--ak-erp-button-font-size);
    line-height: 1.25;
}

.rz-button:not(.rz-button-lg):not(.rz-button-sm) :where(.rz-button-text) {
    font-size: inherit;
    line-height: inherit;
}

.rz-button:not(.rz-button-lg):not(.rz-button-sm) :where(.rz-button-icon, .rzi) {
    font-size: .95rem;
    line-height: 1;
}

.rz-inputtext:not(textarea),
.rz-dropdown:not(.rz-multiselect),
.rz-numeric input,
.rz-datepicker input,
.rz-autocomplete input,
.rz-spinner input {
    min-height: var(--ak-rz-control-height);
    font-size: var(--ak-rz-font-size);
}

.rz-card .rz-card-title,
.card .card-title {
    font-size: 1rem;
}

.form-control:not(textarea):not(.form-control-lg):not(.form-control-sm),
.form-select:not(.form-select-lg):not(.form-select-sm) {
    min-height: var(--ak-rz-control-height);
    height: var(--ak-rz-control-height);
    padding-block: .35rem;
    font-size: .8125rem;
}

.rz-form-field :where(.rz-form-field-content, .rz-form-field-start, .rz-form-field-end) {
    min-height: var(--ak-rz-control-height);
    display: flex;
    align-items: center;
}

.rz-form-field :where(.rz-form-field-content) {
    padding-block: 0;
}

.rz-form-field :where(.rz-inputtext, .rz-dropdown, .rz-spinner, .rz-numeric, .rz-datepicker, .rz-autocomplete, .rz-picker-input, .rz-inputtext.form-control) {
    min-height: var(--ak-rz-control-height);
    font-size: .8125rem;
}

.rz-form-field :where(input:not([type="checkbox"]):not([type="radio"]), .rz-inputtext, .rz-picker-input, .rz-dropdown-label) {
    line-height: 1.35;
}

.rz-form-field :where(.rz-dropdown-label, .rz-picker-input) {
    display: flex;
    align-items: center;
}

.rz-form-field :where(.rz-dropdown-trigger, .rz-datepicker-trigger, .rz-spinner-button, .rz-numeric-button) {
    min-width: 1.8rem;
    width: 1.8rem;
}

.rz-form-field :where(.rz-dropdown-clear-icon) {
    inset-inline-end: 1.8rem;
}

/* Keep Radzen cards/tabs compact without forcing colors. */
.rz-card:not(.rz-card-lg),
.card:not(.card-xl):not(.card-lg) {
    font-size: var(--ak-rz-font-size);
}

.rz-tabview .rz-tabview-nav li a {
    padding-block: .45rem;
    padding-inline: .75rem;
    font-size: .8125rem;
}

.rz-tabview-panels {
    padding-top: .75rem;
}

/* --------------------------------------------------------------------------
   AksaRadzenDataGrid<TItem> => .ak-grid
   -------------------------------------------------------------------------- */

.ak-grid {
    width: 100%;
    color: var(--ak-rz-text);
    background: var(--ak-rz-bg);
    border: 1px solid var(--ak-rz-border);
    border-radius: var(--ak-rz-radius);
    box-shadow: var(--ak-rz-shadow);
    overflow: hidden;
}

.ak-grid :where(.rz-datatable, .rz-data-grid, .rz-grid-table) {
    border-radius: var(--ak-rz-radius);
}

.ak-grid :where(.rz-datatable-scrollable-header, .rz-datatable-thead th, .rz-grid-table thead th) {
    background: var(--ak-rz-header-bg);
    color: var(--ak-rz-text);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .01em;
    vertical-align: middle;
    border-color: var(--ak-rz-border);
}

.ak-grid :where(.rz-datatable-thead th, .rz-grid-table thead th) {
    padding: .42rem .55rem;
    white-space: nowrap;
}

.ak-grid :where(.rz-datatable-data td, .rz-grid-table tbody td) {
    padding: .38rem .55rem;
    vertical-align: middle;
    color: var(--ak-rz-text);
    border-color: var(--ak-rz-border);
}

.ak-grid :where(.rz-datatable-data tr, .rz-grid-table tbody tr) {
    transition: background-color .12s ease-in-out;
}

.ak-grid :where(.rz-datatable-data tr:hover, .rz-grid-table tbody tr:hover) {
    background: var(--ak-rz-hover-bg);
}

.ak-grid :where(.rz-state-highlight, .rz-selectable .rz-state-highlight) {
    background: color-mix(in srgb, var(--ak-rz-primary) 10%, var(--ak-rz-bg));
    color: var(--ak-rz-text);
}

.ak-grid :where(.rz-cell-data) {
    min-width: 0;
}

.ak-grid :where(.rz-sortable-column .rzi, .rz-column-title .rzi) {
    color: var(--ak-rz-muted);
    opacity: .8;
}

.ak-grid :where(.rz-datatable-loading-content) {
    border-radius: var(--ak-rz-radius);
    background: color-mix(in srgb, var(--ak-rz-bg) 72%, transparent);
    backdrop-filter: blur(2px);
}

.ak-grid :where(.rz-paginator) {
    min-height: 34px;
    padding: .28rem .5rem;
    background: var(--ak-rz-bg);
    border-top: 1px solid var(--ak-rz-border);
    color: var(--ak-rz-muted);
    gap: .35rem;
}

.ak-grid :where(.rz-paginator-page, .rz-paginator-first, .rz-paginator-prev, .rz-paginator-next, .rz-paginator-last) {
    min-width: 28px;
    height: 28px;
    border-radius: var(--ak-rz-radius-sm);
}

.ak-grid :where(.rz-paginator-page.rz-state-active) {
    background: var(--ak-rz-primary);
    color: var(--bs-primary-inverse, #fff);
}

.ak-grid :where(.rz-column-resizer) {
    opacity: .55;
}

.ak-grid :where(.rz-column-resizer:hover) {
    opacity: 1;
    background: color-mix(in srgb, var(--ak-rz-primary) 18%, transparent);
}

.ak-grid :where(.rz-filter-row td, .rz-filter-row th) {
    background: var(--ak-rz-bg);
}

.ak-grid :where(.rz-filter-row input, .rz-filter-row .rz-dropdown, .rz-filter-row .rz-numeric) {
    min-height: var(--ak-rz-control-height-sm);
    font-size: .8125rem;
}

.ak-grid :where(.rz-cell-filter) {
    align-items: center;
    gap: .35rem;
}

.ak-grid :where(.rz-datatable-emptymessage, .rz-empty) {
    padding: 1.5rem .75rem;
    color: var(--ak-rz-muted);
    font-weight: 500;
    text-align: center;
}

/* Avoid too much visual weight when grids are nested in cards. */
.card .ak-grid,
.aksa-card .ak-grid {
    box-shadow: none;
}

/* --------------------------------------------------------------------------
   AksaRadzenDropDown<TValue> => .ak-dropdown
   -------------------------------------------------------------------------- */

.ak-dropdown {
    font-size: var(--ak-rz-font-size);
}

.ak-dropdown :where(.rz-dropdown, .rz-dropdown-label, .rz-dropdown-trigger, .rz-inputtext),
.ak-dropdown:where(.rz-dropdown) {
    min-height: var(--ak-rz-control-height);
}

.ak-dropdown:where(.rz-dropdown),
.ak-dropdown :where(.rz-dropdown) {
    border-color: var(--ak-rz-border);
    border-radius: var(--ak-rz-radius-sm);
    background: var(--ak-rz-bg);
    transition: border-color .12s ease-in-out, box-shadow .12s ease-in-out;
}

.ak-dropdown:where(.rz-dropdown:hover),
.ak-dropdown :where(.rz-dropdown:hover) {
    border-color: var(--ak-rz-border-strong);
}

.ak-dropdown:where(.rz-state-focused, .rz-state-focus),
.ak-dropdown :where(.rz-state-focused, .rz-state-focus),
.ak-dropdown:focus-within {
    border-color: var(--ak-rz-primary);
    box-shadow: var(--ak-rz-focus-shadow);
}

.ak-dropdown :where(.rz-dropdown-label) {
    display: flex;
    align-items: center;
    min-width: 0;
    padding-inline: .75rem 2.25rem;
    color: var(--ak-rz-text);
}

.ak-dropdown :where(.rz-placeholder) {
    color: var(--ak-rz-muted);
}

.ak-dropdown :where(.rz-dropdown-trigger) {
    width: 2.25rem;
    color: var(--ak-rz-muted);
}

.ak-dropdown :where(.rz-dropdown-clear-icon) {
    color: var(--ak-rz-muted);
    opacity: .85;
}

.ak-dropdown :where(.rz-dropdown-clear-icon:hover) {
    opacity: 1;
    color: var(--ak-rz-danger);
}

.ak-dropdown :where(.rz-state-disabled),
.ak-dropdown:where(.rz-state-disabled) {
    opacity: .72;
    cursor: not-allowed;
}

/* Dropdown popup is outside the component tree in Radzen, so keep this broad but Radzen-only. */
.rz-dropdown-panel {
    border: 1px solid var(--ak-rz-border);
    border-radius: var(--ak-rz-radius);
    box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .12);
    overflow: hidden;
}

.rz-dropdown-panel :where(.rz-dropdown-filter-container) {
    padding: .5rem;
    border-bottom: 1px solid var(--ak-rz-border);
    background: var(--ak-rz-bg);
}

.rz-dropdown-panel :where(.rz-dropdown-filter) {
    min-height: var(--ak-rz-control-height-sm);
    border-radius: var(--ak-rz-radius-sm);
}

.rz-dropdown-panel :where(.rz-dropdown-item, .rz-dropdown-items li) {
    min-height: 30px;
    padding: .32rem .55rem;
    font-size: .8125rem;
}

.rz-dropdown-panel :where(.rz-dropdown-item:hover, .rz-dropdown-items li:hover) {
    background: var(--ak-rz-hover-bg);
}

.rz-dropdown-panel :where(.rz-state-highlight) {
    background: color-mix(in srgb, var(--ak-rz-primary) 12%, var(--ak-rz-bg));
    color: var(--ak-rz-text);
}

/* Safe variant for dropdowns used in grid cells/templates. */
.ak-dropdown.ak-dropdown--datagrid,
.ak-grid .ak-dropdown {
    font-size: .8125rem;
}

.ak-grid .ak-dropdown :where(.rz-dropdown, .rz-dropdown-label, .rz-dropdown-trigger, .rz-inputtext),
.ak-grid .ak-dropdown:where(.rz-dropdown) {
    min-height: var(--ak-rz-control-height-sm);
}

/* --------------------------------------------------------------------------
   AksaRadzenNumeric<TValue> => .ak-numeric / .ak-numeric-group
   -------------------------------------------------------------------------- */

.ak-numeric,
.ak-numeric-group {
    font-size: var(--ak-rz-font-size);
}

.ak-numeric-group,
.input-group.ak-numeric-group {
    display: flex;
    align-items: stretch;
    flex-wrap: nowrap;
    width: 100%;
}

.ak-numeric-group > .ak-numeric,
.input-group.ak-numeric-group > .ak-numeric {
    flex: 1 1 0%;
    min-width: 0;
    /* Stretch the inner input to the group's full height so the adornment,
       which stretches too, ends up exactly the same height. */
    display: flex;
    align-items: stretch;
}

.ak-numeric-group > .ak-numeric,
.ak-numeric-group > .ak-numeric :where(.rz-numeric, .rz-spinner) {
    display: flex;
    align-items: stretch;
    width: 100%;
    min-width: 0;
}

.ak-numeric-group > .ak-numeric :where(input, .rz-inputtext) {
    width: 100%;
    height: auto;
    align-self: stretch;
    box-sizing: border-box;
}

.ak-numeric :where(input),
.ak-numeric:where(input),
.ak-numeric :where(.rz-inputtext),
.ak-numeric:where(.rz-inputtext),
.ak-numeric:where(.rz-numeric) input,
.ak-numeric :where(.rz-numeric input) {
    min-height: var(--ak-rz-control-height);
    border-color: var(--ak-rz-border);
    border-radius: var(--ak-rz-radius-sm);
    color: var(--ak-rz-text);
    background: var(--ak-rz-bg);
    transition: border-color .12s ease-in-out, box-shadow .12s ease-in-out;
}

.ak-numeric:focus-within,
.ak-numeric-group:focus-within {
    position: relative;
    z-index: 2;
}

.ak-numeric :where(input:focus),
.ak-numeric :where(.rz-inputtext:focus),
.ak-numeric:where(.rz-state-focused, .rz-state-focus) {
    border-color: var(--ak-rz-primary);
    box-shadow: var(--ak-rz-focus-shadow);
    outline: none;
}

.ak-numeric :where(input[readonly]),
.ak-numeric :where(.rz-readonly),
.ak-numeric:where(.rz-readonly) {
    background: var(--ak-rz-soft-bg);
}

.ak-numeric :where(input:disabled),
.ak-numeric :where(.rz-state-disabled),
.ak-numeric:where(.rz-state-disabled) {
    opacity: .72;
    cursor: not-allowed;
}

.ak-numeric-group .ak-numeric-adornment,
.input-group.ak-numeric-group .ak-numeric-adornment {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    min-width: 2.15rem;
    /* Match the input height exactly: the group stretches every child to the
       tallest one, so the adornment takes the input's full height (not a fixed
       min that can render shorter than the padded input). */
    min-height: var(--ak-rz-control-height);
    height: auto;
    align-self: stretch;
    padding-inline: .55rem;
    color: var(--ak-rz-muted);
    background: var(--ak-rz-soft-bg);
    border: 1px solid var(--ak-rz-border);
    box-sizing: border-box;
    font-size: var(--ak-rz-font-size);
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

.ak-numeric-group .ak-numeric-unit,
.ak-numeric-group .ak-numeric-text {
    display: inline-flex;
    align-items: center;
    line-height: 1;
    font-size: var(--ak-rz-font-size);
    font-variant-numeric: tabular-nums;
    letter-spacing: .01em;
}

/* Keep the unit text from being clipped or stretching the adornment */
.ak-numeric-group .ak-numeric-unit {
    max-width: 6rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.input-group.ak-numeric-group > .ak-numeric,
.input-group.ak-numeric-group > .ak-numeric-adornment {
    margin-bottom: 0;
}

.ak-numeric-group .ak-numeric-material-icon {
    font-size: 1rem;
    line-height: 1;
}

.ak-numeric-group .icon-saudi_riyal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .95rem;
    line-height: 1;
}

.ak-numeric--currency .ak-numeric-adornment {
    color: var(--ak-rz-primary);
}

.ak-numeric--weight .ak-numeric-adornment,
.ak-numeric--length .ak-numeric-adornment,
.ak-numeric--percentage .ak-numeric-adornment {
    color: var(--ak-rz-muted);
}

/* Make Bootstrap input-group borders look like one control. */
.ak-numeric-group:not([dir="rtl"]) > .ak-numeric-adornment:first-child {
    border-start-start-radius: var(--ak-rz-radius-sm);
    border-end-start-radius: var(--ak-rz-radius-sm);
    border-start-end-radius: 0;
    border-end-end-radius: 0;
    border-inline-end: 0;            /* fuse with the input's left border */
}

.ak-numeric-group:not([dir="rtl"]) > .ak-numeric-adornment:first-child + .ak-numeric :where(input, .rz-inputtext) {
    border-start-start-radius: 0;
    border-end-start-radius: 0;
}

.ak-numeric-group:not([dir="rtl"]) > .ak-numeric + .ak-numeric-adornment {
    border-start-start-radius: 0;
    border-end-start-radius: 0;
    border-start-end-radius: var(--ak-rz-radius-sm);
    border-end-end-radius: var(--ak-rz-radius-sm);
    border-inline-start: 0;          /* fuse with the input's right border */
}

.ak-numeric-group:not([dir="rtl"]) > .ak-numeric:has(+ .ak-numeric-adornment) :where(input, .rz-inputtext) {
    border-start-end-radius: 0;
    border-end-end-radius: 0;
}

.ak-numeric-group[dir="rtl"] > .ak-numeric-adornment:first-child {
    border-start-start-radius: 0;
    border-end-start-radius: 0;
    border-start-end-radius: var(--ak-rz-radius-sm);
    border-end-end-radius: var(--ak-rz-radius-sm);
    border-inline-start: 0;
}

.ak-numeric-group[dir="rtl"] > .ak-numeric-adornment:first-child + .ak-numeric :where(input, .rz-inputtext) {
    border-start-end-radius: 0;
    border-end-end-radius: 0;
}

.ak-numeric-group[dir="rtl"] > .ak-numeric + .ak-numeric-adornment {
    border-start-start-radius: var(--ak-rz-radius-sm);
    border-end-start-radius: var(--ak-rz-radius-sm);
    border-start-end-radius: 0;
    border-end-end-radius: 0;
    border-inline-end: 0;
}

.ak-numeric-group[dir="rtl"] > .ak-numeric:has(+ .ak-numeric-adornment) :where(input, .rz-inputtext) {
    border-start-start-radius: 0;
    border-end-start-radius: 0;
}

.ak-numeric--rtl :where(input, .rz-inputtext) {
    text-align: right;
    direction: rtl;
}

.ak-numeric--ltr :where(input, .rz-inputtext) {
    text-align: left;
    direction: ltr;
}

/* Numeric controls inside grids must remain compact and avoid row height explosion. */
.ak-grid .ak-numeric :where(input, .rz-inputtext),
.ak-grid .ak-numeric-group .ak-numeric-adornment {
    min-height: var(--ak-rz-control-height-sm);
    font-size: var(--ak-rz-font-size);
}

.ak-grid .ak-numeric-group .ak-numeric-adornment {
    min-width: 2rem;
    padding-inline: .45rem;
}

/* Grid unit text shrinks with the cell */
.ak-grid .ak-numeric-group .ak-numeric-unit {
    max-width: 4.5rem;
}

/* --------------------------------------------------------------------------
   Validation states scoped to the wrappers
   -------------------------------------------------------------------------- */

.ak-dropdown :where(.invalid, .rz-invalid),
.ak-numeric :where(.invalid, .rz-invalid),
.ak-dropdown:where(.invalid, .rz-invalid),
.ak-numeric:where(.invalid, .rz-invalid) {
    border-color: var(--ak-rz-danger) !important;
}

.ak-dropdown:where(.invalid, .rz-invalid):focus-within,
.ak-numeric:where(.invalid, .rz-invalid):focus-within,
.ak-numeric-group:has(.rz-invalid),
.ak-numeric-group:has(.invalid) {
    box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--ak-rz-danger) 16%, transparent);
}

/* --------------------------------------------------------------------------
   RTL/LTR hardening
   -------------------------------------------------------------------------- */

.ak-grid[dir="rtl"],
.ak-dropdown[dir="rtl"],
.ak-numeric-group[dir="rtl"],
.ak-numeric--rtl {
    direction: rtl;
}

.ak-grid[dir="ltr"],
.ak-dropdown[dir="ltr"],
.ak-numeric-group[dir="ltr"],
.ak-numeric--ltr {
    direction: ltr;
}

.ak-numeric-group--rtl .ak-numeric-adornment,
.ak-numeric-group--ltr .ak-numeric-adornment {
    direction: inherit;
}

/* --------------------------------------------------------------------------
   Small screens
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
    .ak-grid {
        border-radius: var(--ak-rz-radius-sm);
    }

    .ak-grid :where(.rz-datatable-thead th, .rz-grid-table thead th),
    .ak-grid :where(.rz-datatable-data td, .rz-grid-table tbody td) {
        padding: .38rem .5rem;
    }

    .ak-grid :where(.rz-paginator) {
        flex-wrap: wrap;
        justify-content: center;
    }

    .ak-dropdown :where(.rz-dropdown, .rz-dropdown-label, .rz-dropdown-trigger, .rz-inputtext),
    .ak-dropdown:where(.rz-dropdown),
    .ak-numeric :where(input, .rz-inputtext),
    .ak-numeric-group .ak-numeric-adornment {
        min-height: 32px;
    }

    .ak-numeric-group .ak-numeric-unit {
        max-width: 4rem;
    }
}


/* --------------------------------------------------------------------------
   Adorned numeric (Bootstrap input-group) — height parity FIX
   DOM: .ak-numeric-group > .ak-numeric-adornment + .rz-numeric > input
   The base RadzenNumeric renders .rz-numeric (not .ak-numeric) when adorned,
   so the adornment and the input wrapper must be stretched explicitly here.
   -------------------------------------------------------------------------- */

/* Group stretches every direct child to the tallest one. */
.ak-numeric-group,
.input-group.ak-numeric-group {
    align-items: stretch;
}

/* The Radzen numeric wrapper is the flexible cell; make it fill height and pass
   that height down to its inner input. */
.ak-numeric-group > .rz-numeric {
    flex: 1 1 0%;
    min-width: 0;
    display: flex;
    align-items: stretch;
    align-self: stretch;
    height: auto;
}

.ak-numeric-group > .rz-numeric > input,
.ak-numeric-group > .rz-numeric .rz-inputtext,
.ak-numeric-group > .rz-numeric input.rz-inputtext {
    flex: 1 1 auto;
    width: 100%;
    height: auto;
    min-height: var(--ak-rz-control-height);
    align-self: stretch;
    box-sizing: border-box;
}

/* The adornment matches the SAME computed height as the input wrapper, because
   the group stretches it; pin box-sizing + remove min-height flooring so it can
   grow to the input's height instead of capping shorter. */
.ak-numeric-group > .ak-numeric-adornment,
.input-group.ak-numeric-group > .ak-numeric-adornment {
    align-self: stretch;
    height: auto;
    box-sizing: border-box;
    /* Bootstrap .input-group-text ships its own line-height/padding that can make
       it taller/shorter than the Radzen input; normalize to our control metrics. */
    line-height: 1;
    padding-block: 0;
}

/* In grids the input wrapper follows the smaller control height. */
.ak-grid .ak-numeric-group > .rz-numeric > input,
.ak-grid .ak-numeric-group > .rz-numeric .rz-inputtext {
    min-height: var(--ak-rz-control-height-sm);
}

/* Seam radii on the real .rz-numeric input facing the adornment (LTR + RTL). */
.ak-numeric-group:not([dir="rtl"]) > .ak-numeric-adornment:first-child + .rz-numeric > input,
.ak-numeric-group:not([dir="rtl"]) > .ak-numeric-adornment:first-child + .rz-numeric .rz-inputtext {
    border-start-start-radius: 0;
    border-end-start-radius: 0;
}

.ak-numeric-group:not([dir="rtl"]) > .rz-numeric:has(+ .ak-numeric-adornment) > input,
.ak-numeric-group:not([dir="rtl"]) > .rz-numeric:has(+ .ak-numeric-adornment) .rz-inputtext {
    border-start-end-radius: 0;
    border-end-end-radius: 0;
}

.ak-numeric-group[dir="rtl"] > .ak-numeric-adornment:first-child + .rz-numeric > input,
.ak-numeric-group[dir="rtl"] > .ak-numeric-adornment:first-child + .rz-numeric .rz-inputtext {
    border-start-end-radius: 0;
    border-end-end-radius: 0;
}

.ak-numeric-group[dir="rtl"] > .rz-numeric:has(+ .ak-numeric-adornment) > input,
.ak-numeric-group[dir="rtl"] > .rz-numeric:has(+ .ak-numeric-adornment) .rz-inputtext {
    border-start-start-radius: 0;
    border-end-start-radius: 0;
}

/* --------------------------------------------------------------------------
   Global list Card Grid

   The shared AksaRadzenDataGrid keeps Radzen paging/sorting/filtering as the
   data engine. JS annotates only structurally safe, read-only page-list grids.
   Table-only grids never receive .ak-grid-card-ready.
   -------------------------------------------------------------------------- */

.ak-grid.ak-grid-card-ready {
    --aksa-card-grid-min-width: 320px;
    --aksa-card-grid-gap: 12px;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
}

.ak-grid.ak-grid-card-ready :where([data-aksa-card-container="true"]) {
    max-width: 100%;
}

.ak-grid.ak-grid-card-ready :where(table[data-aksa-card-table]) {
    display: block;
    width: 100% !important;
    max-width: 100%;
    table-layout: auto !important;
    border-collapse: separate;
    border-spacing: 0;
    background: transparent;
}

.ak-grid.ak-grid-card-ready :where(table[data-aksa-card-table] colgroup) {
    display: none;
}

/* Header remains available as a compact control strip, preserving Radzen
   sorting, filters and column-picker behavior. */
.ak-grid.ak-grid-card-ready :where(table[data-aksa-card-table="header"] thead,
                                  table[data-aksa-card-table="combined"] thead) {
    display: block;
    margin-bottom: .625rem;
    padding: .4rem;
    background: var(--ak-rz-bg);
    border: 1px solid var(--ak-rz-border);
    border-radius: var(--ak-rz-radius);
    box-shadow: var(--ak-rz-shadow);
}

.ak-grid.ak-grid-card-ready :where(table[data-aksa-card-table="header"] thead tr,
                                  table[data-aksa-card-table="combined"] thead tr) {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: .35rem;
    width: 100%;
}

.ak-grid.ak-grid-card-ready :where(table[data-aksa-card-table="header"] thead th,
                                  table[data-aksa-card-table="combined"] thead th) {
    position: static !important;
    inset: auto !important;
    display: flex;
    flex: 1 1 10rem;
    align-items: center;
    gap: .25rem;
    width: auto !important;
    min-width: 8rem !important;
    max-width: 100% !important;
    min-height: 2.15rem;
    padding: .35rem .5rem;
    white-space: normal;
    background: var(--ak-rz-soft-bg);
    border: 1px solid var(--ak-rz-border);
    border-radius: var(--ak-rz-radius-sm);
}

.ak-grid.ak-grid-card-ready :where(thead .rz-filter-row,
                                  thead .rz-datatable-filter-row,
                                  thead .rz-grid-filter-row) {
    margin-top: .35rem;
}

.ak-grid.ak-grid-card-ready :where(thead .rz-filter-row th,
                                  thead .rz-datatable-filter-row th,
                                  thead .rz-grid-filter-row th) {
    background: var(--ak-rz-bg);
}

.ak-grid.ak-grid-card-ready :where(thead th .rz-column-title,
                                  thead th .rz-column-title-content,
                                  thead th .rz-cell-data) {
    min-width: 0;
    white-space: normal;
}

.ak-grid.ak-grid-card-ready :where(thead th .rz-column-resizer) {
    display: none;
}

/* Each rendered data row becomes one responsive card. */
.ak-grid.ak-grid-card-ready :where(table[data-aksa-card-table="body"] tbody,
                                  table[data-aksa-card-table="combined"] tbody) {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--aksa-card-grid-min-width)), 1fr));
    align-items: start;
    gap: var(--aksa-card-grid-gap);
    width: 100%;
    padding: 1px;
}

.ak-grid.ak-grid-card-ready :where(table[data-aksa-card-table="body"] tbody > tr,
                                  table[data-aksa-card-table="combined"] tbody > tr) {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    width: 100%;
    height: auto !important;
    overflow: hidden;
    color: var(--ak-rz-text);
    background: var(--ak-rz-bg);
    border: 1px solid var(--ak-rz-border);
    border-radius: var(--ak-rz-radius);
    box-shadow: var(--ak-rz-shadow);
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.ak-grid.ak-grid-card-ready :where(table[data-aksa-card-table="body"] tbody > tr:hover,
                                  table[data-aksa-card-table="combined"] tbody > tr:hover) {
    background: var(--ak-rz-bg);
    border-color: color-mix(in srgb, var(--ak-rz-primary) 32%, var(--ak-rz-border));
    box-shadow: 0 .35rem 1rem rgba(0, 0, 0, .075);
    transform: translateY(-1px);
}

.ak-grid.ak-grid-card-ready :where(table[data-aksa-card-table="body"] tbody > tr.rz-state-highlight,
                                  table[data-aksa-card-table="combined"] tbody > tr.rz-state-highlight) {
    background: color-mix(in srgb, var(--ak-rz-primary) 5%, var(--ak-rz-bg));
    border-color: color-mix(in srgb, var(--ak-rz-primary) 55%, var(--ak-rz-border));
}

.ak-grid.ak-grid-card-ready :where(table[data-aksa-card-table="body"] tbody > tr > td,
                                  table[data-aksa-card-table="combined"] tbody > tr > td) {
    position: static !important;
    inset: auto !important;
    display: grid;
    grid-template-columns: minmax(6.75rem, 38%) minmax(0, 1fr);
    align-items: start;
    gap: .625rem;
    order: 10;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    padding: .55rem .75rem;
    white-space: normal;
    text-align: start;
    background: transparent;
    border: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--ak-rz-border) 75%, transparent);
}

.ak-grid.ak-grid-card-ready :where(table[data-aksa-card-table="body"] tbody > tr > td:last-child,
                                  table[data-aksa-card-table="combined"] tbody > tr > td:last-child) {
    border-bottom: 0;
}

.ak-grid.ak-grid-card-ready :where(tbody > tr > td[data-aksa-label])::before {
    content: attr(data-aksa-label);
    min-width: 0;
    color: var(--ak-rz-muted);
    font-size: .735rem;
    font-weight: 700;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.ak-grid.ak-grid-card-ready :where(tbody > tr > td .rz-cell-data) {
    display: block;
    min-width: 0;
    width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: inherit;
}

.ak-grid.ak-grid-card-ready :where(tbody > tr > td[data-aksa-card-kind="selection"]) {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    order: 0;
    min-height: 2.15rem;
    padding-block: .4rem;
    background: var(--ak-rz-soft-bg);
}

.ak-grid.ak-grid-card-ready :where(tbody > tr > td[data-aksa-card-kind="selection"])::before,
.ak-grid.ak-grid-card-ready :where(tbody > tr > td[data-aksa-card-kind="actions"])::before,
.ak-grid.ak-grid-card-ready :where(tbody > tr > td[data-aksa-card-kind="spanning"])::before {
    content: none;
}

.ak-grid.ak-grid-card-ready :where(tbody > tr > td[data-aksa-card-kind="actions"]) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: .35rem;
    order: 100;
    margin-top: auto;
    min-height: 2.65rem;
    background: var(--ak-rz-soft-bg);
    border-top: 1px solid var(--ak-rz-border);
    border-bottom: 0;
}

.ak-grid.ak-grid-card-ready :where(tbody > tr > td[data-aksa-card-kind="actions"] > *) {
    max-width: 100%;
}

.ak-grid.ak-grid-card-ready :where(tbody > tr.ak-grid-card-spanning-row) {
    grid-column: 1 / -1;
}

.ak-grid.ak-grid-card-ready :where(tbody > tr.ak-grid-card-spanning-row > td) {
    display: block;
    width: 100% !important;
    padding: .85rem;
    text-align: center;
    border: 0;
}

/* Summary/footer values cannot retain column alignment once rows are cards;
   expose them as a compact totals strip instead. */
.ak-grid.ak-grid-card-ready :where(table[data-aksa-card-table] tfoot) {
    display: block;
    margin-top: .625rem;
    padding: .45rem;
    background: var(--ak-rz-bg);
    border: 1px solid var(--ak-rz-border);
    border-radius: var(--ak-rz-radius);
}

.ak-grid.ak-grid-card-ready :where(table[data-aksa-card-table] tfoot tr) {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}

.ak-grid.ak-grid-card-ready :where(table[data-aksa-card-table] tfoot td) {
    position: static !important;
    display: flex;
    flex: 1 1 10rem;
    align-items: center;
    width: auto !important;
    min-width: 0 !important;
    padding: .4rem .55rem;
    white-space: normal;
    background: var(--ak-rz-soft-bg);
    border: 1px solid var(--ak-rz-border);
    border-radius: var(--ak-rz-radius-sm);
}

.ak-grid.ak-grid-card-ready :where(.rz-paginator) {
    margin-top: .75rem;
    padding: .5rem .625rem;
    background: var(--ak-rz-bg);
    border: 1px solid var(--ak-rz-border);
    border-radius: var(--ak-rz-radius);
    box-shadow: var(--ak-rz-shadow);
}

@media (max-width: 768px) {
    .ak-grid.ak-grid-card-ready :where(table[data-aksa-card-table="body"] tbody,
                                      table[data-aksa-card-table="combined"] tbody) {
        grid-template-columns: minmax(0, 1fr);
    }

    .ak-grid.ak-grid-card-ready :where(table[data-aksa-card-table="header"] thead th,
                                      table[data-aksa-card-table="combined"] thead th) {
        flex-basis: calc(50% - .35rem);
        min-width: min(9rem, 100%) !important;
    }

    .ak-grid.ak-grid-card-ready :where(table[data-aksa-card-table="body"] tbody > tr > td,
                                      table[data-aksa-card-table="combined"] tbody > tr > td) {
        grid-template-columns: minmax(5.75rem, 35%) minmax(0, 1fr);
        gap: .5rem;
        padding: .5rem .625rem;
    }
}

@media (max-width: 480px) {
    .ak-grid.ak-grid-card-ready :where(table[data-aksa-card-table="header"] thead th,
                                      table[data-aksa-card-table="combined"] thead th) {
        flex-basis: 100%;
    }

    .ak-grid.ak-grid-card-ready :where(table[data-aksa-card-table="body"] tbody > tr > td,
                                      table[data-aksa-card-table="combined"] tbody > tr > td) {
        display: flex;
        flex-direction: column;
        gap: .2rem;
    }

    .ak-grid.ak-grid-card-ready :where(tbody > tr > td[data-aksa-card-kind="selection"],
                                      tbody > tr > td[data-aksa-card-kind="actions"]) {
        flex-direction: row;
    }
}