/* V44 TUESDAY MORNING -- the shared design-system refinements (docs/V44 DESIGN_SYSTEM_TUESDAY_HE.md, DATA/UI_TOKENS_TUESDAY.json)
   applied to EXISTING components only: one radius (12), 48px targets, a 3px focus ring, 16px / 1.6 body text, field messages with
   a glyph beside the colour, three DISTINCT page states (loading / empty / error), inline row editing and the table-to-cards
   pattern for phones. Tokens of pb-tokens.css with literal fallbacks; Light / System / Dark follow the page tokens.
   Nothing here reaches the header bar (.pb42*, pb-v42-header.css), the sidebar (.pb-sb*) or the admin shell file
   (pb-v43-admin.css / pb-v44-admin.css). Scoped by the pb44-* classes the views opt into; no global outline is removed. */

:root {
    --pb44-radius: 12px;
    --pb44-target: 48px;
    --pb44-form-max: 640px;
    --pb44-content-max: 1280px;
    --pb44-document-max: 760px;
    --pb44-ring: 3px;
}

/* ------------------------------------------------------------------ 1. one task, one primary action: the task head */
.pb44-task { max-width: var(--pb44-form-max); }
.pb44-task-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px 16px; margin: 0 0 16px; }
.pb44-task-head h1, .pb44-task-head h2 { margin: 0; text-wrap: balance; }
.pb44-task-lead { margin: 4px 0 0; color: var(--pb-text-secondary, #667085); line-height: 1.6; max-width: 65ch; }
.pb44-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 24px; }
.pb44-actions > .pb-btn, .pb44-actions > button, .pb44-actions > a { min-height: var(--pb44-target); }
.pb44-actions .pb44-secondary { background: transparent; }

/* ------------------------------------------------------------------ 2. read-only outputs: definition lists, never disabled inputs */
.pb44-dl { display: grid; grid-template-columns: minmax(120px, max-content) 1fr; gap: 8px 16px; margin: 0; padding: 0; }
.pb44-dl dt { margin: 0; color: var(--pb-text-secondary, #667085); font-weight: 600; font-size: 14px; }
.pb44-dl dd { margin: 0; color: var(--pb-text-primary, #171A1F); overflow-wrap: anywhere; }
.pb44-dl dd.pb44-num { font-variant-numeric: tabular-nums; }
@media (max-width: 599.98px) { .pb44-dl { grid-template-columns: 1fr; gap: 2px 0; } .pb44-dl dd { margin-bottom: 10px; } }

/* ------------------------------------------------------------------ 3. field messages: text + glyph, never colour alone */
.pb44-field { display: block; margin: 0 0 16px; }
.pb44-field > label, .pb44-field .pb44-label { display: block; margin: 0 0 6px; font-weight: 600; line-height: 1.4; }
.pb44-field .pb44-hint { display: block; margin: 0 0 6px; font-size: 14px; line-height: 1.5; color: var(--pb-text-secondary, #667085); }
.pb44-field input:not([type="checkbox"]):not([type="radio"]), .pb44-field select, .pb44-field textarea {
    box-sizing: border-box; width: 100%; min-height: var(--pb44-target); border-radius: var(--pb44-radius); font-size: 16px;
}
.pb44-msg { display: flex; align-items: flex-start; gap: 6px; margin: 6px 0 0; font-size: 14px; line-height: 1.5; }
.pb44-msg::before { flex: none; font-weight: 700; }
.pb44-msg--error { color: var(--pb-danger-text, #A61B29); }
.pb44-msg--error::before { content: "\26A0"; }
.pb44-msg--ok { color: var(--pb-success-text, #067647); }
.pb44-msg--ok::before { content: "\2713"; }
.pb44-msg--info { color: var(--pb-text-secondary, #667085); }
.pb44-msg[hidden] { display: none; }
.pb44-field [aria-invalid="true"] { border-color: var(--pb-danger-text, #A61B29); box-shadow: 0 0 0 1px var(--pb-danger-text, #A61B29) inset; }

/* ------------------------------------------------------------------ 4. three distinct page states (loading / empty / error) */
.pb44-state { box-sizing: border-box; margin: 16px 0; padding: 24px 16px; border-radius: var(--pb44-radius); text-align: center; line-height: 1.6; }
.pb44-state p { margin: 0 0 8px; }
.pb44-state p:last-child { margin-bottom: 0; }
.pb44-state__title { display: block; font-weight: 700; margin-bottom: 4px; }
.pb44-state--loading { border: 1px dashed var(--pb-divider, #D9DEE7); color: var(--pb-text-secondary, #667085); }
.pb44-state--loading::before {
    content: ""; display: block; width: 28px; height: 28px; margin: 0 auto 12px; border-radius: 50%;
    border: 3px solid var(--pb-divider, #D9DEE7); border-top-color: var(--pb-action-primary, #BD006E); animation: pb44-spin 1s linear infinite;
}
.pb44-state--empty { border: 1px solid var(--pb-divider, #D9DEE7); background: var(--pb-surface-raised, #F7F7F7); color: var(--pb-text-primary, #171A1F); }
.pb44-state--error { border: 1px solid var(--pb-danger-text, #A61B29); border-inline-start-width: 4px; background: var(--pb-danger-surface, #FEF3F2); color: var(--pb-text-primary, #171A1F); text-align: start; }
.pb44-state--error .pb44-state__title::before { content: "\26A0\00A0"; color: var(--pb-danger-text, #A61B29); }
.pb44-state .pb-btn, .pb44-state a.pb44-retry { margin-top: 8px; }
@keyframes pb44-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .pb44-state--loading::before { animation: none; } }

/* ------------------------------------------------------------------ 5. inline row editing (a row keeps its place; edit / save / cancel) */
.pb44-row-edit { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px 12px; align-items: end; padding: 12px 0; border-top: 1px solid var(--pb-divider, #D9DEE7); }
.pb44-row-edit .pb44-field { margin: 0; }
.pb44-row-edit .pb44-row-actions { display: flex; gap: 8px; align-items: center; }
.pb44-row-edit .pb44-row-actions .pb-btn { min-height: var(--pb44-target); }
.pb44-row-edit[data-pb44-state="saved"] { background: var(--pb-success-surface, #ECFDF3); }
.pb44-row-edit[data-pb44-state="error"] { background: var(--pb-danger-surface, #FEF3F2); }
.pb44-row-status { font-size: 14px; }

/* ------------------------------------------------------------------ 6. tables become cards on phones (<= 900px): each cell names its column */
.pb44-table-wrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pb44-table { width: 100%; border-collapse: collapse; }
.pb44-table th, .pb44-table td { padding: 10px 8px; text-align: start; vertical-align: top; border-top: 1px solid var(--pb-divider, #D9DEE7); font-size: 14px; }
.pb44-table thead th { border-top: 0; color: var(--pb-text-secondary, #667085); font-weight: 600; font-size: 13px; }
.pb44-table .pb44-num { font-variant-numeric: tabular-nums; text-align: end; }
@media (max-width: 900px) {
    .pb44-table.pb44-cards, .pb44-table.pb44-cards tbody, .pb44-table.pb44-cards tr, .pb44-table.pb44-cards td { display: block; }
    .pb44-table.pb44-cards thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .pb44-table.pb44-cards tr { margin: 0 0 12px; padding: 12px; border: 1px solid var(--pb-divider, #D9DEE7); border-radius: var(--pb44-radius); background: var(--pb-surface, #FFFFFF); }
    .pb44-table.pb44-cards td { display: grid; grid-template-columns: minmax(96px, 40%) 1fr; gap: 8px; padding: 6px 0; border: 0; }
    .pb44-table.pb44-cards td::before { content: attr(data-label); color: var(--pb-text-secondary, #667085); font-weight: 600; font-size: 13px; }
    .pb44-table.pb44-cards td:not([data-label]) { grid-template-columns: 1fr; }
    .pb44-table.pb44-cards td.pb44-num { text-align: start; }
    .pb44-table.pb44-cards td.pb44-row-select { grid-template-columns: auto 1fr; }
}

/* ------------------------------------------------------------------ 7. targets, radius and focus on the components that opt in */
.pb44-task .pb-btn, .pb44-task button, .pb44-task a.pb-btn, .pb44-table .pb-btn, .pb44-row-edit .pb-btn { min-height: var(--pb44-target); border-radius: var(--pb44-radius); }
.pb44-task :focus-visible, .pb44-table :focus-visible, .pb44-state :focus-visible, .pb44-row-edit :focus-visible {
    outline: var(--pb44-ring) solid var(--pb-focus, #0065BD); outline-offset: 2px;
}
.pb44-task, .pb44-dl, .pb44-state, .pb44-table { font-size: 16px; line-height: 1.6; }
.pb44-table th, .pb44-table td { line-height: 1.5; }
.pb44-document { max-width: var(--pb44-document-max); line-height: 1.6; }
.pb44-document p { max-width: 65ch; }