/*
 * Argess UI contract
 * Stable calling contract for page headers, filter toolbars and shared field components.
 * This file is loaded after page-level styles so local pages cannot silently redefine
 * the public appearance or alignment of shared UI contracts.
 */

/* Page header ------------------------------------------------------------ */
.arg-module-page-header,
.arg-page-title-row,
.arg-page-header {
    min-height: 76px;
    padding: 11px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex: 0 0 auto;
    color: var(--arg-text-primary);
    background: var(--arg-bg-surface, #fff);
    border: 1px solid var(--arg-border-soft);
    border-radius: 15px;
    box-shadow: var(--arg-shadow-xs);
}

.arg-module-page-header--compact {
    min-height: 72px;
    padding-block: 10px;
}

.arg-module-page-header > div:first-child,
.arg-page-title-row > div:first-child,
.arg-page-header > div:first-child {
    min-width: 0;
    flex: 1 1 auto;
}

.arg-module-page-header h1,
.arg-page-title-row h1,
.arg-page-header h1 {
    margin: 2px 0 2px;
    color: var(--arg-text-primary);
    font-size: 1rem;
    line-height: 1.55;
    font-weight: 950;
}

.arg-module-page-header p,
.arg-page-title-row p,
.arg-page-header p {
    max-width: 820px;
    margin: 0;
    color: var(--arg-text-muted);
    font-size: .66rem;
    line-height: 1.8;
}

.arg-module-page-header__actions {
    margin-inline-start: auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex: 0 0 auto;
    gap: 8px;
}

.arg-module-page-header__actions > .arg-button,
.arg-module-page-header__actions > .arg-page-help,
.arg-module-page-header__actions > a {
    flex: 0 0 auto;
}

/* Filter toolbar --------------------------------------------------------- */
.arg-filter-toolbar {
    min-height: 58px;
    padding: 10px 12px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: end;
    gap: 10px 12px;
    flex: 0 0 auto;
    background: var(--arg-bg-surface, #fff);
    border: 1px solid var(--arg-border-soft);
    border-radius: 14px;
    box-shadow: var(--arg-shadow-xs);
}

.arg-filter-toolbar__primary,
.arg-filter-toolbar__filters,
.arg-filter-toolbar__actions {
    min-width: 0;
    display: flex;
    align-items: end;
    gap: 8px;
}

.arg-filter-toolbar__primary {
    flex-wrap: nowrap;
}

.arg-filter-toolbar__filters {
    flex-wrap: nowrap;
}

.arg-filter-toolbar__actions {
    margin-inline-start: auto;
    justify-content: flex-start;
    flex-wrap: nowrap;
}

.arg-filter-toolbar--simple,
.arg-data-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Labeled toolbar row ----------------------------------------------------
 * Add arg-control-row when a toolbar contains labeled filters. Labels stay
 * visible; unlabeled actions align with the control boxes, not with labels.
 */
.arg-control-row {
    --arg-toolbar-label-height: 19px;
    --arg-toolbar-label-gap: 4px;
    align-items: end;
}

.arg-filter-toolbar.arg-control-row,
.arg-data-toolbar.arg-control-row {
    height: auto;
    padding-block: 8px;
    min-height: calc(
        var(--arg-control-height)
        + var(--arg-toolbar-label-height)
        + var(--arg-toolbar-label-gap)
        + 18px
    );
    align-items: end;
}

.arg-filter-toolbar--simple.arg-control-row {
    align-items: end;
}

.arg-control-row .arg-field,
.arg-control-row .arg-filter-field,
.arg-control-row .arg-date-range,
.arg-control-row .arg-filter-toolbar__primary,
.arg-control-row .arg-filter-toolbar__filters,
.arg-control-row .arg-filter-toolbar__actions,
.arg-control-row > .arg-toolbar-group {
    min-width: 0;
    align-self: end;
}

.arg-control-row .arg-field,
.arg-control-row .arg-filter-field {
    margin: 0;
    row-gap: var(--arg-toolbar-label-gap);
    align-content: end;
}

.arg-control-row .arg-field__label,
.arg-control-row .arg-field > label:first-child,
.arg-control-row .arg-filter-field > span:first-child {
    height: var(--arg-toolbar-label-height);
    min-height: var(--arg-toolbar-label-height);
    margin: 0;
    display: flex;
    align-items: center;
    overflow: hidden;
    color: var(--arg-text-muted);
    font-size: .68rem;
    font-weight: 850;
    line-height: var(--arg-toolbar-label-height);
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Validation belongs to forms and must not create a hidden third row here. */
.arg-control-row .arg-field__hint,
.arg-control-row .arg-field__error,
.arg-control-row [data-validation-for],
.arg-control-row [data-valmsg-for] {
    display: none !important;
}

.arg-control-row .arg-input-wrap,
.arg-control-row .arg-search-box,
.arg-control-row .arg-select-wrap,
.arg-control-row .arg-jalali-date,
.arg-control-row .arg-button,
.arg-control-row .arg-icon-button {
    box-sizing: border-box;
    height: var(--arg-control-height);
    min-height: var(--arg-control-height);
    max-height: var(--arg-control-height);
}

.arg-control-row .arg-button {
    padding-block: 0;
    white-space: nowrap;
}

.arg-control-row .arg-icon-button {
    width: var(--arg-control-height);
    min-width: var(--arg-control-height);
}

.arg-control-row > .arg-button,
.arg-control-row > .arg-icon-button,
.arg-control-row .arg-filter-toolbar__primary > .arg-button,
.arg-control-row .arg-filter-toolbar__primary > .arg-icon-button,
.arg-control-row .arg-filter-toolbar__filters > .arg-button,
.arg-control-row .arg-filter-toolbar__filters > .arg-icon-button {
    align-self: end;
}

.arg-control-row .arg-filter-toolbar__actions,
.arg-control-row > .arg-toolbar-group {
    height: var(--arg-control-height);
    min-height: var(--arg-control-height);
    padding-block: 0;
    display: flex;
    align-items: stretch;
    gap: 8px;
}

.arg-control-row .arg-date-range {
    align-items: end;
}

.arg-control-row .arg-date-range__separator {
    height: var(--arg-control-height);
    align-self: end;
}

.arg-filter-toolbar--simple .arg-inline-note,
.arg-data-toolbar .arg-inline-note {
    flex: 1 1 auto;
    min-width: 0;
}

.arg-filter-toolbar .arg-search-box,
.arg-filter-toolbar .arg-input-wrap,
.arg-filter-toolbar .arg-select-wrap,
.arg-filter-toolbar .arg-jalali-date,
.arg-filter-toolbar .arg-button,
.arg-filter-toolbar .arg-icon-button {
    box-sizing: border-box;
}

.arg-filter-toolbar .arg-search-box {
    min-width: 240px;
}

.arg-filter-toolbar .arg-filter-field,
.arg-filter-toolbar .arg-select-field--toolbar {
    min-width: 150px;
}

.arg-filter-toolbar .arg-select-field--toolbar .arg-select-wrap {
    min-width: 150px;
}

/* Shared select partial -------------------------------------------------- */
.arg-filter-toolbar .arg-field__error,
.arg-filter-toolbar .arg-field__hint {
    display: none;
}

.arg-context-switcher__select {
    min-width: 160px;
}

.arg-context-switcher__select .arg-field__error,
.arg-context-switcher__select .arg-field__hint {
    display: none;
}

@media (max-width: 1100px) {
    .arg-filter-toolbar:not(.arg-filter-toolbar--simple) {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .arg-filter-toolbar__filters {
        grid-column: 1 / -1;
        order: 3;
    }
}

@media (max-width: 760px) {
    .arg-module-page-header,
    .arg-page-title-row,
    .arg-page-header {
        min-height: auto;
        align-items: flex-start;
        flex-direction: column;
    }

    .arg-module-page-header__actions {
        width: 100%;
        margin-inline-start: 0;
        flex-wrap: wrap;
    }

    .arg-filter-toolbar,
    .arg-filter-toolbar--simple,
    .arg-data-toolbar {
        display: grid;
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .arg-filter-toolbar__primary,
    .arg-filter-toolbar__filters,
    .arg-filter-toolbar__actions {
        width: 100%;
        grid-column: 1;
        flex-wrap: wrap;
    }

    .arg-filter-toolbar__actions {
        margin-inline-start: 0;
    }

    .arg-filter-toolbar .arg-search-box,
    .arg-filter-toolbar .arg-field,
    .arg-filter-toolbar .arg-filter-field,
    .arg-filter-toolbar .arg-select-field--toolbar {
        min-width: 0;
        flex: 1 1 100%;
    }

    .arg-filter-toolbar.arg-control-row,
    .arg-data-toolbar.arg-control-row {
        align-items: stretch;
    }

    .arg-filter-toolbar.arg-control-row > .arg-field,
    .arg-filter-toolbar.arg-control-row > .arg-filter-field,
    .arg-filter-toolbar.arg-control-row > .arg-date-range,
    .arg-data-toolbar.arg-control-row > .arg-field,
    .arg-data-toolbar.arg-control-row > .arg-filter-field,
    .arg-data-toolbar.arg-control-row > .arg-date-range {
        width: 100%;
        align-self: stretch;
    }
}

/* Typed component markers ------------------------------------------------
 * These selectors are emitted by Argess.Core Tag Helpers. Existing public
 * classes are preserved for backward compatibility; data markers provide a
 * stable hook for tests, diagnostics and future progressive enhancement.
 */
[data-arg-page-header] .arg-module-page-header__content {
    min-width: 0;
    flex: 1 1 auto;
}

[data-arg-toolbar] {
    position: relative;
}

[data-arg-toolbar-section="primary"],
[data-arg-toolbar-section="filters"],
[data-arg-toolbar-section="actions"] {
    min-width: 0;
}

[data-arg-grid-host] {
    min-width: 0;
}

.is-permission-disabled {
    pointer-events: none;
    opacity: .62;
}

/* Empty, loading, error and information states -------------------------- */
.arg-state {
    min-height: 128px;
    padding: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    color: var(--arg-text-secondary);
    background: var(--arg-bg-subtle, #f8fafc);
    border: 1px dashed var(--arg-border);
    border-radius: 14px;
    text-align: center;
}

.arg-state > i {
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    color: var(--arg-color-primary);
    background: var(--arg-color-primary-faint);
    border-radius: 12px;
    font-size: 1.05rem;
}

.arg-state__content {
    min-width: 0;
    display: grid;
    gap: 4px;
    text-align: start;
}

.arg-state__content strong {
    color: var(--arg-text-primary);
    font-size: .8rem;
    font-weight: 950;
}

.arg-state__content span,
.arg-state__details {
    color: var(--arg-text-muted);
    font-size: .7rem;
    line-height: 1.8;
}

.arg-state--compact {
    min-height: 72px;
    padding: 12px 14px;
    justify-content: flex-start;
}

.arg-state--compact > i {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    font-size: .85rem;
}

.arg-state--error > i {
    color: var(--arg-color-danger);
    background: rgba(166, 55, 70, .1);
}

.arg-state--success > i {
    color: var(--arg-color-success);
    background: rgba(37, 126, 91, .1);
}

.arg-state--info > i,
.arg-state--loading > i {
    color: var(--arg-color-info, var(--arg-color-primary));
}

@media (max-width: 720px) {
    .arg-module-page-header,
    [data-arg-page-header] {
        align-items: stretch;
        flex-direction: column;
    }

    .arg-module-page-header__actions {
        width: 100%;
        margin-inline-start: 0;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .arg-state {
        align-items: flex-start;
        justify-content: flex-start;
        text-align: start;
    }
}

/* Numeric and amount input ---------------------------------------------- */
.arg-number-wrap {
    direction: ltr;
    display: flex;
    align-items: center;
}

.arg-number-wrap [data-arg-number-display] {
    direction: ltr;
    text-align: end;
    font-variant-numeric: tabular-nums;
}

.arg-number-wrap__suffix {
    min-width: max-content;
    padding-inline: 8px 10px;
    color: var(--arg-text-muted);
    border-inline-start: 1px solid var(--arg-border-soft);
    font-size: .68rem;
    font-weight: 850;
}

/* central responsive grid contract ------------------------ */
.arg-grid {
    min-width: 0;
    container-type: inline-size;
}

.arg-grid .ag-root-wrapper,
.arg-grid .ag-root,
.arg-grid .ag-body,
.arg-grid .ag-body-viewport,
.arg-grid .ag-center-cols-viewport,
.arg-grid .ag-center-cols-container {
    min-width: 0;
}

.arg-grid .ag-cell {
    min-width: 0;
    overflow: hidden;
}

.arg-grid .ag-cell-wrapper {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}

.arg-grid .ag-cell-value {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.arg-grid .ag-cell-value > * {
    min-width: 0;
    max-width: 100%;
}

.arg-grid .ag-body-horizontal-scroll {
    min-height: 12px !important;
    height: 12px !important;
    display: flex !important;
    background: #f6f9fc;
    border-top: 1px solid var(--arg-grid-border);
}

.arg-grid .ag-body-horizontal-scroll-viewport {
    min-height: 11px !important;
    height: 11px !important;
    overflow-x: auto !important;
}

.arg-grid .ag-horizontal-left-spacer,
.arg-grid .ag-horizontal-right-spacer {
    min-height: 11px !important;
    height: 11px !important;
    display: block !important;
}

.arg-grid .ag-pinned-left-header,
.arg-grid .ag-pinned-left-cols-container {
    box-shadow: 4px 0 12px rgba(20, 48, 82, .08);
}

.arg-grid .arg-grid-header--actions .ag-header-cell-label {
    justify-content: center;
}

.arg-grid .arg-grid-cell--actions {
    padding-inline: 6px !important;
}

.arg-grid .arg-grid-cell--actions .ag-cell-wrapper,
.arg-grid .arg-grid-cell--actions .ag-cell-value {
    width: 100%;
}

.arg-grid-actions {
    width: 100%;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    overflow: hidden;
    white-space: nowrap;
}

.arg-grid-action-button,
.arg-grid-actions button {
    min-width: 31px;
    max-width: 100%;
    flex: 0 1 auto;
    justify-content: center;
    white-space: nowrap;
}

@container (max-width: 780px) {
    .arg-grid-action-button,
    .arg-grid-actions button {
        width: 32px;
        min-width: 32px;
        max-width: 32px;
        padding-inline: 0;
        font-size: 0;
    }

    .arg-grid-action-button > i,
    .arg-grid-actions button > i {
        font-size: .7rem;
    }

    .arg-grid-action-button > span,
    .arg-grid-actions button > span {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
}

/* toolbars must remain usable with the sidebar open. */
.arg-filter-toolbar--simple,
.arg-data-toolbar,
.arg-filter-toolbar__primary,
.arg-filter-toolbar__filters,
.arg-filter-toolbar__actions {
    flex-wrap: wrap;
}

.arg-filter-toolbar__actions {
    max-width: 100%;
}

.arg-filter-toolbar--simple > .arg-inline-note,
.arg-data-toolbar > .arg-inline-note {
    flex: 1 1 320px;
}

@media (max-width: 1180px) {
    .arg-filter-toolbar:not(.arg-filter-toolbar--simple) {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .arg-filter-toolbar:not(.arg-filter-toolbar--simple) .arg-filter-toolbar__primary {
        grid-column: 1 / -1;
    }
}

@media (max-width: 820px) {
    .arg-module-page-header,
    .arg-page-title-row,
    .arg-page-header {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .arg-module-page-header__actions {
        width: 100%;
        margin-inline-start: 0;
        flex-wrap: wrap;
    }

    .arg-filter-toolbar:not(.arg-filter-toolbar--simple) {
        grid-template-columns: minmax(0, 1fr);
        align-items: stretch;
    }

    .arg-filter-toolbar__primary,
    .arg-filter-toolbar__filters,
    .arg-filter-toolbar__actions {
        width: 100%;
        margin-inline-start: 0;
    }

    .arg-filter-toolbar__primary > *,
    .arg-filter-toolbar__filters > * {
        flex: 1 1 170px;
    }

    .arg-filter-toolbar__actions > * {
        flex: 0 1 auto;
    }
}

@media (max-width: 1180px) {
    .arg-control-row .arg-filter-toolbar__primary,
    .arg-control-row .arg-filter-toolbar__filters,
    .arg-control-row .arg-filter-toolbar__actions,
    .arg-control-row > .arg-toolbar-group {
        height: auto;
        min-height: var(--arg-control-height);
    }
}

/* shared composition contract for operational pages --------
 * These primitives are intentionally platform-level. Modules may arrange
 * them, but must not redefine cards, KPI surfaces, section shells or grid
 * panels with page-specific colors/borders/shadows.
 */
.arg-page-stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.arg-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.arg-kpi-card {
    min-width: 0;
    min-height: 88px;
    padding: 13px 14px;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 11px;
    color: var(--arg-text-primary);
    background: var(--arg-bg-surface, #fff);
    border: 1px solid var(--arg-border-soft);
    border-radius: 14px;
    box-shadow: var(--arg-shadow-xs);
}

.arg-kpi-card__icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    color: var(--arg-color-primary);
    background: var(--arg-color-primary-faint);
    border: 1px solid var(--arg-border-soft);
    border-radius: 12px;
    font-size: 1.05rem;
}

.arg-kpi-card__content,
.arg-kpi-card__content > span,
.arg-kpi-card__content > strong,
.arg-kpi-card__content > small,
.arg-kpi-card__content > em {
    min-width: 0;
}

.arg-kpi-card__content > span,
.arg-kpi-card__content > strong,
.arg-kpi-card__content > small,
.arg-kpi-card__content > em {
    display: block;
}

.arg-kpi-card__content > span,
.arg-kpi-card__content > small,
.arg-kpi-card__content > em {
    color: var(--arg-text-muted);
    font-size: .63rem;
    font-style: normal;
    line-height: 1.75;
}

.arg-kpi-card__content > strong {
    margin: 2px 0;
    overflow: hidden;
    color: var(--arg-text-primary);
    font-size: 1.05rem;
    line-height: 1.5;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.arg-kpi-card--success .arg-kpi-card__icon { color: var(--arg-color-success); background: var(--arg-color-success-soft); }
.arg-kpi-card--warning .arg-kpi-card__icon { color: var(--arg-color-warning); background: var(--arg-color-warning-soft); }
.arg-kpi-card--danger .arg-kpi-card__icon { color: var(--arg-color-danger); background: var(--arg-color-danger-soft); }
.arg-kpi-card--accent .arg-kpi-card__icon { color: var(--arg-color-accent); background: var(--arg-color-accent-soft); }

.arg-section-card,
.arg-form-card,
.arg-grid-panel {
    min-width: 0;
    background: var(--arg-bg-surface, #fff);
    border: 1px solid var(--arg-border-soft);
    border-radius: 15px;
    box-shadow: var(--arg-shadow-xs);
}

.arg-section-card,
.arg-form-card {
    overflow: hidden;
}

.arg-section-card__header,
.arg-form-card__header,
.arg-page-section-heading {
    min-height: 58px;
    padding: 12px 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: linear-gradient(180deg, #fff, var(--arg-bg-surface-soft));
    border-bottom: 1px solid var(--arg-border-soft);
}

.arg-section-card__header > div,
.arg-form-card__header > div,
.arg-page-section-heading > div {
    min-width: 0;
}

.arg-section-card__header h2,
.arg-form-card__header h2,
.arg-page-section-heading h2 {
    margin: 0;
    color: var(--arg-text-primary);
    font-size: .86rem;
    line-height: 1.6;
}

.arg-section-card__header p,
.arg-form-card__header p,
.arg-page-section-heading p {
    margin: 2px 0 0;
    color: var(--arg-text-muted);
    font-size: .63rem;
    line-height: 1.75;
}

.arg-section-card__header-actions,
.arg-form-card__header-actions,
.arg-page-section-heading__actions {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 8px;
}

.arg-section-card__body,
.arg-form-card__body {
    padding: 15px;
}

.arg-section-card__actions,
.arg-form-card__actions {
    min-height: 56px;
    padding: 10px 15px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
    background: var(--arg-bg-surface-soft);
    border-top: 1px solid var(--arg-border-soft);
}

.arg-grid-panel {
    min-height: 0;
    padding: 10px;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 10px;
}

.arg-grid-panel[hidden] { display: none !important; }
.arg-grid-panel > [data-arg-grid-host],
.arg-grid-panel > .arg-grid { min-height: 340px; flex: 1 1 auto; }
.arg-grid-panel > .arg-filter-toolbar,
.arg-grid-panel > .arg-grid-footer,
.arg-grid-panel > .arg-pager { flex: 0 0 auto; }

.arg-color-field {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px;
    align-items: center;
    gap: 8px;
}

.arg-color-field input[type="color"] {
    width: 44px;
    height: var(--arg-control-height, 38px);
    padding: 3px;
    border: 1px solid var(--arg-border);
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
}

@media (max-width: 1040px) {
    .arg-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
    .arg-kpi-grid { grid-template-columns: 1fr; }
    .arg-section-card__header,
    .arg-form-card__header,
    .arg-page-section-heading { align-items: flex-start; flex-direction: column; }
    .arg-section-card__header-actions,
    .arg-form-card__header-actions,
    .arg-page-section-heading__actions { width: 100%; }
    .arg-section-card__header-actions > *,
    .arg-form-card__header-actions > *,
    .arg-page-section-heading__actions > * { flex: 1 1 auto; }
}

.arg-filter-field--grow {
    min-width: 220px;
    flex: 1 1 280px;
}

.arg-tab-panel.arg-grid-panel { display: none; }
.arg-tab-panel.arg-grid-panel.is-active { display: flex; }

/* Data workspace and responsive hardening --------------------------------
 * High-volume pages may collapse descriptive/KPI surfaces without hiding
 * filters, tabs or data operations. The state is controlled centrally by
 * argess.app.js and persisted per page for each browser.
 */
[data-arg-workspace],
[data-arg-workspace] > *,
.arg-data-page,
.arg-page-stack,
.arg-grid-panel,
.arg-section-card,
.arg-form-card {
    min-width: 0;
    max-width: 100%;
}

.arg-workspace-toggle {
    position: relative;
    flex: 0 0 auto;
    color: var(--arg-text-muted);
    background: var(--arg-bg-surface-soft);
    border-color: var(--arg-border-soft);
}

.arg-workspace-toggle:hover,
.arg-workspace-toggle:focus-visible,
.arg-workspace-toggle.is-active {
    color: var(--arg-color-primary);
    background: var(--arg-color-primary-faint);
    border-color: var(--arg-color-primary);
}

.arg-workspace-toggle.is-active i {
    transform: rotate(-28deg);
}

[data-arg-workspace].is-workspace-focused {
    gap: 8px;
}

[data-arg-workspace].is-workspace-focused [data-arg-workspace-secondary] {
    display: none !important;
}

[data-arg-workspace].is-workspace-focused > [data-arg-page-header] {
    min-height: 52px;
    padding: 7px 10px;
    border-radius: 12px;
}

[data-arg-workspace].is-workspace-focused > [data-arg-page-header] .arg-eyebrow,
[data-arg-workspace].is-workspace-focused > [data-arg-page-header] .arg-module-page-header__content > p {
    display: none;
}

[data-arg-workspace].is-workspace-focused > [data-arg-page-header] h1 {
    margin: 0;
    font-size: .9rem;
}

[data-arg-workspace].is-workspace-focused > [data-arg-page-header] .arg-module-page-header__actions {
    gap: 6px;
}

.arg-tabs,
[role="tablist"].arg-tabs {
    min-block-size: 50px;
    flex: 0 0 auto;
    align-self: stretch;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
}


[data-arg-workspace] > [data-arg-page-header],
[data-arg-workspace] > .arg-kpi-grid,
[data-arg-workspace] > .arg-tabs,
[data-arg-workspace] > [role="tablist"].arg-tabs,
[data-arg-workspace] > .arg-context-hint,
[data-arg-workspace] > .arg-filter-toolbar {
    flex-shrink: 0;
}

[data-arg-workspace] > .arg-tabs > *,
[data-arg-workspace] > [role="tablist"].arg-tabs > * {
    min-block-size: 42px;
}

.arg-tabs > [role="tab"],
.arg-tabs > button,
.arg-tabs > a {
    min-width: max-content;
    flex: 0 0 auto;
    white-space: nowrap;
}

.arg-filter-toolbar input,
.arg-filter-toolbar select,
.arg-filter-toolbar textarea,
.arg-filter-toolbar .arg-input-wrap,
.arg-filter-toolbar .arg-select-wrap,
.arg-filter-toolbar .arg-search-box,
.arg-form-grid > *,
.arg-module-page-header__content,
.arg-module-page-header__actions {
    max-width: 100%;
}

@media (max-width: 1366px) {
    .arg-module-page-header__actions,
    .arg-filter-toolbar__primary,
    .arg-filter-toolbar__filters,
    .arg-filter-toolbar__actions {
        flex-wrap: wrap;
    }

    .arg-filter-toolbar .arg-search-box,
    .arg-filter-toolbar .arg-field,
    .arg-filter-toolbar .arg-filter-field,
    .arg-filter-toolbar .arg-select-field--toolbar {
        min-width: 0;
        flex: 1 1 165px;
    }

    .arg-filter-toolbar .arg-select-field--toolbar .arg-select-wrap {
        min-width: 0;
    }
}

@media (max-width: 1180px) {
    .arg-filter-toolbar:not(.arg-filter-toolbar--simple) {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: end;
    }

    .arg-filter-toolbar:not(.arg-filter-toolbar--simple) .arg-filter-toolbar__primary {
        grid-column: 1 / -1;
    }

    .arg-filter-toolbar:not(.arg-filter-toolbar--simple) .arg-filter-toolbar__filters {
        grid-column: 1;
    }

    .arg-filter-toolbar:not(.arg-filter-toolbar--simple) .arg-filter-toolbar__actions {
        grid-column: 2;
    }
}

@media (max-width: 980px) {
    .arg-filter-toolbar:not(.arg-filter-toolbar--simple),
    .arg-filter-toolbar--simple,
    .arg-data-toolbar {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        align-items: stretch;
    }

    .arg-filter-toolbar__primary,
    .arg-filter-toolbar__filters,
    .arg-filter-toolbar__actions {
        width: 100%;
        grid-column: 1 !important;
        margin-inline-start: 0;
        flex-wrap: wrap;
    }

    .arg-filter-toolbar__actions {
        justify-content: flex-end;
    }

    .arg-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    .arg-module-page-header,
    .arg-page-title-row,
    .arg-page-header {
        padding: 10px;
        gap: 10px;
    }

    .arg-module-page-header__actions > *,
    .arg-filter-toolbar__primary > *,
    .arg-filter-toolbar__filters > * {
        min-width: 0;
        max-width: 100%;
    }

    .arg-filter-toolbar__actions > .arg-button {
        flex: 1 1 auto;
    }

    .arg-kpi-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .arg-grid-panel {
        padding: 8px;
    }
}