/* Shared screen typography/spacing. Scoped away from exported documents. */
/* Values come from ui-system.css. Do not add module-specific scales here. */
body { font-size: var(--erp-text-size); line-height: var(--ui-line); letter-spacing:var(--ui-letter-body); }
body .app-container .view-section {padding:var(--ui-page-y) var(--ui-page-x)!important;}
body .page-title h1 {font-weight:var(--ui-weight-title);}
body .erp-small-text { font-size: var(--erp-text-size) !important; line-height: var(--ui-line) !important; }
body :is(.view-section, dialog, .modal-overlay) :is(p, label, small, th, td) {
    font-size: var(--erp-text-size) !important;
    line-height: var(--ui-line) !important;
}
body :is(.view-section,dialog,.modal-overlay) :is(p,td) {font-weight:var(--ui-weight-body);}
body :is(.view-section,dialog,.modal-overlay) :is(th,strong,b) {font-weight:var(--ui-weight-label);}
body :is(.view-section,dialog,.modal-overlay) .erp-large-text { font-size: var(--erp-inline-size) !important; }
body :is(.view-section, dialog, .modal-overlay) :is(h2,h3,h4,p) { overflow-wrap: anywhere; }
body :is(.view-section, dialog, .modal-overlay) :is(h1,h2) { font-size: var(--ui-title) !important; line-height: var(--ui-line-title); margin-bottom: var(--ui-title-gap) !important; letter-spacing:var(--ui-letter-title); color:var(--ui-title-color) !important; }
body :is(.view-section, dialog, .modal-overlay) h3 { font-size: var(--ui-heading) !important; line-height: var(--ui-line-heading); margin-bottom: var(--ui-title-gap) !important; letter-spacing:var(--ui-letter-title); color:var(--ui-heading-color) !important; }
body :is(.view-section, dialog, .modal-overlay) h4 { font-size: var(--ui-subheading) !important; line-height: var(--ui-line-heading); margin-bottom: var(--ui-text-gap) !important; letter-spacing:var(--ui-letter-title); color:var(--ui-subheading-color) !important; }
body :is(.view-section, dialog, .modal-overlay) p { margin-block: var(--ui-text-gap) var(--ui-space-4); }
body :is(#hrd-workspace,#attendance-a1,#payroll-workspace) > p { margin-block: 0; }
body :is(#hrd-workspace,#attendance-a1,#payroll-workspace) > header p { margin-bottom: 0; }
body :is(.view-section, dialog, .modal-overlay) label { gap: var(--ui-space-2) !important; }
body :is(.view-section, dialog, .modal-overlay) label:not(.att-check) { min-width: 0; }
body :is(.view-section, dialog, .modal-overlay) :is(input,select,textarea):not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=range]):not([type=color]) {
    font-size: var(--erp-control-size) !important;
    line-height: 1.5 !important;
    min-height: var(--ui-control-height);
    padding: var(--ui-control-y) var(--ui-control-x) !important;
    max-width: 100%;
    min-width: 0;
}
body :is(.view-section, dialog, .modal-overlay) textarea { min-height: 96px !important; resize: vertical; }
body :is(.view-section, dialog, .modal-overlay) button {
    font-size: var(--erp-text-size) !important;
    line-height: 1.4 !important;
    min-height: var(--ui-control-height);
    padding: var(--ui-control-y) var(--ui-control-x) !important;
    white-space: normal;
    overflow-wrap: anywhere;
    max-width: 100%;
}
body :is(.att-row,.hrd-row,.pay-row,.serp-head-actions,.serp-panel-head,.card-header,.work-execution-review-actions) { gap: var(--ui-control-gap) !important; flex-wrap: wrap; }
body #hrd-workspace > header > div:first-child { flex: 1 1 320px !important; min-width: 0; }
body :is(.att-grid,.hrd-grid,.responsive-grid-3,.work-execution-form-grid) { gap: var(--ui-column-gap) !important; }
body :is(.att-grid,.hrd-grid) { grid-template-columns: repeat(auto-fit,minmax(min(100%,220px),1fr)) !important; }
body :is(.att-card,.hrd-card,.pay-card,.serp-panel,.work-execution-panel) { padding: var(--ui-card-padding) !important; min-width: 0; }
body :is(.att-card,.hrd-card,.pay-card) > :is(form,.att-row,.hrd-row,.pay-row,.att-scroll,.hrd-scroll,.pay-scroll) { margin-block: 12px; }
body .view-section :is(th,td) { padding: var(--ui-cell-y) var(--ui-cell-x) !important; vertical-align: top; }
body .view-section .kpi-workbook-table :is(th,td):first-child { padding-inline: 8px !important; }
body .view-section td :is(small,span,strong) { line-height: var(--ui-line); }
body .view-section td small { display: block; margin-top: 6px; font-size: var(--ui-label) !important; }
.erp-table-scroll { max-width: 100%; min-width: 0; overflow: auto; overscroll-behavior-x: contain; }
.erp-table-scroll:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.erp-table-scroll > table { width: 100%; border-collapse: collapse; }
.erp-table-scroll > table:not(.kpi-workbook-table) { min-width: 640px; }
.erp-table-scroll > table:not(.kpi-workbook-table) :is(th,td) { min-width: 128px; overflow-wrap: anywhere; }
.erp-table-scroll > table:not(.kpi-workbook-table) :is(th,td):first-child { min-width: 180px; }
body .list-header, body .list-row { gap: var(--ui-space-4); grid-template-columns: minmax(240px,2fr) repeat(3,minmax(120px,1fr)); padding: 16px 20px; }
body .list-header > *, body .list-row > * { min-width: 0; overflow-wrap: anywhere; font-size: var(--ui-label) !important; }
body .member-kpi-list { overflow-x: auto; }
body .member-kpi-list :is(.list-header,.list-row) { min-width: 720px; }
body .nav-section { font-size: 12px; line-height: 1.5; margin-top: 24px; margin-bottom: 8px; }
body .nav-item { font-size: var(--ui-label); line-height: 1.5; gap: var(--ui-space-3); min-height: 46px; padding-block: 12px; }
body .nav-item span { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
body .top-header { gap: var(--ui-space-4); flex-wrap: wrap; align-items: center; }
body .page-title { flex: 1 1 180px; }
body .page-title h1 { font-size: var(--ui-title); color:var(--ui-title-color); letter-spacing:var(--ui-letter-title); }
body .subtitle { font-size: var(--ui-label); color:var(--ui-caption-color); }
body :is(.badge-count,.notif-count) { min-width: 22px; min-height: 22px; line-height: 22px; }
body .header-actions { flex-wrap: wrap; gap: var(--ui-space-3); }
body .top-header .ai-floating-btn { position: relative; inset: auto; width: 44px; height: 44px; flex: 0 0 44px; font-size: 22px; z-index: auto; }
body .header-clock-in { gap: var(--ui-space-3); flex-wrap: wrap; }
body .header-clock-in button { padding: 8px 12px; min-height: 36px; font-size: var(--ui-label); }
body dialog { padding: var(--ui-space-6); }
@media (min-width: 651px) {
    .erp-table-scroll > table :is(th,td):has(input[type=checkbox]) { min-width: 64px; width: 64px; }
}
@media (max-width: 1100px) {
    body .work-execution-layout { grid-template-columns: minmax(0,1fr); }
    body .work-execution-header { flex-wrap: wrap; }
    body .header-actions { width: 100%; }
}
@media (max-width: 768px) {
    body .app-container .view-section { padding: var(--ui-page-y) var(--ui-page-x) !important; }
    body :is(.att-card,.hrd-card,.pay-card,.serp-panel,.work-execution-panel) { padding: var(--ui-card-padding-mobile) !important; }
    body .top-header { position: relative; padding: var(--ui-space-3) var(--ui-space-4); }
    body .header-actions { justify-content: flex-start; }
    body .page-title { flex: none; min-width: 0; }
    body :is(.serp-page-head,.work-execution-header,.section-header) { flex-wrap: wrap; gap: var(--ui-space-4); }
    body #hrd-workspace > header > div:first-child { flex-basis: 100% !important; }
    body .view-section :is(.form-grid-2,.form-grid-3,.work-execution-form-grid,.ui-form-grid) { grid-template-columns: minmax(0,1fr) !important; }
    body :is(.att-row,.hrd-row,.pay-row) label { flex-basis: 100%; }
    body .view-section :is(input,select,textarea):not([type=checkbox]):not([type=radio]) { font-size: var(--ui-control) !important; }
    body .view-section :is(.list-header,.list-row) { grid-template-columns: minmax(0,1fr); min-width: 0; }
}
@media (max-width: 650px) {
    /* Preserve the labelled card layout already used by HRD/Payroll. */
    body :is(#hrd-workspace,#payroll-workspace,#pay-config) .erp-table-scroll > table { min-width: 0; }
    body :is(#hrd-workspace,#payroll-workspace,#pay-config) .erp-table-scroll :is(th,td) { min-width: 0; }
    body :is(#hrd-workspace,#payroll-workspace,#pay-config) td::before { font-size: var(--ui-label) !important; margin-bottom: 8px !important; }
}

/* Hierarchy overrides legacy inline sizes without recoloring status/money. */
body :is(.view-section,dialog,.modal-overlay) label { font-size:var(--ui-label) !important; letter-spacing:var(--ui-letter-label); color:var(--ui-label-color); }
body :is(.view-section,dialog,.modal-overlay) :is(small,.ui-caption) { font-size:var(--ui-caption) !important; color:var(--ui-caption-color) !important; }
body :is(.view-section,dialog,.modal-overlay) :is(.att-hint,.hrd-hint,.pay-hint) {font-size:var(--ui-caption)!important;color:var(--ui-caption-color)!important;}