/* Global semantic visibility owner: the native hidden attribute must win over component display declarations. */
[hidden] {
    display: none !important;
}

.ui-card {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    box-shadow: var(--ui-shadow-card);
}

.ui-eyebrow {
    color: var(--ui-text-muted);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.ui-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--ui-space-6);
    padding: var(--ui-space-5) var(--ui-space-6);
    margin-bottom: var(--ui-space-4);
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    box-shadow: var(--ui-shadow-card);
}

.ui-page-header__identity {
    display: flex;
    align-items: flex-start;
    gap: var(--ui-space-4);
    min-width: 0;
}

.ui-page-header__identity-marker {
    display: grid;
    grid-template-rows: auto auto;
    justify-items: start;
    align-content: start;
    gap: 10px;
    flex: 0 0 auto;
}

.ui-page-header__icon {
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    color: #fff;
    background: linear-gradient(135deg, var(--ui-primary), #1184f4);
    box-shadow: 0 10px 22px rgba(37, 99, 235, .22);
    font-size: 22px;
    font-weight: 900;
}

.ui-page-header__icon svg {
    width: 28px;
    height: 28px;
    fill: currentColor;
}

.ui-page-header__copy { min-width: 0; }
.ui-page-header__copy h1 {
    margin: 3px 0 6px;
    color: var(--ui-text-strong);
    font-size: clamp(25px, 2vw, 34px);
    line-height: 1.08;
    letter-spacing: -.35px;
    font-weight: 920;
}

.ui-page-header__copy p {
    margin: 0;
    color: var(--ui-text-muted);
    font-size: 15px;
    line-height: 1.5;
}

.ui-page-header__marker-status {
    min-height: 40px;
    padding: 8px 12px;
    border-radius: 14px;
    justify-content: flex-start;
    text-align: left;
    white-space: nowrap;
}

.ui-page-header__identity-marker .ui-header-action-card__icon {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
}

.ui-page-header__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--ui-space-3);
    flex-wrap: wrap;
}

.ui-page-header__actions .button {
    min-height: var(--ui-control-height);
    white-space: nowrap;
}

.ui-workflow {
    position: relative;
    margin: 0 0 var(--ui-space-4);
    padding: var(--ui-space-4) var(--ui-space-5);
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    box-shadow: var(--ui-shadow-card);
    overflow: hidden;
}

.ui-workflow__list {
    display: grid;
    grid-template-columns: repeat(var(--ui-workflow-count), minmax(0, 1fr));
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ui-workflow__item {
    position: relative;
    min-width: 0;
}

.ui-workflow__item:not(:last-child)::after {
    content: "";
    position: absolute;
    z-index: 0;
    top: 21px;
    left: calc(50% + 24px);
    right: calc(-50% + 24px);
    height: 3px;
    border-radius: 999px;
    background: #dbe4ef;
}

.ui-workflow__item.is-complete:not(:last-child)::after {
    background: linear-gradient(90deg, var(--ui-success), #77d69c);
}

.ui-workflow__item.is-active:not(:last-child)::after {
    background: linear-gradient(90deg, var(--ui-primary), #bcd2fb 46%, #dbe4ef 46%);
}

.ui-workflow__link {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 0 12px 4px;
    color: var(--ui-text-muted);
    text-decoration: none;
    text-align: center;
}

button.ui-workflow__link {
    width: 100%;
    border: 0;
    background: transparent;
    font: inherit;
    cursor: pointer;
}
button.ui-workflow__link:disabled { cursor: default; }

.ui-workflow__marker {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 3px solid #dbe4ef;
    background: var(--ui-surface);
    color: #8290a3;
    font-size: 16px;
    font-weight: 900;
    transition: transform var(--ui-transition-fast), box-shadow var(--ui-transition-fast), border-color var(--ui-transition-fast), background-color var(--ui-transition-fast);
}

.ui-workflow__copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.ui-workflow__copy strong {
    color: inherit;
    font-size: 14px;
    line-height: 1.2;
    font-weight: 900;
}

.ui-workflow__copy small {
    color: var(--ui-text-muted);
    font-size: 11px;
    line-height: 1.25;
}

.ui-workflow__item.is-complete .ui-workflow__marker {
    color: #fff;
    border-color: var(--ui-success);
    background: var(--ui-success);
}

.ui-workflow__item.is-complete .ui-workflow__copy strong { color: var(--ui-success); }

.ui-workflow__item.is-active .ui-workflow__marker {
    color: #fff;
    border-color: var(--ui-primary);
    background: var(--ui-primary);
    box-shadow: var(--ui-focus-ring);
    transform: scale(1.05);
}

.ui-workflow__item.is-active .ui-workflow__copy strong { color: var(--ui-primary-strong); }
.ui-workflow__item.is-warning .ui-workflow__marker { color: #fff; border-color: var(--ui-warning); background: var(--ui-warning); }
.ui-workflow__item.is-blocked .ui-workflow__marker { color: #fff; border-color: var(--ui-danger); background: var(--ui-danger); }
.ui-workflow__item.is-ready .ui-workflow__marker { color: var(--ui-success); border-color: var(--ui-success); background: #f0fdf4; }
.ui-workflow__item.is-ready .ui-workflow__copy strong { color: var(--ui-success); }
.ui-workflow__item.is-readonly .ui-workflow__marker { color: #64748b; border-color: #cbd5e1; background: #f8fafc; }
.ui-workflow__item.is-unavailable .ui-workflow__marker { color: #94a3b8; border-color: #e2e8f0; background: #f8fafc; }
.ui-workflow__item.is-unavailable .ui-workflow__copy { opacity: .72; }
.ui-workflow__item.is-current .ui-workflow__marker { box-shadow: var(--ui-focus-ring); transform: scale(1.05); }
.ui-workflow__item.is-recommended:not(.is-current) .ui-workflow__copy strong::after { content: " · nên làm tiếp"; color: var(--ui-primary); font-size: 10px; font-weight: 800; }

.ui-workflow__link:hover .ui-workflow__marker { transform: translateY(-1px); }
.ui-workflow__link:focus-visible { outline: none; }
.ui-workflow__link:focus-visible .ui-workflow__marker { box-shadow: var(--ui-focus-ring); }

.ui-kpi-grid {
    display: grid;
    grid-template-columns: repeat(var(--ui-kpi-columns, 3), minmax(0, 1fr));
    gap: var(--ui-space-4);
    margin-bottom: var(--ui-space-4);
}

.ui-kpi-grid--2 { --ui-kpi-columns: 2; }
.ui-kpi-grid--4 { --ui-kpi-columns: 4; }
.ui-kpi-grid--5 { --ui-kpi-columns: 5; }

/* Global compact summary strip — dữ liệu đọc nhanh phải đủ lớn và có tương phản để không bị chìm giữa các card/table. */
.ui-summary-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    min-width: 0;
    padding: 11px 14px;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-md);
    background: #f8fbff;
}
.ui-summary-strip__item {
    --ui-summary-accent: #64748b;
    --ui-summary-text: color-mix(in srgb, var(--ui-summary-accent) 78%, #111827);
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    min-height: 34px;
    padding: 6px 12px;
    border: 1px solid color-mix(in srgb, var(--ui-summary-accent) 22%, #dbe5f0);
    border-radius: 999px;
    background: color-mix(in srgb, var(--ui-summary-accent) 10%, #fff);
    color: var(--ui-text);
    white-space: nowrap;
}
.ui-summary-strip__item small {
    color: var(--ui-summary-text);
    font-size: 12px;
    line-height: 1.2;
    font-weight: 850;
    letter-spacing: .015em;
}
.ui-summary-strip__item strong {
    color: var(--ui-summary-text);
    font-size: 15px;
    line-height: 1.15;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}
a.ui-summary-strip__item:hover,
button.ui-summary-strip__item:hover {
    background: color-mix(in srgb, var(--ui-summary-accent) 14%, #fff);
    border-color: color-mix(in srgb, var(--ui-summary-accent) 34%, #dbe5f0);
}
a.ui-summary-strip__item:focus-visible,
button.ui-summary-strip__item:focus-visible {
    outline: none;
    box-shadow: var(--ui-focus-ring);
}
.ui-summary-strip__item--neutral { --ui-summary-accent: #64748b; }
.ui-summary-strip__item--info { --ui-summary-accent: var(--ui-info); }
.ui-summary-strip__item--success { --ui-summary-accent: var(--ui-success); }
.ui-summary-strip__item--warning { --ui-summary-accent: var(--ui-warning); }
.ui-summary-strip__item--danger { --ui-summary-accent: var(--ui-danger); }
.ui-summary-strip__item--wrap { white-space: normal; }

.ui-compact-disclosure {
    border: 0;
    background: transparent;
}
.ui-compact-disclosure > summary {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 30px;
    padding: 2px 4px;
    color: var(--ui-text-muted);
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    list-style: none;
}
.ui-compact-disclosure > summary::-webkit-details-marker { display: none; }
.ui-compact-disclosure > summary .ui-chevron-icon {
    width: 9px;
    height: 9px;
}
.ui-compact-disclosure[open] > summary .ui-chevron-icon { transform: rotate(180deg); }

@media (max-width: 720px) {
    .ui-summary-strip { align-items: stretch; }
    .ui-summary-strip__item { white-space: normal; }
}

/* Global soft card/action helpers — dùng khi các ô/nút đứng liền nhau và cần tách thị giác nhẹ. */
.ui-soft-card,
.ui-soft-action-card {
    --ui-soft-accent: var(--ui-primary);
    --ui-soft-bg: var(--ui-primary-soft);
    --ui-soft-border: #b9cdf6;
    position: relative;
    min-width: 0;
    border: 1px solid var(--ui-soft-border);
    background: linear-gradient(135deg, var(--ui-soft-bg) 0%, #fff 78%);
    overflow: hidden;
}
.ui-soft-card::after,
.ui-soft-action-card::after {
    content: "";
    position: absolute;
    inset: auto -36px -48px auto;
    width: 120px;
    height: 120px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--ui-soft-accent) 9%, transparent);
    pointer-events: none;
}
.ui-soft-card--success, .ui-soft-action-card--success { --ui-soft-accent: var(--ui-success); --ui-soft-bg: var(--ui-success-soft); --ui-soft-border: #ade6c4; }
.ui-soft-card--warning, .ui-soft-action-card--warning { --ui-soft-accent: var(--ui-warning); --ui-soft-bg: var(--ui-warning-soft); --ui-soft-border: #f4cf8c; }
.ui-soft-card--danger, .ui-soft-action-card--danger { --ui-soft-accent: var(--ui-danger); --ui-soft-bg: var(--ui-danger-soft); --ui-soft-border: #efb3af; }
.ui-soft-card--purple, .ui-soft-action-card--purple { --ui-soft-accent: var(--ui-purple); --ui-soft-bg: var(--ui-purple-soft); --ui-soft-border: #d4c5fb; }
.ui-soft-card--orange, .ui-soft-action-card--orange { --ui-soft-accent: var(--ui-orange); --ui-soft-bg: var(--ui-orange-soft); --ui-soft-border: #ffc981; }
.ui-soft-card--neutral, .ui-soft-action-card--neutral { --ui-soft-accent: #64748b; --ui-soft-bg: var(--ui-neutral-soft); --ui-soft-border: #d8e2ef; }
.ui-icon-chip {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    color: var(--ui-soft-accent, var(--ui-primary));
    background: color-mix(in srgb, var(--ui-soft-accent, var(--ui-primary)) 13%, #fff);
    font-size: 16px;
    font-weight: 950;
}

/* Global soft KPI/card primitive — dùng chung để mỗi ô liền nhau vẫn phân biệt nhẹ, có icon nhỏ và màu theo ngữ nghĩa. */
.ui-kpi {
    --ui-kpi-accent: var(--ui-info);
    --ui-kpi-bg: var(--ui-info-soft);
    --ui-kpi-border: #b9d8fb;
    --ui-kpi-icon-bg: rgba(23, 105, 210, .12);
    --ui-kpi-icon-color: var(--ui-info);
    position: relative;
    min-width: 0;
    padding: var(--ui-space-4);
    background: linear-gradient(135deg, var(--ui-kpi-bg) 0%, #fff 72%);
    border: 1px solid var(--ui-kpi-border);
    border-radius: var(--ui-radius-lg);
    box-shadow: var(--ui-shadow-card);
    overflow: hidden;
}

.ui-kpi:not(.kpi-card) {
    padding-left: calc(var(--ui-space-4) + 48px);
}

.ui-kpi:not(.kpi-card)::before {
    content: "•";
    position: absolute;
    top: var(--ui-space-4);
    left: var(--ui-space-4);
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--ui-kpi-icon-bg);
    color: var(--ui-kpi-icon-color);
    font-size: 16px;
    line-height: 1;
    font-weight: 950;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55);
}

.ui-kpi[data-ui-icon]:not(.kpi-card)::before { content: attr(data-ui-icon); }

.ui-kpi::after {
    content: "";
    position: absolute;
    inset: auto -38px -52px auto;
    width: 120px;
    height: 120px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--ui-kpi-accent) 10%, transparent);
    pointer-events: none;
}

.ui-kpi > span,
.ui-kpi > small {
    display: block;
    position: relative;
    z-index: 1;
    color: var(--ui-text-muted);
    font-weight: 750;
}

.ui-kpi > strong {
    display: block;
    position: relative;
    z-index: 1;
    margin: 6px 0;
    color: var(--ui-text-strong);
    font-size: clamp(23px, 2vw, 30px);
    line-height: 1.06;
    font-weight: 930;
    overflow-wrap: anywhere;
}

.ui-kpi--primary,
.ui-kpi--info { --ui-kpi-accent: var(--ui-primary); --ui-kpi-bg: var(--ui-primary-soft); --ui-kpi-border: #9fc2ff; --ui-kpi-icon-bg: rgba(37, 99, 235, .13); --ui-kpi-icon-color: var(--ui-primary-strong); }
.ui-kpi--success { --ui-kpi-accent: var(--ui-success); --ui-kpi-bg: var(--ui-success-soft); --ui-kpi-border: #a7e5c0; --ui-kpi-icon-bg: rgba(19, 138, 71, .13); --ui-kpi-icon-color: var(--ui-success); }
.ui-kpi--warning { --ui-kpi-accent: var(--ui-warning); --ui-kpi-bg: var(--ui-warning-soft); --ui-kpi-border: #f5ce87; --ui-kpi-icon-bg: rgba(184, 106, 0, .13); --ui-kpi-icon-color: var(--ui-warning); }
.ui-kpi--danger { --ui-kpi-accent: var(--ui-danger); --ui-kpi-bg: var(--ui-danger-soft); --ui-kpi-border: #f1b4b0; --ui-kpi-icon-bg: rgba(196, 50, 43, .13); --ui-kpi-icon-color: var(--ui-danger); }
.ui-kpi--purple,
.ui-kpi--revenue { --ui-kpi-accent: var(--ui-purple); --ui-kpi-bg: var(--ui-purple-soft); --ui-kpi-border: #d4c5fb; --ui-kpi-icon-bg: rgba(115, 83, 199, .13); --ui-kpi-icon-color: var(--ui-purple); }
.ui-kpi--orange { --ui-kpi-accent: var(--ui-orange); --ui-kpi-bg: var(--ui-orange-soft); --ui-kpi-border: #ffc981; --ui-kpi-icon-bg: rgba(199, 95, 0, .13); --ui-kpi-icon-color: var(--ui-orange); }
.ui-kpi--neutral { --ui-kpi-accent: #64748b; --ui-kpi-bg: var(--ui-neutral-soft); --ui-kpi-border: #d8e2ef; --ui-kpi-icon-bg: rgba(100, 116, 139, .12); --ui-kpi-icon-color: #475569; }

/* Global interactive KPI — biến thể click/keyboard dùng chung, module chỉ cung cấp route và nội dung. */
.ui-kpi--action {
    display: block;
    height: 100%;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.ui-kpi--action:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--ui-kpi-accent) 42%, var(--ui-kpi-border));
    box-shadow: var(--ui-shadow-popover);
}
.ui-kpi--action:focus-visible {
    outline: none;
    box-shadow: var(--ui-focus-ring), var(--ui-shadow-popover);
}

.ui-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 28px;
    padding: 4px 10px;
    border: 1px solid var(--ui-border);
    border-radius: 999px;
    font-size: 12px;
    line-height: 1.2;
    font-weight: 850;
}

.ui-badge--success { color: var(--ui-success); background: var(--ui-success-soft); border-color: #ade6c4; }
.ui-badge--warning { color: var(--ui-warning); background: var(--ui-warning-soft); border-color: #f4cf8c; }
.ui-badge--danger { color: var(--ui-danger); background: var(--ui-danger-soft); border-color: #efb3af; }
.ui-badge--info { color: var(--ui-info); background: var(--ui-info-soft); border-color: #b9d8fb; }
.ui-badge--neutral { color: #475569; background: var(--ui-neutral-soft); border-color: #d8e2ef; }

.ui-status-banner {
    padding: 12px 14px;
    margin: 0 0 var(--ui-space-4);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-md);
    font-weight: 700;
}

.ui-status-banner--success { color: var(--ui-success); background: var(--ui-success-soft); border-color: #ade6c4; }
.ui-status-banner--warning { color: var(--ui-warning); background: var(--ui-warning-soft); border-color: #f4cf8c; }
.ui-status-banner--danger { color: var(--ui-danger); background: var(--ui-danger-soft); border-color: #efb3af; }
.ui-status-banner--info { color: var(--ui-info); background: var(--ui-info-soft); border-color: #b9d8fb; }

.ui-status-banner--with-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ui-space-4);
}

.ui-status-banner__content {
    min-width: 0;
}

.ui-status-banner__actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: var(--ui-space-2);
}

/* Global interactive status banner — chỉ dùng khi thông báo có đúng một hành động an toàn,
   rõ ngữ cảnh. Toàn dải là một vùng click; không lồng thêm button/link bên trong. */
.ui-status-banner--interactive {
    width: 100%;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    appearance: none;
    -webkit-appearance: none;
    font: inherit;
    line-height: 1.35;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease;
}
.ui-status-banner--interactive:hover:not(:disabled):not([aria-disabled="true"]) {
    border-color: color-mix(in srgb, currentColor 34%, var(--ui-border));
    box-shadow: 0 6px 18px rgba(15, 23, 42, .08);
}
.ui-status-banner--interactive:focus-visible {
    outline: none;
    box-shadow: var(--ui-focus-ring);
}
.ui-status-banner--interactive:disabled,
.ui-status-banner--interactive[aria-disabled="true"] {
    cursor: default;
    opacity: 1;
    box-shadow: none;
}
.ui-status-banner__message {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}
.ui-status-banner__affordance {
    flex: 0 0 auto;
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    margin-left: auto;
    border-radius: 999px;
    font-size: 22px;
    font-weight: 900;
    line-height: 1;
    opacity: .74;
}
.ui-status-banner--interactive:hover:not(:disabled):not([aria-disabled="true"]) .ui-status-banner__affordance,
.ui-status-banner--interactive:focus-visible .ui-status-banner__affordance {
    opacity: 1;
}

@media (max-width: 720px) {
    .ui-status-banner--with-action {
        align-items: stretch;
        flex-direction: column;
    }

    .ui-status-banner__actions,
    .ui-status-banner__actions .button {
        width: 100%;
    }
}

.ui-dropzone {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--ui-space-4);
    min-height: 108px;
    padding: 18px 20px;
    border: 2px dashed #bfd3ff;
    border-radius: var(--ui-radius-lg);
    background: linear-gradient(180deg, #f8fbff 0%, #fdfefe 100%);
    color: var(--ui-text-strong);
    cursor: pointer;
    transition: border-color var(--ui-transition-fast), background-color var(--ui-transition-fast), box-shadow var(--ui-transition-fast), transform var(--ui-transition-fast);
}

.ui-dropzone:hover {
    border-color: #7aa2ff;
    background: #f3f8ff;
    box-shadow: 0 8px 24px rgba(37, 99, 235, .08);
}

.ui-dropzone.is-dragover {
    border-color: var(--ui-primary);
    background: var(--ui-primary-soft);
    box-shadow: var(--ui-focus-ring);
}

.ui-dropzone.is-disabled {
    opacity: .65;
    cursor: not-allowed;
    background: var(--ui-surface-muted);
    box-shadow: none;
}

.ui-dropzone__icon {
    flex: 0 0 54px;
    width: 54px;
    height: 54px;
    border-radius: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #e8f0ff;
    color: var(--ui-primary);
    font-size: 28px;
    font-weight: 900;
}

.ui-dropzone__content { display: flex; flex-direction: column; min-width: 0; }
.ui-dropzone__content strong,
.ui-dropzone__content small,
.ui-dropzone__filename { display: block; }
.ui-dropzone__content small { margin-top: 4px; color: var(--ui-text-muted); }
.ui-dropzone__filename { margin-top: 10px; color: var(--ui-primary-strong); font-weight: 800; word-break: break-word; }

.ui-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* UI-HQA5 — Global compact file intake card. */
.ui-file-intake-card {
    padding: 0;
    overflow: hidden;
    margin-bottom: var(--ui-space-4);
}

.ui-file-intake-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--ui-space-4);
    padding: 18px 22px 12px;
}

.ui-file-intake-header h2 {
    margin: 4px 0 4px;
    color: var(--ui-text-strong);
    font-size: clamp(22px, 1.5vw, 27px);
    line-height: 1.15;
    font-weight: 920;
    letter-spacing: -.02em;
}

.ui-file-intake-header p {
    margin: 0;
    color: var(--ui-text-muted);
    font-size: 15px;
    line-height: 1.45;
}

.ui-file-intake-form {
    display: grid;
    gap: 12px;
    padding: 0 22px 18px;
}

.ui-file-intake-card .ui-dropzone {
    min-height: 136px;
    padding: 16px 18px;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 12px;
}

.ui-file-intake-card .ui-dropzone__icon {
    flex-basis: 46px;
    width: 46px;
    height: 46px;
    border-radius: 16px;
    font-size: 24px;
}

.ui-file-intake-card .ui-dropzone__content {
    align-items: center;
    max-width: 760px;
}

.ui-file-intake-card .ui-dropzone__content strong {
    font-size: 17px;
    line-height: 1.3;
    font-weight: 900;
}

.ui-file-intake-card .ui-dropzone__content small {
    max-width: 720px;
    font-size: 14px;
    line-height: 1.4;
    white-space: normal;
}

.ui-file-intake-card .ui-dropzone__filename {
    margin-top: 8px;
    font-size: 15px;
}

.ui-file-intake-footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 10px;
    padding-top: 2px;
}

.ui-file-intake-flow {
    min-width: 0;
    color: var(--ui-text-muted);
    font-size: 14px;
    line-height: 1.45;
}

.ui-file-intake-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
}

.ui-file-intake-actions .button {
    min-height: 48px;
    padding-inline: 18px;
    font-weight: 850;
}

@media (max-width: 760px) {
    .ui-file-intake-header { padding: 16px 16px 10px; }
    .ui-file-intake-form { padding: 0 16px 16px; }
    .ui-file-intake-card .ui-dropzone { min-height: 124px; }
    .ui-file-intake-footer { align-items: stretch; flex-direction: column; }
    .ui-file-intake-actions { width: 100%; display: grid; grid-template-columns: 1fr; }
    .ui-file-intake-actions .button { width: 100%; }
}

.ui-action-bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: var(--ui-space-3);
    padding: var(--ui-space-4) var(--ui-space-5);
    background: var(--ui-surface);
    border-top: 1px solid var(--ui-border);
}

.ui-action-bar form { margin: 0; }
.ui-action-bar > span:first-child { margin-right: auto; }
.ui-action-bar__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: var(--ui-space-3);
}
.ui-action-bar__actions form { display: inline-flex; }

/* Global modal confirmation shell. Content and validation remain owned by each feature. */
.ui-dialog {
    width: min(620px, calc(100vw - 32px));
    max-height: min(82vh, 760px);
    padding: 0;
    border: 1px solid var(--ui-border);
    border-radius: 20px;
    background: var(--ui-surface);
    color: var(--ui-text);
    box-shadow: 0 28px 72px rgba(15, 23, 42, .28);
    overflow: auto;
}
.ui-dialog::backdrop { background: rgba(15, 23, 42, .48); backdrop-filter: blur(2px); }
.ui-dialog__content {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    padding: 22px 24px 16px;
}
.ui-dialog__content h3 { margin: 0 0 6px; color: var(--ui-text-strong); }
.ui-dialog__content p { margin: 0; color: var(--ui-text-muted); line-height: 1.5; }
.ui-dialog__icon {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #fff1d6;
    color: #9a5b00;
    font-weight: 950;
}
.ui-confirm-dialog[data-tone="info"] .ui-dialog__icon {
    background: #eaf2ff;
    color: #1556b8;
}
.ui-confirm-dialog[data-tone="danger"] .ui-dialog__icon {
    background: #fff0ee;
    color: #b42318;
}
.ui-confirm-dialog__body { min-width: 0; }
.ui-confirm-dialog__detail {
    display: grid;
    gap: .55rem;
    margin-top: .8rem;
    padding: .75rem .9rem;
    border-radius: 12px;
    background: #f8fafc;
    color: var(--ui-text-muted);
}
.ui-confirm-dialog__detail[hidden] { display: none; }
.ui-confirm-dialog__detail p,
.ui-confirm-dialog__detail ul { margin: 0; }
.ui-confirm-dialog__detail ul {
    display: grid;
    gap: .3rem;
    padding-inline-start: 1.2rem;
}
.ui-dialog__actions {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
    padding: 16px 24px 22px;
    border-top: 1px solid var(--ui-border);
    background: #f8fafc;
}
@media (max-width: 620px) {
    .ui-dialog__content { padding: 18px 18px 14px; }
    .ui-dialog__actions { padding: 14px 18px 18px; }
    .ui-dialog__actions .button { width: 100%; }
}

/* R4B-P0D-HF72 — Neutral master/detail workspace shell. */
.ui-master-detail {
    --ui-master-width: 340px;
    --ui-master-gap: 18px;
    display: grid;
    grid-template-columns: minmax(280px, var(--ui-master-width)) minmax(0, 1fr);
    gap: var(--ui-master-gap);
    align-items: start;
    min-width: 0;
}
.ui-master-pane,
.ui-detail-pane {
    min-width: 0;
    overflow: hidden;
}
.ui-master-pane__header {
    background: var(--ui-surface);
}
.ui-master-list {
    min-width: 0;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}
@media (max-width: 1120px) {
    .ui-master-detail { grid-template-columns: minmax(0, 1fr); }
    .ui-master-list { overflow: visible; }
}

/* R4B-P0D-HF43 — One contextual salary action dock for Module 2 and Module 3. */
.ui-salary-step-dock {
    --ui-salary-dock-left: 0px;
    --ui-salary-dock-width: 100%;
    position: relative;
    min-width: 0;
    margin-top: var(--ui-space-3);
}

.ui-salary-step-dock__sentinel {
    display: block;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

.ui-salary-step-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px 16px;
    padding: var(--ui-space-4) var(--ui-space-5);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg, 18px);
    background: rgba(255, 255, 255, .97);
    box-shadow: 0 10px 28px rgba(16, 36, 64, .08);
    backdrop-filter: blur(12px);
}

.ui-salary-step-dock.is-docked {
    min-height: var(--ui-salary-dock-height, 82px);
}

.ui-salary-step-dock.is-docked .ui-salary-step-bar {
    position: fixed;
    z-index: 80;
    left: var(--ui-salary-dock-left);
    bottom: max(12px, env(safe-area-inset-bottom));
    width: var(--ui-salary-dock-width);
    overflow: visible;
    box-shadow: 0 -14px 34px rgba(16, 36, 64, .16);
}

body.has-ui-salary-step-dock {
    padding-bottom: calc(var(--ui-salary-dock-height, 0px) + 24px);
}

.ui-salary-step-bar__message {
    min-width: 0;
    display: grid;
    gap: 4px;
    color: var(--ui-text-strong);
    line-height: 1.45;
}

.ui-salary-step-bar__message strong {
    font-size: 15px;
    font-weight: 900;
}

.ui-salary-step-bar__message span {
    color: var(--ui-text-muted);
    font-size: 13px;
    font-weight: 700;
}

.ui-salary-step-bar__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
}

.ui-salary-step-bar__actions .button,
.ui-salary-step-bar__actions a,
.ui-salary-step-bar__next,
.ui-salary-step-bar__reason,
.ui-salary-step-bar__unlock {
    min-height: 48px;
}

.ui-salary-step-bar--dirty {
    border-color: #f0c36d;
    background: rgba(255, 251, 237, .98);
}

.ui-salary-step-bar--ready {
    border-color: #9bc4ff;
    background: rgba(247, 251, 255, .98);
}

.ui-salary-step-bar--blocked {
    border-color: #f1b5a9;
    background: rgba(255, 249, 247, .98);
}

.ui-salary-step-bar--locked {
    border-color: #a9c9ff;
    background: rgba(247, 251, 255, .98);
}

.ui-salary-step-bar--readonly {
    border-color: #d7e0ee;
    background: rgba(248, 250, 255, .98);
}

.ui-salary-step-bar--busy {
    opacity: .82;
    cursor: progress;
}

.ui-salary-step-bar__actions--locked {
    display: grid;
    grid-template-columns: minmax(180px, auto) minmax(128px, auto);
    align-items: center;
}

.ui-salary-step-bar__next {
    width: 100%;
    justify-self: stretch;
}

.ui-salary-step-bar__unlock-panel {
    position: relative;
}

.ui-salary-step-bar__unlock-panel > summary {
    list-style: none;
    min-width: 128px;
    cursor: pointer;
}

.ui-salary-step-bar__unlock-panel > summary::-webkit-details-marker { display: none; }

.ui-salary-step-bar__unlock-fields {
    position: absolute;
    right: 0;
    bottom: calc(100% + 10px);
    width: min(520px, calc(100vw - 32px));
    display: grid;
    grid-template-columns: minmax(220px, 1fr) auto;
    gap: 10px;
    padding: 12px;
    border: 1px solid #f0b5ad;
    border-radius: var(--ui-radius-md);
    background: #fff;
    box-shadow: 0 16px 38px rgba(75, 25, 18, .18);
}

.ui-salary-step-bar__reason {
    width: 100%;
}

.ui-salary-step-bar__unlock {
    min-width: 166px;
}

@media (max-width: 980px) {
    .ui-salary-step-dock.is-docked .ui-salary-step-bar {
        max-height: min(70dvh, 560px);
        overflow: auto;
    }

    .ui-salary-step-bar {
        grid-template-columns: 1fr;
    }

    .ui-salary-step-bar__actions,
    .ui-salary-step-bar__actions .button,
    .ui-salary-step-bar__actions a,
    .ui-salary-step-bar__next {
        width: 100%;
    }

    .ui-salary-step-bar__actions--locked {
        grid-template-columns: 1fr;
    }

    .ui-salary-step-bar__unlock-panel,
    .ui-salary-step-bar__unlock-panel > summary,
    .ui-salary-step-bar__unlock {
        width: 100%;
    }

    .ui-salary-step-bar__unlock-fields {
        position: static;
        width: 100%;
        margin-top: 10px;
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .ui-salary-step-dock.is-docked .ui-salary-step-bar {
        left: 0;
        bottom: env(safe-area-inset-bottom);
        width: 100%;
        border-radius: 16px 16px 0 0;
    }

    .ui-salary-step-bar {
        padding: 14px;
    }
}

@media print {
    .ui-salary-step-dock { display: none !important; }
    body.has-ui-salary-step-dock { padding-bottom: 0 !important; }
}

/* Global action dock: natural action footer docks to the viewport only while its natural position is below view. */
.ui-action-dock {
    --ui-action-dock-left: 0px;
    --ui-action-dock-right: 0px;
    --ui-action-dock-width: 100%;
    --ui-action-dock-height: 0px;
}

.ui-action-dock__sentinel {
    display: block;
    width: 1px;
    height: 1px;
    min-width: 0;
    pointer-events: none;
}

.ui-action-dock.is-docked {
    position: fixed;
    z-index: 80;
    left: var(--ui-action-dock-left);
    right: var(--ui-action-dock-right);
    bottom: max(12px, env(safe-area-inset-bottom));
    width: auto;
    box-sizing: border-box;
    margin: 0;
    overflow: visible;
    box-shadow: 0 -14px 34px rgba(16, 36, 64, .16);
}

body.has-ui-action-dock {
    padding-bottom: calc(var(--ui-action-dock-height, 0px) + 24px);
}

@media (max-width: 980px) {
    .ui-action-dock.is-docked {
        max-height: min(70dvh, 560px);
        overflow: auto;
    }
}

@media (max-width: 720px) {
    .ui-action-dock.is-docked {
        left: 0;
        right: 0;
        bottom: env(safe-area-inset-bottom);
        width: auto;
        border-radius: 16px 16px 0 0;
    }
}

@media print {
    .ui-action-dock.is-docked { position: static !important; width: auto !important; box-shadow: none !important; }
    body.has-ui-action-dock { padding-bottom: 0 !important; }
}


.payroll-preview-filterbar,
.ui-data-table-filterbar {
    margin: .85rem 0 0;
    padding: .8rem 1rem;
    border: 1px solid var(--ui-border);
    border-bottom: 0;
    border-radius: 14px 14px 0 0;
    background: var(--ui-surface-soft, #f8faff);
}
.payroll-preview-filterbar .filter-search,
.ui-data-table-filterbar .filter-search {
    max-width: 420px;
    margin: 0;
}
.payroll-preview-tabs > .ui-status-banner,
.payroll-preview-tabs > .ui-kpi-grid,
.payroll-preview-tabs > .table-responsive,
.payroll-preview-tabs > .ui-data-scroll {
    margin-left: .2rem;
    margin-right: .2rem;
}
.payroll-preview-tabs > .ui-status-banner { padding: .95rem 1.1rem; }
.payroll-preview-tabs > .ui-data-scroll { border-radius: 14px; }
.payroll-analysis-primary-actions { align-items: center; gap: .55rem; flex-wrap: wrap; }
.payroll-analysis-primary-actions form { margin: 0; display: inline-flex; }
.payroll-preview-filterbar,
.ui-data-table-filterbar {
    margin-top: 1rem;
    padding: 12px 18px;
    border-radius: 14px 14px 0 0;
}
.payroll-preview-filterbar + .table-pager-top,
.ui-data-table-filterbar + .ui-pager--top { border-top: 0; }
@media (max-width: 900px) {
    .ui-page-header { flex-direction: column; }
    .ui-page-header__actions { width: 100%; justify-content: stretch; }
    .ui-page-header__actions .button { flex: 1 1 auto; }
    .ui-kpi-grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
    .ui-page-header { padding: 16px; border-radius: 16px; }
    .ui-page-header__identity { gap: 12px; }
    .ui-page-header__identity-marker { gap: 8px; }
    .ui-page-header__icon { flex-basis: 44px; width: 44px; height: 44px; border-radius: 14px; }
    .ui-page-header__marker-status { min-height: 36px; padding: 6px 10px; font-size: 13px; }
    .ui-page-header__copy h1 { font-size: 24px; }

    .ui-workflow {
        padding: 14px 12px;
        overflow-x: auto;
        scroll-snap-type: x proximity;
    }

    .ui-workflow__list {
        grid-template-columns: repeat(var(--ui-workflow-count), minmax(150px, 1fr));
        min-width: calc(var(--ui-workflow-count) * 150px);
    }

    .ui-workflow__item { scroll-snap-align: center; }
    .ui-workflow__link { align-items: flex-start; text-align: left; padding: 0 14px 4px; }
    .ui-workflow__item:not(:last-child)::after { left: 44px; right: -106px; }
    .ui-workflow__copy small { display: none; }

    .ui-action-bar { position: sticky; bottom: 0; z-index: 8; box-shadow: 0 -12px 28px rgba(16, 36, 64, .10); }
    .ui-action-bar > *,
    .ui-action-bar form,
    .ui-action-bar .button,
    .ui-action-bar__actions { width: 100%; }
    .ui-action-bar__actions { flex-direction: column; }
    .ui-action-bar > span:first-child { margin-right: 0; }
}


/* G2 — Primitive dùng chung cho toàn bộ Module 1 và các module sau. */
.ui-page {
    display: flex;
    justify-content: center;
}

.ui-shell {
    width: min(1440px, 100%);
    min-width: 0;
}

.ui-shell--form { width: min(820px, 100%); }
.ui-shell--wide { width: min(1720px, 100%); }
.ui-shell--responsive { padding-inline: clamp(12px, 1.6vw, 22px); }

.ui-section-card {
    padding: var(--ui-space-5);
    margin-bottom: var(--ui-space-4);
}

.ui-section-card--flush {
    padding: 0;
    overflow: hidden;
}

.ui-section-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--ui-space-4);
    padding: var(--ui-space-4) var(--ui-space-5) var(--ui-space-3);
}

.ui-section-header h2,
.ui-section-header h3 {
    margin: 0 0 6px;
    color: var(--ui-text-strong);
    font-size: 19px;
    line-height: 1.25;
}

.ui-section-header p {
    margin: 0;
    color: var(--ui-text-muted);
    line-height: 1.5;
}

.ui-date-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--ui-space-4);
    align-items: end;
    padding: var(--ui-space-4);
    margin-bottom: var(--ui-space-4);
}

.ui-date-card--fields {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: end;
}

.ui-form-section {
    padding: var(--ui-space-5);
    margin-bottom: var(--ui-space-4);
}

.ui-form-title {
    margin: 0 0 var(--ui-space-4);
    color: var(--ui-text-strong);
    font-size: 21px;
    line-height: 1.25;
    font-weight: 900;
}

.ui-field-hint {
    display: block;
    margin-top: var(--ui-space-1);
    color: var(--ui-text-muted);
    font-size: 13px;
    line-height: 1.4;
    font-weight: 600;
}

.ui-dynamic-list {
    display: grid;
    gap: var(--ui-space-3);
}

.ui-dynamic-row {
    padding: var(--ui-space-3);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-md);
    background: var(--ui-surface-soft);
}

.ui-add-button {
    width: 100%;
    min-height: 48px;
    margin-top: var(--ui-space-3);
    border: 1.5px dashed #9fc2ff;
    border-radius: var(--ui-radius-md);
    background: var(--ui-primary-soft);
    color: var(--ui-primary-strong);
    font: inherit;
    font-weight: 900;
    cursor: pointer;
    transition: border-color var(--ui-transition-fast), background-color var(--ui-transition-fast), transform var(--ui-transition-fast);
}

.ui-add-button:hover {
    border-color: var(--ui-primary);
    background: #e4efff;
    transform: translateY(-1px);
}

.ui-save-bar {
    position: sticky;
    z-index: 4;
    bottom: 0;
    display: flex;
    justify-content: flex-end;
    gap: var(--ui-space-3);
    padding: var(--ui-space-3) var(--ui-space-4);
    background: rgba(255, 255, 255, .94);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-md);
    box-shadow: 0 -8px 24px rgba(16, 36, 64, .08);
    backdrop-filter: blur(10px);
}

.ui-save-bar .button { min-height: 48px; }

.ui-toolbar {
    display: grid;
    gap: var(--ui-space-3);
    align-items: end;
    padding: var(--ui-space-4);
    margin-bottom: var(--ui-space-4);
}

/* Global compact toolbar density — use inside an already-padded section/disclosure when
   the toolbar should lead directly into related content without duplicating container spacing. */
.ui-toolbar--compact {
    padding: 0;
    margin-bottom: var(--ui-space-3);
}

.ui-toolbar__quick-actions {
    display: flex;
    gap: var(--ui-space-2);
    flex-wrap: wrap;
    align-items: center;
}

.ui-data-shell {
    padding: 0;
    margin-bottom: var(--ui-space-4);
    overflow: hidden;
}

.ui-data-scroll {
    width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    border-top: 1px solid var(--ui-border);
    border-bottom: 1px solid var(--ui-border);
    scrollbar-gutter: stable;
}

.ui-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
    font-size: 14px;
}

.ui-table th,
.ui-table td {
    border: 1px solid var(--ui-border);
    vertical-align: middle;
    background-clip: padding-box;
}
.ui-table th { padding: 9px 12px; }
.ui-table td { padding: 8px 12px; }

.ui-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    color: var(--ui-text-strong);
    background: #f1f5ff;
    font-weight: 900;
    text-align: left;
    white-space: nowrap;
}

.ui-table tbody tr:nth-child(even) td { background: #fbfdff; }
.ui-table tbody tr:hover td { background: #f7faff; }
.ui-table .numeric { text-align: right; font-variant-numeric: tabular-nums; }

.ui-pager {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--ui-space-2);
    flex-wrap: wrap;
    padding: 10px var(--ui-space-5) 14px;
}

.ui-pager--top { padding-top: 10px; padding-bottom: 10px; }

.ui-pager__leading-action {
    margin-right: auto;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--ui-space-2);
    flex-wrap: wrap;
    min-width: 0;
}

.ui-pager__summary {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    margin-right: 4px;
    color: #344054;
    font-size: 15px;
    font-weight: 900;
    white-space: nowrap;
}

.ui-empty-state {
    padding: 28px !important;
    color: var(--ui-text-muted);
    text-align: center;
}

/* Global compact empty state — dùng trong inspector/sidebar hoặc section hẹp,
   giữ cùng semantic/hierarchy nhưng không tạo khoảng trắng quá lớn. */
.ui-empty-state--compact {
    padding: var(--ui-space-4) !important;
}
.ui-empty-state--compact.ui-stack {
    gap: var(--ui-space-2);
}

.ui-status-summary {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) minmax(0, 2fr);
    gap: var(--ui-space-5);
    align-items: center;
    padding: var(--ui-space-5);
    margin-bottom: var(--ui-space-4);
}

.ui-status-summary__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--ui-space-3);
}

.ui-status-stat {
    --ui-status-accent: var(--ui-info);
    --ui-status-bg: var(--ui-info-soft);
    --ui-status-border: #b9d8fb;
    position: relative;
    min-width: 0;
    padding: var(--ui-space-3) var(--ui-space-3) var(--ui-space-3) calc(var(--ui-space-3) + 36px);
    border: 1px solid var(--ui-status-border);
    border-radius: var(--ui-radius-md);
    background: linear-gradient(135deg, var(--ui-status-bg), #fff 80%);
}

.ui-status-stat::before {
    content: "i";
    position: absolute;
    top: 12px;
    left: 12px;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: #fff;
    background: var(--ui-status-accent);
    font-size: 12px;
    font-weight: 950;
}

.ui-status-stat span,
.ui-status-stat strong,
.ui-status-stat b { display: block; }
.ui-status-stat span { color: var(--ui-text-muted); font-size: 13px; font-weight: 800; }
.ui-status-stat strong,
.ui-status-stat b { margin-top: 4px; color: var(--ui-text-strong); font-size: 18px; }
.ui-status-stat--success { --ui-status-accent: var(--ui-success); --ui-status-bg: var(--ui-success-soft); --ui-status-border: #ade6c4; }
.ui-status-stat--success::before { content: "✓"; }
.ui-status-stat--warning { --ui-status-accent: var(--ui-warning); --ui-status-bg: var(--ui-warning-soft); --ui-status-border: #f4cf8c; }
.ui-status-stat--warning::before { content: "!"; }
.ui-status-stat--danger { --ui-status-accent: var(--ui-danger); --ui-status-bg: var(--ui-danger-soft); --ui-status-border: #efb3af; }
.ui-status-stat--danger::before { content: "!"; }
.ui-status-stat--info { --ui-status-accent: var(--ui-info); --ui-status-bg: var(--ui-info-soft); --ui-status-border: #b9d8fb; }


/* Global entity overview — presentation primitive shared by master/detail workspaces. */
.ui-entity-identity {
    min-width: 0;
    display: grid;
    gap: 4px;
}
.ui-entity-identity h2,
.ui-entity-identity__title {
    margin: 0;
    color: var(--ui-text-strong);
    font-size: 1.2rem;
    line-height: 1.22;
    font-weight: 950;
    overflow-wrap: anywhere;
}
.ui-entity-identity > span,
.ui-entity-identity__subtitle {
    color: var(--ui-text-muted);
    font-size: .82rem;
    line-height: 1.3;
    font-weight: 650;
}
.ui-entity-identity__badges {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 5px;
}
.ui-overview { display: grid; gap: var(--ui-space-4); }
.ui-overview__section { display: grid; gap: 10px; min-width: 0; }
.ui-overview__section + .ui-overview__section { padding-top: var(--ui-space-3); border-top: 1px solid var(--ui-border); }
.ui-overview__section-title {
    margin: 0;
    color: var(--ui-text-strong);
    font-size: .84rem;
    font-weight: 950;
    letter-spacing: .055em;
    text-transform: uppercase;
}
.ui-overview__stat-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.ui-overview__stat-grid .ui-status-stat { min-height: 82px; }
.ui-overview__alert { margin: 0; font-size: .87rem; line-height: 1.45; }
.ui-overview__alert strong { color: currentColor; }
.ui-detail-list { margin: 0; display: grid; gap: 0; }
.ui-detail-list > div {
    display: grid;
    grid-template-columns: minmax(100px,.8fr) minmax(0,1.2fr);
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--ui-border);
}
.ui-detail-list > div.is-note { grid-template-columns: 1fr; }
.ui-detail-list dt { color: var(--ui-text); font-size: .9rem; font-weight: 850; line-height: 1.35; }
.ui-detail-list dd { margin: 0; color: var(--ui-text-strong); font-size: .98rem; font-weight: 850; line-height: 1.4; text-align: right; overflow-wrap: anywhere; }
.ui-detail-list > div.is-note dd { text-align: left; font-size: .95rem; font-weight: 650; line-height: 1.45; }
.ui-detail-list--compact > div { padding: 7px 0; }

.ui-detail-list--inline-meta {
    gap: 5px;
}
.ui-detail-list--inline-meta > div,
.ui-detail-list--inline-meta > div.is-note {
    display: flex;
    grid-template-columns: none;
    align-items: baseline;
    gap: 7px;
    padding: 2px 0;
    border-bottom: 0;
}
.ui-detail-list--inline-meta dt {
    flex: 0 0 auto;
    color: var(--ui-text-muted);
    font-size: .86rem;
    font-weight: 700;
}
.ui-detail-list--inline-meta dt::after {
    content: ":";
}
.ui-detail-list--inline-meta dd,
.ui-detail-list--inline-meta > div.is-note dd {
    min-width: 0;
    margin: 0;
    color: var(--ui-text-strong);
    font-size: .92rem;
    font-weight: 650;
    line-height: 1.4;
    text-align: left;
    overflow-wrap: anywhere;
}
.ui-detail-list--inline-meta > div.is-primary dd {
    font-weight: 850;
}

@media (max-width: 720px) {
    .ui-overview__stat-grid { grid-template-columns: 1fr; }
    .ui-detail-list > div { grid-template-columns: 1fr; }
    .ui-detail-list dd { text-align: left; }
}

.ui-auth-page {
    min-height: calc(100vh - 110px);
    display: grid;
    place-items: start center;
    padding: var(--ui-space-7) var(--ui-space-4);
}

.ui-auth-card {
    width: min(1120px, 100%);
    padding: var(--ui-space-7);
}

.ui-auth-card--small { width: min(560px, 100%); }

.ui-role-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ui-space-4);
    margin-top: var(--ui-space-5);
}

.ui-role-card {
    --ui-role-accent: var(--ui-primary);
    --ui-role-bg: var(--ui-primary-soft);
    --ui-role-border: #b9cdf6;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--ui-space-2);
    min-height: 150px;
    padding: var(--ui-space-5) var(--ui-space-5) var(--ui-space-5) calc(var(--ui-space-5) + 54px);
    border: 1.5px solid var(--ui-role-border);
    border-radius: var(--ui-radius-lg);
    background: linear-gradient(135deg, var(--ui-role-bg) 0%, #fff 76%);
    color: var(--ui-text-strong);
    text-decoration: none;
    overflow: hidden;
    transition: transform var(--ui-transition-fast), box-shadow var(--ui-transition-fast), border-color var(--ui-transition-fast);
}

.ui-role-card::before {
    content: "▦";
    position: absolute;
    top: var(--ui-space-5);
    left: var(--ui-space-5);
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    color: #fff;
    background: var(--ui-role-accent);
    font-size: 18px;
    font-weight: 950;
    box-shadow: 0 8px 18px rgba(37, 99, 235, .14);
}

.ui-role-card::after {
    content: "";
    position: absolute;
    inset: auto -36px -50px auto;
    width: 120px;
    height: 120px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--ui-role-accent) 9%, transparent);
}

.ui-role-card:hover {
    color: var(--ui-text-strong);
    transform: translateY(-2px);
    border-color: var(--ui-role-accent);
    box-shadow: var(--ui-shadow-card);
}

.ui-role-card strong,
.ui-role-card b,
.ui-role-card span { position: relative; z-index: 1; }
.ui-role-card strong,
.ui-role-card b { font-size: 25px; line-height: 1.15; }
.ui-role-card span { color: var(--ui-text-muted); font-weight: 650; }
.ui-role-card:nth-child(2), .ui-role-card.role-quanly { --ui-role-accent: var(--ui-purple); --ui-role-bg: var(--ui-purple-soft); --ui-role-border: #d4c5fb; }
.ui-role-card:nth-child(2)::before, .ui-role-card.role-quanly::before { content: "₫"; }
.ui-role-card:nth-child(3), .ui-role-card.role-yen { --ui-role-accent: var(--ui-success); --ui-role-bg: var(--ui-success-soft); --ui-role-border: #ade6c4; }
.ui-role-card:nth-child(3)::before, .ui-role-card.role-yen::before { content: "👥"; font-size: 16px; }
.ui-role-card:nth-child(4) { --ui-role-accent: var(--ui-orange); --ui-role-bg: var(--ui-orange-soft); --ui-role-border: #ffc981; }
.ui-role-card:nth-child(4)::before { content: "↑"; }

/* HUB1 — Khu điều hành dùng đúng Global PageHeader + ContentSection + một RoleCard owner.
   Permission/capability quyết định card nào tồn tại; vai trò chỉ đổi copy/ngữ cảnh ưu tiên. */
.ui-role-groups {
    display: grid;
    gap: var(--ui-space-6);
    margin-top: var(--ui-space-5);
}

.ui-role-groups--dashboard {
    gap: var(--ui-space-4);
    margin-top: var(--ui-space-4);
}

.ui-role-group {
    --ui-hub-accent: var(--ui-primary);
    --ui-hub-soft: var(--ui-primary-soft);
    --ui-hub-border: #b9cdf6;
    min-width: 0;
}

.ui-role-group--people {
    --ui-hub-accent: var(--ui-success);
    --ui-hub-soft: var(--ui-success-soft);
    --ui-hub-border: #ade6c4;
}

.ui-role-group--admin {
    --ui-hub-accent: var(--ui-purple);
    --ui-hub-soft: var(--ui-purple-soft);
    --ui-hub-border: #d4c5fb;
}

.ui-role-grid--adaptive,
.ui-role-grid--contextual {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: var(--ui-space-3);
    margin-top: 0;
}

.ui-role-card.ui-role-card--hub {
    --ui-role-accent: var(--ui-hub-accent);
    --ui-role-bg: var(--ui-hub-soft);
    --ui-role-border: var(--ui-hub-border);
    min-height: 112px;
    padding: 18px 18px 18px 72px;
    gap: 6px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--ui-role-bg) 68%, #fff) 0%, #fff 78%);
}

.ui-role-card.ui-role-card--hub::before {
    content: attr(data-marker);
    top: 16px;
    left: 18px;
    width: 36px;
    height: 36px;
    border-radius: 12px;
    font-size: 14px;
    letter-spacing: -.02em;
}

.ui-role-card.ui-role-card--hub::after {
    width: 96px;
    height: 96px;
    inset: auto -28px -42px auto;
}

.ui-role-card.ui-role-card--hub b,
.ui-role-card.ui-role-card--hub strong {
    font-size: clamp(18px, 1.45vw, 21px);
    line-height: 1.18;
}

.ui-role-card.ui-role-card--hub span {
    font-size: 13px;
    line-height: 1.35;
    font-weight: 600;
}

@media (max-width: 960px) {
    .ui-date-card--fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ui-status-summary { grid-template-columns: 1fr; }
    .ui-status-summary__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
    .ui-shell,
    .ui-shell--form,
    .ui-shell--wide { width: 100%; }
    .ui-section-card,
    .ui-form-section,
    .ui-auth-card { padding: var(--ui-space-4); }
    .ui-date-card,
    .ui-date-card--fields,
    .ui-role-grid,
    .ui-role-grid--contextual { grid-template-columns: 1fr; }
    .ui-save-bar { position: static; flex-direction: column; }
    .ui-save-bar .button { width: 100%; }
    .ui-pager { justify-content: flex-start; }
    .ui-pager__summary { flex: 1 1 100%; white-space: normal; }
    .ui-status-summary__grid { grid-template-columns: 1fr; }
}

/* Global chevron icon — một owner hình học cho disclosure, dropdown và chọn tháng. */
.ui-chevron-icon {
    --ui-chevron-arm: 8px;
    --ui-chevron-stroke: 2px;
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    color: currentColor;
    transition: transform var(--ui-transition-fast);
}

.ui-chevron-icon::before,
.ui-chevron-icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--ui-chevron-arm);
    height: var(--ui-chevron-stroke);
    border-radius: 999px;
    background: currentColor;
    transform-origin: center;
}

.ui-chevron-icon::before {
    transform: translate(-94%, -50%) rotate(45deg);
}

.ui-chevron-icon::after {
    transform: translate(-6%, -50%) rotate(-45deg);
}

/* Global disclosure — native details/summary, dùng cho danh sách mở rộng ở các module. */
.ui-disclosure {
    overflow: hidden;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    background: var(--ui-surface);
    transition: border-color var(--ui-transition-fast), box-shadow var(--ui-transition-fast), background-color var(--ui-transition-fast);
}

.ui-disclosure:hover { border-color: #b7c8dd; }
.ui-disclosure[open] {
    border-color: #a9c6fb;
    box-shadow: 0 10px 26px rgba(16, 36, 64, .08);
}

.ui-disclosure__summary {
    list-style: none;
    cursor: pointer;
    user-select: none;
}

.ui-disclosure__summary::-webkit-details-marker { display: none; }
.ui-disclosure__summary:focus-visible {
    outline: none;
    box-shadow: inset var(--ui-focus-ring);
}

.ui-disclosure__content {
    border-top: 1px solid var(--ui-border);
}

/* Global choice card — lựa chọn radio/checkbox dạng card, dùng được cho nhiều module. */
.ui-choice-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ui-space-3);
}

.ui-choice-card {
    position: relative;
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    align-items: flex-start;
    gap: var(--ui-space-3);
    min-height: 124px;
    padding: var(--ui-space-4);
    border: 1.5px solid var(--ui-border);
    border-radius: var(--ui-radius-md);
    background: var(--ui-surface-soft);
    color: var(--ui-text-strong);
    cursor: pointer;
    transition: border-color var(--ui-transition-fast), background-color var(--ui-transition-fast), box-shadow var(--ui-transition-fast), transform var(--ui-transition-fast);
}

.ui-choice-card:hover {
    border-color: #94b8f8;
    background: #f4f8ff;
    transform: translateY(-1px);
}

.ui-choice-card:has(input:checked) {
    border-color: var(--ui-primary);
    background: var(--ui-primary-soft);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .10);
}

.ui-choice-card:has(input:disabled) {
    cursor: not-allowed;
    opacity: .72;
    transform: none;
}

.ui-choice-card input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.ui-choice-card__marker {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #a9b8ca;
    border-radius: 999px;
    background: #fff;
    transition: border-color var(--ui-transition-fast), box-shadow var(--ui-transition-fast), background-color var(--ui-transition-fast);
}

.ui-choice-card__marker::after {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: inherit;
    background: transparent;
}

.ui-choice-card:has(input:checked) .ui-choice-card__marker {
    border-color: var(--ui-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .13);
}

.ui-choice-card:has(input:checked) .ui-choice-card__marker::after { background: var(--ui-primary); }
.ui-choice-card:has(input:focus-visible) { box-shadow: var(--ui-focus-ring); }
.ui-choice-card__copy { min-width: 0; }
.ui-choice-card__copy strong,
.ui-choice-card__copy small { display: block; }
.ui-choice-card__copy strong { color: var(--ui-text-strong); font-size: 15px; line-height: 1.3; }
.ui-choice-card__copy small { margin-top: 7px; color: var(--ui-text-muted); font-size: 13px; line-height: 1.5; font-weight: 600; }

@media (max-width: 720px) {
    .ui-choice-grid { grid-template-columns: 1fr; }
    .ui-choice-card { min-height: 0; }
}

/* Global record list — danh sách thay thế table khi mỗi bản ghi có nội dung và thao tác riêng. */
.ui-record-list {
    display: grid;
    gap: var(--ui-space-3);
    padding: 0 var(--ui-space-5) var(--ui-space-5);
}

.ui-record-card {
    min-width: 0;
    padding: var(--ui-space-4);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-md);
    background: var(--ui-surface);
    box-shadow: 0 5px 16px rgba(16, 36, 64, .045);
    transition: border-color var(--ui-transition-fast), box-shadow var(--ui-transition-fast), transform var(--ui-transition-fast);
}

.ui-record-card:hover {
    border-color: #b8c9df;
    box-shadow: 0 9px 22px rgba(16, 36, 64, .075);
}

@media (max-width: 720px) {
    .ui-record-list { padding: 0 var(--ui-space-3) var(--ui-space-3); }
    .ui-record-card { padding: var(--ui-space-3); }
}

/* Global folder tabs — một chuẩn dùng chung cho mọi nhóm tab trong web.
   HQA14: thanh tab chính giữ một dòng; khi thiếu ngang thì chữ trong tab xuống dòng, không cho cả tab rớt hàng. */
.ui-tabs {
    --ui-tab-active-bg: #fff;
    --ui-tab-inactive-bg: #edf2f8;
    --ui-tab-inactive-border: #d6e1f2;
    --ui-tab-active-border: #b8caf0;
    display: flex;
    align-items: flex-end;
    flex-wrap: nowrap;
    gap: 6px;
    padding: 10px var(--ui-space-5) 0;
    margin: 0;
    max-width: 100%;
    overflow: visible;
    scrollbar-width: none;
    border-bottom: 1px solid var(--ui-tab-active-border);
    isolation: isolate;
}

.ui-tabs::-webkit-scrollbar { display: none; }

.ui-tabs--folder {
    padding-top: 12px;
    background: linear-gradient(180deg, rgba(248, 251, 255, .82), rgba(255, 255, 255, .98));
}

.ui-tab {
    appearance: none;
    position: relative;
    z-index: 1;
    flex: 0 1 auto;
    min-width: 0;
    max-width: 210px;
    min-height: 58px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 3px;
    padding: 12px 14px 13px;
    margin: 0 0 -1px;
    border: 1px solid var(--ui-tab-inactive-border);
    border-bottom-color: var(--ui-tab-active-border);
    border-radius: 18px 18px 0 0;
    background: linear-gradient(180deg, #f3f6fb, var(--ui-tab-inactive-bg));
    color: var(--ui-text-muted);
    text-align: left;
    text-decoration: none;
    font: inherit;
    cursor: pointer;
    box-shadow: inset 0 -12px 18px rgba(15, 23, 42, .035);
    transition: border-color var(--ui-transition-fast), background-color var(--ui-transition-fast), color var(--ui-transition-fast), transform var(--ui-transition-fast), box-shadow var(--ui-transition-fast);
}

.ui-tab::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 7px;
    height: 2px;
    border-radius: 999px;
    background: transparent;
}

.ui-tab strong {
    color: var(--ui-text-strong);
    font-size: 14px;
    line-height: 1.15;
    font-weight: 950;
    white-space: normal;
    overflow-wrap: anywhere;
}
.ui-tab small {
    color: var(--ui-text-muted);
    font-size: 12px;
    line-height: 1.18;
    font-weight: 700;
    white-space: normal;
    overflow-wrap: anywhere;
}
.ui-tab:hover:not(:disabled) { border-color: #a8bef0; background: linear-gradient(180deg, #f8fbff, #eef5ff); transform: translateY(-2px); }
.ui-tab.is-active,
.ui-tab[aria-selected="true"],
.ui-tab[aria-current="page"] {
    z-index: 3;
    border-color: var(--ui-tab-active-border);
    border-bottom-color: var(--ui-tab-active-bg);
    background: var(--ui-tab-active-bg);
    color: var(--ui-text-strong);
    transform: translateY(0);
    box-shadow: 0 -1px 0 #fff, 0 -10px 22px rgba(15, 23, 42, .06);
}
.ui-tab.is-active::after,
.ui-tab[aria-selected="true"]::after,
.ui-tab[aria-current="page"]::after { background: var(--ui-primary); }
.ui-tab.is-active strong,
.ui-tab[aria-selected="true"] strong,
.ui-tab[aria-current="page"] strong { color: var(--ui-text-strong); }
.ui-tab.is-active small,
.ui-tab[aria-selected="true"] small,
.ui-tab[aria-current="page"] small { color: var(--ui-text-muted); }
.ui-tab:focus-visible { outline: none; box-shadow: var(--ui-focus-ring), 0 -10px 22px rgba(15, 23, 42, .06); }
.ui-tab:disabled,
.ui-tab[aria-disabled="true"] { opacity: .52; cursor: not-allowed; transform: none; }
.ui-tab.is-danger:not(.is-active):not([aria-selected="true"]) { color: #b42318; background: linear-gradient(180deg, #fff8f6, #fff1ee); border-color: #ffd1ca; }

.ui-tab-panel { display: none; }
.ui-tab-panel.is-active { display: block; }
.ui-tab-panel[hidden] { display: none !important; }

.ui-tabs + .ui-tab-panel,
.ui-tabs + .ui-tab-panels,
.ui-tabs + .ui-pager,
.ui-tabs + .ui-data-scroll {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

@media (max-width: 720px) {
    .ui-tabs { padding-inline: var(--ui-space-3); gap: 5px; }
    .ui-tab { flex: 0 1 auto; min-width: 0; max-width: 180px; min-height: 56px; padding-inline: 10px; }
    .ui-tab strong { font-size: 13px; }
    .ui-tab small { font-size: 11px; }
}

@media (max-width: 460px) {
    .ui-tab { max-width: 150px; border-radius: 14px 14px 0 0; margin-bottom: -1px; padding-inline: 8px; }
    .ui-tabs { gap: 4px; padding-bottom: 0; border-bottom-color: var(--ui-border); }
    .ui-tab small { display: none; }
}

/* G-CLOSE — accessibility, responsive data presentation and motion policy. */
.ui-skip-link {
    position: fixed;
    z-index: 1000;
    top: 10px;
    left: 12px;
    padding: 10px 14px;
    border: 2px solid var(--ui-primary);
    border-radius: var(--ui-radius-sm);
    background: var(--ui-surface);
    color: var(--ui-primary-strong);
    box-shadow: var(--ui-shadow-float);
    font-weight: 900;
    transform: translateY(-160%);
    transition: transform var(--ui-transition-fast);
}

.ui-skip-link:focus { transform: translateY(0); }

#main-content:focus { outline: none; }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid rgba(37, 99, 235, .48);
    outline-offset: 2px;
}

:where(button, input, select, textarea):disabled,
.button[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: .62;
}

.ui-status-banner {
    overflow-wrap: anywhere;
}

.ui-dropzone:has(.ui-file-input:focus-visible) {
    border-color: var(--ui-primary);
    box-shadow: var(--ui-focus-ring);
}

.ui-data-scroll {
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
}

.ui-table th a:focus-visible,
.ui-pager a:focus-visible,
.ui-tab:focus-visible,
.ui-role-card:focus-visible {
    outline-offset: 1px;
}

.ui-responsive-table td[data-label]::before {
    content: none;
}

@media (max-width: 1100px) {
    .ui-responsive-table {
        display: block;
        width: 100%;
        min-width: 0 !important;
        border-collapse: separate;
    }

    .ui-responsive-table colgroup,
    .ui-responsive-table thead {
        display: none;
    }

    .ui-responsive-table tbody {
        display: grid;
        gap: var(--ui-space-3);
        padding: var(--ui-space-3);
    }

    .ui-responsive-table tbody tr {
        display: block;
        overflow: hidden;
        border: 1px solid var(--ui-border);
        border-radius: var(--ui-radius-md);
        background: var(--ui-surface);
        box-shadow: 0 5px 16px rgba(16, 36, 64, .05);
    }

    .ui-responsive-table tbody td {
        display: grid;
        grid-template-columns: minmax(108px, .8fr) minmax(0, 1.3fr);
        gap: var(--ui-space-3);
        align-items: start;
        width: 100%;
        max-width: none;
        padding: 10px 12px;
        border: 0;
        border-bottom: 1px solid #e8edf4;
        background: transparent !important;
        text-align: right !important;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        overflow-wrap: anywhere;
    }

    .ui-responsive-table tbody td:last-child { border-bottom: 0; }

    .ui-responsive-table tbody td[data-label]::before {
        content: attr(data-label);
        color: var(--ui-text-muted);
        font-size: 12px;
        line-height: 1.35;
        font-weight: 850;
        text-align: left;
    }

    .ui-responsive-table tbody td:first-child {
        background: var(--ui-primary-soft) !important;
        color: var(--ui-text-strong);
        font-weight: 900;
    }

    .ui-responsive-table tbody td:first-child::before {
        color: var(--ui-primary-strong);
    }

    .ui-responsive-table .ui-badge {
        justify-self: end;
        max-width: 100%;
        text-align: center;
    }

    .ui-responsive-table tbody tr.soft-warning-row {
        border-color: #efc978;
        background: var(--ui-warning-soft);
    }

    .ui-responsive-table .ui-empty-state {
        display: block;
        padding: 24px !important;
        border: 0;
        background: transparent !important;
        text-align: center !important;
    }

    .ui-responsive-table .ui-empty-state::before { content: none; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

@media (forced-colors: active) {
    .ui-badge,
    .ui-status-banner,
    .ui-status-stat,
    .ui-kpi,
    .ui-soft-card,
    .ui-soft-action-card,
    .ui-role-card,
    .ui-choice-card,
    .ui-tab,
    .ui-disclosure,
    .ui-record-card {
        border: 1px solid CanvasText;
    }
}

.ui-visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Global text utility — giữ ngắt dòng cho nội dung cảnh báo/tóm tắt do server tạo. */
.ui-preserve-lines { white-space: pre-line; }

/* UI-GLOBAL-HF2: period navigation, control hierarchy and compact toolbars. */
.ui-page-header__actions {
    align-items: center;
}
.ui-page-header__action-list {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--ui-space-2);
    flex-wrap: wrap;
}
.ui-page-header__action-list .button {
    min-height: 44px;
    padding-inline: 16px;
}
.ui-period-nav {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    min-width: max-content;
}
.ui-period-nav__main {
    display: inline-grid;
    grid-template-columns: 42px minmax(118px, auto) 42px;
    align-items: stretch;
    overflow: hidden;
    border: 1px solid var(--ui-border-strong, #bfd0ee);
    border-radius: 13px;
    background: var(--ui-surface, #fff);
    box-shadow: 0 4px 12px rgba(16, 36, 64, .05);
}
.ui-icon-button,
.ui-period-nav__value,
.ui-period-nav__today {
    min-height: 42px;
    border: 0;
    background: transparent;
    color: var(--ui-primary-strong);
    font: inherit;
    font-weight: 850;
    text-decoration: none;
    cursor: pointer;
}
.ui-icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 25px;
    line-height: 1;
}
.ui-icon-button:hover,
.ui-period-nav__value:hover { background: var(--ui-primary-soft); }
.ui-period-nav__value {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding-inline: 12px;
    border-inline: 1px solid var(--ui-border);
    white-space: nowrap;
}

.ui-period-nav__chevron {
    --ui-chevron-arm: 6px;
    --ui-chevron-stroke: 1.75px;
    width: 14px;
    height: 14px;
    color: var(--ui-primary-strong);
}

.ui-period-nav.is-open .ui-period-nav__chevron {
    transform: rotate(180deg);
}
.ui-period-nav__today {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 14px;
    border: 1px solid var(--ui-border-strong, #bfd0ee);
    border-radius: 12px;
    background: var(--ui-primary-soft);
    white-space: nowrap;
}
.ui-period-nav__today:hover { background: #e4efff; }
.ui-period-nav__current {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 42px;
    color: var(--ui-success-strong, #067647);
    font-size: 13px;
    font-weight: 850;
    white-space: nowrap;
}
.ui-period-nav__current > span { font-size: 9px; }
.ui-period-popover {
    position: absolute;
    z-index: 40;
    top: calc(100% + 10px);
    right: 0;
    width: min(330px, calc(100vw - 32px));
    padding: 14px;
    border: 1px solid var(--ui-border-strong, #bfd0ee);
    border-radius: 16px;
    background: var(--ui-surface, #fff);
    box-shadow: 0 18px 45px rgba(16, 36, 64, .18);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-5px);
    transition: opacity .14s ease, transform .14s ease, visibility .14s ease;
}
.ui-period-nav.is-open .ui-period-popover {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.ui-period-popover__year {
    display: grid;
    grid-template-columns: 36px 1fr 36px;
    align-items: center;
    text-align: center;
    margin-bottom: 12px;
}
.ui-icon-button--small { min-height: 36px; border-radius: 10px; }
.ui-period-popover__months {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
}
.ui-period-month {
    position: relative;
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border: 1px solid var(--ui-border);
    border-radius: 10px;
    color: var(--ui-text-strong);
    background: var(--ui-surface-soft);
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
}
.ui-period-month:hover { border-color: var(--ui-primary); background: var(--ui-primary-soft); }
.ui-period-month.is-selected { color: #fff; border-color: var(--ui-primary); background: var(--ui-primary); }
.ui-period-month.is-current:not(.is-selected) { border-color: var(--ui-success, #12b76a); }
.ui-period-month > span { font-size: 7px; color: var(--ui-success, #12b76a); }
.ui-period-month.is-selected > span { color: #fff; }
.ui-input-action-group {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: end;
}
.ui-input-action-group__actions {
    display: flex;
    align-items: stretch;
    gap: 8px;
}
.ui-input-action-group input,
.ui-input-action-group .button { min-height: 54px; }
.ui-segmented-control {
    display: inline-flex;
    align-items: stretch;
    padding: 3px;
    border: 1px solid var(--ui-border);
    border-radius: 13px;
    background: var(--ui-surface-soft);
}
.ui-segmented-control .button {
    min-height: 42px;
    border: 0;
    border-radius: 10px;
    color: var(--ui-primary-strong);
    background: transparent;
    box-shadow: none;
    opacity: 1;
}
.ui-segmented-control .button:hover {
    color: var(--ui-primary-strong);
    background: var(--ui-primary-soft);
}
.ui-segmented-control .button.is-active,
.ui-segmented-control .button.active,
.ui-segmented-control .button.button-primary,
.ui-segmented-control .button[aria-current="true"] {
    color: #fff;
    background: var(--ui-primary);
    box-shadow: 0 4px 10px rgba(37, 99, 235, .18);
    opacity: 1;
}
.ui-segmented-control .button.is-active:hover,
.ui-segmented-control .button.active:hover,
.ui-segmented-control .button.button-primary:hover,
.ui-segmented-control .button[aria-current="true"]:hover {
    color: #fff;
    background: var(--ui-primary-strong);
}
.ui-toolbar--horizontal {
    display: flex;
    align-items: end;
    gap: 12px;
    flex-wrap: wrap;
}
.ui-toolbar--horizontal > label:not(.ui-check) { flex: 1 1 160px; min-width: 0; }
.ui-toolbar--horizontal .filter-search { flex: 2 1 260px; }
.ui-toolbar--horizontal > .ui-check { flex: 0 0 auto; align-self: end; min-height: 48px; }
.ui-toolbar--horizontal .button { min-height: 48px; }

/* GLOBAL-UI07 — Adaptive toolbar fields.
   Form/filter toolbars opt in when labels should sit beside controls whenever the
   toolbar itself has enough inline space; narrow containers fall back to stacked fields. */
.ui-toolbar--adaptive-fields {
    container-type: inline-size;
}
.ui-toolbar-field {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
    align-items: center;
    min-width: 0;
    color: var(--ui-text-strong);
    font-weight: 800;
}
.ui-toolbar-field__label {
    min-width: 0;
    color: var(--ui-text-strong);
    font-weight: 800;
    line-height: 1.2;
}
.ui-toolbar-field > input,
.ui-toolbar-field > select,
.ui-toolbar-field > textarea,
.ui-toolbar-field > .ui-search-combobox {
    width: 100%;
    min-width: 0;
}
.ui-toolbar-field__control {
    display: grid;
    gap: 4px;
    min-width: 0;
}
.ui-toolbar-field__control > input,
.ui-toolbar-field__control > select,
.ui-toolbar-field__control > textarea,
.ui-toolbar-field__control > .ui-search-combobox {
    width: 100%;
    min-width: 0;
}
.ui-toolbar-field__help {
    color: var(--ui-text-muted);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.3;
}
/* Global toolbar helper row — full-width explanatory/status text belongs below the whole toolbar,
   not under one field, so dense filter bars keep a compact first row. */
.ui-toolbar--horizontal > .ui-toolbar-help-row {
    flex: 1 0 100%;
    width: 100%;
    min-width: 0;
}
.ui-toolbar-help-row {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 14px;
    margin-top: -2px;
    color: var(--ui-text-muted);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
}
.ui-toolbar-help-row > [aria-live]:empty {
    display: none;
}
@container (min-width: 760px) {
    .ui-toolbar--adaptive-fields > .ui-toolbar-field {
        grid-template-columns: max-content minmax(0, 1fr);
        column-gap: 12px;
        row-gap: 0;
    }
    .ui-toolbar--adaptive-fields > .ui-toolbar-field > .ui-toolbar-field__label {
        white-space: nowrap;
    }
}

/* GLOBAL-UI08 — Adaptive standalone field.
   A field keeps label and control on one row whenever its own content can fit;
   intrinsic flex wrapping falls back to label-above-control without viewport assumptions. */
.ui-field.ui-field--adaptive {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px 12px;
}
.ui-field--adaptive > .ui-field__label {
    flex: 0 0 auto;
    min-width: 0;
    color: var(--ui-text-strong);
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
}
.ui-field--adaptive > .ui-field__control {
    flex: 1 1 320px;
    min-width: min(100%, 260px);
}
.ui-field--adaptive > .ui-field__control > * {
    width: 100%;
    min-width: 0;
}

/* GLOBAL-UI09 — Compact contextual actions inside data tables.
   Button color stays semantic through button-primary/secondary/danger; this primitive owns
   compact table geometry and keeps short action sets on one line when the caller opts in. */
.ui-table-actions {
    display: flex;
    align-items: center;
    gap: var(--ui-space-2);
    flex-wrap: wrap;
}
.ui-table-actions .ui-table-action {
    flex: 0 0 auto;
    white-space: nowrap;
}
.ui-table-heading--actions,
.ui-table-cell--actions {
    width: 1%;
    white-space: nowrap;
}
.ui-table-cell--actions .ui-table-actions {
    flex-wrap: nowrap;
}
/* Global content section — khối nội dung có header/body thống nhất, không tạo card-header owner riêng theo module. */
.ui-content-section {
    min-width: 0;
}
/* Global section rhythm: header divider must never touch the first body control/banner/table.
   Standard sections keep one breathing row below the divider; embedded sections override this
   because their own header margin already owns the separation. */
.ui-content-section__body {
    min-width: 0;
    padding: var(--ui-space-4) var(--ui-space-5) var(--ui-space-5);
}

/* Global embedded content section — dùng khi section đã nằm trong một panel/tab/sidebar
   có padding riêng. Không tạo nested card; header/body chia một group bằng nhịp và divider Global. */
.ui-content-section--embedded > .ui-section-header {
    padding: 0 0 var(--ui-space-3);
    margin: 0 0 var(--ui-space-3);
    border-bottom: 1px solid var(--ui-border);
}
.ui-content-section--embedded > .ui-content-section__body {
    padding: 0;
}

.ui-section-header--prominent {
    padding-block: 18px 14px;
    border-bottom: 1px solid var(--ui-border);
}
.ui-section-header--prominent h2,
.ui-section-header--prominent h3 {
    font-size: 21px;
    font-weight: 950;
    letter-spacing: -.01em;
}

.ui-section-header--compact {
    padding: 0;
    margin: 0 0 var(--ui-space-3);
    gap: var(--ui-space-3);
}
.ui-section-header--compact h2,
.ui-section-header--compact h3 {
    margin-bottom: 4px;
    font-size: 18px;
}
.ui-section-header--compact p {
    line-height: 1.4;
}
@media (max-width: 900px) {
    .ui-page-header__actions { width: 100%; justify-content: flex-start; }
    .ui-page-header__action-list { justify-content: flex-start; }
}
@media (max-width: 640px) {
    .ui-period-nav { width: 100%; justify-content: flex-start; flex-wrap: wrap; }
    .ui-period-nav__main { flex: 1 1 220px; grid-template-columns: 42px minmax(100px, 1fr) 42px; }
    .ui-period-nav__today { flex: 0 0 auto; }
    .ui-period-nav__current { flex-basis: 100%; min-height: auto; }
    .ui-period-popover { left: 0; right: auto; }
    .ui-input-action-group { grid-template-columns: 1fr; }
    .ui-input-action-group__actions .button { flex: 1 1 0; }
    .ui-toolbar--horizontal { align-items: stretch; }
    .ui-toolbar--horizontal > label:not(.ui-check),
    .ui-toolbar--horizontal .filter-search,
    .ui-toolbar--horizontal > .ui-check { flex-basis: 100%; }
}
.ui-period-fields {
    display: grid;
    grid-template-columns: .8fr .8fr .8fr 1.2fr 1.2fr;
    gap: 12px;
    align-items: end;
    padding: var(--ui-space-4);
    margin-bottom: var(--ui-space-4);
}
.ui-period-fields input,
.ui-period-fields select { min-height: 48px; }
.ui-section-header--inline {
    padding-inline: 0;
    margin-bottom: 14px;
}
@media (max-width: 900px) {
    .ui-period-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .ui-period-fields > label:nth-last-child(-n + 2) { grid-column: span 1; }
}
@media (max-width: 640px) {
    .ui-period-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ui-period-fields > label:nth-last-child(-n + 2) { grid-column: 1 / -1; }
}
.button.button-soft {
    min-height: 44px;
    border-color: transparent;
    background: var(--ui-primary-soft);
    color: var(--ui-primary-strong);
}
.ui-toolbar .button-primary { box-shadow: 0 6px 14px rgba(37, 99, 235, .14); }

/* UI-GLOBAL-HF3-HF1: header action cards tuned to match right-aligned large nav buttons. */
.ui-page-header:has(.ui-header-action-card) {
    align-items: center;
}
.ui-header-action-card {
    min-width: 156px;
    min-height: 56px;
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 20px;
    border: 1px solid #bfd2ff;
    border-radius: 14px;
    background: #fff;
    color: #1f4fc8;
    text-decoration: none;
    font-size: 15px;
    font-weight: 850;
    line-height: 1;
    white-space: nowrap;
    box-shadow: none;
    transition: transform .16s ease, border-color .16s ease, background-color .16s ease, color .16s ease, box-shadow .16s ease;
}
.ui-header-action-card:hover {
    border-color: #8fb3ff;
    background: #f6f9ff;
    color: #143da9;
    box-shadow: 0 8px 18px rgba(37, 99, 235, .10);
    transform: translateY(-1px);
}
.ui-header-action-card:active { transform: translateY(0); }
.ui-header-action-card:focus-visible {
    outline: 3px solid rgba(37, 99, 235, .20);
    outline-offset: 3px;
}
.ui-header-action-card--primary {
    background: linear-gradient(180deg, #2e68f0 0%, #2457d3 100%);
    border-color: #2a5fda;
    color: #fff;
}
.ui-header-action-card--primary:hover {
    background: linear-gradient(180deg, #3772f4 0%, #2a60dd 100%);
    border-color: #2457d3;
    color: #fff;
}
.ui-header-action-card--secondary {
    background: #fff;
    border-color: #b9cdf6;
    color: #214ebf;
}
.ui-header-action-card__icon {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    background: transparent;
    color: currentColor;
}
.ui-header-action-card__icon svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}
.ui-header-action-card__label {
    display: block;
    letter-spacing: -.01em;
}
.ui-page-header:has(.ui-header-action-card) .ui-page-header__identity {
    flex: 1 1 auto;
    min-width: 0;
}
.ui-page-header__action-list:has(.ui-header-action-card) {
    width: 326px;
    flex: 0 0 326px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    align-items: stretch;
    justify-content: end;
}
.ui-page-header__action-list:has(.ui-header-action-card) .ui-header-action-card {
    width: 100%;
    min-width: 0;
}
.ui-page-header__action-list:has(> .ui-header-action-card:nth-child(3)) {
    width: 510px;
    flex-basis: 510px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.ui-page-header__actions:has(.ui-header-action-card) {
    flex: 0 0 auto;
    align-self: center;
    justify-content: flex-end;
    display: grid;
    grid-template-columns: auto auto;
    align-items: start;
    justify-items: end;
    gap: 14px;
}
.ui-page-header__actions:has(.ui-header-action-card) .ui-period-nav {
    justify-self: end;
}
.ui-page-header__actions:has(.ui-header-action-card) .ui-page-header__action-list,
.ui-page-header__actions:has(.ui-header-status-card) .ui-page-header__action-list {
    justify-self: end;
}
@media (max-width: 1180px) {
    .ui-page-header__action-list:has(> .ui-header-action-card:nth-child(3)) {
        width: 326px;
        flex-basis: 326px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 1100px) {
    .ui-header-action-card {
        min-width: 0;
        height: 54px;
        min-height: 54px;
        padding-inline: 16px;
    }
}
@media (max-width: 900px) {
    .ui-page-header:has(.ui-header-action-card) {
        align-items: stretch;
    }
    .ui-page-header__actions:has(.ui-header-action-card),
    .ui-page-header__action-list:has(.ui-header-action-card),
    .ui-page-header__action-list:has(> .ui-header-action-card:nth-child(3)) {
        width: 100%;
        flex: 0 0 auto;
    }
    .ui-page-header__actions:has(.ui-header-action-card) {
        grid-template-columns: 1fr;
        justify-items: stretch;
    }
    .ui-page-header__actions:has(.ui-header-action-card) .ui-period-nav,
    .ui-page-header__actions:has(.ui-header-action-card) .ui-page-header__action-list,
    .ui-page-header__actions:has(.ui-header-status-card) .ui-page-header__action-list {
        justify-self: stretch;
    }
}
@media (max-width: 760px) {
    .ui-page-header__action-list:has(.ui-header-action-card) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .ui-header-action-card {
        width: 100%;
        min-height: 52px;
        height: 52px;
        padding-inline: 12px;
        font-size: 14px;
    }
}
@media (max-width: 460px) {
    .ui-page-header__action-list:has(.ui-header-action-card),
    .ui-page-header__action-list:has(> .ui-header-action-card:nth-child(3)) {
        grid-template-columns: 1fr;
    }
}

/* F2-HQA6: contextual attendance action states. */
.button.is-disabled {
    pointer-events: none;
    cursor: not-allowed;
    opacity: .62;
}


/* HQA11A + R4B-P0D-HF46: Global Date input — gõ dd/MM/yyyy hoặc chọn từ lịch; server vẫn nhận ISO khi submit. */
.ui-global-date-control {
    position: relative;
    display: block;
    width: 100%;
    min-width: 0;
}

.ui-global-date-input,
.ui-global-month-input {
    width: 100%;
    padding-right: 52px !important;
    letter-spacing: .01em;
    font-variant-numeric: tabular-nums;
}

.ui-global-date-input::placeholder,
.ui-global-month-input::placeholder {
    color: #8794a8;
}

.ui-global-date-button {
    position: absolute;
    top: 50%;
    right: 6px;
    z-index: 2;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transform: translateY(-50%);
    border: 1px solid color-mix(in srgb, var(--ui-primary) 28%, var(--ui-border));
    border-radius: 10px;
    background: var(--ui-primary-soft);
    color: var(--ui-primary-strong);
    cursor: pointer;
    transition: border-color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease;
}

.ui-global-date-button svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ui-global-date-button:hover:not(:disabled) {
    border-color: var(--ui-primary);
    background: color-mix(in srgb, var(--ui-primary-soft) 78%, white);
}

.ui-global-date-button:focus-visible {
    outline: none;
    box-shadow: var(--ui-focus-ring);
}

.ui-global-date-button:active:not(:disabled) {
    transform: translateY(-50%) scale(.96);
}

.ui-global-date-button:disabled {
    cursor: not-allowed;
    opacity: .5;
}

.ui-global-date-control > .ui-global-date-picker-native {
    position: absolute;
    top: 50%;
    right: 6px;
    z-index: 3;
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 !important;
    transform: translateY(-50%);
    border: 0 !important;
    opacity: .001;
    cursor: pointer;
}

.ui-global-date-control > .ui-global-date-picker-native::-webkit-calendar-picker-indicator {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    cursor: pointer;
}

.ui-global-date-control > .ui-global-date-picker-native:disabled {
    cursor: not-allowed;
}

/* R4B-P0D-HF74 — Permission Center: grouped matrix, before/after state and action dock. */
.director-permission-page {
    padding: clamp(18px, 2.2vw, 36px) clamp(18px, 2.4vw, 40px) clamp(26px, 3vw, 48px);
}
.director-permission-page .ui-shell {
    width: min(1720px, 100%);
    margin-inline: auto;
}
.permission-workspace {
    --ui-master-width: 320px;
    margin-top: 18px;
}
.permission-account-list,
.permission-detail-card,
.permission-history-card {
    min-width: 0;
}
.permission-account-list {
    padding: 0;
    overflow: hidden;
}
.permission-account-list__header {
    position: sticky;
    top: 0;
    z-index: 2;
    display: grid;
    gap: 14px;
    padding: 20px 20px 16px;
    border-bottom: 1px solid var(--ui-border);
}
.permission-account-search {
    display: grid;
    gap: 7px;
    color: var(--ui-text-strong);
    font-size: .9rem;
    font-weight: 800;
}
.permission-account-stack {
    max-height: min(72vh, 780px);
    padding: 12px;
    display: grid;
    align-content: start;
    gap: 9px;
}
.permission-account-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 12px;
    padding: 14px 15px;
    border: 1px solid var(--ui-border);
    border-radius: 15px;
    color: inherit;
    text-decoration: none;
    background: #fff;
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease, background-color .16s ease;
}
.permission-account-item:hover {
    border-color: #b8cced;
    box-shadow: 0 8px 20px rgba(15, 23, 42, .07);
    transform: translateY(-1px);
}
.permission-account-item.is-active {
    border-color: #7da5ef;
    background: #f4f8ff;
    box-shadow: 0 10px 24px rgba(37, 99, 235, .10);
}
.permission-account-item.is-disabled { opacity: .72; }
.permission-account-item__copy,
.permission-account-item__state {
    min-width: 0;
}
.permission-account-item__copy {
    display: grid;
    gap: 4px;
}
.permission-account-item__title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
}
.permission-account-item__title strong {
    color: var(--ui-text-strong);
    font-size: 1rem;
}
.permission-account-item small,
.permission-account-item__summary,
.permission-module-card__head small,
.permission-level-item span {
    color: var(--ui-text-muted);
    line-height: 1.4;
}
.permission-account-item__summary { font-size: .82rem; }
.permission-account-item__state { display: flex; justify-content: flex-end; }
.permission-account-empty { margin: 4px; }

.permission-detail-card {
    padding: clamp(20px, 1.6vw, 30px);
    overflow: visible;
}
.permission-detail-header {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: flex-start;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--ui-border);
    margin-bottom: 18px;
}
.permission-detail-header h2 { margin-bottom: 4px; }
.permission-detail-header__state {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
}
.permission-account-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}
.permission-account-summary > span {
    padding: 7px 10px;
    border: 1px solid #dbe5f5;
    border-radius: 999px;
    background: #f8fbff;
    color: #4b607a;
    font-size: .84rem;
}
.permission-account-summary b { color: #1e4fbf; }
.permission-self-warning { margin-bottom: 16px; }
.permission-level-disclosure { margin-bottom: 18px; }
.permission-level-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}
.permission-level-item {
    display: grid;
    gap: 6px;
    padding: 13px 14px;
    border: 1px solid var(--ui-border);
    border-radius: 14px;
    background: #f8fafc;
}
.permission-level-item strong { color: var(--ui-text-strong); }

.permission-form { min-width: 0; }
.permission-module-groups { display: grid; gap: 24px; }
.permission-module-group { display: grid; gap: 12px; min-width: 0; }
.permission-module-group__header {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    padding-bottom: 8px;
    border-bottom: 1px solid #dfe7f3;
}
.permission-module-group__header h3 {
    margin: 0;
    color: var(--ui-text-strong);
    font-size: 1rem;
}
.permission-module-group__header span {
    color: var(--ui-text-muted);
    font-size: .82rem;
}
.permission-module-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}
.permission-module-card {
    min-width: 0;
    display: grid;
    gap: 14px;
    padding: 17px;
    border: 1px solid var(--ui-border);
    border-radius: 17px;
    background: linear-gradient(180deg, #fff 0%, #fbfcfe 100%);
    transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}
.permission-module-card--nghiep-vu .permission-module-card__head > .ui-badge {
    color: #55657a;
    background: #f1f5f9;
    border-color: #d8e1ec;
}
.permission-module-card--bao-mat {
    border-color: #f5c98b;
    background: linear-gradient(180deg, #fffaf2 0%, #fff7ed 100%);
}
.permission-module-card.is-changed {
    border-color: #79a5f4;
    background: linear-gradient(180deg, #f8fbff 0%, #eef5ff 100%);
    box-shadow: 0 10px 24px rgba(37, 99, 235, .10);
}
.permission-module-card.is-locked { align-content: start; }
.permission-module-card__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}
.permission-module-card__head > div { min-width: 0; }
.permission-module-card__head strong,
.permission-module-card__head small,
.permission-module-card__body label span {
    display: block;
}
.permission-module-card__head strong { color: var(--ui-text-strong); }
.permission-module-card__head small { margin-top: 4px; }
.permission-module-card__body label {
    display: grid;
    gap: 8px;
    font-weight: 800;
}
.permission-locked-level { display: grid; gap: 8px; }
.permission-locked-level p { margin: 0; }
.permission-change-preview {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px 0 0;
    padding: 8px 10px;
    border-radius: 10px;
    background: #e8f1ff;
    color: #49617e;
    font-size: .88rem;
}
.permission-change-preview[hidden] { display: none; }
.permission-change-preview strong { color: #1d4ed8; }

.permission-note-row {
    display: grid;
    gap: 8px;
    margin-top: 22px;
}
.permission-note-row label { display: grid; gap: 8px; font-weight: 800; }
.permission-note-row small { color: var(--ui-text-muted); font-weight: 500; line-height: 1.45; }
.permission-note-error {
    margin: 0;
    color: #b42318;
    font-size: .9rem;
    font-weight: 800;
}
.permission-action-dock {
    position: sticky;
    bottom: 12px;
    z-index: 12;
    margin-top: 18px;
    border: 1px solid #d6e1f1;
    border-radius: 16px;
    background: rgba(255,255,255,.98);
    box-shadow: 0 -10px 28px rgba(15, 23, 42, .12);
}
.permission-action-summary {
    min-width: 0;
    display: grid;
    gap: 3px;
    margin-right: auto;
}
.permission-action-summary > strong { color: var(--ui-text-strong); }
.permission-action-summary > span { color: var(--ui-text-muted); font-size: .88rem; }
.permission-action-summary ul {
    margin: 5px 0 0 18px;
    padding: 0;
    color: #49617e;
    font-size: .84rem;
    line-height: 1.45;
}
.permission-protection-banner { margin-bottom: 16px; }
.permission-history-card {
    margin-top: 20px;
    padding: clamp(20px, 1.5vw, 28px);
}
.permission-history-header { align-items: flex-start; }
.permission-history-filter {
    display: grid;
    grid-template-columns: minmax(180px, 1.1fr) minmax(170px, 1fr) minmax(145px, .8fr) minmax(145px, .8fr) auto;
    gap: 12px;
    align-items: end;
    margin: 18px 0 12px;
    padding: 14px;
    border: 1px solid var(--ui-border);
    border-radius: 16px;
    background: #f8fbff;
}
.permission-history-filter label {
    min-width: 0;
    display: grid;
    gap: 7px;
    color: var(--ui-text-strong);
    font-size: .86rem;
    font-weight: 800;
}
.permission-history-filter__actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}
.permission-history-filter-warning { margin: 0 0 12px; }
.permission-history-card > .ui-pager { padding-inline: 0; }
.permission-history-table-shell { margin: 0; }
.permission-history-table-shell .ui-data-scroll { overflow-x: auto; }
.permission-history-table {
    min-width: 0;
    table-layout: fixed;
}
.permission-history-table th,
.permission-history-table td {
    white-space: normal;
    overflow-wrap: anywhere;
}
.permission-history-table th:nth-child(1),
.permission-history-table td:nth-child(1) { width: 145px; }
.permission-history-table th:nth-child(2),
.permission-history-table td:nth-child(2) { width: 150px; }
.permission-history-table th:nth-child(3),
.permission-history-table td:nth-child(3) { width: 155px; }
.permission-history-table th:nth-child(4),
.permission-history-table td:nth-child(4) { width: 230px; }
.permission-history-table th:nth-child(5),
.permission-history-table td:nth-child(5) { width: 145px; }
.permission-history-change {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    color: var(--ui-text-muted);
}
.permission-history-change strong { color: #1d4ed8; }
.permission-history-note { color: #526276; line-height: 1.45; }

@media (max-width: 1280px) {
    .permission-module-grid { grid-template-columns: 1fr; }
    .permission-level-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1120px) {
    .permission-account-stack { max-height: none; }
    .permission-history-filter { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .permission-history-filter__actions { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
    .director-permission-page { padding: 12px 12px 22px; }
    .permission-detail-card,
    .permission-history-card { padding: 16px; }
    .permission-detail-header,
    .permission-module-card__head,
    .permission-module-group__header { align-items: stretch; flex-direction: column; }
    .permission-detail-header__state,
    .permission-account-item__state { justify-content: flex-start; }
    .permission-account-item { grid-template-columns: 1fr; }
    .permission-level-grid { grid-template-columns: 1fr; }
    .permission-action-dock { bottom: 8px; }
    .permission-history-filter { grid-template-columns: 1fr; }
    .permission-history-filter__actions { grid-column: auto; }
    .permission-history-filter__actions .button { flex: 1 1 150px; }
}

/* F2-HF/F3-ready — Kho biến tính phụ an toàn cho mẫu in */
.print-template-vars#bien-tinh-phu {
    display: grid;
    gap: 18px;
}

.print-template-vars#bien-tinh-phu .ui-data-scroll {
    max-height: 360px;
}

.print-template-vars#bien-tinh-phu code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-size: .92rem;
    background: rgba(15, 23, 42, .06);
    border-radius: 8px;
    padding: 3px 6px;
}

/* R3B-G0: module workspace shell shared by salary modules. */
.ui-workspace-header {
    display: grid;
    gap: var(--ui-space-4);
    margin-bottom: var(--ui-space-5);
}

.ui-workspace-header > .ui-page-header,
.ui-workspace-header > .ui-workflow,
.ui-workspace-header > .ui-tabs,
.ui-workspace-header > .ui-status-banner {
    margin-bottom: 0;
}

.ui-workspace-header > .ui-tabs {
    border: 1px solid var(--ui-border);
    border-bottom-color: var(--ui-tab-active-border, #b8caf0);
    border-radius: var(--ui-radius-lg) var(--ui-radius-lg) 0 0;
}

.ui-workspace-header .ui-status-banner ul {
    margin: 8px 0 0 20px;
    padding: 0;
}

/* Workspace tabs own their available width. On desktop, long module labels stay on one line;
   smaller viewports keep the existing horizontal-scroll/wrap behavior. */
@media (min-width: 761px) {
    .ui-workspace-header > .ui-tabs--scroll .ui-tab { max-width: none; }
    .ui-workspace-header > .ui-tabs--scroll .ui-tab strong {
        white-space: nowrap;
        overflow-wrap: normal;
    }
}

@media (max-width: 760px) {
    .ui-workspace-header { gap: var(--ui-space-3); }
    .ui-workspace-header > .ui-tabs { overflow-x: auto; }
}

/* R3B-G2 — file intake có nguồn bổ sung, dùng chung cho các module. */
.ui-file-intake-additional {
    display: grid;
    gap: var(--ui-space-3);
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.ui-file-intake-additional .ui-field {
    display: grid;
    gap: 6px;
    padding: 12px;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-md);
    background: var(--ui-neutral-soft);
}

.ui-file-intake-additional .ui-field > span { font-weight: 750; }
.ui-file-intake-additional .ui-field > small { color: var(--ui-text-muted); }
.ui-file-intake-additional input[type="file"] {
    width: 100%;
    min-height: 42px;
    padding: 8px;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-sm);
    background: #fff;
}

/* R3B-G3 — primitives chuẩn hóa từ các màn xử lý lương, dùng chung cho mọi module. */
.ui-section-header__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--ui-space-2);
    flex-wrap: wrap;
}

.ui-form-grid {
    display: grid;
    grid-template-columns: repeat(var(--ui-form-columns, 2), minmax(0, 1fr));
    gap: var(--ui-space-4);
}
.ui-form-grid--3 { --ui-form-columns: 3; }
.ui-form-grid--4 { --ui-form-columns: 4; }
.ui-form-grid--5 { --ui-form-columns: 5; }
.ui-form-grid > label,
.ui-field {
    display: grid;
    gap: 7px;
    min-width: 0;
    color: var(--ui-text-strong);
    font-weight: 800;
}
/* Form/editor hierarchy modifier: labels recede, entered values remain the visual focus. */
.ui-form-labels--muted .ui-form-grid > label:not(.ui-check),
.ui-form-labels--muted .ui-field {
    color: var(--ui-text-muted);
    font-weight: 700;
}
.ui-form-labels--muted .ui-field > .ui-field__label,
.ui-form-labels--muted .ui-toolbar-field > .ui-toolbar-field__label {
    color: var(--ui-text-muted);
    font-weight: 700;
}
.ui-form-labels--muted .ui-form-grid > label:not(.ui-check) > :is(input, select, textarea):not(:disabled),
.ui-form-labels--muted .ui-field :is(input, select, textarea):not(:disabled),
.ui-form-labels--muted .ui-toolbar-field :is(input, select, textarea):not(:disabled) {
    color: var(--ui-text-strong);
    font-weight: 800;
}
.ui-form-labels--muted .ui-form-grid > label:not(.ui-check) > :is(.ui-help, small),
.ui-form-labels--muted .ui-field :is(.ui-help, small) {
    color: var(--ui-text-muted);
    font-weight: 600;
}
.ui-form-grid input,
.ui-form-grid select,
.ui-form-grid textarea,
.ui-field input,
.ui-field select,
.ui-field textarea,
.ui-inline-form input,
.ui-inline-form select {
    width: 100%;
    min-height: var(--ui-control-height);
    border: 1px solid var(--ui-border-strong);
    border-radius: var(--ui-radius-sm);
    padding: 9px 11px;
    background: var(--ui-surface);
    color: var(--ui-text-strong);
    font: inherit;
}
.ui-form-grid textarea,
.ui-field textarea { resize: vertical; }
.ui-form-grid input:focus,
.ui-form-grid select:focus,
.ui-form-grid textarea:focus,
.ui-field input:focus,
.ui-field select:focus,
.ui-field textarea:focus,
.ui-inline-form input:focus,
.ui-inline-form select:focus {
    outline: none;
    border-color: var(--ui-primary);
    box-shadow: var(--ui-focus-ring);
}
.ui-form-grid input:disabled,
.ui-form-grid select:disabled,
.ui-form-grid textarea:disabled,
.ui-field input:disabled,
.ui-field select:disabled,
.ui-field textarea:disabled {
    background: var(--ui-neutral-soft);
    color: var(--ui-text-muted);
}
.ui-field--span-2 { grid-column: span 2; }
.ui-field-group {
    min-width: 0;
    margin: 0;
    padding: var(--ui-space-4);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-md);
    background: var(--ui-surface-soft);
}
.ui-field-group legend {
    padding: 0 7px;
    color: var(--ui-text-strong);
    font-weight: 900;
}
.ui-check-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}
.ui-check {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    font-weight: 700;
}
.ui-check input[type="checkbox"],
.ui-check input[type="radio"] {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    min-height: 20px;
    margin: 0;
    accent-color: var(--ui-primary);
    cursor: pointer;
}
.ui-check > span {
    min-width: 0;
    line-height: 1.4;
}
.ui-check:has(input:focus-visible) {
    outline: none;
    box-shadow: var(--ui-focus-ring);
}

.ui-switch-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 11px;
    padding: var(--ui-space-4);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-md);
    background: var(--ui-surface-soft);
    cursor: pointer;
}
.ui-switch-card:has(input:checked) {
    border-color: #9dbcf4;
    background: var(--ui-primary-soft);
}
.ui-switch-card input { width: 20px; height: 20px; margin-top: 2px; }
.ui-switch-card strong,
.ui-switch-card small { display: block; }
.ui-switch-card small { margin-top: 4px; color: var(--ui-text-muted); line-height: 1.45; font-weight: 600; }
.ui-switch-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--ui-space-3);
}

.ui-inline-form {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--ui-space-2);
    flex-wrap: wrap;
}
.ui-inline-form input { min-width: 240px; }

.ui-pager__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border: 1px solid var(--ui-border);
    border-radius: 10px;
    background: var(--ui-surface);
    color: var(--ui-text-strong);
    text-decoration: none;
    font-weight: 850;
}
.ui-pager__item:hover { border-color: #8faef0; background: var(--ui-primary-soft); }
.ui-pager__item.is-active { border-color: var(--ui-primary); background: var(--ui-primary); color: #fff; }
.ui-pager__item.is-disabled { opacity: .52; cursor: not-allowed; }
button.ui-pager__item { font: inherit; cursor: pointer; }

.ui-record-card__summary {
    display: grid;
    grid-template-columns: minmax(190px, 1.25fr) repeat(4, minmax(100px, .7fr));
    gap: var(--ui-space-3);
    align-items: center;
    padding: var(--ui-space-4);
}
.ui-record-card__identity strong,
.ui-record-card__identity small,
.ui-record-card__metric small,
.ui-record-card__metric strong { display: block; }
.ui-record-card__identity small,
.ui-record-card__metric small { color: var(--ui-text-muted); }
.ui-record-card__metric strong { margin-top: 4px; color: var(--ui-text-strong); }
.ui-record-card__content { padding: var(--ui-space-4); }
.ui-record-card--warning { background: var(--ui-warning-soft); }
.ui-record-card--danger { background: var(--ui-danger-soft); }

.ui-money { text-align: right !important; font-variant-numeric: tabular-nums; white-space: nowrap; }

.js-money-input,
.js-decimal-input {
    font-variant-numeric: tabular-nums;
}

.ui-table .js-money-input,
.ui-table .js-decimal-input {
    text-align: right;
}
.ui-note { margin: 0; color: var(--ui-text-muted); line-height: 1.5; }
.ui-note strong { color: var(--ui-text-strong); }
.ui-stack { display: grid; gap: var(--ui-space-4); }

/* Stack là owner duy nhất của nhịp dọc. Banner giữ margin legacy khi đứng độc lập,
   nhưng không được cộng thêm margin khi đã là phần tử trực tiếp của một stack. */
.ui-stack > .ui-status-banner { margin-block: 0; }
.ui-grid-2, .ui-grid-3, .ui-grid-4 { display: grid; gap: var(--ui-space-4); }
.ui-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ui-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ui-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1180px) {
    .ui-form-grid--5 { --ui-form-columns: 3; }
    .ui-kpi-grid--5 { --ui-kpi-columns: 3; }
}
@media (max-width: 980px) {
    .ui-form-grid--3, .ui-form-grid--4, .ui-form-grid--5, .ui-switch-grid, .ui-grid-3, .ui-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ui-record-card__summary { grid-template-columns: minmax(180px, 1fr) repeat(2, minmax(100px, .7fr)); }
    .ui-record-card__summary > :nth-child(n+4) { display: none; }
}
@media (max-width: 720px) {
    .ui-form-grid, .ui-form-grid--3, .ui-form-grid--4, .ui-form-grid--5,
    .ui-switch-grid, .ui-check-grid, .ui-grid-2, .ui-grid-3, .ui-grid-4 { grid-template-columns: 1fr; }
    .ui-field--span-2 { grid-column: auto; }
    .ui-section-header { flex-direction: column; }
    .ui-section-header__actions { width: 100%; justify-content: stretch; }
    .ui-section-header__actions .button { flex: 1 1 auto; }
    .ui-inline-form { align-items: stretch; flex-direction: column; }
    .ui-inline-form input, .ui-inline-form .button { width: 100%; min-width: 0; }
    .ui-record-card__summary { grid-template-columns: 1fr 1fr; }
    .ui-record-card__summary > :nth-child(n+3) { display: none; }
}

/* R3B-G3 — hoàn thiện control/table/action dùng chung cho các màn xử lý dữ liệu. */
.ui-table input,
.ui-table select,
.ui-table textarea {
    width: 100%;
    min-width: 92px;
    min-height: 38px;
    border: 1px solid var(--ui-border-strong);
    border-radius: var(--ui-radius-sm);
    padding: 7px 9px;
    background: var(--ui-surface);
    color: var(--ui-text-strong);
    font: inherit;
}
.ui-table textarea { resize: vertical; }
.ui-table input:focus,
.ui-table select:focus,
.ui-table textarea:focus {
    outline: none;
    border-color: var(--ui-primary);
    box-shadow: var(--ui-focus-ring);
}
.ui-table input:disabled,
.ui-table select:disabled,
.ui-table textarea:disabled,
.ui-table input[readonly] {
    background: var(--ui-neutral-soft);
    color: var(--ui-text-muted);
}
.ui-table .ui-check input { min-width: 0; width: auto; }

/* HF13 — hierarchy chuẩn cho bảng có thể chỉnh sửa. */
.ui-table--editable thead th {
    color: var(--ui-text-strong);
    font-size: 13px;
    font-weight: 950;
    letter-spacing: .01em;
}
.ui-table--editable tbody td {
    vertical-align: middle;
}
.ui-table--editable input,
.ui-table--editable select {
    min-height: 40px;
    font-size: 14px;
    font-weight: 750;
}
.ui-table--editable input[type="number"] {
    color: var(--ui-text-strong);
    font-variant-numeric: tabular-nums;
    font-weight: 850;
}
.ui-table--editable tbody tr:focus-within td {
    background: #f7faff;
}
.ui-table--editable .ui-table-heading--primary,
.ui-table--editable .ui-table-cell--primary {
    min-width: 190px;
}
.ui-table--editable .ui-table-heading--money,
.ui-table--editable .ui-table-cell--money {
    background: #f5f8ff;
}
.ui-table--editable .ui-table-cell--money input {
    color: #0b3f99;
    font-weight: 950;
}
.ui-table--editable .ui-table-heading--action,
.ui-table--editable .ui-table-cell--action {
    width: 92px;
    text-align: center;
}
.ui-table--editable .ui-table-cell--action .button {
    min-width: 0;
}

/* Tab nhân viên co theo nội dung trước; chỉ cuộn khi đã chạm ngưỡng tối thiểu. */
.ui-employee-tabs .ui-tabs--compact .ui-tab {
    flex: 1 1 112px;
    min-width: 112px;
    max-width: none;
}
.ui-employee-tabs .ui-tab strong,
.ui-employee-tabs .ui-tab small {
    white-space: normal;
    overflow-wrap: anywhere;
}
.ui-employee-tabs .ui-tab__status {
    white-space: nowrap;
}

.ui-switch-card--confirm {
    border-color: #9dbcf4;
    background: linear-gradient(135deg, var(--ui-primary-soft), var(--ui-surface));
}
.is-salary-disabled [data-hour-deduct-salary] + span { opacity: .56; }

.ui-row-action { position: relative; }
.ui-row-action > summary {
    width: max-content;
    cursor: pointer;
    color: var(--ui-primary-strong);
    font-weight: 850;
    list-style: none;
}
.ui-row-action > summary::-webkit-details-marker { display: none; }
.ui-row-action[open] {
    min-width: 260px;
    padding: 10px;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-md);
    background: var(--ui-surface);
    box-shadow: var(--ui-shadow-sm);
}
.ui-row-action .ui-inline-form {
    margin-top: 9px;
    align-items: stretch;
    flex-direction: column;
}
.ui-row-action .ui-inline-form input,
.ui-row-action .ui-inline-form .button { width: 100%; min-width: 0; }

tr.soft-neutral-row > td { background: var(--ui-neutral-soft) !important; color: var(--ui-text-muted); }
tr.soft-danger-row > td { background: var(--ui-danger-soft) !important; }
.ui-save-bar > span:first-child { margin-right: auto; }

@media (max-width: 720px) {
    .ui-save-bar { align-items: stretch; flex-direction: column; }
    .ui-save-bar > span:first-child { margin-right: 0; }
    .ui-save-bar .ui-action-bar__actions,
    .ui-save-bar .button { width: 100%; }
    .ui-save-bar .ui-action-bar__actions { flex-direction: column; }
}

/* Global Payroll Report Workspace — dùng chung cho màn báo cáo kỳ lương. */
.ui-payroll-report-workspace {
    position: sticky;
    top: 8px;
    z-index: 5;
    display: grid;
    gap: var(--ui-space-3);
    padding: var(--ui-space-4);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    background: rgba(255, 255, 255, .96);
    box-shadow: var(--ui-shadow-card);
    backdrop-filter: blur(12px);
}

.ui-payroll-report-workspace__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--ui-space-4);
}

.ui-payroll-report-workspace__header h2 {
    margin: 3px 0 5px;
    color: var(--ui-text-strong);
    font-size: clamp(20px, 2vw, 27px);
    line-height: 1.15;
}

.ui-payroll-report-workspace__header p {
    max-width: 760px;
    margin: 0;
    color: var(--ui-text-muted);
    line-height: 1.45;
}

.ui-payroll-report-workspace__actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--ui-space-2);
    flex-wrap: wrap;
}

.ui-payroll-report-tabs {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 8px;
}

.ui-payroll-report-tab {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 9px;
    align-items: center;
    min-width: 0;
    min-height: 54px;
    padding: 8px 10px;
    border: 1px solid var(--ui-border);
    border-radius: 12px;
    background: var(--ui-surface-soft);
    color: var(--ui-text-strong);
    text-align: left;
    cursor: pointer;
    transition: border-color var(--ui-transition-fast), background-color var(--ui-transition-fast), transform var(--ui-transition-fast), box-shadow var(--ui-transition-fast);
}

.ui-payroll-report-tab:hover {
    border-color: #9bb5ea;
    background: #f3f7ff;
    transform: translateY(-1px);
}

.ui-payroll-report-tab.is-active {
    border-color: var(--ui-primary);
    background: var(--ui-primary-soft);
    box-shadow: inset 0 -3px 0 var(--ui-primary), 0 5px 14px rgba(37, 99, 235, .12);
}

.ui-payroll-report-tab__number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    color: var(--ui-primary-strong);
    background: #fff;
    border: 1px solid #cbdafb;
    font-size: 13px;
    font-weight: 950;
    font-variant-numeric: tabular-nums;
}

.ui-payroll-report-tab.is-active .ui-payroll-report-tab__number {
    color: #fff;
    background: var(--ui-primary);
    border-color: var(--ui-primary);
}

.ui-payroll-report-tab__copy {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.ui-payroll-report-tab__copy strong {
    overflow: hidden;
    color: inherit;
    font-size: 12px;
    line-height: 1.25;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-payroll-report-tab__copy .ui-badge {
    justify-self: start;
    max-width: 100%;
    padding: 3px 7px;
    font-size: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-payroll-report-select-label,
.ui-payroll-report-select {
    display: none;
}

.ui-payroll-report-panels {
    display: grid;
    gap: var(--ui-space-4);
}

.ui-payroll-report-panel {
    scroll-margin-top: 230px;
}

.ui-payroll-report-panel:not(.is-active):not(.is-report-visible),
.ui-payroll-report-panel[hidden] {
    display: none;
}

.ui-payroll-report-panel.is-report-visible {
    display: grid;
}

.ui-payroll-report-panel .ui-section-header {
    break-after: avoid;
}

.ui-payroll-report-panel .ui-data-shell:last-child {
    margin-bottom: 0;
}

.ui-report-zero-note {
    margin: 0;
    padding: 10px 12px;
    border: 1px dashed var(--ui-border);
    border-radius: var(--ui-radius-sm);
    color: var(--ui-text-muted);
    background: var(--ui-surface-soft);
    font-size: 13px;
}

@media (max-width: 1180px) {
    .ui-payroll-report-workspace {
        position: static;
    }

    .ui-payroll-report-tabs {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .ui-payroll-report-workspace {
        padding: var(--ui-space-3);
    }

    .ui-payroll-report-workspace__header {
        display: grid;
    }

    .ui-payroll-report-workspace__actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .ui-payroll-report-workspace__actions .button {
        width: 100%;
    }

    .ui-payroll-report-tabs {
        display: none;
    }

    .ui-payroll-report-select-label {
        display: block;
        color: var(--ui-text-muted);
        font-size: 12px;
        font-weight: 850;
    }

    .ui-payroll-report-select {
        display: block;
        width: 100%;
        min-height: 46px;
        border: 1px solid var(--ui-border-strong, #b8c4d6);
        border-radius: 12px;
        padding: 0 12px;
        color: var(--ui-text-strong);
        background: #fff;
        font: inherit;
        font-weight: 800;
    }

    .ui-payroll-report-panel {
        scroll-margin-top: 20px;
    }
}

@media print {
    body.is-payroll-report-printing .topbar,
    body.is-payroll-report-printing .ui-workspace-header,
    body.is-payroll-report-printing .ui-kpi-grid,
    body.is-payroll-report-printing .ui-status-banner.no-print,
    body.is-payroll-report-printing .no-print,
    body.is-payroll-report-printing .ui-action-bar.no-print {
        display: none !important;
    }

    body.is-payroll-report-printing,
    body.is-payroll-report-printing main.page,
    body.is-payroll-report-printing .ui-page {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #fff !important;
    }

    body.is-payroll-report-printing .ui-payroll-report-panels {
        display: block !important;
    }

    body.is-payroll-report-printing .ui-payroll-report-panel {
        display: none !important;
        width: 100% !important;
        margin: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        break-inside: auto;
    }

    body.is-payroll-report-printing .ui-payroll-report-panel.is-print-target {
        display: block !important;
    }

    body.is-payroll-report-print-all .ui-payroll-report-panel.is-print-target {
        break-before: page;
    }

    body.is-payroll-report-print-all .ui-payroll-report-panel.is-print-target:first-child {
        break-before: auto;
    }

    body.is-payroll-report-printing .ui-table thead th {
        position: static;
    }

    body.is-payroll-report-printing .ui-data-scroll {
        overflow: visible !important;
        border: 0;
    }

    body.is-payroll-report-printing .ui-table {
        font-size: 10.5px;
    }

    body.is-payroll-report-printing .ui-table th,
    body.is-payroll-report-printing .ui-table td {
        padding: 6px 7px;
    }

    body.is-payroll-report-printing .ui-record-card,
    body.is-payroll-report-printing .ui-table tr {
        break-inside: avoid;
    }
}

.ui-help-text{color:#64748b;font-size:.88rem;line-height:1.45}

/* R3C-B — Global Payroll Input Workspace V3 */
.payroll-input-workspace {
    margin-top: 1rem;
    padding: 1.4rem 1.5rem 1.55rem;
    overflow: visible;
}
.payroll-input-workspace__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: .2rem .25rem 1rem;
}
.payroll-input-workspace__header h2 {
    margin: .18rem 0 .35rem;
    line-height: 1.2;
}
.payroll-input-workspace__header p {
    margin: 0;
    max-width: 900px;
    line-height: 1.55;
}
.payroll-input-picker {
    display: grid;
    gap: .85rem;
    padding-inline: .2rem;
}
.payroll-input-picker__note {
    margin: 0 .25rem .15rem;
    padding-inline: .15rem;
}
.payroll-input-dropzone {
    min-height: 150px;
    border: 2px dashed #a9c4ff;
    border-radius: 18px;
    background: linear-gradient(180deg, #f8fbff, #f3f7ff);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .42rem;
    padding: 1.55rem 1.5rem;
    text-align: center;
    cursor: pointer;
    line-height: 1.45;
}
.payroll-input-dropzone:hover,
.payroll-input-dropzone:focus-within {
    border-color: var(--ui-primary);
    background: #eef4ff;
}
.payroll-input-dropzone input,
.payroll-source-card .ui-file-input {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    opacity: 0;
    pointer-events: none;
}
.payroll-input-dropzone__icon {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: 16px;
    background: #e7efff;
    color: var(--ui-primary);
    font-size: 1.65rem;
    font-weight: 900;
}
.payroll-input-picker__actions {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
}
.payroll-recognition-warning {
    margin-top: .85rem;
}
.payroll-source-cards {
    display: grid;
    gap: 1rem;
    margin-top: 1.2rem;
    padding-inline: .2rem;
    align-items: stretch;
}
.payroll-source-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.payroll-source-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.payroll-source-card {
    min-width: 0;
    min-height: 248px;
    display: flex;
    flex-direction: column;
    border: 1px solid #d9e2f2;
    border-radius: 18px;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 7px 20px rgba(34, 59, 104, .04);
}
.payroll-source-card.is-active {
    border-color: var(--ui-primary);
    box-shadow: 0 0 0 3px rgba(47,109,246,.10), 0 9px 24px rgba(47,109,246,.08);
}
.payroll-source-card.has-warning {
    border-color: #f5b942;
}
.payroll-source-card__main {
    position: relative;
    flex: 1;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-content: start;
    gap: .55rem .65rem;
    padding: 1.3rem 1.25rem 1.15rem;
    color: inherit;
    text-decoration: none;
    min-width: 0;
}
.payroll-source-card__slot {
    color: var(--ui-primary);
    font-size: .84rem;
    font-weight: 900;
    align-self: center;
}
.payroll-source-card__title {
    min-width: 0;
    font-size: 1rem;
    font-weight: 900;
    line-height: 1.25;
    overflow-wrap: anywhere;
}
.payroll-source-card__main > .ui-badge {
    align-self: start;
    justify-self: end;
    min-height: 30px;
    max-width: 145px;
    white-space: normal;
    text-align: center;
    line-height: 1.2;
}
.payroll-source-card__files,
.payroll-source-card__recognition,
.payroll-source-card__evidence,
.payroll-source-card__existing,
.payroll-source-card__empty,
.payroll-source-card__main > small {
    grid-column: 1 / -1;
}
.payroll-source-card__files {
    display: grid;
    gap: .38rem;
    margin-top: .15rem;
}
.payroll-source-file {
    display: flex;
    align-items: center;
    gap: .35rem;
    min-width: 0;
    flex-wrap: wrap;
}
.payroll-source-file strong,
.payroll-source-card__existing {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.payroll-source-file strong { flex: 1 1 120px; }
.payroll-source-card__recognition {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    color: #53627a;
    line-height: 1.4;
}
.payroll-source-card__evidence {
    display: block;
    padding: .36rem .55rem;
    border-radius: 10px;
    background: #eef3ff;
    color: #2f4f8e;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .78rem;
}
.payroll-source-card__empty {
    align-self: center;
    justify-self: stretch;
    padding: 1.2rem .2rem;
    text-align: center;
    color: #718096;
    line-height: 1.45;
}
.payroll-source-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    padding: 1rem 1.2rem;
    border-top: 1px solid #e5ebf5;
    background: #fbfcff;
}
.payroll-source-card__actions-left,
.payroll-source-card__actions-right {
    display: flex;
    align-items: center;
    gap: .4rem;
    min-width: 0;
}
.payroll-source-card__actions-left form,
.payroll-source-card__actions-right form {
    margin: 0;
}
.payroll-source-card__footer .button {
    min-height: 36px;
    white-space: nowrap;
}
.payroll-analysis-launcher {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .75rem;
    margin-top: 1.05rem;
    padding: 1rem .2rem .1rem;
    border-top: 1px solid #e1e8f3;
}
.payroll-analysis-launcher__form {
    display: flex;
    align-items: center;
    gap: .7rem;
    flex-wrap: wrap;
}
.payroll-preview-tabs {
    overflow: hidden;
    padding: 0 1.5rem 1.5rem;
}
.payroll-analysis-tabs {
    margin: 0 -1.5rem 1.1rem;
    padding: .95rem 1.5rem 0;
    border-bottom: 1px solid #dbe5f3;
    background: #f8fbff;
}
.payroll-analysis-tabs .ui-tab {
    min-width: 150px;
    display: grid;
    gap: .12rem;
}
.payroll-analysis-tabs .ui-tab small {
    color: #6b7890;
    font-weight: 600;
}
.payroll-analysis-header {
    align-items: flex-start;
    gap: 1rem;
    padding: 1.15rem .25rem 1rem;
}
.payroll-analysis-header .ui-actions {
    justify-content: flex-end;
    margin: 0;
}
.payroll-analysis-secondary-actions {
    margin-top: .9rem;
    padding: .9rem .1rem .05rem;
    border-top: 1px solid #e4eaf3;
}
@media (max-width: 900px) {
    .payroll-source-cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
    .payroll-source-cards--3,
    .payroll-source-cards--4 { grid-template-columns: 1fr; }
    .payroll-source-card { min-height: auto; }
    .payroll-analysis-launcher,
    .payroll-analysis-header { align-items: stretch; flex-direction: column; }
    .payroll-analysis-header .ui-actions { justify-content: flex-start; }
}
@media (max-width: 620px) {
    .payroll-input-workspace__header { display: block; }
    .payroll-input-dropzone { min-height: 130px; padding: 1.1rem .8rem; }
    .payroll-source-card__main { grid-template-columns: auto minmax(0, 1fr); }
    .payroll-source-card__main > .ui-badge { grid-column: 1 / -1; justify-self: start; max-width: 100%; }
    .payroll-source-card__footer { align-items: stretch; flex-direction: column; }
    .payroll-source-card__actions-right { justify-content: flex-end; }
    .payroll-preview-filterbar .filter-search,
    .ui-data-table-filterbar .filter-search { width: 100%; max-width: none; }
}

/* R3C-B-HF3: shared payroll employee workspace and compact analysis */
.payroll-source-card__analyze {
    padding: 0 1rem .8rem;
}
.payroll-source-card__analyze .button { width: 100%; justify-content: center; }
.payroll-analysis-header {
    gap: .85rem;
    align-items: center;
    padding-block: .9rem;
}
.payroll-analysis-header__copy { min-width: 0; }
.payroll-analysis-header__copy h2 { margin: 0; font-size: 1.12rem; }
.payroll-analysis-header__copy p { margin: .2rem 0 0; color: var(--ui-text-muted); }
.payroll-analysis-header__badge { flex: 0 0 auto; }
[data-payroll-analysis-panel] { scroll-margin-top: 1rem; }
/* Global compact/scroll tabs — dùng chung cho tab nhân viên, kiểm duyệt và các workspace dài. */
.ui-tabs--scroll {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    scroll-snap-type: x proximity;
}
.ui-tabs--scroll .ui-tab { flex: 0 0 auto; scroll-snap-align: start; }
.ui-tabs--compact { padding-top: 8px; }
.ui-tabs--compact .ui-tab {
    min-width: 150px;
    min-height: 72px;
    max-width: 210px;
    padding: 9px 12px 11px;
}
.ui-tab__status {
    color: var(--ui-text-muted);
    font-size: .82rem;
    font-weight: 800;
    line-height: 1.15;
}
.ui-tab--success .ui-tab__status { color: var(--ui-success); }
.ui-tab--warning .ui-tab__status { color: var(--ui-warning-strong, #a15c00); }
.ui-tab--danger .ui-tab__status { color: var(--ui-danger); }
.ui-employee-tabs { margin: .25rem 0 1rem; }
.ui-tabs-select { display: none; gap: .35rem; padding: .75rem; }
.ui-tabs-select > span { color: var(--ui-text-muted); font-weight: 800; }
.ui-tabs-select select { width: 100%; min-height: 44px; }
.ui-data-table-page-size select { min-height: 36px; min-width: 118px; }

.payroll-partial-summary { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; }
.payroll-partial-summary .ui-badge { white-space: nowrap; }
@media (max-width: 760px) {
    .ui-employee-tabs > .ui-tabs { display: none; }
    .ui-employee-tabs > .ui-tabs-select { display: grid; }
    .payroll-analysis-header { align-items: stretch; }
}

/* R3C-B-HF3 / HF36: partial import states and action hierarchy */
.payroll-analysis-header--action-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, auto);
    align-items: center;
    gap: clamp(18px, 2.4vw, 34px);
}
.payroll-analysis-header--action-grid > .payroll-analysis-header__copy {
    align-self: center;
}
.payroll-analysis-header--action-grid > .payroll-analysis-action-panel,
.payroll-analysis-header--action-grid > .payroll-analysis-primary-actions {
    min-width: 0;
    justify-self: end;
}
.payroll-analysis-header--action-grid > .payroll-analysis-primary-actions {
    justify-content: flex-end;
    margin: 0;
}
.payroll-analysis-action-panel {
    width: min(100%, 720px);
    min-width: 0;
    max-width: 720px;
    margin: 0;
    display: grid;
    justify-items: end;
    gap: .65rem;
}
.payroll-analysis-action-panel__condition {
    width: min(100%, 520px);
    display: flex;
    justify-content: flex-end;
}
.payroll-analysis-action-panel__buttons {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .65rem;
    flex-wrap: wrap;
}
.payroll-partial-apply-form { margin: 0; }
.payroll-confirm-difference {
    width: 100%;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: .6rem;
    padding: .65rem .8rem;
    border: 1px solid #f3c56d;
    border-radius: 12px;
    background: #fff8e8;
    color: #7b4a00;
    font-size: .84rem;
    font-weight: 750;
    line-height: 1.35;
}
.payroll-confirm-difference input { flex: 0 0 auto; margin: 0; }
.payroll-partial-summary {
    margin: .7rem 0 .9rem;
    padding: .75rem .85rem;
    border: 1px solid var(--ui-border);
    border-radius: 14px;
    background: #f8fbff;
}
.payroll-partial-summary__apply {
    margin-left: auto;
    color: var(--ui-primary);
    font-size: .86rem;
}
.payroll-row-state { min-width: 92px; justify-content: center; }
.payroll-row-state--moi { color: #075ec9; background: #eaf3ff; border-color: #b9d5ff; }
.payroll-row-state--khongthaydoi { color: #4c5a70; background: #f1f4f8; border-color: #d9e0e9; }
.payroll-row-state--cochenhlech { color: #8a4d00; background: #fff4d9; border-color: #f2c96d; }
.payroll-row-state--loi { color: #ad2020; background: #fff0f0; border-color: #f3b3b3; }
.payroll-row-state--daapdung { color: #08753f; background: #eafaf1; border-color: #a9e3c1; }
@media (max-width: 900px) {
    .payroll-analysis-header--action-grid {
        grid-template-columns: 1fr;
        align-items: stretch;
    }
    .payroll-analysis-header--action-grid > .payroll-analysis-action-panel,
    .payroll-analysis-header--action-grid > .payroll-analysis-primary-actions {
        width: 100%;
        max-width: none;
        justify-self: stretch;
    }
    .payroll-analysis-header--action-grid > .payroll-analysis-primary-actions,
    .payroll-analysis-action-panel__buttons { justify-content: flex-start; }
    .payroll-analysis-action-panel {
        width: 100%;
        min-width: 0;
        max-width: none;
        justify-items: stretch;
    }
    .payroll-analysis-action-panel__condition { width: 100%; }
}
@media (max-width: 620px) {
    .payroll-analysis-action-panel__buttons {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
    }
    .payroll-analysis-action-panel__buttons .button {
        width: 100%;
        justify-content: center;
    }
    .payroll-partial-summary__apply { width: 100%; margin-left: 0; }
}


/* HF36-HF1: make import preview rows scannable without changing source data. */
.payroll-import-preview-table tbody tr {
    --payroll-import-accent: #cbd5e1;
    --payroll-import-row-bg: transparent;
}
.payroll-import-preview-table tbody tr > td {
    background: var(--payroll-import-row-bg);
}
.payroll-import-preview-table tbody tr > td:first-child {
    box-shadow: inset 4px 0 0 var(--payroll-import-accent);
}
.payroll-import-row--moi {
    --payroll-import-accent: #4f83ed;
    --payroll-import-row-bg: #f8fbff;
}
.payroll-import-row--khongthaydoi {
    --payroll-import-accent: #a8b3c2;
    --payroll-import-row-bg: #f8fafc;
    color: #5f6c7e;
}
.payroll-import-row--cochenhlech {
    --payroll-import-accent: #e39a22;
    --payroll-import-row-bg: #fffaf0;
}
.payroll-import-row--loi {
    --payroll-import-accent: #df5b5b;
    --payroll-import-row-bg: #fff7f7;
}
.payroll-import-row--daapdung {
    --payroll-import-accent: #2aa66a;
    --payroll-import-row-bg: #f4fcf7;
}
.payroll-import-row__index {
    color: var(--ui-text-muted);
    font-weight: 800;
}
.payroll-import-shop strong {
    color: var(--ui-text-strong);
    font-size: .96rem;
}
.payroll-import-grade {
    display: inline-grid;
    gap: 2px;
    min-width: 82px;
    padding: 6px 9px;
    border: 1px solid #cbd9ef;
    border-radius: 10px;
    background: #f4f8ff;
}
.payroll-import-grade strong {
    color: #244d93;
    line-height: 1.1;
}
.payroll-import-grade small {
    color: var(--ui-text-muted);
    font-size: .76rem;
    font-weight: 750;
}
.payroll-import-people {
    display: inline-flex;
    max-width: 100%;
    padding: 6px 9px;
    border: 1px solid;
    border-radius: 999px;
    font-size: .84rem;
    font-weight: 750;
    line-height: 1.3;
    white-space: normal;
}
.payroll-import-people--direct {
    color: #174e9b;
    border-color: #b9d3fb;
    background: #edf5ff;
}
.payroll-import-people--support {
    color: #17663f;
    border-color: #b7dfc9;
    background: #eefaf3;
}
.payroll-import-guidance {
    min-width: 210px;
}
.payroll-import-note {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 750;
    line-height: 1.4;
}
.payroll-import-note::before {
    content: "";
    flex: 0 0 8px;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: currentColor;
}
.payroll-import-note--ready { color: #1764bd; }
.payroll-import-note--muted { color: #68768a; }
.payroll-import-note--warning { color: #9a5a00; }
.payroll-import-note--error { color: #b02a2a; }
.payroll-import-note--success { color: #08743d; }


/* R3C-B-HF4A: data table toolbar, sorting and refined attendance summary */
.ui-data-table-toolbar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin: .95rem 0 0;
    padding: .8rem 1rem;
    border: 1px solid var(--ui-border);
    border-bottom: 0;
    border-radius: 14px 14px 0 0;
    background: var(--ui-surface-soft, #f8faff);
}
.ui-data-table-toolbar__filter {
    flex: 1 1 280px;
    max-width: 420px;
    margin: 0;
}
.ui-data-table-toolbar .ui-pager {
    flex: 1 1 auto;
    justify-content: flex-end;
    padding: 0;
}
.ui-data-table-toolbar + .ui-data-scroll,
.ui-data-table-toolbar + .table-responsive,
.payroll-preview-filterbar + .ui-data-table-toolbar { border-top: 0; }
.ui-pager--embedded { border: 0; }

/* Global paged data shell: pager trên, table và pager dưới dùng chung một khung. */
.ui-data-shell--paged {
    margin: 0;
    border: 1px solid var(--ui-border);
    border-radius: 14px;
    background: var(--ui-surface);
    overflow: hidden;
}

.ui-data-shell--paged > .ui-data-table-toolbar {
    margin: 0;
    border: 0;
    border-bottom: 1px solid var(--ui-border);
    border-radius: 0;
}

.ui-data-shell--paged > .ui-data-scroll {
    border: 0;
    scrollbar-gutter: auto;
}
.ui-data-shell--paged > .ui-collection-list {
    min-width: 0;
    padding: 12px;
    border-top: 1px solid var(--ui-border);
    background: var(--ui-surface);
}
.ui-paged-collection > .ui-status-banner {
    margin: 10px 12px 0;
}

.ui-data-shell--paged > .ui-pager {
    margin: 0;
    padding: 10px 16px 12px;
    border-top: 1px solid var(--ui-border);
    background: var(--ui-surface);
}

.ui-data-shell--paged > .ui-data-table-toolbar .ui-pager {
    padding: 0;
}
.ui-table th.is-sortable { padding-block: 9px; }
.ui-table-sort {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: inherit;
    text-align: inherit;
    cursor: pointer;
}
.ui-table-sort__label { min-width: 0; }
.ui-table-sort__icon {
    flex: 0 0 auto;
    color: #5d6b84;
    font-size: .95em;
    font-weight: 900;
}
.ui-table th.is-sorted .ui-table-sort__icon,
.ui-table th.is-sortable:hover .ui-table-sort__icon { color: var(--ui-primary); }
@media (max-width: 760px) {
    .ui-data-table-toolbar { align-items: stretch; }
    .ui-data-table-toolbar__filter,
    .ui-data-table-toolbar .ui-pager { flex-basis: 100%; max-width: none; }
    .ui-data-table-toolbar .ui-pager { justify-content: flex-start; }
}

/* R3C-B-HF5: màn đi mẫu V4.4; hero chấm công đã chuyển sang module3-gach.css từ HF26. */
.ui-kpi-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 720px) {
    .ui-kpi-grid--3 { grid-template-columns: 1fr; }
}

/* R4B-P0C: bảng chung nhớ trạng thái riêng + tổng quan chấm công Module 3 */
.ui-table-cell--primary {
    color: var(--ui-text-strong);
    font-weight: 850;
}
.ui-table-cell--primary small {
    display: block;
    margin-top: 3px;
    color: var(--ui-text-muted);
    font-size: 12px;
    font-weight: 700;
}
.ui-table-cell--metric {
    color: var(--ui-text-strong);
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}
.ui-table-cell--important { font-weight: 750; }
.ui-table tfoot th,
.ui-table tfoot td,
.ui-table-row--total th,
.ui-table-row--total td {
    color: var(--ui-text-strong);
    background: #f1f5ff;
    font-weight: 900;
}
.ui-empty-cell {
    padding: 22px 18px !important;
    color: var(--ui-text-muted);
    font-weight: 750;
    text-align: center;
}
.payroll-warning-summary { max-height: none; }
.payroll-warning-summary details { margin-top: 10px; }
.payroll-warning-summary summary {
    width: fit-content;
    cursor: pointer;
    color: var(--ui-text-strong);
    font-weight: 850;
}
.payroll-warning-summary details > div {
    max-height: 340px;
    margin-top: 8px;
    padding: 10px 12px;
    overflow: auto;
    border: 1px solid #f4cf8c;
    border-radius: 10px;
    background: var(--ui-warning-soft);
}

/* R4B-P0C-HF2: explicit confirmation before applying reviewed source data */
.ui-apply-action-panel {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--ui-border);
}

.ui-apply-confirmation {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .85rem;
    align-items: start;
    padding: 1rem 1.05rem;
    border: 1px solid #efc46a;
    border-radius: 16px;
    background: #fff9e9;
    color: #643d00;
    box-shadow: 0 8px 22px rgba(118, 75, 0, .08);
}

.ui-apply-confirmation--danger {
    border-color: #efaaaa;
    background: #fff2f2;
    color: #8f2020;
}

.ui-apply-confirmation__icon {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 10px;
    background: #ed8a00;
    color: #fff;
    font-size: 1.15rem;
    font-weight: 900;
    line-height: 1;
}

.ui-apply-confirmation--danger .ui-apply-confirmation__icon {
    background: #c93636;
}

.ui-apply-confirmation__content {
    min-width: 0;
}

.ui-apply-confirmation__content h3 {
    margin: 0 0 .3rem;
    color: inherit;
    font-size: 1rem;
    font-weight: 900;
}

.ui-apply-confirmation__content > p {
    margin: 0;
    line-height: 1.55;
}

.ui-apply-confirmation__check {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    margin-top: .85rem;
    padding: .85rem .9rem;
    border: 2px solid #e5ad42;
    border-radius: 13px;
    background: #fff;
    color: #4f3200;
    font-weight: 850;
    line-height: 1.45;
    cursor: pointer;
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.ui-apply-confirmation__check:hover {
    border-color: #c98400;
    box-shadow: 0 0 0 3px rgba(237, 138, 0, .12);
}

.ui-apply-confirmation__check input {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    margin: .05rem 0 0;
    accent-color: var(--ui-primary);
    cursor: pointer;
}

.ui-apply-confirmation__check input:focus-visible {
    outline: 3px solid rgba(33, 105, 245, .28);
    outline-offset: 3px;
}

.ui-apply-confirmation__message {
    margin-top: .55rem !important;
    color: #8a4d00;
    font-size: .88rem;
    font-weight: 850;
}

.ui-apply-confirmation.is-confirmed {
    border-color: #8fd5ad;
    background: #effbf4;
    color: #12653b;
}

.ui-apply-confirmation.is-confirmed .ui-apply-confirmation__icon {
    background: #15945b;
}

.ui-apply-confirmation.is-confirmed .ui-apply-confirmation__check {
    border-color: #74c79b;
    background: #f7fffa;
    color: #105d37;
}

.ui-apply-confirmation.has-error {
    border-color: #dc6b45;
    box-shadow: 0 0 0 4px rgba(220, 107, 69, .14);
}

.ui-apply-action-panel__actions {
    justify-content: flex-end;
    margin-top: .85rem;
}

@media (max-width: 760px) {
    .ui-apply-confirmation {
        grid-template-columns: 1fr;
        padding: .9rem;
    }

    .ui-apply-confirmation__icon {
        width: 30px;
        height: 30px;
    }

    .ui-apply-action-panel__actions {
        align-items: stretch;
        flex-direction: column;
    }

    .ui-apply-action-panel__actions .button {
        width: 100%;
    }
}


/* R4B-P0C-HF3 — report subtabs, aligned source cards, zoom-safe shell and adjacent apply confirmation. */

/* Chuẩn khối nội dung lương dùng chung cho Module 2 và Module 3.
   Mốc tham chiếu là card Thêm tiền ứng: viền ngoài rõ, nội dung thụt đều,
   tiêu đề nằm trong card và trạng thái/chip neo góc phải trên. */
.ui-salary-card {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    padding: var(--ui-space-5);
    overflow: hidden;
}

.ui-salary-card > * {
    min-width: 0;
}

.ui-salary-card > .ui-section-header:first-child {
    width: 100%;
    min-width: 0;
    padding: 0;
    margin: 0 0 var(--ui-space-4);
    align-items: flex-start;
}

.ui-salary-card.ui-stack > .ui-section-header:first-child {
    margin-bottom: 0;
}

.ui-salary-card > .ui-employee-tabs,
.ui-salary-card > .ui-record-list,
.ui-salary-card > .ui-data-shell,
.ui-salary-card > .ui-status-banner,
.ui-salary-card > .ui-kpi-grid,
.ui-salary-card > .ui-toolbar,
.ui-salary-card > .ui-disclosure,
.ui-salary-card > .ui-grid,
.ui-salary-card > .ui-form-grid,
.ui-salary-card > .ui-text-block,
.ui-salary-card > .ui-empty-state {
    width: 100%;
    min-width: 0;
}

.ui-salary-card > .ui-employee-tabs {
    margin: 0;
}

.ui-salary-card > .ui-record-list {
    padding: 0;
    gap: var(--ui-space-4);
}

.ui-salary-card > .ui-data-shell {
    margin: 0;
}

.ui-salary-card > .ui-section-header:first-child > :first-child {
    min-width: 0;
}

.ui-salary-card > .ui-section-header:first-child .ui-section-header__actions,
.ui-salary-card > .ui-section-header:first-child > .ui-badge {
    flex: 0 0 auto;
    align-self: flex-start;
    margin-left: auto;
}

.ui-salary-card > .ui-section-header:first-child h2 {
    margin: 3px 0 5px;
    font-size: 22px;
    line-height: 1.2;
}

.ui-salary-card > .ui-section-header:first-child p {
    max-width: 920px;
}

.ui-salary-metric-card {
    min-width: 0;
    padding: var(--ui-space-4);
}

.ui-salary-metric-card > strong,
.ui-salary-metric-card > p {
    display: block;
    margin: 0;
}

.ui-salary-metric-card > strong {
    color: var(--ui-text-strong);
}

.ui-salary-metric-card > p {
    margin-top: 7px;
    color: var(--ui-text-muted);
    line-height: 1.45;
}

@media (max-width: 760px) {
    .ui-salary-card {
        padding: var(--ui-space-4);
    }

    .ui-salary-card > .ui-section-header:first-child {
        gap: var(--ui-space-3);
    }

    .ui-salary-card > .ui-record-list {
        gap: var(--ui-space-3);
    }
}

/* Form owner không có giao diện: giữ vai trò submit/anti-forgery cho control ở ngoài form
   nhưng không được tham gia layout và tạo thêm khoảng cách giữa các group. */
.ui-form-owner {
    display: none !important;
}

/* Mọi màn lương dùng chung một shell để đầu trang, stepper và nội dung luôn thẳng hàng. */
.salary-page {
    --ui-salary-group-gap: var(--ui-space-5);
    align-items: flex-start;
}
.salary-page > .salary-shell {
    display: grid;
    align-content: start;
    gap: var(--ui-salary-group-gap);
    min-width: 0;
    width: min(1480px, 100%);
}

/* Nhịp dọc chuẩn cho toàn bộ Lương điện thoại và Lương gạch.
   Chỉ điều khiển khoảng cách giữa các group cấp màn hình; khoảng cách nội bộ
   của field/card vẫn do primitive tương ứng sở hữu. */
.salary-page .ui-workspace-header {
    gap: var(--ui-salary-group-gap);
    margin-bottom: 0;
}
.salary-page > .salary-shell > :not(script):not(style):not(dialog),
.salary-page > .salary-shell > main.ui-stack > :not(script):not(style):not(dialog),
.salary-page > .salary-shell > form.ui-stack > :not(script):not(style):not(dialog),
.salary-page > .salary-shell > main > form.ui-stack > :not(script):not(style):not(dialog),
.salary-page .ui-tab-panel.ui-stack > :not(script):not(style):not(dialog) {
    margin-block: 0;
}
.salary-page > .salary-shell.ui-stack,
.salary-page > .salary-shell > main.ui-stack,
.salary-page > .salary-shell > form.ui-stack,
.salary-page > .salary-shell > main > form.ui-stack,
.salary-page .ui-tab-panel.ui-stack {
    gap: var(--ui-salary-group-gap);
}
.salary-page .ui-workspace-header,
.salary-page main {
    width: 100%;
    min-width: 0;
}
.page.page--layout-width-toggle.is-layout-expanded .salary-page > .salary-shell {
    width: min(var(--layout-expanded-width), 1720px);
    max-width: none;
}
@media (max-width: 760px) {
    .salary-page {
        --ui-salary-group-gap: var(--ui-space-4);
    }
}

@media (max-width: 880px) {
    .page.page--layout-width-toggle.is-layout-expanded .salary-page > .salary-shell {
        width: 100%;
    }
}

/* Card nguồn có ba vùng cố định: nội dung, nút phân tích, footer. */
.payroll-source-cards { grid-auto-rows: 1fr; }
.payroll-source-card {
    display: grid;
    grid-template-rows: minmax(190px, 1fr) auto auto;
    height: 100%;
    min-height: 330px;
}
.payroll-source-card__main { min-height: 190px; }
.payroll-source-card__analyze { align-self: end; }
.payroll-source-card__footer {
    min-height: 70px;
    align-content: center;
    flex-wrap: wrap;
}
.payroll-source-card__actions-left,
.payroll-source-card__actions-right { flex-wrap: wrap; }

/* Xác nhận và nút Apply là một cụm hành động duy nhất, nằm cạnh nhau. */
.ui-apply-action-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: stretch;
    gap: 14px;
}
.ui-apply-choice-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 13px;
    min-width: 0;
    padding: 15px 17px;
    border: 1px solid #b9ccef;
    border-radius: 16px;
    background: linear-gradient(135deg, #f8fbff, #f1f6ff);
    color: var(--ui-text-strong);
    cursor: pointer;
    transition: border-color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease;
}
.ui-apply-choice-card:hover {
    border-color: #7fa4ef;
    background: #eef4ff;
    box-shadow: 0 8px 20px rgba(36, 91, 190, .10);
}
.ui-apply-choice-card:has(input:focus-visible) {
    outline: none;
    box-shadow: var(--ui-focus-ring), 0 8px 20px rgba(36, 91, 190, .10);
}
.ui-apply-choice-card input {
    width: 22px;
    height: 22px;
    margin: 2px 0 0;
    accent-color: var(--ui-primary);
    cursor: pointer;
}
.ui-apply-choice-card__copy {
    display: grid;
    gap: 4px;
    min-width: 0;
}
.ui-apply-choice-card__copy strong {
    color: var(--ui-text-strong);
    font-size: 1rem;
    line-height: 1.25;
}
.ui-apply-choice-card__copy small {
    color: var(--ui-text-muted);
    font-size: .9rem;
    font-weight: 650;
    line-height: 1.42;
}
.ui-apply-choice-card.is-confirmed {
    border-color: #79cca0;
    background: linear-gradient(135deg, #effbf4, #f7fffa);
    box-shadow: 0 8px 20px rgba(21, 148, 91, .10);
}
.ui-apply-choice-card.has-error {
    border-color: #e18484;
    background: #fff3f3;
    box-shadow: 0 0 0 3px rgba(190, 45, 45, .10);
}
.ui-apply-choice-card--danger {
    border-color: #efaaaa;
    background: #fff2f2;
    color: #8f2020;
    cursor: default;
}
.ui-apply-choice-card--danger:hover { border-color: #efaaaa; background: #fff2f2; box-shadow: none; }
.ui-apply-choice-card__blocked {
    display: grid;
    width: 25px;
    height: 25px;
    place-items: center;
    border-radius: 8px;
    background: var(--ui-danger);
    color: #fff;
    font-weight: 900;
}
.ui-apply-action-row__buttons {
    display: grid;
    grid-template-columns: 1fr;
    align-content: stretch;
    gap: 8px;
    min-width: 190px;
}
.ui-apply-action-row__buttons .button {
    width: 100%;
    min-height: 48px;
    justify-content: center;
}
.ui-apply-action-row__note {
    display: grid;
    align-content: center;
    gap: 4px;
    padding: 14px 16px;
    border: 1px solid var(--ui-border);
    border-radius: 14px;
    background: #f8fafc;
}
.ui-apply-action-row__note small { color: var(--ui-text-muted); font-weight: 650; }
.ui-apply-action-panel > .ui-apply-confirmation__message { margin: 8px 0 0 !important; }

/* Khi zoom hoặc viewport hẹp, header wrap có kiểm soát và card nguồn xuống 2 cột. */
@media (max-width: 1320px) {
    .salary-page .ui-page-header { flex-wrap: wrap; }
    .salary-page .ui-page-header__identity { flex: 1 1 520px; }
    .salary-page .ui-page-header__actions {
        flex: 1 1 520px;
        justify-content: flex-start;
    }
    .payroll-source-cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
    .ui-apply-action-row { grid-template-columns: 1fr; }
    .ui-apply-action-row__buttons {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        min-width: 0;
    }
    .payroll-source-card { min-height: 0; grid-template-rows: auto auto auto; }
}
@media (max-width: 620px) {
    .payroll-source-cards--3,
    .payroll-source-cards--4 { grid-template-columns: 1fr; }
    .ui-apply-action-row__buttons { grid-template-columns: 1fr; }
}

/* R4B-P0C-HF4 — selective apply kernel */
.selective-apply-table tr.is-new { background: color-mix(in srgb, var(--ui-success-soft, #eaf8ef) 72%, transparent); }
.selective-apply-table tr.is-different { background: color-mix(in srgb, var(--ui-warning-soft, #fff4d6) 78%, transparent); }
.selective-apply-table tr.is-error { background: color-mix(in srgb, var(--ui-danger-soft, #fdebec) 78%, transparent); }
.selective-apply-table tr.is-applied { background: color-mix(in srgb, var(--ui-info-soft, #eaf3ff) 68%, transparent); }
.selective-apply-table tr.is-unchanged { opacity: .82; }
.selective-apply-check { width: 2.6rem; text-align: center; }
.selective-apply-check input { width: 1.15rem; height: 1.15rem; accent-color: var(--ui-accent, #1769e0); cursor: pointer; }
.selective-apply-check input:disabled { cursor: not-allowed; opacity: .45; }
/* R4B-P0C-HF5 — global apply action strip: tóm tắt nguồn → chọn → xác nhận → hành động. */
.selective-apply-action-strip {
    display: grid;
    gap: .7rem;
    margin: .85rem 0 1rem;
    padding: .75rem;
    border: 1px solid var(--ui-border);
    border-radius: 16px;
    background: color-mix(in srgb, var(--ui-surface, #fff) 88%, #eef5ff);
}
.selective-apply-action-strip__main {
    display: grid;
    grid-template-columns: minmax(18rem, 1fr) minmax(18rem, 1fr) minmax(11.5rem, auto);
    gap: .75rem;
    align-items: stretch;
}
.selective-apply-select-card,
.selective-apply-confirm-card { min-height: 100%; }
.selective-apply-select-card.has-selection {
    border-color: #6f9ded;
    background: linear-gradient(135deg, #eef5ff, #f8fbff);
    box-shadow: 0 8px 20px rgba(36, 91, 190, .10);
}
.selective-apply-select-card.is-disabled,
.selective-apply-confirm-card.is-disabled {
    cursor: default;
    opacity: .82;
    background: #f7f9fc;
}
.selective-apply-select-card.is-disabled:hover,
.selective-apply-confirm-card.is-disabled:hover {
    border-color: #b9ccef;
    background: #f7f9fc;
    box-shadow: none;
}
.selective-apply-select-card input:disabled,
.selective-apply-confirm-card input:disabled { cursor: not-allowed; opacity: .55; }
.selective-apply-inline-status {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    align-items: center;
    margin-top: .35rem;
}
.selective-apply-overwrite-card { max-width: min(100%, 48rem); }
.selective-apply-overwrite-card[hidden] { display: none !important; }
.selective-apply-action-buttons {
    display: grid;
    grid-template-columns: 1fr;
    gap: .5rem;
    align-content: stretch;
    min-width: 11.5rem;
}
.selective-apply-action-buttons .button {
    width: 100%;
    min-height: 48px;
    justify-content: center;
}
.selective-apply-message { margin: 0 .25rem; }
.selective-apply-diff { margin: .3rem 0 0; padding-left: 1.1rem; }
.selective-apply-diff li + li { margin-top: .2rem; }
.selective-apply-old-new { display: grid; grid-template-columns: auto 1fr; gap: .15rem .45rem; font-size: .875rem; }
.selective-apply-old-new strong { font-weight: 750; }
@media (max-width: 1050px) {
    .selective-apply-action-strip__main { grid-template-columns: 1fr 1fr; }
    .selective-apply-action-buttons { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
    .selective-apply-action-strip { padding: .6rem; }
    .selective-apply-action-strip__main { grid-template-columns: 1fr; }
    .selective-apply-action-buttons { grid-column: auto; grid-template-columns: 1fr; }
}
.payroll-row-state--is-new { background: var(--ui-success-soft, #eaf8ef); color: var(--ui-success-strong, #176b3a); }
.payroll-row-state--is-different { background: var(--ui-warning-soft, #fff4d6); color: var(--ui-warning-strong, #7a4a00); }
.payroll-row-state--is-error { background: var(--ui-danger-soft, #fdebec); color: var(--ui-danger-strong, #9d2028); }
.payroll-row-state--is-applied { background: var(--ui-info-soft, #eaf3ff); color: var(--ui-info-strong, #174c90); }
.payroll-row-state--is-unchanged { background: var(--ui-neutral-soft, #eef1f4); color: var(--ui-text-muted, #5e6672); }


/* HF7 — Làm lại kỳ là tiện ích độc lập, không phải một bước nối vào luồng nghiệp vụ. */
.ui-workflow__item.is-utility:not(:last-child)::after {
    display: none;
}

.ui-workflow__item.is-utility .ui-workflow__marker {
    color: #9a5b00;
    border-color: #f2c078;
    background: #fff8e8;
    font-size: 22px;
}

.ui-workflow__item.is-utility .ui-workflow__copy strong { color: #8a570c; }

.ui-workflow__item.is-utility.is-active .ui-workflow__marker {
    color: #fff;
    border-color: #d97706;
    background: #d97706;
    box-shadow: 0 0 0 4px rgb(217 119 6 / 16%);
}

.ui-workflow__item.is-utility.is-blocked .ui-workflow__marker {
    color: #fff;
    border-color: #94a3b8;
    background: #94a3b8;
    box-shadow: none;
}

.ui-workflow__item.is-utility.is-blocked .ui-workflow__copy strong,
.ui-workflow__item.is-utility.is-blocked .ui-workflow__copy small { color: #7b8797; }

.ui-reset-period-page {
    width: 100%;
    padding-top: 0;
}

.ui-reset-period-card {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    padding: clamp(18px, 2vw, 28px);
}

.ui-reset-period__metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
    gap: 12px;
    align-items: stretch;
}

.ui-reset-period__metric {
    min-width: 0;
    min-height: 88px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 15px;
    border: 1px solid #c8d7ee;
    border-left: 4px solid var(--ui-primary);
    border-radius: 14px;
    background: linear-gradient(180deg, #fff 0%, #f7faff 100%);
}

.ui-reset-period__metric span {
    color: var(--ui-text-muted);
    font-size: 13px;
    line-height: 1.3;
    font-weight: 750;
}

.ui-reset-period__metric strong {
    color: var(--ui-text);
    font-size: clamp(22px, 2vw, 30px);
    line-height: 1;
    font-weight: 900;
}

.ui-reset-period__metric.is-zero {
    border-left-color: #cbd5e1;
    background: #f8fafc;
}

.ui-reset-period__metric.is-zero strong { color: #64748b; }

.ui-reset-period__scope-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    align-items: stretch;
}

.ui-reset-period__scope {
    min-width: 0;
    height: 100%;
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    padding: 16px;
    border: 1px solid;
    border-radius: 14px;
}

.ui-reset-period__scope--delete {
    border-color: #f1c471;
    background: #fff8e8;
    color: #9a5b00;
}

.ui-reset-period__scope--keep {
    border-color: #9fdfb9;
    background: #effcf4;
    color: #08743d;
}

.ui-reset-period__scope-icon {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgb(255 255 255 / 72%);
    font-size: 18px;
    font-weight: 950;
}

.ui-reset-period__scope strong {
    display: block;
    margin-bottom: 5px;
    color: currentColor;
    font-size: 14px;
}

.ui-reset-period__scope p {
    margin: 0;
    color: var(--ui-text);
    line-height: 1.55;
}

.ui-reset-period__form {
    padding-top: 18px;
    border-top: 1px solid var(--ui-border);
}

.ui-reset-period__reason textarea {
    min-height: 104px;
    resize: vertical;
}

.ui-reset-period__confirm {
    align-items: flex-start;
    padding: 14px 16px;
    border: 1px solid #f2c078;
    border-radius: 14px;
    background: #fff8e8;
}

.ui-reset-period__confirm input { margin-top: 3px; }
.ui-reset-period__actions { padding-top: 2px; }
.ui-reset-period__empty { margin: 0; }
.ui-reset-period__empty-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    padding-top: 4px;
}
.ui-reset-period__empty-actions {
    margin: 0;
    justify-content: flex-end;
}

@media (max-width: 840px) {
    .ui-reset-period-card { padding: 16px; }
    .ui-reset-period__scope-grid { grid-template-columns: 1fr; }
    .ui-reset-period__empty-row { grid-template-columns: 1fr; }
    .ui-reset-period__empty-actions { justify-content: flex-start; }
    .ui-reset-period__actions .button { flex: 1 1 100%; }
}

@media (max-width: 520px) {
    .ui-reset-period__empty-actions .button { width: 100%; justify-content: center; }
}


/* UI-HF16: disclosure groups và header state rõ vai trò hơn. */
.ui-disclosure {
    overflow: hidden;
    border: 1px solid var(--ui-border);
    border-radius: 18px;
    background: var(--ui-surface);
    box-shadow: var(--ui-shadow-card);
}
.ui-disclosure > .ui-disclosure__summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    cursor: pointer;
    list-style: none;
    background: linear-gradient(180deg, #fbfdff 0%, #f5f8fd 100%);
}
.ui-disclosure > .ui-disclosure__summary::-webkit-details-marker { display: none; }
.ui-disclosure > .ui-disclosure__summary > span:first-child {
    display: grid;
    gap: 4px;
    min-width: 0;
}
.ui-disclosure > .ui-disclosure__summary strong {
    color: var(--ui-text-strong);
    font-size: 17px;
    line-height: 1.25;
}
.ui-disclosure > .ui-disclosure__summary small {
    color: var(--ui-text-muted);
    font-size: 13px;
    line-height: 1.45;
}
.ui-disclosure[open] > .ui-disclosure__summary {
    border-bottom: 1px solid var(--ui-border);
    background: linear-gradient(180deg, #f8fbff 0%, #f2f7ff 100%);
}
.ui-disclosure__content {
    padding: 16px 18px 18px;
}
.ui-support-report {
    margin: 0;
    max-width: 100%;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.ui-disclosure__chevron {
    position: relative;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #d5e2fa;
    border-radius: 999px;
    --ui-chevron-arm: 9px;
    --ui-chevron-stroke: 2.25px;
    background: #edf4ff;
    color: #3266de;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.85);
}

.ui-disclosure[open] .ui-disclosure__chevron {
    transform: rotate(180deg);
    background: #dce9ff;
}

.ui-header-status-card {
    min-height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 18px;
    border: 1px solid #d5e2fa;
    border-radius: 14px;
    background: #f8fbff;
    color: #1b4fc5;
    font-size: 14px;
    font-weight: 900;
    line-height: 1.15;
    text-align: center;
}
.ui-header-status-card .ui-header-action-card__icon {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
}
.ui-header-status-card--warning {
    border-color: #f5c27d;
    background: #fff8ef;
    color: #a15a00;
}
.ui-header-status-card--success {
    border-color: #9fe0c0;
    background: #effcf5;
    color: #0d7a46;
}
.ui-page-header__action-list:has(.ui-header-status-card) {
    width: 430px;
    flex-basis: 430px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
}
.ui-page-header__action-list:has(.ui-header-status-card) > .ui-header-status-card {
    grid-column: 1 / -1;
}
.ui-page-header__action-list:has(.ui-header-status-card) > .ui-header-action-card--primary {
    grid-column: 1;
}
.ui-page-header__action-list:has(.ui-header-status-card) > .ui-header-action-card--secondary {
    grid-column: 2;
}
.ui-page-header__action-list:has(.ui-header-status-card):not(:has(.ui-header-action-card--primary)) > .ui-header-action-card--secondary,
.ui-page-header__action-list:has(.ui-header-status-card):not(:has(.ui-header-action-card--secondary)) > .ui-header-action-card--primary {
    grid-column: 1 / -1;
}
@media (max-width: 900px) {
    .ui-page-header__action-list:has(.ui-header-status-card) {
        width: 100%;
        flex-basis: 100%;
    }
}
@media (max-width: 640px) {
    .ui-disclosure > .ui-disclosure__summary {
        padding: 13px 14px;
    }
    .ui-disclosure__content {
        padding: 14px;
    }
    .ui-page-header__action-list:has(.ui-header-status-card) {
        grid-template-columns: 1fr;
    }
    .ui-page-header__action-list:has(.ui-header-status-card) > .ui-header-status-card,
    .ui-page-header__action-list:has(.ui-header-status-card) > .ui-header-action-card--primary,
    .ui-page-header__action-list:has(.ui-header-status-card) > .ui-header-action-card--secondary {
        grid-column: auto;
    }
}


/* HF20 — Global employee tabs: compact status icons and container-aware employee hero. */
.ui-employee-tabs .ui-tabs--scroll {
    display: flex;
    align-items: stretch;
}
.ui-employee-tabs .ui-tabs--scroll .ui-tab {
    flex: 1 1 96px;
    min-width: 96px;
    max-width: 180px;
    min-height: 72px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: 1fr;
    align-items: start;
    justify-content: stretch;
    gap: 4px 8px;
    padding: 10px 11px 12px;
}
.ui-employee-tabs .ui-tabs--scroll .ui-tab[data-ui-tab="tong-quan"] {
    flex-basis: 132px;
    min-width: 132px;
    max-width: 190px;
}
.ui-employee-tabs .ui-tab__copy {
    min-width: 0;
    display: grid;
    align-content: start;
    gap: 3px;
}
.ui-employee-tabs .ui-tab__copy strong,
.ui-employee-tabs .ui-tab__copy small {
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
}
.ui-employee-tabs .ui-tab__status.ui-tab-status-icon {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    min-width: 24px;
    white-space: nowrap;
}
.ui-tab-status-icon__glyph {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #e5eaf2;
    color: #667085;
    font-size: 13px;
    font-weight: 950;
    line-height: 1;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .06);
}
.ui-tab-status-icon__count {
    color: currentColor;
    font-size: 12px;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}
.ui-tab--success .ui-tab-status-icon__glyph {
    background: var(--ui-success);
    color: #fff;
}
.ui-tab--warning .ui-tab-status-icon__glyph {
    background: #f59e0b;
    color: #fff;
}
.ui-tab--danger .ui-tab-status-icon__glyph {
    background: var(--ui-danger);
    color: #fff;
}
.ui-tab--neutral .ui-tab-status-icon__glyph {
    background: #e5eaf2;
    color: #667085;
}
.ui-employee-tabs .ui-tab.is-active .ui-tab-status-icon__glyph,
.ui-employee-tabs .ui-tab[aria-selected="true"] .ui-tab-status-icon__glyph {
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}

.gach-attendance-card,
.salary-attendance-card {
    container-type: inline-size;
}

/* HF21 — polish: right action column, clearer nhân viên hero and summary balance. */
.ui-page-header__action-list:has(.ui-header-action-card) {
    margin-left: auto;
}
.ui-page-header__action-list:has(.ui-header-status-card) {
    align-self: start;
}
/* HF22 — Header control framework: month nav, status and contextual actions dùng chung cho tất cả header payroll/workspace. */
.ui-page-header__actions {
    flex: 0 0 clamp(320px, 36vw, 520px);
    width: clamp(320px, 36vw, 520px);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    align-self: center;
    justify-items: stretch;
}

.ui-page-header__control-row {
    width: 100%;
}

.ui-page-header__control-row--period {
    display: flex;
    justify-content: flex-end;
}

.ui-page-header__control-row--period .ui-period-nav {
    justify-content: flex-end;
}

.ui-page-header__status-strip {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
}

.ui-page-header__status-strip--multi {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ui-page-header__button-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    align-items: stretch;
}

.ui-page-header__button-grid--single {
    grid-template-columns: minmax(0, 1fr);
}

.ui-page-header__button-grid > .ui-header-action-card,
.ui-page-header__status-strip > .ui-header-status-card {
    width: 100%;
    min-width: 0;
}

.ui-header-action-card--subtle {
    background: #edf4ff;
    border-color: #c9dafd;
    color: #214ebf;
}

.ui-header-action-card--subtle:hover {
    background: #e5efff;
    border-color: #b8cdfb;
    color: #173d9e;
}

.ui-header-action-card--danger {
    background: #fff5f5;
    border-color: #f0b4b4;
    color: #c33232;
}

.ui-header-action-card--danger:hover {
    background: #ffefef;
    border-color: #e89a9a;
    color: #b12020;
}


@media (max-width: 1100px) {
    .ui-page-header__actions {
        flex-basis: min(100%, 480px);
        width: min(100%, 480px);
    }
}

@media (max-width: 900px) {
    .ui-page-header__actions {
        flex-basis: 100%;
        width: 100%;
    }

    .ui-page-header__control-row--period {
        justify-content: flex-start;
    }

    .ui-page-header__control-row--period .ui-period-nav {
        justify-content: flex-start;
    }

    .ui-page-header__button-grid,
    .ui-page-header__status-strip--multi {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .ui-page-header__identity {
        flex-direction: column;
        align-items: flex-start;
    }

    .ui-page-header__identity-marker {
        grid-template-columns: auto auto;
        grid-template-rows: auto;
        align-items: center;
    }

    .ui-page-header__button-grid,
    .ui-page-header__status-strip,
    .ui-page-header__status-strip--multi {
        grid-template-columns: 1fr;
    }
}

/* R4B-P0D-HF44 — client-only overlays; official step completion stays server-owned. */
.ui-workflow__item.is-dirty .ui-workflow__marker {
    box-shadow: 0 0 0 3px rgba(245, 158, 11, .18);
}

.ui-workflow__item.is-dirty .ui-workflow__marker::after {
    content: "•";
    position: absolute;
    inset: auto -4px -5px auto;
    width: 12px;
    height: 12px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: #f59e0b;
    color: #fff;
    font-size: 10px;
    line-height: 1;
}

.ui-workflow__item.is-busy .ui-workflow__marker {
    opacity: .55;
}

.ui-page-header__marker-status.is-dirty {
    border-color: rgba(245, 158, 11, .45);
    background: rgba(255, 247, 237, .92);
}

.ui-page-header__marker-status.is-busy {
    opacity: .78;
}

/* R4B-P0D-HF48 — Salary Header two-row layout + contextual page toolbar.
   Header định hướng, Stepper tổng quan, Toolbar chứa tiện ích, Action Dock giữ Lưu/Chốt/Gỡ. */
.ui-page-header--salary-context,
.ui-page-header--salary-support,
.ui-page-header--period-context {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    padding: 20px clamp(20px, 2.2vw, 30px);
}

.ui-page-header__navigation {
    display: flex;
    align-items: center;
    min-width: 0;
}
.ui-page-header__navigation > .ui-header-action-card {
    min-height: 36px;
    padding: 7px 12px;
    border-radius: 11px;
    font-size: 12px;
    box-shadow: none;
}

.ui-page-header__top-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: clamp(22px, 3vw, 44px);
    min-width: 0;
}

.ui-page-header--salary-context .ui-page-header__identity,
.ui-page-header--salary-support .ui-page-header__identity,
.ui-page-header--period-context .ui-page-header__identity {
    min-width: 0;
    align-items: center;
    gap: clamp(16px, 2vw, 24px);
}

.ui-page-header--salary-context .ui-page-header__icon,
.ui-page-header--salary-support .ui-page-header__icon,
.ui-page-header--period-context .ui-page-header__icon {
    width: 54px;
    height: 54px;
    flex-basis: 54px;
    border-radius: 16px;
}

.ui-page-header--salary-context .ui-page-header__copy,
.ui-page-header--salary-support .ui-page-header__copy,
.ui-page-header--period-context .ui-page-header__copy {
    min-width: 0;
    max-width: 780px;
}

.ui-page-header--salary-context .ui-page-header__copy h1,
.ui-page-header--salary-support .ui-page-header__copy h1,
.ui-page-header--period-context .ui-page-header__copy h1 {
    margin-top: 4px;
    font-size: clamp(28px, 2.35vw, 38px);
    line-height: 1.08;
    text-wrap: balance;
}

.ui-page-header--salary-context .ui-page-header__copy p,
.ui-page-header--salary-support .ui-page-header__copy p,
.ui-page-header--period-context .ui-page-header__copy p {
    max-width: 72ch;
    line-height: 1.48;
}

.ui-page-header__top-tools {
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 10px;
}
.ui-page-header__top-actions {
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}
.ui-page-header__top-actions > .ui-header-action-card {
    min-height: 44px;
    padding: 9px 15px;
}
.ui-page-header__period {
    min-width: 0;
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
}

.ui-page-header__period .ui-period-nav {
    justify-content: flex-end;
}

.ui-page-header--salary-context .ui-period-nav__main,
.ui-page-header--salary-support .ui-period-nav__main,
.ui-page-header--period-context .ui-period-nav__main {
    flex: 1 1 218px;
    min-width: 218px;
    grid-template-columns: 42px minmax(112px, 1fr) 42px;
}

.ui-page-header--salary-context .ui-period-nav__today,
.ui-page-header--salary-support .ui-period-nav__today,
.ui-page-header--period-context .ui-period-nav__today {
    flex: 0 0 auto;
}

.ui-page-header__context-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(18px, 2.5vw, 34px);
    padding-top: 16px;
    border-top: 1px solid color-mix(in srgb, var(--ui-border) 76%, transparent);
    min-width: 0;
}

.ui-page-header__state-region {
    min-width: 0;
    display: grid;
    gap: 10px;
}
.ui-page-header__context-items {
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.ui-page-header__context-item {
    --ui-page-header-context-accent: #64748b;
    --ui-page-header-context-text: color-mix(in srgb, var(--ui-page-header-context-accent) 76%, #0f172a);
    min-height: 34px;
    display: inline-flex;
    align-items: baseline;
    gap: 7px;
    padding: 6px 11px;
    border: 1px solid color-mix(in srgb, var(--ui-page-header-context-accent) 22%, #dbe5f0);
    border-radius: 999px;
    background: color-mix(in srgb, var(--ui-page-header-context-accent) 8%, #fff);
    color: var(--ui-page-header-context-text);
    white-space: nowrap;
}
.ui-page-header__context-item small {
    color: var(--ui-page-header-context-text);
    font-size: 11px;
    font-weight: 800;
}
.ui-page-header__context-item strong {
    color: var(--ui-page-header-context-text);
    font-size: 13px;
    font-weight: 900;
}
.ui-page-header__context-item--info { --ui-page-header-context-accent: #1769d2; }
.ui-page-header__context-item--success { --ui-page-header-context-accent: #138a47; }
.ui-page-header__context-item--warning { --ui-page-header-context-accent: #b86a00; }
.ui-page-header__context-item--danger { --ui-page-header-context-accent: #c4322b; }
.ui-page-header__context-item--neutral { --ui-page-header-context-accent: #64748b; }

.ui-page-header__state {
    min-width: 0;
    min-height: 0;
    width: fit-content;
    max-width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 11px;
    padding: 10px 13px;
    border-radius: 13px;
    text-align: left;
    line-height: 1.3;
}

.ui-page-header__state-icon {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    display: inline-grid;
    place-items: center;
    margin-top: 1px;
    border-radius: 999px;
    color: currentColor;
}

.ui-page-header__state-icon svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.ui-page-header__state-copy {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.ui-page-header__state-action {
    flex: 0 0 auto;
    margin-left: auto;
}
.ui-page-header__state-action > .ui-header-action-card {
    min-height: 34px;
    padding: 6px 11px;
    border-radius: 10px;
    font-size: 12px;
    box-shadow: none;
}

.ui-page-header__state-copy strong {
    font-size: 14px;
    font-weight: 900;
    line-height: 1.25;
}

.ui-page-header__state-reason {
    display: block;
    color: currentColor;
    font-size: 13px;
    font-weight: 650;
    line-height: 1.38;
    opacity: .88;
}

.ui-page-header__state.ui-header-status-card--success {
    border-color: #9fe0c0;
    background: #effcf5;
    color: #0d7a46;
}

.ui-page-header__state.ui-header-status-card--warning {
    border-color: #f5c27d;
    background: #fff8ef;
    color: #9a5700;
}

.ui-page-header__state.ui-header-status-card--danger,
.ui-page-header__state.ui-page-header__context-note--danger {
    border-color: #f4b8ae;
    background: #fff4f2;
    color: #a9372a;
}

.ui-page-header__state.ui-page-header__context-note--warning {
    border-color: #f5c27d;
    background: #fff8ef;
    color: #925600;
}

.ui-page-header__primary-action {
    min-width: 0;
    justify-self: end;
}

.ui-page-header__primary-action > .ui-header-action-card {
    min-width: min(280px, 30vw);
    max-width: 360px;
    min-height: 52px;
    padding-inline: 18px;
    white-space: normal;
    text-align: center;
    line-height: 1.2;
}

.ui-page-header__status-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ui-page-header__status-strip > .ui-header-status-card {
    min-height: 38px;
    padding: 7px 11px;
    font-size: 13px;
}

.ui-page-toolbar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 14px 20px;
    padding: 12px 16px;
    margin: 0 0 var(--ui-space-4);
    border: 1px solid var(--ui-border);
    border-radius: 15px;
    background: linear-gradient(180deg, #fbfdff 0%, #f5f8fe 100%);
    box-shadow: 0 8px 22px rgba(15, 23, 42, .05);
}

.ui-page-toolbar__label {
    color: var(--ui-text-muted);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.ui-page-toolbar__actions {
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 9px;
}

.ui-page-toolbar__actions > .ui-header-action-card {
    min-width: 0;
    min-height: 40px;
    height: auto;
    padding: 8px 13px;
    border-color: #cbd9f4;
    border-radius: 11px;
    background: #f8fbff;
    color: #2853b7;
    font-size: 13px;
    line-height: 1.2;
    white-space: normal;
    text-align: center;
    box-shadow: none;
}

.ui-page-toolbar__actions > .ui-header-action-card:hover {
    border-color: #a9c0ed;
    background: #eef5ff;
    color: #173f9d;
}

.ui-header-action-card--utility {
    min-width: 0;
    min-height: 40px;
    height: auto;
    padding: 8px 13px;
    border-color: #cbd9f4;
    border-radius: 11px;
    background: #f8fbff;
    color: #2853b7;
    font-size: 13px;
    line-height: 1.2;
    white-space: normal;
    text-align: center;
}

.ui-page-header--salary-context [data-salary-header-primary-action][aria-disabled="true"] {
    pointer-events: none;
    opacity: .58;
    filter: saturate(.7);
    box-shadow: none;
}

.ui-page-header__state.is-dirty {
    border-color: rgba(245, 158, 11, .45);
    background: rgba(255, 247, 237, .96);
    color: #925600;
}

.ui-page-header__state.is-busy {
    opacity: .78;
}

.ui-workspace-header > .ui-page-toolbar {
    margin-bottom: 0;
}

@media (max-width: 1080px) {
    .ui-page-header__top-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .ui-page-header__period {
        justify-content: flex-end;
    }

    .ui-page-header__context-row {
        grid-template-columns: minmax(0, 1fr) minmax(210px, auto);
    }
}

@media (max-width: 760px) {
    .ui-page-header--salary-context,
    .ui-page-header--salary-support,
    .ui-page-header--period-context {
        padding: 18px;
        gap: 16px;
    }

    .ui-page-header__top-tools,
    .ui-page-header__top-actions,
    .ui-page-header__period {
        justify-content: flex-start;
    }
    .ui-page-header__top-tools {
        width: 100%;
    }

    .ui-page-header__period .ui-period-nav {
        width: 100%;
        justify-content: flex-start;
    }

    .ui-page-header__context-row {
        grid-template-columns: minmax(0, 1fr);
        align-items: stretch;
    }

    .ui-page-header__primary-action {
        width: 100%;
        justify-self: stretch;
    }

    .ui-page-header__primary-action > .ui-header-action-card {
        width: 100%;
        max-width: none;
        min-width: 0;
    }

    .ui-page-toolbar {
        grid-template-columns: minmax(0, 1fr);
        align-items: stretch;
    }

    .ui-page-toolbar__actions {
        justify-content: flex-start;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ui-page-toolbar__actions > .ui-header-action-card {
        width: 100%;
    }
}

@media (max-width: 560px) {
    .ui-page-header--salary-context .ui-page-header__identity,
    .ui-page-header--salary-support .ui-page-header__identity,
    .ui-page-header--period-context .ui-page-header__identity {
        align-items: flex-start;
        gap: 13px;
    }

    .ui-page-header--salary-context .ui-page-header__icon,
    .ui-page-header--salary-support .ui-page-header__icon,
    .ui-page-header--period-context .ui-page-header__icon {
        width: 48px;
        height: 48px;
        flex-basis: 48px;
        border-radius: 14px;
    }

    .ui-page-header--salary-context .ui-page-header__copy h1,
    .ui-page-header--salary-support .ui-page-header__copy h1,
    .ui-page-header--period-context .ui-page-header__copy h1 {
        font-size: clamp(24px, 8vw, 30px);
    }

    .ui-page-header__period .ui-period-nav {
        align-items: stretch;
    }

    .ui-page-header--salary-context .ui-period-nav__main,
    .ui-page-header--salary-support .ui-period-nav__main,
    .ui-page-header--period-context .ui-period-nav__main,
    .ui-page-header--salary-context .ui-period-nav__today,
    .ui-page-header--salary-support .ui-period-nav__today,
    .ui-page-header--period-context .ui-period-nav__today {
        flex-basis: 100%;
        width: 100%;
    }

    .ui-page-header__state {
        width: 100%;
    }

    .ui-page-toolbar__actions {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* UI-GLOBAL-HF50 — Structured record header: identity, independent context-chip row,
   contextual navigation/action stack and extensible priority rail. */
.ui-page-header--record-context .ui-page-header__top-row {
    grid-template-columns: minmax(0, 1fr) minmax(190px, 230px);
    align-items: start;
}
.ui-page-header--record-context .ui-page-header__top-tools {
    width: 100%;
    justify-content: stretch;
}
.ui-page-header--record-context .ui-page-header__top-actions--stack {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
}
.ui-page-header--record-context .ui-page-header__top-actions--stack > .ui-header-action-card {
    width: 100%;
    min-width: 0;
    min-height: 52px;
    height: auto;
    padding: 10px 16px;
    white-space: normal;
    text-align: center;
}
.ui-page-header__context-strip {
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.ui-page-header--record-context .ui-page-header__context-strip {
    padding-left: calc(54px + clamp(16px, 2vw, 24px));
}
.ui-page-header--record-context .ui-page-header__priority-row {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: stretch;
    gap: clamp(16px, 2vw, 28px);
    padding-top: 14px;
}
.ui-page-header--record-context .ui-page-header__priority-actions {
    min-width: 0;
    display: flex;
    align-items: stretch;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}
.ui-page-header--record-context .ui-page-header__priority-actions > .ui-header-action-card {
    min-width: 142px;
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.ui-page-header--record-context .ui-page-header__priority-row .ui-page-header__state-region {
    width: 100%;
}
.ui-page-header--record-context .ui-page-header__priority-row .ui-status-banner {
    width: 100%;
    margin: 0;
}
.ui-page-header--record-context .ui-page-header__priority-row .ui-page-header__state {
    min-height: 54px;
    width: min(100%, 760px);
    align-items: center;
    padding: 10px 12px 10px 16px;
}
.ui-page-header--record-context .ui-page-header__priority-row .ui-page-header__state-copy {
    align-self: center;
}
.ui-page-header--record-context .ui-page-header__priority-row .ui-page-header__state-action {
    align-self: center;
}
.ui-page-header--record-context .ui-page-header__priority-row .ui-page-header__state-action > .ui-header-action-card {
    min-width: 124px;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
@media (max-width: 1080px) {
    .ui-page-header--record-context .ui-page-header__top-row {
        grid-template-columns: minmax(0, 1fr) minmax(180px, 220px);
    }
}
@media (max-width: 760px) {
    .ui-page-header--record-context .ui-page-header__top-row {
        grid-template-columns: minmax(0, 1fr);
    }
    .ui-page-header--record-context .ui-page-header__top-actions--stack {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .ui-page-header--record-context .ui-page-header__context-strip {
        padding-left: 0;
    }
    .ui-page-header--record-context .ui-page-header__priority-row {
        grid-template-columns: minmax(0, 1fr);
    }
    .ui-page-header--record-context .ui-page-header__priority-actions {
        justify-content: flex-start;
    }
    .ui-page-header--record-context .ui-page-header__priority-row .ui-page-header__state {
        width: 100%;
    }
}
@media (max-width: 560px) {
    .ui-page-header--record-context .ui-page-header__top-actions--stack {
        grid-template-columns: minmax(0, 1fr);
    }
}

.ui-header-status-card--danger {
    border-color: #f4b8ae;
    background: #fff4f2;
    color: #a9372a;
}

/* R4B-P0D-HF49 — Global form validation */
.ui-validation-summary {
    display: grid;
    gap: var(--ui-space-2, .5rem);
    padding: .85rem 1rem;
    border: 1px solid color-mix(in srgb, var(--ui-danger, #d92d20) 34%, transparent);
    border-radius: var(--ui-radius-md, .75rem);
    background: color-mix(in srgb, var(--ui-danger, #d92d20) 7%, white);
    color: var(--ui-danger-strong, #a51d16);
}

.ui-validation-summary[hidden] {
    display: none;
}

.ui-validation-summary--success {
    border-color: color-mix(in srgb, var(--ui-success, #138a4b) 32%, transparent);
    background: color-mix(in srgb, var(--ui-success, #138a4b) 8%, white);
    color: var(--ui-success-strong, #08743d);
}

.ui-validation-summary > strong {
    font-weight: 800;
}

.ui-validation-summary ul {
    display: grid;
    gap: .3rem;
    margin: 0;
    padding-inline-start: 1.25rem;
}

.ui-field-validation {
    display: block;
    margin-top: .35rem;
    color: var(--ui-danger-strong, #b42318);
    font-size: .875rem;
    font-weight: 650;
    line-height: 1.4;
}

.ui-field-validation[hidden] {
    display: none;
}

input.is-invalid,
select.is-invalid,
textarea.is-invalid,
[aria-invalid="true"] {
    border-color: var(--ui-danger, #d92d20) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-danger, #d92d20) 15%, transparent) !important;
}

.ui-validation-owner {
    display: contents;
}

/* HF50 — Global Tiền ứng Workspace dùng chung cho Module 2 và Module 3. */
.ui-advance-workspace {
    --ui-advance-gap: var(--ui-space-4);
}

.ui-advance-kpis {
    --ui-kpi-columns: 5;
}

.ui-advance-kpi-status > strong {
    white-space: nowrap;
    overflow-wrap: normal;
    font-size: clamp(17px, 1.35vw, 24px);
    letter-spacing: -.02em;
}

.ui-advance-entry-layout {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
    gap: var(--ui-advance-gap);
    align-items: stretch;
}

.ui-advance-entry-card,
.ui-advance-import-card,
.ui-advance-list-card {
    min-width: 0;
}

.ui-advance-entry-card,
.ui-advance-import-card {
    display: grid;
    align-content: start;
    gap: var(--ui-space-4);
}

.ui-advance-entry-form {
    display: grid;
    gap: var(--ui-space-4);
}

.ui-advance-form-grid {
    display: grid;
    grid-template-columns: minmax(210px, 1.25fr) minmax(155px, .72fr) minmax(175px, .8fr) minmax(180px, .85fr);
    gap: var(--ui-space-4);
    align-items: start;
}

.ui-advance-note-field {
    grid-column: 1 / -1;
}

.ui-advance-money-control {
    position: relative;
    display: block;
}

.ui-advance-money-control input {
    width: 100%;
    padding-right: 38px;
}

.ui-advance-money-control b {
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    color: var(--ui-text-muted);
    font-size: 15px;
    pointer-events: none;
}

.ui-advance-entry-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ui-space-4);
    padding-top: var(--ui-space-4);
    border-top: 1px solid var(--ui-border);
}

.ui-advance-rule-note {
    display: flex;
    align-items: flex-start;
    gap: var(--ui-space-3);
    max-width: 760px;
    color: #31587d;
}

.ui-advance-rule-note > span {
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: #fff;
    background: var(--ui-info);
    font-weight: 950;
}

.ui-advance-rule-note p,
.ui-advance-import-card > p {
    margin: 2px 0 0;
    line-height: 1.5;
}

.ui-advance-import-card .button {
    justify-self: start;
    margin-top: auto;
}

.ui-advance-filter {
    display: grid;
    grid-template-columns: minmax(260px, 1.5fr) minmax(180px, .7fr) auto;
}

/* R4B-P0D-HF50-HF3 — card đã quản lý padding ngoài; filter chỉ giữ layout trường. */
.ui-advance-list-card > .ui-advance-filter {
    padding: 0;
    margin: 0;
}

.ui-advance-filter > label,
.ui-advance-filter input,
.ui-advance-filter select {
    min-width: 0;
    width: 100%;
}

.ui-advance-table td {
    vertical-align: middle;
}

.ui-advance-table td[data-label="Ghi chú"] > span,
.ui-advance-cancel-reason {
    display: block;
}

.ui-advance-cancel-reason {
    margin-top: 5px;
    color: var(--ui-danger);
    line-height: 1.4;
}

.ui-advance-cancel-action form {
    min-width: min(360px, 72vw);
}

.ui-advance-cancel-action .button {
    justify-self: start;
}

@media (max-width: 1100px) {
    .ui-advance-entry-layout {
        grid-template-columns: 1fr;
    }

    .ui-advance-form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ui-advance-note-field {
        grid-column: 1 / -1;
    }

    .ui-advance-filter {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ui-advance-filter .filter-search {
        grid-column: 1 / -1;
    }
}

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

    .ui-advance-kpi-status > strong {
        white-space: normal;
    }

    .ui-advance-entry-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .ui-advance-entry-actions .button,
    .ui-advance-import-card .button {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 720px) {
    .ui-kpi-grid.ui-advance-kpis {
        grid-template-columns: 1fr;
    }

    .ui-advance-form-grid,
    .ui-advance-filter {
        grid-template-columns: 1fr;
    }

    .ui-advance-note-field,
    .ui-advance-filter .filter-search {
        grid-column: auto;
    }

    .ui-advance-filter .button {
        width: 100%;
    }

    .ui-advance-cancel-action form {
        min-width: 0;
    }
}


/* R4B-P0D-HF54 — Global final payroll report shell for Module 2 and Module 3. */
.ui-payroll-final-page { gap: var(--ui-space-4); }
.ui-payroll-final-kpis { --ui-kpi-columns: 3; }
.ui-payroll-final-kpi strong {
    font-size: clamp(24px, 2.4vw, 34px);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.025em;
    white-space: nowrap;
}
.ui-payroll-final-kpi--transfer { border-color: #a9c4f8; background: #f6f9ff; }
.ui-payroll-final-kpi--final { border-color: #9bd7b0; }
.ui-payroll-final-decision {
    display: grid;
    grid-template-columns: minmax(280px, .9fr) minmax(440px, 1.35fr);
    gap: var(--ui-space-4) var(--ui-space-5);
    align-items: center;
    padding: var(--ui-space-5);
    border-color: #b8cdf4;
    background: linear-gradient(135deg, #f7faff, #fff);
}
.ui-payroll-final-decision__overview { min-width: 0; }
.ui-payroll-final-decision__title {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--ui-space-3);
}
.ui-payroll-final-decision__overview h2 {
    margin: 6px 0 0;
    color: var(--ui-text-strong);
    font-size: 22px;
    line-height: 1.2;
}
.ui-payroll-final-decision__overview p {
    margin: var(--ui-space-3) 0 0;
    color: var(--ui-text-muted);
    line-height: 1.55;
}
.ui-payroll-final-decision__stats { grid-template-columns: repeat(4, minmax(105px, 1fr)); }
.ui-payroll-final-decision > .ui-salary-step-dock { grid-column: 1 / -1; margin-top: 0; }
.ui-payroll-final-decision .ui-salary-step-bar {
    border-radius: 14px;
    box-shadow: none;
    background: rgba(255, 255, 255, .82);
}
.ui-payroll-final-context {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: hidden;
    border-block: 1px solid var(--ui-border);
    background: var(--ui-surface-soft);
}
.ui-payroll-final-context > div {
    min-width: 0;
    padding: var(--ui-space-3) var(--ui-space-4);
    border-right: 1px solid var(--ui-border);
}
.ui-payroll-final-context > div:last-child { border-right: 0; }
.ui-payroll-final-context span,
.ui-payroll-final-context strong { display: block; }
.ui-payroll-final-context span {
    color: var(--ui-text-muted);
    font-size: 12px;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.ui-payroll-final-context strong {
    margin-top: 7px;
    color: var(--ui-text-strong);
    line-height: 1.35;
    overflow-wrap: anywhere;
}
.ui-payroll-final-issues { overflow: hidden; }
.ui-payroll-final-issues > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ui-space-3);
    padding: var(--ui-space-4) var(--ui-space-5);
    cursor: pointer;
}
.ui-payroll-final-issues > summary span { color: var(--ui-text-muted); font-size: 13px; }
.ui-payroll-final-issues > .ui-note { margin: 0 var(--ui-space-5) var(--ui-space-5); }

.ui-payroll-report-tabs { display: grid; grid-template-columns: 1fr; gap: var(--ui-space-3); }
.ui-payroll-report-group { display: grid; gap: 8px; min-width: 0; }
.ui-payroll-report-group__title {
    margin: 0;
    color: var(--ui-text-muted);
    font-size: 11px;
    font-weight: 950;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.ui-payroll-report-group__items {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 8px;
}
.ui-payroll-report-panel .ui-table tfoot th,
.ui-payroll-report-panel .ui-table tfoot td {
    border-top: 2px solid #aec4ea;
    background: #edf4ff;
    color: var(--ui-text-strong);
    font-weight: 950;
}
.ui-payroll-report-panel .ui-money,
.ui-payroll-report-panel .numeric { font-variant-numeric: tabular-nums; }
.ui-payroll-report-workspace { position: static; }

@media (max-width: 1180px) {
    .ui-payroll-final-kpis { --ui-kpi-columns: 2; }
    .ui-payroll-final-decision { grid-template-columns: 1fr; }
    .ui-payroll-final-decision__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ui-payroll-final-context { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ui-payroll-final-context > div:nth-child(2) { border-right: 0; }
    .ui-payroll-final-context > div:nth-child(-n+2) { border-bottom: 1px solid var(--ui-border); }
    .ui-payroll-report-group__items { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
    .ui-payroll-final-kpis { --ui-kpi-columns: 1; }
    .ui-payroll-final-kpi strong { white-space: normal; }
    .ui-payroll-final-decision { padding: var(--ui-space-4); }
    .ui-payroll-final-decision__title { flex-direction: column; }
    .ui-payroll-final-decision__stats { grid-template-columns: 1fr 1fr; }
    .ui-payroll-final-context { grid-template-columns: 1fr; }
    .ui-payroll-final-context > div { border-right: 0; border-bottom: 1px solid var(--ui-border); }
    .ui-payroll-final-context > div:last-child { border-bottom: 0; }
    .ui-payroll-report-tabs { display: none; }
    .ui-payroll-report-group__items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* R4B-P0D-HF55 — nhóm đầu vào kết hợp và danh sách ngày trong bảng. */
.ui-payroll-input-summary {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.ui-payroll-report-subsection {
    display: grid;
    gap: var(--ui-space-4);
    overflow: hidden;
    border: 1px solid var(--ui-border);
    border-radius: 16px;
    background: var(--ui-surface);
}
.ui-payroll-report-subsection__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--ui-space-4);
    padding: var(--ui-space-4) var(--ui-space-5);
    border-bottom: 1px solid var(--ui-border);
    background: var(--ui-surface-soft);
}
.ui-payroll-report-subsection__header h3 {
    margin: 5px 0 0;
    color: var(--ui-text-strong);
    font-size: 18px;
    line-height: 1.25;
}
.ui-payroll-report-subsection__header small {
    max-width: 420px;
    color: var(--ui-text-muted);
    font-weight: 700;
    line-height: 1.45;
    text-align: right;
}
.ui-payroll-report-subsection > .ui-grid-3,
.ui-payroll-report-subsection > .ui-action-bar,
.ui-payroll-report-subsection > .ui-note {
    margin-inline: var(--ui-space-5);
}
.ui-payroll-report-subsection > .ui-grid-3 { margin-top: 0; }
.ui-payroll-report-subsection > .ui-note { margin-bottom: var(--ui-space-5); }
.ui-payroll-report-subsection > .ui-data-shell { margin: 0; border: 0; border-radius: 0; }
.ui-payroll-report-subsection > .ui-data-shell .ui-data-scroll { border-bottom: 0; }

.ui-table-cell--date-list {
    min-width: 145px;
    max-width: 290px;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.5;
}
.ui-table-cell--empty {
    color: var(--ui-text-muted);
    font-weight: 650;
}

@media (max-width: 900px) {
    .ui-payroll-input-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ui-payroll-report-subsection__header { flex-direction: column; }
    .ui-payroll-report-subsection__header small { max-width: none; text-align: left; }
}
@media (max-width: 620px) {
    .ui-payroll-input-summary { grid-template-columns: 1fr; }
    .ui-payroll-report-subsection > .ui-grid-3,
    .ui-payroll-report-subsection > .ui-action-bar,
    .ui-payroll-report-subsection > .ui-note { margin-inline: var(--ui-space-4); }
}

/* R4B-P0D-HF56 — 5 nhóm báo cáo cuối. */
@media (min-width:1181px){.ui-payroll-report-workspace--five-groups .ui-payroll-report-group__items{grid-template-columns:repeat(5,minmax(0,1fr));}}
.ui-payroll-report-output + .ui-payroll-report-output{margin-top:var(--ui-space-5);border-top:2px solid var(--ui-border);padding-top:var(--ui-space-5);}

/* R4B-P0D-HF57 — Global report table và chế độ chụp. */
.ui-report-table{min-width:900px;table-layout:auto}.ui-report-table th,.ui-report-table td{white-space:normal;font-variant-numeric:tabular-nums}.ui-report-table thead th{vertical-align:bottom}.ui-report-table thead th small{display:block;max-width:180px;margin-top:4px;color:var(--ui-text-muted);font-size:11px;line-height:1.3;font-weight:700;text-transform:none;letter-spacing:0}.ui-report-table th a{color:inherit;text-decoration:none}.ui-report-table th a:hover{color:var(--ui-primary-strong);text-decoration:underline}.ui-report-table td small{display:block;max-width:240px;margin-top:4px;color:var(--ui-text-muted);line-height:1.35}.ui-report-table__group-row th{padding-block:9px;color:#355270;background:#edf4ff;border-bottom-color:#c5d7f3;font-size:11px;text-align:center;text-transform:uppercase;letter-spacing:.055em}.ui-report-table__group-row th:first-child{text-align:left}.ui-report-table tfoot th,.ui-report-table tfoot td{color:var(--ui-text-strong);background:#eaf2ff;font-weight:950}.ui-report-table__grand-total th,.ui-report-table__grand-total td{border-top:3px solid #6f9fe8;box-shadow:inset 0 1px 0 rgba(255,255,255,.8)}.ui-report-table__employee{min-width:190px}.ui-report-cell--deduction{color:#9a4d36;background:#fff8f5!important;font-weight:850}.ui-report-cell--transfer,.ui-report-cell--total{color:#174ea6;background:#eef4ff!important;font-weight:950}.ui-report-cell--final{color:var(--ui-success);background:var(--ui-success-soft)!important;font-weight:950}.ui-report-cell--warning{color:var(--ui-warning);background:var(--ui-warning-soft)!important;font-weight:950}
body.is-payroll-report-capture{background:#151515!important;color:#f7f7f7}body.is-payroll-report-capture .topbar,body.is-payroll-report-capture .ui-workspace-header,body.is-payroll-report-capture .ui-payroll-final-kpis,body.is-payroll-report-capture .ui-payroll-final-decision,body.is-payroll-report-capture .ui-payroll-final-context,body.is-payroll-report-capture .ui-payroll-final-issues,body.is-payroll-report-capture .ui-payroll-report-workspace__header>div:first-child,body.is-payroll-report-capture .ui-payroll-report-tabs,body.is-payroll-report-capture .ui-payroll-report-select,body.is-payroll-report-capture .ui-payroll-report-select-label,body.is-payroll-report-capture .ui-payroll-report-workspace__actions>*:not([data-report-capture]),body.is-payroll-report-capture .is-capture-target .ui-pager,body.is-payroll-report-capture .is-capture-target .ui-toolbar{display:none!important}body.is-payroll-report-capture .ui-page,body.is-payroll-report-capture .ui-shell,body.is-payroll-report-capture .ui-payroll-report-panels{width:100%!important;max-width:none!important;padding:0!important;margin:0!important;background:#151515!important}body.is-payroll-report-capture .ui-payroll-report-workspace{padding:12px 20px;border:0;background:#151515}body.is-payroll-report-capture .ui-payroll-report-workspace__header{justify-content:flex-end}body.is-payroll-report-capture [data-report-capture]{position:sticky;top:12px;z-index:40;color:#fff;border-color:#666;background:#2b2b2b}body.is-payroll-report-capture .is-capture-target{display:block!important;width:min(1500px,calc(100% - 28px));margin:0 auto 32px!important;padding:28px!important;border:1px solid #393939!important;border-radius:18px!important;background:#202020!important;color:#f7f7f7!important;box-shadow:none!important}body.is-payroll-report-capture .is-capture-target h1,body.is-payroll-report-capture .is-capture-target h2,body.is-payroll-report-capture .is-capture-target h3,body.is-payroll-report-capture .is-capture-target strong{color:#fff!important}body.is-payroll-report-capture .is-capture-target p,body.is-payroll-report-capture .is-capture-target small{color:#d8d8d8!important}body.is-payroll-report-capture .is-capture-target .ui-data-shell,body.is-payroll-report-capture .is-capture-target .ui-data-scroll,body.is-payroll-report-capture .is-capture-target .ui-payroll-report-subsection{border-color:#3a3a3a!important;background:#202020!important}body.is-payroll-report-capture .is-capture-target .ui-report-table{min-width:100%;color:#f7f7f7;background:#202020}body.is-payroll-report-capture .is-capture-target .ui-report-table th,body.is-payroll-report-capture .is-capture-target .ui-report-table td{color:#f7f7f7!important;border-color:#343434!important;background:#202020!important}body.is-payroll-report-capture .is-capture-target .ui-report-table thead th,body.is-payroll-report-capture .is-capture-target .ui-report-table__group-row th,body.is-payroll-report-capture .is-capture-target .ui-report-table tfoot th,body.is-payroll-report-capture .is-capture-target .ui-report-table tfoot td{color:#fff!important;background:#292929!important}body.is-payroll-report-capture .is-capture-target .ui-report-cell--total,body.is-payroll-report-capture .is-capture-target .ui-report-cell--transfer{color:#cfe1ff!important;background:#243149!important}body.is-payroll-report-capture .is-capture-target .ui-report-cell--final{color:#b8f2cf!important;background:#173b2a!important}body.is-payroll-report-capture .is-capture-target .ui-report-cell--deduction,body.is-payroll-report-capture .is-capture-target .ui-report-cell--warning{color:#ffd3bf!important;background:#43291f!important}

/* R4B-P0D-HF60 — report guidance, six groups and compact employee cards. */
@media (min-width: 1181px) {
    .ui-payroll-report-workspace--six-groups .ui-payroll-report-group__items {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

.ui-report-guide {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--ui-space-3);
}
.ui-report-guide > article {
    min-width: 0;
    padding: var(--ui-space-4);
    border: 1px solid var(--ui-border);
    border-radius: 14px;
    background: var(--ui-surface-soft);
}
.ui-report-guide__primary { border-color: #a9c9f8 !important; background: #f4f8ff !important; }
.ui-report-guide__attention { border-color: #f1cc8c !important; background: #fffaf0 !important; }
.ui-report-guide__steps { border-color: #b4ddc2 !important; background: #f4fcf7 !important; }
.ui-report-guide span,
.ui-report-fact-grid span,
.ui-employee-summary-card dt {
    display: block;
    color: var(--ui-text-muted);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .045em;
    text-transform: uppercase;
}
.ui-report-guide strong {
    display: block;
    margin-top: 7px;
    color: var(--ui-text-strong);
    font-size: 17px;
    line-height: 1.35;
}
.ui-report-guide p {
    margin: 7px 0 0;
    color: var(--ui-text-muted);
    line-height: 1.5;
}
.ui-report-guide ol {
    margin: 7px 0 0;
    padding-left: 20px;
    color: var(--ui-text-strong);
    line-height: 1.55;
}

.ui-report-fact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--ui-space-3);
}
.ui-report-fact-grid > div {
    min-width: 0;
    padding: var(--ui-space-3) var(--ui-space-4);
    border: 1px solid var(--ui-border);
    border-radius: 13px;
    background: var(--ui-surface);
}
.ui-report-fact-grid strong {
    display: block;
    margin-top: 6px;
    color: var(--ui-text-strong);
    font-size: 18px;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}
.ui-report-inline-conclusion {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ui-space-3);
    padding: var(--ui-space-3) var(--ui-space-4);
    margin-inline: var(--ui-space-5);
    border: 1px solid #b6d8c1;
    border-radius: 12px;
    background: var(--ui-success-soft);
}
.ui-report-inline-conclusion strong { color: var(--ui-text-strong); }
.ui-report-inline-conclusion span { color: var(--ui-success); font-weight: 900; }
.ui-report-formula {
    padding: var(--ui-space-3) var(--ui-space-4);
    margin-inline: var(--ui-space-5);
    border-left: 4px solid #76a5ed;
    border-radius: 0 10px 10px 0;
    background: #f5f8ff;
    color: var(--ui-text-muted);
    line-height: 1.55;
}
.ui-report-formula strong { color: var(--ui-text-strong); }
.ui-report-people-groups {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ui-space-3);
    margin-inline: var(--ui-space-5);
}
.ui-report-people-groups > div {
    padding: var(--ui-space-3) var(--ui-space-4);
    border: 1px solid var(--ui-border);
    border-radius: 12px;
    background: var(--ui-surface-soft);
}
.ui-report-people-groups span,
.ui-report-people-groups strong { display: block; }
.ui-report-people-groups span { color: var(--ui-text-muted); font-size: 12px; font-weight: 850; }
.ui-report-people-groups strong { margin-top: 5px; color: var(--ui-text-strong); line-height: 1.45; }

.ui-employee-card-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--ui-space-4);
}
.ui-employee-summary-card {
    display: grid;
    gap: var(--ui-space-4);
    min-width: 0;
    padding: var(--ui-space-4);
    border: 1px solid var(--ui-border);
    border-radius: 16px;
    background: var(--ui-surface);
    box-shadow: var(--ui-shadow-soft);
}
.ui-employee-summary-card--warning { border-color: #e9c177; background: #fffdf8; }
.ui-employee-summary-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--ui-space-3);
}
.ui-employee-summary-card__header strong,
.ui-employee-summary-card__header small { display: block; }
.ui-employee-summary-card__header strong { color: var(--ui-text-strong); font-size: 17px; }
.ui-employee-summary-card__header small { margin-top: 3px; color: var(--ui-text-muted); overflow-wrap: anywhere; }
.ui-employee-summary-card__metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
}
.ui-employee-summary-card__metrics > div {
    min-width: 0;
    padding: 10px;
    border-radius: 10px;
    background: var(--ui-surface-soft);
}
.ui-employee-summary-card__metrics dd {
    margin: 5px 0 0;
    color: var(--ui-text-strong);
    font-weight: 950;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}
.ui-employee-summary-card__metrics small {
    display: block;
    grid-column: 1 / -1;
    margin-top: 5px;
    color: var(--ui-text-muted);
    font-size: .75rem;
    font-weight: 700;
    line-height: 1.35;
}
.ui-employee-summary-card__wide { grid-column: 1 / -1; }
.ui-employee-summary-card__section {
    display: grid;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--ui-border);
}
.ui-employee-summary-card__section--context { padding-top: 0; border-top: 0; }
.ui-employee-summary-card__section--final { padding-top: 10px; }
.ui-employee-summary-card__section-title {
    color: var(--ui-text-muted);
    font-size: .72rem;
    font-weight: 950;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.ui-employee-summary-card__section-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
}
.ui-employee-summary-card__section-grid > div {
    min-width: 0;
    padding: 10px;
    border-radius: 10px;
    background: var(--ui-surface-soft);
}
.ui-employee-summary-card__section-grid dd {
    margin: 5px 0 0;
    color: var(--ui-text-strong);
    font-weight: 950;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}
.ui-employee-summary-card__section-grid small {
    display: block;
    margin-top: 5px;
    color: var(--ui-text-muted);
    font-size: .75rem;
    font-weight: 700;
    line-height: 1.35;
}
.ui-employee-summary-card dt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.ui-context-edit-link {
    flex: 0 0 auto;
    color: var(--ui-primary);
    font-size: .72rem;
    font-weight: 900;
    text-decoration: none;
}
.ui-context-edit-link:hover { text-decoration: underline; }
.ui-employee-summary-card__footer { display: flex; justify-content: flex-end; }
.ui-employee-summary-card__footer .button { width: 100%; justify-content: center; }

@media (max-width: 1180px) {
    .ui-report-guide { grid-template-columns: 1fr; }
    .ui-employee-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
    .ui-report-people-groups,
    .ui-employee-card-grid,
    .ui-employee-summary-card__section-grid { grid-template-columns: 1fr; }
    .ui-report-inline-conclusion { align-items: flex-start; flex-direction: column; margin-inline: var(--ui-space-4); }
    .ui-report-formula,
    .ui-report-people-groups { margin-inline: var(--ui-space-4); }
}

body.is-payroll-report-capture .is-capture-target .ui-report-guide > article,
body.is-payroll-report-capture .is-capture-target .ui-report-fact-grid > div,
body.is-payroll-report-capture .is-capture-target .ui-report-inline-conclusion,
body.is-payroll-report-capture .is-capture-target .ui-report-formula,
body.is-payroll-report-capture .is-capture-target .ui-report-people-groups > div,
body.is-payroll-report-capture .is-capture-target .ui-employee-summary-card,
body.is-payroll-report-capture .is-capture-target .ui-employee-summary-card__metrics > div,
body.is-payroll-report-capture .is-capture-target .ui-employee-summary-card__section-grid > div {
    color: #f7f7f7 !important;
    border-color: #3a3a3a !important;
    background: #242424 !important;
}
body.is-payroll-report-capture .is-capture-target .ui-report-guide span,
body.is-payroll-report-capture .is-capture-target .ui-report-fact-grid span,
body.is-payroll-report-capture .is-capture-target .ui-employee-summary-card dt { color: #bfc6d1 !important; }
body.is-payroll-report-capture .is-capture-target .ui-employee-summary-card__footer { display: none !important; }

/* R4B-P0D-HF61 — blocker có chủ sở hữu và workspace cấn dùng chung. */
.ui-blocker-resolution-list {
    display: grid;
    gap: var(--ui-space-3);
    padding-top: var(--ui-space-3);
}
.ui-blocker-resolution {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--ui-space-4);
    padding: var(--ui-space-4);
    border: 1px solid #f1b7b0;
    border-radius: 14px;
    background: #fff8f7;
}
.ui-blocker-resolution__marker {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    color: #fff;
    background: #c9362b;
    font-weight: 950;
}
.ui-blocker-resolution__body { min-width: 0; }
.ui-blocker-resolution__body h3 { margin: 2px 0 6px; color: var(--ui-text-strong); font-size: 17px; }
.ui-blocker-resolution__body p { margin: 4px 0 0; color: var(--ui-text-muted); line-height: 1.5; }
.ui-blocker-resolution__body .ui-blocker-resolution__message { color: var(--ui-text-strong); font-weight: 800; }
.ui-blocker-resolution__action { justify-self: end; white-space: nowrap; }

.ui-offset-workspace .ui-section-header { align-items: flex-start; }
.ui-offset-trace-link { display: inline-flex; align-items: center; gap: 4px; color: var(--ui-primary); font-weight: 950; text-decoration: none; }
.ui-offset-trace-link:hover { color: var(--ui-primary-strong); text-decoration: underline; }
.ui-offset-table input { min-width: 150px; }
.ui-offset-table td:nth-child(5) input { min-width: 250px; }
.ui-offset-table .ui-row--warning > td { background: #fffaf0; }
.ui-offset-table tr[id] { scroll-margin-top: 230px; }
.ui-offset-table tr:target > td { background: #eef5ff; box-shadow: inset 0 2px 0 #8ab4ff, inset 0 -2px 0 #8ab4ff; }
.ui-cross-period-advance .button-compact { min-height: 34px; padding: 7px 10px; white-space: nowrap; }

@media (max-width: 860px) {
    .ui-blocker-resolution { grid-template-columns: auto minmax(0, 1fr); }
    .ui-blocker-resolution__action { grid-column: 1 / -1; width: 100%; justify-content: center; }
}

/* R4B-P0D-HF62 — Global Report Table V2: one visual/interaction contract for payroll reports. */
.ui-report-table-shell {
    --ui-report-identity-bg: #fbfdff;
    --ui-report-derived-bg: #f4f7fc;
    --ui-report-deduction-bg: #fff7f2;
    --ui-report-transfer-bg: #f0f5ff;
    --ui-report-result-bg: #edfbf3;
    --ui-report-status-bg: #f7f9fc;
    border: 1px solid var(--ui-border);
    border-radius: 15px;
    overflow: hidden;
    background: var(--ui-surface);
}

.ui-report-table-shell > .ui-data-scroll {
    margin: 0;
    border: 0;
    border-radius: 0;
    scrollbar-gutter: auto;
}

.ui-report-table-toolbar {
    margin: 0;
    padding: 12px 14px;
    border: 0;
    border-bottom: 1px solid var(--ui-border);
    border-radius: 0;
    background: #f7faff;
}

.ui-report-table-toolbar .filter-search {
    min-width: min(360px, 100%);
    margin: 0;
}

.ui-report-table-toolbar .ui-pager {
    margin: 0;
    padding: 0;
}

.ui-report-table-shell > .ui-data-table-client-pager {
    margin: 0;
    padding: 11px 14px 13px;
    border-top: 1px solid var(--ui-border);
    background: #fbfdff;
}

.ui-report-table-v2 {
    width: 100%;
    min-width: 760px;
    border-collapse: separate;
    border-spacing: 0;
    color: var(--ui-text);
    font-variant-numeric: tabular-nums;
}

.ui-report-table-v2 th,
.ui-report-table-v2 td {
    padding: 11px 12px;
    border-right: 1px solid #d6e0ef;
    border-bottom: 1px solid #d6e0ef;
    line-height: 1.35;
}

.ui-report-table-v2 tr > :last-child { border-right: 0; }
.ui-report-table-v2 tbody tr:last-child > * { border-bottom: 0; }

.ui-report-table-v2 thead th {
    color: #102542;
    background: #edf3ff;
    font-size: .82rem;
    font-weight: 900;
    vertical-align: middle;
}

.ui-report-table-v2 .ui-report-table__group-row th {
    padding-block: 9px;
    color: #284a72;
    background: #e6efff;
    border-bottom-color: #b9cbea;
    font-size: .72rem;
    letter-spacing: .055em;
    text-align: center;
    text-transform: uppercase;
}

.ui-report-table-v2 .ui-report-table__group-row th[rowspan] { text-align: left; }

.ui-report-table-v2 tbody tr:hover > td {
    box-shadow: inset 0 0 0 999px rgba(37, 99, 235, .025);
}

.ui-report-table-v2 .ui-report-col--identity { background: var(--ui-report-identity-bg); }
.ui-report-table-v2 .ui-report-col--input { background: #fff; }
.ui-report-table-v2 .ui-report-col--derived { background: var(--ui-report-derived-bg); }
.ui-report-table-v2 .ui-report-col--deduction { color: #914423; background: var(--ui-report-deduction-bg); }
.ui-report-table-v2 .ui-report-col--transfer { color: #174ea6; background: var(--ui-report-transfer-bg); }
.ui-report-table-v2 .ui-report-col--result { color: #08783f; background: var(--ui-report-result-bg); font-weight: 900; }
.ui-report-table-v2 .ui-report-col--status { background: var(--ui-report-status-bg); }
.ui-report-table-v2 .ui-report-col--note { color: var(--ui-text-muted); background: #fbfcfe; }

.ui-report-table-v2 tbody .ui-report-col--identity strong { color: var(--ui-text-strong); font-weight: 900; }
.ui-report-table-v2 tbody .ui-report-col--identity small { color: var(--ui-text-muted); }
.ui-report-table-v2 .ui-report-cell--zero {
    color: #8792a4 !important;
    background: #fbfcfe !important;
    font-weight: 650 !important;
}
.ui-report-table-v2 .ui-report-cell--positive { color: #08783f; font-weight: 900; }
.ui-report-table-v2 .ui-report-cell--negative-watch { color: #a65d00; font-weight: 850; }

.ui-report-table-v2 .numeric,
.ui-report-table-v2 .ui-money,
.ui-report-table-v2 [data-label*="Tổng"],
.ui-report-table-v2 [data-label*="Lương"],
.ui-report-table-v2 [data-label*="Thưởng"],
.ui-report-table-v2 [data-label*="Ứng"],
.ui-report-table-v2 [data-label*="Cấn"] { text-align: right; }

.ui-report-table-v2 tfoot th,
.ui-report-table-v2 tfoot td {
    color: #102542;
    background: #e8f0ff !important;
    border-top: 2px solid #7aa4ed;
    font-weight: 950;
}

.ui-report-table-v2 .ui-report-col--sticky-identity {
    position: sticky;
    left: var(--ui-report-sticky-left, 0);
    z-index: 2;
    box-shadow: 1px 0 0 #cbd8eb;
}
.ui-report-table-v2 thead .ui-report-col--sticky-identity { z-index: 5; }

.ui-report-table-v2 .ui-table-sort {
    width: 100%;
    min-height: 24px;
    justify-content: inherit;
    color: inherit;
    font: inherit;
    font-weight: inherit;
    text-align: inherit;
}

.ui-report-table-v2 th.numeric .ui-table-sort { justify-content: flex-end; }
.ui-report-table-v2 .ui-table-sort__icon { opacity: .45; }
.ui-report-table-v2 th.is-sorted .ui-table-sort__icon { opacity: 1; }

body.is-payroll-report-capture .is-capture-target .ui-report-table-toolbar,
body.is-payroll-report-capture .is-capture-target .ui-data-table-client-pager,
body.is-payroll-report-printing .ui-report-table-toolbar,
body.is-payroll-report-printing .ui-data-table-client-pager { display: none !important; }

body.is-payroll-report-capture .is-capture-target .ui-report-table-shell {
    --ui-report-identity-bg: #202020;
    --ui-report-derived-bg: #252a31;
    --ui-report-deduction-bg: #3d281f;
    --ui-report-transfer-bg: #233149;
    --ui-report-result-bg: #173b2a;
    --ui-report-status-bg: #252525;
    border-color: #3c3c3c;
    background: #202020;
}
body.is-payroll-report-capture .is-capture-target .ui-report-table-v2 .ui-report-col--deduction { color: #ffd3bf !important; }
body.is-payroll-report-capture .is-capture-target .ui-report-table-v2 .ui-report-col--transfer { color: #cfe1ff !important; }
body.is-payroll-report-capture .is-capture-target .ui-report-table-v2 .ui-report-col--result { color: #b8f2cf !important; }
body.is-payroll-report-capture .is-capture-target .ui-report-table-v2 .ui-report-cell--zero { color: #9da3ad !important; background: #242424 !important; }

@media (max-width: 800px) {
    .ui-report-table-toolbar { align-items: stretch; }
    .ui-report-table-toolbar .filter-search,
    .ui-report-table-toolbar .ui-pager { flex: 1 1 100%; max-width: none; }
    .ui-report-table-v2 { min-width: 680px; }
}

@media print {
    .ui-report-table-v2 { min-width: 0 !important; font-size: 9pt; }
    .ui-report-table-v2 th,
    .ui-report-table-v2 td { padding: 6px 7px; }
    .ui-report-table-v2 .ui-report-col--sticky-identity { position: static; box-shadow: none; }
}


/* R4B-P0D-HF71 — Global Table Visual Hierarchy: nguồn → dẫn xuất → điều chỉnh → kết quả. */
.ui-report-table-v2 thead th.ui-report-col--identity { background: #eaf1ff; }
.ui-report-table-v2 thead th.ui-report-col--input { background: #f7f9fd; }
.ui-report-table-v2 thead th.ui-report-col--derived { background: #edf3fb; }
.ui-report-table-v2 thead th.ui-report-col--deduction { color: #7f381d; background: #fff0e8; }
.ui-report-table-v2 thead th.ui-report-col--transfer { color: #174ea6; background: #e6efff; }
.ui-report-table-v2 thead th.ui-report-col--result { color: #08783f; background: #ddf5e8; }
.ui-report-table-v2 thead th.ui-report-col--status { background: #eef2f8; }
.ui-report-table-v2 thead th.ui-report-col--note { background: #f8fafc; }

.ui-report-table-v2 tbody td.ui-report-col--input { color: var(--ui-text); font-weight: 700; }
.ui-report-table-v2 tbody td.ui-report-col--derived { color: #173a66; font-weight: 800; }
.ui-report-table-v2 tbody td.ui-report-col--transfer { font-weight: 850; }
.ui-report-table-v2 tr > :not(.ui-report-col--derived) + .ui-report-col--derived { border-left: 2px solid #d7e3f5; }
.ui-report-table-v2 tr > :not(.ui-report-col--deduction) + .ui-report-col--deduction { border-left: 2px solid #f0c9b7; }
.ui-report-table-v2 tr > :not(.ui-report-col--transfer) + .ui-report-col--transfer { border-left: 2px solid #b9cff2; }
.ui-report-table-v2 tr > :not(.ui-report-col--result) + .ui-report-col--result { border-left: 3px solid #8dd0aa; }
.ui-report-table-v2 tbody td.ui-report-col--status { font-weight: 850; }
.ui-report-table-v2 tbody td.ui-report-col--note { font-size: .92rem; line-height: 1.45; }
.ui-report-table-v2 tbody td.ui-report-col--identity { min-width: 178px; }

.ui-report-table-v2 .ui-report-cell--positive { color: #08783f; font-weight: 950; }
.ui-report-table-v2 .ui-report-cell--negative-watch { color: #a65700; background: #fff8ec !important; font-weight: 900; }
.ui-report-table-v2 .ui-report-cell--zero { color: #8a95a6 !important; background: #fbfcfe !important; font-weight: 650 !important; }
.ui-report-table-v2 tfoot .ui-report-col--result,
.ui-report-table-v2 tfoot .ui-report-col--transfer { font-weight: 950; }

.ui-employee-summary-card__badges {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--ui-space-2);
}
.ui-employee-summary-card__metric--source { background: var(--ui-surface-soft); }
.ui-employee-summary-card__metric--derived { background: #f0f5ff !important; }
.ui-employee-summary-card__metric--result { background: var(--ui-primary-soft) !important; }
.ui-employee-summary-card__metric--final { background: var(--ui-success-soft) !important; border: 1px solid #b7dfc5; }
.ui-employee-summary-card__metric--final dt,
.ui-employee-summary-card__metric--final dd { color: var(--ui-success); }
.ui-employee-summary-card__metric--warning { background: var(--ui-warning-soft) !important; border: 1px solid #f0cf91; }
.ui-employee-summary-card__metric--warning dt,
.ui-employee-summary-card__metric--warning dd { color: var(--ui-warning); }
.ui-employee-summary-card__metric--deduction dd { color: #8d452b; }

body.is-payroll-report-capture .is-capture-target .ui-report-table-v2 thead th.ui-report-col--identity,
body.is-payroll-report-capture .is-capture-target .ui-report-table-v2 thead th.ui-report-col--input,
body.is-payroll-report-capture .is-capture-target .ui-report-table-v2 thead th.ui-report-col--derived,
body.is-payroll-report-capture .is-capture-target .ui-report-table-v2 thead th.ui-report-col--deduction,
body.is-payroll-report-capture .is-capture-target .ui-report-table-v2 thead th.ui-report-col--transfer,
body.is-payroll-report-capture .is-capture-target .ui-report-table-v2 thead th.ui-report-col--result,
body.is-payroll-report-capture .is-capture-target .ui-report-table-v2 thead th.ui-report-col--status,
body.is-payroll-report-capture .is-capture-target .ui-report-table-v2 thead th.ui-report-col--note { background: #292929 !important; color: #fff !important; }
body.is-payroll-report-capture .is-capture-target .ui-employee-summary-card__metric--source,
body.is-payroll-report-capture .is-capture-target .ui-employee-summary-card__metric--derived,
body.is-payroll-report-capture .is-capture-target .ui-employee-summary-card__metric--result,
body.is-payroll-report-capture .is-capture-target .ui-employee-summary-card__metric--final,
body.is-payroll-report-capture .is-capture-target .ui-employee-summary-card__metric--warning { border-color: #3a3a3a !important; background: #242424 !important; }
body.is-payroll-report-capture .is-capture-target .ui-employee-summary-card__metrics dd,
body.is-payroll-report-capture .is-capture-target .ui-employee-summary-card__section-grid dd { color: #fff !important; }
body.is-payroll-report-capture .is-capture-target .ui-employee-summary-card__metrics small,
body.is-payroll-report-capture .is-capture-target .ui-employee-summary-card__section-grid small,
body.is-payroll-report-capture .is-capture-target .ui-employee-summary-card__section-title { color: #cbd5e1 !important; }
body.is-payroll-report-capture .is-capture-target .ui-employee-summary-card__metric--final dd { color: #b8f2cf !important; }
body.is-payroll-report-capture .is-capture-target .ui-employee-summary-card__metric--warning dd,
body.is-payroll-report-capture .is-capture-target .ui-employee-summary-card__metric--deduction dd { color: #ffd3bf !important; }

/* R4B-P0D-HF68 — Nút về đầu trang Global, tự né action dock ở đáy. */
.ui-back-to-top {
    position: fixed;
    z-index: 86;
    right: max(18px, env(safe-area-inset-right));
    bottom: max(18px, env(safe-area-inset-bottom));
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid #b9cef5;
    border-radius: 999px;
    background: rgba(255, 255, 255, .97);
    color: var(--ui-primary, #2563eb);
    box-shadow: 0 12px 30px rgba(16, 36, 64, .18);
    font: inherit;
    font-size: 24px;
    font-weight: 900;
    line-height: 1;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(10px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s ease, bottom .18s ease;
    cursor: pointer;
}
.ui-back-to-top:hover {
    border-color: var(--ui-primary, #2563eb);
    background: var(--ui-primary-soft, #edf4ff);
}
.ui-back-to-top:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--ui-primary, #2563eb) 28%, transparent);
    outline-offset: 3px;
}
.ui-back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}
body.has-ui-action-dock .ui-back-to-top,
body.has-ui-salary-step-dock .ui-back-to-top {
    bottom: calc(max(var(--ui-action-dock-height, 0px), var(--ui-salary-dock-height, 0px)) + max(30px, env(safe-area-inset-bottom)));
}
body.is-payroll-report-printing .ui-back-to-top { display: none !important; }
@media (max-width: 720px) {
    .ui-back-to-top {
        right: max(12px, env(safe-area-inset-right));
        bottom: max(12px, env(safe-area-inset-bottom));
        width: 42px;
        height: 42px;
        font-size: 22px;
    }
    body.has-ui-action-dock .ui-back-to-top,
    body.has-ui-salary-step-dock .ui-back-to-top {
        bottom: calc(max(var(--ui-action-dock-height, 0px), var(--ui-salary-dock-height, 0px)) + max(18px, env(safe-area-inset-bottom)));
    }
}
@media print {
    .ui-back-to-top { display: none !important; }
}

/* R4B-P0D-HF78 — workspace tabs trung tính và action dock không làm mờ dữ liệu.
   HF81: tab phải lấp đầy đúng ô grid; panel không hoạt động phải ẩn tuyệt đối dù panel cũng dùng ui-stack/display:grid. */
.ui-advance-workspace-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 8px;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-card);
    background: var(--ui-surface);
}
.ui-advance-workspace-tabs .ui-tab {
    width: 100%;
    max-width: none;
    justify-content: flex-start;
    min-height: 66px;
}
.ui-advance-workspace [data-workspace-panel][hidden] {
    display: none !important;
}
.ui-advance-workspace-tabs .ui-tab__copy {
    display: grid;
    gap: 4px;
    min-width: 0;
    text-align: left;
}
.ui-advance-workspace-tabs .ui-tab__copy strong,
.ui-advance-workspace-tabs .ui-tab__copy small { display: block; }
.ui-advance-workspace-tabs .ui-tab__copy small {
    color: var(--ui-text-muted);
    font-size: 12px;
    font-weight: 700;
}
.ui-salary-step-bar {
    background: #fff;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
.ui-salary-step-bar--dirty { background: #fffbed; }
.ui-salary-step-bar--ready,
.ui-salary-step-bar--locked { background: #f7fbff; }
.ui-salary-step-bar--blocked { background: #fff9f7; }
.ui-salary-step-bar--readonly { background: #f8faff; }
@media (max-width: 620px) {
    .ui-advance-workspace-tabs { grid-template-columns: 1fr; }
}

/* R4B-P0D-HF87C-HF2B — Global Date Range: one shared range picker for all Từ ngày / Đến ngày pairs. */
.ui-global-date-range-input {
    font-variant-numeric: tabular-nums;
}

.ui-date-range-popover {
    position: fixed;
    z-index: 1600;
    width: min(660px, calc(100vw - 20px));
    max-height: min(620px, calc(100vh - 20px));
    overflow: auto;
    padding: 14px;
    border: 1px solid color-mix(in srgb, var(--ui-primary) 20%, var(--ui-border));
    border-radius: 16px;
    background: var(--ui-surface, #fff);
    color: var(--ui-text, #0f2745);
    box-shadow: 0 20px 60px rgba(31, 55, 92, .20);
}

.ui-date-range-popover[hidden] {
    display: none !important;
}

.ui-date-range-head,
.ui-date-range-nav,
.ui-date-range-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.ui-date-range-head {
    padding: 2px 2px 10px;
    border-bottom: 1px solid var(--ui-border);
}

.ui-date-range-head > div {
    display: grid;
    gap: 2px;
}

.ui-date-range-head strong {
    font-size: 15px;
}

.ui-date-range-head small,
.ui-date-range-actions > span {
    color: var(--ui-muted, #64748b);
    font-size: 12px;
}

.ui-date-range-close,
.ui-date-range-nav > button {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--ui-border);
    border-radius: 10px;
    background: var(--ui-surface, #fff);
    color: var(--ui-primary-strong);
    cursor: pointer;
    font: inherit;
    font-size: 22px;
    line-height: 1;
}

.ui-date-range-close:hover,
.ui-date-range-nav > button:hover {
    border-color: color-mix(in srgb, var(--ui-primary) 45%, var(--ui-border));
    background: var(--ui-primary-soft);
}

.ui-date-range-close:focus-visible,
.ui-date-range-nav > button:focus-visible,
.ui-date-range-day:focus-visible {
    outline: none;
    box-shadow: var(--ui-focus-ring);
}

.ui-date-range-nav {
    padding: 10px 0;
}

.ui-date-range-summary {
    min-width: 0;
    text-align: center;
    font-weight: 800;
    color: var(--ui-primary-strong);
    font-variant-numeric: tabular-nums;
}

.ui-date-range-months {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.ui-date-range-month {
    min-width: 0;
    padding: 10px;
    border: 1px solid var(--ui-border);
    border-radius: 12px;
    background: color-mix(in srgb, var(--ui-surface, #fff) 94%, var(--ui-primary-soft));
}

.ui-date-range-month-title {
    margin-bottom: 8px;
    text-align: center;
    font-weight: 800;
}

.ui-date-range-weekdays,
.ui-date-range-days {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 3px;
}

.ui-date-range-weekdays {
    margin-bottom: 3px;
    color: var(--ui-muted, #64748b);
    font-size: 11px;
    font-weight: 700;
    text-align: center;
}

.ui-date-range-weekdays span {
    padding: 4px 0;
}

.ui-date-range-day,
.ui-date-range-day-blank {
    aspect-ratio: 1;
    min-width: 0;
}

.ui-date-range-day {
    position: relative;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

.ui-date-range-day:hover:not(:disabled) {
    background: var(--ui-primary-soft);
}

.ui-date-range-day.is-in-range {
    border-radius: 4px;
    background: color-mix(in srgb, var(--ui-primary-soft) 82%, white);
    color: var(--ui-primary-strong);
}

.ui-date-range-day.is-range-start,
.ui-date-range-day.is-range-end {
    border-radius: 9px;
    background: var(--ui-primary);
    color: #fff;
    font-weight: 800;
}

.ui-date-range-day.is-today:not(.is-range-start):not(.is-range-end)::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 4px;
    width: 4px;
    height: 4px;
    transform: translateX(-50%);
    border-radius: 999px;
    background: var(--ui-primary);
}

.ui-date-range-day:disabled {
    cursor: not-allowed;
    opacity: .28;
}

.ui-date-range-actions {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--ui-border);
}

.ui-date-range-open-ended {
    flex: 0 0 auto;
}

@media (max-width: 720px) {
    .ui-date-range-popover {
        width: calc(100vw - 16px);
        padding: 10px;
        border-radius: 14px;
    }
    .ui-date-range-months {
        grid-template-columns: 1fr;
    }
    .ui-date-range-month--secondary {
        display: none;
    }
    .ui-date-range-actions {
        align-items: stretch;
        flex-direction: column;
    }
    .ui-date-range-open-ended {
        width: 100%;
    }
}

/* Global single-date picker: reuse the canonical range-calendar visual instead of the browser-native popup. */
.ui-date-single-popover {
    width: min(380px, calc(100vw - 20px));
    max-height: min(520px, calc(100vh - 20px));
    padding: 10px;
}

.ui-date-single-toolbar {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) 36px;
    gap: 8px;
    align-items: center;
    padding: 2px 2px 8px;
}

.ui-date-single-toolbar > strong {
    min-width: 0;
    text-align: center;
    color: var(--ui-text, #0f2745);
    font-size: 16px;
    font-weight: 800;
}

.ui-date-single-toolbar > button {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--ui-border);
    border-radius: 10px;
    background: var(--ui-surface, #fff);
    color: var(--ui-primary-strong);
    cursor: pointer;
    font: inherit;
    font-size: 22px;
    line-height: 1;
}

.ui-date-single-toolbar > button:hover {
    border-color: color-mix(in srgb, var(--ui-primary) 45%, var(--ui-border));
    background: var(--ui-primary-soft);
}

.ui-date-single-toolbar > button:focus-visible {
    outline: none;
    box-shadow: var(--ui-focus-ring);
}

.ui-date-single-months {
    grid-template-columns: 1fr;
}

.ui-date-single-popover .ui-date-range-month {
    padding: 12px 14px 14px;
}

.ui-date-single-popover .ui-date-range-month-title {
    display: none;
}

@media (max-width: 480px) {
    .ui-date-single-popover {
        width: calc(100vw - 16px);
        padding: 8px;
    }
}

/* R4B-P0D-HF87C-HF2.2 — Global key/value list for compact read-only facts. */
.ui-key-value-list {
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--ui-border);
}
.ui-key-value-row {
    display: grid;
    grid-template-columns: minmax(150px, 220px) minmax(0, 1fr);
    gap: var(--ui-space-4);
    align-items: start;
    padding: var(--ui-space-3) 0;
    border-bottom: 1px solid var(--ui-border);
}
.ui-key-value-row dt,
.ui-key-value-row dd {
    min-width: 0;
    margin: 0;
}
.ui-key-value-row dt {
    color: var(--ui-text-muted);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .035em;
    text-transform: uppercase;
}
.ui-key-value-row dd {
    color: var(--ui-text-strong);
    font-weight: 850;
    line-height: 1.45;
    overflow-wrap: anywhere;
}
@media (max-width: 720px) {
    .ui-key-value-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 4px;
    }
}

/* HF97.11A.2 — opt-in container-aware responsive tables for tables rendered inside narrow workspaces/master-detail panes. */
.ui-responsive-container {
    container-type: inline-size;
}

@container (max-width: 1040px) {
    .ui-responsive-container .ui-responsive-table--container {
        display: block;
        width: 100%;
        min-width: 0 !important;
        border-collapse: separate;
    }

    .ui-responsive-container .ui-responsive-table--container colgroup,
    .ui-responsive-container .ui-responsive-table--container thead {
        display: none;
    }

    .ui-responsive-container .ui-responsive-table--container tbody {
        display: grid;
        gap: var(--ui-space-3);
        padding: var(--ui-space-3);
    }

    .ui-responsive-container .ui-responsive-table--container tbody tr {
        display: block;
        overflow: hidden;
        border: 1px solid var(--ui-border);
        border-radius: var(--ui-radius-md);
        background: var(--ui-surface);
        box-shadow: 0 5px 16px rgba(16, 36, 64, .05);
    }

    .ui-responsive-container .ui-responsive-table--container tbody td {
        display: grid;
        grid-template-columns: minmax(118px, .82fr) minmax(0, 1.3fr);
        gap: var(--ui-space-3);
        align-items: start;
        width: 100%;
        max-width: none;
        padding: 10px 12px;
        border: 0;
        border-bottom: 1px solid #e8edf4;
        background: transparent !important;
        text-align: right !important;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        overflow-wrap: anywhere;
    }

    .ui-responsive-container .ui-responsive-table--container tbody td:last-child {
        border-bottom: 0;
    }

    .ui-responsive-container .ui-responsive-table--container tbody td[data-label]::before {
        content: attr(data-label);
        color: var(--ui-text-muted);
        font-size: 12px;
        line-height: 1.35;
        font-weight: 850;
        text-align: left;
    }

    .ui-responsive-container .ui-responsive-table--container tbody td:first-child {
        background: var(--ui-primary-soft) !important;
        color: var(--ui-text-strong);
        font-weight: 900;
    }

    .ui-responsive-container .ui-responsive-table--container tbody td:first-child::before {
        color: var(--ui-primary-strong);
    }

    .ui-responsive-container .ui-responsive-table--container .ui-badge {
        justify-self: end;
        max-width: 100%;
        text-align: center;
    }
}


/* GLOBAL SALARY RULEBOOK — shared by Module 2 and Module 3 */
/* F2-HQA18 — Module 2 salary rulebook integration */
.salary-rulebook-shell {
    display: grid;
    gap: 20px;
}
.salary-rulebook-governance {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr);
    gap: 22px;
    align-items: start;
}
.salary-rulebook-governance h2,
.salary-rulebook-index h2,
.salary-rulebook-reader h2 {
    margin: 5px 0 8px;
    color: var(--text-strong);
}
.salary-rulebook-governance p {
    margin: 0;
    color: var(--muted);
    line-height: 1.62;
}
.salary-rulebook-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.salary-rulebook-pills span {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: #f8fbff;
    color: #1d4ed8;
    font-weight: 850;
    padding: 8px 11px;
    font-size: .88rem;
}
.salary-rulebook-layout {
    display: grid;
    grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}
.salary-rulebook-index {
    position: sticky;
    top: 88px;
}
.salary-rulebook-index ol {
    margin: 14px 0 0;
    padding-left: 20px;
    display: grid;
    gap: 8px;
    color: var(--muted);
    line-height: 1.42;
    font-weight: 750;
}
.salary-rulebook-reader {
    overflow: hidden;
}
.salary-rulebook-reader__header {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: start;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
}
.salary-rulebook-reader pre {
    margin: 0;
    padding: 22px 0 4px;
    max-height: 72vh;
    overflow: auto;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    color: #0f172a;
    font: 14px/1.58 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}
@media (max-width: 1100px) {
    .salary-rulebook-governance,
    .salary-rulebook-layout {
        grid-template-columns: 1fr;
    }
    .salary-rulebook-index {
        position: static;
    }
}

/* F2-HQA18-HF1 — rulebook page inset polish
   Giữ 2 mép trong thoáng hơn để card/table/reader không sát biên như bị cắt. */
.salary-rulebook-page {
    padding: clamp(18px, 2.2vw, 36px) clamp(18px, 2.4vw, 40px) clamp(26px, 3vw, 48px);
}

.salary-rulebook-page .salary-rulebook-shell {
    width: min(1720px, 100%);
    margin-inline: auto;
}

.salary-rulebook-page .ui-card,
.salary-rulebook-page .ui-kpi {
    box-sizing: border-box;
}

.salary-rulebook-page .salary-rulebook-governance,
.salary-rulebook-page .salary-rulebook-index,
.salary-rulebook-page .salary-rulebook-reader {
    padding: clamp(20px, 1.5vw, 28px);
}

.salary-rulebook-page .salary-rulebook-governance {
    gap: clamp(20px, 2vw, 32px);
}

.salary-rulebook-page .salary-rulebook-index ol {
    padding-right: 8px;
}

.salary-rulebook-page .salary-rulebook-reader__header {
    padding-inline: 2px;
}

.salary-rulebook-page .salary-rulebook-reader pre {
    padding: 22px 16px 10px;
}

.salary-rulebook-page .salary-rulebook-pills {
    padding-right: 2px;
}

@media (max-width: 720px) {
    .salary-rulebook-page {
        padding: 12px 12px 22px;
    }

    .salary-rulebook-page .salary-rulebook-governance,
    .salary-rulebook-page .salary-rulebook-index,
    .salary-rulebook-page .salary-rulebook-reader {
        padding: 16px;
    }

    .salary-rulebook-page .salary-rulebook-reader pre {
        padding: 16px 10px 8px;
    }
}

/* Global split workspace — neutral two-pane primitive. Business composition stays in each module. */
/* While client UI preferences are being hydrated, keep the split contents invisible but
   preserve their layout box. The workspace is revealed only after its saved ratio/collapse
   state has been applied. ui-layout-width.js removes the hydration guard fail-open. */
html.ui-preference-hydrating .ui-split-workspace[data-ui-split-workspace]:not([data-ui-split-ready="true"]) {
    visibility: hidden;
}

.ui-split-workspace {
    --ui-split-start-width: 76%;
    display: grid;
    grid-template-columns: minmax(0, var(--ui-split-start-width)) 18px minmax(0, 1fr);
    align-items: stretch;
    min-width: 0;
}

.ui-split-workspace > [data-ui-split-pane] { min-width: 0; }

.ui-splitter {
    position: relative;
    z-index: 4;
    display: flex;
    align-items: stretch;
    justify-content: center;
    min-width: 18px;
    padding: 0 6px;
    cursor: col-resize;
    touch-action: none;
    user-select: none;
    outline: none;
}

.ui-splitter::before {
    content: "";
    width: 6px;
    min-height: 100%;
    border: 1px solid color-mix(in srgb, var(--ui-border) 88%, transparent);
    border-radius: 999px;
    background: linear-gradient(180deg, #c9d8ee, #eef4fb 46%, #c9d8ee);
    box-shadow: inset 0 0 0 1px rgba(91, 120, 160, .12);
    transition: background-color var(--ui-transition-fast), border-color var(--ui-transition-fast), box-shadow var(--ui-transition-fast);
}

.ui-splitter:hover::before,
.ui-splitter:focus-visible::before {
    border-color: var(--ui-primary);
    background: var(--ui-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-primary) 15%, transparent);
}

.ui-splitter::after {
    content: "⋮";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    min-height: 34px;
    border: 1px solid var(--ui-border);
    border-radius: 999px;
    background: var(--ui-surface);
    color: var(--ui-text-muted);
    font-size: 14px;
    font-weight: 900;
    line-height: 1;
    pointer-events: none;
    box-shadow: 0 3px 10px rgba(15, 23, 42, .09);
}

.ui-splitter:hover::after,
.ui-splitter:focus-visible::after {
    border-color: var(--ui-primary);
    color: var(--ui-primary-strong);
}

/* Global collapse control for split workspaces — one clear owner, visible even when a pane is collapsed. */
.ui-split-collapse-control {
    position: absolute;
    z-index: 6;
    top: 14px;
    left: 50%;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transform: translateX(-50%);
    border: 1px solid var(--ui-border-strong, #cbd9ed);
    border-radius: 10px;
    background: var(--ui-surface, #fff);
    color: var(--ui-primary-strong, #234f95);
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(16, 36, 64, .08);
    transition: border-color var(--ui-transition-fast), background-color var(--ui-transition-fast), color var(--ui-transition-fast), box-shadow var(--ui-transition-fast), transform var(--ui-transition-fast);
}

.ui-split-collapse-control:hover {
    border-color: var(--ui-primary);
    background: var(--ui-primary-soft, #eef5ff);
    color: var(--ui-primary-strong);
    box-shadow: 0 5px 14px rgba(37, 99, 235, .14);
}

.ui-split-collapse-control:focus-visible {
    outline: none;
    border-color: var(--ui-primary);
    box-shadow: var(--ui-focus-ring), 0 5px 14px rgba(37, 99, 235, .14);
}

.ui-split-collapse-control .ui-chevron-icon {
    --ui-chevron-arm: 7px;
    width: 16px;
    height: 16px;
    transform: rotate(-90deg);
}

.ui-split-collapse-control.is-collapsed .ui-chevron-icon { transform: rotate(90deg); }
.ui-split-collapse-control[data-ui-split-collapse="start"] .ui-chevron-icon { transform: rotate(90deg); }
.ui-split-collapse-control[data-ui-split-collapse="start"].is-collapsed .ui-chevron-icon { transform: rotate(-90deg); }

.ui-split-workspace.is-start-collapsed > [data-ui-split-pane="start"],
.ui-split-workspace.is-end-collapsed > [data-ui-split-pane="end"] {
    overflow: hidden;
}

@media (max-width: 980px) {
    .ui-split-workspace {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: var(--ui-space-4, 16px);
    }
    .ui-splitter { display: none; }
}

/* Global split workspace — optional top/bottom orientation. Same JS owner; business modules only compose it. */
.ui-split-workspace[data-ui-split-axis="horizontal"] {
    --ui-split-start-height: 50%;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, var(--ui-split-start-height)) 18px minmax(0, 1fr);
    min-height: 0;
}

.ui-split-workspace[data-ui-split-axis="horizontal"] > [data-ui-split-pane] {
    min-width: 0;
    min-height: 0;
}

.ui-split-workspace[data-ui-split-axis="horizontal"] > .ui-splitter {
    min-width: 0;
    min-height: 18px;
    width: auto;
    height: 18px;
    padding: 6px 0;
    cursor: row-resize;
}

.ui-split-workspace[data-ui-split-axis="horizontal"] > .ui-splitter::before {
    width: 100%;
    min-height: 6px;
    height: 6px;
    background: linear-gradient(90deg, #c9d8ee, #eef4fb 46%, #c9d8ee);
}

.ui-split-workspace[data-ui-split-axis="horizontal"] > .ui-splitter::after {
    content: "⋯";
    width: 34px;
    min-height: 16px;
    height: 16px;
}

@media (max-width: 980px) {
    .ui-split-workspace[data-ui-split-axis="horizontal"] {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto auto;
    }
}

/* Global searchable combobox — progressive enhancement over a canonical native <select>.
   Business data/value ownership remains in the original select/form. */
/* GLOBAL-UI12 — canonical single-value controls.
   Native select and enhanced searchable combobox share one typography + chevron language. */
select:not([multiple]) {
    -webkit-appearance:none;
    appearance:none;
    padding-right:50px !important;
    background-image:
        linear-gradient(var(--ui-border), var(--ui-border)),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6.25 8 10l4-3.75' stroke='%23667085' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat, no-repeat;
    background-position:calc(100% - 43px) 50%, calc(100% - 14px) 50%;
    background-size:1px 62%, 16px 16px;
    font-family:inherit;
    font-weight:700;
}
select:not([multiple]):disabled { cursor:not-allowed; }

.ui-search-combobox { position:relative; min-width:0; width:100%; }
.ui-search-combobox__control { position:relative; display:flex; align-items:center; min-width:0; }
.ui-search-combobox__input {
    width:100%; min-width:0; padding-right:48px!important;
    font-family:inherit; font-weight:700; color:var(--ui-text-strong);
}
.ui-search-combobox__input::placeholder { color:var(--ui-text-muted); font-weight:700; opacity:1; }
.ui-search-combobox__toggle {
    position:absolute; right:4px; top:50%; transform:translateY(-50%); width:40px; height:36px;
    display:inline-flex; align-items:center; justify-content:center; border:0; border-left:1px solid var(--ui-border);
    background:transparent; color:var(--ui-text-muted); cursor:pointer;
}
.ui-search-combobox__toggle:hover,.ui-search-combobox__toggle:focus-visible { color:var(--ui-primary); background:var(--ui-primary-soft,#eff6ff); }
.ui-search-combobox__toggle .ui-chevron-icon { width:12px; height:12px; }
.ui-search-combobox.is-open .ui-search-combobox__toggle .ui-chevron-icon { transform:rotate(180deg); }
.ui-search-combobox__panel {
    position:absolute; z-index:80; left:0; right:0; top:calc(100% + 5px); max-height:360px; overflow:auto;
    padding:6px; border:1px solid var(--ui-border); border-radius:var(--ui-radius-lg,14px);
    background:var(--ui-surface); box-shadow:var(--ui-shadow-popover);
}
/* Searchable-select popovers are portaled while open so card/table overflow cannot clip them. */
.ui-search-combobox__panel.is-portaled {
    position:fixed; z-index:4000; inset:auto; margin:0;
}
.ui-search-combobox__option {
    width:100%; display:grid; grid-template-columns:minmax(100px,auto) minmax(0,1fr) auto; grid-template-areas:"primary secondary marker" "meta meta marker";
    gap:2px 12px; align-items:center; padding:9px 10px; border:1px solid transparent; border-radius:10px;
    background:transparent; color:var(--ui-text); text-align:left; cursor:pointer;
}
.ui-search-combobox__option:hover,.ui-search-combobox__option.is-highlighted { border-color:#b9d2ff; background:#eef5ff; }
.ui-search-combobox__option strong { grid-area:primary; color:var(--ui-text-strong); white-space:nowrap; }
.ui-search-combobox__option span { grid-area:secondary; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ui-search-combobox__option small { grid-area:meta; color:var(--ui-text-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ui-search-combobox__option em { grid-area:marker; align-self:start; padding:2px 7px; border-radius:999px; background:#dbeafe; color:#1d4ed8; font-size:.7rem; font-style:normal; font-weight:800; white-space:nowrap; }
.ui-search-combobox__option.is-clear { grid-template-columns:1fr; grid-template-areas:"primary"; }
.ui-search-combobox__empty { padding:18px 12px; color:var(--ui-text-muted); text-align:center; }
.ui-search-combobox__native { position:absolute!important; width:1px!important; height:1px!important; opacity:0!important; pointer-events:none!important; }
@media (max-width:720px) {
    .ui-search-combobox__option { grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"primary marker" "secondary secondary" "meta meta"; }
}

/* Global output primitive: print one declared visual root without printing surrounding application chrome. */
.ui-output-print-root-clone { display:none; }
@media print {
  body.ui-output-print-root-active > *:not(.ui-output-print-root-clone) { display:none !important; }
  body.ui-output-print-root-active > .ui-output-print-root-clone {
    display:block !important;
    position:static !important;
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    box-shadow:none !important;
  }
}

/* GLOBAL-UI05 — Section headers establish one visual boundary between heading context and body content.
   Compact changes density only; it no longer changes the title/body hierarchy. */
.ui-section-header:not(.ui-section-header--inline) {
    border-bottom: 1px solid var(--ui-border);
}
.ui-section-header--compact:not(.ui-section-header--inline) {
    padding-bottom: var(--ui-space-3);
}

/* GLOBAL-UI05 — Server-filtered regions keep the previous result visible while a bounded request is in flight. */
[data-ui-server-filter-region] {
    position: relative;
}
[data-ui-server-filter-region].is-filtering::before {
    content: "";
    position: absolute;
    z-index: 20;
    inset: 0 0 auto 0;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, var(--ui-primary), transparent);
    animation: ui-server-filter-progress 1s linear infinite;
    pointer-events: none;
}
[data-ui-server-filter-region].is-filtering {
    cursor: progress;
}
@keyframes ui-server-filter-progress {
    from { transform: translateX(-45%); }
    to { transform: translateX(45%); }
}

/* GLOBAL-UI06 — KPI meta is segmented by meaning. A ResizeObserver toggles compact mode on the
   KPI itself because a CSS container cannot style itself from its own size query. Compact mode removes
   the entire decorative-icon slot (icon + left padding) and stacks complete semantic phrases. */
.ui-kpi__meta {
    display: flex !important;
    flex-wrap: nowrap;
    align-items: baseline;
    gap: 0;
}
.ui-kpi__meta-segment {
    display: inline-block;
    min-width: 0;
    white-space: nowrap;
}
.ui-kpi__meta-segment + .ui-kpi__meta-segment::before {
    content: " · ";
    white-space: pre;
}
.ui-kpi.ui-kpi--compact:not(.kpi-card) {
    padding-left: var(--ui-space-4);
}
.ui-kpi.ui-kpi--compact:not(.kpi-card)::before {
    display: none;
}
.ui-kpi.ui-kpi--compact .ui-kpi__meta {
    display: grid !important;
    gap: 2px;
}
.ui-kpi.ui-kpi--compact .ui-kpi__meta-segment {
    display: block;
}
.ui-kpi.ui-kpi--compact .ui-kpi__meta-segment + .ui-kpi__meta-segment::before {
    content: none;
}
.ui-kpi.ui-kpi--very-compact .ui-kpi__meta-segment {
    white-space: normal;
}

/* BACKUP+BASELINE R2 — alarm-style schedule editor. Presentation only; schedule authority remains server-side. */
.backup-schedule-editor {
    display: grid;
    gap: 0;
    width: min(100%, 760px);
}
.backup-schedule-editor__section {
    display: grid;
    gap: 12px;
    min-width: 0;
    padding: 18px 0;
    border-bottom: 1px solid var(--ui-border);
}
.backup-schedule-editor__section--enabled { padding-top: 0; }
.backup-schedule-enabled { width: min(100%, 520px); }
.backup-schedule-time { width: min(100%, 220px); }
.backup-schedule-time input[type="time"] {
    min-height: 56px;
    font-size: 1.35rem;
    font-weight: 850;
    letter-spacing: .02em;
}
.backup-schedule-mode {
    min-width: 0;
    margin: 0;
    border-inline: 0;
    border-top: 0;
    padding-inline: 0;
}
.backup-schedule-mode > legend {
    padding: 0;
    color: var(--ui-text-strong);
    font-weight: 850;
}
.backup-schedule-mode__options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: min(100%, 520px);
    padding: 4px;
    border: 1px solid var(--ui-border);
    border-radius: 14px;
    background: var(--ui-surface-soft);
}
.backup-schedule-mode__option {
    min-width: 0;
    cursor: pointer;
}
.backup-schedule-mode__option > span {
    display: flex;
    min-height: 46px;
    align-items: center;
    justify-content: center;
    padding: 9px 14px;
    border-radius: 10px;
    color: var(--ui-primary-strong);
    font-weight: 800;
    text-align: center;
    transition: background-color var(--ui-transition-fast), color var(--ui-transition-fast), box-shadow var(--ui-transition-fast);
}
.backup-schedule-mode__option:hover > span { background: var(--ui-primary-soft); }
.backup-schedule-mode__option:has(input:checked) > span {
    color: #fff;
    background: var(--ui-primary);
    box-shadow: 0 4px 10px rgba(37, 99, 235, .18);
}
.backup-schedule-mode__option:has(input:focus-visible) > span { box-shadow: var(--ui-focus-ring); }
.backup-schedule-repeat-panel {
    display: grid;
    gap: 10px;
    padding-top: 4px;
}
.backup-schedule-repeat-panel[hidden] { display: none; }
.backup-schedule-repeat-panel__label {
    color: var(--ui-text-muted);
    font-size: .9rem;
    font-weight: 750;
}
.backup-weekday-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.backup-weekday-chip { cursor: pointer; }
.backup-weekday-chip > span {
    display: inline-flex;
    width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--ui-border-strong);
    border-radius: 999px;
    background: var(--ui-surface);
    color: var(--ui-text-strong);
    font-weight: 850;
    transition: border-color var(--ui-transition-fast), background-color var(--ui-transition-fast), color var(--ui-transition-fast), box-shadow var(--ui-transition-fast);
}
.backup-weekday-chip:hover > span {
    border-color: var(--ui-primary);
    background: var(--ui-primary-soft);
}
.backup-weekday-chip:has(input:checked) > span {
    border-color: var(--ui-primary);
    background: var(--ui-primary);
    color: #fff;
}
.backup-weekday-chip:has(input:focus-visible) > span { box-shadow: var(--ui-focus-ring); }
.backup-schedule-number-field { width: min(100%, 220px); }
.backup-schedule-editor__actions {
    display: flex;
    align-items: center;
    padding-top: 18px;
}
.backup-schedule-editor__actions .button { min-height: 46px; }

@media (max-width: 760px) {
    .backup-schedule-editor { width: 100%; }
    .backup-schedule-mode__options { width: 100%; }
    .backup-schedule-time,
    .backup-schedule-number-field { width: min(100%, 260px); }
}

@media (max-width: 520px) {
    .backup-schedule-mode__option > span { padding-inline: 8px; font-size: .9rem; }
    .backup-schedule-editor__actions .button { width: 100%; }
}

/* Global grouped report table: one parent summary row per entity, month/detail rows collapsed beneath it. */
.ui-report-table__group-parent {
    cursor: pointer;
}
.ui-report-table__group-parent > td {
    background: #eaf2ff;
    color: var(--ui-text-strong);
    font-weight: 900;
    font-size: 1.06rem;
    vertical-align: middle;
    border-top: 2px solid #d8e5fb;
}
.ui-report-table__group-parent:hover > td {
    background: #e1ecff;
}
.ui-report-table__group-parent.is-expanded > td {
    background: #e5efff;
    border-bottom-color: #b9cfee;
}
.ui-report-table__group-parent > td:first-child strong {
    font-size: 1.08em;
    line-height: 1.25;
}
.ui-report-table__group-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 0;
    border: 0;
    color: inherit;
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.ui-report-table__group-toggle .ui-chevron-icon {
    width: 12px;
    height: 12px;
    flex: 0 0 12px;
    transform: rotate(-90deg);
    transition: transform .16s ease;
}
.ui-report-table__group-parent.is-expanded .ui-report-table__group-toggle .ui-chevron-icon {
    transform: rotate(0deg);
}
.ui-report-table__group-child > td {
    font-size: .98rem;
}
.ui-report-table__group-child > td:first-child {
    color: var(--ui-text-muted);
    background: #fbfdff;
}
.ui-report-table__group-child-identity {
    white-space: nowrap;
}
.ui-report-table__group-branch {
    display: inline-block;
    margin-right: 8px;
    color: #7b94b8;
    font-weight: 900;
}

/* Global compact trend bars: presentation-only; consumers own business meaning and missing-data semantics. */
.ui-trend-bars {
    display: grid;
    grid-template-columns: repeat(var(--ui-trend-columns, 6), minmax(0, 1fr));
    align-items: end;
    gap: var(--ui-space-2);
    min-height: 190px;
    padding-top: var(--ui-space-2);
}
.ui-trend-bars__point { display: grid; grid-template-rows: minmax(112px, 1fr) auto auto; gap: 4px; min-width: 0; text-align: center; }
.ui-trend-bars__plot { position: relative; display: flex; align-items: flex-end; justify-content: center; min-height: 112px; border-bottom: 1px solid var(--ui-chart-grid); }
.ui-trend-bars__bar { width: min(34px, 68%); height: var(--ui-trend-height, 0%); min-height: 3px; border-radius: 8px 8px 2px 2px; background: var(--ui-trend-accent, var(--ui-chart-blue)); }
.ui-trend-bars__point.is-partial .ui-trend-bars__bar { opacity: .58; background-image: repeating-linear-gradient(135deg, transparent 0 5px, rgba(255,255,255,.42) 5px 8px); }
.ui-trend-bars__point.is-missing .ui-trend-bars__plot { background: linear-gradient(to top, color-mix(in srgb, var(--ui-chart-neutral-soft) 54%, transparent), transparent 58%); }
.ui-trend-bars__missing { align-self: center; color: var(--ui-text-muted); font-weight: 700; }
.ui-trend-bars__label { color: var(--ui-text-muted); font-size: .76rem; white-space: nowrap; }
.ui-trend-bars__value { overflow: hidden; color: var(--ui-text); font-size: .72rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 720px) {
    .ui-trend-bars { gap: 5px; min-height: 160px; }
    .ui-trend-bars__point { grid-template-rows: minmax(88px, 1fr) auto; }
    .ui-trend-bars__plot { min-height: 88px; }
    .ui-trend-bars__value { display: none; }
}



/* Global mobile compact page-header.
   Desktop keeps the existing Global header. Mobile uses a fixed two-column contract:
   identity on the left, at most two visible actions stacked on the right. */
.ui-page-header__mobile-eyebrow { display: none; }
.ui-section-header__copy { min-width: 0; }
.ui-section-header__title { margin: 0 0 6px; }
.ui-section-header__subtitle { margin: 0; }

@media (max-width: 720px) {
    .ui-page-header--mobile-compact {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(132px, 42%);
        align-items: start;
        gap: 12px;
        padding: 14px;
        margin-bottom: 12px;
    }
    .ui-page-header--mobile-compact .ui-page-header__identity {
        min-width: 0;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .ui-page-header--mobile-compact .ui-page-header__identity-marker {
        display: block;
    }
    .ui-page-header--mobile-compact .ui-page-header__icon {
        flex-basis: 40px;
        width: 40px;
        height: 40px;
        border-radius: 12px;
        font-size: 18px;
    }
    .ui-page-header--mobile-compact .ui-page-header__eyebrow-default {
        display: none;
    }
    .ui-page-header--mobile-compact .ui-page-header__mobile-eyebrow {
        display: grid;
        gap: 2px;
        color: var(--ui-text-muted);
        font-size: 10px;
        font-weight: 900;
        line-height: 1.15;
        letter-spacing: .075em;
        text-transform: uppercase;
    }
    .ui-page-header--mobile-compact .ui-page-header__copy h1 {
        margin: 4px 0 0;
        font-size: 20px;
        line-height: 1.08;
        overflow-wrap: anywhere;
    }
    .ui-page-header--mobile-compact .ui-page-header__copy > p {
        display: none;
    }
    .ui-page-header--mobile-compact .ui-page-header__actions {
        width: auto;
        min-width: 0;
        flex: 0 1 auto;
        align-self: stretch;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        align-content: start;
        gap: 8px;
    }
    .ui-page-header--mobile-compact .ui-page-header__primary-action,
    .ui-page-header--mobile-compact .ui-page-header__support-actions {
        width: 100%;
        min-width: 0;
        justify-self: stretch;
    }
    .ui-page-header--mobile-compact .ui-page-header__support-actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
    }
    .ui-page-header--mobile-compact .ui-page-header__primary-action > .ui-header-action-card,
    .ui-page-header--mobile-compact .ui-page-header__support-actions > .ui-header-action-card {
        width: 100%;
        min-width: 0;
        max-width: none;
        min-height: 42px;
        height: auto;
        padding: 9px 10px;
        border-radius: 12px;
        font-size: 13px;
        line-height: 1.15;
        white-space: normal;
    }
    .ui-page-header--mobile-compact .ui-header-action-card__icon {
        flex-basis: 17px;
        width: 17px;
        height: 17px;
    }
    .ui-page-header--mobile-compact .ui-header-action-card__icon svg {
        width: 17px;
        height: 17px;
    }
}


/* GLOBAL-MOBILE-R1 — shared mobile workspace density contract.
   Desktop/tablet >= 761px remain governed by the existing rules above.
   This layer fixes the generic mobile shell only; structured salary/period/record headers
   and the explicit mobile-compact variant keep their own semantic layout contracts. */
@media (max-width: 760px) {
    .ui-page-header:not(.ui-page-header--salary-context):not(.ui-page-header--salary-support):not(.ui-page-header--period-context):not(.ui-page-header--mobile-compact) {
        gap: 12px;
        padding: 14px;
        margin-bottom: 12px;
    }

    .ui-page-header:not(.ui-page-header--salary-context):not(.ui-page-header--salary-support):not(.ui-page-header--period-context):not(.ui-page-header--mobile-compact):not(:has(.ui-page-header__marker-status)) .ui-page-header__identity {
        width: 100%;
        flex-direction: row;
        align-items: flex-start;
        gap: 12px;
    }

    .ui-page-header:not(.ui-page-header--salary-context):not(.ui-page-header--salary-support):not(.ui-page-header--period-context):not(.ui-page-header--mobile-compact) .ui-page-header__icon {
        flex-basis: 44px;
        width: 44px;
        height: 44px;
        border-radius: 13px;
        font-size: 19px;
    }

    .ui-page-header:not(.ui-page-header--salary-context):not(.ui-page-header--salary-support):not(.ui-page-header--period-context):not(.ui-page-header--mobile-compact) .ui-page-header__copy h1 {
        margin: 2px 0 4px;
        font-size: clamp(21px, 5.8vw, 24px);
        line-height: 1.1;
    }

    .ui-page-header:not(.ui-page-header--salary-context):not(.ui-page-header--salary-support):not(.ui-page-header--period-context):not(.ui-page-header--mobile-compact) .ui-page-header__copy p {
        font-size: 13.5px;
        line-height: 1.4;
    }

    /* Reset desktop action-column flex-basis when the header main axis becomes vertical. */
    .ui-page-header:not(.ui-page-header--salary-context):not(.ui-page-header--salary-support):not(.ui-page-header--period-context):not(.ui-page-header--mobile-compact) .ui-page-header__actions {
        flex: 0 0 auto;
        width: 100%;
        min-width: 0;
        align-self: stretch;
        gap: 8px;
    }

    .ui-page-header:not(.ui-page-header--salary-context):not(.ui-page-header--salary-support):not(.ui-page-header--period-context):not(.ui-page-header--mobile-compact) .ui-page-header__control-row--period,
    .ui-page-header:not(.ui-page-header--salary-context):not(.ui-page-header--salary-support):not(.ui-page-header--period-context):not(.ui-page-header--mobile-compact) .ui-page-header__control-row--period .ui-period-nav {
        width: 100%;
        min-width: 0;
        justify-content: stretch;
    }

    .ui-page-header:not(.ui-page-header--salary-context):not(.ui-page-header--salary-support):not(.ui-page-header--period-context):not(.ui-page-header--mobile-compact) .ui-period-nav {
        gap: 6px;
        flex-wrap: wrap;
    }

    .ui-page-header:not(.ui-page-header--salary-context):not(.ui-page-header--salary-support):not(.ui-page-header--period-context):not(.ui-page-header--mobile-compact) .ui-period-nav__main {
        flex: 1 1 100%;
        width: 100%;
        min-width: 0;
        grid-template-columns: 42px minmax(0, 1fr) 42px;
    }

    .ui-page-header:not(.ui-page-header--salary-context):not(.ui-page-header--salary-support):not(.ui-page-header--period-context):not(.ui-page-header--mobile-compact) .ui-period-nav__current {
        flex: 1 0 100%;
        min-height: 24px;
        padding-inline: 2px;
        justify-content: flex-start;
    }

    /* Shared mobile content rhythm: reclaim dead vertical space without shrinking touch targets. */
    .ui-stack { gap: 12px; }

    .ui-section-header {
        gap: 12px;
        padding: 14px 14px 10px;
    }

    .ui-section-header h2,
    .ui-section-header h3 {
        margin-bottom: 4px;
        font-size: 18px;
    }

    .ui-section-header p {
        font-size: 13.5px;
        line-height: 1.4;
    }

    .ui-content-section__body {
        padding: 12px 14px 14px;
    }
}