/* ——— Button (Fluent control — 4px) ——— */
.ui-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--rgef-space-2);
    min-height: 32px;
    padding: 5px var(--rgef-space-4);
    font-family: inherit;
    font-size: var(--rgef-font-size);
    font-weight: 600;
    line-height: 1.43;
    border: var(--rgef-border);
    border-radius: var(--rgef-radius-sm);
    cursor: pointer;
    background: var(--rgef-card);
    color: var(--rgef-text);
    transition: background var(--rgef-duration) var(--rgef-ease),
        border-color var(--rgef-duration) var(--rgef-ease);
}

.ui-btn:hover:not(:disabled) {
    background: var(--rgef-card-hover);
    border-color: var(--rgef-border-strong);
}

.ui-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.ui-btn--primary {
    background: var(--rgef-accent);
    border-color: var(--rgef-accent);
    color: #fff;
}

.ui-btn--primary:hover:not(:disabled) {
    background: var(--rgef-accent-hover);
    border-color: var(--rgef-accent-hover);
}

.ui-btn--ghost {
    background: transparent;
    border-color: transparent;
}

.ui-btn--ghost:hover:not(:disabled) {
    background: var(--rgef-accent-subtle);
    border-color: transparent;
}

.ui-btn--block {
    width: 100%;
}

/* ——— Card (Fluent surface — 8px) ——— */
.ui-card {
    background: var(--rgef-card);
    border: var(--rgef-border);
    border-radius: var(--rgef-radius);
    padding: var(--rgef-space-4) var(--rgef-space-5);
    transition: background var(--rgef-duration) var(--rgef-ease);
}

.ui-card--chart:hover,
.ui-card--kpi:hover {
    background: var(--rgef-card);
}

.ui-card__title {
    margin: 0 0 var(--rgef-space-3);
    font-size: var(--rgef-font-size-caption);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--rgef-text-muted);
}

.ui-card__body {
    margin: 0;
}

.ui-card--kpi {
    min-height: 92px;
}

.ui-card--chart {
    min-height: 168px;
    display: flex;
    flex-direction: column;
}

.ui-card--chart .ui-chart {
    flex: 1;
    min-height: 0;
    margin-top: var(--rgef-space-1);
}

/* ——— KPI ——— */
.ui-kpi__value {
    margin: 0;
    font-size: 2.25rem;
    font-weight: 600;
    line-height: 1.1;
    color: var(--rgef-data);
    font-variant-numeric: tabular-nums;
}

.ui-kpi__unit {
    font-size: 1.375rem;
    font-weight: 600;
    color: var(--rgef-data-muted);
}

/* ——— Field / Input ——— */
.ui-field {
    display: flex;
    flex-direction: column;
    gap: var(--rgef-space-2);
}

.ui-field__label {
    font-size: var(--rgef-font-size-sm);
    font-weight: 600;
    color: var(--rgef-text-secondary);
}

.ui-input {
    width: 100%;
    min-height: 32px;
    padding: 5px var(--rgef-space-3);
    font-family: inherit;
    font-size: var(--rgef-font-size);
    color: var(--rgef-text);
    background: var(--rgef-card);
    border: var(--rgef-border-strong-style);
    border-radius: var(--rgef-radius-sm);
    transition: border-color var(--rgef-duration) var(--rgef-ease);
}

.ui-input::placeholder {
    color: var(--rgef-text-disabled);
}

.ui-input:focus {
    outline: none;
    border-color: var(--rgef-accent);
    box-shadow: 0 0 0 1px var(--rgef-accent);
}

.ui-form {
    display: flex;
    flex-direction: column;
    gap: var(--rgef-space-5);
}

/* ——— Message ——— */
.ui-message {
    padding: var(--rgef-space-3) var(--rgef-space-4);
    border: var(--rgef-border);
    border-radius: var(--rgef-radius-sm);
    font-size: var(--rgef-font-size-sm);
}

.ui-message--error {
    background: var(--rgef-error-bg);
    color: var(--rgef-error-text);
    border-color: var(--rgef-error-border);
}

/* ——— Table ——— */
.ui-table-wrap {
    overflow-x: auto;
    border: var(--rgef-border);
    border-radius: var(--rgef-radius-sm);
}

.ui-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--rgef-font-size-sm);
    background: var(--rgef-card);
}

.ui-table th,
.ui-table td {
    text-align: left;
    padding: var(--rgef-space-2) var(--rgef-space-4);
    border-bottom: var(--rgef-border);
    color: var(--rgef-text);
}

.ui-table th {
    background: var(--rgef-layer);
    color: var(--rgef-text-secondary);
    font-weight: 600;
    font-size: var(--rgef-font-size-caption);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.ui-table tbody tr:last-child td {
    border-bottom: none;
}

.ui-table tbody tr:hover {
    background: var(--rgef-accent-subtle);
}

.ui-table-empty {
    margin: 0;
    color: var(--rgef-text-muted);
    font-size: var(--rgef-font-size-sm);
}

/* ——— Page header ——— */
.ui-page-head {
    margin-bottom: var(--rgef-space-6);
}

.ui-page-head__title {
    margin: 0 0 var(--rgef-space-2);
    font-size: var(--rgef-font-size-subtitle);
    font-weight: 600;
    color: var(--rgef-primary-strong);
    line-height: 1.3;
}

.ui-page-head__lead {
    margin: 0;
    color: var(--rgef-text-secondary);
    font-size: var(--rgef-font-size-sm);
}

.ui-page-head--center .ui-page-head__title {
    text-align: center;
    color: var(--rgef-text-secondary);
    font-size: var(--rgef-font-size-xl);
    font-weight: 600;
}

/* ——— Meta / layout helpers ——— */
.ui-meta {
    margin: var(--rgef-space-4) 0 0;
    font-size: var(--rgef-font-size-caption);
    color: var(--rgef-text-muted);
}

.ui-hint {
    margin: var(--rgef-space-3) 0 0;
    font-size: var(--rgef-font-size-caption);
    color: var(--rgef-text-muted);
}

.ui-stack {
    display: flex;
    flex-direction: column;
    gap: var(--rgef-space-4);
}

/* ——— Chart host ——— */
.ui-chart {
    width: 100%;
}

.ui-chart .apexcharts-canvas {
    margin: 0 auto;
}

.ui-chart .apexcharts-tooltip {
    border: var(--rgef-border-strong-style) !important;
    border-radius: var(--rgef-radius-sm) !important;
    box-shadow: none !important;
}