/* Opt-in workspace primitives. Financial/report layouts are not table clients. */
:root {
    --ui-text-size: 15px;
    --ui-text-small: calc(var(--ui-text-size) * 13 / 15);
    --ui-text-label: calc(var(--ui-text-size) * 14 / 15);
    --ui-text-caption: calc(var(--ui-text-size) * 11 / 15);
    --ui-section-title-size: calc(var(--ui-text-size) * 1.2);
    --ui-heading-small-size: calc(var(--ui-text-size) * 20 / 15);
    --ui-heading-medium-size: calc(var(--ui-text-size) * 24 / 15);
    --ui-heading-large-size: calc(var(--ui-text-size) * 34 / 15);
    --ui-line-height: 1.5;
    --ui-control-height: 44px;
    --ui-control-text-size: var(--ui-text-size);
    --ui-control-padding-block: 8px;
    --ui-control-padding-inline: 12px;
    /* Include borders and native date/time metrics in the shared minimum.
       Controls can grow for larger text or wrapped action labels. */
    --ui-control-min-height: var(--ui-control-height);
    --ui-control-radius: 8px;
    --ui-section-radius: 12px;
    --ui-section-padding: 20px;
    --ui-field-gap: 16px;
}

/* Test the complete expression with literal operands: var() alone would pass a
   feature query even when its substituted calculation is unsupported. */
@supports (min-height: max(44px, calc(20px * 1.5 + 8px * 2 + 4px))) {
    :root {
        --ui-control-min-height: max(var(--ui-control-height), calc(var(--ui-control-text-size) * var(--ui-line-height) + var(--ui-control-padding-block) * 2 + 4px));
    }
}
@media (max-width: 640px) {
    :root { --ui-control-text-size: max(16px, var(--ui-text-size)); }
}
body.ui-workspace {
    --ui-surface: var(--surface);
    --ui-surface-muted: var(--surface-sunken);
    --ui-text: var(--text);
    --ui-muted: var(--text-muted);
    --ui-border: var(--border-strong);
    --ui-focus: var(--blue-dark);
    --ui-action: var(--brand-orange);
    font-family: var(--ui-font-reading);
    font-size: var(--ui-text-size);
    line-height: var(--ui-line-height);
}
:where(.ui-workspace) :where(input, select, textarea, button) { font-family: var(--ui-font-reading); }
.ui-workspace .data-mono { font-variant-numeric: tabular-nums; }
.ui-workspace :focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 3px; }
.ui-workspace .ui-button {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-height: var(--ui-control-min-height); padding: var(--ui-control-padding-block) var(--ui-control-padding-inline); border: 1px solid var(--ui-border);
    border-radius: var(--ui-control-radius); background: var(--ui-surface); color: var(--ui-text);
    font: 600 var(--ui-control-text-size)/var(--ui-line-height) var(--ui-font-reading);
    text-decoration: none; cursor: pointer;
}
.ui-workspace .ui-button:hover { background: var(--ui-surface-muted); }
.ui-workspace .ui-button:disabled { opacity: .55; cursor: default; }
.ui-workspace .ui-button--primary { background: var(--ui-action); color: #1e1a4f; }
.ui-workspace .ui-button--primary:hover { background: color-mix(in srgb, var(--ui-action) 90%, white); }
.ui-workspace .ui-button--danger { color: var(--text-error); }
/* Shared headings and quiet actions for list and review pages. */
.ui-page-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.ui-page-heading h2 { margin: 0; }
.ui-page-heading p { margin: 4px 0 0; }
.ui-page-actions, .ui-row-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ui-workspace .ui-text-action {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: var(--ui-control-min-height); padding: var(--ui-control-padding-block) 6px; border: 0; border-radius: 4px;
    background: transparent; color: var(--blue-dark);
    font: 500 var(--ui-control-text-size)/var(--ui-line-height) var(--ui-font-reading);
    text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.ui-workspace .ui-text-action:hover { background: var(--ui-surface-muted); }
.ui-workspace .ui-text-action--danger { color: var(--text-error); }
.ui-workspace .ui-text-action:disabled { opacity: .55; cursor: default; }
/* Appearance only: legacy/financial lists retain their own column behavior. */
.ui-data-scroll { max-width: 100%; overflow: auto; border: 1px solid var(--ui-border); border-radius: 12px; background: var(--ui-surface); }
.ui-data-table { width: 100%; border-collapse: collapse; font: var(--ui-text-size)/var(--ui-line-height) var(--ui-font-reading); }
.ui-data-table th { padding: 12px; color: var(--ui-muted); background: var(--ui-surface-muted); border-bottom: 1px solid var(--ui-border); font-weight: 600; vertical-align: middle; white-space: normal; }
.ui-data-table td { padding: 12px; color: var(--ui-text); border-bottom: 1px solid var(--ui-border); vertical-align: middle; white-space: normal; overflow-wrap: anywhere; }
.ui-data-table tbody tr:nth-child(even) { background: transparent; }
.ui-data-table tbody tr:hover { background: var(--ui-surface-muted); }
/* Adopted reading tables share one baseline despite legacy inline cell sizes.
   Secondary labels and specialized editor grids retain their explicit roles. */
.ui-workspace :is(.ui-table, .ui-data-table) :is(th, td) {
    font-size: var(--ui-text-size) !important;
    line-height: var(--ui-line-height);
}
.ui-data-table td.ui-data-amount { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ui-data-table .ui-status { font-size: var(--ui-text-small); white-space: nowrap; }
/* Legacy table writers retain their class hooks while sharing the quiet reading
   style. This also covers rows added by native controllers after initial load. */
.ui-workspace table .badge {
    padding: 0 !important; border: 0 !important; border-radius: 0 !important;
    background: transparent !important; color: var(--ui-text) !important;
    font: var(--ui-text-size)/var(--ui-line-height) var(--ui-font-reading) !important;
    letter-spacing: normal; text-transform: none;
}
/* Retain the meaning of legacy table status chips after removing their filled
   backgrounds. Category and inactive chips remain neutral reading labels. */
.ui-workspace table :is(.badge-active, .badge-complete, .badge-completed),
.ui-workspace table[data-ui-table="reviews.feedback"] [data-column-key="score"] .badge-green,
.ui-workspace table[data-ui-table="task-completions.list"] [data-column-key="status"] .badge-green { color: var(--text-success) !important; }
.ui-workspace table :is(.badge-processing, .badge-review, .badge-needs_review, .badge-yellow, .badge-yellow-alt) { color: var(--text-warning) !important; }
.ui-workspace table :is(.badge-error, .badge-red, .badge-gps-refused) { color: var(--text-error) !important; }
.ui-data-table .ui-row-actions { flex-wrap: wrap; gap: 6px; }
.ui-data-table .ui-row-actions .ui-text-action { flex: none; white-space: nowrap; }
.ui-empty-state { padding: 24px; color: var(--ui-muted); background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: 12px; }
.ui-workspace .ui-data-table tr.row-processed td { color: var(--ui-text); }
.ui-workspace .ui-secondary { color: var(--ui-muted); font-size: var(--ui-text-small); }
.ui-workspace .ui-status { display: inline-flex; align-items: center; gap: 7px; }
.ui-workspace .ui-status::before { content: ''; width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--ui-muted); }
.ui-workspace .ui-status--success::before { background: var(--text-success); }
.ui-workspace .ui-status--warning::before { background: var(--text-warning); }
.ui-workspace .ui-status--error::before { background: var(--text-error); }
.ui-workspace .ui-status--info::before { background: var(--text-info); }
.ui-workspace [hidden] { display: none !important; }
.ui-workspace .ui-text-wrap { overflow-wrap: anywhere; }
.ui-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }