:root {
    --color-primary-50: #eff4ff;
    --color-primary-100: #dbe8ff;
    --color-primary-600: #155eef;
    --color-primary-700: #004eeb;
    --color-gray-25: #fcfcfd;
    --color-gray-50: #f9fafb;
    --color-gray-100: #f2f4f7;
    --color-gray-200: #eaecf0;
    --color-gray-300: #d0d5dd;
    --color-gray-500: #667085;
    --color-gray-600: #475467;
    --color-gray-700: #344054;
    --color-gray-900: #101828;
    --color-white: #fff;
    --color-success-50: #ecfdf3;
    --color-success-600: #039855;
    --color-warning-50: #fffaeb;
    --color-warning-600: #dc6803;
    --color-danger-50: #fef3f2;
    --color-danger-500: #f04438;
    --color-danger-600: #d92d20;
    --color-info-50: #eff8ff;
    --color-info-600: #1570ef;
    --color-review-50: #f4f3ff;
    --color-review-600: #7f56d9;
    --sidebar-width: 232px;
    --topbar-height: 52px;
    --breadcrumb-height: 40px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --shadow-sm: 0 1px 2px rgba(16, 24, 40, .04);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { min-width: 1180px; }
html.app-anonymous-page { min-width: 0; }
html.app-authenticated-page { min-width: 0; }
body {
    margin: 0;
    font-family: Inter, "Segoe UI", Arial, sans-serif;
    font-size: 14px;
    line-height: 20px;
    color: var(--color-gray-700);
    background: var(--color-gray-50);
}
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--color-primary-600);
    outline-offset: 2px;
}
.app-icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.app-icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }

.app-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 30;
    width: var(--sidebar-width);
    background: var(--color-white);
    border-right: 1px solid var(--color-gray-200);
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-gutter: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--color-gray-300) transparent;
    transition: none;
}
.app-sidebar::-webkit-scrollbar { width: 6px; height: 6px; }
.app-sidebar::-webkit-scrollbar-track { background: transparent; }
.app-sidebar::-webkit-scrollbar-thumb { border-radius: 999px; background: var(--color-gray-300); }
.app-sidebar::-webkit-scrollbar-thumb:hover { background: var(--color-gray-500); }
.app-sidebar-resize-handle {
    position: absolute;
    inset: 0 0 0 auto;
    z-index: 3;
    width: 4px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: col-resize;
}
.app-sidebar-resize-handle:hover,
body.sidebar-resizing .app-sidebar-resize-handle,
.app-split-divider:hover::before,
.app-split-divider:focus-visible::before,
body.app-resizing-panels .app-split-divider::before { background: rgba(37, 99, 235, .12); }
body.sidebar-resizing,
body.sidebar-resizing * { cursor: col-resize !important; user-select: none !important; }
body.sidebar-resizing .app-sidebar { transition: none; }
body.sidebar-resizing .app-topbar,
body.sidebar-resizing .app-breadcrumb-bar,
body.sidebar-resizing #main-content { transition: none !important; }
.app-brand {
    height: var(--topbar-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0 16px;
    border-bottom: 1px solid var(--color-gray-200);
}
.app-brand-link {
    color: var(--color-primary-600);
    font-size: 18px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.app-sidebar-toggle, .app-icon-button {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: var(--radius-sm);
    color: var(--color-gray-600);
    background: transparent;
    cursor: pointer;
}
.app-sidebar-toggle:hover, .app-icon-button:hover { background: var(--color-gray-100); color: var(--color-gray-900); }
.app-sidebar-toggle .app-icon { transform: rotate(180deg); }
.app-menu, .app-menu ul { list-style: none; padding: 0; margin: 0; }
.app-menu { padding: 12px 10px 20px; }
.app-menu > li { margin-bottom: 2px; }
.app-menu a, .app-menu-group-label {
    min-height: 38px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 7px 10px;
    border-radius: var(--radius-sm);
    color: var(--color-gray-700);
    text-decoration: none;
    font-size: 14px;
    white-space: nowrap;
}
.app-menu a:hover { background: var(--color-gray-50); color: var(--color-gray-900); }
.app-menu a.is-active {
    color: var(--color-primary-600);
    background: var(--color-primary-50);
    font-weight: 600;
}
.app-mobile-menu-toggle { display: none; }
.app-menu-group-label { cursor: pointer; }
.app-menu-group-label .app-menu-chevron { width: 16px; height: 16px; margin-left: auto; }
.app-menu-group ul { padding: 0 0 3px 40px; }
.app-menu-group ul a { min-height: 32px; padding: 5px 8px; font-size: 13px; }
.app-menu-group.is-active ul a:first-child { color: var(--color-primary-600); }


/* Compact navigation: keep the full desktop menu visible with less vertical waste. */
.app-menu { padding: 8px 8px 14px; }
.app-menu > li { margin-bottom: 1px; }
.app-menu a, .app-menu-group-label { min-height: 34px; gap: 9px; padding: 5px 8px; }
.app-menu .app-icon { width: 18px; height: 18px; }
.app-menu-group ul { padding-left: 32px; padding-bottom: 2px; }
.app-menu-group ul a { min-height: 29px; gap: 8px; padding: 4px 6px; font-size: 12px; }
.app-menu-group ul a .app-icon { width: 15px; height: 15px; }
.app-menu-admin > .app-menu-group-label { font-weight: 600; }
.app-topbar {
    position: fixed;
    top: 0;
    left: var(--sidebar-width);
    right: 0;
    z-index: 25;
    height: var(--topbar-height);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    padding: 0 16px;
    background: var(--color-white);
    border-bottom: 1px solid var(--color-gray-200);
    transition: left .2s ease;
}
.app-module-switcher { position: relative; flex: 0 0 auto; }
.app-module-trigger {
    min-width: 172px; height: 38px; display: inline-flex; align-items: center; gap: 8px; padding: 4px 9px;
    border: 1px solid var(--color-gray-200); border-radius: 9px; background: var(--color-white); color: var(--color-gray-700);
    font: inherit; cursor: pointer;
}
.app-module-trigger:hover, .app-module-trigger:focus-visible { border-color: var(--color-primary-600); color: var(--color-primary-700); outline: none; }
.app-module-current { display: inline-flex; align-items: center; min-width: 0; gap: 7px; }
.app-module-current-icon { display: inline-flex; align-items: center; justify-content: center; width: 25px; height: 25px; border-radius: 7px; background: var(--color-primary-50); color: var(--color-primary-700); }
.app-module-current-icon .app-icon { width: 15px; height: 15px; }
.app-module-current-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-gray-900); font-size: 13px; font-weight: 700; }
.app-module-trigger-chevron { width: 14px; height: 14px; margin-left: auto; transform: rotate(90deg); color: var(--color-gray-500); }
.app-module-popover {
    position: absolute; top: calc(100% + 8px); left: 0; z-index: 70; width: min(390px, calc(100vw - 24px));
    padding: 14px; border: 1px solid var(--color-gray-200); border-radius: 12px; background: var(--color-white);
    box-shadow: 0 14px 30px rgba(16,24,40,.10);
}
.app-module-popover-header { display: flex; flex-direction: column; gap: 2px; margin-bottom: 11px; }
.app-module-popover-header strong { color: var(--color-gray-900); font-size: 14px; }
.app-module-popover-header span { color: var(--color-gray-500); font-size: 11px; }
.app-module-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.app-module-card { display: flex; align-items: flex-start; gap: 9px; min-width: 0; min-height: 58px; padding: 10px; border: 1px solid #e8edf4; border-radius: 10px; background: #fcfdff; color: var(--color-gray-700); text-decoration: none; box-shadow: 0 1px 4px rgba(15, 23, 42, .025); transition: border-color .15s ease, background .15s ease, box-shadow .15s ease; }
.app-module-card:hover, .app-module-card:focus-visible, .app-module-card.is-active { border-color: #c8dafa; background: #f7faff; color: var(--color-primary-700); box-shadow: 0 3px 8px rgba(37, 99, 235, .055); outline: none; }
.app-module-card-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 32px; width: 32px; height: 32px; border-radius: 8px; }
.app-module-card-icon .app-icon { width: 18px; height: 18px; }
.app-module-card-icon--main { background: #f0f5ff; color: #475467; }
.app-module-card-icon--digitization { background: #f0f6ff; color: #246bdb; }
.app-module-card-icon--admin { background: #f7f2ff; color: #7652d3; }
.app-module-card-icon--archive { background: #effaf5; color: #25895d; }
.app-module-card-copy { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.app-module-card-copy strong { color: var(--color-gray-900); font-size: 12px; line-height: 17px; }
.app-module-card-copy small { display: block; overflow: hidden; color: var(--color-gray-500); font-size: 11px; line-height: 15px; text-overflow: ellipsis; white-space: nowrap; }
.app-quick-search {
    position: relative; display: flex; align-items: center; gap: 8px; flex: 0 1 480px; width: 100%; max-width: 480px;
    height: 36px; padding: 0 11px; border: 1px solid var(--color-gray-300); border-radius: 8px;
    background: var(--color-white); color: var(--color-gray-500);
}
.app-quick-search:focus-within { border-color: var(--color-primary-600); box-shadow: 0 0 0 2px rgba(21,94,239,.12); }
.app-quick-search-icon { width: 16px; height: 16px; flex: 0 0 auto; }
.app-quick-search-input { flex: 1 1 auto; min-width: 0; height: 32px; padding: 0; border: 0; background: transparent; color: var(--color-gray-900); font-size: 13px; outline: none; }
.app-quick-search-input:focus-visible { outline: none; }
.app-quick-search-input::placeholder { color: var(--color-gray-500); }
.app-quick-search-shortcut { flex: 0 0 auto; padding: 2px 5px; border: 1px solid var(--color-gray-200); border-radius: 4px; color: var(--color-gray-500); font-family: inherit; font-size: 10px; line-height: 14px; }
.app-quick-search:focus-within .app-quick-search-shortcut, .app-quick-search-input:not(:placeholder-shown) + .app-quick-search-shortcut { display: none; }
.app-quick-search-clear { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--color-gray-500); cursor: pointer; }
.app-quick-search-clear .app-icon { width: 13px; height: 13px; }
.app-quick-search-clear:hover { background: var(--color-gray-200); color: var(--color-gray-700); }
.app-quick-search-results {
    position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 60; max-height: 360px; overflow-y: auto;
    padding: 6px; border: 1px solid var(--color-gray-200); border-radius: var(--radius-md); background: var(--color-white);
    box-shadow: 0 12px 32px rgba(16,24,40,.18);
}
.app-quick-search-item { display: flex; align-items: center; justify-content: space-between; gap: 9px; padding: 8px 10px; border-radius: var(--radius-sm); color: var(--color-gray-800); font-size: 13px; cursor: pointer; }
.app-quick-search-item:hover, .app-quick-search-item.is-active { background: var(--color-primary-50); color: var(--color-primary-700); }
.app-quick-search-item-icon { width: 16px; height: 16px; flex: 0 0 16px; color: var(--color-gray-500); }
.app-quick-search-item-label { min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-quick-search-item-context { flex: 0 0 auto; color: var(--color-gray-500); font-size: 11px; }
.app-quick-search-item--group .app-quick-search-item-label { font-weight: 600; }
.app-quick-search-empty { padding: 12px 10px; color: var(--color-gray-500); font-size: 13px; text-align: center; }
.app-topbar-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.app-icon-button { position: relative; }
.app-notification-menu { position: relative; }
.app-notification-badge {
    position: absolute; top: -4px; right: -5px; min-width: 18px; height: 18px; padding: 0 5px;
    display: inline-flex; align-items: center; justify-content: center; border: 2px solid white;
    border-radius: 999px; background: #e41e3f; color: white; font-size: 10px; font-weight: 700; line-height: 1;
}
.app-notification-badge[hidden] { display: none; }
.app-btn-with-count { position: relative; }
.app-count-badge {
    position: absolute; top: -8px; right: -8px; min-width: 18px; height: 18px; padding: 0 5px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 2px solid white; border-radius: 999px;
    background: #fdb022; color: #7a2e0e; font-size: 10px; font-weight: 700; line-height: 1;
}
.app-notification-trigger.has-new-notification .app-icon { animation: app-notification-ring .7s ease-in-out; }
@keyframes app-notification-ring {
    0%, 100% { transform: rotate(0); }
    20% { transform: rotate(-14deg); }
    40% { transform: rotate(12deg); }
    60% { transform: rotate(-8deg); }
    80% { transform: rotate(5deg); }
}
.app-notification-popover {
    position: absolute; top: 48px; right: -8px; z-index: 60; display: flex; flex-direction: column;
    width: min(370px, calc(100vw - 24px)); height: min(470px, calc(100vh - 64px)); max-height: calc(100vh - 64px); overflow: hidden;
    border: 1px solid var(--color-gray-200); border-radius: 10px; background: white;
    box-shadow: 0 12px 32px rgba(16,24,40,.18);
}
.app-notification-popover-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 16px 12px; border-bottom: 1px solid var(--color-gray-200); }
.app-notification-popover-header strong { color: var(--color-gray-900); font-size: 18px; }
.app-notification-mark-all { border: 0; background: transparent; color: var(--color-primary-600); font-size: 12px; cursor: pointer; }
.app-notification-popover-body { min-height: 0; flex: 1 1 auto; overflow-y: auto; padding: 6px; scrollbar-width: none; }
.app-notification-popover-body::-webkit-scrollbar { width: 0; height: 0; }
.app-notification-loading { padding: 28px 12px; color: var(--color-gray-500); text-align: center; font-size: 13px; }
.app-notification-lazy-list { min-height: 100%; }
.app-notification-popover-content, .app-notification-list { display: flex; flex-direction: column; gap: 6px; padding: 4px 0; }
.app-notification-item { position: relative; display: flex; flex-direction: column; gap: 3px; padding: 10px 12px 10px 30px; margin-bottom: 4px; border-radius: var(--radius-sm); color: inherit; text-decoration: none; font-size: 13px; line-height: 1.4; transition: background .12s; }
.app-notification-item:hover { background: var(--color-gray-100); }
.app-notification-item.is-unread { background: #eef3ff; }
.app-notification-item.is-unread:hover { background: #e2eaff; }
/* Dot chấm tròn phân biệt unread */
.app-notification-dot { position: absolute; left: 10px; top: 15px; width: 8px; height: 8px; border-radius: 50%; background: var(--color-primary-600); flex-shrink: 0; }
.app-notification-item.is-read .app-notification-dot { background: var(--color-gray-300); }
.app-notification-sender { color: var(--color-gray-700); font-weight: 500; }
.app-notification-item.is-unread .app-notification-sender { color: var(--color-gray-900); font-weight: 600; }
.app-notification-document { color: var(--color-primary-600); font-weight: 500; }
.app-notification-reason { color: var(--color-gray-600); }
.app-notification-item time { color: var(--color-gray-500); font-size: .82rem; }
.notification-table .app-notification-table-item { min-width: 320px; margin: 0; padding: 5px 8px 5px 26px; }
.notification-table .app-notification-table-item .app-notification-dot { left: 8px; top: 11px; }
.app-notification-popover-footer { flex: 0 0 auto; border-top: 1px solid var(--color-gray-200); background: white; }
.app-notification-see-all { display: block; padding: 12px 10px 10px; color: var(--color-primary-600); font-size: 13px; text-align: center; text-decoration: none; }
.app-notification-see-all:hover { background: var(--color-gray-50); }
.app-user-menu { position: relative; margin-left: 8px; }
.app-user-trigger {
    height: 40px; display: flex; align-items: center; gap: 8px; padding: 4px 6px;
    border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--color-gray-700); cursor: pointer;
}
.app-user-trigger:hover { background: var(--color-gray-50); }
.app-user-avatar {
    width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid transparent; border-radius: 50%; color: var(--avatar-ink); background: var(--avatar-bg);
    font-size: 11px; font-weight: 700; letter-spacing: .03em; line-height: 1;
}
.app-user-avatar--tone-0 { --avatar-bg: #e8e5ff; --avatar-ink: #5146a5; border-color: #d8d3ff; }
.app-user-avatar--tone-1 { --avatar-bg: #dff1ff; --avatar-ink: #1769a8; border-color: #c7e6fb; }
.app-user-avatar--tone-2 { --avatar-bg: #dcf7ed; --avatar-ink: #167255; border-color: #c5eddd; }
.app-user-avatar--tone-3 { --avatar-bg: #fff0dc; --avatar-ink: #a15c16; border-color: #f9dfbd; }
.app-user-avatar--tone-4 { --avatar-bg: #fff6c9; --avatar-ink: #806600; border-color: #f4e9a4; }
.app-user-avatar--tone-5 { --avatar-bg: #ffe4ed; --avatar-ink: #a23e63; border-color: #f8cbdc; }
.app-user-name { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.app-user-chevron { width: 15px; height: 15px; transform: rotate(90deg); }
.app-user-popover {
    position: absolute; top: 46px; right: 0; width: 210px; padding: 8px; border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md); background: white; box-shadow: 0 12px 24px rgba(16,24,40,.12);
}
.app-user-popover-name { display: flex; flex-direction: column; gap: 3px; padding: 11px 12px 12px; color: var(--color-gray-900); border-bottom: 1px solid var(--color-gray-200); }
.app-user-popover-name strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 650; }
.app-user-popover-name small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-gray-500); font-size: 12px; font-weight: 400; }
.app-user-popover form button {
    width: 100%; display: flex; align-items: center; gap: 10px; margin-top: 6px; padding: 10px 12px;
    border: 0; border-radius: var(--radius-sm); background: white; color: var(--color-danger-600); cursor: pointer; text-align: left;
}
.app-user-popover form button:hover { background: var(--color-danger-50); }
.app-user-popover-action {
    width: 100%; display: flex; align-items: center; gap: 10px; margin-top: 6px; padding: 10px 12px;
    border: 0; border-radius: var(--radius-sm); background: white; color: var(--color-gray-700); cursor: pointer; text-align: left;
}
.app-user-popover-action:hover { background: var(--color-gray-50); }

.app-breadcrumb-bar {
    position: fixed; top: var(--topbar-height); left: var(--sidebar-width); right: 0; z-index: 20;
    height: var(--breadcrumb-height); display: flex; align-items: center; gap: 8px; padding: 0 15px;
    background: var(--color-white); border-bottom: 1px solid var(--color-gray-200); color: var(--color-gray-500);
    font-size: 13px; transition: left .2s ease;
}
.app-breadcrumb-home { display: inline-flex; align-items: center; gap: 6px; color: var(--color-primary-600); text-decoration: none; }
.app-breadcrumb-home .app-icon { width: 15px; height: 15px; }
.app-breadcrumb-list { color: var(--color-primary-600); text-decoration: none; }
.app-breadcrumb-chevron { width: 14px; height: 14px; color: var(--color-gray-400); }

/* Dashboard trang chủ: ẩn search navbar/breadcrumb/sidebar, hiện logo ở topbar thay thế. */
.app-topbar-brand { display: none; align-items: center; gap: 8px; margin-right: 4px; color: var(--color-gray-900); font-size: 15px; font-weight: 750; letter-spacing: -.01em; text-decoration: none; }
.app-topbar-brand .app-brand-logo { width: 28px; height: 28px; flex: 0 0 28px; object-fit: cover; border-radius: 7px; box-shadow: 0 3px 8px rgba(37, 99, 235, .2); }
body:has(#main-content .app-main-dashboard) .app-topbar .app-quick-search,
body:has(#main-content .app-main-dashboard) .app-breadcrumb-bar,
body:has(#main-content .app-main-dashboard) .app-sidebar,
body:has(#main-content .app-main-dashboard) .app-module-switcher,
body:has(#main-content .app-main-dashboard) .app-mobile-menu-toggle {
    display: none;
}
body:has(#main-content .app-main-dashboard) .app-topbar-brand {
    display: inline-flex;
}
body:has(#main-content .app-main-dashboard) .app-topbar {
    left: 0;
}
body.app-authenticated:has(#main-content .app-main-dashboard) #main-content {
    margin-left: 0;
    padding-top: calc(var(--topbar-height) + 10px);
}
@media (max-width: 900px) {
    body.app-authenticated:has(#main-content .app-main-dashboard) #main-content {
        padding-top: calc(var(--topbar-height) + 8px);
    }
}
@media (max-width: 640px) {
    body:has(#main-content .app-main-dashboard) .app-topbar-brand span { display: none; }
}

#main-content {
    min-height: 100vh;
    padding: 14px 15px 24px;
}
.app-authenticated #main-content {
    margin-left: var(--sidebar-width);
    padding-top: calc(var(--topbar-height) + var(--breadcrumb-height) + 10px);
    transition: margin-left .2s ease;
}
/* Trang có split-pane: chiều cao cố định, flex column, không scroll ra ngoài */
.app-authenticated #main-content.app-split-layout {
    height: calc(100vh - var(--topbar-height) - var(--breadcrumb-height));
    min-height: 0;
    padding: 0;
    margin-top: calc(var(--topbar-height) + var(--breadcrumb-height));
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
html:has(#main-content.app-split-layout), body:has(#main-content.app-split-layout) { overflow: hidden; }
body.sidebar-collapsed { --sidebar-width: 76px; }
body.sidebar-collapsed .app-brand { padding: 0 18px; }
body.sidebar-collapsed .app-brand-link, body.sidebar-collapsed .app-menu a span,
body.sidebar-collapsed .app-menu-group-label span, body.sidebar-collapsed .app-menu-chevron,
body.sidebar-collapsed .app-menu-group ul { display: none; }
body.sidebar-collapsed .app-sidebar-toggle .app-icon { transform: none; }
body.sidebar-collapsed .app-menu a, body.sidebar-collapsed .app-menu-group-label { justify-content: center; padding-inline: 0; }
body.sidebar-collapsed .app-sidebar-resize-handle { display: none; }

/* Responsive shell cho màn hình đã đăng nhập. */
@media (max-width: 900px) {
    .app-sidebar { width: 252px; transform: translateX(-100%); box-shadow: 12px 0 30px rgba(16,24,40,.16); transition: transform .2s ease; }
    .app-sidebar-resize-handle { display: none; }
    body.sidebar-mobile-open .app-sidebar { transform: translateX(0); }
    .app-topbar { left: 0; padding: 0 14px; }
    .app-mobile-menu-toggle { width: 36px; height: 36px; display: inline-flex; flex: 0 0 36px; flex-direction: column; align-items: center; justify-content: center; gap: 4px; margin-right: 8px; border: 1px solid var(--color-gray-200); border-radius: 8px; background: var(--color-white); color: var(--color-gray-600); cursor: pointer; }
    .app-mobile-menu-toggle span { width: 16px; height: 2px; border-radius: 2px; background: currentColor; }
    .app-mobile-menu-toggle:hover { color: var(--color-primary-600); background: var(--color-primary-50); }
    .app-topbar .app-quick-search { flex: 1 1 220px; max-width: 300px; }
    body.sidebar-mobile-open::after { position: fixed; inset: 0; z-index: 29; content: ""; background: rgba(16,24,40,.28); }
    body.sidebar-mobile-open .app-sidebar { z-index: 40; }
    .app-breadcrumb-bar { left: 0; padding: 0 8px; overflow: hidden; white-space: nowrap; }
    .app-breadcrumb-bar > * { flex: 0 0 auto; }
    #breadcrumb-current { overflow: hidden; text-overflow: ellipsis; }
    .app-authenticated #main-content { margin-left: 0; padding: calc(var(--topbar-height) + var(--breadcrumb-height) + 8px) 8px 14px; }
    .app-authenticated #main-content.app-split-layout { height: calc(100vh - var(--topbar-height) - var(--breadcrumb-height)); min-height: 0; margin-top: calc(var(--topbar-height) + var(--breadcrumb-height)); padding: 0 16px; overflow: hidden; }
    .app-page-header { flex-direction: column; gap: 12px; margin-bottom: 16px; }
    .app-page-heading, .app-page-actions { width: 100%; min-width: 0; }
    .app-page-actions { flex-wrap: wrap; }
    .app-page-actions .app-btn { flex: 1 1 auto; }
    .app-card, .app-filter-card { padding: 16px; }
    .app-filter-card .app-filter-grid { display: grid; grid-template-columns: minmax(0, 1fr); align-items: stretch; gap: 12px; }
    .app-filter-card .app-filter-grid > .app-field,
    .app-filter-card .app-filter-grid > .app-filter-actions,
    .app-filter-card .app-filter-grid > .app-filter-primary-action { width: 100%; max-width: none; min-width: 0; }
    .app-filter-card .app-filter-actions { justify-content: stretch; margin-left: 0; }
    .app-filter-card .app-filter-actions .app-btn { flex: 1 1 0; }
    .app-filter-card .app-toolbar-spacer { display: none; }
    .app-table-wrap, .progress-table-wrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .app-table { min-width: 680px; }
    .app-table-footer { align-items: flex-start; flex-direction: column; gap: 12px; padding: 12px 14px; }
    .app-table-footer-pagination { width: 100%; justify-content: space-between; margin-left: 0; gap: 10px; }
}
@media (max-width: 640px) {
    .app-topbar { gap: 6px; }
    .app-module-trigger { min-width: 0; padding-inline: 6px; }
    .app-module-current-name, .app-module-trigger-chevron { display: none; }
    .app-topbar .app-quick-search { flex: 1 1 auto; max-width: none; }
    .app-topbar .app-quick-search-shortcut { display: none; }
    .app-module-popover { left: -4px; }
}
.app-module-switcher + .app-quick-search { margin-left: 0; }
.app-license-warning { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 5px 10px; border: 1px solid #f6d28b; border-radius: 999px; color: #9a3412; background: #fffaf0; font-size: 12px; line-height: 18px; text-decoration: none; white-space: nowrap; transition: border-color .15s ease, background .15s ease, box-shadow .15s ease; }
.app-license-warning .app-icon { width: 15px; height: 15px; color: #d97706; }
.app-license-warning strong { font-weight: 700; }
.app-license-warning:hover { border-color: #f0b94b; background: #fff5d9; box-shadow: 0 3px 10px rgba(180, 113, 12, .12); }
.app-license-warning + .app-quick-search { margin-left: 0; }
.app-license-warning--floating { position: fixed; right: 18px; bottom: 18px; z-index: 80; box-shadow: 0 8px 20px rgba(16,24,40,.14); }
.app-license-warning--floating > a { display: inline-flex; align-items: center; gap: 6px; color: inherit; text-decoration: none; }
.app-license-warning-dismiss { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin-left: 4px; padding: 0; border: 0; border-radius: 50%; color: currentColor; background: transparent; cursor: pointer; }
.app-license-warning-dismiss:hover { background: rgba(154,52,18,.12); }
.app-license-warning-dismiss .app-icon { width: 13px; height: 13px; }
@media (max-width: 560px) { .app-license-warning--floating { right: 10px; bottom: 10px; } }
@media (max-width: 560px) {
    .app-topbar { padding-inline: 10px; }
    .app-topbar-actions { gap: 2px; }
    .app-topbar-actions > .app-icon-button:nth-child(2) { display: none; }
    .app-user-menu { margin-left: 2px; }
    .app-user-name, .app-user-chevron { display: none; }
    .app-license-warning { width: 32px; min-width: 32px; max-width: 32px; padding: 0; justify-content: center; border-radius: 8px; }
    .app-license-warning span, .app-license-warning strong { display: none; }
    .app-user-trigger { padding: 3px; }
    .app-breadcrumb-bar { padding-inline: 6px; font-size: 12px; }
    .app-authenticated #main-content { padding-inline: 6px; }
    .app-authenticated #main-content.app-split-layout { padding-inline: 12px; }
    .app-page-title { font-size: 22px; line-height: 29px; }
    .app-page-actions .app-btn { width: 100%; }
    .app-filter-card, .app-card { padding: 14px; }
    .app-table { min-width: 620px; }
}

/* Catalog dynamic filter: remain a lightweight section inside the shared filter card. */
.catalog-dynamic-filter-section { margin: 0; padding: 0; }
.catalog-dynamic-filter-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 13px; padding-bottom: 10px; border-bottom: 1px solid var(--color-gray-200); }
.catalog-dynamic-filter-heading span { color: var(--color-gray-900); font-size: 13px; font-weight: 700; }
.catalog-dynamic-filter-heading small { color: var(--color-gray-500); font-size: 11px; }
.catalog-filter-card { position: relative; }
.catalog-advanced-toggle { flex: 0 0 36px; border: 1px solid var(--color-gray-300); border-radius: var(--radius-sm); background: var(--color-white); }
.catalog-advanced-toggle:hover, .catalog-advanced-toggle[aria-expanded="true"] { border-color: var(--color-primary-600); background: var(--color-primary-50); color: var(--color-primary-600); }
.catalog-advanced-toggle.has-active-filters { border-color: var(--color-primary-600); color: var(--color-primary-600); }
.catalog-filter-count { position: absolute; top: -7px; right: -7px; display: inline-flex; align-items: center; justify-content: center; min-width: 17px; height: 17px; padding: 0 4px; border: 2px solid var(--color-white); border-radius: 999px; color: var(--color-white); background: var(--color-primary-600); font-size: 10px; font-weight: 700; line-height: 1; }
.catalog-advanced-toggle:disabled { opacity: .45; cursor: not-allowed; }
.catalog-advanced-filter { position: absolute; z-index: 10; top: calc(100% + 8px); left: 20px; width: min(1100px, calc(100vw - 80px)); min-width: 420px; max-width: calc(100vw - 80px); padding: 14px 16px 15px; border: 1px solid var(--color-gray-200); border-radius: 10px; background: var(--color-white); box-shadow: 0 16px 34px rgba(16,24,40,.16); }
.catalog-advanced-filter .catalog-dynamic-filter-section { margin: 0; padding: 0; border: 0; }
.catalog-advanced-filter .catalog-dynamic-filter-heading { margin-bottom: 13px; }
.catalog-advanced-filter .app-filter-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 280px)); align-items: end; gap: 12px; }
.catalog-advanced-filter #document-dynamic-fields { display: contents; }
.catalog-advanced-filter .app-field { min-width: 0; max-width: 280px; }
.catalog-advanced-filter .app-inline-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.catalog-advanced-filter input, .catalog-advanced-filter select { height: 38px; max-width: none; }
@media (max-width: 640px) { .catalog-advanced-filter { left: 12px; width: calc(100% - 24px); min-width: 0; } .catalog-advanced-filter .app-filter-grid { grid-template-columns: 1fr; align-items: stretch; } .catalog-advanced-filter .app-field { width: 100%; max-width: none; } .catalog-dynamic-filter-heading { align-items: flex-start; flex-direction: column; gap: 3px; } }
.app-page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 20px; }
.app-page-heading { display: block; flex: 0 0 auto; padding-top: 4px; }
.app-page-title { margin: 0; color: var(--color-gray-900); font-size: 24px; line-height: 32px; font-weight: 600; }
.app-page-description { margin: 4px 0 0; color: var(--color-gray-500); }
.app-page-actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.app-page-header:not(:has(.app-page-actions)) { display: none; margin: 0; }
.app-page-header > .app-page-heading { display: none; }

.app-card {
    margin-bottom: 20px;
    padding: 20px;
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}
.app-card > h2, .app-card > h3 { margin: 0 0 16px; color: var(--color-gray-900); font-size: 18px; line-height: 26px; font-weight: 600; }
.app-card-subtitle { margin: -10px 0 18px; color: var(--color-gray-500); }
.app-filter-card { padding: 20px; }
.selected-item-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin: -4px 0 12px; padding: 8px 12px; border: 1px solid var(--color-primary-100, #d1e0ff); border-radius: var(--radius-sm); background: var(--color-primary-50, #eff6ff); color: var(--color-gray-700); opacity: 0; transform: translateY(-4px); transition: opacity .16s ease, transform .16s ease; }
.selected-item-actions:not([hidden]) { opacity: 1; transform: translateY(0); }
.selected-item-count { margin-right: auto; font-size: 13px; font-weight: 600; }
.selection-column { width: 42px; text-align: center !important; }
.row-selection-checkbox { width: 16px !important; height: 16px !important; margin: 0; accent-color: var(--color-primary-600); vertical-align: middle; transition: transform .12s ease; }
.row-selection-checkbox:active { transform: scale(.9); }
.app-quick-merge-form > .app-dialog-body { display: flex; flex: 0 1 auto !important; flex-direction: column; gap: 10px; }
.app-quick-merge-form.app-quick-merge-form > .app-dialog-body > .app-field { flex: 0 0 auto; margin-bottom: 0 !important; }
.app-quick-merge-current { margin: 0; overflow-wrap: anywhere; font-size: 13px; line-height: 18px; }
.app-quick-merge-form .app-field > label,
.app-quick-merge-form .app-field-label,
.app-quick-merge-form .app-choice-option,
.app-quick-merge-form .app-checkbox-label { font-size: 13px; }
.app-quick-merge-keep-original .app-checkbox-label { margin: 0 !important; }
.app-quick-merge-list { display: grid; max-height: 260px; overflow-y: auto; gap: 6px; border: 1px solid var(--color-gray-200); border-radius: var(--radius-sm); padding: 8px; }
.app-quick-merge-item { min-height: 38px; padding: 8px 10px; }
.app-quick-merge-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-quick-merge-empty { margin: 4px 2px; }
.app-field-label { display: block; margin: 0 0 4px; color: var(--color-gray-700); font-weight: 600; }
.app-merge-order { margin: 0; padding: 0; list-style: none; border: 1px solid var(--color-gray-200); border-radius: var(--radius-sm); }
.app-merge-item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; }
.app-merge-item + .app-merge-item { border-top: 1px solid var(--color-gray-200); }
.app-merge-position { display: inline-flex; flex: 0 0 24px; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--color-primary-50, #eff6ff); color: var(--color-primary-700); font-size: 12px; font-weight: 600; }
.app-merge-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-merge-item .js-merge-move[data-direction="up"] .app-icon { transform: rotate(-90deg); }
.app-merge-item .js-merge-move[data-direction="down"] .app-icon { transform: rotate(90deg); }
.app-merge-file-name-field { margin-top: 10px; }
.app-document-table.app-document-table--selectable th:nth-child(2) { width: 44px; text-align: center; }
.app-document-table.app-document-table--selectable th:nth-child(3) { width: 230px; }
.app-document-table.app-document-table--selectable th:nth-child(4) { width: 82px; }
.app-document-table.app-document-table--selectable th:nth-child(5) { width: 58px; }
.app-document-table.app-document-table--selectable th:nth-child(6) { width: 168px; }
.app-document-table.app-document-table--selectable th:nth-child(2), .app-document-table.app-document-table--selectable td:nth-child(2) { padding-inline: 6px; }
@media (max-width: 560px) {
    .selected-item-actions { align-items: stretch; flex-direction: column; }
    .selected-item-actions .selected-item-count { margin-right: 0; }
}
.app-filter-card--compact { padding: 12px 10px; }
.app-table--compact th, .app-table--compact td { padding: 9px 10px; }
.app-filter-field--wide { flex: 1 1 420px !important; min-width: 320px !important; }
.app-assignment-summary-table th, .app-assignment-summary-table td { padding: 6px 8px; }
.app-filter-title { margin: 0 0 12px; color: var(--color-gray-900); font-size: 16px; font-weight: 600; }
.app-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.app-toolbar-spacer { flex: 1 1 auto; }
.app-filter-grid { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.app-field { flex: 1 1 180px; min-width: 160px; margin: 0 !important; }
.app-field label { display: block; margin: 0 0 10px; color: var(--color-gray-700); font-weight: 600; }
.app-filter-actions { display: flex; align-items: flex-end; gap: 10px; flex: 0 0 auto; margin-left: auto; }
.app-filter-card input, .app-filter-card select { width: 100%; height: 36px; padding: 7px 12px; border: 1px solid var(--color-gray-300); border-radius: var(--radius-sm); color: var(--color-gray-900); background: var(--color-white); font-size: 13px; }
.app-filter-card input:focus, .app-filter-card select:focus { border-color: var(--color-primary-600); box-shadow: 0 0 0 3px rgba(21,94,239,.12); outline: none; }
.data-entry-filter-card { padding: 16px 20px; }
.data-entry-filter-card .data-entry-filter-row {
    display: grid;
    grid-template-columns: minmax(220px, 1.8fr) minmax(180px, 1fr) 160px 160px auto auto;
    align-items: end;
    gap: 10px;
    margin: 0;
}
.data-entry-filter-card .data-entry-filter-keyword,
.data-entry-filter-card .data-entry-filter-status,
.data-entry-filter-card .data-entry-filter-date { min-width: 0; margin: 0; }
.data-entry-filter-card .data-entry-filter-date { font-size: 12px; }
.data-entry-filter-card .app-btn { white-space: nowrap; }
@media (max-width: 1180px) {
    .data-entry-filter-card .data-entry-filter-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .data-entry-filter-card .data-entry-filter-keyword { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
    .data-entry-filter-card { padding: 16px; }
    .data-entry-filter-card .data-entry-filter-row { grid-template-columns: 1fr; }
    .data-entry-filter-card .data-entry-filter-keyword { grid-column: auto; }
}
.user-page-header { align-items: stretch; }
.user-page-filter { flex: 1 1 auto; min-width: 0; padding: 16px 18px; border: 1px solid var(--color-gray-200); border-radius: var(--radius-md); background: var(--color-white); box-shadow: var(--shadow-sm); }
.user-page-filter .app-filter-grid { gap: 12px; }

.user-filter-keyword { flex: 2 1 300px; }
.user-filter-page-size { flex: 0 0 110px; min-width: 110px; }
.app-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.app-form-grid--compact { gap: 12px 16px; }
.app-form-grid > div { min-width: 0; }
.app-form-grid-full { grid-column: 1 / -1; }
.catalog-data-form-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; }
.catalog-data-form-grid > .app-field { grid-column: span var(--catalog-col-span, 12); min-width: 0; }
.catalog-data-form-grid > .app-field > label { margin-bottom: 6px; font-size: 12px; }
.catalog-data-form-grid .app-checkbox-label { min-height: 38px; }
.ui-dialog.catalog-data-dialog-wrapper .ui-dialog-content { padding: 18px 20px 8px; max-height: calc(100vh - 150px); overflow-y: auto; }
.ui-dialog.catalog-data-dialog-wrapper .ui-dialog-buttonpane { margin-top: 0; }
@media (max-width: 760px) { .catalog-data-form-grid > .app-field { grid-column: span 12 !important; } }
.user-form .app-toolbar { grid-column: 1 / -1; }
.ui-dialog:has(.user-form) .ui-dialog-content { padding-top: 0; }
.app-data-card-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 20px; border-bottom: 1px solid var(--color-gray-200); background: var(--color-white); }
.app-data-card-header h2 { margin: 0 0 3px; color: var(--color-gray-900); font-size: 16px; line-height: 24px; font-weight: 600; }
.app-data-card-header p { margin: 0; color: var(--color-gray-500); font-size: 12px; }
.app-dialog-form.user-form > .app-dialog-body { padding-top: 12px; }
.user-form-fields { row-gap: 14px; }
.user-form-fields > .app-field { display: flex; flex-direction: column; gap: 6px; }
.user-form-fields > .app-field > label { margin-bottom: 0; }
.user-password-field .field-validation-error { margin-top: 0; }
.user-form-section-heading h3 { margin: 0 0 3px; color: var(--color-gray-900); font-size: 15px; line-height: 22px; }
.user-form-section-heading p { margin: 0; color: var(--color-gray-500); font-size: 12px; line-height: 18px; }
.user-form-section { margin-top: 8px; padding-top: 7px; border-top: 1px solid var(--color-gray-200); }
.user-form-section-heading { margin-bottom: 7px; }
.app-choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.app-choice-option { display: flex !important; align-items: center; gap: 10px; min-height: 34px; margin: 0 !important; padding: 6px 12px; border: 1px solid var(--color-gray-200); border-radius: var(--radius-sm); background: var(--color-white); color: var(--color-gray-700) !important; font-weight: 500 !important; cursor: pointer; }
.app-choice-option:hover { border-color: var(--color-primary-300); background: var(--color-primary-50); }
.app-choice-option input { width: 17px !important; min-height: 17px !important; margin: 0; }
.role-group-role-option { display: flex !important; align-items: center !important; flex-direction: row !important; min-height: 40px; padding: 8px 10px; gap: 8px; }
.role-group-role-option > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.role-group-role-option > span { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.role-group-role-code { color: var(--color-gray-500); font-size: 11px; font-weight: 400; line-height: 1.2; }
.user-form .form-hint { display: block; margin-top: 8px; color: var(--color-gray-500); font-size: 12px; }
.user-form-actions { justify-content: flex-end; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--color-gray-200); }
.user-status-field { display: flex; align-items: center; gap: 12px; }
.user-status-field > label:first-child { margin: 0; }
.user-status-switch { display: inline-flex !important; align-items: center; gap: 8px; width: max-content; margin: 0 !important; color: var(--color-gray-700); font-weight: 500 !important; cursor: pointer; }
.user-status-switch input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.user-switch-track { position: relative; display: inline-block; width: 38px; height: 22px; border-radius: 999px; background: var(--color-gray-300); transition: background .15s ease; }
.user-switch-track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--color-white); box-shadow: 0 1px 3px rgba(16,24,40,.22); transition: transform .15s ease; }
.user-department-section { margin-top: 16px; }
.user-department-section .user-form-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.user-department-section .user-form-section-heading .app-btn { min-height: 30px; padding: 5px 10px; font-size: 12px; }
.user-department-rows { display: grid; gap: 8px; }
.user-department-row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.2fr) auto auto; align-items: end; gap: 8px; padding: 8px; border: 1px solid var(--color-gray-200); border-radius: 7px; background: var(--color-gray-50); }
.user-department-primary { padding-bottom: 7px; white-space: nowrap; }
.user-department-primary label { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.user-department-row > .app-icon-action { margin-bottom: 4px; }
.user-department-empty { padding: 8px 0; }
@media (max-width: 700px) { .user-department-row { grid-template-columns: 1fr; align-items: stretch; } .user-department-primary { padding-bottom: 0; } .user-department-row > .app-icon-action { justify-self: end; margin-bottom: 0; } }
.user-status-switch input:checked + .user-switch-track { background: var(--color-primary-600); }
.user-status-switch input:checked + .user-switch-track::after { transform: translateX(16px); }
.user-status-switch input:focus-visible + .user-switch-track { outline: 2px solid var(--color-primary-600); outline-offset: 2px; }
.role-group-tabs { margin: 18px -20px 16px; }
.ui-dialog:has(.role-group-tabs) {
    width: min(760px, calc(100vw - 32px)) !important;
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 32px);
}
.ui-dialog:has(.role-group-tabs) .ui-dialog-titlebar { padding: 12px 48px 12px 16px; }
.ui-dialog:has(.role-group-tabs) .ui-dialog-content { max-height: calc(100vh - 76px); overflow-y: auto; padding: 0 16px 20px; }
.ui-dialog:has(.role-group-tabs) .role-group-tabs { margin: 0 -16px 10px; }
.app-form-grid > div > label.role-group-status-switch { display: inline-flex !important; align-items: center; flex-direction: row; gap: 8px; width: max-content; min-height: 24px; margin: 0; color: var(--color-gray-700); font-weight: 500; white-space: nowrap; cursor: pointer; }
.role-group-status-switch input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.role-group-switch-track { position: relative; display: inline-block; flex: 0 0 auto; width: 38px; height: 22px; border-radius: 999px; background: var(--color-gray-300); transition: background .15s ease; }
.role-group-switch-track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--color-white); box-shadow: 0 1px 3px rgba(16,24,40,.22); transition: transform .15s ease; }
.role-group-status-switch input:checked + .role-group-switch-track { background: var(--color-primary-600); }
.role-group-status-switch input:checked + .role-group-switch-track::after { transform: translateX(16px); }
.role-group-status-switch input:focus-visible + .role-group-switch-track { outline: 2px solid var(--color-primary-600); outline-offset: 2px; }
.role-group-users-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.role-group-users-toolbar h3 { margin: 0 0 3px; color: var(--color-gray-900); font-size: 15px; }
.role-group-users-table th, .role-group-users-table td { padding: 8px 10px; }
.role-group-user-picker select { min-height: 40px; }
.role-group-user-picker .app-dialog-actions { margin-top: 16px; }
.app-dialog-form.role-group-form > .app-dialog-body { padding-top: 0; padding-bottom: 4px; }
.role-group-form .role-group-tabs { margin-bottom: 8px; }
.role-group-form .app-dialog-footer { margin-top: 10px !important; padding-top: 8px; padding-bottom: 2px; }
@media (max-width: 640px) { .app-data-card-header { align-items: flex-start; flex-direction: column; } .app-data-card-header .app-btn { width: 100%; } .app-form-grid--compact, .app-choice-grid { grid-template-columns: 1fr; } .app-form-grid-full { grid-column: auto; } .user-form-actions { flex-direction: column-reverse; align-items: stretch; } .user-form-actions .app-btn { width: 100%; } .role-group-form .app-dialog-footer { flex-direction: column-reverse; align-items: stretch; } .role-group-form .app-dialog-footer .app-btn { width: 100%; } }
@media (max-width: 1100px) { .user-page-header { flex-direction: column; } .user-page-header .app-page-heading { width: 100%; } .user-page-filter { width: 100%; } }
.app-form-row { display: flex; gap: 12px; }
.app-form-row > * { flex: 1; min-width: 0; }

.app-form label { display: block; margin: 0 0 10px; color: var(--color-gray-700); font-weight: 600; }
.app-form > div, .app-form form > div { margin-bottom: 0; }
.app-form .app-field { min-width: 0; }
.app-form .app-field > label { margin-bottom: 10px; }
.app-form form > .app-field { margin-bottom: 12px !important; }
.app-form .form-hint,
.app-form .app-form-hint { display: block; margin-top: 5px; color: var(--color-gray-500); font-size: 11px; font-weight: 400; line-height: 16px; }
.app-form .app-toolbar { margin-top: 12px; }
.app-form .app-form-actions { justify-content: flex-end; }
.app-form .app-detail-panel-inner > div { margin-bottom: 8px; }
.app-form .app-detail-panel-inner > div:last-child { margin-bottom: 0; }
.app-metadata-editor > .app-field { margin-bottom: 14px !important; }
.app-metadata-editor > .app-field > label { margin-bottom: 6px; }
.app-metadata-editor > .app-field + div { margin-bottom: 0; }
.dynamic-metadata-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; }
.dynamic-metadata-field { grid-column: span var(--catalog-col-span, 12); min-width: 0; }
.app-form .dynamic-metadata-field > label { margin-bottom: 6px; }
.app-form input, .app-form select, .app-control {
    width: 100%; height: 36px; padding: 6px 10px; border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-sm); color: var(--color-gray-900); background: var(--color-white);
    transition: border-color .15s, box-shadow .15s;
}
.app-form input[type=hidden] { display: none; }
.app-form textarea {
    width: 100%; min-height: 64px; padding: 7px 10px; border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-sm); color: var(--color-gray-900); background: var(--color-white);
    transition: border-color .15s, box-shadow .15s; resize: vertical;
}
.app-form input::placeholder, .app-form textarea::placeholder { color: #98a2b3; }
.app-form input:hover, .app-form select:hover, .app-form textarea:hover { border-color: #98a2b3; }
.app-form input:focus, .app-form select:focus, .app-form textarea:focus {
    border-color: var(--color-primary-600); box-shadow: 0 0 0 3px rgba(21,94,239,.12); outline: none;
}
.app-form input[readonly], .app-form select:disabled, .app-form textarea:disabled {
    border-color: var(--color-gray-200); background: var(--color-gray-100); color: var(--color-gray-500);
    opacity: 1;
}
.app-form input[readonly] { cursor: default; }
.app-form select:disabled, .app-form textarea:disabled { cursor: not-allowed; }
.app-form input[readonly]:hover, .app-form select:disabled:hover, .app-form textarea:disabled:hover,
.app-form input[readonly]:focus, .app-form select:disabled:focus, .app-form textarea:disabled:focus {
    border-color: var(--color-gray-200); box-shadow: none; outline: none;
}
.app-form .select2-container--default.select2-container--disabled .select2-selection--single,
.app-form .select2-container--default.select2-container--disabled .select2-selection--multiple {
    border-color: var(--color-gray-200); background: var(--color-gray-100); color: var(--color-gray-500);
    cursor: not-allowed; opacity: 1;
}
.required-mark { color: var(--color-danger-600); }
.password-input-wrap { position: relative; display: flex; align-items: center; }
.password-input-wrap input { padding-right: 44px; }
.password-toggle { position: absolute; right: 8px; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--color-gray-500); cursor: pointer; }
.password-toggle:hover { background: var(--color-gray-100); color: var(--color-gray-900); }
.password-toggle .app-icon { width: 18px; height: 18px; }
.app-form input[type=checkbox], .app-form input[type=radio] { width: 18px; height: 18px; min-height: 18px; accent-color: var(--color-primary-600); }
.app-checkbox-label { display: inline-flex !important; align-items: center; gap: 8px; margin: 0 16px 8px 0 !important; font-weight: 400 !important; }
.field-validation-error { display: block; height: auto; min-height: 0; margin-top: 3px; color: var(--color-danger-600); font-size: 12px; line-height: 18px; }
.field-validation-error:empty { display: none; }
.app-form .field-validation-error:not(:empty) { display: block; color: var(--color-danger-600); }
.app-form .input-validation-error, .app-form .input-validation-error:hover { border-color: var(--color-danger-500, #f04438) !important; }
.app-form .input-validation-error:focus { border-color: var(--color-danger-500, #f04438) !important; box-shadow: 0 0 0 3px rgba(240,68,56,.12) !important; }

.app-btn {
    min-height: 36px; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    padding: 7px 14px; border: 1px solid transparent; border-radius: var(--radius-sm);
    background: var(--color-primary-600); color: var(--color-white); font-weight: 600; text-decoration: none; cursor: pointer;
    box-shadow: 0 1px 2px rgba(16,24,40,.08);
}
.app-btn:hover { background: var(--color-primary-700); }
.app-btn:disabled { opacity: .55; cursor: not-allowed; }
.app-btn-secondary { border-color: var(--color-gray-300); background: var(--color-white); color: var(--color-gray-700); }
.app-btn-secondary:hover { background: var(--color-gray-50); }
.ui-dialog-content a.app-btn { color: var(--color-white); text-decoration: none; }
.ui-dialog-content a.app-btn:hover { color: var(--color-white); }
.ui-dialog-content a.app-btn.app-btn-secondary { color: var(--color-gray-700); }
.ui-dialog-content a.app-btn.app-btn-secondary:hover { color: var(--color-gray-900); }
.app-btn-success { background: var(--color-success-600); }
.app-btn-success:hover { background: #027a48; }
.app-btn-danger { background: var(--color-danger-600); }
.app-detail-panel #btn-reject { color: var(--color-white); }
.app-detail-panel #btn-reject:hover,
.app-detail-panel #btn-reject:focus-visible { color: var(--color-white); }
.app-btn-danger:hover { background: #b42318; }
.app-btn-ghost { border-color: transparent; background: transparent; color: var(--color-primary-600); box-shadow: none; }
.app-btn-ghost:hover { background: var(--color-primary-50); }
.app-btn .app-icon { width: 16px; height: 16px; }
.sync-tool-download { position: relative; }
.sync-tool-download-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 20; min-width: 140px; padding: 5px; border: 1px solid var(--color-gray-200); border-radius: var(--radius-sm); background: var(--color-white); box-shadow: 0 8px 20px rgba(16,24,40,.12); }
.sync-tool-download-menu a { display: block; padding: 8px 10px; border-radius: 5px; color: var(--color-gray-700); text-decoration: none; white-space: nowrap; }
.sync-tool-download-menu a:hover { background: var(--color-gray-50); color: var(--color-primary-600); }

.app-data-card { padding: 0; overflow: hidden; }
.app-table-wrap { width: 100%; overflow-x: auto; }
.app-table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--color-white); }
.app-workflow-list-table--wide-name { table-layout: fixed; }
.app-workflow-list-table--wide-name th:nth-child(1),
.app-workflow-list-table--wide-name td:nth-child(1) { width: 44px; }
.app-workflow-list-table--wide-name th:nth-child(2),
.app-workflow-list-table--wide-name td:nth-child(2) { width: 35%; min-width: 280px; }
.app-workflow-list-table--wide-name td:nth-child(2) { overflow: hidden; }
.app-workflow-list-table--wide-name td:nth-child(2) .app-cell-title,
.app-workflow-list-table--wide-name td:nth-child(2) .app-cell-subtitle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-table th, .app-table td { padding: 8px 12px; border-bottom: 1px solid var(--color-gray-200); text-align: left; vertical-align: middle; }
.app-table th { color: var(--color-gray-700); background: var(--color-gray-50); font-weight: 600; white-space: nowrap; }
.app-table tbody tr:hover { background: var(--color-gray-25); }
.app-table tbody tr:last-child td { border-bottom: 0; }
.app-table tbody tr.app-table-row--current { background: var(--color-primary-50); }
.app-table tbody tr.app-table-row--current:hover { background: var(--color-primary-100); }
.app-table tbody tr.app-table-row--current td:first-child { border-left: 3px solid var(--color-primary-600); padding-left: 11px; }
.app-table a:not(.app-btn) { color: var(--color-primary-600); font-weight: 500; text-decoration: none; }
.app-table a:not(.app-btn):hover { text-decoration: underline; }
.progress-statistics-card { padding: 0; overflow: hidden; }
.progress-breadcrumb { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 12px; border-bottom: 1px solid #e2e8f0; color: var(--color-gray-500); }
.progress-breadcrumb a,
.progress-breadcrumb > span,
.progress-breadcrumb > strong { display: inline-flex; align-items: center; min-height: 22px; line-height: 20px; }
.progress-breadcrumb a { color: var(--color-primary-600); text-decoration: none; }
.progress-breadcrumb a .app-icon { width: 16px; height: 16px; }
.progress-table-wrap { max-width: 100%; overflow-x: auto; overflow-y: hidden; }
.progress-table {
    min-width: 1780px;
    table-layout: fixed;
    font-family: inherit;
    font-size: 14px;
    line-height: 20px;
    color: var(--color-gray-700);
}
.progress-table .progress-col-name { width: 260px; }
.progress-table .progress-col-total { width: 120px; }
.progress-table .progress-col-metric { width: 100px; }
.progress-table th, .progress-table td { padding: 8px 10px; font-family: inherit; text-align: center; border-right: 1px solid #d7e0ea; }
.progress-table thead th { padding: 6px 8px; }
.progress-table tbody tr:nth-child(even) { background: #fbfcfe; }
.progress-table tbody tr:hover { background: #f0f6ff; }
.progress-table thead tr:first-child th, .progress-table thead tr:nth-child(2) th { background: #eaf0f6; color: #243b5a; text-align: center; font-size: 13px; font-weight: 600; line-height: 16px; }
.progress-table thead tr:first-child th:not([rowspan]) { border-bottom: 1px solid #c6d4e2; }
.progress-table thead tr:nth-child(2) th { white-space: normal; }
.progress-table tbody td { font-size: 14px; }
.progress-table thead tr th.progress-group-ocr { background: #dbeafe; color: #155eef; }
.progress-table tbody td.progress-group-ocr { background: #f5f9ff; color: #155eef; }
.progress-table thead tr th.progress-group-searchable { background: #eadfff; color: #6941c6; }
.progress-table tbody td.progress-group-searchable { background: #fbf9ff; color: #6941c6; }
.progress-table thead tr th.progress-group-assignment { background: #d7f5ec; color: #087f6b; }
.progress-table tbody td.progress-group-assignment { background: #f5fffb; color: #087f6b; }
.progress-table thead tr th.progress-group-entry { background: #e6edf5; color: #475467; }
.progress-table tbody td.progress-group-entry { background: #f8fafc; color: #475467; }
.progress-table thead tr th.progress-group-review1,
.progress-table thead tr th.progress-group-review2 { background: #ffebd6; color: #b54708; }
.digital-file-statistics-table thead th { background: #eaf0f6; color: #2f3b4a; border-bottom-color: #b7c7d8; }
.digital-file-statistics-table thead tr:first-child th { border-bottom-color: #b7c7d8; }
.progress-table tbody td.progress-group-review1,
.progress-table tbody td.progress-group-review2 { background: #fffaf5; color: #b54708; }
.progress-table tbody tr:nth-child(even) td { filter: brightness(.99); }
.progress-table .progress-name-column { position: sticky; left: 0; z-index: 2; width: 260px; min-width: 260px; max-width: 340px; text-align: left; background: var(--color-white); white-space: nowrap; }
.progress-table thead tr:first-child th:nth-child(2) { width: 128px; }
.progress-table thead .progress-name-column { z-index: 3; background: #eaf0f6; }
.progress-assigned-cell { white-space: nowrap; }
.progress-assigned-count { display: inline-block; min-width: 1.25em; margin: 0; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; font-weight: 600; line-height: inherit; text-decoration: underline; text-underline-offset: 3px; vertical-align: middle; }
.progress-assigned-link { cursor: pointer; }
.progress-assigned-link:hover { color: var(--color-primary-600); }
.progress-assigned-link:focus-visible { border-radius: 2px; }
.ui-dialog:has(.progress-assigned-dialog) .ui-dialog-content { padding: 12px 16px 8px; }
.ui-dialog:has(.progress-assigned-dialog) .progress-assigned-dialog { min-width: 0; }
.ui-dialog:has(.progress-assigned-dialog) .progress-assigned-filter { margin-bottom: 10px; padding: 8px 10px; }
.ui-dialog:has(.progress-assigned-dialog) .progress-assigned-filter .user-filter-keyword { flex: 1 1 auto !important; width: auto; min-width: 280px !important; }
.ui-dialog:has(.progress-assigned-dialog) .progress-assigned-filter .user-filter-keyword input { max-width: none; }
.ui-dialog:has(.progress-assigned-dialog) .progress-assigned-table-wrap { max-height: min(360px, calc(100vh - 330px)); overflow-y: auto; }
.ui-dialog:has(.progress-assigned-dialog) .progress-assigned-table-footer { padding: 8px 10px; gap: 12px; }
.ui-dialog:has(.progress-assigned-dialog) .progress-assigned-table-footer .app-table-footer-pagination { gap: 12px; }
.ui-dialog:has(.progress-assigned-dialog) .progress-assigned-table-footer .app-pager a,
.ui-dialog:has(.progress-assigned-dialog) .progress-assigned-table-footer .app-pager span { min-width: 30px; min-height: 30px; padding: 4px 8px; border-radius: 7px; }
.ui-dialog:has(.progress-assigned-dialog) .progress-assigned-table-footer .app-pager-size label { margin-right: 4px; }
.ui-dialog:has(.progress-assigned-dialog) .progress-assigned-table-footer .app-pager-size select { height: 30px; padding: 4px 8px; }
.ui-dialog:has(.progress-assigned-dialog) .app-assignment-summary-table { table-layout: fixed; }
.ui-dialog:has(.progress-assigned-dialog) .app-assignment-summary-table th:nth-child(1),
.ui-dialog:has(.progress-assigned-dialog) .app-assignment-summary-table td:nth-child(1) { width: 56px; }
.ui-dialog:has(.progress-assigned-dialog) .app-assignment-summary-table th:nth-child(3),
.ui-dialog:has(.progress-assigned-dialog) .app-assignment-summary-table td:nth-child(3) { width: 92px; }
.ui-dialog:has(.progress-assigned-dialog) .app-assignment-summary-table th:nth-child(4),
.ui-dialog:has(.progress-assigned-dialog) .app-assignment-summary-table td:nth-child(4) { width: 96px; text-align: center; }
.ui-dialog:has(.progress-assigned-dialog) .app-assignment-summary-table th,
.ui-dialog:has(.progress-assigned-dialog) .app-assignment-summary-table td { padding-top: 5px; padding-bottom: 5px; }
.progress-name-content { display: flex; align-items: center; min-width: 0; gap: 7px; }
.progress-locked-icon { width: 15px; height: 15px; flex: 0 0 15px; color: #b7791f; stroke-width: 2; }
.progress-node-link, .progress-name-column .app-cell-title { display: block; min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.progress-table .progress-name-content--locked .progress-node-link,
.progress-table .progress-name-content--locked .app-cell-title { color: var(--color-gray-500); }
.progress-table .progress-name-content--locked .progress-node-link:hover,
.progress-table .progress-name-content--locked .progress-node-link:focus-visible { color: var(--color-gray-500); }
.progress-name-actions { display: inline-flex; align-items: center; flex: 0 0 auto; gap: 2px; }
.progress-name-actions .app-icon-action { width: 24px; height: 24px; }
.progress-status-action-cell { white-space: nowrap; }
.progress-ocr-error-count { display: inline-block; vertical-align: middle; }
.progress-status-action-cell .app-icon-action { width: 24px; height: 24px; margin-left: 4px; vertical-align: middle; }
.app-cell-title { color: var(--color-gray-900); font-weight: 500; }
.app-cell-subtitle { display: block; margin-top: 3px; color: var(--color-gray-500); font-size: 12px; }
.folder-aggregation-target { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.folder-aggregation-target .catalog-field-content { min-width: 0; }
.folder-aggregation-dialog-form .app-table th,
.folder-aggregation-dialog-form .app-table td { padding: 7px 12px; }
.folder-aggregation-dialog-form .app-table th { height: 34px; }
.folder-aggregation-dialog-form .app-table td { height: 44px; }
.folder-aggregation-dialog-form .catalog-field-content strong { font-size: 12px; line-height: 16px; }
.folder-aggregation-dialog-form .catalog-field-content small { font-size: 10px; line-height: 13px; }
.folder-aggregation-bulk-toolbar { display: flex; align-items: flex-end; gap: 14px; margin-bottom: 16px; padding: 12px 14px; border: 1px solid var(--color-primary-100); border-radius: var(--radius-md); background: var(--color-primary-50); }
.folder-aggregation-bulk-field { flex: 0 1 360px; min-width: 220px; }
.folder-aggregation-bulk-field label { display: block; margin: 0 0 6px; color: var(--color-gray-700); font-size: 12px; font-weight: 650; }
.folder-aggregation-bulk-field .select2-container { width: 100% !important; }
@media (max-width: 640px) { .folder-aggregation-bulk-toolbar { align-items: stretch; flex-direction: column; gap: 8px; } .folder-aggregation-bulk-field { min-width: 0; } }

.app-document-table { min-width: 950px; table-layout: fixed; }
.app-document-table th { white-space: normal; line-height: 16px; font-size: 13px; }
.app-document-table th:nth-child(1) { width: 44px; text-align: center; }
.app-document-table th:nth-child(2) { width: 230px; }
.app-document-table th:nth-child(3) { width: 82px; }
.app-document-table th:nth-child(4) { width: 58px; }
.app-document-table th:nth-child(5) { width: 168px; }
.app-document-table th.app-document-column--assignment,
.app-document-table td.app-document-column--assignment { width: 110px; min-width: 110px; }
.app-document-table th.app-document-column--workflow,
.app-document-table td.app-document-column--workflow { width: 125px; min-width: 125px; }
.app-document-table th.app-document-column--evaluation,
.app-document-table td.app-document-column--evaluation { width: 125px; min-width: 125px; }
.app-document-table th.app-document-dynamic-column,
.app-document-table td.app-document-dynamic-column { width: 140px; min-width: 140px; }
.app-document-table td.app-document-dynamic-column { color: var(--color-gray-600); overflow-wrap: anywhere; }
.app-document-table th, .app-document-table td { padding: 9px 10px; }
.app-document-table th:nth-child(1), .app-document-table td:nth-child(1) { padding-inline: 6px; }
.app-document-table .badge { font-size: 11px; min-height: 22px; padding: 1px 7px; }
.app-document-table td:not(.app-cell-index) { overflow: hidden; }
.app-document-cell--name .app-cell-title { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 20px; overflow-wrap: anywhere; }
.app-document-path { display: block; margin-top: 3px; overflow: hidden; color: var(--color-gray-500); font-size: 11px; line-height: 16px; text-overflow: ellipsis; white-space: nowrap; }
.app-document-cell--type, .app-document-cell--pages, .app-document-cell--date { color: var(--color-gray-600); }
.app-document-table th:last-child,
.app-document-cell--actions {
    position: sticky;
    right: 0;
    z-index: 2;
    width: 106px;
    min-width: 106px;
    background: var(--color-white);
}
.app-table-wrap.is-overflowing .app-document-table th:last-child,
.app-table-wrap.is-overflowing .app-document-cell--actions {
    border-left: 1px solid var(--color-gray-200);
    box-shadow: -6px 0 16px -6px rgba(16, 24, 40, .12);
}
.app-document-table th:last-child { z-index: 3; background: var(--color-gray-50); text-align: center; }
.app-document-table tbody tr:hover .app-document-cell--actions { background: var(--color-gray-25); }
.app-document-cell--actions { overflow: visible !important; vertical-align: middle; padding-block: 8px; }
.app-document-cell--actions .app-row-actions { justify-content: center; }
.app-document-cell--actions.has-open-menu { z-index: 5; }
.app-document-cell--actions .js-row-kebab-toggle { font-size: 18px; line-height: 1; }
.app-document-cell--actions .app-kebab-dropdown {
    position: fixed;
    top: auto;
    right: auto;
    bottom: auto;
    z-index: 1000;
}
.app-cell-index { width: 1%; padding-inline: 8px !important; text-align: center !important; color: var(--color-gray-500); white-space: nowrap; }
/* STT tự động bằng CSS counter cho bảng lazy load (Tài liệu cùng bộ): dòng tĩnh hiện
   tại + các dòng tải thêm dùng chung một chuỗi số liên tục, không cần server tính lại
   start-index qua từng batch. Chỉ áp dụng cho bảng có class .app-table--auto-index. */
.app-table--auto-index tbody { counter-reset: app-row-index; }
.app-table--auto-index tbody tr { counter-increment: app-row-index; }
.app-table--auto-index tbody tr td.app-cell-index::before { content: counter(app-row-index); }
.app-status-stack { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 170px; }
.app-document-cell--ocr-searchable .app-status-stack { min-width: 0; }
.app-document-cell--ocr-searchable .badge { white-space: nowrap; }
.app-icon-action {
    width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
    padding: 0; border: 0; border-radius: var(--radius-sm);
    color: var(--color-gray-500); background: transparent; cursor: pointer; text-decoration: none;
}
.app-table a.app-icon-action { color: var(--color-gray-500); }
.app-icon-action:hover { color: var(--color-primary-700); background: var(--color-primary-50); }
.app-icon-action:disabled { opacity: .55; cursor: not-allowed; }
.app-icon-action.js-kebab-toggle { font-size: 24px; font-weight: 600; line-height: 1; }
.app-icon-action--danger { color: var(--color-danger-600, #dc2626); }
.app-icon-action--danger:hover { color: var(--color-danger-700, #b91c1c); background: var(--color-danger-50, #fef2f2); border-color: var(--color-danger-100, #fecaca); }

.app-row-actions { display: flex; align-items: center; justify-content: flex-end; gap: 5px; white-space: nowrap; }
.hierarchical-group-name { padding-left: 0; }
.hierarchical-group-toggle, .hierarchical-group-toggle-spacer { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin-right: 4px; padding: 0; border: 0; background: transparent; color: var(--color-gray-500); vertical-align: middle; }
.hierarchical-group-toggle { cursor: pointer; border-radius: 4px; }
.hierarchical-group-toggle:hover { background: var(--color-gray-100); color: var(--color-gray-800); }
.hierarchical-group-toggle .app-icon { width: 14px; height: 14px; }
.hierarchical-group-toggle[aria-expanded="true"] .app-icon { transform: rotate(90deg); }
.hierarchical-group-name--level-1 { padding-left: 20px; }
.hierarchical-group-name--level-2 { padding-left: 40px; }
.hierarchical-group-name--level-3 { padding-left: 60px; }
.hierarchical-group-name--level-4 { padding-left: 80px; }
.hierarchical-group-name--level-5 { padding-left: 100px; }
.role-group-list-card .app-table th:last-child, .role-group-list-card .app-table td:last-child { width: 1%; white-space: nowrap; text-align: right; }
.catalog-list-card .app-table th:first-child, .catalog-list-card .app-table td:first-child,
.catalog-type-list-card .app-table th:first-child, .catalog-type-list-card .app-table td:first-child { width: 1%; text-align: center; white-space: nowrap; }
.catalog-list-card .app-table th:last-child, .catalog-list-card .app-table td:last-child,
.catalog-type-list-card .app-table th:last-child, .catalog-type-list-card .app-table td:last-child { width: 1%; white-space: nowrap; text-align: right; }
.document-type-list-card .app-table th:first-child, .document-type-list-card .app-table td:first-child { width: 1%; text-align: center; white-space: nowrap; }
.document-type-list-card .app-table th:last-child, .document-type-list-card .app-table td:last-child { width: 1%; white-space: nowrap; text-align: right; }
.app-row-action { min-height: 36px; padding: 7px 10px; }
.app-table-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px 16px; border-top: 1px solid var(--color-gray-200); background: white; color: var(--color-gray-500); }

.badge {
    display: inline-flex; align-items: center; min-height: 24px; padding: 2px 9px;
    border-radius: 999px; color: var(--color-gray-700); background: var(--color-gray-100); font-size: 12px; font-weight: 500; white-space: nowrap;
}
.badge-success { color: #027a48; background: var(--color-success-50); }
.badge-warning { color: #b54708; background: var(--color-warning-50); }
.badge-info { color: #175cd3; background: var(--color-info-50); }
.badge-primary { color: var(--color-primary-700); background: var(--color-primary-50); }
.badge-danger { color: #b42318; background: var(--color-danger-50); }

.app-table-footer-pagination { display: flex; align-items: center; justify-content: flex-end; gap: 24px; margin-left: auto; }
.app-pager { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0; }
.app-pager a, .app-pager span {
    min-width: 38px; min-height: 38px; display: inline-flex; align-items: center; justify-content: center;
    padding: 7px 11px; border: 1px solid var(--color-gray-300); border-radius: 10px; color: var(--color-gray-700); text-decoration: none; background: white;
    font-weight: 600; transition: border-color .15s, background .15s, color .15s, box-shadow .15s;
}
  .app-pager span { border-color: var(--color-primary-600); background: var(--color-primary-600); color: white; box-shadow: 0 4px 10px rgba(21,94,239,.2); }
  .app-pager a:hover, .app-pager a:focus-visible { border-color: var(--color-primary-300); background: var(--color-primary-50); color: var(--color-primary-700); outline: none; }
  .app-pager-arrow .app-icon { width: 18px; height: 18px; stroke-width: 2; }
  .app-pager-arrow:not(.app-pager-arrow--next):not(.app-pager-arrow--last) .app-icon { transform: rotate(180deg); }
  .app-pager-arrow--last .app-icon { transform: none; }
  .app-pager-size { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; color: var(--color-gray-600); }
  .app-pager-placeholder { display: block; width: 0; }
  .app-pager-size .select2-container { width: 82px !important; }
  .app-pager-size .select2-container--default .select2-selection--single { min-height: 38px; height: 38px; }
  .app-pager-size .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 36px; }
  .app-pager-size .select2-container--default .select2-selection--single .select2-selection__arrow { height: 36px; }

#toast-container {
    position: fixed; top: 72px; right: 24px; z-index: 10000; width: min(390px, calc(100vw - 32px));
    display: flex; flex-direction: column; gap: 10px; pointer-events: none;
}
.app-toast {
    --toast-color: var(--color-info-600); --toast-bg: var(--color-info-50); --toast-border: #b9dcff;
    position: relative; display: flex; align-items: flex-start; gap: 12px; overflow: hidden;
    min-height: 68px; padding: 14px 40px 16px 14px; border: 1px solid var(--toast-border);
    border-left: 4px solid var(--toast-color); border-radius: 12px; background: var(--toast-bg); color: var(--color-gray-900);
    box-shadow: 0 14px 32px rgba(16,24,40,.14), 0 2px 6px rgba(16,24,40,.06);
    pointer-events: auto; animation: app-toast-in .24s ease-out;
    transition: opacity .18s ease, transform .18s ease;
}
.app-toast-success { --toast-color: var(--color-success-600); --toast-bg: var(--color-success-50); --toast-border: #abefc6; }
.app-toast-info { --toast-color: var(--color-info-600); --toast-bg: var(--color-info-50); --toast-border: #b9dcff; }
.app-toast-warn { --toast-color: var(--color-warning-600); --toast-bg: var(--color-warning-50); --toast-border: #fedf89; }
.app-toast-danger, .app-toast-error { --toast-color: var(--color-danger-600); --toast-bg: var(--color-danger-50); --toast-border: #fecdca; }
.app-toast.is-leaving { opacity: 0; transform: translateX(18px); }
.app-toast-icon {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 26px; width: 26px; height: 26px;
    border-radius: 50%; background: var(--toast-color); color: white; font-size: 15px; font-weight: 800; line-height: 1;
}
.app-toast-info .app-toast-icon { font-family: Georgia, serif; font-size: 17px; }
.app-toast-content { display: grid; gap: 2px; min-width: 0; padding-top: 1px; }
.app-toast-content strong { color: var(--toast-color); font-size: 13px; line-height: 18px; }
.app-toast-content span { color: var(--color-gray-700); font-size: 13px; line-height: 19px; overflow-wrap: anywhere; }
.app-toast-close {
    position: absolute; top: 9px; right: 9px; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 6px;
    background: transparent; color: var(--color-gray-500); font-size: 22px; font-weight: 300; line-height: 22px; cursor: pointer;
}
.app-toast-close:hover { background: rgba(16,24,40,.07); color: var(--color-gray-900); }
.app-toast-progress {
    position: absolute; right: 0; bottom: 0; left: 0; height: 3px; transform-origin: left; background: var(--toast-color);
    animation: app-toast-progress 3.5s linear forwards; opacity: .72;
}
.app-toast:hover .app-toast-progress, .app-toast:focus-within .app-toast-progress { animation-play-state: paused; }
@keyframes app-toast-in { from { opacity: 0; transform: translateX(18px) scale(.98); } to { opacity: 1; transform: translateX(0) scale(1); } }
@keyframes app-toast-progress { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (max-width: 640px) {
    #toast-container { top: 64px; right: 16px; width: calc(100vw - 32px); }
}
.app-notification-toast {
    position: fixed; right: 24px; bottom: 24px; z-index: 10001; width: 320px; display: flex; flex-direction: column; gap: 4px;
    padding: 13px 16px; border: 1px solid var(--color-gray-200); border-radius: 10px; background: white; color: var(--color-gray-900);
    box-shadow: 0 12px 30px rgba(16,24,40,.2); text-decoration: none; animation: app-notification-toast-in .22s ease-out;
}
.app-notification-toast strong { color: var(--color-primary-600); font-size: 13px; }
.app-notification-toast span { color: var(--color-gray-700); font-size: 13px; line-height: 1.4; }
@keyframes app-notification-toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.app-loading, .app-empty, .app-error { padding: 64px 24px; text-align: center; color: var(--color-gray-500); background: white; }
.app-error { color: var(--color-danger-600); }
.app-empty-icon, .app-error-icon {
    display: block; width: 48px; height: 48px; margin: 0 auto 14px;
    stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
.app-empty-icon { color: var(--color-gray-300); stroke: currentColor; fill: none; }
.app-error-icon {
    padding: 10px; border-radius: 50%; background: var(--color-danger-50);
    color: var(--color-danger-600); stroke: currentColor; fill: none;
}
.app-loading::before {
    content: ""; display: block; width: 30px; height: 30px; margin: 0 auto 14px;
    border: 3px solid var(--color-primary-100); border-top-color: var(--color-primary-600); border-radius: 50%; animation: app-spin .8s linear infinite;
}
/* Trạng thái tải thêm cho lazy list (Tài liệu cùng bộ): thanh nhỏ dưới bảng, khác với
   .app-loading/.app-empty/.app-error (dùng cho toàn khối nội dung). */
.app-lazy-list-status { padding: 10px 14px; text-align: center; font-size: 13px; color: var(--color-gray-500); }
.app-lazy-list-status:empty { padding: 0; }
.app-lazy-list-status[data-state="error"] { color: var(--color-danger-600); }
.app-lazy-list-status .js-lazy-list-retry { margin-left: 8px; }
@keyframes app-spin { to { transform: rotate(360deg); } }
.is-ocr-loading::before {
    content: ""; display: inline-block; width: 15px; height: 15px; margin-right: 7px; vertical-align: -2px;
    border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: app-spin .8s linear infinite;
}
.app-icon-action.is-ocr-loading .app-icon { display: none; }
.app-icon-action.is-ocr-loading::before { margin-right: 0; }

.document-type-ocr-card { margin-top: 16px; overflow: hidden; }
.document-type-ocr-card-content { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px; }
.document-type-ocr-card-content h2 { margin: 0 0 4px; color: var(--color-gray-900); font-size: 16px; }
.document-type-ocr-card-content p { margin: 0; color: var(--color-gray-500); font-size: 13px; }
.document-type-ocr-card-content .app-btn { flex: 0 0 auto; }
.document-type-ocr-dialog { display: none; }
.document-type-ocr-dialog.ui-dialog-content { padding: 0; overflow: hidden; }
html.dialog-scroll-locked,
body.dialog-scroll-locked { overflow: hidden; }
html.dialog-scroll-locked .app-sidebar { scrollbar-width: none; }
html.dialog-scroll-locked .app-sidebar::-webkit-scrollbar { width: 0; height: 0; }
.ui-dialog:has(.document-type-ocr-dialog) { display: flex; position: fixed !important; top: 16px !important; left: 50% !important; width: min(1180px, calc(100vw - 32px)) !important; height: calc(100vh - 32px) !important; max-width: calc(100vw - 32px); max-height: calc(100vh - 32px); margin: 0; padding: 0; transform: translateX(-50%); flex-direction: column; }
.ui-dialog:has(.document-type-ocr-dialog) .ui-dialog-titlebar { display: none; }
.ui-dialog:has(.document-type-ocr-dialog) .ui-dialog-buttonpane { margin-top: 0; padding: 12px 18px; border-top: 1px solid var(--color-gray-200); background: white; }
.ui-dialog:has(.document-type-ocr-dialog) .ui-dialog-content { width: 100%; box-sizing: border-box; }
.ui-dialog:has(.document-type-ocr-dialog) .ui-dialog-buttonset { display: flex; gap: 8px; }
.document-type-ocr-header { display: flex; align-items: center; min-height: 62px; padding: 12px 18px; border-bottom: 1px solid var(--color-gray-200); background: white; }
.document-type-ocr-close { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin-left: auto; padding: 6px; border: 0; border-radius: 6px; background: transparent; color: var(--color-gray-500); cursor: pointer; }
.document-type-ocr-close:hover { background: var(--color-gray-100); color: var(--color-gray-900); }
.document-type-ocr-close .app-icon { width: 18px; height: 18px; }
.document-type-ocr-title { display: flex; align-items: center; gap: 9px; }
.document-type-ocr-title-icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; background: var(--color-primary-50); color: var(--color-primary-600); }
.document-type-ocr-title-icon .app-icon { width: 18px; height: 18px; }
.document-type-ocr-header h2 { margin: 0 0 2px; color: var(--color-gray-900); font-size: 16px; }
.document-type-ocr-header p, .document-type-ocr-section-heading small, .document-type-ocr-tree-heading small { display: block; margin: 0; color: var(--color-gray-500); font-size: 12px; }
.document-type-ocr-layout { display: grid; grid-template-columns: minmax(360px, .95fr) minmax(0, 1fr); height: calc(100vh - 225px); min-height: 420px; max-height: calc(100vh - 150px); }
.document-type-ocr-response-pane, .document-type-ocr-mapping-pane { display: flex; min-width: 0; min-height: 0; flex-direction: column; padding: 18px 20px; overflow: hidden; }
.document-type-ocr-response-pane { border-left: 1px solid var(--color-gray-200); background: #fbfcfe; }
.document-type-ocr-section-heading, .document-type-ocr-tree-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.document-type-ocr-section-heading strong, .document-type-ocr-tree-heading strong { color: var(--color-gray-800); font-size: 13px; }
.document-type-ocr-section-heading .app-btn { min-height: 32px; padding: 5px 10px; font-size: 12px; }
.document-type-ocr-section-heading .app-icon { width: 14px; height: 14px; }
.document-type-ocr-endpoint-row { flex: 0 0 auto; width: 100%; min-width: 0; margin-bottom: 16px !important; }
.document-type-ocr-endpoint-row > label { margin-bottom: 6px; font-size: 12px; }
.document-type-ocr-endpoint-control { display: flex; align-items: center; min-width: 0; gap: 10px; }
.document-type-ocr-endpoint-control > input { flex: 1 1 auto; min-width: 0; }
.document-type-ocr-test-button { flex: 0 0 88px; width: 88px; min-width: 88px; }
.document-type-ocr-test-dialog { display: none; }
.document-type-ocr-test-editor { display: block; width: 100%; min-height: 180px; resize: vertical; font-family: Consolas, "Courier New", monospace; font-size: 12px; line-height: 1.5; }
.document-type-ocr-test-status { min-height: 20px; margin-top: 8px; color: var(--color-gray-500); font-size: 12px; }
.document-type-ocr-test-status.is-error { color: var(--color-danger-600); }
.document-type-ocr-test-status.is-success { color: var(--color-success-600); }
.document-type-ocr-sample { flex: 0 0 auto; margin-bottom: 18px; }
.document-type-ocr-editor { display: block; width: 100%; min-height: 180px; resize: vertical; border-color: var(--color-gray-300); background: var(--color-white); color: var(--color-gray-900); font-family: Consolas, "Courier New", monospace; font-size: 12px; line-height: 1.5; }
.document-type-ocr-editor:focus { border-color: var(--color-primary-600); box-shadow: 0 0 0 3px var(--color-primary-50); }
.document-type-ocr-parse-status { min-height: 18px; margin-top: 6px; color: var(--color-danger-600); font-size: 12px; }
.document-type-ocr-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 8px; margin-bottom: 12px; }
.document-type-ocr-map-note { display: flex; align-items: flex-start; gap: 8px; margin: -2px 0 12px; padding: 9px 10px; border: 1px solid #b2ddff; border-radius: 6px; background: var(--color-info-50); color: #175cd3; font-size: 11px; line-height: 16px; }
.document-type-ocr-map-note .app-icon { flex: 0 0 auto; width: 15px; height: 15px; margin-top: 1px; }
.document-type-ocr-map-note strong { font-weight: 650; }
.app-search-field, .document-type-ocr-search { display: flex; align-items: center; gap: 7px; min-width: 0; height: 34px; padding: 0 9px; border: 1px solid var(--color-gray-300); border-radius: 6px; background: white; }
.app-search-field .app-icon, .document-type-ocr-search .app-icon { flex: 0 0 auto; width: 15px; height: 15px; color: var(--color-gray-500); }
.app-search-field input, .document-type-ocr-search input, .document-type-ocr-filter select { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--color-gray-700); font-size: 12px; }
.document-type-ocr-filter select { height: 34px; padding: 0 8px; border: 1px solid var(--color-gray-300); border-radius: 6px; background: white; }
.document-type-ocr-tree { flex: 1 1 0; min-height: 0; padding: 8px 6px; border: 1px solid var(--color-gray-200); border-radius: 7px; background: white; overflow-x: hidden; overflow-y: auto; }
.document-type-ocr-tree-node { position: relative; display: block; height: 25px; min-height: 25px; margin: 0; padding-left: calc(var(--ocr-depth) * 16px + 18px); line-height: 25px; }
.document-type-ocr-node-button { display: grid; grid-template-columns: 18px minmax(0, 1fr) minmax(70px, auto); align-items: center; gap: 6px; width: 100%; height: 25px; min-height: 25px; margin: 0; padding: 0 6px 0 0; border: 0; border-radius: 4px; background: transparent; text-align: left; cursor: pointer; }
.document-type-ocr-node-button:not(:disabled):hover, .document-type-ocr-tree-node.is-selected .document-type-ocr-node-button { background: var(--color-primary-50); }
.document-type-ocr-node-button:disabled { color: var(--color-gray-500); cursor: default; }
.document-type-ocr-node-button code, .document-type-ocr-path { min-width: 0; overflow: hidden; color: var(--color-gray-500); font-family: Consolas, monospace; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.document-type-ocr-node-button code { display: none; }
.document-type-ocr-node-label { overflow: hidden; color: var(--color-gray-800); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.document-type-ocr-tree-node > .document-type-ocr-node-button:disabled .document-type-ocr-node-label { color: var(--color-gray-700); font-weight: 500; }
.document-type-ocr-preview { max-width: 220px; overflow: hidden; color: var(--color-gray-500); font-family: Consolas, monospace; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.document-type-ocr-expand { position: absolute; top: 2px; left: calc(var(--ocr-depth) * 16px); display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 20px; margin: 0; padding: 0; border: 0; background: transparent; color: var(--color-gray-500); cursor: pointer; }
.document-type-ocr-chevron { display: inline-block; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform .2s ease; }
.document-type-ocr-expand.is-open .document-type-ocr-chevron { transform: rotate(45deg); }
.document-type-ocr-expand.is-animated:not(.is-open) .document-type-ocr-chevron { animation: document-ocr-chevron-close .2s ease; }
.document-type-ocr-expand.is-animated.is-open .document-type-ocr-chevron { animation: document-ocr-chevron-open .2s ease; }
@keyframes document-ocr-chevron-open {
    from { transform: rotate(-45deg); }
    to { transform: rotate(45deg); }
}
@keyframes document-ocr-chevron-close {
    from { transform: rotate(45deg); }
    to { transform: rotate(-45deg); }
}
.document-type-ocr-expand:disabled { visibility: hidden; cursor: default; }
.document-type-ocr-type-icon, .document-type-ocr-field-icon { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 4px; background: var(--color-gray-100); color: var(--color-primary-600); font-family: Consolas, monospace; font-size: 9px; font-weight: 700; }
.catalog-field-type-icon .app-icon { width: 24px; height: 24px; stroke: currentColor; }
.document-type-ocr-field-icon.catalog-field-type-icon { width: 28px; height: 28px; border: 1px solid var(--color-gray-200); border-radius: 5px; }
.document-type-ocr-field-icon.catalog-field-type-icon.type-1 { border-color: #c6d8fb; background: #f7faff; color: #2563eb; font-family: Arial, sans-serif; font-size: 9px; font-weight: 700; letter-spacing: -.2px; }
.document-type-ocr-field-icon.catalog-field-type-icon.type-2 { border-color: #bfe3ca; background: #f1fbf4; color: #16803c; }
.document-type-ocr-field-icon.catalog-field-type-icon.type-3 { border-color: #d9caf9; background: #fbf8ff; color: #6941c6; }
.document-type-ocr-field-icon.catalog-field-type-icon.type-4 { border-color: #f5d4a8; background: #fff8ed; color: #d97706; }
.document-type-ocr-field-icon.catalog-field-type-icon.type-5 { border-color: #bde7e5; background: #effafa; color: #0e9f9a; }
.document-type-ocr-tree-node.is-mapped .document-type-ocr-type-icon { background: var(--color-success-50); color: var(--color-success-600); }
.document-type-ocr-state { padding: 28px 16px; color: var(--color-gray-500); font-size: 12px; text-align: center; }
.document-type-ocr-state.is-error { color: var(--color-danger-600); }

@media (min-width: 901px) {
    .document-type-ocr-layout { height: calc(100vh - 155px); max-height: calc(100vh - 120px); }
    .document-type-ocr-response-pane, .document-type-ocr-mapping-pane { padding: 14px 16px; }
    .document-type-ocr-sample { margin-bottom: 12px; }
    .document-type-ocr-editor { height: 132px; min-height: 120px; max-height: 180px; }
    .document-type-ocr-test-editor { min-height: 140px; }
    .document-type-ocr-tree-node, .document-type-ocr-node-button { height: 23px; min-height: 23px; }
    .document-type-ocr-expand { top: 1px; height: 19px; }
}

.document-type-ocr-mapping-count { color: var(--color-primary-600); font-size: 12px; font-weight: 600; white-space: nowrap; }
.document-type-ocr-fields { display: flex; min-height: 0; flex: 1 1 0; flex-direction: column; gap: 7px; overflow-x: hidden; overflow-y: auto; padding: 2px 3px 8px 1px; }
.document-type-ocr-row { display: grid; grid-template-columns: 32px minmax(120px, 1fr) auto; grid-template-areas: "icon field status" "icon path clear"; gap: 2px 8px; align-items: center; padding: 7px 10px; border: 1px solid var(--color-gray-200); border-radius: 7px; background: white; cursor: pointer; }
.document-type-ocr-row:hover { border-color: var(--color-primary-300); box-shadow: 0 0 0 2px var(--color-primary-50); }
.document-type-ocr-row.is-selected { border: 2px solid var(--color-primary-600); background: var(--color-primary-50); box-shadow: 0 0 0 3px rgba(21,94,239,.14); }
.document-type-ocr-row.is-mapped { border-color: var(--color-gray-200); background: var(--color-white); }
.document-type-ocr-row.is-selected.is-mapped { border-left: 2px solid var(--color-primary-600); }
.document-type-ocr-row.is-selected.is-mapped { border-top-color: var(--color-primary-600); border-right-color: var(--color-primary-600); border-bottom-color: var(--color-primary-600); background: var(--color-primary-50); }
.document-type-ocr-field-icon { grid-area: icon; }
.document-type-ocr-field { grid-area: field; min-width: 0; }
.document-type-ocr-field strong, .document-type-ocr-field small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.document-type-ocr-field strong { color: var(--color-gray-800); font-size: 13px; }
.document-type-ocr-row-status { grid-area: status; display: flex; align-items: center; gap: 6px; justify-content: flex-end; }
.document-type-ocr-status { color: var(--color-gray-500); font-size: 11px; white-space: nowrap; }
.document-type-ocr-status.is-mapped { display: inline-flex; align-items: center; min-height: 22px; padding: 2px 8px; border-radius: 999px; background: var(--color-success-50); color: var(--color-success-600); font-size: 10px; font-weight: 650; }
.document-type-ocr-missing { color: var(--color-warning-600); font-size: 10px; }
.document-type-ocr-path { grid-area: path; }
.document-type-ocr-clear { grid-area: clear; width: 26px; height: 26px; padding: 4px; border: 0; border-radius: 5px; background: transparent; color: var(--color-gray-500); cursor: pointer; }
.document-type-ocr-clear:hover { background: var(--color-danger-50); color: var(--color-danger-600); }
.document-type-ocr-clear .app-icon { width: 14px; height: 14px; }
.document-type-ocr-dialog .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media (max-width: 900px) {
    .document-type-ocr-layout { grid-template-columns: 1fr; height: auto; max-height: calc(100vh - 150px); overflow-y: auto; }
    .document-type-ocr-response-pane, .document-type-ocr-mapping-pane { min-height: 360px; overflow: visible; }
    .document-type-ocr-response-pane { border-left: 0; border-bottom: 1px solid var(--color-gray-200); }
    .document-type-ocr-tree { flex: 0 0 300px; }
}
@media (max-width: 900px) {
    .document-type-ocr-dialog.ui-dialog-content { max-width: 100vw; }
    .document-type-ocr-header, .document-type-ocr-response-pane, .document-type-ocr-mapping-pane { padding: 14px; }
    .document-type-ocr-toolbar { grid-template-columns: 1fr; }
    .document-type-ocr-node-button { grid-template-columns: 22px minmax(90px, auto) minmax(140px, 1fr); }
    .document-type-ocr-preview { display: none; }
    .document-type-ocr-row-status { justify-content: flex-start; }
    .document-type-ocr-endpoint-control { align-items: stretch; flex-direction: column; gap: 8px; }
    .document-type-ocr-endpoint-control > input { width: 100%; }
    .document-type-ocr-test-button { width: 100%; }
}
.ui-dialog:has(.document-type-ocr-dialog) .document-type-ocr-dialog.ui-dialog-content {
    display: flex !important;
    height: auto !important;
    min-height: 0;
    max-height: none !important;
    flex-direction: column;
    padding: 0;
}
.ui-dialog:has(.document-type-ocr-dialog) .document-type-ocr-layout {
    height: auto;
    min-height: 0;
    max-height: none;
    flex: 1 1 auto;
}

.app-kpi-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 20px; }
.app-dashboard-kpi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.app-personal-kpi-grid { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

/* KPI card có link (Dashboard): affordance bấm phải rõ ràng ngay ở trạng thái nghỉ, không chỉ khi hover. */
.app-dashboard-kpi-link {
    display: flex; color: inherit; text-decoration: none; cursor: pointer;
    border-width: 1.5px; transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease, background-color .16s ease;
}
.app-dashboard-kpi-link .statistics-kpi-chevron {
    width: 16px; height: 16px; flex: 0 0 16px; align-self: center; margin-left: auto;
    color: var(--color-gray-300); opacity: .8; transition: transform .16s ease, color .16s ease, opacity .16s ease;
}
.app-card.app-dashboard-kpi-link:hover, .app-card.app-dashboard-kpi-link:focus-visible {
    border-color: currentColor; box-shadow: 0 8px 20px rgba(16, 24, 40, .12);
    transform: translateY(-3px); outline: none;
}
.app-dashboard-kpi-link:hover > *, .app-dashboard-kpi-link:focus-visible > * { position: relative; z-index: 1; }
.app-dashboard-kpi-link::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit; background: currentColor; opacity: 0;
    transition: opacity .16s ease; pointer-events: none;
}
.app-dashboard-kpi-link:hover::before, .app-dashboard-kpi-link:focus-visible::before { opacity: .06; }
.app-dashboard-kpi-link:hover .statistics-kpi-chevron, .app-dashboard-kpi-link:focus-visible .statistics-kpi-chevron {
    color: currentColor; opacity: 1; transform: translateX(3px);
}
.app-card.app-dashboard-kpi-link:focus-visible { box-shadow: 0 0 0 3px var(--color-gray-100), 0 8px 20px rgba(16, 24, 40, .12); }
.app-card.app-dashboard-kpi-link:active { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(16, 24, 40, .1); }
@media (prefers-reduced-motion: reduce) {
    .app-dashboard-kpi-link, .app-dashboard-kpi-link .statistics-kpi-chevron { transition: none; }
    .app-dashboard-kpi-link:hover, .app-dashboard-kpi-link:focus-visible, .app-dashboard-kpi-link:active { transform: none; }
}

/* Dashboard: card tiến độ cá nhân dùng chung cho Nhập liệu viên */
.app-progress-card { margin-top: 4px; }
.app-progress-card-header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.app-progress-card-header h2 { margin: 0; color: var(--color-gray-900); font-size: 15px; }
.app-progress-card-header strong { color: var(--color-primary-600); font-size: 20px; }
.app-progress-track { height: 1.25rem; overflow: hidden; border-radius: .5rem; background: var(--color-gray-100); }
.app-progress-fill { display: block; height: 100%; min-width: 0; border-radius: inherit; background: var(--color-primary-600); transition: width .25s ease; }
.app-progress-caption { margin: 8px 0 0; color: var(--color-gray-500); font-size: 13px; }
.app-empty-action { min-height: 46px; margin-top: 18px; padding: 10px 24px; font-size: 14px; font-weight: 650; box-shadow: 0 4px 10px rgba(21, 94, 239, .2); }

.app-alert, .reject-banner { padding: 12px 16px; margin-bottom: 10px; border: 1px solid; border-radius: var(--radius-md); flex-shrink: 0; }
.reject-banner, .app-alert-danger { border-color: #fecdca; background: var(--color-danger-50); color: #b42318; }
.reject-banner { margin: 8px 24px 10px; padding: 10px 16px; }
.reject-banner strong { display: block; margin-bottom: 4px; }
.reject-banner > div { line-height: 19px; }
.app-alert-info { border-color: #b2ddff; background: var(--color-info-50); color: #175cd3; }
.app-alert-warning { border-color: #fedf89; background: #fffaeb; color: #92400e; }

.app-detail-header { margin-bottom: 12px; }
.app-detail-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.app-detail-title { min-width: 0; }
.app-detail-title h1 { margin: 0; color: var(--color-gray-900); font-size: 24px; line-height: 32px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-detail-path { margin-top: 5px; color: var(--color-gray-500); }
.app-detail-statuses { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.app-split-pane { --split-divider-size: 1px; display: grid; grid-template-columns: minmax(320px, var(--detail-left, 50%)) var(--split-divider-size) minmax(420px, 1fr); grid-template-areas: "form divider viewer"; gap: 0; height: calc(100vh - var(--topbar-height) - var(--breadcrumb-height)); min-height: 400px; }
body[data-document-form-position="right"] .app-split-pane { grid-template-areas: "viewer divider form"; }
.app-split-pane > .app-detail-panel:first-child { grid-area: form; }
.app-split-pane > .app-split-divider { grid-area: divider; }
.app-split-pane > .app-detail-panel--viewer { grid-area: viewer; }
/* Khi layout là split-layout (trang detail), split-pane chiếm hết chiều cao còn lại */
.app-split-layout .app-split-pane { height: 100%; flex: 1 1 0; min-height: 0; }
.app-split-divider { min-width: var(--split-divider-size); cursor: col-resize; background: transparent; position: relative; z-index: 2; touch-action: none; }
.app-split-divider::before { content: ""; position: absolute; inset: 0 -2px; border-radius: 999px; background: transparent; }
.app-split-divider:focus-visible { outline: none; }
body.app-resizing-panels, body.app-resizing-panels * { user-select: none !important; cursor: col-resize !important; }

.app-detail-panel { min-width: 0; height: 100%; overflow: auto; background: white; border: 1px solid var(--color-gray-200); border-radius: var(--radius-md); }
.app-detail-panel-inner { padding: 14px 16px; }
.app-tabs { display: flex; gap: 4px; padding: 0 16px; border-bottom: 1px solid var(--color-gray-200); background: white; position: sticky; top: 0; z-index: 1; }
.app-tab {
    min-height: 48px; padding: 13px 12px; border: 0; border-bottom: 2px solid transparent;
    background: transparent; color: var(--color-gray-500); font-weight: 600; cursor: pointer;
}
.app-tab.is-active { color: var(--color-primary-600); border-bottom-color: var(--color-primary-600); }

/* History sub-tabs (Quy trình / Thay đổi metadata) */
.history-subtabs { display: flex; gap: 0; padding: 0 16px; border-bottom: 1px solid var(--color-gray-200); background: var(--color-gray-50); }
.history-subtab {
    min-height: 38px; padding: 8px 14px; border: 0; border-bottom: 2px solid transparent;
    background: transparent; color: var(--color-gray-500); font-size: 13px; font-weight: 600; cursor: pointer;
}
.history-subtab.is-active { color: var(--color-primary-600); border-bottom-color: var(--color-primary-600); }

/* History header: số sự kiện + legend màu + filter */
.history-header { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; border-bottom: 1px solid var(--color-gray-200); background: white; }
.history-event-count { font-weight: 600; color: var(--color-gray-900); white-space: nowrap; }
.history-legend { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.history-legend-item { display: inline-flex; align-items: center; gap: 5px; color: var(--color-gray-600); font-size: 12px; }
.history-legend-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 8px; }
.history-legend-dot--system { background: var(--color-primary-600); }
.history-legend-dot--action { background: var(--color-success-600); }
.history-legend-dot--review { background: var(--color-review-600); }
.history-filter-wrap { margin-left: auto; }
.history-filter { height: 32px; padding: 4px 28px 4px 10px; border: 1px solid var(--color-gray-300); border-radius: var(--radius-sm); background: white; color: var(--color-gray-700); font: inherit; font-size: 13px; cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%23667085' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; }

/* History event icon (vòng tròn màu chứa SVG theo loại sự kiện) */
.history-event-cell { display: flex; align-items: center; gap: 8px; }
.history-event-icon {
    flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center; position: relative;
}
.history-event-icon--system { background: var(--color-primary-600); }
.history-event-icon--action { background: var(--color-success-600); }
.history-event-icon--review { background: var(--color-review-600); }
.history-event-icon--completed { background: var(--color-success-600); }
.history-event-icon--error { background: var(--color-danger-600); }
.history-diff-toggle { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin-left: auto; padding: 0; border: none; background: var(--color-gray-100); cursor: pointer; color: var(--color-gray-500); border-radius: 10px; transition: color 0.15s, background 0.15s; flex: none; vertical-align: middle; }
.history-table td:last-child { position: relative; }
.history-table td:last-child .history-diff-toggle { float: right; }
.history-diff-toggle:hover { color: var(--color-gray-700); background: var(--color-gray-200); }
.history-diff-toggle.is-expanded { color: var(--color-primary-600); background: var(--color-primary-50); }
.history-diff-toggle svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.2s; flex: 0 0 18px; }
.history-diff-toggle.is-expanded svg { transform: rotate(90deg); }
.history-diff-row td.history-diff-cell { padding: 0 6px 6px 24px; background: var(--color-gray-50); border-top: 1px solid var(--color-primary-100); }
.history-diff-table { width: 100%; border-collapse: collapse; border-spacing: 0; font-size: 11px; line-height: 1.25; }
.history-diff-table th { padding: 3px 6px; text-align: left; font-weight: 600; color: var(--color-gray-600); border-bottom: 1px solid var(--color-gray-200); }
.history-diff-table td { padding: 2px 6px; border-bottom: 1px solid var(--color-gray-100); vertical-align: top; }
.history-diff-table tbody tr:last-child td { border-bottom: none; }
.history-diff-old { color: var(--color-danger-600); text-decoration: line-through; max-width: 200px; word-break: break-word; }
.history-diff-new { color: var(--color-success-600); max-width: 200px; word-break: break-word; }
.history-event-icon svg { width: 11px; height: 11px; stroke: white; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.history-event-label { font-weight: 500; color: var(--color-gray-900); }

/* Bó hẹp cột "Cấp duyệt" trong bảng lịch sử quy trình - chỉ đủ rộng cho badge Duyệt 1/2 */
.history-table .history-col-review { width: 100px; max-width: 100px; white-space: nowrap; }

/* Badge cấp duyệt */
.badge-review1 { color: #b54708; background: var(--color-warning-50); }
.badge-review2 { color: #175cd3; background: var(--color-info-50); }

.history-panel-content { background: white; }

/* Lịch sử thay đổi metadata: toolbar tìm kiếm/lọc + nhóm theo thời gian có thể thu gọn */
.meta-history { padding: 14px 16px; }
.meta-history-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.meta-history-search { position: relative; flex: 1 1 260px; min-width: 220px; }
.meta-history-search .app-icon { position: absolute; left: 10px; top: 50%; width: 15px; height: 15px; transform: translateY(-50%); color: var(--color-gray-400); pointer-events: none; }
.meta-history-search input { width: 100%; min-height: 36px; padding: 8px 12px 8px 32px; border: 1px solid var(--color-gray-300); border-radius: var(--radius-sm); color: var(--color-gray-900); background: var(--color-white); }
.meta-history-search input:focus { border-color: var(--color-primary-600); box-shadow: 0 0 0 3px rgba(21,94,239,.12); outline: none; }
.meta-history-filter-panel { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; padding: 10px 12px; border: 1px solid var(--color-gray-200); border-radius: var(--radius-sm); background: var(--color-gray-25); }
.meta-history-filter-panel label { margin: 0; color: var(--color-gray-700); font-weight: 600; font-size: 13px; }
.meta-history-filter-panel select { min-height: 34px; padding: 6px 10px; border: 1px solid var(--color-gray-300); border-radius: var(--radius-sm); background: var(--color-white); }
.meta-history-summary { margin-bottom: 10px; color: var(--color-gray-500); font-size: 13px; }
.meta-history-groups { display: flex; flex-direction: column; gap: 12px; }
.meta-history-group { border: 1px solid var(--color-gray-200); border-radius: var(--radius-md); overflow: hidden; background: var(--color-white); }
.meta-history-group-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 12px 14px; border: 0; background: var(--color-gray-50); color: var(--color-gray-900); font: inherit; cursor: pointer; text-align: left; }
.meta-history-group-title { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.meta-history-group-title .app-icon { width: 15px; height: 15px; color: var(--color-primary-600); }
.meta-history-group-meta { display: inline-flex; align-items: center; gap: 10px; }
.meta-history-group-count { white-space: nowrap; }
.meta-history-group-chevron { width: 14px; height: 14px; color: var(--color-gray-500); transition: transform .15s ease; transform: rotate(-90deg); }
.meta-history-group.is-collapsed .meta-history-group-chevron { transform: rotate(90deg); }
.meta-history-group.is-collapsed .meta-history-group-body { display: none; }
.meta-history-group-body .app-table { border-top: 1px solid var(--color-gray-200); }
.meta-history-footer { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--color-gray-200); color: var(--color-gray-500); font-size: 13px; text-align: right; }
.app-detail-panel .app-action-footer { position: sticky; bottom: 0; z-index: 3; display: flex; justify-content: flex-end; gap: 10px; padding: 16px 20px; border-top: 1px solid var(--color-gray-200); background: rgba(255,255,255,.96); }
.app-info-list { display: grid; grid-template-columns: minmax(130px, .7fr) minmax(0, 1.3fr); margin: 0; }
.app-info-list dt, .app-info-list dd { margin: 0; padding: 11px 0; border-bottom: 1px solid var(--color-gray-200); }
.app-info-list dt { color: var(--color-gray-500); }
.app-info-list dd { color: var(--color-gray-900); font-weight: 500; overflow-wrap: anywhere; }
/* Panel viewer: layout dạng cột để chứa actions bar phía trên + pdf viewer chiếm phần còn lại */
.app-detail-panel--viewer { overflow: hidden; display: flex; flex-direction: column; }
.app-detail-panel--viewer .pdf-viewer { flex: 1 1 0; height: 0; min-height: 0; }
.app-viewer-actions { container-type: inline-size; container-name: viewer-actions; position: relative; flex: 0 0 auto; display: flex; align-items: flex-start; justify-content: flex-end; flex-wrap: wrap; gap: 4px; padding: 5px 8px; border-bottom: 1px solid var(--color-gray-200); background: linear-gradient(180deg, var(--color-white), var(--color-gray-25)); }
.app-viewer-actions .app-btn { min-height: 31px; padding: 4px 9px; font-size: 12px; }
.app-viewer-action-btn { gap: 5px; border-radius: 6px; box-shadow: 0 1px 2px rgba(16,24,40,.06); white-space: nowrap; }
.app-viewer-action-btn .app-icon { width: 15px; height: 15px; stroke-width: 1.8; }
.app-viewer-action-btn--searchable { border-color: #b9d8f5; background: #f5faff; color: #175cd3; }
.app-viewer-action-btn--searchable:hover { border-color: #84ade8; background: #eaf3ff; color: #1849a9; }
.app-viewer-action-btn--assign { border-color: #b7e3d0; background: #f3fcf7; color: #087443; }
.app-viewer-action-btn--assign:hover { border-color: #75c99e; background: #e8f8ef; color: #05603a; }
.app-viewer-action-btn--replace { border-color: #f4cfa1; background: #fffaf3; color: #b54708; }
.app-viewer-action-btn--replace:hover { border-color: #e9ad67; background: #fff3e0; color: #93370d; }
.app-viewer-action-btn .app-icon--ai { fill: url(#ai-sparkle-gradient); stroke: none; }
.app-viewer-action-btn--primary { border-color: #b9d8f5; background: #f5faff; color: #175cd3; }
.app-viewer-action-btn--primary:hover { border-color: #84ade8; background: #eaf3ff; color: #1849a9; }
.app-viewer-action-btn--ai { border-color: #c4b5fd; background: linear-gradient(135deg, #f5f3ff, #ede9fe); color: #5b21b6; }
.app-viewer-action-btn--ai:hover { border-color: #a78bfa; background: linear-gradient(135deg, #ede9fe, #e9d5ff); color: #4c1d95; }
.app-viewer-settings-btn { width: 31px; height: 31px; flex: 0 0 31px; border: 1px solid #c4b5fd; border-radius: 6px; background: #f5f3ff; color: #5b21b6; }
.app-viewer-settings-btn:hover, .app-viewer-settings-btn:focus-visible { border-color: #a78bfa; background: #ede9fe; color: #4c1d95; }
.app-viewer-settings-btn:disabled,
.app-viewer-settings-btn:disabled:hover { border-color: #e9d5ff; background: #faf8ff; color: #b9a5dc; opacity: .65; cursor: not-allowed; }
.app-viewer-settings-btn .app-icon { width: 16px; height: 16px; }
.app-viewer-actions .app-kebab-toggle { min-width: 31px; padding: 0 6px; font-size: 15px; }
@container viewer-actions (max-width: 680px) {
    .app-viewer-actions { gap: 3px; padding-inline: 5px; }
    .app-viewer-action-btn { min-width: 31px; width: 31px; padding-inline: 7px; justify-content: center; }
    .app-viewer-action-btn > span { display: none; }
    .app-viewer-action-btn .app-icon { width: 16px; height: 16px; }
    .app-viewer-settings-btn { width: 31px; }
}


@container viewer-actions (max-width: 450px) {
    .app-viewer-actions { gap: 2px; padding-inline: 3px; }
    .app-viewer-action-btn, .app-viewer-settings-btn, .app-viewer-actions .app-kebab-toggle { min-width: 28px; width: 28px; height: 28px; min-height: 28px; padding-inline: 5px; }
    .app-viewer-action-btn .app-icon, .app-viewer-settings-btn .app-icon { width: 14px; height: 14px; }
    .app-viewer-ai-summary .ai-summary-tools { height: 28px; }
    .app-viewer-ai-summary .js-ai-summarize { height: 28px; min-height: 28px; }
}
.app-viewer-ai-slot { display: flex; flex: 0 0 auto; align-items: center; order: 1; }
.app-viewer-actions .app-kebab-menu { order: 2; }
.app-viewer-ai-slot.ai-slot--expanded { flex: 1 0 100%; width: 100%; order: 3; }
.ui-dialog.app-dialog-layout-managed .ui-dialog-content:has(> .app-dialog-form) { display: flex; min-height: 0; flex-direction: column; }
.app-dialog-form { display: flex; min-height: 0; flex: 1 1 auto; flex-direction: column; }
.app-dialog-form > .app-dialog-body { min-height: 0; flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; padding-top: 18px; }
.app-viewer-actions .app-viewer-ai-summary { position: relative; display: flex; width: 100%; flex: 0 0 auto; flex-direction: column; align-items: flex-end; gap: 0; }
.app-viewer-ai-summary .ai-summary-tools { position: relative; display: inline-flex; align-items: center; justify-content: flex-end; gap: 0; height: 31px; z-index: 2; }
.app-viewer-ai-summary .js-ai-summarize { min-height: 31px; height: 31px; margin: 0; }
.app-viewer-ai-summary .js-ai-summary-settings { margin-top: 0; }
.ai-summary--has-settings .js-ai-summarize { border-radius: 6px 0 0 6px; }
.ai-summary--has-settings .js-ai-summary-settings { margin-left: -1px; border-radius: 0 6px 6px 0; }
.ai-summary-picker { position: absolute; top: calc(100% + 8px); right: 0; z-index: 20; display: flex; align-items: stretch; gap: 8px; width: min(370px, calc(100cqi - 12px)); min-width: 0; padding: 10px; border: 1px solid #d9c6f7; border-radius: 9px; background: var(--color-white); box-shadow: 0 10px 26px rgba(67,42,112,.16), 0 2px 5px rgba(16,24,40,.06); }
.ai-summary-picker::before { content: ""; position: absolute; top: -5px; right: 14px; width: 9px; height: 9px; border-top: 1px solid #d9c6f7; border-left: 1px solid #d9c6f7; background: var(--color-white); transform: rotate(45deg); }
.ai-summary-picker-field { display: flex; flex: 1 1 0; flex-direction: column; gap: 5px; min-width: 0; margin: 0; color: var(--color-gray-600); font-size: 11px; font-weight: 600; }
.ai-summary-picker-empty { margin: 0; padding: 4px 2px; color: var(--color-gray-500); font-size: 12px; white-space: nowrap; }
.ai-summary-picker-field select { width: 100%; min-height: 32px; padding: 5px 26px 5px 9px; border: 1px solid var(--color-gray-300); border-radius: 6px; background: var(--color-white); color: var(--color-gray-900); font: inherit; font-size: 12px; outline: none; transition: border-color .15s ease, box-shadow .15s ease; }
.ai-summary-picker-field select:focus { border-color: #9e77ed; box-shadow: 0 0 0 3px rgba(158,119,237,.14); }
.ai-summary-picker .select2-container { font-size: 12px; }
.ai-summary-picker .select2-container--default .select2-selection--single { min-height: 32px; height: 32px; padding-left: 9px; border-color: var(--color-gray-300); border-radius: 6px; }
.ai-summary-picker .select2-container--default .select2-selection--single:focus,
.ai-summary-picker .select2-container--default.select2-container--focus .select2-selection--single { border-color: #9e77ed; box-shadow: 0 0 0 3px rgba(158,119,237,.14); outline: none; }
.ai-summary-picker .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 30px; }
.ai-summary-picker .select2-container--default .select2-selection--single .select2-selection__arrow { height: 30px; }
.ai-summary-picker-field .select2-container { width: 100% !important; }
.ai-summary-result { width: 100%; display: flex; flex-direction: column; gap: 4px; margin-top: 5px; padding: 8px 10px; border: 1px solid #a78bfa; border-left: 3px solid #7c3aed; border-radius: 8px; background: linear-gradient(180deg, #ffffff, #faf7ff); box-shadow: 0 6px 14px rgba(91, 33, 182, .12); }
.ai-summary-result-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-bottom: 4px; border-bottom: 1px solid #ede9fe; }
.ai-summary-result-actions { display: inline-flex; align-items: center; gap: 4px; }
.ai-summary-result-head strong { color: #4c1d95; font-size: 13px; font-weight: 700; }
.ai-summary-result textarea.app-control { width: 100%; height: auto; min-height: 70px; resize: vertical; border-color: #ddd6fe; background: #fdfbff; color: var(--color-gray-900); font-size: 13px; line-height: 1.45; }
.ai-summary-result textarea.app-control:focus { border-color: #8b5cf6; box-shadow: 0 0 0 3px rgba(139, 92, 246, .14); }
.ai-summary-result-meta-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ai-summary-result-meta { color: #7c3aed; font-size: 11px; }
.ai-summary-result-meta-row .js-ai-summary-refresh { min-height: 22px; padding: 2px 7px; border: 0; color: #6d28d9; font-size: 11px; font-weight: 600; text-decoration: underline; box-shadow: none; background: transparent; }
.ai-summary-result-meta-row .js-ai-summary-refresh:hover { color: #4c1d95; background: transparent; }
.ai-summary-result-head .app-btn { min-height: 28px; padding: 4px 8px; border-color: #ddd6fe; color: #6d28d9; font-size: 12px; }
.ai-summary-result-head .app-btn:hover { border-color: #c4b5fd; background: #f5f3ff; color: #4c1d95; }
.ai-summary-close { width: 28px; height: 28px; min-height: 28px; padding: 0; border: 1px solid #ddd6fe; border-radius: 6px; color: #7c3aed; }
.ai-summary-close:hover, .ai-summary-close:focus-visible { border-color: #c4b5fd; background: #f5f3ff; color: #4c1d95; }
.ai-summary-close .app-icon { width: 14px; height: 14px; }
.ai-summary-result-head .js-ai-summary-copy.is-copy-success { border-color: #abefc6; background: #ecfdf3; color: #067647; }
.ai-summary-result-head .js-ai-summary-copy.is-copy-success:hover { border-color: #75e0a0; background: #d1fadf; color: #05603a; }
.ai-summary-result-head .js-ai-summary-copy.is-copy-error { border-color: #fecdca; background: #fff4f2; color: #b42318; }
.app-kebab-menu { position: relative; }
.app-kebab-toggle { min-width: 36px; padding: 0 8px; font-size: 18px; line-height: 1; }
.app-kebab-dropdown { position: absolute; top: calc(100% + 4px); right: 0; min-width: 200px; background: white; border: 1px solid var(--color-gray-200); border-radius: var(--radius-md); box-shadow: 0 4px 16px rgba(16,24,40,.12); z-index: 100; padding: 4px; list-style: none; margin: 0; }
.app-kebab-item { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 12px; text-align: left; background: transparent; border: 0; border-radius: var(--radius-sm); font: inherit; font-size: 13px; font-weight: 400; cursor: pointer; color: var(--color-gray-700); white-space: nowrap; transition: background .14s ease, color .14s ease; }
.app-kebab-item .app-icon { width: 16px; height: 16px; flex: 0 0 16px; color: var(--color-gray-500); }
.app-kebab-item:hover, .app-kebab-item:focus-visible { background: var(--color-gray-50); color: var(--color-gray-900); outline: none; }
.app-kebab-item:hover .app-icon, .app-kebab-item:focus-visible .app-icon { color: var(--color-primary-600); }
.app-kebab-item--danger { color: var(--color-danger-600); }
a.app-kebab-item:not(.app-kebab-item--danger) { color: var(--color-gray-700); font-weight: 400; text-decoration: none; }
a.app-kebab-item:not(.app-kebab-item--danger):hover, a.app-kebab-item:not(.app-kebab-item--danger):focus-visible { color: var(--color-gray-900); }
.app-kebab-item--danger .app-icon { color: var(--color-danger-600); }
.app-kebab-item--danger:hover, .app-kebab-item--danger:focus-visible { background: var(--color-danger-50); color: var(--color-danger-700); }
.app-kebab-item--danger:hover .app-icon, .app-kebab-item--danger:focus-visible .app-icon { color: var(--color-danger-700); }

.pdf-viewer { height: 100%; max-height: none; overflow: hidden; padding: 0; background: #475467; display: flex; flex-direction: column; }
.pdf-viewer-toolbar { min-height: 44px; flex: 0 0 auto; display: flex; align-items: center; gap: 4px; padding: 6px 8px; border-bottom: 1px solid #344054; background: #1d2939; color: white; overflow-x: auto; }
.pdf-tool-group { display: inline-flex; align-items: center; gap: 3px; padding-right: 7px; margin-right: 3px; border-right: 1px solid rgba(255,255,255,.18); }
.pdf-tool-group:last-child { border-right: 0; margin-left: auto; padding-right: 0; }
.pdf-tool-button { width: 30px; height: 30px; flex: 0 0 30px; display: inline-grid; place-items: center; padding: 0; border: 0; border-radius: 4px; background: transparent; color: white; font: inherit; cursor: pointer; }
.pdf-tool-button:hover, .pdf-tool-button:focus-visible, .pdf-tool-button.is-active { background: rgba(255,255,255,.18); outline: none; }
.pdf-tool-button:disabled { opacity: .4; cursor: default; }
.pdf-page-input { width: 48px; height: 28px; padding: 3px 5px; border: 1px solid #667085; border-radius: 3px; text-align: center; }
.pdf-find-input { width: 142px; height: 28px; padding: 3px 7px; border: 1px solid #667085; border-radius: 3px; }
.pdf-find-group { flex: 0 0 auto; }
.pdf-find-count { min-width: 36px; color: #f2f4f7; font-size: 11px; text-align: center; white-space: nowrap; }
.pdf-page-total, .pdf-zoom-value { min-width: 42px; color: #f2f4f7; font-size: 12px; white-space: nowrap; text-align: center; }
.pdf-viewer-stage { position: relative; flex: 1 1 auto; min-height: 0; overflow: auto; padding: 12px 20px; background: #344054; }
.pdf-page-container { position: relative; width: fit-content; margin: 0 auto 8px; line-height: 1; overflow: hidden; }
.pdf-page-container canvas { display: block; }
.pdf-page-container .textLayer { position: absolute; inset: 0; overflow: hidden; opacity: 1; line-height: 1; text-align: initial; transform-origin: 0 0; user-select: text; -webkit-text-size-adjust: none; -moz-text-size-adjust: none; text-size-adjust: none; forced-color-adjust: none; z-index: 1; }
.pdf-page-container .textLayer span { position: absolute; color: transparent; white-space: pre; transform-origin: 0 0; cursor: text; user-select: text; }
.pdf-page-container .textLayer br { color: transparent; position: absolute; }
.pdf-page-container .textLayer span::selection { color: transparent; background: rgba(84, 145, 255, .28); }
.pdf-page-container .pdf-search-highlights { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.pdf-page-container .pdf-search-highlight { position: absolute; border-radius: 0; background: rgba(255, 212, 0, .55); mix-blend-mode: multiply; }
.pdf-page-container .pdf-search-highlight.pdf-search-current { background: rgba(255, 138, 0, .65); }
.pdf-viewer-stage.is-pan { cursor: grab; }
.pdf-viewer-stage.is-pan.is-panning { cursor: grabbing; user-select: none; }
.pdf-viewer canvas { display: block; max-width: none; height: auto; margin: 0 auto; background: white; box-shadow: 0 2px 5px rgba(0,0,0,.28), 0 8px 22px rgba(0,0,0,.18); }
.pdf-viewer-loading { margin: auto; padding: 12px 16px; border-radius: 6px; background: rgba(16,24,40,.82); color: white; }
.pdf-viewer:fullscreen { width: 100vw; height: 100vh; }

/* Select2 khớp với app-form. Không dùng !important cho width: dropdown container mà
   Select2 append ra body (khi dropdownParent = body/dialog) cũng có class .select2-container,
   nếu ép width:100% !important ở đây nó sẽ bị full viewport width và gây scroll ngang/dọc
   toàn trang khi mở dropdown trong modal. Width của ô select đã được set qua option JS width:'100%'. */
/* Select2 phải trông giống input thường (cùng viền, bo góc, nền trắng), chỉ khác icon mũi tên trỏ xuống. */
.select2-container { font-size: 13px; }
.select2-container--default .select2-selection--single {
    min-height: 36px; height: 36px; display: flex; align-items: center;
    padding: 0 32px 0 12px; border: 1px solid var(--color-gray-300); border-radius: var(--radius-sm);
    background: var(--color-white); color: var(--color-gray-900);
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    padding: 0; line-height: 34px; color: var(--color-gray-900); font-weight: 400;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder { color: #98a2b3; }
.select2-container--default .select2-selection--single .select2-selection__arrow { top: 0; right: 4px; height: 34px; width: 24px; }
.select2-container--default .select2-selection--single .select2-selection__arrow b { display: none; }
.select2-container--default .select2-selection--single .select2-selection__arrow::after {
    content: ""; position: absolute; top: 50%; left: 50%; width: 7px; height: 7px; margin: -5px 0 0 -4px;
    border-right: 2px solid var(--color-gray-500); border-bottom: 2px solid var(--color-gray-500); transform: rotate(45deg);
}
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--single {
    border-color: var(--color-primary-600); background: var(--color-white); box-shadow: 0 0 0 3px rgba(21,94,239,.12); outline: none;
}
.select2-container--default.select2-container--disabled .select2-selection--single { background: var(--color-gray-50); color: var(--color-gray-500); cursor: not-allowed; }
/* Nút xóa giá trị (x): bỏ glyph "×" to xấu mặc định, vẽ icon X nhỏ gọn dạng nút tròn ghost, đặt trước mũi tên. */
select[data-allow-clear="true"] + .select2-container .select2-selection--single { padding-right: 56px; }
.select2-container--default .select2-selection--single .select2-selection__clear {
    position: absolute; top: 50%; right: 28px; z-index: 1; float: none; margin: 0;
    display: inline-flex; width: 18px; height: 18px; border-radius: 50%;
    font-size: 0; line-height: 0; color: transparent; transform: translateY(-50%);
    transition: background .12s ease;
}
.select2-container--default .select2-selection--single .select2-selection__clear:hover { background: var(--color-gray-100); }
.select2-container--default .select2-selection--single .select2-selection__clear::before,
.select2-container--default .select2-selection--single .select2-selection__clear::after {
    content: ""; position: absolute; top: 50%; left: 50%; width: 10px; height: 1.5px; border-radius: 1px;
    background: var(--color-gray-500);
}
.select2-container--default .select2-selection--single .select2-selection__clear::before { transform: translate(-50%, -50%) rotate(45deg); }
.select2-container--default .select2-selection--single .select2-selection__clear::after { transform: translate(-50%, -50%) rotate(-45deg); }
.select2-container--default .select2-selection--single .select2-selection__clear:hover::before,
.select2-container--default .select2-selection--single .select2-selection__clear:hover::after { background: var(--color-gray-700); }
.select2-container--default .select2-selection--multiple {
    position: relative; min-height: 36px; padding: 3px 34px 3px 8px; border: 1px solid var(--color-gray-300); border-radius: var(--radius-sm);
    background: var(--color-white); transition: border-color .15s ease, box-shadow .15s ease;
}
.select2-container--default .select2-selection--multiple::after {
    content: ""; position: absolute; top: 50%; right: 8px; width: 7px; height: 7px; margin-top: -7px;
    border-right: 2px solid var(--color-gray-500); border-bottom: 2px solid var(--color-gray-500); transform: rotate(45deg);
    pointer-events: none;
}
.select2-container--default .select2-selection--multiple:hover,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--multiple {
    border-color: var(--color-primary-600); box-shadow: 0 0 0 3px rgba(21,94,239,.12); outline: none;
}
.select2-container--default .select2-selection--multiple .select2-selection__rendered { display: flex; flex-wrap: wrap; gap: 5px; margin: 0; padding: 0; }
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    display: inline-flex; align-items: center; gap: 5px; min-height: 26px; margin: 0; padding: 3px 8px;
    border: 1px solid var(--color-primary-100); border-radius: 999px; background: var(--color-primary-50);
    color: var(--color-primary-700); font-size: 12px; line-height: 18px;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    order: 2; margin: 0; color: var(--color-primary-600); font-size: 15px; font-weight: 400; line-height: 14px;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover { color: var(--color-danger-600); }
.select2-container--default .select2-selection--multiple .select2-search--inline { flex: 1 1 90px; min-width: 90px; margin: 0; }
.select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field {
    width: 100% !important; height: 26px; min-height: 26px; margin: 0; padding: 3px 4px; color: var(--color-gray-700); font-family: inherit; font-size: 13px;
}
.select2-container--default .select2-selection--multiple .select2-selection__clear {
    position: absolute; top: 50%; right: 25px; z-index: 2; float: none; margin: 0;
    display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%;
    color: transparent; font-size: 0; line-height: 0; transform: translateY(-50%);
    transition: background .12s ease;
}
.select2-container--default .select2-selection--multiple .select2-selection__clear::before,
.select2-container--default .select2-selection--multiple .select2-selection__clear::after {
    content: ""; position: absolute; top: 50%; left: 50%; width: 10px; height: 1.5px; border-radius: 1px; background: var(--color-gray-500);
}
.select2-container--default .select2-selection--multiple .select2-selection__clear::before { transform: translate(-50%, -50%) rotate(45deg); }
.select2-container--default .select2-selection--multiple .select2-selection__clear::after { transform: translate(-50%, -50%) rotate(-45deg); }
.select2-container--default .select2-selection--multiple .select2-selection__clear:hover { background: var(--color-gray-100); }
.select2-container--default .select2-selection--multiple .select2-selection__clear:hover::before,
.select2-container--default .select2-selection--multiple .select2-selection__clear:hover::after { background: var(--color-gray-700); }
.select2-container--default.select2-container--disabled .select2-selection--multiple { background: var(--color-gray-50); cursor: not-allowed; }
.select2-dropdown { z-index: 10060; border: 1px solid var(--color-gray-200); border-radius: 10px; background: var(--color-white); box-shadow: 0 16px 32px rgba(16,24,40,.16); overflow: hidden; }
.select2-container--default .select2-search--dropdown .select2-search__field {
    min-height: 36px; padding: 7px 10px; border: 1px solid var(--color-gray-200); border-radius: 8px; background: var(--color-gray-50);
}
.select2-container--default .select2-search--dropdown .select2-search__field:focus {
    border-color: var(--color-primary-600); box-shadow: 0 0 0 3px rgba(21,94,239,.12); outline: none;
}
.select2-container--default .select2-results__option { padding: 9px 12px; }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--color-primary-50); color: var(--color-primary-700); }
.select2-container--default .select2-results__option[aria-selected=true] { background: var(--color-primary-50); color: var(--color-primary-700); }
.select2-container--open { z-index: 10050; }

.ui-widget { font-family: Inter, "Segoe UI", Arial, sans-serif; font-size: 14px; }
.ui-dialog { padding: 0; border: 0 !important; border-radius: 12px; background: var(--color-white); box-shadow: 0 20px 40px rgba(16,24,40,.2); overflow: hidden; }
.ui-dialog .ui-dialog-titlebar { position: relative; display: flex; min-height: 60px; align-items: center; padding: 13px 58px 13px 20px; border: 0; border-bottom: 1px solid var(--color-gray-200); border-radius: 0; background: var(--color-white); color: var(--color-gray-900); }
.ui-dialog .ui-dialog-title { min-width: 0; margin: 0; color: var(--color-gray-900); font-size: 14px; font-weight: 700; line-height: 20px; }
.ui-dialog-title-icon { display: inline-flex; width: 32px; height: 32px; flex: 0 0 32px; align-items: center; justify-content: center; border-radius: 8px; background: var(--color-primary-50); color: var(--color-primary-600); }
.ui-dialog-title-icon .app-icon { width: 17px; height: 17px; }
.ui-dialog-title-icon + .ui-dialog-title { margin-left: 10px; }
.ui-dialog .ui-dialog-content { padding: 20px; }
/* Tất cả dialog dùng chung: phần tiêu đề/nút không bị đẩy khỏi viewport,
   chỉ content cuộn khi nội dung được append thêm hoặc quá dài. */
.ui-dialog.app-dialog-layout-managed {
    display: flex;
    max-width: calc(100vw - 32px);
    flex-direction: column;
}
.ui-dialog.app-dialog-layout-managed .ui-dialog-titlebar,
.ui-dialog.app-dialog-layout-managed .ui-dialog-buttonpane { flex: 0 0 auto; }
.ui-dialog.app-dialog-layout-managed .ui-dialog-content {
    min-height: 0;
    flex: 1 1 auto;
    overflow-y: auto;
}
.select2-container--default.select2-selection--has-summary .select2-selection--multiple .select2-selection__choice { display: none; }
.select2-container--default.select2-selection--has-summary .select2-selection--multiple::before {
    content: attr(data-selection-summary); position: absolute; top: 3px; left: 8px; right: 34px; overflow: hidden; color: var(--color-gray-700); font-size: 13px; line-height: 26px; text-overflow: ellipsis; white-space: nowrap; pointer-events: none;
}
.js-select2-summary + .select2 .select2-selection--multiple { height: 38px; min-height: 38px; overflow: hidden; }
.ui-dialog.app-dialog-layout-managed .ui-dialog-content:has(> .app-dialog-form) {
    display: flex;
    min-height: 0;
    overflow: hidden;
    flex-direction: column;
    padding-top: 0;
}
.ui-dialog.app-dialog-layout-managed .app-dialog-form {
    min-height: 0;
    flex: 1 1 auto;
}
.ui-dialog.app-dialog-layout-managed .app-dialog-form > .app-dialog-body {
    min-height: 0;
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
}
.ui-dialog:has(.clone-type-form) {
    width: min(560px, calc(100vw - 32px)) !important;
    max-width: calc(100vw - 32px);
}
.ui-dialog:has(.clone-type-form) .ui-dialog-titlebar { padding: 14px 48px 14px 18px; }
.ui-dialog:has(.clone-type-form) .ui-dialog-content { padding: 0 18px; }
.clone-type-form .app-dialog-description {
    margin: 0 0 16px;
    color: var(--color-gray-600);
    font-size: 13px;
    line-height: 1.5;
}
.clone-type-form .app-field { margin-bottom: 14px !important; }
.clone-type-form .app-field:last-of-type { margin-bottom: 0 !important; }
.clone-type-form .app-field label { margin-bottom: 10px; font-size: 12px; }
.clone-type-form .app-field input { height: 38px; }
.clone-type-form .app-dialog-actions,
.clone-type-form .app-dialog-footer { margin-top: 18px; padding-bottom: 14px; }
.app-dialog-intro { margin-bottom: 18px; }
.app-dialog-lead { margin: 0 0 4px; color: var(--color-gray-700); font-size: 14px; line-height: 1.5; }
.app-dialog-intro .app-form-hint { margin: 0; line-height: 1.5; }
/* 2-column replace file container */
.app-file-replace-container { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: start; margin: 20px 0; }
.app-file-replace-column { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.app-file-replace-section-label { font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-gray-500); }
.app-file-replace-arrow { font-size: 18px; color: var(--color-gray-400); display: flex; align-items: center; justify-content: center; height: 60px; }

/* File card styles */
.app-file-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--color-gray-200); border-radius: var(--radius-sm); background: var(--color-gray-50); }
.app-file-card-icon { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: #f3f4f6; border-radius: 6px; font-size: 16px; flex-shrink: 0; color: var(--color-gray-600); }
.app-file-card-info { flex: 1; min-width: 0; }
.app-file-card-name { font-size: 13px; font-weight: 600; color: var(--color-gray-800); overflow-wrap: break-word; word-break: break-word; }
.app-file-card-meta { font-size: 11px; color: var(--color-gray-500); margin-top: 2px; }
.app-file-card--success { background: #ecfdf5; border-color: #a7f3d0; position: relative; }
.app-file-card--success .app-file-card-icon { background: #10b981; color: white; font-size: 18px; font-weight: bold; }
.app-file-card--success .app-file-card-name { color: #047857; font-weight: 600; }
.app-file-card--success .app-file-card-meta { color: #059669; }
.app-file-card-remove { background: none; border: none; color: var(--color-gray-400); cursor: pointer; font-size: 16px; padding: 4px; line-height: 1; transition: color 0.15s ease; flex-shrink: 0; }
.app-file-card-remove:hover { color: var(--color-error, #dc2626); }

/* Selected file container - hidden by default */
.app-file-picker-selected-container { display: none; }
.app-file-picker-selected-container.is-visible { display: block; }

/* File picker input and label */
.app-form .app-file-picker input[type=file] { position: absolute; width: 1px; height: 1px; padding: 0; min-height: 1px; opacity: 0; pointer-events: none; }
.app-form .app-file-picker-label { display: flex; align-items: center; gap: 10px; width: auto; margin: 0; padding: 12px 14px; border: 2px dashed #8ab4f8; border-radius: var(--radius-sm); background: #f8fbff; color: var(--color-primary-700); cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease; text-decoration: none; }
.app-form .app-file-picker-label:hover { border-color: var(--color-primary-600); background: #eff6ff; }
.app-file-picker-symbol { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--color-primary-600); color: white; font-size: 18px; flex-shrink: 0; }
.app-file-picker-copy { display: block; }
.app-file-picker-label strong, .app-file-picker-label small { display: block; }
.app-file-picker-label strong { color: inherit; font-weight: 600; font-size: 13px; }
.app-file-picker-label small { margin-top: 2px; color: var(--color-primary-600); font-size: 11px; font-weight: normal; }
.app-file-picker-link { color: inherit; text-decoration: underline; cursor: pointer; }
.app-file-picker-link:hover { opacity: 0.8; }

/* Dialog Import Excel: các khối bên trong body của dialog chuẩn. */
.catalog-import-steps { display: grid; grid-template-columns: 1fr; gap: 7px; }
.catalog-import-step { min-width: 0; padding: 8px 9px; border: 1px solid var(--color-gray-200); border-radius: 7px; background: var(--color-gray-50); }
.catalog-import-step-upload { background: var(--color-white); }
.catalog-import-step-heading { display: flex; align-items: flex-start; gap: 7px; margin-bottom: 6px; }
.catalog-import-step-number { display: grid; place-items: center; flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%; background: var(--color-primary-600); color: var(--color-white); font-size: 11px; font-weight: 700; }
.catalog-import-step-heading h3 { margin: 1px 0 2px; color: var(--color-gray-900); font-size: 14px; }
.catalog-import-step-heading p { margin: 0; color: var(--color-gray-500); font-size: 11px; line-height: 1.4; }
.catalog-import-download-card { display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 7px 9px; border: 1px solid #b7dfc5; border-radius: 7px; background: #f1fbf4; }
.catalog-import-excel-icon, .catalog-import-picker-icon { display: grid; place-items: center; flex: 0 0 32px; width: 32px; height: 32px; border-radius: 7px; background: #217346; color: #fff; }
.catalog-import-excel-icon .app-icon, .catalog-import-picker-icon .app-icon { width: 21px; height: 21px; stroke-width: 1.8; }
.catalog-import-download-copy { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 3px; }
.catalog-import-download-copy strong { color: #185c37; font-size: 12px; }
.catalog-import-download-copy small { color: #4d7d61; font-size: 10px; line-height: 1.3; }
.catalog-import-download-action { width: 30px; height: 30px; min-height: 30px; color: #217346; }
.catalog-import-download-action:hover { background: #dcefe2; color: #185c37; }
.catalog-import-field-label { display: block; margin-bottom: 7px; color: var(--color-gray-700); font-size: 11px; font-weight: 700; }
.catalog-import-mode-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; margin-bottom: 8px; }
.catalog-import-mode { display: flex; align-items: flex-start; gap: 6px; margin: 0; padding: 6px 7px; border: 1px solid var(--color-gray-200); border-radius: 6px; background: var(--color-white); cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.catalog-import-mode:hover, .catalog-import-mode.is-selected { border-color: #9cc9aa; background: #f4fbf6; }
.catalog-import-mode input { flex: 0 0 auto; width: 15px; height: 15px; margin: 2px 0 0; accent-color: #217346; }
.catalog-import-mode span { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.catalog-import-mode strong { color: var(--color-gray-800); font-size: 11px; line-height: 1.3; }
.catalog-import-mode small { color: var(--color-gray-500); font-size: 10px; line-height: 1.3; }
.catalog-import-file-picker { margin: 0; }
.catalog-import-file-picker .app-file-picker-label { min-height: 42px; box-sizing: border-box; gap: 8px; padding: 5px 9px; border-color: #9cc9aa; background: #f8fcf9; }
.catalog-import-file-picker .app-file-picker-label:hover, .catalog-import-file-picker.is-dragover .app-file-picker-label { border-color: #217346; background: #eef9f1; }
.catalog-import-picker-icon { flex-basis: 28px; width: 28px; height: 28px; border-radius: 6px; }
.catalog-import-picker-icon .app-icon { width: 16px; height: 16px; }
.catalog-import-file-area { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 8px; border: 1px solid #b7dfc5; border-radius: 7px; background: #f8fcf9; }
.catalog-import-file-area .catalog-import-file-picker { display: flex; min-width: 0; min-height: 0; align-items: stretch; }
.catalog-import-file-area .catalog-import-file-picker .app-file-picker-label { height: 100%; flex: 1 1 auto; }
.catalog-import-selected-slot { display: flex; min-width: 0; min-height: 42px; align-items: stretch; }
.catalog-import-empty-file { display: flex; width: 100%; min-height: 42px; align-items: center; justify-content: center; padding: 5px 9px; border: 1px dashed #b7dfc5; border-radius: 7px; color: #6b8f78; font-size: 11px; text-align: center; }
.catalog-import-file-area .catalog-import-file-hint { grid-column: 1 / -1; margin: 0 2px; }
@media (max-width: 560px) {
    .catalog-import-file-area { grid-template-columns: 1fr; }
}
.catalog-import-selected { width: 100%; margin-top: 0; }
.catalog-import-selected .app-file-card { height: 100%; padding: 5px 8px; border-color: #a7e8c4; }
.catalog-import-selected .app-file-card-icon { width: 28px; height: 28px; }
.catalog-import-selected .app-file-card-icon--excel { display: grid; place-items: center; background: #217346; }
.catalog-import-selected .app-file-card-icon--excel .app-icon { width: 18px; height: 18px; }
.catalog-import-file-hint { display: flex; align-items: center; gap: 5px; margin: 8px 0 0; color: var(--color-gray-500); font-size: 10px; line-height: 1.4; }
.catalog-import-file-hint .app-icon { width: 13px; height: 13px; color: var(--color-gray-400); }
.metadata-import-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.metadata-import-fields .app-field { min-width: 0; }
.metadata-import-fields .app-field > label { margin-bottom: 6px; font-size: 11px; }
.metadata-import-fields .app-control, .metadata-import-fields .select2-container { width: 100% !important; }
.metadata-import-step-config .catalog-import-download-card { margin-top: 2px; }
.metadata-import-file-area { margin-top: 2px; }
@media (max-width: 560px) { .metadata-import-fields { grid-template-columns: 1fr; gap: 8px; } }
.catalog-import-result { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding: 9px 11px; border: 1px solid #d0d5dd; border-radius: 7px; background: #f8fafc; }
.catalog-import-result .app-alert { flex: 1 1 auto; min-width: 0; }
.catalog-import-result .app-alert { margin: 0; padding: 0; border: 0; background: transparent; color: #344054; font-size: 12px; font-weight: 600; line-height: 1.45; }
.catalog-import-result.is-pending { border-color: #bfdbfe; background: #eff6ff; }
.catalog-import-result.is-pending .app-alert { color: #1d4ed8; }
.catalog-import-result.is-success { border-color: #b7dfc5; background: #f1fbf4; }
.catalog-import-result.is-success .app-alert { color: #185c37; }
.catalog-import-result.is-error { padding: 10px 12px; border: 1px solid #fecdca; border-radius: 7px; background: var(--color-danger-50); }
.catalog-import-result.is-error .app-alert { margin: 0; padding: 0; border: 0; background: transparent; color: #b42318; }
.catalog-import-error-download { flex: 0 0 auto; min-height: 30px; margin-top: 0; padding: 4px 9px; border-radius: 6px; gap: 5px; font-size: 11px; font-weight: 500; box-shadow: none; }
.catalog-import-error-download .app-icon { width: 15px; height: 15px; }
.catalog-import-result-close { flex: 0 0 auto; align-self: center; padding: 0 2px; border: 0; background: transparent; color: var(--color-gray-500); cursor: pointer; font-size: 20px; line-height: 24px; }
.catalog-import-result-close:hover { color: var(--color-gray-900); }
@media (max-width: 560px) {
    .catalog-import-mode-list { grid-template-columns: 1fr; }
    .catalog-import-result { align-items: stretch; flex-direction: column; }
}
.app-dialog-actions, .app-dialog-footer,
.ui-dialog .app-form-actions, .ui-dialog .user-form-actions { display: flex; justify-content: flex-end; gap: 12px; }
.app-dialog-footer,
.ui-dialog .app-dialog-actions,
.ui-dialog .app-form-actions,
.ui-dialog .user-form-actions {
    flex: 0 0 auto; margin-top: 14px !important; padding: 14px 0; border-top: 1px solid var(--color-gray-200);
}
.app-dialog-form--compact > .app-dialog-footer { padding-bottom: 14px; }
.app-dialog-form > .app-dialog-body { min-height: 0; }
.ui-dialog .ui-dialog-content.app-dialog-content--flush { padding-bottom: 0; }
.app-dialog-form--compact > .app-dialog-body { padding-top: 16px; padding-bottom: 10px; }
.app-dialog-form--compact > .app-dialog-body > .app-field,
.app-dialog-form--compact > .app-dialog-body > .app-toolbar { margin-bottom: 6px !important; }
.app-dialog-form--compact > .app-dialog-body > .app-field:last-child,
.app-dialog-form--compact > .app-dialog-body > .app-toolbar:last-child { margin-bottom: 0 !important; }
.app-dialog-form.app-quick-merge-form > .app-dialog-body { min-height: 0; }
.ui-dialog.app-quick-merge-dialog {
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 32px);
}
.ui-dialog.app-quick-merge-dialog .ui-dialog-content {
    display: flex;
    min-height: 0;
    max-height: calc(100vh - 92px);
    flex-direction: column;
    overflow: hidden;
}
.ui-dialog.app-quick-merge-dialog .app-quick-merge-form {
    display: flex;
    min-height: 0;
    flex: 1 1 auto;
    flex-direction: column;
}
.ui-dialog.app-quick-merge-dialog .app-quick-merge-form > .app-dialog-body {
    min-height: 0;
    overflow-y: auto;
}
.app-dialog-form--compact .app-field > label {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
    flex-wrap: wrap;
}
.app-field--inline-control { display: flex; align-items: center; gap: 12px; }
.app-field--inline-control > label:first-child { margin: 0; }
.app-field--inline-control .catalog-switch { flex: 0 0 auto; }
.ui-dialog:has(.app-dialog-form--compact) .ui-dialog-content { padding: 10px 20px 0; }
.ui-dialog-content .app-alert-danger { margin-bottom: 18px; }
.ui-dialog-content #reject-form > .app-toolbar { margin-top: 18px; }
.app-confirm-dialog { min-height: 48px; }
.app-confirm-message { margin: 0; color: var(--color-gray-700); line-height: 1.6; overflow-wrap: anywhere; }
.app-confirm-name-field { margin-top: 10px; }
.app-confirm-name-field label { display: block; margin: 0 0 6px; color: var(--color-gray-700); font-size: 12px; font-weight: 600; }
.app-confirm-name-field input {
    display: block; width: 100%; height: 36px; box-sizing: border-box; padding: 6px 10px;
    border: 1px solid var(--color-gray-300); border-radius: var(--radius-sm);
    color: var(--color-gray-900); background: var(--color-white); transition: border-color .15s, box-shadow .15s;
}
.app-confirm-name-field input:hover { border-color: #98a2b3; }
.app-confirm-name-field input:focus { border-color: var(--color-primary-600); box-shadow: 0 0 0 3px rgba(21,94,239,.12); outline: none; }
.app-confirm-name-field .app-field-error { display: block; min-height: 18px; margin-top: 4px; color: var(--color-danger-600, #dc2626); font-size: 12px; }
.ui-dialog .ui-dialog-buttonpane { padding: 12px 20px 16px; border-top-color: var(--color-gray-200); }
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset { display: flex; gap: 8px; }
.ui-dialog .ui-dialog-buttonpane button.app-btn {
    min-height: 36px; margin: 0; padding: 7px 14px; border: 1px solid transparent !important;
    border-radius: var(--radius-sm); font-family: inherit; font-size: 14px; font-weight: 600;
    line-height: 20px; box-shadow: 0 1px 2px rgba(16,24,40,.08); transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.ui-dialog .ui-dialog-buttonpane button.app-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(21,94,239,.16); }
.ui-dialog .ui-dialog-buttonpane button.app-btn:not(.app-btn-secondary):not(.app-btn-danger):hover { background: var(--color-primary-700) !important; color: var(--color-white) !important; }
.ui-dialog .ui-dialog-buttonpane button.app-btn-secondary { border-color: var(--color-gray-300) !important; background: var(--color-white) !important; color: var(--color-gray-700) !important; }
.ui-dialog .ui-dialog-buttonpane button.app-btn-secondary:hover { border-color: var(--color-gray-400) !important; background: var(--color-gray-50) !important; color: var(--color-gray-900) !important; }
.ui-dialog .ui-dialog-buttonpane button.app-btn-danger { background: var(--color-danger-600) !important; color: var(--color-white) !important; }
.ui-dialog .ui-dialog-buttonpane button.app-btn-danger:hover { background: var(--color-danger-700, #b42318) !important; }
.ui-dialog .ui-dialog-buttonpane button.app-btn:disabled { opacity: .55; cursor: not-allowed; }
.ui-dialog .ui-dialog-titlebar-close {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-gray-500);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1;
    transition: background .15s ease, color .15s ease;
}
.ui-dialog .ui-dialog-titlebar-close:hover {
    background: var(--color-gray-100);
    color: var(--color-gray-900);
}
.ui-dialog .ui-dialog-titlebar-close .ui-button-icon {
    display: none;
}
.ui-dialog .ui-dialog-titlebar-close { z-index: 2; }
.ui-dialog .ui-dialog-titlebar-close::before,
.ui-dialog .ui-dialog-titlebar-close::after {
    content: "";
    position: absolute;
    left: 7px;
    top: 13px;
    width: 14px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
}
.ui-dialog .ui-dialog-titlebar-close::before { transform: rotate(45deg); }
.ui-dialog .ui-dialog-titlebar-close::after { transform: rotate(-45deg); }
.ui-widget-overlay { background: #101828; opacity: .45; }
/* Calendar icon lồng trong mọi input ngày (.js-date-input) để nhận diện đây là trường chọn ngày. */
/* Dùng selector "input.js-date-input" để đủ specificity thắng ".app-filter-card input" (tránh bị shorthand */
/* "background: ..." reset background-repeat về "repeat" mặc định, gây lặp icon khi input được focus). */
input.js-date-input {
    padding-right: 38px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2398A2B3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 9h18M8 3v4M16 3v4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 18px 18px;
    cursor: pointer;
}
input.js-date-input:focus {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23155EEF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 9h18M8 3v4M16 3v4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 18px 18px;
}

/* Popup lịch (jQuery UI datepicker) - nhỏ gọn: mũi tên nhỏ, select tháng/năm width cố định đủ rộng (appearance:none */
/* làm mất auto-size theo nội dung của browser nên phải khai báo width rõ ràng, không dùng flex co giãn). */
.ui-datepicker { z-index: 11000 !important; width: 264px; padding: 10px; border: 1px solid var(--color-gray-200); border-radius: var(--radius-md); background: var(--color-white); box-shadow: 0 12px 28px rgba(16,24,40,.16); font-family: inherit; }
.ui-datepicker .ui-datepicker-header { display: flex; align-items: center; justify-content: space-between; gap: 4px; padding: 0 0 8px; background: var(--color-white); border: 0; color: var(--color-gray-900); }
.ui-datepicker .ui-datepicker-title { flex: 1 1 auto; display: flex; justify-content: center; align-items: center; gap: 4px; min-width: 0; line-height: 24px; font-size: 13px; font-weight: 600; color: var(--color-gray-900); }
.ui-datepicker .ui-datepicker-title select {
    flex: 0 0 auto; min-height: 26px; padding: 3px 20px 3px 8px; border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-sm); background: var(--color-gray-50); color: var(--color-gray-900); font-weight: 600; font-size: 12px;
    appearance: none; -webkit-appearance: none; text-overflow: clip;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 4px center; background-size: 13px 13px; cursor: pointer;
}
.ui-datepicker .ui-datepicker-title select.ui-datepicker-month { width: 104px; }
.ui-datepicker .ui-datepicker-title select.ui-datepicker-year { width: 76px; }
.ui-datepicker .ui-datepicker-title select:hover { border-color: var(--color-gray-300); background-color: var(--color-white); }
.ui-datepicker .ui-datepicker-title select:focus { border-color: var(--color-primary-600); outline: none; box-shadow: 0 0 0 2px rgba(21,94,239,.12); }
.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next {
    flex: 0 0 auto; position: relative; width: 24px; height: 24px; margin: 0; border: 0; border-radius: var(--radius-sm);
    background: transparent; cursor: pointer; text-indent: 0; overflow: visible;
}
.ui-datepicker .ui-datepicker-prev:hover, .ui-datepicker .ui-datepicker-next:hover { background: var(--color-gray-100); }
.ui-datepicker .ui-datepicker-prev .ui-icon, .ui-datepicker .ui-datepicker-next .ui-icon {
    display: block; width: 24px; height: 24px; margin: 0; text-indent: -9999px; background: none !important;
}
.ui-datepicker .ui-datepicker-prev::before, .ui-datepicker .ui-datepicker-next::before {
    content: ""; position: absolute; top: 50%; left: 50%; width: 6px; height: 6px;
    border-top: 2px solid var(--color-gray-600); border-right: 2px solid var(--color-gray-600);
}
.ui-datepicker .ui-datepicker-prev::before { transform: translate(-20%, -50%) rotate(-135deg); }
.ui-datepicker .ui-datepicker-next::before { transform: translate(-80%, -50%) rotate(45deg); }
.ui-datepicker .ui-datepicker-prev.ui-state-disabled, .ui-datepicker .ui-datepicker-next.ui-state-disabled { opacity: .35; cursor: default; }
.ui-datepicker table { width: 100%; margin: 0; border-collapse: collapse; font-size: 12px; }
.ui-datepicker th { padding: 4px 0; color: var(--color-gray-500); font-size: 11px; font-weight: 600; }
.ui-datepicker td { padding: 1px; border: 0; text-align: center; }
.ui-datepicker td span, .ui-datepicker td a { display: block; }
.ui-datepicker td .ui-state-default {
    min-width: 26px; padding: 5px 0; border: 0; border-radius: var(--radius-sm);
    background: transparent; color: var(--color-gray-700); text-align: center; font-weight: 500; transition: background .12s ease, color .12s ease;
}
.ui-datepicker td .ui-state-hover { background: var(--color-gray-100); color: var(--color-gray-900); }
.ui-datepicker td .ui-state-active { background: var(--color-primary-600); color: var(--color-white); font-weight: 600; }
.ui-datepicker td .ui-datepicker-today .ui-state-default { color: var(--color-primary-700); font-weight: 700; }
.ui-datepicker .ui-datepicker-buttonpane { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin: 6px 0 0; padding: 6px 2px 0; border-top: 1px solid var(--color-gray-100); }
.ui-datepicker .ui-datepicker-buttonpane button {
    float: none; margin: 0; padding: 2px 4px; border: 0; border-radius: var(--radius-sm);
    background: transparent; font-size: 12px; font-weight: 600; cursor: pointer; transition: color .12s ease;
}
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current { color: var(--color-gray-500); }
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current:hover { color: var(--color-gray-900); text-decoration: underline; }
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-close { color: var(--color-primary-600); }
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-close:hover { color: var(--color-primary-700); text-decoration: underline; }

/* Shared filter layout: compact controls with a predictable maximum width. */
.app-filter-card { position: relative; z-index: 2; }
.app-filter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); align-items: end; gap: 12px; }
.app-filter-card .app-filter-grid { display: flex; align-items: flex-end; }
.app-filter-card .app-filter-grid > .app-field { flex: 1 1 220px; }
.app-filter-grid .app-field { min-width: 0; max-width: 360px; }
.app-filter-grid .app-filter-actions { margin-left: 0; }
.app-filter-primary-action { display: flex; justify-content: flex-end; align-items: flex-end; gap: 8px; margin-left: auto; }
.app-filter-primary-action .app-btn { white-space: nowrap; }
.role-filter .app-filter-grid { display: flex; align-items: flex-end; gap: 12px; }
.role-filter { position: relative; padding: 18px 180px 18px 20px; }
.role-filter .app-field { flex: 0 1 360px; max-width: 360px; }
.role-filter .app-field label { margin-bottom: 5px; font-size: 12px; }
.role-filter .app-field input { min-height: 38px; }
.role-filter .app-filter-actions { margin-left: 0; }
.role-filter .app-filter-primary-action { position: absolute; top: 50%; right: 20px; margin-left: 0; transform: translateY(-50%); }
.app-filter-card .app-field input,
.app-filter-card .app-field select,
.app-filter-card .app-field .select2-container,
.app-filter-card .app-field .js-date-input { max-width: 360px; }
.progress-page-toolbar { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; padding: 12px 16px; }
.progress-page-toolbar .app-field { flex: 0 1 180px; min-width: 140px; }
.progress-page-toolbar .app-field input,
.progress-page-toolbar .app-field select,
.progress-page-toolbar .app-field .select2-container,
.progress-page-toolbar .app-field .js-date-input { max-width: none; }
.app-filter-card .app-field[class*="col-"] { flex: 0 1 calc(var(--filter-col-width) - 12px) !important; width: calc(var(--filter-col-width) - 12px) !important; max-width: calc(var(--filter-col-width) - 12px) !important; min-width: 0 !important; }
.app-field.col-1 { --filter-col-width: 8.3333%; }
.app-field.col-1-5 { --filter-col-width: 12.5%; }
.app-field.col-2 { --filter-col-width: 16.6667%; }
.app-field.col-3 { --filter-col-width: 25%; }
.app-field.col-4 { --filter-col-width: 33.3333%; }
.app-field.col-5 { --filter-col-width: 41.6667%; }
.app-field.col-6 { --filter-col-width: 50%; }
.app-field.col-7 { --filter-col-width: 58.3333%; }
.app-field.col-8 { --filter-col-width: 66.6667%; }
.app-field.col-9 { --filter-col-width: 75%; }
.app-field.col-10 { --filter-col-width: 83.3333%; }
.app-field.col-11 { --filter-col-width: 91.6667%; }
.app-field.col-12 { --filter-col-width: 100%; }
.app-filter-card .app-field label { margin-bottom: 6px; font-size: 12px; }
@media (max-width: 760px) { .app-filter-card .app-field[class*="col-"] { flex-basis: 100% !important; width: 100% !important; max-width: 100% !important; } }
/* Mặc định các field filter gọn; field tìm kiếm được ưu tiên rộng hơn. */
.app-filter-card .app-field:not([class*="col-"]) { flex: 0 1 calc(16.6667% - 12px) !important; width: calc(16.6667% - 12px) !important; max-width: calc(16.6667% - 12px) !important; min-width: 0 !important; }
.app-filter-card .app-field.user-filter-keyword,
.app-filter-card .app-field:has(input[id*="keyword"]),
.app-filter-card .app-field:has(input[id*="file"]),
.app-filter-card .app-field:has(input[id*="name"]) { flex: 0 1 calc(25% - 12px) !important; width: calc(25% - 12px) !important; max-width: calc(25% - 12px) !important; }
@media (max-width: 760px) {
    .app-filter-card .app-field:not([class*="col-"]),
    .app-filter-card .app-field.user-filter-keyword,
    .app-filter-card .app-field:has(input[id*="keyword"]),
    .app-filter-card .app-field:has(input[id*="file"]),
    .app-filter-card .app-field:has(input[id*="name"]) { flex-basis: 100% !important; width: 100% !important; max-width: 100% !important; }
}
/* Bộ lọc nâng cao dùng ba cột compact, không dùng độ rộng compact của toolbar chính. */
.catalog-advanced-filter .app-filter-grid { display: grid !important; grid-template-columns: 220px 350px 220px; justify-content: start; }
.catalog-advanced-filter .app-field:not([class*="col-"]) { flex: initial !important; width: 280px !important; max-width: 280px !important; min-width: 0 !important; }
.catalog-advanced-filter { width: min(1100px, calc(100vw - 80px)); max-width: calc(100vw - 80px); }
.catalog-advanced-filter .app-field:has(select),
.catalog-advanced-filter .app-field:has(.select2-container) { grid-column: auto; }
.catalog-advanced-filter .app-field:not(:has(.app-inline-fields)) { width: 220px !important; max-width: 220px !important; }
.catalog-advanced-filter .app-field:has(.app-inline-fields) { width: 350px !important; max-width: 350px !important; }
@media (max-width: 640px) {
    .catalog-advanced-filter .app-filter-grid { grid-template-columns: 1fr; }
    .catalog-advanced-filter .app-field:not([class*="col-"]),
    .catalog-advanced-filter .app-field:not(:has(.app-inline-fields)),
    .catalog-advanced-filter .app-field:has(.app-inline-fields) { width: 100% !important; max-width: none !important; }
}
.catalog-advanced-filter .select2-container { width: 100% !important; max-width: none; }
@media (max-width: 640px) { .catalog-advanced-filter .app-filter-grid { grid-template-columns: 1fr; } }
.catalog-filter-card > .catalog-advanced-filter {
    position: static;
    flex: 1 0 100%;
    width: auto;
    min-width: 0;
    max-width: none;
    margin: 2px 0 0;
    padding: 14px 0 0;
    border: 0;
    border-top: 1px solid var(--color-gray-200);
    border-radius: 0;
    box-shadow: none;
}
.catalog-filter-card > .catalog-advanced-filter .app-filter-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.document-filter-card > .catalog-advanced-filter .app-filter-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}
.document-filter-card > .catalog-advanced-filter .app-field,
.document-filter-card > .catalog-advanced-filter .app-field:has(select),
.document-filter-card > .catalog-advanced-filter .app-field:not(:has(.app-inline-fields)) {
    width: auto !important;
    max-width: none !important;
}
.catalog-filter-card > .catalog-advanced-filter .app-field,
.catalog-filter-card > .catalog-advanced-filter .app-field:not([class*="col-"]),
.catalog-filter-card > .catalog-advanced-filter .app-field:has(.app-inline-fields) {
    width: auto !important;
    max-width: none !important;
}
.catalog-filter-card > .catalog-advanced-filter .document-rework-filter label {
    white-space: nowrap;
}
.catalog-filter-card > .catalog-advanced-filter .document-rework-filter .select2-container {
    display: block;
    width: 100% !important;
}
@media (max-width: 900px) {
    .catalog-filter-card > .catalog-advanced-filter .app-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .catalog-filter-card > .catalog-advanced-filter .app-filter-grid { grid-template-columns: 1fr; }
}
.catalog-filter-card > .catalog-advanced-filter .app-filter-grid--12 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.catalog-filter-card > .catalog-advanced-filter .app-filter-grid--12 > .app-field[class*="col-"] { width: auto !important; max-width: none !important; }
.catalog-filter-card > .catalog-advanced-filter .app-filter-grid--12 > .app-field.col-1-5 { grid-column: span 1; }
.catalog-filter-card > .catalog-advanced-filter .app-filter-grid--12 > .app-field.col-2 { grid-column: span 2; }
.catalog-filter-card > .catalog-advanced-filter .app-filter-grid--12 > .app-field:not([class*="col-"]) { grid-column: span 2; }
@media (max-width: 640px) {
    .catalog-filter-card > .catalog-advanced-filter .app-filter-grid--12 { grid-template-columns: 1fr; }
    .catalog-filter-card > .catalog-advanced-filter .app-filter-grid--12 > .app-field[class*="col-"] { grid-column: auto; width: 100% !important; max-width: none !important; }
}
.app-date-picker { position: relative; display: block; width: 100%; }
.app-date-picker input.js-date-input { width: 100%; max-width: none !important; padding-right: 38px !important; background-position: right 10px center; }
.app-date-clear { position: absolute; z-index: 3; top: 50%; right: 7px; display: none !important; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 4px; color: var(--color-gray-500) !important; background: var(--color-white); font-size: 17px; line-height: 1; transform: translateY(-50%); cursor: pointer; }
.app-date-picker:has(input:not(:placeholder-shown)):hover .app-date-clear { display: inline-flex !important; }
.app-date-clear:hover { color: var(--color-danger-600); background: var(--color-gray-100); }
.role-list-card { overflow: hidden; }
.role-table { table-layout: fixed; }
.role-table th:first-child, .role-table td:first-child { width: 52px; padding-inline: 8px; text-align: center; }
.role-table th:nth-child(2) { width: 22%; }
.role-table th:nth-child(3) { width: 18%; }
.role-table th:last-child, .role-table td:last-child { width: 106px; white-space: nowrap; text-align: right; }
.role-permission-summary { display: flex; align-items: baseline; gap: 8px; color: var(--color-gray-700); }
.role-permission-summary strong { color: var(--color-primary-600); font-size: 16px; }
.role-permission-summary span { min-width: 0; overflow: hidden; color: var(--color-gray-500); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.role-permission-form { min-width: min(620px, 100%); }
.role-permission-form .app-dialog-intro { display: flex; flex-direction: column; gap: 3px; margin-bottom: 14px; }
.role-permission-form .form-hint { color: var(--color-gray-500); font-size: 12px; }
.role-permission-group { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--color-gray-200); }
.role-permission-group:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.role-permission-group h3 { margin: 0 0 9px; color: var(--color-gray-900); font-size: 14px; }
.role-permission-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.role-permission-grid .app-choice-option { min-height: 40px; }
@media (max-width: 700px) { .app-filter-primary-action { width: 100%; margin-left: 0; } .app-filter-primary-action .app-btn { width: 100%; } .role-permission-form { min-width: 0; } .role-permission-grid { grid-template-columns: 1fr; } .role-table th:last-child, .role-table td:last-child { white-space: normal; } }
.role-form { min-width: min(760px, 100%); }
.role-form-intro { margin: 7px 0 18px; }
.role-permission-selection { padding-top: 16px; border-top: 1px solid var(--color-gray-200); }
.role-permission-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.role-permission-toolbar-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; padding-top: 4px; }
.role-form .role-permission-search { position: relative; display: flex; align-items: center; width: 210px; margin-bottom: 0; }
.role-permission-search .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.role-permission-search .app-icon { position: absolute; top: 50%; left: 9px; width: 15px; height: 15px; transform: translateY(-50%); color: var(--color-gray-500); pointer-events: none; }
.role-permission-search input { width: 100%; min-height: 34px; padding: 7px 9px 7px 30px; border: 1px solid var(--color-gray-300); border-radius: 7px; background: var(--color-white); color: var(--color-gray-900); font-size: 12px; font-weight: 400; }
.role-permission-search input::placeholder { color: #98a2b3; font-weight: 400; opacity: 1; }
.role-permission-search input:focus { border-color: var(--color-primary-600); box-shadow: 0 0 0 3px rgba(21,94,239,.12); outline: none; }
.role-permission-toolbar h3 { margin: 0 0 3px; color: var(--color-gray-900); font-size: 15px; }
.role-permission-toolbar .form-hint { margin: 0; }
.role-permission-total { flex: 0 0 auto; padding: 7px 10px; border-radius: 7px; background: var(--color-primary-50); color: var(--color-gray-600); font-size: 12px; white-space: nowrap; }
.role-permission-total strong { color: var(--color-primary-700); font-size: 14px; }
.role-permission-error { margin: 0 0 10px; color: var(--color-danger-600); font-size: 12px; }
.role-permission-group-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 24px; color: var(--color-gray-900); font-size: 13px; font-weight: 600; cursor: pointer; }
.role-form .role-permission-group-toggle { display: inline-flex !important; align-items: center !important; flex-direction: row !important; min-height: 20px; margin: 0 !important; line-height: 1; }
.role-permission-group-toggle input { width: 16px; height: 16px; margin: 0; }
.role-permission-group-count { color: var(--color-gray-500); font-size: 11px; white-space: nowrap; }
.role-permission-options { padding: 4px 8px 7px; }
.role-permission-option { display: flex; align-items: flex-start; gap: 9px; min-height: 40px; margin: 0; padding: 8px 5px; border-radius: 6px; color: var(--color-gray-700); cursor: pointer; }
.role-permission-option:hover { background: var(--color-primary-50); }
.role-permission-option input { flex: 0 0 auto; width: 17px; height: 17px; margin: 2px 0 0; }
.role-permission-option-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 13px; line-height: 1.35; }
.role-permission-empty { padding: 18px 12px; border: 1px dashed var(--color-gray-300); border-radius: 8px; color: var(--color-gray-500); font-size: 12px; text-align: center; }
@media (max-width: 700px) {
    .role-form { min-width: 0; }
    .role-permission-toolbar { display: flex; flex-direction: column; gap: 9px; }
    .role-form .role-permission-toolbar-actions { width: 100%; }
    .role-form .role-permission-toolbar-actions { padding-top: 0; }
    .role-form .role-permission-search { flex: 1 1 auto; width: auto; min-width: 0; }
    .role-permission-total { align-self: center; }
}

/* Dialog Vai trò gọn hơn nhưng vẫn giữ đủ thông tin và khả năng cuộn. */
.ui-dialog.role-form-dialog-wrapper {
    width: min(640px, calc(100vw - 32px)) !important;
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 32px);
}
.ui-dialog.role-form-dialog-wrapper .ui-dialog-titlebar { padding: 12px 48px 12px 16px; }
.ui-dialog.role-form-dialog-wrapper .ui-dialog-content { display: flex; max-height: calc(100vh - 64px); overflow: hidden; padding: 0; }
.ui-dialog.role-form-dialog-wrapper .ui-dialog-content > .role-form { display: flex; min-width: 0; min-height: 0; flex: 1; flex-direction: column; }
.role-form { min-width: 0; }
.role-form { display: flex; min-height: 0; flex: 1; flex-direction: column; }
.role-form .app-dialog-body { min-height: 0; overflow: hidden; padding: 8px 16px 6px; }
.role-form .app-dialog-body > .app-field { margin-bottom: 6px !important; }
.role-form .app-field label { margin-bottom: 5px; font-size: 12px; }
.role-form .app-field input { height: 34px; min-height: 34px; }
.role-form-intro { margin: 4px 0 8px; font-size: 12px; line-height: 1.35; }
.role-permission-selection { padding-top: 8px; }
.role-permission-toolbar { margin-bottom: 6px; }
.role-permission-toolbar h3 { font-size: 14px; }
.role-permission-toolbar-actions { gap: 6px; }
.role-permission-search { width: 190px; }
.role-permission-tree { height: min(420px, max(220px, calc(100vh - 300px))); overflow-y: auto; padding: 6px 8px 8px; border: 1px solid var(--color-gray-200); border-radius: 8px; background: var(--color-white); }
.role-permission-tree-root { min-width: 0; }
.role-permission-tree-header { display: flex; align-items: center; gap: 6px; min-height: 34px; padding: 4px 6px; border-radius: 6px; }
.role-permission-tree-header:hover { background: var(--color-gray-50); }
.role-permission-tree-header .role-permission-group-toggle { flex: 1 1 auto; }
.role-permission-tree-children { margin-left: 14px; padding-left: 12px; border-left: 1px solid var(--color-gray-200); }
.role-permission-tree-group { min-width: 0; }
.role-form .role-permission-options { margin: 0 0 4px 14px; padding: 2px 5px 4px 12px; border-left: 1px solid var(--color-gray-200); }
.role-permission-tree .role-permission-option { min-height: 28px; padding: 3px 5px; }
.role-permission-tree .role-permission-option-copy { font-size: 12px; }
.role-permission-tree-toggle { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 20px; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: var(--color-gray-500); cursor: pointer; }
.role-permission-tree-toggle:hover { background: var(--color-gray-200); color: var(--color-gray-800); }
.role-permission-tree-chevron { width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg) translate(-1px, -1px); transition: transform .15s ease; }
.role-permission-tree-toggle[aria-expanded="true"] .role-permission-tree-chevron { transform: rotate(45deg) translate(-1px, -1px); }
.role-permission-group-toggle { gap: 6px; min-height: 20px; font-size: 12px; }
.role-permission-group-toggle input { width: 15px; height: 15px; }
.role-permission-tree .role-permission-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px 4px; }
.role-permission-option { gap: 6px; }
.role-permission-option input { width: 15px; height: 15px; margin-top: 1px; }
.role-permission-option { align-items: center; }
.role-form .role-permission-option { display: flex !important; align-items: center !important; flex-direction: row !important; }
.role-permission-option-copy { display: block; overflow: hidden; min-width: 0; font-size: 12px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.role-form .app-dialog-footer { margin-top: 0 !important; padding: 8px 16px 10px; }
.role-form .app-form-actions .app-btn { min-height: 34px; padding: 6px 12px; font-size: 13px; }
@media (max-width: 500px) {
    .role-form .role-permission-toolbar-actions { align-items: center; flex-direction: row; }
    .role-form .role-permission-search { flex: 1 1 auto; width: auto; min-width: 0; }
    .role-form .role-permission-total { align-self: center; padding-inline: 8px; }
    .role-permission-tree { height: min(360px, max(220px, calc(100vh - 300px))); }
    .role-permission-tree .role-permission-options { grid-template-columns: 1fr; }
}
.progress-page-toolbar .user-filter-keyword { flex: 0 1 360px; min-width: 220px; }
.progress-page-toolbar .app-btn { white-space: nowrap; }
.progress-export-btn { margin-left: auto; }
.data-entry-filter-card .data-entry-filter-row { grid-template-columns: minmax(240px, 1.4fr) minmax(190px, 1fr) repeat(2, minmax(160px, 180px)) auto auto; }
.data-entry-filter-card .data-entry-filter-status { padding: 0 36px 0 12px; background: var(--color-gray-50); }
.data-entry-filter-card .data-entry-filter-date input { max-width: 180px; }
.app-filter-card .app-filter-actions .app-btn { white-space: nowrap; }

@media (max-width: 1180px) {
    .data-entry-filter-card .data-entry-filter-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .data-entry-filter-card .data-entry-filter-keyword { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
    .progress-page-toolbar .app-field { flex: 1 1 100%; }
    .progress-page-toolbar .user-filter-keyword { flex: 1 1 100%; }
    .progress-export-btn { margin-left: 0; }
    .progress-page-toolbar .app-btn { flex: 1; }
}

.login-wrap { width: 100%; max-width: 420px; margin: 80px auto; padding: 0 20px; }
.login-wrap .app-card { padding: 30px; }
.app-anonymous #main-content { padding: 0; }

pre { padding: 16px; border-radius: var(--radius-sm); background: var(--color-gray-900); color: #f2f4f7; overflow: auto; }
hr { border: 0; border-top: 1px solid var(--color-gray-200); margin: 24px 0; }

.app-dashboard-chart-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 20px; }
.app-dashboard-widget { min-width: 0; }
.app-dashboard-overview-widget { margin-bottom: 20px; }
.app-dashboard-placeholder {
    min-height: 508px; padding: 20px; border: 1px solid var(--color-gray-200); border-radius: var(--radius-md);
    background: var(--color-white); box-shadow: var(--shadow-sm);
}
.app-dashboard-folder-placeholder { min-height: 238px; }
.app-dashboard-placeholder-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.app-dashboard-placeholder-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 20px; }
.app-dashboard-placeholder-charts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.app-skeleton { display: block; border-radius: var(--radius-sm); background: linear-gradient(90deg, var(--color-gray-100), #fff, var(--color-gray-100)); background-size: 200% 100%; animation: app-dashboard-skeleton 1.4s ease-in-out infinite; }
.app-skeleton-title { width: 220px; height: 22px; }
.app-skeleton-value { width: 70px; height: 28px; }
.app-skeleton-card { min-height: 112px; border: 1px solid var(--color-gray-200); }
.app-skeleton-chart { min-height: 280px; border: 1px solid var(--color-gray-200); }
.app-skeleton-folder { min-height: 125px; }
@keyframes app-dashboard-skeleton { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .app-skeleton { animation: none; } }
.app-chart-card { margin: 0; min-width: 0; }
.app-chart-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.app-chart-heading h2 { margin-bottom: 4px; }
.app-chart-subtitle { margin: 0; color: var(--color-gray-500); font-size: 12px; }
.app-chart-total { color: var(--color-gray-900); font-size: 24px; line-height: 32px; }
.app-donut-layout { display: flex; align-items: center; gap: 28px; min-height: 170px; }
.app-donut { width: 158px; height: 158px; flex: 0 0 158px; display: grid; place-items: center; border-radius: 50%; }
.app-donut-svg { position: relative; background: transparent; }
.app-donut-svg > svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.app-donut-track, .app-donut-value { fill: none; stroke-width: 16; }
.app-donut-track { stroke: var(--color-gray-100); }
.app-donut-value--primary { stroke: var(--color-primary-600); }
.app-donut-value--success { stroke: var(--color-success-600); }
.app-donut-svg .app-donut-hole { position: absolute; inset: 23px; width: auto; height: auto; }
.app-donut-hole { width: 112px; height: 112px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 50%; background: var(--color-white); }
.app-donut-hole strong { color: var(--color-gray-900); font-size: 26px; line-height: 32px; }
.app-donut-hole span { color: var(--color-gray-500); font-size: 12px; }
.app-workflow-donut-layout { display: flex; align-items: center; justify-content: center; gap: 28px; min-height: 170px; }
.app-workflow-donut { width: 158px; height: 158px; flex: 0 0 158px; display: grid; place-items: center; border-radius: 50%; }
.app-chart-legend { width: 100%; }
.app-legend-row { display: flex; align-items: center; gap: 9px; padding: 7px 0; color: var(--color-gray-600); }
.app-legend-row strong { margin-left: auto; color: var(--color-gray-900); }
.app-legend-dot { width: 9px; height: 9px; flex: 0 0 9px; border-radius: 50%; background: var(--color-gray-300); }
.app-legend-pending { background: var(--color-warning-600); }
.app-legend-processing { background: #0891b2; }
.app-legend-done { background: var(--color-primary-600); }
.app-legend-waitingdataentry { background: var(--color-review-600); }
.app-legend-waitingreview1 { background: #0ea5e9; }
.app-legend-waitingreview2 { background: var(--color-warning-600); }
.app-legend-completed { background: var(--color-success-600); }
.app-legend-error { background: var(--color-danger-600); }
.app-bar-list { display: flex; flex-direction: column; gap: 16px; }
.app-bar-item { min-width: 0; }
.app-bar-label { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 7px; color: var(--color-gray-600); }
.app-bar-label span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-bar-label strong { color: var(--color-gray-900); }
.app-bar-track { height: 10px; overflow: hidden; border-radius: 999px; background: var(--color-gray-100); }
.app-bar-fill { display: block; height: 100%; min-width: 0; border-radius: inherit; transition: width .25s ease; }
.app-bar-progress { display: block; width: 100%; height: 10px; border: 0; border-radius: 999px; appearance: none; background: var(--color-gray-100); }
.app-bar-progress::-webkit-progress-bar { border-radius: inherit; background: var(--color-gray-100); }
.app-bar-progress::-webkit-progress-value { border-radius: inherit; background: var(--color-primary-600); transition: width .25s ease; }
.app-bar-progress::-moz-progress-bar { border-radius: inherit; background: var(--color-primary-600); transition: width .25s ease; }
.app-bar-progress.app-bar-folder::-webkit-progress-value { background: var(--color-primary-600); }
.app-bar-progress.app-bar-folder::-moz-progress-bar { background: var(--color-primary-600); }
.app-bar-waitingdataentry { background: var(--color-primary-600); }
.app-bar-waitingreview1 { background: var(--color-info-600); }
.app-bar-waitingreview2 { background: var(--color-warning-600); }
.app-bar-completed { background: var(--color-success-600); }
.app-bar-folder { background: var(--color-primary-600); }
.app-folder-chart { margin-bottom: 20px; }
.app-folder-bars { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
@media (max-width: 1100px) { .app-dashboard-kpi-grid, .app-dashboard-placeholder-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .app-dashboard-chart-grid, .app-folder-bars { grid-template-columns: 1fr; } .app-donut-layout, .app-workflow-donut-layout { justify-content: center; } }
@media (max-width: 560px) { .app-dashboard-kpi-grid, .app-personal-kpi-grid, .app-dashboard-placeholder-kpis, .app-dashboard-placeholder-charts { grid-template-columns: 1fr; } .app-workflow-donut-layout { flex-direction: column; } .app-dashboard-overview-widget, .app-dashboard-placeholder { min-height: 0; } }

.app-module-dashboard-kpi-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1100px) { .app-module-dashboard-kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .app-module-dashboard-kpi-grid { grid-template-columns: 1fr; } }

/* Statistics overview: compact dashboard with visual status summaries. */
.statistics-page-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 16px; }
.statistics-page-heading .app-page-title { margin: 2px 0 3px; }
.statistics-page-heading .app-page-description { margin: 0; }
.statistics-eyebrow { color: var(--color-primary-600); font-size: 10px; font-weight: 750; letter-spacing: .12em; }
.statistics-progress-link { flex: 0 0 auto; }
.statistics-filter-card { display: block; padding: 16px 20px; margin-bottom: 16px; }
.statistics-filter-grid { grid-template-columns: repeat(5, minmax(0, 1fr)) auto; gap: 10px; }
.statistics-filter-grid .app-field { max-width: none; }
.statistics-filter-grid .app-field input, .statistics-filter-grid .app-field select, .statistics-filter-grid .app-field .select2-container, .statistics-filter-grid .app-field .js-date-input { max-width: none; }
.statistics-filter-grid .app-field label { margin-bottom: 4px; font-size: 11px; }
.statistics-filter-grid .app-filter-actions { gap: 7px; }
.statistics-filter-grid .app-btn { min-height: 36px; padding: 8px 12px; }
.statistics-kpi-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.statistics-kpi { position: relative; display: flex; align-items: center; gap: 12px; min-height: 90px; margin: 0; padding: 15px 18px; overflow: hidden; }
.statistics-kpi::after { position: absolute; right: -18px; bottom: -28px; width: 86px; height: 86px; border-radius: 50%; background: currentColor; opacity: .05; content: ''; }
.statistics-kpi-icon { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 38px; border-radius: 11px; }
.statistics-kpi-icon .app-icon { width: 19px; height: 19px; }
.statistics-kpi > div:last-child, .statistics-kpi > .statistics-kpi-content { display: flex; flex-direction: column; min-width: 0; }
.statistics-kpi span { color: var(--color-gray-500); font-size: 12px; font-weight: 600; }
.statistics-kpi strong { margin-top: 2px; color: var(--color-gray-900); font-size: 27px; line-height: 31px; }
.statistics-kpi small { color: var(--color-gray-500); font-size: 10px; }
.statistics-kpi-total, .statistics-kpi-assigned { color: var(--color-primary-600); }
.statistics-kpi-total .statistics-kpi-icon, .statistics-kpi-assigned .statistics-kpi-icon { background: var(--color-primary-50); }
.statistics-kpi-unassigned { color: var(--color-warning-600); }
.statistics-kpi-unassigned .statistics-kpi-icon { background: var(--color-warning-50); }
.statistics-kpi-waiting { color: var(--color-info-600); }
.statistics-kpi-waiting .statistics-kpi-icon { background: var(--color-info-50); }
.statistics-kpi-submitted { color: var(--color-review-600); }
.statistics-kpi-submitted .statistics-kpi-icon { background: var(--color-review-50); }
.statistics-kpi-rework, .statistics-kpi-error { color: var(--color-danger-600); }
.statistics-kpi-rework .statistics-kpi-icon, .statistics-kpi-error .statistics-kpi-icon { background: var(--color-danger-50); }
.statistics-kpi-completed { color: var(--color-success-600); }
.statistics-kpi-completed .statistics-kpi-icon { background: var(--color-success-50); }
.statistics-kpi-primary { color: var(--color-primary-600); }
.statistics-kpi-primary .statistics-kpi-icon { background: var(--color-primary-50); }
.statistics-kpi-info { color: var(--color-info-600); }
.statistics-kpi-info .statistics-kpi-icon { background: var(--color-info-50); }
.statistics-kpi-warning { color: var(--color-warning-600); }
.statistics-kpi-warning .statistics-kpi-icon { background: var(--color-warning-50); }
.statistics-kpi-success { color: var(--color-success-600); }
.statistics-kpi-success .statistics-kpi-icon { background: var(--color-success-50); }
.statistics-kpi-review { color: var(--color-review-600); }
.statistics-kpi-review .statistics-kpi-icon { background: var(--color-review-50); }
.statistics-chart-grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 12px; margin-bottom: 12px; }
.statistics-chart-card, .statistics-folder-card { min-width: 0; margin: 0; padding: 18px 20px; }
.statistics-card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
.statistics-card-heading h2 { margin: 0 0 3px; color: var(--color-gray-900); font-size: 16px; line-height: 22px; }
.statistics-card-heading p { margin: 0; color: var(--color-gray-500); font-size: 11px; }
.statistics-card-heading > strong { color: var(--color-gray-900); font-size: 20px; white-space: nowrap; }
.statistics-card-heading > strong small { color: var(--color-gray-500); font-size: 10px; font-weight: 500; }
.statistics-donut-layout { display: flex; align-items: center; gap: 24px; min-height: 164px; }
.statistics-donut { display: grid; place-items: center; width: 148px; height: 148px; flex: 0 0 148px; border-radius: 50%; }
.statistics-donut > div { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 103px; height: 103px; border-radius: 50%; background: var(--color-white); }
.statistics-donut strong { color: var(--color-gray-900); font-size: 25px; line-height: 28px; }
.statistics-donut span { color: var(--color-gray-500); font-size: 10px; }
.statistics-legend { flex: 1; min-width: 0; }
.statistics-legend > div { display: flex; align-items: center; gap: 8px; padding: 6px 0; color: var(--color-gray-600); font-size: 12px; }
.statistics-legend b { margin-left: auto; color: var(--color-gray-900); }
.statistics-dot { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: var(--color-gray-300); }
.statistics-dot-pending { background: var(--color-warning-600); }.statistics-dot-processing { background: #0891b2; }.statistics-dot-done { background: var(--color-primary-600); }.statistics-dot-error { background: var(--color-danger-600); }
.statistics-folder-bar { height: 9px; overflow: hidden; border-radius: 999px; background: var(--color-gray-100); }
.statistics-folder-bar span { display: block; height: 100%; min-width: 0; border-radius: inherit; transition: width .25s ease; }
.statistics-section-count { padding: 5px 9px; border-radius: 999px; background: var(--color-gray-50); color: var(--color-gray-500); font-size: 10px; white-space: nowrap; }
.statistics-folder-card { padding-bottom: 10px; }
.statistics-folder-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 34px; row-gap: 13px; }
.statistics-folder-row { display: grid; grid-template-columns: minmax(130px, 1.2fr) minmax(80px, 1fr) 28px; align-items: center; gap: 10px; min-width: 0; }
.statistics-folder-name { display: flex; flex-direction: column; min-width: 0; }
.statistics-folder-name strong, .statistics-folder-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.statistics-folder-name strong { color: var(--color-gray-700); font-size: 12px; }.statistics-folder-name span { margin-top: 2px; color: var(--color-gray-500); font-size: 10px; }
.statistics-folder-bar span { background: linear-gradient(90deg, var(--color-primary-600), #6d9cf8); }
.statistics-folder-row > b { color: var(--color-gray-900); font-size: 12px; text-align: right; }
.data-entry-statistics-table th { white-space: normal; }
.data-entry-statistics-table td { white-space: nowrap; padding: 11px 14px; }
.data-entry-statistics-table { width: 100%; min-width: 100%; table-layout: fixed; }
.data-entry-statistics-table .data-entry-statistics-col-index { width: 5%; }
.data-entry-statistics-table .data-entry-statistics-col-user { width: 22%; }
.data-entry-statistics-table .data-entry-statistics-col-number { width: 10.428%; }
.data-entry-statistics-table .data-entry-statistics-index-column { width: 5%; min-width: 0; }
.data-entry-statistics-table .progress-name-column { width: 22%; min-width: 0; max-width: none; text-align: left; }
.data-entry-statistics-table thead th { height: 44px; line-height: 1.25; text-align: center; vertical-align: middle; padding: 10px 12px; }
.data-entry-statistics-table thead tr:first-child th { background: #eef1f3; color: var(--color-gray-700); font-size: 13px; letter-spacing: .1px; }
.data-entry-statistics-table thead tr:nth-child(2) th { min-height: 42px; background: #f7f8f9; color: var(--color-gray-600); font-size: 12px; }
.data-entry-statistics-table th, .data-entry-statistics-table td { border-right: 1px solid #cbd5df; }
.data-entry-statistics-table th:last-child, .data-entry-statistics-table td:last-child { border-right: 0; }
.data-entry-statistics-table thead th { border-bottom: 1px solid #b8c6d2; }
.data-entry-statistics-table tbody tr:not(.data-entry-statistics-total):nth-child(even) td { background: #fbfcfd; }
.data-entry-statistics-table tbody tr:not(.data-entry-statistics-total):hover td { background: #f1f3f5; }
.data-entry-statistics-total td { background: #f1f3f5; color: var(--color-gray-900); font-weight: 600; border-bottom: 1px solid var(--color-gray-300); }
.data-entry-statistics-total .progress-name-column { background: #f1f3f5; }
.data-entry-statistics-table tbody td:nth-child(n+3) { color: var(--color-gray-700); font-variant-numeric: tabular-nums; }
.data-entry-statistics-table tbody td:nth-child(5) { color: var(--color-gray-800); font-weight: 600; }
.data-entry-statistics-table thead tr:first-child th:nth-child(3),
.data-entry-statistics-table thead tr:nth-child(2) th:nth-child(-n+4) { background: #dbeafe; color: #155eef; }
.data-entry-statistics-table tbody td:nth-child(n+3):nth-child(-n+6) { background: #f5f9ff; color: #155eef; }
.data-entry-statistics-table thead tr:first-child th:nth-child(4),
.data-entry-statistics-table thead tr:nth-child(2) th:nth-child(n+5):nth-child(-n+7) { background: #eadfff; color: #6941c6; }
.data-entry-statistics-table tbody td:nth-child(n+7):nth-child(-n+9) { background: #fbf9ff; color: #6941c6; }
.data-entry-statistics-table thead tr:first-child th:not([rowspan]) { border-bottom: 1px solid #c6d4e2; }
.data-entry-statistics-table thead th { font-family: inherit; }
.data-entry-statistics-table .data-entry-statistics-total td,
.data-entry-statistics-table .data-entry-statistics-total .progress-name-column {
    background: #f1f5f9 !important;
    color: #475467 !important;
    font-weight: 500;
    border-top: 1px solid #cbd5e1;
    border-bottom: 1px solid #cbd5e1;
}
.data-entry-statistics-table .data-entry-statistics-total strong { color: #344054; font-weight: 600; }
.data-entry-statistics-table .data-entry-statistics-total td:nth-child(1),
.data-entry-statistics-table .data-entry-statistics-total td:nth-child(2) { background: #edf2f7 !important; }
.data-entry-statistics-table .data-entry-statistics-total td:nth-child(n+3):nth-child(-n+6) { background: #eaf3ff !important; color: #175cd3 !important; }
.data-entry-statistics-table .data-entry-statistics-total td:nth-child(n+7):nth-child(-n+9) { background: #f5efff !important; color: #6941c6 !important; }
.data-entry-statistics-filter-grid { grid-template-columns: repeat(6, minmax(0, 1fr)) auto; }
.data-entry-statistics-filter-grid .app-page-size-field { flex: 0 0 82px; min-width: 82px; }
.data-entry-statistics-filter-grid .app-page-size-field label { margin-bottom: 4px; font-size: 11px; }
@media (max-width: 1100px) { .statistics-filter-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }.statistics-filter-grid .app-filter-actions { grid-column: 1 / -1; justify-content: flex-end; } }
@media (max-width: 820px) { .statistics-chart-grid, .statistics-folder-list { grid-template-columns: 1fr; }.statistics-donut-layout { justify-content: center; }.statistics-page-heading { align-items: flex-start; flex-direction: column; }.statistics-progress-link { width: 100%; justify-content: center; } }
@media (max-width: 600px) { .statistics-kpi-grid { grid-template-columns: 1fr; }.statistics-filter-grid { grid-template-columns: 1fr 1fr; }.statistics-filter-grid .app-field:nth-child(3), .statistics-filter-grid .app-filter-actions { grid-column: 1 / -1; }.statistics-filter-grid .app-filter-actions { display: flex; }.statistics-filter-grid .app-btn { flex: 1; }.statistics-folder-row { grid-template-columns: minmax(110px, 1.2fr) minmax(60px, 1fr) 28px; } }

/* User management: compact toolbar layout without the page title. */
.user-management-page { display: flex; flex-direction: column; gap: 18px; }
.user-filter-card {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(190px, 1fr);
    align-items: end;
    gap: 24px;
    padding: 18px 20px;
    border: 1px solid var(--color-gray-200);
    border-radius: 12px;
    background: var(--color-white);
    box-shadow: 0 3px 12px rgba(16, 24, 40, .045);
}
.user-filter-heading { display: flex; grid-column: 1 / -1; align-items: center; gap: 12px; min-width: 0; padding-bottom: 1px; }
.user-filter-heading-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; flex: 0 0 38px; border-radius: 10px;
    background: var(--color-primary-50); color: var(--color-primary-600);
}
.user-filter-heading-icon .app-icon { width: 18px; height: 18px; }
.user-filter-heading h1 { margin: 0 0 3px; color: var(--color-gray-900); font-size: 16px; line-height: 22px; font-weight: 650; }
.user-filter-heading p { margin: 0; color: var(--color-gray-500); font-size: 12px; line-height: 18px; }
.user-filter-card .app-filter-grid { display: flex; align-items: flex-end; gap: 12px; flex-wrap: nowrap; }
.user-filter-card .app-field { width: auto; min-width: 0; }
.user-filter-card .user-filter-keyword { flex: 0 1 360px; }
.user-filter-card .app-field:not(.user-filter-keyword) { flex: 0 1 200px; }
.user-filter-card .app-filter-actions { flex: 0 0 auto; min-width: 0; }
.user-filter-card { position: relative; padding-right: 180px; }
.user-filter-add { position: absolute; top: 50%; right: 20px; transform: translateY(-50%); }
.user-filter-card input, .user-filter-card select { width: 100%; min-height: 38px; padding: 8px 10px; border: 1px solid var(--color-gray-300); border-radius: 7px; color: var(--color-gray-900); background: var(--color-white); }
.user-filter-card input:focus, .user-filter-card select:focus { border-color: var(--color-primary-600); box-shadow: 0 0 0 3px rgba(21,94,239,.12); outline: none; }
.user-filter-card .app-field label { margin-bottom: 5px; font-size: 12px; }
.user-filter-card .app-filter-actions { gap: 8px; margin-left: 0; }
.user-filter-card .app-filter-actions .app-btn { min-height: 38px; padding-inline: 15px; }
.user-filter-page-actions { display: flex; align-items: flex-end; justify-content: flex-end; min-height: 38px; }
.user-filter-page-actions .app-btn { min-height: 38px; }
.admin-list-card, .user-list-card, .role-list-card { margin: 0; border-radius: 12px; box-shadow: 0 3px 12px rgba(16, 24, 40, .045); }
.admin-list-card .app-data-card-header, .user-list-card .app-data-card-header, .role-list-card .app-data-card-header { padding: 17px 20px; }
.admin-list-card .app-table th, .admin-list-card .app-table td, .user-list-card .app-table th, .user-list-card .app-table td, .role-list-card .app-table th, .role-list-card .app-table td { padding: 14px 14px; }
.admin-list-card .app-table th:first-child, .admin-list-card .app-table td:first-child, .user-list-card .app-table th:first-child, .user-list-card .app-table td:first-child, .role-list-card .app-table th:first-child, .role-list-card .app-table td:first-child { padding-left: 20px; }
.admin-list-card .app-table th:last-child, .admin-list-card .app-table td:last-child, .user-list-card .app-table th:last-child, .user-list-card .app-table td:last-child, .role-list-card .app-table th:last-child, .role-list-card .app-table td:last-child { padding-right: 20px; }
.admin-list-card .app-table th, .user-list-card .app-table th, .role-list-card .app-table th { font-size: 12px; letter-spacing: .01em; text-transform: uppercase; color: var(--color-gray-500); }
.admin-list-card .app-table td, .user-list-card .app-table td, .role-list-card .app-table td { color: var(--color-gray-600); }
.admin-list-card .app-table tbody tr, .user-list-card .app-table tbody tr, .role-list-card .app-table tbody tr { transition: background .15s ease; }
.admin-list-card .app-table tbody tr:hover, .user-list-card .app-table tbody tr:hover, .role-list-card .app-table tbody tr:hover { background: #f8faff; }
.admin-list-card .app-table tbody tr, .user-list-card .app-table tbody tr, .role-list-card .app-table tbody tr { height: 69px; }
.admin-list-card .app-row-action, .user-list-card .app-row-action, .role-list-card .app-row-action { padding: 5px 8px; font-size: 13px; }
.admin-list-card .app-table-footer, .user-list-card .app-table-footer, .role-list-card .app-table-footer { padding: 13px 20px; }
@media (max-width: 1180px) {
    .user-filter-card { grid-template-columns: 1fr; gap: 16px; }
    .user-filter-heading { padding-bottom: 0; }
    .user-filter-page-actions { justify-content: flex-start; }
}
@media (max-width: 760px) {
    .user-filter-card { padding-right: 20px; }
    .user-filter-add { position: static; transform: none; }
    .user-filter-card .app-filter-grid { flex-wrap: wrap; }
    .user-filter-card .user-filter-keyword, .user-filter-card .app-filter-actions { grid-column: 1 / -1; }
    .user-filter-card .app-filter-actions { justify-content: flex-end; }
}
@media (max-width: 480px) {
    .user-filter-card { padding: 16px; }
    .user-filter-card .app-filter-grid { grid-template-columns: 1fr; }
    .user-filter-card .user-filter-keyword, .user-filter-card .app-filter-actions { grid-column: auto; }
    .user-filter-card .app-filter-actions { justify-content: stretch; }
    .user-filter-card .app-filter-actions .app-btn { flex: 1; }
}

/* Error pages */
.error-page {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(44px, 7vw, 96px);
    width: min(980px, 100%);
    min-height: calc(100vh - 150px);
    margin: 0 auto;
    padding: 48px 24px;
}
.error-page-art {
    position: relative;
    flex: 0 0 clamp(280px, 34vw, 390px);
    width: clamp(280px, 34vw, 390px);
    height: clamp(240px, 30vw, 330px);
    border: 1px solid #d7e5ff;
    border-radius: 28px;
    background: linear-gradient(145deg, #f8fbff 0%, #edf4ff 100%);
    overflow: hidden;
}
.error-page-art-orbit { position: absolute; border: 1px solid rgba(21, 94, 239, .15); border-radius: 50%; }
.error-page-art-orbit-one { width: 310px; height: 310px; top: 10px; left: 38px; }
.error-page-art-orbit-two { width: 210px; height: 210px; top: 60px; left: 88px; }
.error-page-code {
    position: absolute; inset: 0; display: grid; place-items: center;
    color: #155eef; font-size: clamp(72px, 10vw, 112px); font-weight: 800;
    letter-spacing: -.09em; line-height: 1; text-shadow: 8px 8px 0 rgba(21, 94, 239, .08);
}
.error-page-art-card {
    position: absolute; width: 52px; height: 68px; border: 1px solid #b2ccff;
    border-radius: 8px; background: rgba(255,255,255,.8); box-shadow: 0 8px 18px rgba(21,94,239,.1); transform: rotate(14deg);
}
.error-page-art-card::after { content: ''; position: absolute; right: 9px; bottom: 14px; left: 9px; height: 5px; border-top: 1px solid #b2ccff; border-bottom: 1px solid #b2ccff; }
.error-page-art-card-top { top: 34px; right: 32px; }
.error-page-art-card-bottom { bottom: 28px; left: 34px; transform: rotate(-17deg); }
.error-page-art-icon { position: absolute; right: 50%; bottom: 24px; width: 26px; height: 26px; color: #155eef; stroke: currentColor; stroke-width: 1.5; transform: translateX(50%); }
.error-page-art-server .error-page-art-icon { color: #7f56d9; }
.error-page-art-access .error-page-art-icon { color: #d92d20; }
.error-page-art-access .error-page-art-orbit { border-color: rgba(217, 45, 32, .15); }
.error-page-art-access .error-page-code { color: #d92d20; text-shadow: 8px 8px 0 rgba(217, 45, 32, .08); }
.error-page-art-access .error-page-art-card { border-color: #f3b4ae; box-shadow: 0 8px 18px rgba(217,45,32,.1); }
.error-page-art-access .error-page-art-card::after { border-color: #f3b4ae; }
.error-page-art-access .error-page-art-alert { background: #d92d20; box-shadow: 0 8px 18px rgba(217, 45, 32, .25); }
.error-page-art-access + .error-page-content .error-page-eyebrow { color: var(--color-danger-600); }
.error-page-art-alert {
    position: absolute; top: 50%; left: 50%; z-index: 1; display: grid; place-items: center;
    width: 38px; height: 38px; border: 4px solid #fff; border-radius: 50%;
    background: #f04438; color: #fff; font-size: 24px; font-weight: 800; line-height: 1;
    box-shadow: 0 8px 18px rgba(240, 68, 56, .25); transform: translate(-50%, -50%) rotate(8deg);
}
.error-page-content { max-width: 430px; }
.error-page-eyebrow { display: block; margin-bottom: 12px; color: var(--color-primary-600); font-size: 11px; font-weight: 700; letter-spacing: .14em; }
.error-page-content h1 { margin: 0 0 12px; color: var(--color-gray-900); font-size: clamp(30px, 4vw, 42px); line-height: 1.15; letter-spacing: -.035em; }
.error-page-content p { margin: 0; color: var(--color-gray-500); font-size: 15px; line-height: 24px; }
.error-page-actions { display: flex; gap: 10px; margin-top: 26px; flex-wrap: wrap; }
.error-page-actions .app-btn { min-width: 142px; }
.license-status-alert {
    display: grid;
    gap: 7px;
    margin-top: 14px;
    padding: 12px 16px;
    border-radius: 9px;
    box-shadow: none;
}
.license-alert-row { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; min-width: 0; font-size: 13px; line-height: 18px; }
.license-alert-row span { color: currentColor; opacity: .78; }
.license-alert-row strong { flex: 0 0 auto; color: currentColor; font-weight: 700; letter-spacing: .01em; }
.license-status-alert, .license-status-alert.app-alert-danger, .license-status-alert.app-alert-warning, .license-status-alert.app-alert-info { border: 1px solid #dbe4f3; background: #f3f6fb; color: var(--color-gray-700); }
.app-standalone-page { min-width: 0; background: #fff; }
.app-standalone-page .app-topbar,
.app-standalone-page .app-breadcrumb-bar,
.app-standalone-page .app-sidebar { display: none; }
.app-standalone-page #main-content { min-height: 100dvh; margin-left: 0; padding: 0; }
.license-page { width: min(1080px, 100%); min-height: 100dvh; gap: clamp(48px, 8vw, 110px); padding: 56px 30px; }
.license-page .error-page-art { flex-basis: clamp(300px, 36vw, 400px); width: clamp(300px, 36vw, 400px); height: clamp(280px, 34vw, 360px); }
.license-page .error-page-content { max-width: 500px; }
.license-page .error-page-content > p { margin-bottom: 20px; }
.license-page .error-page-content h1 { max-width: 500px; }
.license-page .license-status-alert { margin: 0 0 20px; }
.license-page .license-alert-row { align-items: flex-start; }
.license-page .license-alert-row strong { max-width: 68%; overflow-wrap: anywhere; text-align: right; }
.license-alert-row--machine { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 10px; }
.license-alert-row--machine > span { grid-column: 1 / -1; min-width: 0; font-size: 11px; font-weight: 600; white-space: nowrap; }
.license-page .license-alert-row--machine > .license-machine-value { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; min-width: 0; max-width: none; gap: 8px; }
.license-machine-value > span { min-width: 0; overflow: hidden; color: var(--color-gray-900); font-family: Consolas, 'Courier New', monospace; font-size: 12px; font-weight: 500; line-height: 18px; letter-spacing: 0; opacity: 1; overflow-wrap: normal; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.license-copy-button { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex: 0 0 32px; padding: 0; border: 0; border-radius: 8px; color: var(--color-gray-500); background: transparent; cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease; }
.license-copy-button:hover { background: #e4ebf7; color: var(--color-primary-700); }
.license-copy-button .app-icon { width: 15px; height: 15px; }
.license-copy-label { display: none; }
.license-copy-button.is-copied { border-color: #12b76a; color: #087443; background: #ecfdf3; opacity: 1; }
.license-page .license-actions { margin-top: 2px; }
.license-page .license-actions .app-btn:first-child { box-shadow: 0 8px 18px rgba(21,94,239,.16); }
.license-page .license-actions .app-btn:first-child:last-child { width: 100%; justify-content: center; }
.license-activation-file-picker { margin-top: 6px; }
.license-activation-selected-file { margin-top: 8px; }
.license-activation-selected-file .app-file-card-remove .app-icon { width: 16px; height: 16px; }
.license-activation-dialog-form .app-dialog-lead { margin: 0 0 16px; color: var(--color-gray-600); font-size: 13px; line-height: 20px; }
@media (max-width: 700px) {
    .license-page { gap: 30px; min-height: 100dvh; padding: 36px 20px; }
    .license-page .error-page-art { flex-basis: 240px; width: min(100%, 330px); height: 240px; }
    .license-page .error-page-content { width: min(100%, 500px); }
    .license-page .license-alert-row strong { max-width: 60%; }
    .license-copy-button { width: 32px; flex-basis: 32px; padding: 0; }
    .license-copy-label { display: none; }
    .license-page .license-actions { justify-content: stretch; }
    .license-page .license-actions .app-btn { flex: 1 1 100%; }
}
@media (max-width: 700px) {
    .error-page { flex-direction: column; gap: 30px; min-height: calc(100vh - 80px); padding: 36px 20px; text-align: center; }
    .error-page-art { flex-basis: 240px; width: min(100%, 330px); height: 240px; }
    .error-page-art-orbit-one { width: 230px; height: 230px; top: 5px; left: 50%; transform: translateX(-50%); }
    .error-page-art-orbit-two { width: 155px; height: 155px; top: 42px; left: 50%; transform: translateX(-50%); }
    .error-page-actions { justify-content: center; }
}

/* Login */
.app-anonymous { position: relative; isolation: isolate; display: flex; align-items: center; justify-content: center; min-height: 100dvh; padding: 32px; overflow-x: hidden; background: radial-gradient(ellipse at 8% 12%, rgba(96,146,255,.3), transparent 40%), radial-gradient(ellipse at 94% 86%, rgba(123,112,238,.24), transparent 42%), radial-gradient(ellipse at 88% 10%, rgba(62,194,220,.14), transparent 32%), linear-gradient(132deg, #dce8ff 0%, #f1f5ff 47%, #dce4ff 100%); }
.app-anonymous::before, .app-anonymous::after { position: fixed; z-index: -1; width: 30rem; height: 30rem; border: 1px solid rgba(255,255,255,.72); border-radius: 50%; content: ""; pointer-events: none; }
.app-anonymous::before { top: -19rem; left: -13rem; background: #b9d0ff; box-shadow: 0 0 0 22px rgba(73,123,235,.1), 0 0 0 48px rgba(73,123,235,.08), 0 0 0 76px rgba(73,123,235,.055); }
.app-anonymous::after { right: -17rem; bottom: -21rem; background: #d0caff; box-shadow: 0 0 0 24px rgba(110,92,224,.1), 0 0 0 52px rgba(110,92,224,.075), 0 0 0 82px rgba(110,92,224,.05); }
.app-anonymous #main-content { width: 100%; min-height: 0; }
.login-shell { width: min(1120px, 100%); min-width: 0; min-height: min(680px, calc(100dvh - 64px)); height: min(680px, calc(100dvh - 64px)); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(420px, .95fr); overflow: hidden; border: 1px solid rgba(208,213,221,.72); border-radius: 24px; background: var(--color-white); box-shadow: 0 24px 60px rgba(16,24,40,.14); }
.login-showcase { position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: 0; overflow: hidden; padding: 38px 52px; color: white; background: radial-gradient(circle at 92% 92%, rgba(116,161,255,.52), transparent 36%), radial-gradient(circle at 7% 5%, rgba(8,43,117,.55), transparent 33%), linear-gradient(145deg, #123b87 0%, #155eef 58%, #3e7bfa 100%); }
.login-brand, .login-mobile-brand { display: inline-flex; align-items: center; gap: 10px; color: inherit; font-size: 18px; font-weight: 700; letter-spacing: .01em; }
.login-brand-logo { width: 50px; height: 50px; flex: 0 0 50px; object-fit: cover; border-radius: 14px; box-shadow: 0 10px 24px rgba(5,35,112,.2); }
.login-showcase-copy { position: relative; z-index: 1; max-width: 430px; padding: 30px 0 120px; }
.login-showcase-eyebrow { display: block; color: rgba(255,255,255,.72); font-size: 11px; font-weight: 700; letter-spacing: .14em; line-height: 16px; }
.login-showcase h1 { max-width: 430px; margin: 16px 0 18px; color: white; font-size: clamp(34px, 4vw, 48px); line-height: 1.08; letter-spacing: -.035em; font-weight: 600; }
.login-showcase-copy p { max-width: 420px; margin: 0; color: rgba(255,255,255,.78); font-size: 16px; line-height: 26px; }
.login-showcase-orbit { position: absolute; border: 1px solid rgba(255,255,255,.17); border-radius: 50%; pointer-events: none; }
.login-showcase-orbit-one { width: 620px; height: 620px; right: -230px; bottom: -230px; }
.login-showcase-orbit-two { width: 430px; height: 430px; right: -140px; bottom: -130px; }
.login-showcase-grid { position: absolute; right: 8%; bottom: 9%; width: 210px; height: 150px; opacity: .23; background-image: linear-gradient(rgba(255,255,255,.45) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.45) 1px, transparent 1px); background-size: 30px 30px; mask-image: linear-gradient(135deg, transparent, black); }
.login-panel { position: relative; display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 0; padding: 48px 40px; background: var(--color-white); }
.login-panel-inner { width: min(100%, 390px); min-width: 0; }
.login-mobile-brand { display: none; color: var(--color-gray-900); }
.login-heading { margin-bottom: 34px; }
.login-eyebrow { display: flex; align-items: center; gap: 9px; color: var(--color-primary-600); font-size: 12px; font-weight: 600; letter-spacing: .12em; line-height: 16px; }
.login-eyebrow > span { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: var(--color-primary-600); }
.login-heading h1 { margin: 16px 0 4px; color: #101828; font-size: 36px; line-height: 44px; letter-spacing: -.035em; font-weight: 700; }
.login-heading p { margin: 0; color: #667085; font-size: 15px; line-height: 24px; }
.login-eyebrow { color: var(--color-primary-600); }
.login-form { display: flex; flex-direction: column; gap: 21px; }
.login-inline-error { display: block; margin: -8px 0 -5px; padding: 10px 12px; border: 1px solid #f4c7c3; border-radius: 9px; color: #b42318; background: #fff5f4; font-size: 12px; line-height: 18px; }
.login-inline-error:empty { display: none; }
.login-field { margin: 0 !important; }
.login-field label { margin-bottom: 8px; color: #344054; font-size: 14px; font-weight: 500; }
.login-input-wrap { position: relative; display: flex; align-items: center; }
.login-field .login-input-wrap input { width: 100%; height: 54px; min-height: 54px; padding: 12px 14px 12px 48px; border: 1px solid #dce3ee; border-radius: 11px; background: #f8fafc; color: #101828; font-size: 15px; }
.login-field .login-input-wrap input::placeholder { color: #98a2b3; }
.login-field .login-input-wrap input:focus { border-color: var(--color-primary-600); background: white; box-shadow: 0 0 0 3px rgba(21,94,239,.12); outline: none; }
.login-field .password-input-wrap input { padding-right: 48px; }
.login-field-icon { position: absolute; left: 15px; z-index: 1; width: 18px; height: 18px; fill: none; stroke: #98a9c2; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; pointer-events: none; }
.login-field .password-toggle { right: 8px; z-index: 1; width: 34px; height: 34px; color: #98a9c2; }
.login-captcha-field { display: flex; flex-direction: column; gap: 8px; }
.login-captcha-row { display: flex; align-items: center; gap: 10px; }
.login-captcha-image { display: block; width: 148px; height: 50px; flex: 0 0 148px; border: 1px solid #dce3ee; border-radius: 9px; background: #f2f6ff; }
.login-captcha-refresh { display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; min-width: 50px; min-height: 50px; flex: 0 0 50px; padding: 0; border: 1px solid #dce3ee; border-radius: 9px; color: var(--color-primary-600); background: #f8fafc; cursor: pointer; }
.login-captcha-refresh:hover { border-color: var(--color-primary-100); color: var(--color-primary-700); background: var(--color-primary-50); }
.login-captcha-refresh:disabled { cursor: wait; opacity: .6; }
.login-captcha-refresh .app-icon { width: 17px; height: 17px; }
.login-captcha-input { width: 100%; height: 50px; min-height: 50px; min-width: 0; flex: 1 1 auto; padding: 10px 12px; border: 1px solid #dce3ee; border-radius: 9px; background: #f8fafc; color: #101828; font-size: 14px; letter-spacing: .12em; text-transform: uppercase; }
.login-captcha-input:focus { border-color: var(--color-primary-600); background: white; box-shadow: 0 0 0 3px rgba(21,94,239,.12); outline: none; }
.login-options { margin: -1px 0 2px !important; }
.login-options .app-checkbox-label { margin: 0 !important; color: #475467; font-size: 14px; }
.login-options input[type=checkbox] { width: 22px; height: 22px; margin: 0; border-radius: 6px; }
.login-submit { position: relative; width: 100%; min-height: 54px; justify-content: center; overflow: hidden; padding: 12px 42px; border-radius: 11px; background: linear-gradient(100deg, #2863e9, #1d4ed8); font-size: 15px; box-shadow: 0 8px 16px rgba(21,94,239,.2); }
.login-submit::before { position: absolute; top: 0; left: 0; width: 34%; height: 100%; content: ""; transform: skewX(-20deg) translateX(-65%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent); }
.login-submit span { position: absolute; right: 22px; font-size: 20px; line-height: 20px; }
.login-footer { position: absolute; right: 20px; bottom: 16px; margin: 0; color: #98a2b3; font-size: 11px; line-height: 16px; text-align: right; }
.login-footer span { margin: 0 4px; color: #c4cbd6; }
@media (max-width: 900px) {
    .app-anonymous { padding: 22px 14px; background: radial-gradient(circle at 8% 8%, rgba(96,146,255,.34), transparent 34%), radial-gradient(circle at 92% 92%, rgba(123,112,238,.3), transparent 38%), linear-gradient(145deg, #e8efff 0%, #f7f9ff 52%, #e9edff 100%); }
    .app-anonymous #main-content { padding: 0; }
    .login-shell { position: relative; width: 100%; height: auto; min-height: 0; grid-template-columns: minmax(0, 1fr); border: 1px solid rgba(208,213,221,.75); border-radius: 24px; box-shadow: 0 18px 45px rgba(37,61,115,.16); }
    .login-shell::before { position: absolute; top: 0; left: 14%; right: 14%; z-index: 2; height: 4px; border-radius: 0 0 999px 999px; content: ""; background: linear-gradient(90deg, #155eef, #7f56d9, #22b8cf); }
    .login-showcase { display: none; }
    .login-panel { width: 100%; min-height: 0; padding: 42px 26px 58px; }
    .login-panel-inner { width: min(100%, 420px); }
    .login-mobile-brand { display: flex; width: 100%; min-width: 0; margin-bottom: 34px; color: #123b87; }
    .login-mobile-brand .login-brand-logo { width: 46px; height: 46px; flex-basis: 46px; border-radius: 13px; box-shadow: 0 8px 20px rgba(21,94,239,.22); }
    .login-mobile-brand span { font-size: 16px; line-height: 21px; }
    .login-mobile-brand span { min-width: 0; }
    .login-heading { margin-bottom: 30px; }
    .login-heading h1 { font-size: 32px; line-height: 40px; }
    .login-form { gap: 18px; }
    .login-footer { right: 22px; bottom: 18px; }
}
@media (max-width: 360px) {
    .app-anonymous { padding: 14px 10px; }
    .login-panel { padding: 36px 20px 56px; }
    .login-eyebrow { font-size: 10px; }
    .login-captcha-row { flex-wrap: wrap; }
    .login-captcha-image { width: 148px; flex-basis: 148px; }
    .login-captcha-refresh { flex-basis: 50px; }
    .login-captcha-input { flex: 1 1 140px; }
}

/* Sidebar refinement */
.app-sidebar { box-shadow: 4px 0 18px rgba(16,24,40,.035); }
.app-brand { position: sticky; top: 0; z-index: 2; height: 52px; padding: 0 16px; background: var(--color-white); box-shadow: 0 1px 0 var(--color-gray-200); }
.app-brand-link { color: var(--color-gray-900); font-size: 15px; font-weight: 650; }
.app-brand-link { display: inline-flex; align-items: center; min-width: 0; gap: 8px; }
.app-brand-link::before { content: none; }
.app-brand-logo { width: 28px; height: 28px; flex: 0 0 28px; object-fit: cover; border-radius: 8px; }
.app-brand-link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-menu { padding: 12px 8px 20px; }
.app-menu > li { margin-bottom: 1px; }
.app-menu a, .app-menu-group-label { min-height: 32px; gap: 10px; padding: 3px 14px; border-radius: 8px; color: var(--color-gray-600); transition: background .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease; }
.app-menu-group-label { width: 100%; border: 0; background: transparent; font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.app-menu-admin > .app-menu-group-label { font-weight: 600; }
.app-menu a, .app-menu-group-label, .app-menu button.js-review-start { width: 100%; margin-left: 0; }
.app-menu button.js-review-start { min-height: 32px; display: flex; align-items: center; gap: 10px; padding: 3px 14px; border: 0; border-radius: 8px; color: var(--color-gray-600); background: transparent; font: inherit; font-size: 13px; text-align: left; white-space: nowrap; cursor: pointer; transition: background .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease; }
.app-menu a:hover, .app-menu button.js-review-start:hover { background: var(--color-gray-50); color: var(--color-gray-900); }
.app-menu-group-label:focus-visible { outline: 2px solid var(--color-primary-600); outline-offset: 2px; }
.app-menu a.is-active, .app-menu button.js-review-start.is-active { color: var(--color-primary-700); background: var(--color-primary-50); font-weight: 600; border-left: 3px solid var(--color-primary-600); border-radius: 0 6px 6px 0; box-shadow: none; padding-left: 11px; }
.app-menu a.is-active:hover, .app-menu button.js-review-start.is-active:hover { color: var(--color-primary-700); background: var(--color-primary-100); }
.app-menu-group.is-active > .app-menu-group-label { color: var(--color-primary-700); font-weight: 600; background: transparent !important; box-shadow: none !important; }
.app-menu-group-label:hover { background: var(--color-gray-50) !important; color: var(--color-gray-900); }
.app-menu-group.is-active > .app-menu-group-label .app-menu-chevron { color: var(--color-primary-600); }
.app-menu-group ul { max-height: 320px; overflow: hidden; padding: 1px 0 3px 31px; opacity: 1; transition: max-height .28s ease, padding-block .28s ease, opacity .2s ease; }
.app-menu-group ul a { min-height: 26px; padding: 2px 8px; color: var(--color-gray-500); font-size: 13px; }
.app-menu-group ul button.js-review-start { min-height: 26px; padding-block: 2px; }
.app-menu-group ul a, .app-menu-group ul button.js-review-start { width: calc(100% + 31px); margin-left: -31px; padding-left: 39px; border-radius: 8px; }
.app-menu-group ul a:hover, .app-menu-group ul button.js-review-start:hover { background: var(--color-gray-50); color: var(--color-gray-900); }
.app-menu-group.is-active ul a:first-child:hover { color: var(--color-gray-900); }
.app-menu-group ul a.is-active { color: var(--color-primary-700); background: var(--color-primary-50); font-weight: 600; border-left: 3px solid var(--color-primary-600); border-radius: 0 6px 6px 0; box-shadow: none; padding-left: 36px; }
.app-menu-group.is-active ul a.is-active { color: var(--color-primary-700); }
.app-menu-group ul a.is-active:hover { color: var(--color-primary-700); background: var(--color-primary-100); }
.app-menu-group ul button.js-review-start.is-active {
    color: var(--color-primary-700);
    background: var(--color-primary-50);
    font-weight: 600;
    border-left: 3px solid var(--color-primary-600);
    border-radius: 0 6px 6px 0;
    box-shadow: none;
    padding-left: 36px;
}
.app-menu-group ul button.js-review-start.is-active:hover { color: var(--color-primary-700); background: var(--color-primary-100); }
.app-menu-group ul a .app-icon { width: 16px; height: 16px; }
.app-menu .app-icon { width: 18px; height: 18px; color: currentColor; }
.app-menu-group-label .app-menu-chevron { transform: rotate(0deg); transition: transform .15s ease; }
.app-menu-group:not(.is-collapsed) > .app-menu-group-label .app-menu-chevron { transform: rotate(90deg); }
.app-menu-group.is-collapsed > ul { max-height: 0; padding-block: 0; opacity: 0; pointer-events: none; }
body.sidebar-collapsed .app-brand-logo { margin-right: 0; }

/* Dynamic catalog builder (mockup 3: palette + canvas + preview) */
.catalog-builder-page { max-width: 1800px; margin: 0 auto; }
.catalog-builder-heading { align-items: center; margin-bottom: 16px; }
.catalog-builder-heading .app-page-heading { display: block; }
.catalog-builder-heading .app-page-title { margin-bottom: 3px; }
.catalog-builder-heading .app-page-description { margin: 0; }
.catalog-builder-status { display: flex; align-items: center; gap: 18px; color: var(--color-gray-500); white-space: nowrap; }

/* Dashboard: header chỉ hiện khi có action (CTA "Bắt đầu nhập" của Nhập liệu viên); Admin/Biên mục không có action nên vẫn ẩn như cũ. */
.app-page-header.dashboard-page-header { display: flex; }
.dashboard-page-header .app-page-heading { display: block; }
.catalog-builder-header-actions { display: inline-flex; align-items: center; justify-content: flex-end; gap: 10px; margin-left: auto; }
.catalog-builder-header-actions .app-btn { min-height: 38px; white-space: nowrap; }
.catalog-draft-badge { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border: 1px solid #f4c45f; border-radius: 8px; background: #fffaeb; color: #b54708; font-weight: 600; }
.catalog-timezone-note { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.catalog-type-info-card { padding: 18px 22px 14px; margin-bottom: 16px; }
.catalog-section-title { margin-bottom: 15px; color: var(--color-gray-900); font-size: 17px; font-weight: 650; }
.catalog-type-info-grid { display: grid; grid-template-columns: minmax(190px, 1.08fr) minmax(160px, .8fr) minmax(230px, 1fr) minmax(165px, .75fr); gap: 15px 22px; align-items: end; }
.catalog-type-info-grid .app-field { margin: 0; }
.catalog-type-info-grid input { min-height: 38px; }
.catalog-sidebar-toggle-field { display: flex; flex-direction: column; gap: 7px; }
.catalog-switch, .app-form label.catalog-switch { display: inline-flex; align-items: center; width: max-content; margin: 0; color: inherit; font-weight: 400; cursor: pointer; }
.catalog-switch input, .app-form .catalog-switch input { position: absolute; width: 1px; height: 1px; min-height: 1px; padding: 0; border: 0; opacity: 0; pointer-events: none; }
.catalog-switch-track { position: relative; display: inline-block; width: 42px; height: 24px; border-radius: 999px; background: var(--color-gray-300); transition: background .15s ease; }
.catalog-switch-track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(16,24,40,.25); transition: transform .15s ease; }
.catalog-switch input:checked ~ .catalog-switch-track { background: var(--color-primary-600); }
.catalog-switch input:checked ~ .catalog-switch-track::after { transform: translateX(18px); }
.catalog-switch input:focus-visible + .catalog-switch-track { outline: 2px solid var(--color-primary-600); outline-offset: 2px; }
.catalog-boolean-value { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; }
.catalog-boolean-value .app-icon { width: 16px; height: 16px; }
.catalog-boolean-value--true { color: var(--color-success-600); background: var(--color-success-50); }
.catalog-boolean-value--false { color: var(--color-danger-600); background: var(--color-danger-50); }
.catalog-type-meta-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 13px; padding-top: 12px; border-top: 1px solid var(--color-gray-200); }
.catalog-active-toggle { display: inline-flex; align-items: center; gap: 7px; color: var(--color-gray-600); font-size: 13px; cursor: pointer; }
.catalog-form-hint { color: var(--color-gray-500); font-size: 12px; }
.catalog-required { color: var(--color-danger-600); }
.catalog-builder-layout { display: grid; grid-template-columns: 210px minmax(520px, 1fr) minmax(310px, 360px); gap: 14px; align-items: stretch; min-height: 680px; }
.catalog-palette-panel, .catalog-canvas-panel, .catalog-preview-panel { position: relative; min-width: 0; border: 1px solid var(--color-gray-200); border-radius: 9px; background: var(--color-white); box-shadow: var(--shadow-sm); }
.catalog-palette-panel { display: flex; flex-direction: column; padding: 16px; }
.catalog-canvas-panel { display: flex; flex-direction: column; padding: 16px 18px 12px; overflow: hidden; }
.catalog-preview-panel { display: flex; flex-direction: column; padding: 16px; background: linear-gradient(180deg, #f5ffff 0, #eefafa 100%); }
.catalog-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 28px; color: var(--color-gray-900); }
.catalog-panel-heading strong { font-size: 16px; font-weight: 650; }
.catalog-panel-heading > div { display: inline-flex; align-items: center; gap: 8px; }
.catalog-panel-icon { display: inline-flex; align-items: center; justify-content: center; width: 25px; height: 25px; border-radius: 6px; background: var(--color-primary-600); color: #fff; font-size: 20px; line-height: 1; }
.catalog-collapse-button, .catalog-property-close { border: 0; background: transparent; color: var(--color-gray-500); font-size: 20px; cursor: pointer; }
.catalog-panel-hint { margin: 10px 0 13px; color: var(--color-gray-500); font-size: 12px; line-height: 1.45; }
.catalog-palette-items { display: flex; flex-direction: column; gap: 8px; }
.catalog-palette-section { margin-bottom: 14px; }
.catalog-palette-section-heading { margin: 0 0 7px; color: var(--color-gray-600); font-size: 11px; font-weight: 650; }
.catalog-palette-section-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0; border: 0; background: transparent; color: var(--color-gray-600); cursor: pointer; text-align: left; }
.catalog-palette-section-chevron { display: inline-block; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translate(-1px, -1px); transition: transform .2s ease; }
.catalog-palette-section.is-collapsed .catalog-palette-section-chevron { transform: rotate(-45deg) translate(-1px, -1px); }
.catalog-palette-section.is-collapsed .catalog-palette-items { display: none; }
.catalog-system-palette-item.is-disabled { opacity: 1; cursor: not-allowed; background: #fafbff; border-color: #e3e7f0; color: var(--color-gray-400); }
.catalog-palette-item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 43px; padding: 8px 10px; border: 1px solid var(--color-gray-300); border-radius: 7px; background: #fff; color: var(--color-gray-700); text-align: left; cursor: grab; transition: border-color .12s ease, background .12s ease, opacity .12s ease; }
.catalog-palette-item:hover { border-color: var(--color-primary-600); background: var(--color-primary-50); }
.catalog-palette-item:active { cursor: grabbing; }
.catalog-palette-item.is-disabled { opacity: .45; cursor: not-allowed; }
.catalog-palette-count { margin-left: auto; color: var(--color-gray-500); font-size: 10px; white-space: nowrap; }
.catalog-palette-item.is-disabled .catalog-palette-count { color: var(--color-danger-600); }
.catalog-palette-glyph { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 1px solid var(--color-gray-200); border-radius: 5px; color: var(--color-primary-600); font-size: 12px; font-weight: 700; white-space: nowrap; }
.catalog-slot-meter { display: flex; align-items: center; gap: 6px; margin-top: auto; padding: 10px 9px; border: 1px solid var(--color-primary-100); border-radius: 7px; background: var(--color-primary-50); color: var(--color-gray-600); font-size: 12px; }
.catalog-slot-meter strong { color: var(--color-primary-700); font-size: 13px; }
.catalog-slot-meter-icon { color: var(--color-primary-600); font-size: 19px; line-height: 1; }
.catalog-palette-panel.is-collapsed { width: 66px; padding-inline: 10px; }
.catalog-palette-panel.is-collapsed .catalog-panel-heading strong, .catalog-palette-panel.is-collapsed .catalog-panel-hint, .catalog-palette-panel.is-collapsed .catalog-palette-item span:not(.catalog-palette-glyph), .catalog-palette-panel.is-collapsed .catalog-palette-count, .catalog-palette-panel.is-collapsed .catalog-slot-meter strong, .catalog-palette-panel.is-collapsed .catalog-slot-meter > span:last-child { display: none; }
.catalog-palette-panel.is-collapsed .catalog-palette-item { justify-content: center; padding-inline: 4px; }
.catalog-palette-panel.is-collapsed .catalog-panel-heading > div { display: none; }
.catalog-palette-panel.is-collapsed .catalog-collapse-button { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; min-width: 32px; min-height: 32px; border: 1px solid var(--color-gray-300); border-radius: 7px; background: var(--color-gray-50); color: var(--color-gray-600); }
.catalog-palette-panel.is-collapsed .catalog-collapse-button:hover { border-color: var(--color-primary-300); background: var(--color-primary-50); color: var(--color-primary-600); }
.catalog-palette-panel.is-collapsed .catalog-palette-items { margin-top: 10px; }
.catalog-subheading { margin-left: 8px; color: var(--color-gray-500); font-size: 12px; font-weight: 400; }
.catalog-guide-button { min-height: 32px; padding: 6px 10px; font-size: 12px; }
.catalog-canvas-grid-labels { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0; margin: 15px 8px 5px; color: var(--color-gray-500); font-size: 11px; text-align: center; }
.catalog-canvas-dropzone { position: relative; flex: 1; min-height: 480px; padding: 7px; border: 1px solid var(--color-gray-200); border-radius: 6px; background-image: linear-gradient(to right, rgba(208,213,221,.35) 1px, transparent 1px); background-size: calc(100% / 12) 100%; }
.catalog-canvas-dropzone.is-drop-target { border-color: var(--color-primary-600); background-color: var(--color-primary-50); }
.catalog-canvas-fields { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 10px; align-content: start; min-height: 100%; }
.catalog-field-card { position: relative; display: flex; align-items: center; gap: 8px; grid-column: span var(--catalog-col-span); min-width: 0; min-height: 65px; padding: 9px 10px; border: 1px solid #b6ccf8; border-radius: 7px; background: #f7faff; color: var(--color-gray-700); cursor: pointer; transition: box-shadow .12s ease, border-color .12s ease, background .12s ease; }
.catalog-field-card:hover { border-color: var(--color-primary-600); box-shadow: 0 2px 7px rgba(21,94,239,.11); }
.catalog-field-card.is-selected { border-color: var(--color-primary-600); box-shadow: 0 0 0 2px rgba(21,94,239,.14); }
.catalog-field-card.is-system { background: #fff; border-color: #cfc5f4; }
.catalog-field-grip { flex: 0 0 21px; padding: 0; border: 0; background: transparent; color: var(--color-gray-400); font-size: 19px; letter-spacing: -3px; line-height: 1; cursor: grab; }
.catalog-field-grip:active { cursor: grabbing; }
.catalog-field-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 32px; width: 32px; height: 32px; border: 1px solid var(--color-gray-200); border-radius: 6px; background: #fff; color: var(--color-primary-600); font-size: 11px; font-weight: 700; }
.catalog-field-content { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.catalog-field-content strong { overflow: hidden; color: var(--color-gray-900); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.catalog-field-content small { overflow: hidden; color: var(--color-gray-500); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.catalog-field-required { color: var(--color-danger-600); }
.catalog-field-system-badge { margin-left: auto; padding: 3px 6px; border-radius: 5px; background: #f4f3ff; color: var(--color-review-600); font-size: 10px; white-space: nowrap; }
.catalog-field-colspan { margin-left: auto; padding: 3px 6px; border-radius: 5px; background: var(--color-primary-100); color: var(--color-primary-700); font-size: 10px; white-space: nowrap; }
.catalog-field-settings, .catalog-field-delete { flex: 0 0 23px; padding: 2px; border: 0; background: transparent; color: var(--color-gray-500); cursor: pointer; font-size: 15px; }
.catalog-field-settings:hover { color: var(--color-primary-600); }
.catalog-field-delete:hover { color: var(--color-danger-600); }
.catalog-field-card.is-system { border-color: #c6d8fb; background: #eef4ff; }
.catalog-field-card.is-required:not(.is-system) { border-color: #c9e5d2; background: #eef8f1; }
.catalog-field-card.is-optional:not(.is-system) { border-color: #ddd0fa; background: #f6f0ff; }
.catalog-field-card.field-type-1 .catalog-field-icon { border-color: #c6d8fb; background: #f7faff; color: #2563eb; font-family: Arial, sans-serif; font-size: 9px; font-weight: 700; letter-spacing: -.2px; }
.catalog-field-card.field-type-2 .catalog-field-icon { border-color: #bfe3ca; background: #f1fbf4; color: #16803c; }
.catalog-field-card.field-type-3 .catalog-field-icon { border-color: #d9caf9; background: #fbf8ff; color: #6941c6; }
.catalog-field-card.field-type-4 .catalog-field-icon { border-color: #f5d4a8; background: #fff8ed; color: #d97706; font-size: 18px; }
.catalog-field-card.field-type-5 .catalog-field-icon { border-color: #bde7e5; background: #effafa; color: #0e9f9a; }
.catalog-field-card.field-type-6 { align-items: flex-start; flex-wrap: wrap; min-height: 104px; padding-bottom: 8px; border-color: #b9d8f3; background: #f7fbff; }
.catalog-field-card.field-type-6 .catalog-field-content { flex: 1 1 auto; }
.catalog-field-card.field-type-6 .catalog-field-icon { border-color: #b9d8f3; background: #eef7ff; color: #1769aa; }
.catalog-field-table-preview { display: grid; flex: 0 0 calc(100% - 31px); width: calc(100% - 31px); margin-left: 31px; overflow: hidden; border: 1px solid #c9d8e8; border-radius: 5px; background: #fff; color: #667085; font-size: 10px; }
.catalog-field-table-row { display: grid; grid-template-columns: 36px repeat(var(--catalog-table-preview-cols), minmax(72px, 1fr)); min-width: 0; }
.catalog-field-table-row > span { min-width: 0; overflow: hidden; padding: 4px 6px; border-right: 1px solid #e4eaf1; border-top: 1px solid #e4eaf1; text-overflow: ellipsis; white-space: nowrap; }
.catalog-field-table-row > span:first-child { border-top: 0; }
.catalog-field-table-row > span:last-child { border-right: 0; }
.catalog-field-table-row.is-header > span { border-top: 0; background: #eef4fa; color: #344054; font-weight: 600; }
.catalog-field-table-row.is-header > span:first-child { color: #667085; }
.catalog-field-table-row:not(.is-header) > span { border-top: 1px solid #e4eaf1; }
.catalog-field-table-row .is-empty { color: #98a2b3; font-style: italic; }
.catalog-palette-item[data-catalog-field-type="1"] .catalog-palette-glyph { border-color: #c6d8fb; background: #f7faff; color: #2563eb; font-family: Arial, sans-serif; font-size: 9px; font-weight: 700; letter-spacing: -.2px; }
.catalog-palette-item[data-catalog-field-type="2"] .catalog-palette-glyph { border-color: #bfe3ca; background: #f1fbf4; color: #16803c; }
.catalog-palette-item[data-catalog-field-type="3"] .catalog-palette-glyph { border-color: #d9caf9; background: #fbf8ff; color: #6941c6; }
.catalog-palette-item[data-catalog-field-type="4"] .catalog-palette-glyph { border-color: #f5d4a8; background: #fff8ed; color: #d97706; }
.catalog-palette-item[data-catalog-field-type="5"] .catalog-palette-glyph { border-color: #bde7e5; background: #effafa; color: #0e9f9a; }
.catalog-palette-item::before { content: '⋮⋮'; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 12px; width: 12px; color: var(--color-gray-400); font-size: 15px; letter-spacing: -3px; line-height: 1; cursor: grab; }
.catalog-palette-item:active::before { cursor: grabbing; }
.document-type-builder-page .catalog-palette-panel .catalog-panel-icon,
.document-type-builder-page .catalog-palette-panel .catalog-collapse-button { display: none; }
.document-type-builder-page .catalog-palette-panel .catalog-panel-heading > div { display: block; }
.document-type-builder-page .catalog-palette-panel .catalog-panel-heading strong { font-size: 0; }
.document-type-builder-page .catalog-palette-panel .catalog-panel-heading strong::after { content: 'Bảng điều khiển'; font-size: 16px; }
.document-type-builder-page .catalog-palette-panel .catalog-panel-hint { font-size: 0; }
.document-type-builder-page .catalog-palette-panel .catalog-panel-hint::after { content: 'Kéo thả để thêm trường'; font-size: 12px; }
.catalog-field-card.is-system { border-color: #b9d0fb; background: #eaf2ff; }
.catalog-palette-item { min-height: 44px; padding: 8px 10px; }
.catalog-palette-glyph { width: 32px; height: 32px; }
.catalog-field-placeholder { grid-column: span 12; min-height: 65px; border: 1px dashed var(--color-primary-600); border-radius: 7px; background: var(--color-primary-50); }
.catalog-empty-canvas { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 210px; border: 1px dashed var(--color-primary-600); border-radius: 7px; color: var(--color-primary-600); text-align: center; }
.catalog-empty-canvas > span { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin-bottom: 6px; border: 2px solid currentColor; border-radius: 50%; font-size: 24px; }
.catalog-empty-canvas strong { font-size: 14px; }
.catalog-empty-canvas small { margin-top: 3px; color: var(--color-gray-500); font-size: 12px; }
.catalog-canvas-hint { margin: 10px 0 0; color: var(--color-gray-500); font-size: 11px; }
.catalog-property-drawer { position: absolute; z-index: 5; right: 18px; bottom: 43px; width: min(365px, calc(100% - 36px)); max-height: calc(100% - 90px); overflow-y: auto; border: 1px solid var(--color-gray-300); border-radius: 8px; background: #fff; box-shadow: 0 12px 28px rgba(16,24,40,.18); }
.catalog-property-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 13px 15px 11px; border-bottom: 1px solid var(--color-gray-200); }
.catalog-property-header div { display: flex; flex-direction: column; gap: 2px; }
.catalog-property-header strong { color: var(--color-gray-900); font-size: 14px; }
.catalog-property-header small { color: var(--color-gray-500); font-size: 11px; }
.catalog-property-body { display: flex; flex-direction: column; gap: 11px; padding: 14px 15px 15px; }
.catalog-property-body .app-field { margin: 0; }
.catalog-property-body .app-field label { margin-bottom: 4px; font-size: 12px; }
.catalog-property-body input, .catalog-property-body select, .catalog-property-body textarea { min-height: 33px; padding: 6px 8px; font-size: 12px; }
.catalog-property-row { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.catalog-property-switches { display: flex; flex-direction: column; gap: 7px; padding: 9px; border-radius: 6px; background: var(--color-gray-50); color: var(--color-gray-600); font-size: 12px; }
.catalog-property-switches label { display: inline-flex; align-items: center; gap: 7px; }
.catalog-options-field .catalog-form-hint { margin-left: 4px; font-weight: 400; }
.catalog-property-delete { min-height: 34px; border: 1px solid var(--color-danger-500); border-radius: 6px; background: #fff; color: var(--color-danger-600); cursor: pointer; }
.catalog-property-delete:hover { background: var(--color-danger-50); }
.catalog-preview-live { color: var(--color-success-600); font-size: 11px; white-space: nowrap; }
.catalog-preview-form { flex: 1; margin-top: 13px; padding: 15px; border: 1px solid #bde5e5; border-radius: 7px; background: rgba(255,255,255,.88); }
.catalog-preview-title { display: flex; flex-direction: column; gap: 2px; margin-bottom: 16px; padding-bottom: 11px; border-bottom: 1px solid var(--color-gray-200); }
.catalog-preview-title strong { color: var(--color-gray-900); font-size: 15px; }
.catalog-preview-title span { color: var(--color-gray-500); font-size: 11px; }
.catalog-preview-field { margin-bottom: 12px; }
.catalog-preview-field label { display: block; margin-bottom: 5px; color: var(--color-gray-700); font-size: 12px; font-weight: 600; }
.catalog-preview-field input, .catalog-preview-field select, .catalog-preview-field textarea { width: 100%; min-height: 34px; padding: 7px 9px; border: 1px solid var(--color-gray-300); border-radius: 6px; background: #fff; color: var(--color-gray-500); font-size: 12px; }
.catalog-preview-field textarea { resize: vertical; }
.catalog-preview-switch { display: inline-flex; align-items: center; gap: 7px; min-height: 24px; color: var(--color-gray-600); font-size: 12px; }
.catalog-preview-switch input { position: absolute; opacity: 0; pointer-events: none; }
.catalog-preview-switch input:checked + .catalog-switch-track { background: #12b8b0; }
.catalog-preview-actions { display: flex; justify-content: flex-end; gap: 7px; margin-top: 18px; }
.catalog-preview-actions .app-btn { min-height: 30px; padding: 5px 9px; font-size: 11px; }
.catalog-preview-footnote { margin-top: 9px; color: var(--color-gray-500); font-size: 11px; }
.catalog-field-payload { display: none; }
.catalog-save-button { min-width: 165px; }
@media (max-width: 1450px) {
    .catalog-builder-layout { grid-template-columns: 190px minmax(470px, 1fr) 315px; }
    .catalog-type-info-grid { gap: 13px; }
    .catalog-field-system-badge { display: none; }
}
@media (max-width: 1180px) {
    .catalog-builder-status { display: none; }
    .catalog-builder-layout { grid-template-columns: 180px minmax(0, 1fr); }
    .catalog-preview-panel { grid-column: 1 / -1; min-height: 450px; }
    .catalog-type-info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .catalog-type-description-field, .catalog-sidebar-toggle-field { grid-column: span 1; }
}

/* Dynamic catalog builder refresh: compact metadata, two-zone canvas and modal tools */
.catalog-builder-page { max-width: 1800px; margin: 0 auto; }
.catalog-builder-heading { align-items: center; margin-bottom: 16px; }
.catalog-builder-heading .app-page-heading { display: block; }
.catalog-builder-heading .app-page-description { margin: 0; }
.catalog-builder-status { display: flex; align-items: center; gap: 18px; color: var(--color-gray-500); white-space: nowrap; }
.catalog-draft-badge { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border: 1px solid #f4c45f; border-radius: 8px; background: #fffaeb; color: #b54708; font-size: 12px; font-weight: 600; }
.catalog-timezone-note { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; }
.catalog-type-info-card { padding: 18px 22px 20px; margin-bottom: 16px; }
.catalog-section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 16px; }
.catalog-section-heading h2 { margin: 2px 0 0; color: var(--color-gray-900); font-size: 17px; line-height: 22px; font-weight: 650; }
.catalog-section-kicker { color: var(--color-primary-600); font-size: 11px; font-weight: 600; letter-spacing: .02em; }
.catalog-section-note { color: var(--color-gray-500); font-size: 12px; }
.catalog-type-info-grid { display: grid; grid-template-columns: minmax(190px, 1.2fr) minmax(155px, .85fr) minmax(230px, 1.45fr) minmax(150px, .85fr) minmax(165px, .9fr); gap: 14px 18px; align-items: end; }
.catalog-type-info-grid .app-field { min-width: 0; margin: 0; }
.catalog-type-info-grid .app-field > label { margin-bottom: 6px; }
.catalog-type-info-grid input, .catalog-type-info-grid .select2-container .select2-selection--single { min-height: 38px; }
.catalog-type-info-grid input { width: 100%; }
.catalog-type-info-grid .select2-container { width: 100% !important; }
.catalog-builder-layout { display: grid; grid-template-columns: 218px minmax(0, 1fr); gap: 14px; align-items: stretch; min-height: 650px; }
.catalog-palette-panel, .catalog-canvas-panel { position: relative; min-width: 0; border: 1px solid var(--color-gray-200); border-radius: 9px; background: var(--color-white); box-shadow: var(--shadow-sm); }
.catalog-palette-panel { display: flex; flex-direction: column; padding: 16px; }
.catalog-canvas-panel { display: flex; flex-direction: column; padding: 16px 18px 14px; overflow: hidden; }
.catalog-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 30px; color: var(--color-gray-900); }
.catalog-panel-heading > div { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.catalog-panel-heading strong { font-size: 16px; font-weight: 650; }
.catalog-panel-icon { display: inline-flex; align-items: center; justify-content: center; width: 25px; height: 25px; border-radius: 6px; background: var(--color-primary-600); color: #fff; font-size: 20px; line-height: 1; }
.catalog-collapse-button { border: 0; background: transparent; color: var(--color-gray-500); font-size: 20px; line-height: 1; cursor: pointer; }
.catalog-panel-hint { margin: 10px 0 14px; color: var(--color-gray-500); font-size: 12px; line-height: 1.45; }
.catalog-palette-items { display: flex; flex-direction: column; gap: 8px; }
.catalog-palette-item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 8px 10px; border: 1px solid var(--color-gray-300); border-radius: 7px; background: #fff; color: var(--color-gray-700); text-align: left; cursor: grab; transition: border-color .12s ease, background .12s ease, opacity .12s ease, box-shadow .12s ease; }
.catalog-palette-item:hover { border-color: var(--color-primary-600); background: var(--color-primary-50); box-shadow: 0 2px 6px rgba(21,94,239,.08); }
.catalog-palette-item:active { cursor: grabbing; }
.catalog-palette-item.is-disabled { opacity: .45; cursor: not-allowed; }
.catalog-palette-count { margin-left: auto; color: var(--color-gray-500); font-size: 10px; white-space: nowrap; }
.catalog-palette-item.is-disabled .catalog-palette-count { color: var(--color-danger-600); }
.catalog-palette-glyph { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 1px solid var(--color-gray-200); border-radius: 6px; color: var(--color-primary-600); font-size: 11px; font-weight: 700; white-space: nowrap; }
.catalog-slot-meter { display: flex; align-items: center; gap: 6px; margin-top: auto; padding: 10px 9px; border: 1px solid var(--color-primary-100); border-radius: 7px; background: var(--color-primary-50); color: var(--color-gray-600); font-size: 12px; }
.catalog-slot-meter strong { color: var(--color-primary-700); font-size: 13px; }
.catalog-slot-meter-icon { color: var(--color-primary-600); font-size: 19px; line-height: 1; }
.catalog-palette-panel.is-collapsed { width: 66px; padding-inline: 10px; }
.catalog-palette-panel.is-collapsed .catalog-panel-heading strong, .catalog-palette-panel.is-collapsed .catalog-panel-hint, .catalog-palette-panel.is-collapsed .catalog-palette-item span:not(.catalog-palette-glyph), .catalog-palette-panel.is-collapsed .catalog-palette-count, .catalog-palette-panel.is-collapsed .catalog-slot-meter strong, .catalog-palette-panel.is-collapsed .catalog-slot-meter > span:last-child { display: none; }
.catalog-palette-panel.is-collapsed .catalog-palette-item { justify-content: center; padding-inline: 4px; }
.catalog-subheading { margin-left: 8px; color: var(--color-gray-500); font-size: 12px; font-weight: 400; }
.catalog-canvas-actions { display: inline-flex; align-items: center; justify-content: flex-end; gap: 12px; }
.catalog-canvas-actions .app-btn { width: fit-content; min-width: fit-content; white-space: nowrap; }
.catalog-preview-button { min-height: 34px; padding: 6px 12px; font-size: 12px; }
.catalog-canvas-grid-labels { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0; margin: 15px 8px 5px; color: var(--color-gray-500); font-size: 11px; text-align: center; }
.catalog-canvas-dropzone { position: relative; flex: 1; min-height: 480px; padding: 7px; border: 1px solid var(--color-gray-200); border-radius: 7px; background-image: linear-gradient(to right, rgba(208,213,221,.35) 1px, transparent 1px); background-size: calc(100% / 12) 100%; transition: border-color .12s ease, background-color .12s ease; }
.catalog-canvas-dropzone.is-drop-target { border-color: var(--color-primary-600); background-color: var(--color-primary-50); }
.catalog-canvas-fields { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 10px; align-content: start; min-height: 100%; }
.catalog-field-card { position: relative; display: flex; align-items: center; gap: 8px; grid-column: span var(--catalog-col-span); min-width: 0; min-height: 65px; padding: 9px 10px; border: 1px solid #b6ccf8; border-radius: 7px; background: #f7faff; color: var(--color-gray-700); cursor: default; transition: box-shadow .12s ease, border-color .12s ease, background .12s ease, opacity .12s ease; }
.catalog-field-card:hover { border-color: var(--color-primary-600); box-shadow: 0 2px 7px rgba(21,94,239,.11); }
.catalog-field-card.is-system { background: #fff; border-color: #cfc5f4; }
.catalog-field-card.is-dragging { opacity: .35; }
.catalog-field-grip { flex: 0 0 21px; padding: 0; border: 0; background: transparent; color: var(--color-gray-400); font-size: 19px; letter-spacing: -3px; line-height: 1; cursor: grab; }
.catalog-field-grip:active { cursor: grabbing; }
.catalog-field-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 32px; width: 32px; height: 32px; border: 1px solid var(--color-gray-200); border-radius: 6px; background: #fff; color: var(--color-primary-600); font-size: 11px; font-weight: 700; }
.catalog-field-content { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.catalog-field-content strong { overflow: hidden; color: var(--color-gray-900); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.catalog-field-content small { overflow: hidden; color: var(--color-gray-500); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.catalog-field-required { color: var(--color-danger-600); }
.catalog-field-system-badge, .catalog-field-colspan { margin-left: auto; padding: 3px 6px; border-radius: 5px; font-size: 10px; white-space: nowrap; }
.catalog-field-system-badge { background: #f4f3ff; color: var(--color-review-600); }
.catalog-field-colspan { background: var(--color-primary-100); color: var(--color-primary-700); }
.catalog-field-resize-handle { position: absolute; top: 8px; right: -5px; bottom: 8px; z-index: 2; width: 10px; border-right: 2px solid transparent; cursor: col-resize; }
.catalog-field-resize-handle:hover, .catalog-field-card.is-resizing .catalog-field-resize-handle { border-right-color: var(--color-primary-600); }
.catalog-field-resize-handle:focus-visible { outline: 2px solid var(--color-primary-600); outline-offset: 2px; }
.catalog-field-card.is-resizing { border-color: var(--color-primary-600); box-shadow: 0 2px 8px rgba(21,94,239,.16); }
.catalog-field-settings, .catalog-field-delete { flex: 0 0 23px; padding: 2px; border: 0; background: transparent; color: var(--color-gray-500); cursor: pointer; font-size: 15px; }
.catalog-field-settings:hover { color: var(--color-primary-600); }
.catalog-field-delete:hover { color: var(--color-danger-600); }
.catalog-field-placeholder { grid-column: span var(--catalog-col-span); min-height: 65px; border: 1px dashed var(--color-primary-600); border-radius: 7px; background: rgba(21,94,239,.08); }
.catalog-empty-canvas { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 210px; border: 1px dashed var(--color-primary-600); border-radius: 7px; color: var(--color-primary-600); text-align: center; }
.catalog-empty-canvas > span { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin-bottom: 6px; border: 2px solid currentColor; border-radius: 50%; font-size: 24px; }
.catalog-empty-canvas strong { font-size: 14px; }
.catalog-empty-canvas small { margin-top: 3px; color: var(--color-gray-500); font-size: 12px; }
.catalog-canvas-hint { margin: 10px 0 0; color: var(--color-gray-500); font-size: 11px; }
.catalog-save-button { min-width: 165px; }
.catalog-field-payload { display: none; }
.catalog-builder-header-actions .app-btn { width: auto; min-width: 0; min-height: 38px; padding: 8px 16px; font-size: 14px; line-height: 20px; }
.catalog-builder-header-actions .catalog-save-button { min-width: 0; }
.catalog-drag-helper { z-index: 10000; width: min(380px, 70vw); box-shadow: 0 12px 28px rgba(16,24,40,.18); pointer-events: none; }

/* Field property dialog */
.catalog-property-dialog { overflow: visible; }
.catalog-property-body { display: flex; flex-direction: column; gap: 10px; padding: 2px 2px 6px; }
.catalog-property-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin: -2px -2px 0; padding: 0 0 12px; border-bottom: 1px solid var(--color-gray-200); }
.catalog-property-header > div { display: flex; flex-direction: column; gap: 3px; }
.catalog-property-header strong { color: var(--color-gray-900); font-size: 15px; }
.catalog-property-header small { color: var(--color-gray-500); font-size: 11px; }
.catalog-property-intro { display: flex; align-items: center; gap: 10px; margin-bottom: 13px; }
.catalog-property-intro > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.catalog-property-intro strong { overflow: hidden; color: var(--color-gray-900); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.catalog-property-intro small { color: var(--color-gray-500); font-size: 11px; }
.catalog-property-icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid var(--color-primary-100); border-radius: 7px; background: var(--color-primary-50); color: var(--color-primary-600); font-size: 11px; font-weight: 700; }
.catalog-property-section { padding: 10px 12px; border: 1px solid var(--color-gray-200); border-radius: 8px; background: #fff; }
.catalog-property-section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.catalog-property-section-heading strong { color: var(--color-gray-900); font-size: 12px; font-weight: 650; }
.catalog-property-section-heading small { color: var(--color-gray-500); font-size: 11px; }
.catalog-property-section-title { margin: 0 0 11px; color: var(--color-gray-900); font-size: 12px; font-weight: 650; }
.catalog-property-section-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.catalog-property-section-pair .catalog-property-stack { grid-template-columns: 1fr; }
.catalog-property-body .app-field { min-width: 0; margin: 0; }
.catalog-property-body .app-field > label { margin-bottom: 6px; font-size: 12px; }
.catalog-property-body input, .catalog-property-body select, .catalog-property-body textarea { width: 100%; }
.catalog-property-body input[type="checkbox"] { width: auto; }
.catalog-property-body input:disabled, .catalog-property-body select:disabled, .catalog-property-body textarea:disabled { border-color: var(--color-gray-200); background: var(--color-gray-100, #f2f4f7); color: var(--color-gray-500); cursor: not-allowed; opacity: 1; }
.catalog-property-body input[readonly], .catalog-property-body textarea[readonly] { border-color: var(--color-gray-200); background: var(--color-gray-50); color: var(--color-gray-600); cursor: default; }
.catalog-property-body .catalog-check-card:has(input:disabled) { border-color: var(--color-gray-200); background: var(--color-gray-100, #f2f4f7); color: var(--color-gray-500); cursor: not-allowed; opacity: .85; }
.catalog-property-body .catalog-check-card input:disabled { cursor: not-allowed; }
.catalog-property-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
.catalog-property-section > .catalog-property-grid { align-items: end; }
.catalog-property-stack { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; align-items: end; }
.catalog-property-stack .app-field { flex: 0 0 auto; }
.catalog-property-grid-wide { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.catalog-property-checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 12px; }
.catalog-document-source-section, .catalog-options-section { grid-column: 1 / -1; width: 100%; box-sizing: border-box; }
.catalog-table-config-section { grid-column: 1 / -1; width: 100%; box-sizing: border-box; }
.catalog-document-source-grid { grid-template-columns: 1fr; }
.catalog-document-source-grid .app-field { grid-column: 1 / -1; }
.catalog-document-source-grid .select2-container { width: 100% !important; }
.catalog-document-source-grid--with-catalog { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.catalog-document-source-grid--with-catalog .app-field { grid-column: auto; }
.catalog-property-checks label { display: inline-flex; align-items: center; gap: 7px; color: var(--color-gray-600); font-size: 12px; }
.catalog-check-card { display: flex !important; align-items: flex-start !important; gap: 8px; min-height: 42px; padding: 8px 9px; border: 1px solid var(--color-gray-200); border-radius: 7px; background: var(--color-gray-50); cursor: pointer; }
.catalog-check-card input { flex: 0 0 auto; margin-top: 2px; }
.catalog-check-card span { display: flex; flex-direction: column; gap: 2px; }
.catalog-check-card strong { color: var(--color-gray-700); font-size: 12px; font-weight: 600; }
.catalog-check-card small { color: var(--color-gray-500); font-size: 10px; line-height: 1.35; }
.catalog-property-readonly { padding: 9px 10px; border-radius: 6px; background: var(--color-gray-50); color: var(--color-gray-600); font-size: 12px; }
.catalog-property-readonly span, .catalog-property-readonly strong { display: block; }
.catalog-property-readonly span { margin-bottom: 3px; color: var(--color-gray-500); font-size: 11px; }
.catalog-property-readonly strong { color: var(--color-gray-700); font-size: 12px; font-weight: 600; }
.catalog-property-help { margin: -4px 0 0; color: var(--color-gray-500); font-size: 11px; line-height: 1.45; }
.catalog-options-table { width: 100%; border-collapse: collapse; }
.catalog-options-table th, .catalog-options-table td { padding: 5px 4px; border-bottom: 1px solid var(--color-gray-200); text-align: left; vertical-align: middle; }
.catalog-options-table th { color: var(--color-gray-500); font-size: 11px; font-weight: 600; }
.catalog-options-table td input { min-height: 33px; padding: 6px 8px; }

.catalog-table-config-help { margin: 0 0 14px; color: var(--color-gray-600); font-size: 13px; }
.catalog-table-config-list { display: grid; gap: 8px; max-height: 420px; overflow-y: auto; padding: 2px; }
.catalog-table-config-row { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 8px 10px; border: 1px solid var(--color-gray-200); border-radius: 8px; background: var(--color-white); }
.catalog-table-config-row.is-hidden-column { background: var(--color-gray-50); color: var(--color-gray-500); }
.catalog-table-config-grip { color: var(--color-gray-400); cursor: grab; font-size: 18px; letter-spacing: -4px; user-select: none; }
.catalog-table-config-label { display: flex; align-items: center; gap: 8px; flex: 1; cursor: pointer; }
.catalog-table-config-label small { margin-left: auto; color: var(--color-gray-500); font-size: 11px; }
.catalog-table-config-placeholder { height: 46px; border: 1px dashed var(--color-primary-400); border-radius: 8px; background: var(--color-primary-50); }
.catalog-option-remove { width: 28px; min-height: 30px; padding: 3px; border: 0; background: transparent; color: var(--color-danger-600); cursor: pointer; }
.catalog-option-add { gap: 4px; min-height: 30px; padding: 5px 10px; margin-top: 9px; font-size: 12px; font-weight: 650; }
.catalog-option-add .app-icon { width: 14px; height: 14px; }
.catalog-property-delete { width: 100%; min-height: 35px; border: 1px solid var(--color-danger-500); border-radius: 6px; background: #fff; color: var(--color-danger-600); cursor: pointer; }
.catalog-property-delete:hover { background: var(--color-danger-50); }
.ui-dialog.catalog-property-dialog-wrapper {
    display: flex;
    position: fixed !important;
    top: 16px !important;
    left: 50% !important;
    width: min(760px, calc(100vw - 32px)) !important;
    height: min(760px, calc(100vh - 80px)) !important;
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 80px) !important;
    margin: 0;
    transform: translateX(-50%);
    flex-direction: column;
}
.ui-dialog.catalog-property-dialog-wrapper .ui-dialog-titlebar { flex: 0 0 auto; }
.ui-dialog.catalog-property-dialog-wrapper .ui-dialog-content {
    display: flex;
    width: auto !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0;
    flex: 1 1 auto;
    flex-direction: column;
    overflow: hidden;
    box-sizing: border-box;
    padding: 12px 14px 5px;
}
.catalog-property-dialog-wrapper .catalog-property-body {
    min-width: 0;
    min-height: 0;
    flex: 1 1 auto;
    overflow-x: hidden;
    overflow-y: auto;
    padding-right: 6px;
}
.ui-dialog.catalog-property-dialog-wrapper .ui-dialog-buttonpane {
    display: block !important;
    flex: 0 0 auto;
    min-height: 36px;
    margin: 0;
    padding: 10px 14px 8px;
    border-top: 1px solid var(--color-gray-200);
    background: #fff;
}
.ui-dialog.catalog-property-dialog-wrapper .ui-dialog-buttonset {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    float: none;
}
.ui-dialog.catalog-preview-dialog-wrapper .ui-dialog-content { padding: 18px 20px 8px; }

.catalog-table-config-list {
    gap: 6px;
    min-height: 0;
    max-height: calc(100vh - 220px);
    overflow-x: hidden;
    overflow-y: auto;
    padding: 2px;
}

.ui-dialog:has(.catalog-table-config-form) {
    width: min(540px, calc(100vw - 32px)) !important;
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 32px);
}
.ui-dialog:has(.catalog-table-config-form) .ui-dialog-titlebar {
    padding: 12px 48px 12px 16px;
}
.ui-dialog:has(.catalog-table-config-form) .ui-dialog-content {
    display: flex;
    max-height: calc(100vh - 100px);
    min-height: 0;
    flex-direction: column;
    overflow: hidden;
    padding: 14px 16px 8px;
}
.ui-dialog:has(.catalog-table-config-form) .catalog-table-config-form {
    display: flex;
    min-height: 0;
    flex-direction: column;
}
.ui-dialog:has(.catalog-table-config-form) .catalog-table-config-list {
    flex: 1 1 auto;
}
.catalog-table-config-help {
    margin-bottom: 10px;
    font-size: 12px;
}

/* Catalog builder spacing: giữ khoảng thở rõ ràng giữa thông tin và vùng thiết kế. */
.catalog-type-info-card { padding: 18px 22px 20px; margin-bottom: 16px; }
.catalog-builder-form > .catalog-type-info-card { margin-bottom: 16px !important; }
.catalog-section-heading { margin-bottom: 10px; }
.catalog-section-heading h2 { font-size: 15px; line-height: 19px; }
.catalog-type-info-grid { gap: 8px 12px; }
.catalog-type-info-grid .app-field > label { margin-bottom: 4px; font-size: 11px; }
.document-type-builder-page .catalog-type-info-grid .app-field > label { margin-bottom: 8px; font-size: 12px; }
.catalog-type-info-grid input, .catalog-type-info-grid .select2-container .select2-selection--single { min-height: 34px; }
.catalog-builder-layout { gap: 16px; min-height: 500px; }
.catalog-palette-panel { padding: 16px; }
.catalog-canvas-panel { padding: 16px 18px 14px; }
.catalog-panel-heading { min-height: 26px; }
.catalog-panel-heading strong { font-size: 14px; }
.catalog-panel-hint { margin: 6px 0 8px; font-size: 11px; }
.catalog-palette-items { gap: 5px; }
.catalog-palette-item { min-height: 36px; padding: 5px 7px; gap: 7px; font-size: 12px; }
.catalog-palette-glyph { width: 30px; height: 30px; font-size: 11px; }
.catalog-slot-meter { padding: 7px; font-size: 11px; }
.catalog-canvas-grid-labels { margin: 8px 6px 3px; }
.catalog-canvas-dropzone { min-height: 360px; padding: 5px; }
.catalog-canvas-fields { gap: 6px; }
.catalog-field-card, .catalog-field-placeholder { min-height: 52px; }
.catalog-field-card { padding: 6px 7px; gap: 5px; }
.catalog-field-icon { flex-basis: 27px; width: 27px; height: 27px; }
.catalog-field-content strong { font-size: 12px; }
.catalog-field-content small { font-size: 10px; }
.catalog-property-body { gap: 7px; }
.catalog-property-section { padding: 7px 9px; }
.catalog-property-section-heading { margin-bottom: 5px; }
.catalog-property-grid, .catalog-property-stack { gap: 7px 10px; }
.catalog-options-table th, .catalog-options-table td { padding: 3px 3px; }
.catalog-options-table td input { min-height: 30px; padding: 4px 7px; }
.catalog-options-table .catalog-option-grip-heading { width: 24px; }
.catalog-options-table .catalog-option-grip { width: 24px; color: var(--color-gray-400); cursor: grab; font-size: 17px; letter-spacing: -3px; text-align: center; user-select: none; }
.catalog-options-table .catalog-option-grip:active { cursor: grabbing; }
.catalog-options-table .catalog-option-placeholder { height: 36px; border: 1px dashed var(--color-primary-600); background: var(--color-primary-50); }
.catalog-option-add { margin-top: 5px; }
.catalog-table-config-row {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 42px;
    min-height: 42px;
    padding: 0 10px 0 8px;
    border-radius: 8px;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.catalog-table-config-row:hover {
    border-color: var(--color-gray-300);
    box-shadow: 0 2px 8px rgba(16, 24, 40, .05);
}
.catalog-table-config-grip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 24px;
    font-size: 16px;
    line-height: 1;
}
.catalog-table-config-label {
    display: flex !important;
    align-items: center;
    gap: 6px;
    min-width: 0;
    height: 100%;
    margin: 0;
    font-weight: 600;
}
.catalog-table-config-label input[type="checkbox"] {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    min-height: 16px;
    margin: 0;
}
.catalog-table-config-label > span {
    min-width: 0;
    overflow: hidden;
    color: var(--color-gray-700);
    text-overflow: ellipsis;
    white-space: nowrap;
}
.catalog-table-config-label small {
    margin-left: 12px;
    color: var(--color-gray-500);
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
}
.catalog-table-config-row.is-hidden-column .catalog-table-config-label > span {
    color: var(--color-gray-600);
    font-weight: 500;
}
.catalog-table-config-placeholder {
    height: 42px;
    margin: 0;
}
.ui-dialog:has(.catalog-table-config-form) .app-dialog-actions {
    margin-top: 12px;
}

/* Preview modal */
.catalog-preview-dialog { padding: 2px 2px 8px; }
.catalog-preview-dialog-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 15px; padding-bottom: 12px; border-bottom: 1px solid var(--color-gray-200); }
.catalog-preview-dialog-heading > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.catalog-preview-dialog-heading strong { color: var(--color-gray-900); font-size: 16px; }
.catalog-preview-dialog-heading small { color: var(--color-gray-500); font-size: 12px; }
.catalog-preview-timezone { color: var(--color-success-600); font-size: 11px; white-space: nowrap; }
.catalog-preview-dialog-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 15px; padding-bottom: 12px; border-bottom: 1px solid var(--color-gray-200); }
.catalog-preview-dialog-header strong { color: var(--color-gray-900); font-size: 16px; }
.catalog-preview-dialog-header small { display: block; margin-top: 3px; color: var(--color-gray-500); font-size: 12px; }
.catalog-preview-live { color: var(--color-success-600); font-size: 11px; white-space: nowrap; }
.catalog-preview-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; }
.catalog-preview-field { grid-column: span var(--catalog-col-span); min-width: 0; }
.catalog-preview-field > label { display: block; margin-bottom: 6px; color: var(--color-gray-700); font-size: 12px; font-weight: 600; }
.catalog-preview-field .app-control, .catalog-preview-field .select2-container { width: 100% !important; }
.catalog-preview-field textarea.app-control { min-height: 90px; resize: vertical; }
.catalog-preview-field input.app-control, .catalog-preview-field select.app-control { min-height: 38px; }
.catalog-preview-switch, .app-form label.catalog-preview-switch { display: inline-flex; align-items: center; min-height: 38px; margin: 0; color: inherit; font-weight: 400; cursor: pointer; }
.catalog-preview-switch input, .app-form .catalog-preview-switch input { position: absolute; width: 1px; height: 1px; min-height: 1px; padding: 0; border: 0; opacity: 0; pointer-events: none; }
.catalog-preview-switch input:focus-visible + .catalog-switch-track { outline: 2px solid var(--color-primary-600); outline-offset: 2px; }
.catalog-preview-footnote { margin: 14px 0 0; color: var(--color-gray-500); font-size: 11px; }
.catalog-preview-note { margin: 14px 0 0; color: var(--color-gray-500); font-size: 11px; }
@media (max-width: 1180px) {
    .catalog-type-info-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .catalog-type-description-field { grid-column: span 1; }
    .catalog-builder-layout { grid-template-columns: 190px minmax(0, 1fr); }
}
@media (max-width: 760px) {
    .catalog-section-heading { align-items: flex-start; flex-direction: column; gap: 5px; }
    .catalog-type-info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .catalog-builder-layout { grid-template-columns: 1fr; min-height: 0; }
    .catalog-palette-panel { min-height: 0; }
    .catalog-canvas-panel { min-height: 560px; }
    .catalog-property-grid-wide, .catalog-property-checks, .catalog-document-source-grid--with-catalog { grid-template-columns: 1fr; }
    .catalog-property-section-pair { grid-template-columns: 1fr; }
    .catalog-preview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .catalog-preview-field { grid-column: span 1 !important; }
}
@media (max-width: 560px) {
    .catalog-builder-header-actions { width: 100%; margin-left: 0; }
    .catalog-builder-header-actions .app-btn { flex: 1; justify-content: center; }
    .catalog-type-info-card { padding: 15px; }
    .catalog-type-info-grid { grid-template-columns: 1fr; }
    .catalog-builder-layout { gap: 10px; }
    .catalog-canvas-panel { padding-inline: 12px; }
    .catalog-field-system-badge { display: none; }
    .catalog-field-colspan { display: none; }
    .catalog-canvas-actions { flex-wrap: wrap; }
    .catalog-canvas-actions .app-btn { width: fit-content; justify-content: center; }
}

/* Khi thu gọn, track của grid cũng phải co theo palette; nếu chỉ đổi width
   của panel thì canvas vẫn bị giữ ở cột 218px và vùng thả bị lệch. */
.catalog-builder-layout.is-palette-collapsed {
    grid-template-columns: 66px minmax(0, 1fr);
}

.catalog-builder-layout.is-palette-collapsed .catalog-palette-panel {
    width: auto;
}

.catalog-builder-layout.is-palette-collapsed .catalog-palette-panel .catalog-panel-heading {
    justify-content: center;
}

.catalog-builder-layout.is-palette-collapsed .catalog-collapse-button {
    min-width: 28px;
    min-height: 28px;
}

.catalog-collapse-icon {
    width: 16px;
    height: 16px;
    transform: rotate(180deg);
    transition: transform .15s ease;
}

.catalog-collapse-button.is-collapsed .catalog-collapse-icon {
    transform: rotate(0deg);
}

.catalog-slot-meter-icon {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
}

@media (max-width: 760px) {
    .catalog-builder-layout.is-palette-collapsed {
        grid-template-columns: 1fr;
    }

    .catalog-builder-layout.is-palette-collapsed .catalog-palette-panel {
        width: 100%;
    }
}

/* Cấu hình hệ thống: mỗi nhóm là một block vuông, bấm để mở dialog riêng. */
.setting-group-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    align-items: stretch;
}
.setting-group-column {
    display: contents;
}
.setting-order-general { order: 1; }
.setting-order-snapshot { order: 2; }
.setting-order-document { order: 3; }
.setting-order-archive { order: 4; }
.setting-order-ocr { order: 5; }
.setting-order-paper-size { order: 6; }
.setting-order-aggregation { order: 7; }
.setting-order-update { order: 8; }
.setting-group-card {
    position: relative;
    display: flex;
    height: 100%;
    box-sizing: border-box;
    flex-direction: column;
    gap: 8px;
    padding: 12px 40px 12px 12px;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease, transform .15s ease;
}
.setting-group-card:hover {
    border-color: #a9c5ff;
    background: var(--color-white);
    box-shadow: 0 7px 20px rgba(21,94,239,.11);
    transform: translateY(-1px);
}
.setting-group-card:focus-visible { border-color: #a9c5ff; outline: none; box-shadow: 0 0 0 3px rgba(21,94,239,.12), 0 7px 20px rgba(21,94,239,.11); }
.setting-group-card:active { background: var(--color-primary-50); }
.setting-group-header { display: flex; align-items: flex-start; gap: 9px; }
.setting-group-icon { display: grid; place-items: center; flex: 0 0 34px; width: 34px; height: 34px; border-radius: 9px; background: var(--color-primary-50); color: var(--color-primary-600); }
.setting-group-icon .app-icon { width: 17px; height: 17px; }
.setting-group-heading h2 { margin: 0 0 2px; color: var(--color-gray-900); font-size: 14px; font-weight: 700; line-height: 18px; }
.setting-group-heading p { margin: 0; color: var(--color-gray-500); font-size: 11px; line-height: 15px; }
.setting-group-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; margin: 0; }
.setting-group-summary > div { display: flex; align-items: baseline; justify-content: space-between; min-width: 0; gap: 8px; padding-top: 0; border-top: 0; }
.setting-group-summary > div.setting-summary-wide { grid-column: 1 / -1; }
.setting-group-summary--ocr > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; }
.setting-group-summary--ocr > div.setting-summary-wide { grid-template-columns: auto minmax(0, 1fr); }
.setting-group-summary--ocr dd { max-width: 100%; }
.setting-group-summary--ocr > div:nth-child(4) { grid-column: 2; }
.setting-group-summary dt { flex: 0 0 auto; color: var(--color-gray-500); font-size: 12px; }
.setting-group-summary dd {
    margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    color: var(--color-gray-800); font-size: 12px; font-weight: 600; text-align: right;
}
.setting-group-summary dd code { background: var(--color-gray-100); padding: 1px 5px; border-radius: 4px; font-family: monospace; font-size: 11px; color: var(--color-primary-700); }
.setting-group-ellipsis { max-width: 260px; }
.setting-group-overview { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 1px; }
.setting-overview-column { min-width: 0; }
.setting-overview-column + .setting-overview-column { padding-left: 14px; border-left: 1px solid var(--color-gray-100); }
.setting-overview-column h3 { margin: 0 0 5px; color: var(--color-gray-700); font-size: 11px; font-weight: 750; text-transform: uppercase; letter-spacing: .04em; }
.setting-overview-line { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-width: 0; padding: 2px 0; }
.setting-overview-line > span { flex: 0 0 auto; color: var(--color-gray-500); font-size: 11px; }
.setting-overview-line > strong { color: var(--color-gray-800); font-size: 11px; font-weight: 650; }
.setting-overview-line code { min-width: 0; overflow: hidden; color: var(--color-primary-700); background: var(--color-primary-50); border-radius: 4px; padding: 1px 4px; font-family: monospace; font-size: 9.5px; text-overflow: ellipsis; white-space: nowrap; }
.setting-overview-common { display: flex; align-items: center; gap: 10px; margin-top: 5px; padding-top: 6px; border-top: 1px solid var(--color-gray-100); color: var(--color-gray-500); font-size: 10.5px; }
.setting-overview-common > span:first-child { margin-right: auto; color: var(--color-gray-600); font-weight: 700; }
.setting-overview-common strong { color: var(--color-gray-800); font-weight: 700; }
.setting-group-config {
    position: absolute; top: 14px; right: 14px; z-index: 1;
}
.setting-group-card:hover .setting-group-config {
    color: var(--color-primary-600);
    background: var(--color-primary-50) !important;
}
.setting-group-config:hover,
.setting-group-config:focus-visible {
    color: var(--color-primary-600);
    background: var(--color-primary-50) !important;
}
.setting-snapshot-card { align-items: flex-start; justify-content: flex-start; padding-left: 12px; }
.setting-snapshot-card .setting-group-header { min-width: 0; }

@media (max-width: 1000px) {
    .setting-group-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .setting-group-grid { grid-template-columns: 1fr; }
    .setting-group-ellipsis { max-width: none; }
    .setting-group-overview { grid-template-columns: 1fr; gap: 7px; }
    .setting-overview-column + .setting-overview-column { padding-left: 0; border-top: 1px solid var(--color-gray-100); border-left: 0; padding-top: 7px; }
    .setting-snapshot-card { align-items: stretch; flex-direction: column; }
}

/* Cấu hình AI: nhóm cấu hình rõ ràng, bấm từng mục để mở form. */
.ai-settings-page { margin: 0; }
.ai-settings-section { margin-bottom: 20px; }
.ai-settings-section-heading { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.ai-settings-section-heading h2 { margin: 0; color: var(--color-gray-900); font-size: 16px; line-height: 22px; font-weight: 650; }
.ai-settings-section-icon { display: grid; place-items: center; flex: 0 0 28px; width: 28px; height: 28px; border: 1px solid #cfe0ff; border-radius: 8px; color: var(--color-primary-600); background: var(--color-primary-50); }
.ai-settings-section-icon--violet { border-color: #ddd0fa; color: #6941c6; background: #f6f0ff; }
.ai-settings-section-icon .app-icon { width: 15px; height: 15px; }
.ai-settings-list { display: grid; gap: 10px; }
.ai-settings-provider-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.ai-settings-item { position: relative; display: block; min-width: 0; min-height: 124px; padding: 11px 13px 10px; border: 1px solid var(--color-gray-200); border-radius: 9px; color: inherit; background: var(--color-white); box-shadow: var(--shadow-sm); text-decoration: none; cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.ai-settings-item:hover, .ai-settings-item:focus-visible { border-color: #a9c5ff; box-shadow: 0 7px 20px rgba(21,94,239,.11); outline: none; transform: translateY(-1px); }
.ai-settings-provider-item.is-active { border-color: #b8e1d0; background: linear-gradient(180deg, #ffffff 0%, #fbfffd 100%); }
.ai-settings-provider-item.is-inactive { border-color: #e3e7ed; background: #fbfcfd; filter: saturate(.72); opacity: .78; }
.ai-settings-provider-item.is-inactive:hover, .ai-settings-provider-item.is-inactive:focus-visible { opacity: .95; }
.ai-settings-item-main { position: relative; display: flex; align-items: center; min-width: 0; gap: 9px; padding-right: 22px; }
.ai-provider-logo { display: grid; place-items: center; flex: 0 0 36px; width: 36px; height: 36px; border-radius: 8px; overflow: hidden; }
.ai-provider-logo svg { width: 25px; height: 25px; display: block; }
.ai-provider-logo img { display: block; width: 28px; height: 28px; object-fit: contain; mix-blend-mode: multiply; }
.ai-provider-logo--google { background: #f7f9ff; }
.ai-provider-logo--anthropic { background: #fff7f2; }
.ai-provider-logo--openai { background: #f7f7f7; }
.ai-provider-logo--custom { background: #f8f6ff; }
.ai-provider-logo--custom svg { width: 22px; height: 22px; fill: none; stroke: #6941c6; stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round; }
.ai-settings-provider-item.is-inactive .ai-provider-logo img,
.ai-settings-provider-item.is-inactive .ai-provider-logo svg { filter: grayscale(1); }
.ai-settings-item-icon--violet { display: grid; place-items: center; flex: 0 0 32px; width: 32px; height: 32px; border-radius: 8px; color: #6941c6; background: #f6f0ff; }
.ai-settings-item-icon--violet .app-icon { width: 16px; height: 16px; }
.ai-settings-item-heading { min-width: 0; flex: 1 1 auto; }
.ai-settings-item-heading h3 { margin: 0 0 2px; overflow: hidden; color: var(--color-gray-900); font-size: 14px; font-weight: 650; line-height: 20px; text-overflow: ellipsis; white-space: nowrap; }
.ai-settings-item-heading p { margin: 0; overflow: hidden; color: var(--color-gray-500); font-size: 12px; line-height: 17px; text-overflow: ellipsis; white-space: nowrap; }
.ai-settings-status { display: inline-flex; align-items: center; padding: 3px 8px; border-radius: 999px; font-size: 11px; font-weight: 650; line-height: 16px; white-space: nowrap; }
.ai-settings-status.is-active { color: #157347; background: var(--color-success-50); }
.ai-settings-status.is-inactive { color: var(--color-gray-600); background: var(--color-gray-100); }
.ai-settings-item-config { position: absolute; top: 8px; right: 0; display: grid; place-items: center; flex: 0 0 24px; width: 24px; height: 24px; border: 1px solid var(--color-gray-200); border-radius: 6px; color: var(--color-gray-500); background: var(--color-gray-50); transition: color .15s ease, border-color .15s ease, background-color .15s ease; }
.ai-settings-item-config .app-icon { width: 15px; height: 15px; }
.ai-settings-item:hover .ai-settings-item-config, .ai-settings-item:focus-visible .ai-settings-item-config { border-color: #b9d0ff; color: var(--color-primary-600); background: var(--color-primary-50); }
.ai-provider-switch, .ai-feature-switch { gap: 8px; min-height: 24px; }
.ai-provider-switch-label, .ai-feature-switch-label { color: var(--color-gray-700); font-size: 12px; font-weight: 600; }
.ai-provider-form-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ai-provider-models-field { margin-top: 2px; padding: 10px 12px 12px; border: 1px solid var(--color-gray-200); border-radius: 9px; background: var(--color-gray-25); }
.ai-provider-models-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.ai-provider-models-heading > label { margin: 0; color: var(--color-gray-800); font-size: 13px; font-weight: 650; }
.ai-model-add { min-height: 30px; padding: 5px 10px; font-size: 12px; font-weight: 650; }
.ai-model-add .app-icon { width: 14px; height: 14px; }
.ai-provider-models-table-wrap, .catalog-options-table-wrap { overflow: auto; border: 1px solid var(--color-gray-200); border-radius: 7px; background: var(--color-white); max-height: 260px; }
.ai-model-table { width: 100%; table-layout: fixed; border-collapse: collapse; }
.ai-model-table th { position: sticky; top: 0; z-index: 1; padding: 5px 7px; border-bottom: 1px solid var(--color-gray-200); background: var(--color-gray-50); color: var(--color-gray-600); font-size: 11px; font-weight: 650; line-height: 15px; text-align: left; }
.ai-model-table .ai-model-order-column { width: 30px; padding-right: 2px; padding-left: 2px; text-align: center; }
.ai-model-table th:last-child, .ai-model-table td:last-child { width: 34px; }
.ai-model-table td { padding: 4px 5px; border-bottom: 1px solid var(--color-gray-100); vertical-align: middle; }
.ai-model-table tbody tr:last-child td { border-bottom: 0; }
.ai-model-grip { display: inline-block; color: var(--color-gray-400); cursor: grab; font-size: 15px; font-weight: 700; letter-spacing: -3px; line-height: 24px; user-select: none; }
.ai-model-grip:active { cursor: grabbing; }
.ai-model-grip:focus-visible { border-radius: 3px; outline: 2px solid var(--color-primary-300); outline-offset: 1px; }
.ai-model-placeholder td { height: 38px; border: 1px dashed var(--color-primary-300); background: var(--color-primary-50); }
.ai-model-table input { width: 100%; min-height: 30px; height: 30px; padding: 4px 7px; font-size: 12px; }
.ai-model-actions { padding-right: 4px !important; padding-left: 2px !important; text-align: center; }
.ai-model-remove { width: 26px; height: 26px; min-height: 26px; margin: 0; padding: 0; }
.ai-model-remove .app-icon { width: 14px; height: 14px; }
.ai-model-table .field-validation-error { display: block; margin-top: 2px; font-size: 10px; line-height: 12px; }
.ai-provider-models-field > [data-valmsg-for="Models"] { display: block; margin-top: 5px; }
.ai-settings-summary { display: grid; gap: 5px; margin: 9px 0 0; padding-top: 8px; border-top: 1px solid var(--color-gray-100); }
.ai-settings-summary > div { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-width: 0; }
.ai-settings-summary dt { color: var(--color-gray-500); font-size: 11px; }
.ai-settings-summary dd { max-width: 200px; margin: 0; overflow: hidden; color: var(--color-gray-800); font-size: 12px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.ai-settings-feature-item { min-height: 124px; padding-bottom: 10px; }
.ai-settings-feature-item.is-inactive { border-color: #e3e7ed; background: #fbfcfd; filter: saturate(.72); opacity: .78; }
.ai-settings-feature-item.is-inactive:hover, .ai-settings-feature-item.is-inactive:focus-visible { opacity: .95; }
.ai-settings-feature-item.is-inactive .ai-settings-item-icon { filter: grayscale(1); }
.ai-feature-switches { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 14px; }
.ai-feature-switches .app-field { margin-bottom: 0; }
.ai-feature-settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.ai-feature-settings-grid .ai-feature-prompt-field { grid-column: 1 / -1; grid-row: 1; }
.ai-feature-settings-grid .ai-feature-active-field { grid-column: 1; grid-row: 2; }
.ai-feature-settings-grid .ai-feature-allow-field { grid-column: 2; grid-row: 2; }
.ai-feature-settings-grid .app-field { margin-bottom: 14px; }
.ai-settings-feature-item .ai-settings-summary { gap: 5px; }
@media (max-width: 1100px) { .ai-settings-provider-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .ai-settings-provider-grid, .ai-settings-feature-item .ai-settings-summary { grid-template-columns: 1fr; } }

/* Dialog cấu hình theo nhóm: gọn, dùng chung style .app-form. */
.setting-dialog { min-width: min(620px, 100%); }
.setting-dialog > .app-dialog-body { padding-top: 14px; }
.setting-dialog-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.setting-dialog-columns .setting-dialog-section { margin-bottom: 0; }
.setting-dialog-section { margin-bottom: 10px; padding: 12px 14px 11px; border: 1px solid #dfe6f0; border-radius: 10px; background: linear-gradient(180deg, #fff 0%, #fbfcfe 100%); box-shadow: 0 2px 7px rgba(15, 23, 42, .035); }
.setting-dialog-section:last-of-type { margin-bottom: 0; }
.setting-dialog-section--searchable { border-color: #dfe2f2; background: linear-gradient(180deg, #fff 0%, #fcfbff 100%); }
.setting-dialog-section-header { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.setting-dialog-section-index { display: grid; place-items: center; flex: 0 0 27px; width: 27px; height: 27px; border-radius: 8px; color: var(--color-primary-700); background: var(--color-primary-50); font-size: 10px; font-weight: 750; letter-spacing: .02em; }
.setting-dialog-section--searchable .setting-dialog-section-index { color: #6941c6; background: #f5f0ff; }
.setting-dialog-section-header h3 { margin: 0 0 1px; color: var(--color-gray-900); font-size: 14px; font-weight: 700; line-height: 18px; }
.setting-dialog-section-header p { margin: 0; color: var(--color-gray-500); font-size: 10.5px; line-height: 14px; }
.setting-dialog-field { margin-bottom: 9px; }
.setting-dialog-field label, .setting-dialog-grid label { display: block; margin-bottom: 4px; color: var(--color-gray-700); font-size: 11px; font-weight: 650; }
.setting-dialog-field input, .setting-dialog-grid input, .setting-dialog-grid select { width: 100%; min-height: 34px; }
.setting-dialog-grid { display: grid; gap: 12px; }
.setting-dialog-grid--ocr { grid-template-columns: minmax(0, 1fr); }
.setting-dialog-grid--common { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.setting-dialog-grid--searchable { grid-template-columns: minmax(0, 1fr); }
.setting-dialog-grid .app-field { margin-bottom: 0; }
.setting-dialog-setting-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 8px; border-top: 1px solid var(--color-gray-100); }
.setting-dialog-setting-row strong { display: block; color: var(--color-gray-800); font-size: 12px; line-height: 17px; }
.setting-dialog-setting-row span:not(.catalog-switch-track):not(.setting-toggle-label) { display: block; color: var(--color-gray-500); font-size: 11px; line-height: 16px; }
.setting-dialog-setting-row .setting-toggle { flex: 0 0 auto; }
.setting-dialog-section-toggle { margin-left: auto; flex: 0 0 auto; }
.setting-dialog-hint { display: block; margin-top: 7px; color: var(--color-gray-500); font-size: 10.5px; line-height: 15px; }
.setting-dialog .app-form-actions { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--color-gray-100); }
.setting-dialog .app-form-actions .app-btn { min-height: 36px; padding-inline: 16px; }
.ui-dialog.setting-ocr-dialog-wrapper {
    width: min(840px, calc(100vw - 32px)) !important;
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 32px);
}
.ui-dialog.setting-ocr-dialog-wrapper .ui-dialog-content { max-height: calc(100vh - 90px); }
.ocr-setting-form { display: flex; min-width: 0; min-height: 0; flex: 1; flex-direction: column; }
.ocr-setting-form > .app-dialog-body { display: flex; flex-direction: column; gap: 14px; padding-bottom: 0; }
.ocr-setting-form > .app-dialog-body > .setting-dialog-section--common { margin-bottom: 0; }
.ocr-setting-form .setting-dialog-section--common .setting-dialog-grid { gap: 12px; }
.ocr-setting-form .setting-dialog-section--common .app-field { min-width: 0; }
.ocr-setting-form .setting-dialog-section--common .app-field > label { margin-bottom: 5px; }
.ocr-setting-form .setting-dialog-section--common .setting-dialog-hint { margin: 5px 0 0; }
.ocr-setting-form .app-dialog-footer { margin-top: 10px !important; padding-top: 10px; padding-bottom: 14px; }
@media (max-width: 680px) {
    .setting-dialog { min-width: 0; }
    .setting-dialog-columns { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
    .setting-dialog-section { padding: 14px; }
    .setting-dialog-grid--common { grid-template-columns: 1fr; }
    .setting-dialog-section-header { align-items: flex-start; }
    .setting-dialog-section-toggle { margin-top: 2px; }
}
.ui-dialog.setting-compact-dialog-wrapper {
    width: min(620px, calc(100vw - 32px)) !important;
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 32px);
}
.ui-dialog.setting-compact-dialog-wrapper .ui-dialog-content { max-height: calc(100vh - 90px); }
.setting-general-form { display: flex; min-width: 0; min-height: 0; flex: 1; flex-direction: column; }
.setting-general-form > .app-dialog-body { display: flex; flex-direction: column; gap: 10px; padding-bottom: 2px; }
.setting-general-form > .app-dialog-body > .app-field { flex: 0 0 auto; margin-bottom: 0 !important; }
.setting-general-form .app-field > label { margin-bottom: 6px; font-size: 12px; }
.setting-general-form .app-field .form-hint { margin-top: 5px; }
.setting-general-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.setting-general-grid .app-field { min-width: 0; }
.setting-dialog-note { margin: 0; padding-top: 10px; border-top: 1px solid var(--color-gray-100); color: var(--color-gray-500); font-size: 11px; line-height: 15px; }
.setting-general-form .app-dialog-footer { margin-top: 10px !important; padding-top: 10px; padding-bottom: 14px; }
.setting-document-form { display: flex; min-width: 0; min-height: 0; flex: 1; flex-direction: column; }
.setting-document-form > .app-dialog-body { display: flex; flex-direction: column; gap: 14px; padding-bottom: 2px; }
.setting-document-form > .app-dialog-body > .app-field { flex: 0 0 auto; margin-bottom: 0 !important; }
.setting-document-form .app-field > label { margin-bottom: 6px; font-size: 12px; }
.setting-document-form .app-field .form-hint { margin-top: 5px; }
.setting-document-form .setting-upload-extension-list { min-height: 92px; resize: vertical; line-height: 1.45; }
.setting-document-form .setting-upload-extension-list--blacklist { min-height: 136px; }
.setting-document-form .setting-document-toggle-field {
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 0 !important;
    padding-top: 12px;
    border-top: 1px solid var(--color-gray-100);
}
.setting-document-toggle-copy { min-width: 0; }
.setting-document-toggle-copy > label { margin: 0; color: var(--color-gray-800); font-size: 12px; font-weight: 650; }
.setting-document-toggle-copy .form-hint { max-width: 430px; }
.setting-document-toggle-field .setting-toggle { flex: 0 0 auto; }
.setting-document-form .app-dialog-footer { margin-top: 10px !important; padding-top: 10px; padding-bottom: 14px; }
.folder-aggregation-form { display: flex; min-width: 0; min-height: 0; flex: 1 1 auto; flex-direction: column; }
.folder-aggregation-form > .app-dialog-body { display: flex; flex-direction: column; gap: 14px; padding-bottom: 2px; }
.folder-aggregation-form .folder-aggregation-toggle-row { margin: 0; padding-top: 0; border-top: 0; }
.folder-aggregation-toggle-copy { min-width: 0; }
.folder-aggregation-toggle-copy strong { display: block; color: var(--color-gray-800); font-size: 12px; line-height: 17px; }
.folder-aggregation-toggle-copy span { display: block; color: var(--color-gray-500); font-size: 11px; line-height: 16px; }
.folder-aggregation-form .folder-aggregation-time-grid { gap: 12px; }
.folder-aggregation-form .folder-aggregation-time-grid .app-field { margin-bottom: 0; min-width: 0; }
.folder-aggregation-form .folder-aggregation-time-grid input { width: 100%; min-height: 34px; }
.folder-aggregation-form .app-dialog-footer { margin-top: 10px !important; padding-top: 10px; padding-bottom: 14px; }
@media (max-width: 520px) {
    .folder-aggregation-form .folder-aggregation-time-grid { grid-template-columns: 1fr; }
    .folder-aggregation-form .folder-aggregation-toggle-row { align-items: flex-start; }
}
@media (max-width: 520px) {
    .setting-general-grid { grid-template-columns: 1fr; }
    .setting-document-form .setting-document-toggle-field { align-items: flex-start; }
    .setting-document-toggle-field .setting-toggle { margin-top: 1px; }
    .setting-document-toggle-copy .form-hint { max-width: none; }
}
.setting-dialog .app-dialog-lead { margin: 0 0 4px; }
.ui-dialog-titlebar:has(.ui-dialog-subtitle) { min-height: 64px; align-items: flex-start; padding-top: 12px; padding-bottom: 12px; }
.ui-dialog-titlebar:has(.ui-dialog-subtitle) .ui-dialog-title { display: block; width: auto; padding-top: 2px; }
.ui-dialog-subtitle { position: absolute; right: 52px; bottom: 8px; left: 20px; overflow: hidden; color: var(--color-gray-500); font-size: 11px; font-weight: 400; line-height: 16px; text-overflow: ellipsis; white-space: nowrap; }
.ui-dialog-titlebar:has(.ui-dialog-title-icon) .ui-dialog-subtitle { left: 62px; }
.cfg-ocr-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.catalog-field-card,
.catalog-field-card.is-required:not(.is-system),
.catalog-field-card.is-optional:not(.is-system) { border-color: #d9e0ea !important; background: #fff !important; }
.catalog-field-card.is-system { border-color: #ddd0fa !important; background: #f6f0ff !important; }
.catalog-field-system-badge { display: inline-flex; align-items: center; margin-left: 6px; padding: 2px 6px; border: 1px solid #d9caf9; border-radius: 4px; background: #faf7ff; color: #6941c6; font-size: 10px; font-weight: 500; line-height: 14px; vertical-align: 1px; }
.catalog-field-icon { font-family: Arial, sans-serif; }
.catalog-field-icon-clock .app-icon { width: 20px; height: 20px; stroke: currentColor; }
.catalog-palette-glyph .app-icon, .catalog-field-icon .app-icon, .catalog-property-icon .app-icon { width: 18px; height: 18px; stroke-width: 1.4; }
.catalog-field-type-icon .app-icon { width: 18px; height: 18px; }
.catalog-property-icon.catalog-field-type-icon.type-1 { border-color: #c6d8fb; background: #f7faff; color: #2563eb; font-family: Arial, sans-serif; font-size: 9px; font-weight: 700; }
.catalog-property-icon.catalog-field-type-icon.type-2 { border-color: #bfe3ca; background: #f1fbf4; color: #16803c; font-family: Arial, sans-serif; }
.catalog-property-icon.catalog-field-type-icon.type-3 { border-color: #d9caf9; background: #fbf8ff; color: #6941c6; font-family: Arial, sans-serif; }
.catalog-property-icon.catalog-field-type-icon.type-4 { border-color: #f5d4a8; background: #fff8ed; color: #d97706; }
.catalog-property-icon.catalog-field-type-icon.type-5 { border-color: #bde7e5; background: #effafa; color: #0e9f9a; }
.catalog-property-icon.catalog-field-type-icon.type-6 { border-color: #b9d8f3; background: #eef7ff; color: #1769aa; }
.catalog-palette-item[data-catalog-field-type="6"] .catalog-palette-glyph { border-color: #b9d8f3; background: #eef7ff; color: #1769aa; }
.catalog-field-settings .app-icon, .catalog-field-delete .app-icon { width: 16px; height: 16px; stroke: currentColor; }
.catalog-field-settings, .catalog-field-delete { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 28px; width: 28px; height: 28px; min-height: 28px; margin: 0; padding: 0; line-height: 1; }
.catalog-field-settings .app-icon, .catalog-field-delete .app-icon { display: block; }
.catalog-field-actions { display: inline-flex; align-items: center; gap: 2px; flex: 0 0 auto; margin-left: -6px; }
.catalog-field-legend { display: inline-flex; align-items: center; gap: 14px; margin-left: auto; color: var(--color-gray-500); font-size: 11px; flex-wrap: wrap; }
.catalog-field-legend span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.legend-swatch { display: inline-block; flex: 0 0 auto; width: 12px; height: 12px; border: 1px solid transparent; border-radius: 3px; }
.legend-swatch-system { background: #f6f0ff; border-color: #ddd0fa; }
.legend-swatch-extended { background: #fff; border-color: #d9e0ea; }
@media (max-width: 760px) {
    .catalog-field-legend { margin-left: 0; }
}
.catalog-field-required-badge { display: inline-flex; align-items: center; margin-left: 6px; padding: 2px 6px; border: 1px solid #f2c7c3; border-radius: 4px; background: #fffafa; color: #d04a42; font-size: 10px; font-weight: 500; line-height: 14px; vertical-align: 1px; }
.catalog-field-manual-badge { display: inline-flex; align-items: center; margin-left: 6px; padding: 2px 6px; border: 1px solid #b2ddff; border-radius: 4px; background: #eff8ff; color: #175cd3; font-size: 10px; font-weight: 500; line-height: 14px; vertical-align: 1px; }
.catalog-preview-readonly { display: block; padding: 10px 12px; border: 1px dashed var(--color-gray-300); border-radius: 6px; color: var(--color-gray-500); background: var(--color-gray-50); }
@media (max-width: 560px) {
    .setting-dialog { min-width: 0; }
    .cfg-ocr-row, .ai-provider-form-row, .ai-feature-switches, .ai-feature-settings-grid { grid-template-columns: 1fr; }
    .ai-model-table th { padding-right: 5px; padding-left: 5px; }
    .ai-model-table td { padding-right: 3px; padding-left: 3px; }
    .ai-model-table .ai-model-order-column { width: 28px; }
    .ai-model-table th:last-child, .ai-model-table td:last-child { width: 30px; }
    .ai-feature-settings-grid .ai-feature-prompt-field, .ai-feature-settings-grid .ai-feature-allow-field { grid-column: 1; grid-row: auto; }
}

/* Shell polish: visual language dùng chung cho toàn bộ màn hình. */
:root {
    --color-primary-50: #eff4ff;
    --color-primary-100: #dbe8ff;
    --color-primary-600: #155eef;
    --color-primary-700: #004eeb;
    --color-gray-50: #f7f9fc;
    --color-gray-100: #eef2f7;
    --color-gray-200: #e3e8ef;
    --color-gray-300: #cbd5e1;
    --color-gray-700: #334155;
    --color-gray-900: #172033;
    --shadow-sm: 0 1px 3px rgba(15, 23, 42, .025), 0 1px 2px rgba(15, 23, 42, .015);
    --shadow-md: 0 10px 28px rgba(15, 23, 42, .045);
    --radius-md: 10px;
}

body.app-authenticated {
    background:
        radial-gradient(ellipse 58rem 34rem at 100% -10%, rgba(62, 123, 250, .22), transparent 68%),
        radial-gradient(ellipse 46rem 32rem at -10% 108%, rgba(127, 86, 217, .13), transparent 70%),
        linear-gradient(145deg, #f7faff 0%, #edf4ff 52%, #f8f9ff 100%);
    background-attachment: fixed;
}

body.app-authenticated::after {
    position: fixed;
    top: 0;
    right: 0;
    z-index: -1;
    width: 420px;
    height: 300px;
    pointer-events: none;
    content: "";
    opacity: .16;
    background:
        radial-gradient(ellipse at top right, #bfdbfe 0%, transparent 66%),
        radial-gradient(circle at 70% 30%, rgba(196, 181, 253, .55), transparent 42%);
}

.app-sidebar {
    background: rgba(255, 255, 255, .96);
    box-shadow: 8px 0 24px rgba(15, 23, 42, .012);
}
.app-brand-link { color: var(--color-gray-900); letter-spacing: -.01em; }
.app-brand-link img { border-radius: 7px; box-shadow: 0 3px 8px rgba(37, 99, 235, .2); }
.app-brand-link span { font-weight: 750; }
.app-menu a, .app-menu-group-label { border-radius: 9px; transition: background .16s ease, color .16s ease, transform .16s ease; }
.app-menu a:hover, .app-menu-group-label:hover { background: #f1f5fb; color: var(--color-gray-900); transform: translateX(1px); }
.app-menu a.is-active { box-shadow: inset 3px 0 0 var(--color-primary-600); background: linear-gradient(90deg, #eaf1ff, #f3f6ff); }
.app-menu-group.is-active > .app-menu-group-label { color: var(--color-primary-700); }

.app-topbar { background: var(--color-white); border-bottom-color: var(--color-gray-200); }
.app-icon-button, .app-user-trigger { border-radius: 9px; }
.app-icon-button:hover, .app-user-trigger:hover { background: var(--color-primary-50); color: var(--color-primary-700); }
.app-user-avatar { box-shadow: 0 0 0 3px rgba(37, 99, 235, .06); }
.app-breadcrumb-bar { background: var(--color-white); border-bottom-color: var(--color-gray-200); }

.app-page-title { font-size: 25px; letter-spacing: -.025em; font-weight: 720; }
.app-page-description { color: #64748b; }
.app-card, .app-filter-card { border-color: #e2e8f0; border-radius: 12px; box-shadow: var(--shadow-sm); }
.app-card:hover { border-color: #d7e0ec; box-shadow: 0 4px 14px rgba(15, 23, 42, .035); }
.app-card > h2, .app-card > h3, .app-filter-title { letter-spacing: -.01em; }

/* Dashboard chính: lối vào nhanh theo phân hệ, dùng bảng màu phẳng của hệ thống (primary, gray, màu nhấn theo phân hệ). */
body:has(#main-content .app-main-dashboard) {
    background:
        radial-gradient(circle at 92% -4%, rgba(173, 204, 255, .26) 0, rgba(219, 230, 255, .17) 22%, transparent 46%),
        radial-gradient(circle at 3% 103%, rgba(159, 203, 255, .24) 0, rgba(219, 235, 255, .16) 24%, transparent 49%),
        radial-gradient(circle at 78% 78%, rgba(196, 189, 255, .1) 0, transparent 31%),
        radial-gradient(circle at 17% 34%, rgba(186, 224, 255, .12) 0, transparent 30%),
        #f5f9ff;
}
body:has(#main-content .app-main-dashboard) #main-content {
    position: relative;
    isolation: isolate;
    overflow-x: hidden;
}
body:has(#main-content .app-main-dashboard) #main-content::before,
body:has(#main-content .app-main-dashboard) #main-content::after {
    position: absolute;
    z-index: 0;
    content: "";
    pointer-events: none;
    border: 2px solid rgba(141, 184, 255, .18);
    border-radius: 50%;
}
body:has(#main-content .app-main-dashboard) #main-content::before {
    width: 1320px;
    height: 680px;
    top: -455px;
    right: -225px;
    background: linear-gradient(145deg, rgba(219, 233, 255, .42), rgba(228, 230, 255, .24) 58%, rgba(248, 251, 255, .08));
    box-shadow:
        0 0 0 48px rgba(170, 205, 255, .1),
        0 0 0 96px rgba(191, 184, 255, .07);
    transform: rotate(-12deg);
}
body:has(#main-content .app-main-dashboard) #main-content::after {
    width: 1120px;
    height: 570px;
    bottom: -430px;
    left: -470px;
    background: linear-gradient(35deg, rgba(207, 229, 255, .4), rgba(218, 236, 255, .23) 52%, rgba(224, 222, 255, .1));
    box-shadow:
        0 0 0 52px rgba(162, 202, 255, .09),
        0 0 0 104px rgba(172, 192, 255, .07);
    transform: rotate(14deg);
}
body:has(#main-content .app-main-dashboard) .app-topbar {
    height: 76px;
    left: max(64px, calc((100% - 1440px) / 2));
    right: max(64px, calc((100% - 1440px) / 2));
    padding-inline: 22px;
    border: 1px solid #dce7f6;
    border-top: 0;
    border-radius: 0 0 18px 18px;
    box-shadow: 0 8px 22px rgba(119, 151, 202, .08);
}
body:has(#main-content .app-main-dashboard) .app-topbar-brand {
    gap: 8px;
    font-size: 15px;
}
body:has(#main-content .app-main-dashboard) .app-topbar-brand .app-brand-logo {
    width: 28px;
    height: 28px;
    flex-basis: 28px;
    border-radius: 7px;
}
body.app-authenticated:has(#main-content .app-main-dashboard) #main-content {
    padding-top: 86px;
}
@media (min-width: 701px) {
    body.app-authenticated:has(#main-content .app-main-dashboard) #main-content {
        height: 100vh;
        min-height: 0;
        overflow: hidden;
    }
}
.app-main-dashboard { width: calc(100% - 128px); max-width: 1440px; margin: 0 auto; padding: 28px 0 24px; position: relative; z-index: 1; }
.app-main-dashboard-ambient { position: absolute; z-index: 0; inset: 0; overflow: hidden; pointer-events: none; }
.app-main-dashboard-ambient-card { position: absolute; display: inline-flex; align-items: center; justify-content: center; width: 92px; height: 112px; color: rgba(79, 139, 241, .42); background: linear-gradient(145deg, rgba(255, 255, 255, .76), rgba(216, 231, 255, .38)); border: 1px solid rgba(255, 255, 255, .9); border-radius: 16px; box-shadow: 0 18px 38px rgba(96, 142, 222, .08), inset 0 1px 0 rgba(255, 255, 255, .9); }
.app-main-dashboard-ambient-card::after { position: absolute; content: ""; width: 38px; height: 5px; left: 24px; bottom: 25px; border-radius: 99px; background: currentColor; box-shadow: 0 -13px 0 currentColor, 0 -26px 0 currentColor; opacity: .72; }
.app-main-dashboard-ambient-card .app-icon { width: 52px; height: 52px; opacity: .52; }
.app-main-dashboard-ambient-card--file { top: 28px; left: 10%; transform: rotate(-14deg); }
.app-main-dashboard-ambient-card--folder { top: 32px; right: 5%; width: 112px; height: 94px; color: rgba(79, 139, 241, .42); transform: rotate(12deg); }
.app-main-dashboard-ambient-card--folder::after { width: 52px; height: 34px; left: 29px; bottom: 21px; border-radius: 8px; background: currentColor; box-shadow: none; opacity: .45; }
.app-main-dashboard-ambient-dot { position: absolute; width: 30px; height: 30px; border-radius: 9px; background: rgba(140, 185, 251, .2); transform: rotate(-16deg); }
.app-main-dashboard-ambient-dot--one { top: 55px; left: 25%; }
.app-main-dashboard-ambient-dot--two { top: 105px; right: 19%; width: 24px; height: 24px; transform: rotate(18deg); }
.app-main-dashboard-hero { position: relative; z-index: 10; margin-bottom: 28px; text-align: center; color: var(--color-gray-900); }
.app-main-dashboard-hero h1 { margin: 0; color: var(--color-gray-900); font-size: clamp(24px, 3vw, 32px); font-weight: 700; letter-spacing: -.025em; line-height: 1.2; }
.app-main-dashboard-hero p { margin: 10px 0 26px; color: var(--color-gray-600); font-size: 15px; }
.app-quick-search--hero { width: min(100%, 720px); max-width: none; height: 56px; margin: 0 auto; padding: 0 20px; border-radius: 999px; box-shadow: 0 2px 8px rgba(16, 24, 40, .06); text-align: left; }
.app-quick-search--hero:focus-within { border-color: var(--color-primary-600); box-shadow: 0 4px 16px rgba(21, 94, 239, .12), 0 0 0 3px rgba(21, 94, 239, .1); }
.app-quick-search--hero .app-quick-search-icon { width: 20px; height: 20px; color: var(--color-primary-600); }
.app-quick-search--hero .app-quick-search-input { height: 52px; font-size: 15px; }
.app-main-dashboard-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 440px)); justify-content: center; gap: 20px; align-items: stretch; }
.app-main-dashboard-module { --dash-fg: var(--color-primary-600); --dash-fg-dark: #5b2be0; --dash-bg: var(--color-primary-50); --dash-line: #c7d7ee; --dash-shadow: rgba(83, 119, 177, .2); position: relative; overflow: hidden; padding: 18px 18px 16px; color: var(--color-gray-900); background: linear-gradient(180deg, var(--dash-bg) 0, rgba(255, 255, 255, .98) 130px); border: 1px solid rgba(206, 220, 239, .9); border-radius: 14px; box-shadow: 0 8px 20px rgba(83, 119, 177, .08); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.app-main-dashboard-module::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, transparent, var(--dash-fg), transparent); opacity: .42; }
.app-main-dashboard-module:hover { transform: translateY(-2px); border-color: var(--dash-line); box-shadow: 0 8px 22px rgba(15, 23, 42, .07); }
.app-main-dashboard-module--digitize { --dash-fg: #1769ee; --dash-fg-dark: #0f56c9; --dash-bg: #edf4ff; --dash-line: #c0d8ff; --dash-shadow: rgba(23, 105, 238, .2); }
.app-main-dashboard-module--archive { --dash-fg: #16a36b; --dash-fg-dark: #087e50; --dash-bg: #eefaf5; --dash-line: #c2ead8; --dash-shadow: rgba(22, 163, 107, .2); }
.app-main-dashboard-module--admin { --dash-fg: #7040ee; --dash-fg-dark: #5c2bbb; --dash-bg: #f6f0ff; --dash-line: #dfd0ff; --dash-shadow: rgba(112, 64, 238, .2); }
.app-main-dashboard-module-heading, .app-main-dashboard-shortcuts { position: relative; z-index: 1; }
.app-main-dashboard-module-heading { display: flex; align-items: center; gap: 14px; }
.app-main-dashboard-module-heading > div { min-width: 0; }
.app-main-dashboard-module-heading h2 { margin: 0 0 3px; font-size: 20px; letter-spacing: -.015em; white-space: nowrap; }
.app-main-dashboard-module-heading p { margin: 0; overflow: hidden; color: var(--color-gray-500); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.app-main-dashboard-module-icon { display: inline-flex; flex: 0 0 56px; align-items: center; justify-content: center; width: 56px; height: 56px; color: var(--color-white); background: linear-gradient(145deg, var(--dash-fg), var(--dash-fg-dark)); border: 0; border-radius: 14px; box-shadow: 0 8px 16px var(--dash-shadow); }
.app-main-dashboard-module-icon .app-icon { width: 26px; height: 26px; }
.app-main-dashboard-module-link { flex: 0 0 auto; margin-left: auto; padding: 8px 11px; color: var(--dash-fg); background: rgba(255, 255, 255, .86); border: 1px solid var(--dash-line); border-radius: 999px; font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; transition: background .14s ease, box-shadow .14s ease; }
.app-main-dashboard-module-link:hover, .app-main-dashboard-module-link:focus-visible { background: var(--dash-bg); box-shadow: 0 4px 12px var(--dash-shadow); }
.app-main-dashboard-module-art { position: absolute; z-index: 0; right: 8px; bottom: 4px; width: 190px; height: 116px; color: var(--dash-fg); opacity: .19; transform: rotate(-8deg); pointer-events: none; }
.app-main-dashboard-module-art::before { position: absolute; content: ""; right: 18px; bottom: 2px; width: 102px; height: 76px; border: 2px solid currentColor; border-radius: 12px 12px 7px 7px; background: rgba(255, 255, 255, .55); }
.app-main-dashboard-module-art span { position: absolute; right: 52px; bottom: 14px; width: 78px; height: 74px; border: 2px solid currentColor; border-radius: 9px; background: rgba(255, 255, 255, .68); transform: rotate(10deg); }
.app-main-dashboard-module-art .app-icon { position: absolute; z-index: 1; right: 64px; bottom: 30px; width: 58px; height: 58px; }
.app-main-dashboard-module--archive .app-main-dashboard-module-art { transform: rotate(7deg); }
.app-main-dashboard-module--admin .app-main-dashboard-module-art { transform: rotate(-5deg); }
.app-main-dashboard-shortcuts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 22px; }
.app-main-dashboard-shortcut { display: flex; align-items: center; gap: 7px; min-width: 0; min-height: 48px; padding: 6px; color: var(--color-gray-800, #1d2939); background: rgba(255, 255, 255, .82); border: 1px solid rgba(218, 228, 241, .95); border-radius: 10px; font: inherit; font-size: 12px; font-weight: 600; text-align: left; text-decoration: none; cursor: pointer; transition: background .16s ease, border-color .16s ease, box-shadow .16s ease; }
.app-main-dashboard-shortcut .app-icon { flex: 0 0 24px; box-sizing: content-box; width: 24px; height: 24px; padding: 7px; color: var(--dash-fg); background: var(--dash-bg); border-radius: 10px; transition: background .16s ease, color .16s ease; }
.app-main-dashboard-shortcut span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-main-dashboard-shortcut:hover, .app-main-dashboard-shortcut:focus-visible { background: var(--dash-bg); border-color: var(--dash-line); box-shadow: 0 3px 10px rgba(15, 23, 42, .05); outline: none; }
.app-main-dashboard-shortcut:hover .app-icon, .app-main-dashboard-shortcut:focus-visible .app-icon { color: var(--color-white); background: var(--dash-fg); }
@media (max-width: 700px) {
    .app-main-dashboard-ambient, .app-main-dashboard-module-art { display: none; }
    body:has(#main-content .app-main-dashboard) .app-topbar { height: 60px; padding-inline: 14px; }
    body:has(#main-content .app-main-dashboard) .app-topbar-brand { gap: 9px; font-size: 16px; }
    body:has(#main-content .app-main-dashboard) .app-topbar-brand .app-brand-logo { width: 38px; height: 38px; flex-basis: 38px; border-radius: 9px; }
    body.app-authenticated:has(#main-content .app-main-dashboard) #main-content { padding-top: 70px; }
    .app-main-dashboard { width: 100%; padding: 24px 0 36px; }
    .app-main-dashboard-hero { margin-bottom: 24px; }
    .app-main-dashboard-hero h1 { font-size: 28px; }
    .app-main-dashboard-hero p { margin-bottom: 24px; font-size: 15px; }
    .app-quick-search--hero { height: 50px; padding: 0 14px; }
    .app-quick-search--hero .app-quick-search-input { height: 48px; font-size: 15px; }
    .app-main-dashboard-grid { grid-template-columns: minmax(0, 440px); justify-content: center; }
    .app-main-dashboard-module { padding: 16px 14px 14px; }
    .app-main-dashboard-module-icon { flex-basis: 52px; width: 52px; height: 52px; }
    .app-main-dashboard-module-icon .app-icon { width: 24px; height: 24px; }
    .app-main-dashboard-module-heading h2 { font-size: 19px; }
    .app-main-dashboard-module-heading p { font-size: 13px; }
    .app-main-dashboard-shortcut { min-height: 44px; gap: 6px; padding: 5px; font-size: 12px; }
    .app-main-dashboard-shortcut .app-icon { flex-basis: 22px; width: 22px; height: 22px; padding: 6px; }
    .app-main-dashboard-module-link { display: none; }
}
@media (min-width: 701px) and (max-width: 1300px) {
    .app-main-dashboard { padding-top: 28px; }
    .app-main-dashboard-hero { margin-bottom: 28px; }
    .app-main-dashboard-hero h1 { font-size: 32px; }
    .app-main-dashboard-hero p { margin-bottom: 26px; font-size: 15px; }
    .app-quick-search--hero { height: 56px; }
    .app-quick-search--hero .app-quick-search-input { height: 52px; font-size: 15px; }
    .app-main-dashboard-module { padding: 18px 16px 16px; }
    .app-main-dashboard-module-heading { gap: 12px; }
    .app-main-dashboard-module-heading h2 { font-size: 19px; }
    .app-main-dashboard-module-heading p { font-size: 13px; }
    .app-main-dashboard-module-icon { flex-basis: 48px; width: 48px; height: 48px; border-radius: 12px; }
    .app-main-dashboard-module-icon .app-icon { width: 22px; height: 22px; }
    .app-main-dashboard-module-link { padding: 6px 9px; font-size: 12px; }
    .app-main-dashboard-shortcuts { gap: 8px; margin-top: 18px; }
    .app-main-dashboard-shortcut { min-height: 48px; gap: 7px; padding: 6px; font-size: 12px; }
    .app-main-dashboard-shortcut .app-icon { flex-basis: 20px; width: 20px; height: 20px; padding: 5px; border-radius: 9px; }
}
@media (max-width: 480px) {
    .app-main-dashboard-shortcuts { grid-template-columns: 1fr; }
}
.app-btn { border-radius: 8px; box-shadow: 0 1px 2px rgba(15, 23, 42, .025); transition: transform .14s ease, box-shadow .14s ease, background .14s ease; }
.app-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(37, 99, 235, .09); }
.app-table-wrap { border: 1px solid #dbe4ef; border-radius: 10px; box-shadow: var(--shadow-sm); overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
.app-data-card > .app-table-wrap { margin: 0; border: 0; border-radius: 0; box-shadow: none; }
.progress-statistics-card > .progress-table-wrap { border: 0; border-radius: 0; box-shadow: none; overflow-x: auto; overflow-y: hidden; }
.app-table thead th { background: #f8fafc; color: #475569; font-size: 12px; letter-spacing: .035em; text-transform: uppercase; }
.app-table tbody tr { transition: background .14s ease; }
.app-table tbody tr:hover { background: #f8fbff; }
.app-form input, .app-form select, .app-control { border-radius: 8px; border-color: #cbd5e1; box-shadow: inset 0 1px 2px rgba(15, 23, 42, .025); }
.app-form input:focus, .app-form select:focus, .app-form textarea:focus { border-color: var(--color-primary-600); box-shadow: 0 0 0 3px rgba(37, 99, 235, .12); }
.app-btn-primary { background: var(--color-primary-600); color: var(--color-white); }
.app-btn-primary:hover { background: var(--color-primary-700); }
.setting-toggle { gap: 13px; min-height: 28px; }
.setting-toggle-label { color: var(--color-gray-600); font-size: 13px; font-weight: 600; }
.setting-toggle input:checked ~ .setting-toggle-label { color: var(--color-primary-700); }
.cfg-ocr-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.app-summary-card { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-bottom: 12px; padding: 10px 14px; color: var(--color-gray-700); }
.app-summary-card strong { color: var(--color-gray-900); }
.app-summary-heading, .app-summary-metrics, .app-summary-total { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.app-summary-heading { display: flex; align-items: center; gap: 9px; min-width: 140px; }
.app-summary-heading > div { display: flex; flex-direction: column; gap: 1px; }
.app-summary-heading > div > span { color: var(--color-gray-500); font-size: 12px; }
.app-summary-icon { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; background: #eaf3ff; color: #155eef; }
.app-summary-icon .app-icon { width: 16px; height: 16px; }
.digital-file-statistics-table .data-entry-statistics-col-index { width: 4.5%; }
.digital-file-statistics-table .data-entry-statistics-col-user { width: 30%; }
.digital-file-statistics-table .digital-file-date-col { width: 100px; }
.digital-file-statistics-table .digital-file-size-col { width: 88px; }
.digital-file-statistics-table .digital-file-page-col { width: 5%; }
.digital-file-statistics-table .digital-file-converted-col { width: 76px; }
.digital-file-statistics-table .digital-file-date-size-cell { color: var(--color-gray-600); white-space: nowrap; }
.digital-file-statistics-table .app-document-date, .digital-file-statistics-table .app-document-size { display: block; line-height: 18px; }
.digital-file-statistics-table .app-document-size { color: var(--color-gray-500); font-size: 12px; }
.digital-file-statistics-table .progress-name-column { white-space: normal; }
.digital-file-statistics-table .progress-name-column,
.digital-file-statistics-table .data-entry-statistics-index-column,
.digital-file-statistics-table th,
.digital-file-statistics-table td { position: static; left: auto; right: auto; z-index: auto; }
.digital-file-statistics-table .app-cell-title { display: block; overflow-wrap: anywhere; }
.digital-file-statistics-table .app-document-path { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.digital-file-statistics-table .app-document-meta { display: flex; align-items: center; gap: 7px; min-width: 0; }
.digital-file-statistics-table .app-document-meta .app-document-path { flex: 1 1 auto; min-width: 0; }
.digital-file-statistics-table .app-document-meta .badge { flex: 0 0 auto; margin: 0; white-space: nowrap; }
.digital-file-statistics-table th, .digital-file-statistics-table td { padding: 6px 7px; }
.digital-file-statistics-table tbody tr { height: 44px; }
.digital-file-statistics-table tbody td { padding: 6px 8px; height: 46px; }
.digital-file-statistics-table tbody .progress-name-column { line-height: 17px; }
.digital-file-statistics-table tbody .app-document-date, .digital-file-statistics-table tbody .app-document-size { line-height: 16px; }
/* Ghi đè màu nhóm cột kế thừa từ .data-entry-statistics-table: 4 cột đầu xám trung tính, phần còn lại xanh đồng nhất */
.digital-file-statistics-table thead tr:first-child th.digital-file-fixed-column,
.digital-file-statistics-table thead tr:nth-child(2) th.digital-file-fixed-column { background: #eef1f3 !important; color: var(--color-gray-700) !important; }
.digital-file-statistics-table thead tr:first-child th.digital-file-pages-heading,
.digital-file-statistics-table thead tr:nth-child(2) th.digital-file-pages-heading { background: #dbeafe !important; color: #155eef !important; }
.digital-file-statistics-table tbody td:nth-child(-n+4) { background: transparent !important; color: var(--color-gray-700) !important; }
.digital-file-statistics-table tbody tr:nth-child(even) td:nth-child(-n+4) { background: transparent !important; }
.digital-file-statistics-table tbody td:nth-child(n+5) { background: #f5f9ff !important; color: #155eef !important; font-variant-numeric: tabular-nums; }
.digital-file-statistics-table tbody tr:nth-child(even) td:nth-child(n+5) { background: #f0f6ff !important; }
.digital-file-statistics-table tbody td:nth-child(n+5):nth-child(-n+16),
.digital-file-statistics-table tbody tr:nth-child(even) td:nth-child(n+5):nth-child(-n+16) { background: #f5f9ff !important; color: #155eef !important; }
.digital-file-statistics-table tbody tr:not(.data-entry-statistics-total) td:nth-child(n+5) { background-color: #f5f9ff !important; background-image: none !important; color: #155eef !important; }
.digital-file-statistics-table tbody tr:nth-child(even):not(.data-entry-statistics-total) td:nth-child(n+5) { background-color: #f5f9ff !important; }
.digital-file-statistics-table th,
.digital-file-statistics-table td { border-right: 1px solid #d7e0ea; }
.digital-file-statistics-table thead tr:first-child th:not([rowspan]) { border-bottom: 1px solid #c6d4e2; }
.digital-file-statistics-table tbody tr:hover td:nth-child(-n+4) { background: #f0f6ff !important; }
.digital-file-statistics-table tbody tr:hover td:nth-child(n+5) { background: #eaf3ff !important; }
.digital-file-statistics-table.data-entry-statistics-table .data-entry-statistics-total td:nth-child(-n+4) { background: #f1f3f5 !important; color: var(--color-gray-900) !important; }
.digital-file-statistics-table.data-entry-statistics-table .data-entry-statistics-total td:nth-child(n+5):nth-child(-n+16) { background: #eaf3ff !important; color: #175cd3 !important; }
.digital-file-statistics-table tbody td:nth-child(n+5),
.digital-file-statistics-table tbody tr:nth-child(even) td:nth-child(n+5),
.digital-file-statistics-table tbody tr:not(.data-entry-statistics-total) td:nth-child(n+5),
.digital-file-statistics-table tbody tr:nth-child(even):not(.data-entry-statistics-total) td:nth-child(n+5) { background: transparent !important; }
.digital-file-statistics-table tbody tr:nth-child(even) td { filter: none; }
.digital-file-statistics-table tbody tr.data-entry-statistics-total td:nth-child(n+5) { background: #f1f3f5 !important; color: var(--color-gray-900) !important; }
.digital-file-statistics-table .app-sort-button { text-decoration: none; }
.digital-file-statistics-table .app-sort-button.is-sorted { color: #155eef; font-weight: 700; }
.digital-file-statistics-table .app-sort-indicator { display: inline-flex; flex: 0 0 10px; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 10px; height: 16px; margin-left: 5px; text-decoration: none; }
.digital-file-statistics-table .app-sort-indicator::before,
.digital-file-statistics-table .app-sort-indicator::after { content: ""; display: block; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; }
.digital-file-statistics-table .app-sort-indicator::before { border-bottom: 6px solid #aab7c7; }
.digital-file-statistics-table .app-sort-indicator::after { border-top: 6px solid #aab7c7; }
.digital-file-statistics-table .app-sort-button.is-sorted .app-sort-indicator::before { border-bottom-color: currentColor; }
.digital-file-statistics-table .app-sort-button.is-sorted .app-sort-indicator::after { border-top-color: currentColor; opacity: .35; }
.digital-file-statistics-table .app-sort-button.is-sorted[data-direction="desc"] .app-sort-indicator::before { opacity: .35; }
.digital-file-statistics-table .app-sort-button.is-sorted[data-direction="desc"] .app-sort-indicator::after { opacity: 1; }
.app-summary-metrics { flex: 1 1 520px; }
.app-summary-metrics span, .app-summary-total span { display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border: 1px solid var(--color-gray-200); border-radius: 6px; background: var(--color-gray-50); white-space: nowrap; font-size: 12px; }
.app-summary-metrics b, .app-summary-total b { color: var(--color-gray-900); font-weight: 700; }
.app-summary-total { margin-left: auto; }
.app-cell-status { display: block; margin-top: 3px; color: var(--color-gray-500); font-size: 11px; font-weight: 400; }
.app-sort-button { border: 0; padding: 0; background: transparent; color: inherit; font: inherit; font-weight: inherit; cursor: pointer; }
.digital-file-statistics-table .app-sort-button { display: inline-flex; align-items: center; justify-content: center; gap: 4px; line-height: 1.2; }
.digital-file-report-toolbar .catalog-dynamic-filter-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 12px; }
.digital-file-report-toolbar .catalog-dynamic-filter-grid .app-field { width: auto !important; max-width: none !important; }
.app-sort-button:hover, .app-sort-button:focus-visible { color: var(--color-primary-600); text-decoration: none; }
.app-dialog-table-wrap { overflow-x: auto; }
.app-dialog-table { min-width: 620px; }
.app-dialog-table input { width: 100%; min-width: 130px; }
.app-document-issue-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    padding: 0.1rem;
    color: #dc2626;
    background: transparent;
    cursor: pointer;
}

.app-document-issue-indicator .app-icon {
    width: 1rem;
    height: 1rem;
}

.app-action-footer .app-btn-danger {
    background: var(--color-danger-600) !important;
    color: var(--color-white) !important;
}

.app-action-footer .app-btn-danger:hover {
    background: var(--color-danger-700, #b42318) !important;
}

.app-document-issue-submit {
    background: var(--color-danger-600, #d92d20) !important;
    color: #fff !important;
    border-color: var(--color-danger-600, #d92d20) !important;
}

.document-issue-content {
    white-space: pre-wrap;
}

.document-issue-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 12px 16px 10px;
    padding: 12px 16px;
    border: 1px solid #f5c2c7;
    border-radius: 8px;
    background: #fff5f5;
    color: #842029;
}

.document-issue-banner-icon {
    display: inline-flex;
    flex: 0 0 20px;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #dc3545;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
}

.document-issue-banner-content {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
    gap: 2px;
    font-size: 12px;
}

.document-issue-banner-content span {
    color: #9b454d;
    font-size: 11px;
}

.app-btn-sm,
.btn-sm {
    min-height: 30px;
    padding: 5px 10px;
    font-size: 12px;
}

.document-issue-dialog .app-dialog-body {
    padding-top: 10px;
    padding-bottom: 4px;
}

.document-issue-dialog .app-info-list dt,
.document-issue-dialog .app-info-list dd {
    padding: 8px 0;
}

.document-issue-dialog .app-dialog-footer {
    margin-top: 6px;
    padding-top: 8px;
    padding-bottom: 10px;
}

@media (max-width: 640px) {
    .document-issue-banner {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .document-issue-banner .app-btn {
        margin-left: 30px;
    }
}
/* Shared metadata table editor */
.metadata-table-field { grid-column: 1 / -1; min-width: 0; }
.metadata-table-panel { min-width: 0; padding: .5rem; border: 1px solid #c9d8e8; border-radius: .5rem; background: var(--color-white, #fff); }
.metadata-table-header { display: flex; align-items: center; justify-content: space-between; gap: .35rem; margin-bottom: .25rem; }
.metadata-table-header > strong { min-width: 0; color: var(--app-text, #344054); }
.metadata-table-toolbar, .metadata-table-paste-actions { display: flex; align-items: center; gap: .25rem; flex-wrap: wrap; margin: .2rem 0; }
.metadata-table-paste-actions { margin: .15rem 0 0; }
.metadata-table-header .metadata-table-toolbar { margin: 0; justify-content: flex-end; }
.metadata-table-scroll { overflow-x: auto; max-width: 100%; min-height: 0; }
.metadata-table-grid, .metadata-table-preview-table { width: 100%; min-width: 0; table-layout: fixed; border: 1px solid #c9d8e8; border-collapse: collapse; }
.metadata-table-grid th, .metadata-table-grid td, .metadata-table-preview-table th, .metadata-table-preview-table td { padding: 3px 6px; border: 1px solid #e4eaf1; vertical-align: middle; }
.metadata-table-grid th[data-table-column-key], .metadata-table-grid td[style*="metadata-table-column"] { width: var(--metadata-table-column-width, 120px); min-width: 120px; max-width: 360px; }
.metadata-table-grid.app-table thead th, .metadata-table-preview-table.app-table thead th { padding-block: 5px; background: #eef4fa; color: #344054; font-size: 12px; font-weight: 600; letter-spacing: normal; text-transform: none; }
.metadata-table-grid .metadata-table-cell, .metadata-table-preview input.metadata-table-preview-input { width: 100%; min-width: 0; height: 36px; padding: 1px 5px; border: 0; border-radius: 0; background-color: transparent; box-shadow: none; font-size: 12px; line-height: 1.2; }
.metadata-table-grid .metadata-table-cell::placeholder, .metadata-table-preview input.metadata-table-preview-input::placeholder { color: #98a2b3; font-style: italic; }
.metadata-table-grid .metadata-table-cell:focus, .metadata-table-preview input.metadata-table-preview-input:focus { border: 0; outline: 2px solid rgba(37, 99, 235, .3); outline-offset: -2px; background-color: var(--color-white); box-shadow: none; }
.metadata-table-index { width: 36px; padding-inline: 6px !important; text-align: center; color: #667085; font-size: 11px; }
.metadata-table-actions { width: 2.5rem; padding-inline: 2px !important; text-align: center; }
.metadata-table-remove-row { width: 28px; height: 28px; border: 0; padding: 0; background: transparent; }
.metadata-table-remove-row:hover { background: var(--color-danger-50, #fef2f2); }
.metadata-table-remove-row .app-icon { width: 16px; height: 16px; }
.metadata-table-quick-paste { border: 1px solid var(--color-primary-200, #bfd7ff); border-radius: .45rem; padding: .3rem; margin-bottom: .25rem; background: var(--color-primary-50, #f5f9ff); }
.metadata-table-quick-paste-heading { display: flex; align-items: center; justify-content: space-between; gap: .25rem; margin-bottom: .15rem; padding-bottom: .15rem; border-bottom: 1px solid var(--color-primary-200, #bfd7ff); }
.metadata-table-paste-actions .app-btn-sm { padding: .2rem .45rem; }
.metadata-table-quick-paste-heading strong { color: var(--app-text, #344054); }
.app-info-list dd.metadata-table-readonly-value { padding: 0; border-bottom: 0; }
.metadata-table-readonly-value .metadata-table-panel { border: 0; padding: 0; }
.metadata-table-readonly-value .metadata-table-scroll { min-height: 0; }
.history-diff-value { white-space: pre-line; overflow-wrap: anywhere; }
.history-diff-value--table { white-space: normal; }
.history-table-value-wrap { max-width: 100%; overflow-x: auto; white-space: normal; }
.history-table-value { min-width: 360px; border-collapse: collapse; font-size: 11px; line-height: 1.35; }
.history-table-value th, .history-table-value td { padding: 4px 7px; border: 1px solid #dbe5ef; text-align: left; vertical-align: top; }
.history-table-value th { background: #eef4fa; color: #344054; font-weight: 650; white-space: nowrap; }
.history-table-value td { background: #fff; color: #087f5b; white-space: nowrap; }
.metadata-table-paste-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.metadata-table-paste-close { flex: 0 0 auto; }
.metadata-table-paste-error { color: var(--app-danger, #b42318); margin-top: .25rem; }
@media (max-width: 640px) { .metadata-table-header { align-items: flex-start; flex-direction: column; } .metadata-table-header .metadata-table-toolbar { width: 100%; } }
.catalog-table-definition-list { display: grid; gap: .45rem; overflow-x: auto; }
.catalog-table-config-grid { align-items: stretch !important; }
.catalog-property-section-heading > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.catalog-table-config-grid .app-field { display: flex; flex-direction: column; }
.catalog-table-config-grid .app-field .app-control { margin-top: auto; }
.catalog-table-definition-list { padding-top: 2px; }
.catalog-table-definition-table { min-width: 1120px; }
.catalog-table-definition-row { display: grid; grid-template-columns: 24px 1fr 1.4fr 1fr 1.1fr auto auto auto auto; gap: .35rem; align-items: center; min-width: 790px; }
.catalog-table-column-grip { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 33px; color: var(--color-gray-400); font-size: 18px; letter-spacing: -3px; line-height: 1; cursor: grab; user-select: none; }
.catalog-table-column-grip:active { cursor: grabbing; }
.catalog-table-definition-row.ui-sortable-helper { background: #fff; box-shadow: 0 5px 14px rgba(16,24,40,.14); }
.catalog-table-column-placeholder { visibility: visible !important; min-height: 33px; border: 1px dashed var(--color-primary-300); border-radius: 6px; background: var(--color-primary-50); }
.catalog-table-definition-list + [data-table-column-add] { margin-top: 10px; }

/* Table field properties use a wider, compact grid so the column editor reads like a table. */
.ui-dialog:has(.catalog-table-columns-section) {
    width: min(1180px, calc(100vw - 48px)) !important;
    max-width: calc(100vw - 48px);
    height: min(820px, calc(100vh - 48px)) !important;
    max-height: calc(100vh - 48px) !important;
}
.ui-dialog:has(.catalog-table-columns-section) .ui-dialog-content { padding: 16px 20px 10px; }
.ui-dialog:has(.catalog-table-columns-section) .catalog-property-body { gap: 14px; padding: 2px 4px 10px; }
.ui-dialog:has(.catalog-table-columns-section) .catalog-property-intro { margin-bottom: 2px; }
.catalog-table-config-grid { grid-template-columns: minmax(260px, 1fr) minmax(320px, 1fr); gap: 18px; }
.catalog-table-config-grid .app-field { justify-content: space-between; }
.catalog-table-config-grid .app-field .app-control { margin-top: 0; }
.catalog-table-top-config-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: stretch; }
.catalog-table-top-config-grid > .app-field { display: flex; flex-direction: column; justify-content: space-between; }
.catalog-table-top-config-grid > .app-field .app-control { margin-top: 0; }
.catalog-table-top-config-stack { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: end; min-width: 0; }
.catalog-table-top-config-stack .app-field { display: flex; flex-direction: column; }
.catalog-table-top-config-stack .catalog-table-quick-paste { align-items: center; box-sizing: border-box; min-height: 42px; margin: 0; padding-block: 4px; }
.catalog-table-definition-head,
.catalog-table-definition-row {
    display: grid;
    grid-template-columns: 26px minmax(120px, 1fr) minmax(140px, 1.2fr) minmax(115px, 1fr) minmax(115px, 1fr) 84px 54px;
    gap: 6px;
    align-items: center;
    min-width: 930px;
}
.catalog-table-definition-scroll { overflow-x: auto; overflow-y: hidden; padding: 0 2px 2px; }
.catalog-table-definition-scroll .catalog-table-definition-table { min-width: 1080px; }
.catalog-table-definition-scroll .catalog-table-definition-list { display: table-row-group; overflow: visible; }
.catalog-table-definition-table th,
.catalog-table-definition-table td { padding: 5px 4px; }
.catalog-table-columns-section { font-size: 12px; }
.catalog-table-definition-table th:first-child { width: 28px; }
.catalog-table-definition-table th:nth-child(3), .catalog-table-definition-table td:nth-child(3) { width: 220px; min-width: 220px; }
.catalog-table-definition-table th:nth-child(6) { width: 84px; }
.catalog-table-definition-table th:last-child { width: 54px; }
.catalog-table-definition-table td { border-bottom: 1px solid var(--color-gray-200); }
.catalog-table-definition-table tr:last-child td { border-bottom: 0; }
.catalog-table-definition-table td .app-control { min-height: 34px; padding: 6px 8px; }
.catalog-table-definition-table .catalog-table-column-grip { width: 28px; padding-right: 0; }
.catalog-table-definition-table .catalog-table-required { width: 84px; text-align: center; }
.catalog-table-definition-table .catalog-table-required input { width: 16px; height: 16px; min-height: 16px; margin: 0; }
.catalog-table-definition-table .catalog-table-choice-source { min-width: 110px; }
.catalog-table-definition-table .catalog-table-choice-source .app-control + .app-control { margin-top: 4px; }
.catalog-table-definition-table .catalog-table-empty-cell { color: var(--color-gray-400); }
.catalog-table-definition-table th:nth-child(7), .catalog-table-definition-table td:nth-child(7) { width: 220px; min-width: 220px; }
.catalog-table-definition-table .catalog-table-actions { width: 54px; text-align: center; }
.catalog-table-definition-table .catalog-option-remove { font-size: 17px; }
.catalog-table-choice-source-box { display: grid; gap: 6px; min-width: 0; }
.catalog-table-choice-summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 8px; min-width: 0; }
.catalog-table-choice-summary strong { color: var(--color-gray-700); font-size: 11px; }
.catalog-table-choice-summary small { min-width: 0; overflow: hidden; color: var(--color-gray-500); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.catalog-table-choice-config { grid-row: 1 / span 2; grid-column: 2; font-size: 12px; font-weight: 400; line-height: 18px; white-space: nowrap; }
.catalog-table-choice-dialog-intro { display: grid; gap: 3px; margin-bottom: 14px; }
.catalog-table-choice-dialog-intro strong { color: var(--color-gray-900); font-size: 15px; }
.catalog-table-choice-dialog-intro span { color: var(--color-gray-500); font-size: 12px; }
.catalog-table-choice-dialog .catalog-table-source-switch { margin-bottom: 14px; }
.catalog-table-choice-dialog-panel[hidden] { display: none; }
.catalog-table-choice-dialog-panel { display: grid; gap: 6px; }
.catalog-table-choice-dialog-panel > label { margin: 0 !important; color: var(--color-gray-700); font-size: 12px; font-weight: 600; }
.catalog-table-choice-dialog-wrapper { width: min(620px, calc(100vw - 32px)) !important; max-width: calc(100vw - 32px); }
.catalog-table-choice-dialog-wrapper .ui-dialog-content { padding: 0 20px 16px; }
.catalog-table-choice-dialog-panel .catalog-options-table { width: 100%; table-layout: fixed; }
.catalog-table-choice-dialog-panel .catalog-options-table th, .catalog-table-choice-dialog-panel .catalog-options-table td { padding: 6px; }
.catalog-table-choice-dialog-panel .catalog-options-table th:first-child { width: 46%; }
.catalog-table-choice-dialog-panel .catalog-options-table th:nth-child(2) { width: 46%; }
.catalog-table-choice-actions { width: 42px; text-align: center !important; }
.catalog-table-choice-options-wrap { display: grid; gap: 10px; }
.catalog-table-choice-options-wrap .app-control { min-height: 34px; }
.catalog-table-choice-add { justify-self: start; min-height: 32px !important; padding: 6px 11px !important; font-size: 12px; }
.catalog-table-choice-dialog .app-dialog-footer { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--color-gray-200); }
.catalog-table-choice-dialog-error { margin-top: 10px; color: var(--color-danger-600, #b42318); font-size: 12px; }
.catalog-table-source-switch { display: inline-flex; width: max-content; max-width: 100%; padding: 2px; border: 1px solid var(--color-gray-200); border-radius: 7px; background: var(--color-gray-50); }
.catalog-table-source-switch label { display: inline-flex !important; align-items: center; margin: 0 !important; cursor: pointer; }
.catalog-table-source-switch input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.catalog-table-source-switch span { display: inline-flex; align-items: center; min-height: 26px; padding: 3px 9px; border-radius: 5px; color: var(--color-gray-500); font-size: 11px; font-weight: 600; white-space: nowrap; }
.catalog-table-source-switch input:checked + span { background: var(--color-white); color: var(--color-primary-600); box-shadow: 0 1px 3px rgba(16,24,40,.12); }
.catalog-table-source-switch input:focus-visible + span { outline: 2px solid var(--color-primary-600); outline-offset: 1px; }
.catalog-table-source-panel[hidden] { display: none; }
.catalog-table-source-panel { display: grid; gap: 3px; }
.catalog-table-source-panel .catalog-table-column-options { min-height: 58px; resize: vertical; }
.catalog-table-source-panel .catalog-table-catalog-select { width: 100%; }
.catalog-table-source-hint { display: block; color: var(--color-gray-500); font-size: 10px; line-height: 14px; }
.catalog-table-source-empty { display: block; padding: 7px 8px; border: 1px dashed var(--color-gray-300); border-radius: 5px; color: var(--color-gray-500); font-size: 11px; }
.catalog-table-definition-table .ui-sortable-helper { background: #fff; box-shadow: 0 5px 14px rgba(16,24,40,.14); }
.catalog-table-definition-table .catalog-table-column-placeholder td { height: 38px; border: 1px dashed var(--color-primary-300); background: var(--color-primary-50); }
.catalog-table-definition-head {
    padding: 8px 8px 7px;
    border: 1px solid var(--color-gray-200);
    border-bottom: 0;
    border-radius: 7px 7px 0 0;
    background: var(--color-gray-50);
    color: var(--color-gray-500);
    font-size: 11px;
    font-weight: 600;
}
.catalog-table-definition-row {
    min-height: 42px;
    padding: 4px 8px;
    border: 1px solid var(--color-gray-200);
    border-radius: 7px;
    background: #fff;
}
.catalog-table-definition-row .app-control { min-height: 34px; padding: 6px 8px; }
.catalog-table-definition-row > label { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; color: var(--color-gray-700); font-size: 12px; }
.catalog-table-definition-row > .app-btn { min-width: 32px; min-height: 32px; padding: 4px 7px; }
.catalog-table-columns-section .catalog-table-definition-list { gap: 5px; padding: 5px 2px 2px; }
.catalog-table-column-actions { display: flex; justify-content: flex-start; padding-top: 12px; }
.catalog-table-column-actions .app-btn { min-height: 34px; padding: 7px 14px; font-size: 13px; font-weight: 650; }
.catalog-table-column-actions .app-btn > span { font-size: 18px; line-height: 12px; vertical-align: -1px; }

@media (max-width: 760px) {
    .ui-dialog:has(.catalog-table-columns-section) { width: calc(100vw - 24px) !important; max-width: calc(100vw - 24px); }
    .catalog-table-config-grid { grid-template-columns: 1fr; gap: 10px; }
    .catalog-table-top-config-grid { grid-template-columns: 1fr; gap: 10px; }
}
.metadata-table-preview { overflow-x: auto; }
.catalog-table-config-grid { align-items: end !important; }
.catalog-table-config-grid .app-field .catalog-table-quick-paste { align-items: center !important; box-sizing: border-box; height: 46px; min-height: 46px; margin: 0; padding-block: 4px; }