/*
 * BJAS ERP — approved compact HRIS layout V4
 * ------------------------------------
 * A fresh, scoped visual layer for ERP pages.
 *
 * The body class is injected by the shared and standalone page shells. Pusat Aplikasi,
 * HRIS, POS Kasir/receipt print, and Barcode & Stiker never receive this
 * stylesheet, so their approved/original presentation remains untouched.
 *
 * This file changes presentation only. Existing ids, data attributes,
 * controls, form actions, table columns, modals, and JavaScript hooks remain
 * owned by their original templates.
 */

body.bjas-approved-layout {
    --compact-navy: #14345f;
    --compact-navy-strong: #0f294d;
    --compact-ink: #17253d;
    --compact-text: #3e526f;
    --compact-muted: #71829c;
    --compact-line: #d7e1ee;
    --compact-line-soft: #e7edf5;
    --compact-soft: #f6f8fc;
    --compact-active: #eaf1fb;
    --compact-success: #168457;
    --compact-warning: #9b6111;
    --compact-danger: #c22e43;
    --compact-sidebar: 232px;
    --compact-radius: 7px;
    --shell-header-height: 60px;
    --shell-breadcrumb-height: 36px;
    --shell-header-inline-padding: clamp(12px, 1.7vw, 24px);
    --shell-sidebar-width: var(--compact-sidebar);
    --bjas-module-sidebar-width: var(--compact-sidebar);
    --wms-bg: #ffffff;
    --wms-surface: #ffffff;
    --wms-surface-soft: var(--compact-soft);
    --wms-border: var(--compact-line);
    --wms-border-strong: #c6d3e3;
    --wms-text: var(--compact-ink);
    --wms-muted: var(--compact-muted);
    --wms-primary: var(--compact-navy);
    --wms-primary-ink: var(--compact-ink);
    margin: 0;
    background: #ffffff !important;
    color: var(--compact-text);
    font-size: 13px;
    line-height: 1.35;
}

body.bjas-approved-layout,
body.bjas-approved-layout button,
body.bjas-approved-layout input,
body.bjas-approved-layout select,
body.bjas-approved-layout textarea,
body.bjas-approved-layout table {
    font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body.bjas-approved-layout *,
body.bjas-approved-layout *::before,
body.bjas-approved-layout *::after {
    box-sizing: border-box;
}

/* Header and breadcrumb follow the compact HRIS shell. */
html body.bjas-approved-layout[data-has-app-shell="1"] > [data-internal-base-header] {
    min-height: 60px !important;
    height: 60px !important;
    max-height: 60px !important;
    padding: 6px var(--shell-header-inline-padding) !important;
    gap: 12px !important;
    border-top: 3px solid #1f3c38 !important;
    border-bottom: 1px solid var(--compact-line) !important;
    background: #ffffff !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

html body.bjas-approved-layout[data-has-app-shell="1"] > [data-internal-base-header] .internal-brand-pill {
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    padding: 0 12px !important;
    border-color: var(--compact-line) !important;
    border-radius: 17px !important;
    box-shadow: none !important;
    font-size: 11px !important;
}

html body.bjas-approved-layout[data-has-app-shell="1"] > [data-internal-base-header] .internal-topbar-separator {
    height: 22px !important;
}

html body.bjas-approved-layout[data-has-app-shell="1"] > [data-internal-base-header] .internal-shell-logo {
    height: 38px !important;
}

html body.bjas-approved-layout[data-has-app-shell="1"] > [data-internal-base-header] .internal-shell-logo img {
    height: 31px !important;
    max-height: 31px !important;
}

html body.bjas-approved-layout[data-has-app-shell="1"] > [data-internal-base-header] :is(
    .internal-ai-button,
    .notification-button.internal-icon-button,
    .profile-button.internal-user-pill,
    .internal-break-chip
) {
    min-height: 36px !important;
    height: 36px !important;
    max-height: 36px !important;
    border-color: var(--compact-line) !important;
    box-shadow: none !important;
    font-size: 11px !important;
}

html body.bjas-approved-layout[data-has-app-shell="1"] > [data-internal-base-header] .notification-button.internal-icon-button {
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
}

html body.bjas-approved-layout[data-has-app-shell="1"] > [data-internal-base-header] .avatar {
    flex-basis: 30px !important;
    width: 30px !important;
    min-width: 30px !important;
    height: 30px !important;
    background: var(--compact-navy-strong) !important;
    font-size: 11px !important;
}

html body.bjas-approved-layout[data-has-app-shell="1"] > .internal-shell-breadcrumb {
    min-height: 36px !important;
    height: 36px !important;
    padding: 0 var(--shell-header-inline-padding) !important;
    border-bottom: 1px solid var(--compact-line) !important;
    background: #fbfcfe !important;
}

html body.bjas-approved-layout[data-has-app-shell="1"] > .internal-shell-breadcrumb .breadcrumb-list li {
    font-size: 11px !important;
}

html body.bjas-approved-layout[data-has-app-shell="1"] > .internal-shell-breadcrumb .breadcrumb-list li + li::before {
    margin: 0 8px !important;
}

/* The page canvas is white, compact, and uses one narrow module sidebar. */
body.bjas-approved-layout > .layout,
body.bjas-approved-layout > .layout > .main,
body.bjas-approved-layout .page-content {
    min-width: 0;
    max-width: 100%;
    background: #ffffff !important;
}

body.bjas-approved-layout > .layout > .main {
    min-height: calc(100dvh - var(--shell-header-height) - var(--shell-breadcrumb-height)) !important;
}

body.bjas-approved-layout .page-content {
    padding: 0 !important;
}

body.bjas-approved-layout :is(
    .internal-module-layout,
    .module-layout,
    .clean-module-layout,
    .bjas-module-layout
):not(.clean-module-layout--no-sidebar):not(.internal-module-layout--hub) {
    grid-template-columns: var(--compact-sidebar) minmax(0, 1fr) !important;
    gap: 10px !important;
    width: min(100% - 24px, 1760px) !important;
    max-width: 1760px !important;
    margin: 10px auto 18px !important;
    padding: 0 !important;
    align-items: start !important;
}

body.bjas-approved-layout :is(
    .clean-module-layout--no-sidebar,
    .internal-module-layout--hub
) {
    width: min(100% - 24px, 1760px) !important;
    max-width: 1760px !important;
    margin: 10px auto 18px !important;
}

body.bjas-approved-layout :is(
    .internal-module-panel,
    .information-panel,
    .content-panel,
    .clean-content-panel,
    .module-main
) {
    min-width: 0 !important;
    max-width: 100% !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

body.bjas-approved-layout .clean-content-panel {
    padding: 0 !important;
}

/* Sidebar: one compact row per destination, no oversized cards. */
body.bjas-approved-layout :is(
    .module-sidebar,
    .clean-module-sidebar,
    .information-module-nav,
    .info-sidebar,
    .bjas-module-sidebar,
    .att-hub-side
) {
    width: var(--compact-sidebar) !important;
    min-width: var(--compact-sidebar) !important;
    max-width: var(--compact-sidebar) !important;
    margin: 0 !important;
    padding: 0 8px 10px !important;
    overflow: hidden !important;
    border: 0 !important;
    border-right: 1px solid var(--compact-line) !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

body.bjas-approved-layout :is(
    .module-sidebar-card,
    .information-sidebar-card,
    .hris-module-disclosure,
    .bjas-module-sidebar__surface,
    .bjas-module-sidebar__body
) {
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

body.bjas-approved-layout :is(
    .module-sidebar-head,
    .information-sidebar-head,
    .sidebar-title,
    .att-hub-side-title,
    .bjas-module-sidebar__title
) {
    display: flex !important;
    min-height: 40px !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 4px 4px 2px !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--compact-ink) !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
}

body.bjas-approved-layout .module-sidebar-kicker {
    display: block !important;
    color: var(--compact-warning) !important;
    font-size: 9px !important;
    line-height: 1.1 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
}

body.bjas-approved-layout :is(
    .module-sidebar-nav,
    .sidebar-menu,
    .hris-module-grid,
    .att-hub-side-nav,
    .bjas-module-sidebar__list
) {
    display: grid !important;
    gap: 2px !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.bjas-approved-layout :is(
    .module-sidebar-link,
    .sidebar-link,
    .hris-module-card,
    .att-hub-side-link,
    .bjas-module-sidebar__link
) {
    position: relative !important;
    display: grid !important;
    min-height: 32px !important;
    grid-template-columns: 21px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 5px 8px !important;
    border: 0 !important;
    border-radius: 6px !important;
    background: transparent !important;
    color: var(--compact-ink) !important;
    box-shadow: none !important;
    text-decoration: none !important;
}

body.bjas-approved-layout :is(
    .module-sidebar-link,
    .sidebar-link,
    .hris-module-card,
    .att-hub-side-link,
    .bjas-module-sidebar__link
):is(.active, .is-active, [aria-current="page"]) {
    background: var(--compact-active) !important;
    color: var(--compact-navy) !important;
}

body.bjas-approved-layout :is(
    .module-sidebar-link,
    .sidebar-link,
    .hris-module-card,
    .att-hub-side-link,
    .bjas-module-sidebar__link
):is(.active, .is-active, [aria-current="page"])::before {
    position: absolute !important;
    inset: 0 auto 0 -1px !important;
    width: 4px !important;
    height: auto !important;
    border-radius: 3px !important;
    background: var(--compact-navy) !important;
    content: "" !important;
}

body.bjas-approved-layout :is(
    .module-sidebar-icon,
    .sidebar-icon,
    .hris-module-nav-icon,
    .att-hub-side-ic,
    .bjas-module-sidebar__icon
) {
    display: grid !important;
    width: 20px !important;
    min-width: 20px !important;
    height: 20px !important;
    place-items: center !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.bjas-approved-layout :is(
    .module-sidebar-icon,
    .sidebar-icon,
    .hris-module-nav-icon,
    .att-hub-side-ic,
    .bjas-module-sidebar__icon
) img {
    width: 17px !important;
    height: 17px !important;
    object-fit: contain !important;
}

body.bjas-approved-layout :is(
    .module-sidebar-label,
    .att-hub-side-label,
    .bjas-module-sidebar__label
) {
    margin: 0 !important;
    overflow: hidden !important;
    color: inherit !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    font-weight: 650 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

body.bjas-approved-layout .module-sidebar-note,
body.bjas-approved-layout .module-sidebar-copy small {
    display: block !important;
    margin-top: 1px !important;
    color: var(--compact-muted) !important;
    font-size: 9px !important;
    line-height: 1.2 !important;
    white-space: normal !important;
}

/* Page titles are flat; large decorative hero cards are removed. */
body.bjas-approved-layout :is(
    .page-hero,
    .content-header,
    .module-hero,
    .wms-page-header,
    .wms-reference-header,
    .wms-dashboard-header,
    .category-brand-header,
    .approval-page-head,
    .request-compact-header,
    .so-compact-header,
    .attendance-page-header
) {
    display: flex !important;
    min-height: 38px !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 0 7px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--compact-line-soft) !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

body.bjas-approved-layout :is(
    .page-hero,
    .content-header,
    .module-hero,
    .wms-page-header,
    .wms-reference-header,
    .wms-dashboard-header,
    .category-brand-header,
    .approval-page-head,
    .request-compact-header,
    .so-compact-header,
    .attendance-page-header
) :is(h1, h2, .module-title, .request-compact-title, .so-compact-title) {
    margin: 0 !important;
    color: var(--compact-ink) !important;
    font-size: clamp(21px, 1.7vw, 26px) !important;
    line-height: 1.12 !important;
    letter-spacing: -0.035em !important;
    font-weight: 720 !important;
}

body.bjas-approved-layout :is(
    .page-eyebrow,
    .module-eyebrow,
    .wms-eyebrow,
    .wms-stock-kicker,
    .wms-product-editor-kicker,
    .category-brand-eyebrow,
    .approval-kicker,
    .so-compact-kicker
) {
    display: block !important;
    margin: 0 0 2px !important;
    color: var(--compact-muted) !important;
    font-size: 9px !important;
    line-height: 1.1 !important;
    letter-spacing: .06em !important;
    text-transform: uppercase !important;
}

body.bjas-approved-layout :is(
    .page-hero,
    .content-header,
    .module-hero,
    .wms-page-header,
    .wms-reference-header,
    .wms-dashboard-header,
    .category-brand-header,
    .approval-page-head,
    .request-compact-header,
    .so-compact-header,
    .attendance-page-header
) :is(p, .module-description, .wms-dashboard-desc, .request-compact-subtitle, .so-compact-subtitle) {
    max-width: 66ch !important;
    margin: 2px 0 0 !important;
    overflow: hidden !important;
    color: var(--compact-muted) !important;
    font-size: 11px !important;
    line-height: 1.3 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

body.bjas-approved-layout :is(
    .wms-page-stack,
    .wms-module-stack,
    .wms-compact-flow,
    .category-brand-page,
    .spreadsheet-center-page,
    .approval-page,
    .audit-page,
    .stock-opname-shell,
    .internal-band-stack,
    .attendance-page
) {
    gap: 7px !important;
}

/* Flat summary strips: dense, readable, and never oversized. */
body.bjas-approved-layout :is(
    .wms-kpi-grid,
    .summary-grid,
    .meta-grid,
    .category-brand-kpis,
    .so-status-strip,
    .att-stats,
    .sales-log-summary-grid,
    .document-approval-stats
) {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 0 !important;
    overflow: hidden !important;
    border: 1px solid var(--compact-line) !important;
    border-radius: var(--compact-radius) !important;
    background: #ffffff !important;
}

body.bjas-approved-layout :is(
    .wms-kpi-card,
    .summary-card,
    .meta-card,
    .category-brand-kpi,
    .card-mini,
    .att-stat,
    .sales-log-summary-cell,
    .document-approval-stat-card
) {
    min-height: 52px !important;
    margin: 0 !important;
    padding: 7px 11px !important;
    border: 0 !important;
    border-right: 1px solid var(--compact-line) !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

body.bjas-approved-layout :is(
    .wms-kpi-card,
    .summary-card,
    .meta-card,
    .category-brand-kpi,
    .card-mini,
    .att-stat,
    .sales-log-summary-cell,
    .document-approval-stat-card
):last-child {
    border-right: 0 !important;
}

body.bjas-approved-layout :is(
    .wms-kpi-card,
    .summary-card,
    .meta-card,
    .category-brand-kpi,
    .card-mini,
    .att-stat,
    .sales-log-summary-cell,
    .document-approval-stat-card
) :is(span, p, small, .sales-log-summary-label) {
    margin: 0 !important;
    color: var(--compact-muted) !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

body.bjas-approved-layout :is(
    .wms-kpi-card,
    .summary-card,
    .meta-card,
    .category-brand-kpi,
    .card-mini,
    .att-stat,
    .sales-log-summary-cell,
    .document-approval-stat-card
) :is(strong, h3, .sales-log-summary-value) {
    margin: 2px 0 0 !important;
    color: var(--compact-ink) !important;
    font-size: 18px !important;
    line-height: 1.1 !important;
    font-weight: 700 !important;
}

/* Panels, filters, forms, tables, and actions share one compact rhythm. */
body.bjas-approved-layout :is(
    .box,
    .form-box,
    .table-box,
    .filter-panel,
    .content-card,
    .wms-card,
    .wms-panel,
    .ops-card,
    .category-brand-panel,
    .spreadsheet-list-panel,
    .spreadsheet-preview-panel,
    .approval-queue-panel,
    .approval-detail-panel,
    .att-panel,
    .bjas-admin-panel
) {
    min-width: 0 !important;
    border: 1px solid var(--compact-line) !important;
    border-radius: var(--compact-radius) !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

body.bjas-approved-layout :is(
    .section-title,
    .internal-section-head,
    .category-brand-panel-header,
    .wms-stock-table-toolbar,
    .approval-panel-head,
    .att-panel-head,
    .bjas-admin-panel-head
) {
    display: flex !important;
    min-height: 42px !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 6px 10px !important;
    border-bottom: 1px solid var(--compact-line) !important;
    background: #ffffff !important;
}

body.bjas-approved-layout :is(
    .section-title,
    .internal-section-head,
    .category-brand-panel-header,
    .wms-stock-table-toolbar,
    .approval-panel-head,
    .att-panel-head,
    .bjas-admin-panel-head
) :is(h2, h3) {
    margin: 0 !important;
    color: var(--compact-ink) !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
}

body.bjas-approved-layout :is(
    .section-title,
    .internal-section-head,
    .category-brand-panel-header,
    .wms-stock-table-toolbar,
    .approval-panel-head,
    .att-panel-head,
    .bjas-admin-panel-head
) p {
    margin: 2px 0 0 !important;
    color: var(--compact-muted) !important;
    font-size: 10px !important;
    line-height: 1.25 !important;
}

body.bjas-approved-layout :is(
    .filter-grid,
    .filter-bar,
    .products-filter-bar,
    .sales-log-filter-grid,
    .category-brand-toolbar,
    .taxonomy-review-toolbar
) {
    gap: 6px !important;
    padding: 6px 8px !important;
    border-color: var(--compact-line) !important;
    background: #ffffff !important;
}

body.bjas-approved-layout :is(
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    select,
    textarea
) {
    min-height: 34px !important;
    border: 1px solid var(--compact-line) !important;
    border-radius: var(--compact-radius) !important;
    background: #ffffff !important;
    color: var(--compact-ink) !important;
    box-shadow: none !important;
    font-size: 12px !important;
}

body.bjas-approved-layout :is(input, select):not([type="checkbox"]):not([type="radio"]):not([type="range"]) {
    height: 34px !important;
    padding: 0 9px !important;
}

body.bjas-approved-layout textarea {
    min-height: 62px !important;
    padding: 7px 9px !important;
}

/*
 * Search-field contract
 * Icons always occupy a dedicated 18 px lane. The text caret and placeholder
 * start after that lane, so neither inline SVGs nor legacy pseudo-icons can
 * overlap "Cari…"/"Search…" copy at any breakpoint.
 */
body.bjas-approved-layout :is(
    .search-field,
    .internal-search-wrap,
    .ai-search,
    .chat-search-row,
    .chat-thread-search-field,
    .schedule-search-field,
    .approval-filter-search,
    .bjas-admin-list-search,
    [class*="search-field"],
    [class*="search-wrap"],
    [class*="search-box"],
    [class*="search-row"]
) {
    position: relative !important;
}

body.bjas-approved-layout :is(
    .search-field,
    .internal-search-wrap,
    .ai-search,
    .chat-search-row,
    .chat-thread-search-field,
    .schedule-search-field,
    .approval-filter-search,
    .bjas-admin-list-search,
    [class*="search-field"],
    [class*="search-wrap"],
    [class*="search-box"],
    [class*="search-row"]
) > :is(
    svg,
    img,
    .search-icon,
    [class*="search-icon"]
) {
    position: absolute !important;
    z-index: 2 !important;
    top: 50% !important;
    left: 11px !important;
    display: block !important;
    width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
    transform: translateY(-50%) !important;
    color: #71829c !important;
    object-fit: contain !important;
    pointer-events: none !important;
}

body.bjas-approved-layout :is(
    .search-field,
    .internal-search-wrap,
    .ai-search,
    .chat-search-row,
    .chat-thread-search-field,
    .schedule-search-field,
    .approval-filter-search,
    .bjas-admin-list-search,
    [class*="search-field"],
    [class*="search-wrap"],
    [class*="search-box"],
    [class*="search-row"]
) > input:not([type="checkbox"]):not([type="radio"]),
body.bjas-approved-layout :is(
    .search-field,
    .internal-search-wrap,
    .ai-search,
    .chat-search-row,
    .chat-thread-search-field,
    .schedule-search-field,
    .approval-filter-search,
    .bjas-admin-list-search,
    [class*="search-field"],
    [class*="search-wrap"],
    [class*="search-box"],
    [class*="search-row"]
) input[type="search"] {
    padding-left: 38px !important;
    text-indent: 0 !important;
}

body.bjas-approved-layout :is(
    .search-field,
    .internal-search-wrap,
    .ai-search,
    .chat-search-row,
    .chat-thread-search-field,
    .schedule-search-field,
    .approval-filter-search,
    .bjas-admin-list-search,
    [class*="search-field"],
    [class*="search-wrap"],
    [class*="search-box"],
    [class*="search-row"]
) > input::placeholder {
    overflow: hidden;
    color: #8a99ad !important;
    text-overflow: ellipsis;
    opacity: 1;
}

body.bjas-approved-layout :is(label, .field-label, .form-field > span) {
    color: var(--compact-text) !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    font-weight: 650 !important;
}

body.bjas-approved-layout :is(.form-grid, .wms-form-grid, .ops-config-grid, .ops-entry-grid) {
    gap: 7px !important;
}

body.bjas-approved-layout :is(
    button,
    .button,
    .btn,
    .action-btn,
    .primary-button,
    .secondary-button,
    .ghost-button
):not(.notification-button):not(.profile-button):not(.sidebar-main-trigger):not(.sidebar-icon-button) {
    min-height: 32px;
    border-radius: var(--compact-radius);
    font-size: 12px;
}

body.bjas-approved-layout :is(
    .primary,
    .button-primary,
    .primary-button,
    .is-primary
) {
    border-color: var(--compact-navy) !important;
    background: var(--compact-navy) !important;
    color: #ffffff !important;
}

body.bjas-approved-layout :is(.table-scroll, .table-responsive, .table-wrap) {
    max-width: 100% !important;
    overflow: auto !important;
}

body.bjas-approved-layout table {
    width: 100% !important;
    border-collapse: collapse !important;
    background: #ffffff !important;
}

body.bjas-approved-layout :is(th, td) {
    height: 36px !important;
    padding: 5px 9px !important;
    border-bottom: 1px solid var(--compact-line) !important;
    color: var(--compact-text) !important;
    font-size: 11px !important;
    line-height: 1.25 !important;
    vertical-align: middle !important;
}

body.bjas-approved-layout th {
    background: #f7f9fc !important;
    color: var(--compact-ink) !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
}

body.bjas-approved-layout tbody tr:hover {
    background: #f8fbff !important;
}

body.bjas-approved-layout :is(
    .badge,
    .status-pill,
    .surface-badge,
    .sales-log-badge,
    .att-chip,
    .barcode-chip
) {
    min-height: 22px !important;
    padding: 3px 7px !important;
    border-radius: 999px !important;
    font-size: 10px !important;
    line-height: 1 !important;
}

body.bjas-approved-layout :is(.pagination, .pagination-nav) {
    min-height: 36px !important;
    padding: 4px 8px !important;
    font-size: 11px !important;
}

/*
 * Module-specific shells. These selectors intentionally style the real ERP
 * structures instead of replacing their markup, actions, IDs, or JS hooks.
 */

/* BJAS Admin */
body.bjas-approved-layout .bjas-admin-shell {
    display: grid !important;
    grid-template-columns: var(--compact-sidebar) minmax(0, 1fr) !important;
    gap: 10px !important;
    width: min(100% - 24px, 1760px) !important;
    max-width: 1760px !important;
    margin: 10px auto 18px !important;
    padding: 0 !important;
    background: #ffffff !important;
}

body.bjas-approved-layout .bjas-admin-sidebar {
    width: var(--compact-sidebar) !important;
    min-width: 0 !important;
    padding: 0 8px 10px !important;
    border: 0 !important;
    border-right: 1px solid var(--compact-line) !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

body.bjas-approved-layout .bjas-admin-sidebar-head {
    min-height: 40px !important;
    padding: 4px 4px 2px !important;
    border: 0 !important;
    background: transparent !important;
}

body.bjas-approved-layout .bjas-admin-sidebar-head > span,
body.bjas-approved-layout .bjas-admin-sidebar-head > small,
body.bjas-approved-layout .bjas-admin-kicker {
    display: block !important;
    color: var(--compact-muted) !important;
    font-size: 9px !important;
    line-height: 1.15 !important;
}

body.bjas-approved-layout .bjas-admin-sidebar-head strong {
    color: var(--compact-ink) !important;
    font-size: 16px !important;
}

body.bjas-approved-layout .bjas-admin-nav {
    display: grid !important;
    gap: 2px !important;
}

body.bjas-approved-layout .bjas-admin-nav-link {
    position: relative !important;
    display: grid !important;
    min-height: 32px !important;
    grid-template-columns: 21px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 5px 8px !important;
    border: 0 !important;
    border-radius: 6px !important;
    background: transparent !important;
    color: var(--compact-ink) !important;
    font-size: 12px !important;
    font-weight: 650 !important;
    box-shadow: none !important;
}

body.bjas-approved-layout .bjas-admin-nav-link.is-active {
    background: var(--compact-active) !important;
    color: var(--compact-navy) !important;
}

body.bjas-approved-layout .bjas-admin-nav-link.is-active::before {
    position: absolute;
    inset: 0 auto 0 -1px;
    width: 4px;
    border-radius: 3px;
    background: var(--compact-navy);
    content: "";
}

body.bjas-approved-layout .bjas-admin-nav-icon,
body.bjas-approved-layout .bjas-admin-nav-icon img {
    width: 17px !important;
    height: 17px !important;
}

body.bjas-approved-layout .bjas-admin-main {
    display: grid !important;
    min-width: 0 !important;
    align-content: start !important;
    gap: 7px !important;
    padding: 0 !important;
}

body.bjas-approved-layout .bjas-admin-header {
    display: flex !important;
    min-height: 38px !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    padding: 0 0 7px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--compact-line-soft) !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

body.bjas-approved-layout .bjas-admin-header h1 {
    margin: 0 !important;
    color: var(--compact-ink) !important;
    font-size: clamp(21px, 1.7vw, 26px) !important;
    line-height: 1.12 !important;
}

body.bjas-approved-layout .bjas-admin-header p {
    max-width: 72ch !important;
    margin: 2px 0 0 !important;
    overflow: hidden !important;
    color: var(--compact-muted) !important;
    font-size: 11px !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

body.bjas-approved-layout .bjas-admin-summary-strip {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 0 !important;
    border: 1px solid var(--compact-line) !important;
    border-radius: var(--compact-radius) !important;
    background: #ffffff !important;
}

body.bjas-approved-layout .bjas-admin-summary-strip > div {
    min-height: 52px !important;
    padding: 7px 11px !important;
    border-right: 1px solid var(--compact-line) !important;
}

body.bjas-approved-layout .bjas-admin-summary-strip > div:last-child {
    border-right: 0 !important;
}

body.bjas-approved-layout .bjas-admin-summary-strip span {
    color: var(--compact-muted) !important;
    font-size: 10px !important;
}

body.bjas-approved-layout .bjas-admin-summary-strip strong {
    display: block !important;
    margin-top: 2px !important;
    color: var(--compact-ink) !important;
    font-size: 18px !important;
}

body.bjas-approved-layout .bjas-admin-card-grid,
body.bjas-approved-layout .bjas-admin-card-row {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 7px !important;
}

body.bjas-approved-layout .bjas-admin-card-row {
    grid-column: 1 / -1 !important;
}

body.bjas-approved-layout .bjas-admin-action-card {
    display: grid !important;
    min-height: 58px !important;
    grid-template-columns: 26px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 7px !important;
    padding: 7px 9px !important;
    border: 1px solid var(--compact-line) !important;
    border-radius: var(--compact-radius) !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

body.bjas-approved-layout .bjas-admin-action-card > p,
body.bjas-approved-layout .bjas-admin-action-card > .bjas-admin-card-badge {
    display: block !important;
    margin: 1px 0 0 !important;
    color: var(--compact-muted) !important;
    font-size: 9px !important;
    line-height: 1.2 !important;
}

body.bjas-approved-layout .bjas-admin-action-card > .bjas-admin-card-badge {
    display: inline-flex !important;
    width: fit-content !important;
    padding: 1px 5px !important;
    border-radius: 999px !important;
}

body.bjas-approved-layout .bjas-admin-action-card > strong {
    min-width: 0 !important;
    color: var(--compact-ink) !important;
    font-size: 12px !important;
}

body.bjas-approved-layout .bjas-admin-card-icon,
body.bjas-approved-layout .bjas-admin-card-icon img {
    width: 22px !important;
    height: 22px !important;
}

/* CRM */
body.bjas-approved-layout.crm-page-shell :is(.summary, .meta-grid) {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 0 !important;
    overflow: hidden !important;
    margin: 0 0 7px !important;
    border: 1px solid var(--compact-line) !important;
    border-radius: var(--compact-radius) !important;
}

body.bjas-approved-layout.crm-page-shell :is(.summary > *, .meta-grid > *) {
    min-height: 52px !important;
    padding: 7px 11px !important;
    border: 0 !important;
    border-right: 1px solid var(--compact-line) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

body.bjas-approved-layout.crm-page-shell :is(.summary > *, .meta-grid > *):last-child {
    border-right: 0 !important;
}

body.bjas-approved-layout .crm-local-nav-box {
    display: flex !important;
    min-height: 42px !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    margin-bottom: 7px !important;
    padding: 5px 8px !important;
}

body.bjas-approved-layout .crm-local-nav {
    display: flex !important;
    gap: 4px !important;
}

body.bjas-approved-layout .crm-local-nav-box > .helper-text {
    max-width: 62ch !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* Chat and AI keep their own inner scrolling so page chrome does not create
   an unnecessary second vertical scrollbar on desktop. */
body.bjas-approved-layout .chat-shell {
    display: grid !important;
    height: calc(100dvh - var(--shell-header-height) - var(--shell-breadcrumb-height) - 56px) !important;
    min-height: 480px !important;
    grid-template-columns: minmax(260px, 300px) minmax(0, 1fr) !important;
    overflow: hidden !important;
    border: 1px solid var(--compact-line) !important;
    border-radius: var(--compact-radius) !important;
    box-shadow: none !important;
}

body.bjas-approved-layout .chat-sidebar-panel {
    min-width: 0 !important;
    overflow: hidden !important;
    border-right: 1px solid var(--compact-line) !important;
    background: #ffffff !important;
}

body.bjas-approved-layout :is(
    .chat-sidebar-head,
    .chat-main-head,
    .chat-search-row,
    .chat-tab-row,
    .chat-composer
) {
    min-height: 40px !important;
    padding: 5px 8px !important;
    border-color: var(--compact-line) !important;
}

body.bjas-approved-layout :is(.chat-thread-card, .chat-contact-card) {
    min-height: 52px !important;
    padding: 6px 8px !important;
    border-radius: 5px !important;
}

body.bjas-approved-layout .chat-message-board {
    min-height: 0 !important;
    padding: 8px !important;
}

body.bjas-approved-layout .ai-shell {
    display: grid !important;
    height: calc(100dvh - var(--shell-header-height) - var(--shell-breadcrumb-height) - 20px) !important;
    min-height: 500px !important;
    grid-template-columns: var(--compact-sidebar) minmax(0, 1fr) !important;
    overflow: hidden !important;
    border: 1px solid var(--compact-line) !important;
    border-radius: var(--compact-radius) !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

body.bjas-approved-layout .ai-sidebar {
    width: var(--compact-sidebar) !important;
    padding: 8px !important;
    border-right: 1px solid var(--compact-line) !important;
    background: #ffffff !important;
}

body.bjas-approved-layout .ai-brand-row {
    min-height: 38px !important;
    padding: 0 2px 5px !important;
}

body.bjas-approved-layout .ai-nav {
    gap: 2px !important;
}

body.bjas-approved-layout .ai-nav-button {
    min-height: 32px !important;
    padding: 5px 8px !important;
    border-radius: 6px !important;
    font-size: 12px !important;
}

body.bjas-approved-layout .ai-content-header,
body.bjas-approved-layout .ai-toolbar {
    min-height: 42px !important;
    padding: 6px 10px !important;
    border-color: var(--compact-line) !important;
}

body.bjas-approved-layout .ai-content-header h1 {
    font-size: 17px !important;
}

body.bjas-approved-layout .ai-message-list {
    min-height: 0 !important;
    padding: 10px !important;
}

/* Schedule, approvals, sales log, and operational workspaces */
body.bjas-approved-layout :is(
    .schedule-page-heading,
    .schedule-leader-page-heading,
    .sales-log-header,
    .approval-page-header
) {
    min-height: 38px !important;
    margin: 0 0 7px !important;
    padding: 0 0 7px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--compact-line-soft) !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

body.bjas-approved-layout :is(
    .schedule-page-title,
    .sales-log-title,
    .approval-page-title
) {
    margin: 0 !important;
    color: var(--compact-ink) !important;
    font-size: clamp(21px, 1.7vw, 26px) !important;
}

body.bjas-approved-layout :is(
    .schedule-page-description,
    .sales-log-subtitle,
    .approval-page-desc
) {
    margin: 2px 0 0 !important;
    overflow: hidden !important;
    color: var(--compact-muted) !important;
    font-size: 11px !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

body.bjas-approved-layout :is(
    .schedule-filter-bar,
    .schedule-leader-toolbar,
    .schedule-matrix-toolbar,
    .approval-filter-bar,
    .sales-log-filter-card
) {
    gap: 6px !important;
    margin-bottom: 7px !important;
    padding: 6px 8px !important;
    border: 1px solid var(--compact-line) !important;
    border-radius: var(--compact-radius) !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

body.bjas-approved-layout :is(
    .schedule-advanced-panel,
    .schedule-board-shell,
    .schedule-matrix-wrap,
    .schedule-shift-card,
    .approval-queue-panel,
    .approval-detail-panel,
    .sales-log-table-card,
    .pos-closing-card
) {
    border: 1px solid var(--compact-line) !important;
    border-radius: var(--compact-radius) !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

body.bjas-approved-layout .sales-log-summary-strip {
    margin-bottom: 7px !important;
}

body.bjas-approved-layout .attendance-photo-workspace,
body.bjas-approved-layout .attendance-capture-grid {
    gap: 7px !important;
}

body.bjas-approved-layout :is(
    .attendance-overview-card,
    .attendance-capture-card,
    .attendance-form-panel,
    .attendance-history-card,
    .attendance-note-panel
) {
    border: 1px solid var(--compact-line) !important;
    border-radius: var(--compact-radius) !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

/* Dashboard/module shortcut cards become short icon rows. */
body.bjas-approved-layout :is(
    .wms-dashboard-quick-grid,
    .module-shortcut-grid,
    .information-policy-grid,
    .internal-hub-card-grid
) {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 7px !important;
}

body.bjas-approved-layout :is(
    .wms-dashboard-quick-card,
    .module-shortcut-card,
    .information-policy-card,
    .internal-hub-card
) {
    min-height: 58px !important;
    padding: 7px 9px !important;
    border: 1px solid var(--compact-line) !important;
    border-radius: var(--compact-radius) !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

body.bjas-approved-layout :is(
    .wms-dashboard-quick-icon,
    .module-shortcut-icon,
    .internal-hub-card-icon
) {
    width: 30px !important;
    height: 30px !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: #eef4fd !important;
}

body.bjas-approved-layout :is(
    .wms-dashboard-quick-icon,
    .module-shortcut-icon,
    .internal-hub-card-icon
) :is(img, svg) {
    width: 17px !important;
    height: 17px !important;
}

body.bjas-approved-layout :is(
    .wms-dashboard-quick-card,
    .module-shortcut-card,
    .information-policy-card,
    .internal-hub-card
) :is(strong, h3) {
    font-size: 12px !important;
}

body.bjas-approved-layout :is(
    .wms-dashboard-quick-card,
    .module-shortcut-card,
    .information-policy-card,
    .internal-hub-card
) :is(small, p, .module-shortcut-desc) {
    display: block !important;
    margin: 2px 0 0 !important;
    color: var(--compact-muted) !important;
    font-size: 9px !important;
    line-height: 1.2 !important;
}

body.bjas-approved-layout :is(
    .wms-dashboard-quick-badge,
    .module-shortcut-badge,
    .module-shortcut-scope
) {
    display: inline-flex !important;
    width: fit-content !important;
    margin-top: 3px !important;
    padding: 1px 5px !important;
    border-radius: 999px !important;
    font-size: 8px !important;
    line-height: 1.2 !important;
}

/* Modals retain every field/action but lose excessive padding and radius. */
body.bjas-approved-layout :is(
    .modal-card,
    .modal-content,
    .picker-modal-panel,
    .category-brand-modal-card,
    .dialog-panel
) {
    width: min(680px, calc(100vw - 24px));
    max-height: min(88dvh, 760px);
    overflow: auto;
    border: 1px solid var(--compact-line) !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    box-shadow: 0 18px 50px rgba(15, 37, 65, 0.16) !important;
}

body.bjas-approved-layout :is(
    .modal-head,
    .modal-header,
    .modal-body,
    .modal-footer,
    .picker-modal-head,
    .picker-modal-body,
    .picker-modal-footer
) {
    padding: 9px 11px !important;
}

/* Hidden content remains hidden, regardless of legacy layout rules. */
body.bjas-approved-layout [hidden] {
    display: none !important;
}

@media (max-width: 1180px) {
    body.bjas-approved-layout {
        --compact-sidebar: 216px;
    }

    body.bjas-approved-layout :is(
        .wms-dashboard-quick-grid,
        .module-shortcut-grid,
        .information-policy-grid,
        .internal-hub-card-grid
    ) {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    body.bjas-approved-layout .bjas-admin-card-grid,
    body.bjas-approved-layout .bjas-admin-card-row {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 900px) {
    body.bjas-approved-layout :is(
        .internal-module-layout,
        .module-layout,
        .clean-module-layout,
        .bjas-module-layout
    ):not(.clean-module-layout--no-sidebar):not(.internal-module-layout--hub) {
        grid-template-columns: minmax(0, 1fr) !important;
        width: min(100% - 16px, 100%) !important;
        margin: 8px auto 14px !important;
    }

    body.bjas-approved-layout :is(
        .module-sidebar,
        .clean-module-sidebar,
        .information-module-nav,
        .info-sidebar,
        .bjas-module-sidebar,
        .att-hub-side
    ) {
        width: min(290px, 86vw) !important;
        min-width: 0 !important;
        max-width: min(290px, 86vw) !important;
    }

    body.bjas-approved-layout :is(
        .wms-kpi-grid,
        .summary-grid,
        .meta-grid,
        .category-brand-kpis,
        .so-status-strip,
        .att-stats,
        .sales-log-summary-grid,
        .document-approval-stats
    ) {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    body.bjas-approved-layout :is(
        .wms-kpi-card,
        .summary-card,
        .meta-card,
        .category-brand-kpi,
        .card-mini,
        .att-stat,
        .sales-log-summary-cell,
        .document-approval-stat-card
    ):nth-child(2n) {
        border-right: 0 !important;
    }

    body.bjas-approved-layout .bjas-admin-shell {
        grid-template-columns: minmax(0, 1fr) !important;
        width: calc(100% - 16px) !important;
        margin: 8px auto 14px !important;
    }

    body.bjas-approved-layout .bjas-admin-sidebar {
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 0 7px !important;
        overflow: hidden !important;
        border-right: 0 !important;
        border-bottom: 1px solid var(--compact-line) !important;
        transform: none !important;
    }

    body.bjas-approved-layout .bjas-admin-sidebar-head {
        min-height: 32px !important;
    }

    body.bjas-approved-layout .bjas-admin-nav {
        display: flex !important;
        overflow-x: auto !important;
        padding-bottom: 2px !important;
    }

    body.bjas-approved-layout .bjas-admin-nav-link {
        min-width: max-content !important;
        flex: 0 0 auto !important;
    }

    body.bjas-approved-layout .chat-shell {
        height: calc(100dvh - var(--shell-header-height) - var(--shell-breadcrumb-height) - 44px) !important;
        grid-template-columns: minmax(230px, 42%) minmax(0, 1fr) !important;
    }

    body.bjas-approved-layout .ai-shell {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body.bjas-approved-layout .ai-sidebar {
        position: fixed !important;
        z-index: 360 !important;
        inset: calc(var(--shell-header-height) + var(--shell-breadcrumb-height)) auto 0 0 !important;
        width: min(290px, 86vw) !important;
        transform: translateX(-105%);
    }

    body.bjas-approved-layout .ai-shell.sidebar-open .ai-sidebar {
        transform: translateX(0);
    }

    body.bjas-approved-layout.crm-page-shell :is(.summary, .meta-grid),
    body.bjas-approved-layout .bjas-admin-summary-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    body.bjas-approved-layout.crm-page-shell :is(.summary > *, .meta-grid > *):nth-child(2n),
    body.bjas-approved-layout .bjas-admin-summary-strip > div:nth-child(2n) {
        border-right: 0 !important;
    }
}

@media (max-width: 640px) {
    body.bjas-approved-layout {
        --shell-header-height: 54px;
        --shell-breadcrumb-height: 34px;
        --shell-header-inline-padding: 9px;
        padding-bottom: env(safe-area-inset-bottom);
    }

    html body.bjas-approved-layout[data-has-app-shell="1"] > [data-internal-base-header] {
        min-height: 54px !important;
        height: 54px !important;
        max-height: 54px !important;
        padding: 5px 9px !important;
    }

    html body.bjas-approved-layout[data-has-app-shell="1"] > .internal-shell-breadcrumb {
        min-height: 34px !important;
        height: 34px !important;
        padding: 0 10px !important;
    }

    body.bjas-approved-layout :is(
        .clean-module-layout--no-sidebar,
        .internal-module-layout--hub
    ) {
        width: calc(100% - 16px) !important;
        margin: 8px auto 14px !important;
    }

    body.bjas-approved-layout :is(
        .page-hero,
        .content-header,
        .module-hero,
        .wms-page-header,
        .wms-reference-header,
        .wms-dashboard-header,
        .category-brand-header,
        .approval-page-head,
        .request-compact-header,
        .so-compact-header,
        .attendance-page-header
    ) {
        min-height: 34px !important;
        padding-bottom: 6px !important;
    }

    body.bjas-approved-layout :is(
        .page-hero,
        .content-header,
        .module-hero,
        .wms-page-header,
        .wms-reference-header,
        .wms-dashboard-header,
        .category-brand-header,
        .approval-page-head,
        .request-compact-header,
        .so-compact-header,
        .attendance-page-header
    ) :is(h1, h2, .module-title, .request-compact-title, .so-compact-title) {
        font-size: 20px !important;
    }

    body.bjas-approved-layout :is(
        .page-hero,
        .content-header,
        .module-hero,
        .wms-page-header,
        .wms-reference-header,
        .wms-dashboard-header,
        .category-brand-header,
        .approval-page-head,
        .request-compact-header,
        .so-compact-header,
        .attendance-page-header
    ) :is(p, .module-description, .wms-dashboard-desc, .request-compact-subtitle, .so-compact-subtitle) {
        display: block !important;
        margin-top: 2px !important;
        color: var(--compact-muted) !important;
        font-size: 9px !important;
        line-height: 1.2 !important;
    }

    body.bjas-approved-layout :is(
        .wms-dashboard-quick-grid,
        .module-shortcut-grid,
        .information-policy-grid,
        .internal-hub-card-grid
    ) {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 6px !important;
    }

    body.bjas-approved-layout :is(
        .wms-dashboard-quick-card,
        .module-shortcut-card,
        .information-policy-card,
        .internal-hub-card
    ) {
        min-height: 50px !important;
        padding: 6px 8px !important;
    }

    body.bjas-approved-layout .bjas-admin-card-grid,
    body.bjas-approved-layout .bjas-admin-card-row {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body.bjas-approved-layout .bjas-admin-header p,
    body.bjas-approved-layout .crm-local-nav-box > .helper-text {
        display: block !important;
        color: var(--compact-muted) !important;
        font-size: 9px !important;
        line-height: 1.2 !important;
    }

    body.bjas-approved-layout .crm-local-nav-box {
        align-items: stretch !important;
    }

    body.bjas-approved-layout .crm-local-nav {
        width: 100% !important;
        overflow-x: auto !important;
    }

    body.bjas-approved-layout .chat-shell {
        height: calc(100dvh - var(--shell-header-height) - var(--shell-breadcrumb-height) - 26px) !important;
        min-height: 440px !important;
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body.bjas-approved-layout .chat-sidebar-panel {
        width: 100% !important;
        border-right: 0 !important;
    }

    body.bjas-approved-layout .chat-shell[data-current-thread-id=""] .chat-main-panel {
        display: none !important;
    }

    body.bjas-approved-layout .chat-shell[data-current-thread-id]:not([data-current-thread-id=""]) .chat-sidebar-panel {
        display: none !important;
    }

    body.bjas-approved-layout .ai-shell {
        height: calc(100dvh - var(--shell-header-height) - var(--shell-breadcrumb-height) - 16px) !important;
        min-height: 460px !important;
    }

    body.bjas-approved-layout :is(th, td) {
        height: 34px !important;
        padding: 5px 7px !important;
        font-size: 10px !important;
    }

    body.bjas-approved-layout :is(
        .filter-grid,
        .filter-bar,
        .products-filter-bar,
        .sales-log-filter-grid,
        .category-brand-toolbar,
        .taxonomy-review-toolbar
    ) {
        grid-template-columns: 1fr !important;
    }
}

/*
 * Final cascade contract
 * ----------------------
 * Several legacy module bundles use html[data-theme] + body selectors with
 * !important declarations. Keep the approved shell last and at equal-or-higher
 * specificity so every non-reference page actually receives the compact layout.
 */
html[data-theme] body.bjas-approved-layout[data-approved-layout="1"] :is(
    .page-hero,
    .content-header,
    .module-hero,
    .wms-page-header,
    .wms-reference-header,
    .wms-dashboard-header,
    .category-brand-header,
    .approval-page-head,
    .request-compact-header,
    .so-compact-header,
    .attendance-page-header
) {
    display: flex !important;
    width: 100% !important;
    height: auto !important;
    min-height: 38px !important;
    max-height: none !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 4px 0 7px !important;
    overflow: visible !important;
    border: 0 !important;
    border-bottom: 1px solid var(--compact-line) !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

html[data-theme] body.bjas-approved-layout[data-approved-layout="1"] :is(
    .page-hero,
    .content-header,
    .module-hero,
    .wms-page-header,
    .wms-reference-header,
    .wms-dashboard-header,
    .category-brand-header,
    .approval-page-head,
    .request-compact-header,
    .so-compact-header,
    .attendance-page-header
)::before,
html[data-theme] body.bjas-approved-layout[data-approved-layout="1"] :is(
    .page-hero,
    .content-header,
    .module-hero,
    .wms-page-header,
    .wms-reference-header,
    .wms-dashboard-header,
    .category-brand-header,
    .approval-page-head,
    .request-compact-header,
    .so-compact-header,
    .attendance-page-header
)::after {
    display: none !important;
    content: none !important;
}

html[data-theme] body.bjas-approved-layout[data-approved-layout="1"] :is(
    .page-hero,
    .content-header,
    .module-hero,
    .wms-page-header,
    .wms-reference-header,
    .wms-dashboard-header,
    .category-brand-header,
    .approval-page-head,
    .request-compact-header,
    .so-compact-header,
    .attendance-page-header
) :is(h1, h2, .module-title, .request-compact-title, .so-compact-title) {
    margin: 0 !important;
    color: var(--compact-ink) !important;
    font-size: clamp(21px, 1.7vw, 26px) !important;
    line-height: 1.12 !important;
    letter-spacing: -.035em !important;
    font-weight: 720 !important;
}

html[data-theme] body.bjas-approved-layout[data-approved-layout="1"] :is(
    .page-hero,
    .content-header,
    .module-hero,
    .wms-page-header,
    .wms-reference-header,
    .wms-dashboard-header,
    .category-brand-header,
    .approval-page-head,
    .request-compact-header,
    .so-compact-header,
    .attendance-page-header
) :is(p, .module-description, .wms-dashboard-desc, .request-compact-subtitle, .so-compact-subtitle) {
    max-width: 66ch !important;
    margin: 2px 0 0 !important;
    color: var(--compact-muted) !important;
    font-size: 11px !important;
    line-height: 1.3 !important;
}

html[data-theme] body.bjas-approved-layout[data-approved-layout="1"]
    [data-shell-module-sidebar="1"].module-sidebar
    :is(.module-sidebar-nav, .sidebar-menu, .hris-module-grid) {
    display: grid !important;
    gap: 2px !important;
    margin: 0 !important;
    padding: 0 !important;
}

html[data-theme] body.bjas-approved-layout[data-approved-layout="1"]
    [data-shell-module-sidebar="1"].module-sidebar
    :is(.module-sidebar-link, .sidebar-link, .hris-module-card) {
    position: relative !important;
    display: grid !important;
    min-height: 32px !important;
    grid-template-columns: 21px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 5px 8px !important;
    border: 0 !important;
    border-radius: 6px !important;
    background: transparent !important;
    box-shadow: none !important;
}

html[data-theme] body.bjas-approved-layout[data-approved-layout="1"]
    [data-shell-module-sidebar="1"].module-sidebar
    :is(.module-sidebar-link, .sidebar-link, .hris-module-card):is(.active, .is-active, [aria-current="page"]) {
    background: var(--compact-active) !important;
    color: var(--compact-navy) !important;
}

html[data-theme] body.bjas-approved-layout[data-approved-layout="1"]
    [data-shell-module-sidebar="1"].module-sidebar
    :is(.module-sidebar-icon, .sidebar-icon, .hris-module-nav-icon) {
    display: grid !important;
    width: 20px !important;
    min-width: 20px !important;
    height: 20px !important;
    place-items: center !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

html[data-theme] body.bjas-approved-layout[data-ui-build="approved-compact-v4"]
    .attendance-photo-main .attendance-portal-form {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 7px !important;
    width: 100% !important;
    min-width: 0 !important;
}

html[data-theme] body.bjas-approved-layout[data-ui-build="approved-compact-v4"]
    .attendance-photo-main .attendance-capture-grid {
    width: 100% !important;
    min-width: 0 !important;
}

@media (min-width: 821px) {
    html body.bjas-approved-layout[data-approved-layout="1"] > .mobile-dock {
        display: none !important;
    }
}

@media (min-width: 1025px) {
    html body.bjas-approved-layout[data-approved-layout="1"] .main.chat-page-main {
        height: calc(100dvh - var(--shell-header-height) - var(--shell-breadcrumb-height)) !important;
        min-height: 0 !important;
        max-height: calc(100dvh - var(--shell-header-height) - var(--shell-breadcrumb-height)) !important;
        overflow: hidden !important;
    }

    html body.bjas-approved-layout[data-approved-layout="1"] .main.chat-page-main
        .internal-module-layout {
        height: calc(100% - 20px) !important;
        min-height: 0 !important;
        max-height: calc(100% - 20px) !important;
        margin-top: 10px !important;
        margin-bottom: 10px !important;
        overflow: hidden !important;
    }

    html body.bjas-approved-layout[data-approved-layout="1"] .main.chat-page-main
        :is(.clean-content-panel, .chat-page-content, .chat-shell) {
        height: 100% !important;
        min-height: 0 !important;
        max-height: 100% !important;
        overflow: hidden !important;
    }

    html body.bjas-approved-layout[data-approved-layout="1"] .main.chat-page-main
        + .internal-base-footer {
        display: none !important;
    }
}

@media (max-width: 820px) {
    html[data-theme] body.bjas-approved-layout[data-ui-build="approved-compact-v4"]
        .page-hero .page-hero-text {
        flex: 1 1 0 !important;
        width: 0 !important;
        min-width: 0 !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }

    html[data-theme] body.bjas-approved-layout[data-ui-build="approved-compact-v4"]
        .page-hero .page-hero-text :is(h1, h2, p) {
        max-width: 100% !important;
        overflow-wrap: anywhere !important;
        white-space: normal !important;
    }

    html body.bjas-approved-layout.career-recruitment-page[data-approved-layout="1"]
        .career-astra-navigation {
        display: none !important;
        transform: none !important;
        visibility: hidden !important;
    }

    html body.bjas-approved-layout.career-recruitment-page[data-approved-layout="1"]
        .career-astra-topbar.is-open .career-astra-navigation {
        display: flex !important;
        transform: none !important;
        visibility: visible !important;
    }
}

@media screen {
    html:has(body.bjas-approved-print-layout[data-ui-build="approved-compact-v4"]) {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        background: #eef3f8 !important;
    }

    html body.bjas-approved-print-layout[data-ui-build="approved-compact-v4"] {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 24px !important;
        background: #eef3f8 !important;
        color: var(--compact-ink) !important;
        font-family: Inter, "Plus Jakarta Sans", "Segoe UI", Arial, sans-serif !important;
    }

    html body.bjas-approved-print-layout[data-ui-build="approved-compact-v4"]
        :is(.sheet, .print-page) {
        border: 1px solid var(--compact-line) !important;
        box-shadow: 0 10px 28px rgba(15, 39, 71, .09) !important;
    }
}

html body.bjas-approved-layout.career-recruitment-page[data-approved-layout="1"]
    .main.career-public-shell > .page-hero {
    display: none !important;
}

@media (min-width: 821px) {
    html body.bjas-approved-layout.login-page[data-approved-layout="1"] {
        height: 100dvh !important;
        min-height: 100dvh !important;
        max-height: 100dvh !important;
        overflow: hidden !important;
    }

    html body.bjas-approved-layout.login-page[data-approved-layout="1"] .login-shell {
        height: 100dvh !important;
        min-height: 0 !important;
        max-height: 100dvh !important;
        overflow: hidden !important;
    }
}

html[data-theme] body.bjas-approved-layout[data-ui-build="approved-compact-v4"]
    .attendance-photo-main .attendance-portal-form {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: none !important;
}

html[data-theme] body.bjas-approved-layout[data-ui-build="approved-compact-v4"]
    .attendance-photo-main .attendance-portal-form
    > :is(
        .attendance-manual-shift-panel,
        .attendance-action-strip,
        .attendance-action-context,
        .attendance-capture-grid
    ) {
    grid-column: 1 !important;
    grid-row: auto !important;
}

html[data-theme] body.bjas-approved-layout[data-ui-build="approved-compact-v4"]
    .attendance-photo-main .attendance-capture-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 8px !important;
}

html[data-theme] body.bjas-approved-layout[data-ui-build="approved-compact-v4"]
    .attendance-photo-main .attendance-capture-grid
    > :is(.attendance-camera-panel, .attendance-form-panel) {
    grid-column: auto !important;
    grid-row: auto !important;
}

@media (min-width: 1025px) {
    html[data-theme] body.bjas-approved-layout[data-ui-build="approved-compact-v4"]
        .attendance-photo-main .attendance-capture-grid {
        grid-template-columns: minmax(420px, 540px) minmax(300px, 1fr) !important;
    }

    html body.bjas-approved-layout[data-approved-layout="1"]
        .main.chat-page-main .internal-base-footer {
        display: none !important;
    }
}

/* Standalone authenticated tools that do not inherit templates/base.html. */
html body.sms-storage-clean.bjas-approved-layout {
    --compact-sidebar: 218px;
    min-height: 100dvh !important;
    overflow-x: hidden !important;
    background: #ffffff !important;
}

html body.sms-storage-clean.bjas-approved-layout .backdrop {
    display: none !important;
}

html body.sms-storage-clean.bjas-approved-layout .app-shell {
    width: 100% !important;
    max-width: none !important;
    min-height: 100dvh !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

html body.sms-storage-clean.bjas-approved-layout .topbar {
    min-height: 60px !important;
    height: 60px !important;
    padding: 6px 16px !important;
    border-top: 3px solid #1f3c38 !important;
    border-bottom: 1px solid var(--compact-line) !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

html body.sms-storage-clean.bjas-approved-layout .sidebar {
    width: var(--compact-sidebar) !important;
    min-width: var(--compact-sidebar) !important;
    padding: 8px !important;
    border-right: 1px solid var(--compact-line) !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

html body.sms-storage-clean.bjas-approved-layout :is(
    .nav-item,
    .new-btn,
    .sidebar-section-head,
    .storage-panel,
    .queue-panel
) {
    min-height: 34px !important;
    margin: 0 0 4px !important;
    padding: 6px 8px !important;
    border-radius: 5px !important;
    box-shadow: none !important;
}

html body.sms-storage-clean.bjas-approved-layout .workspace {
    min-width: 0 !important;
    padding: 10px !important;
    background: #ffffff !important;
}

html body.sms-storage-clean.bjas-approved-layout :is(
    .workspace-header,
    .toolbar-row,
    .drive-filter-row,
    .selection-bar
) {
    min-height: 0 !important;
    margin: 0 0 7px !important;
    padding: 6px 8px !important;
    border: 1px solid var(--compact-line) !important;
    border-radius: var(--compact-radius) !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

html body.sms-storage-clean.bjas-approved-layout :is(
    .workspace-card,
    .overview-grid,
    .file-surface,
    .folder-card-grid
) {
    gap: 7px !important;
}

html body.sms-storage-clean.bjas-approved-layout :is(
    .workspace-card,
    .folder-card,
    .file-surface,
    .dropzone-shell
) {
    border: 1px solid var(--compact-line) !important;
    border-radius: var(--compact-radius) !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

html body.sms-storage-clean.bjas-approved-layout .top-search-shell {
    position: relative !important;
}

html body.sms-storage-clean.bjas-approved-layout .top-search-shell input {
    padding-left: 40px !important;
}

html body.sms-storage-clean.bjas-approved-layout .top-search-icon {
    position: absolute !important;
    z-index: 2 !important;
    left: 12px !important;
    top: 50% !important;
    width: 16px !important;
    height: 16px !important;
    transform: translateY(-50%) !important;
    pointer-events: none !important;
}

html body.bjas-notify-shell.bjas-approved-layout {
    min-height: 100dvh !important;
    padding: 0 !important;
    background: #ffffff !important;
}

html body.bjas-notify-shell.bjas-approved-layout .notify-app-frame {
    width: 100% !important;
    max-width: none !important;
    min-height: 100dvh !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

html body.bjas-notify-shell.bjas-approved-layout .notify-topbar {
    min-height: 60px !important;
    height: 60px !important;
    padding: 6px 16px !important;
    border-top: 3px solid #1f3c38 !important;
    border-bottom: 1px solid var(--compact-line) !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

html body.bjas-notify-shell.bjas-approved-layout .notify-main {
    display: grid !important;
    grid-template-columns: minmax(240px, 300px) minmax(0, 1fr) !important;
    gap: 8px !important;
    width: min(100% - 24px, 1760px) !important;
    max-width: 1760px !important;
    margin: 10px auto 18px !important;
    padding: 0 !important;
}

html body.bjas-notify-shell.bjas-approved-layout :is(
    .notify-control-panel,
    .notify-device-card,
    .notify-approval-panel,
    .notify-inbox-panel,
    .notify-detail-dialog,
    .notify-confirm-dialog
) {
    margin: 0 !important;
    padding: 8px 10px !important;
    border: 1px solid var(--compact-line) !important;
    border-radius: var(--compact-radius) !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

html body.bjas-notify-shell.bjas-approved-layout :is(
    .notify-summary,
    .notify-toolbar,
    .notify-category-tabs,
    .notify-bulk-actions
) {
    gap: 6px !important;
    margin-block: 7px !important;
}

html body.bjas-notify-shell.bjas-approved-layout :is(
    .notify-list > *,
    .notify-approval-table tr
) {
    min-height: 38px !important;
}

html body.light-approval-shell.bjas-approved-layout,
html body.light-attendance-detail-shell.bjas-approved-layout {
    min-height: 100dvh !important;
    padding: 12px !important;
    background: #f5f8fc !important;
}

html body.light-approval-shell.bjas-approved-layout .light-approval-page,
html body.light-attendance-detail-shell.bjas-approved-layout .attendance-detail-page {
    width: min(100%, 920px) !important;
    max-width: 920px !important;
    margin: 0 auto !important;
}

html body.light-approval-shell.bjas-approved-layout :is(
    .light-approval-brand,
    .light-approval-card
),
html body.light-attendance-detail-shell.bjas-approved-layout :is(
    .attendance-detail-topbar,
    .attendance-detail-card,
    .attendance-location-card,
    .attendance-photo-card,
    .attendance-note-card
) {
    margin: 0 0 8px !important;
    padding: 8px 10px !important;
    border: 1px solid var(--compact-line) !important;
    border-radius: var(--compact-radius) !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

@media (max-width: 760px) {
    html body.sms-storage-clean.bjas-approved-layout .sidebar {
        width: min(290px, 86vw) !important;
        min-width: 0 !important;
    }

    html body.bjas-notify-shell.bjas-approved-layout .notify-main {
        grid-template-columns: minmax(0, 1fr) !important;
        width: calc(100% - 16px) !important;
        margin: 8px auto 14px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.bjas-approved-layout *,
    body.bjas-approved-layout *::before,
    body.bjas-approved-layout *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/*
 * V3 final authority
 * ------------------
 * The legacy ERP styles use several highly-specific !important declarations.
 * These rules intentionally come last and target only the authenticated
 * refactor shell, so the approved HRIS geometry wins without changing markup
 * or removing controls.
 */
html body.bjas-approved-layout[data-approved-layout="1"] :is(
    .internal-module-layout.module-layout.clean-module-layout,
    .internal-module-layout.module-layout,
    .clean-module-layout.module-layout
):not(.clean-module-layout--no-sidebar):not(.internal-module-layout--hub) {
    display: grid !important;
    grid-template-columns: var(--compact-sidebar) minmax(0, 1fr) !important;
    gap: 10px !important;
    width: min(calc(100% - 24px), 1760px) !important;
    max-width: 1760px !important;
    margin: 10px auto 18px !important;
    padding: 0 !important;
    align-items: start !important;
}

html body.bjas-approved-layout[data-approved-layout="1"] :is(
    [data-shell-module-sidebar="1"].module-sidebar,
    .module-sidebar.wms-sidebar,
    .clean-module-sidebar.module-sidebar,
    .information-module-nav.info-sidebar,
    .bjas-module-sidebar
) {
    width: var(--compact-sidebar) !important;
    min-width: var(--compact-sidebar) !important;
    max-width: var(--compact-sidebar) !important;
    flex: 0 0 var(--compact-sidebar) !important;
}

html body.bjas-approved-layout[data-approved-layout="1"] :is(
    .internal-module-panel,
    .clean-content-panel,
    .information-panel,
    .content-panel,
    .module-main
) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
}

html body.bjas-approved-layout[data-approved-layout="1"] :is(
    .page-hero,
    .content-header,
    .module-hero,
    .wms-page-header,
    .wms-reference-header,
    .wms-dashboard-header,
    .category-brand-header,
    .approval-page-head,
    .request-compact-header,
    .so-compact-header,
    .attendance-page-header
) {
    margin: 0 !important;
    padding: 4px 0 7px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--compact-line) !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

html body.bjas-approved-layout[data-approved-layout="1"] :is(
    .card,
    .table-box,
    .surface-card,
    .panel,
    .form-card,
    .summary-card,
    .meta-card,
    .wms-kpi-card,
    .module-shortcut-card,
    .information-policy-card
) {
    box-shadow: none !important;
}

html body.bjas-approved-layout[data-approved-layout="1"] :is(
    .filter-grid,
    .filter-bar,
    .products-filter-bar,
    .top-bar,
    .category-brand-toolbar,
    .taxonomy-review-toolbar
) {
    min-height: 0 !important;
    margin-block: 6px !important;
    padding: 6px !important;
    gap: 6px !important;
}

html body.bjas-approved-layout[data-approved-layout="1"] :is(
    input,
    select,
    textarea,
    button,
    .button,
    .btn
) {
    scroll-margin-top: calc(var(--shell-header-height) + var(--shell-breadcrumb-height) + 12px);
}

/*
 * Search icon contract: the icon owns a 16px lane and the placeholder starts
 * after it. Inputs without an icon keep their normal compact padding.
 */
html body.bjas-approved-layout[data-approved-layout="1"] :is(
    .search-field,
    .internal-search-wrap,
    .ai-search,
    .schedule-search-field,
    .approval-filter-search,
    .bjas-admin-list-search,
    [class*="search-field"],
    [class*="search-wrap"],
    [class*="search-box"]
):has(> :is(svg, img, .search-icon, [class*="search-icon"])) {
    position: relative !important;
}

html body.bjas-approved-layout[data-approved-layout="1"] :is(
    .search-field,
    .internal-search-wrap,
    .ai-search,
    .schedule-search-field,
    .approval-filter-search,
    .bjas-admin-list-search,
    [class*="search-field"],
    [class*="search-wrap"],
    [class*="search-box"]
):has(> :is(svg, img, .search-icon, [class*="search-icon"]))
> :is(svg, img, .search-icon, [class*="search-icon"]) {
    position: absolute !important;
    z-index: 2 !important;
    top: 50% !important;
    left: 11px !important;
    width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
    transform: translateY(-50%) !important;
    pointer-events: none !important;
}

html body.bjas-approved-layout[data-approved-layout="1"] :is(
    .search-field,
    .internal-search-wrap,
    .ai-search,
    .schedule-search-field,
    .approval-filter-search,
    .bjas-admin-list-search,
    [class*="search-field"],
    [class*="search-wrap"],
    [class*="search-box"]
):has(> :is(svg, img, .search-icon, [class*="search-icon"]))
> input:not([type="checkbox"]):not([type="radio"]) {
    padding-left: 38px !important;
    text-indent: 0 !important;
}

html body.bjas-approved-layout[data-approved-layout="1"] .chat-shell {
    height: calc(100dvh - var(--shell-header-height) - var(--shell-breadcrumb-height) - 20px) !important;
    min-height: 500px !important;
    max-height: calc(100dvh - var(--shell-header-height) - var(--shell-breadcrumb-height) - 20px) !important;
    margin-bottom: 0 !important;
}

@media (max-width: 1024px) {
    html body.bjas-approved-layout[data-approved-layout="1"] :is(
        .internal-module-layout.module-layout.clean-module-layout,
        .internal-module-layout.module-layout,
        .clean-module-layout.module-layout
    ):not(.clean-module-layout--no-sidebar):not(.internal-module-layout--hub) {
        grid-template-columns: minmax(0, 1fr) !important;
        width: calc(100% - 16px) !important;
        margin: 8px auto 14px !important;
    }

    html body.bjas-approved-layout[data-approved-layout="1"] :is(
        [data-shell-module-sidebar="1"].module-sidebar,
        .module-sidebar.wms-sidebar,
        .clean-module-sidebar.module-sidebar,
        .information-module-nav.info-sidebar,
        .bjas-module-sidebar
    ) {
        width: min(290px, 86vw) !important;
        min-width: 0 !important;
        max-width: min(290px, 86vw) !important;
        flex-basis: auto !important;
    }

    /*
     * Keep the shared mobile module switcher inside the viewport. Long module
     * names are truncated in their own flexible lane instead of widening the
     * document.
     */
    html body.bjas-approved-layout[data-approved-layout="1"] .shell-module-mobile-bar {
        min-width: 0 !important;
        max-width: calc(100% - 20px) !important;
        overflow: hidden !important;
    }

    html body.bjas-approved-layout[data-approved-layout="1"] .shell-sidebar-global-trigger {
        flex: 0 0 auto !important;
        min-width: 0 !important;
    }

    html body.bjas-approved-layout[data-approved-layout="1"] .shell-module-mobile-context {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        overflow: hidden !important;
        text-align: right !important;
    }

    html body.bjas-approved-layout[data-approved-layout="1"] .shell-module-mobile-context :is(span, strong) {
        display: block !important;
        min-width: 0 !important;
        max-width: 100% !important;
        overflow: hidden !important;
        white-space: nowrap !important;
        text-overflow: ellipsis !important;
    }

    /*
     * Jadwal keeps its full matrix and horizontal interaction, but the scroll
     * is owned by the matrix viewport rather than the document.
     */
    html body.bjas-approved-layout[data-approved-layout="1"] .schedule-page-description {
        max-width: 100% !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }

    html body.bjas-approved-layout[data-approved-layout="1"] :is(
        .hris-schedule-panel,
        .schedule-leader-calendar-shell,
        .schedule-matrix-wrap,
        .schedule-board-wrap
    ) {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    html body.bjas-approved-layout[data-approved-layout="1"] :is(
        .team-schedule-board-scroll,
        .schedule-sticky-staff-header,
        .schedule-sticky-staff-viewport
    ) {
        box-sizing: border-box !important;
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        overscroll-behavior-inline: contain !important;
        contain: inline-size !important;
    }
}

/*
 * V4 page-family implementation
 * -----------------------------
 * These rules style the actual page roots present in the latest ERP source.
 * They are deliberately scoped to the approved body class so the reference
 * surfaces remain byte-for-byte and visually unchanged.
 */

/* Account, face registration, announcements, and notification center. */
html body.bjas-approved-layout[data-ui-build="approved-compact-v4"] :is(
    .acct-page,
    .face-reg-page,
    .anc-page,
    .notifications-page-shell
) {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

html body.bjas-approved-layout[data-ui-build="approved-compact-v4"] :is(
    .acct-hero,
    .face-reg-header,
    .anc-hero,
    .notification-center-head
) {
    min-height: 0 !important;
    margin: 0 0 7px !important;
    padding: 4px 0 7px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--compact-line) !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

html body.bjas-approved-layout[data-ui-build="approved-compact-v4"] :is(
    .acct-hero h1,
    .face-reg-header h1,
    .anc-hero h1,
    .notification-center-head h1
) {
    margin: 0 !important;
    color: var(--compact-ink) !important;
    font-size: clamp(18px, 1.45vw, 24px) !important;
    line-height: 1.15 !important;
}

html body.bjas-approved-layout[data-ui-build="approved-compact-v4"] :is(
    .acct-hero p,
    .face-reg-header p,
    .anc-hero p,
    .notification-center-head p
) {
    margin: 2px 0 0 !important;
    color: var(--compact-muted) !important;
    font-size: 10px !important;
    line-height: 1.25 !important;
}

html body.bjas-approved-layout[data-ui-build="approved-compact-v4"] :is(
    .acct-stat-grid,
    .anc-stat-grid,
    .notifications-summary-cards
) {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 0 !important;
    margin: 0 0 7px !important;
    overflow: hidden !important;
    border: 1px solid var(--compact-line) !important;
    border-radius: var(--compact-radius) !important;
    background: #ffffff !important;
}

html body.bjas-approved-layout[data-ui-build="approved-compact-v4"] :is(
    .acct-stat,
    .anc-stat,
    .notifications-summary-cards > *
) {
    min-height: 48px !important;
    margin: 0 !important;
    padding: 7px 10px !important;
    border: 0 !important;
    border-right: 1px solid var(--compact-line) !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

html body.bjas-approved-layout[data-ui-build="approved-compact-v4"] :is(
    .acct-stat,
    .anc-stat,
    .notifications-summary-cards > *
):last-child {
    border-right: 0 !important;
}

html body.bjas-approved-layout[data-ui-build="approved-compact-v4"] :is(
    .acct-panel,
    .acct-face-panel,
    .face-reg-camera-card,
    .face-reg-side-card,
    .anc-panel,
    .notification-center-list
) {
    margin: 0 !important;
    padding: 8px 10px !important;
    border: 1px solid var(--compact-line) !important;
    border-radius: var(--compact-radius) !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

html body.bjas-approved-layout[data-ui-build="approved-compact-v4"] .acct-form {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
}

html body.bjas-approved-layout[data-ui-build="approved-compact-v4"] .acct-face-panel,
html body.bjas-approved-layout[data-ui-build="approved-compact-v4"] .acct-form-footer {
    grid-column: 1 / -1 !important;
}

html body.bjas-approved-layout[data-ui-build="approved-compact-v4"] .face-reg-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1.55fr) minmax(260px, .8fr) !important;
    gap: 8px !important;
    align-items: start !important;
}

html body.bjas-approved-layout[data-ui-build="approved-compact-v4"] .anc-stream-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(300px, .78fr) !important;
    gap: 8px !important;
}

html body.bjas-approved-layout[data-ui-build="approved-compact-v4"] :is(
    .anc-channel-grid,
    .notification-center-toolbar,
    .notification-center-tabs,
    .notification-center-actions
) {
    gap: 6px !important;
}

html body.bjas-approved-layout[data-ui-build="approved-compact-v4"] :is(
    .anc-channel-card,
    .anc-event,
    .notification-entry,
    .notification-card
) {
    min-height: 0 !important;
    margin: 0 !important;
    padding: 7px 9px !important;
    border: 1px solid var(--compact-line-soft) !important;
    border-radius: 5px !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

/* Admin legacy suite and BJAS Admin share one flat, dense dashboard rhythm. */
html body.bjas-approved-layout[data-ui-build="approved-compact-v4"] :is(
    .admin-suite-shell,
    .bjas-admin-page
) :is(
    .box,
    .form-box,
    .table-box,
    .panel-disclosure,
    .stack-scroll-card,
    .phase7-section-heading,
    .phase7-summary-strip,
    .bjas-admin-panel
) {
    margin-block: 0 7px !important;
    padding: 7px 9px !important;
    border: 1px solid var(--compact-line) !important;
    border-radius: var(--compact-radius) !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

html body.bjas-approved-layout[data-ui-build="approved-compact-v4"] .admin-suite-shell :is(
    .summary,
    .meta-grid,
    .admin-role-guide-grid,
    .cards
) {
    gap: 0 !important;
}

html body.bjas-approved-layout[data-ui-build="approved-compact-v4"] .admin-suite-shell :is(
    .card-mini,
    .meta-card,
    .admin-role-card
) {
    min-height: 46px !important;
    padding: 7px 9px !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

html body.bjas-approved-layout[data-ui-build="approved-compact-v4"] :is(
    .panel-summary,
    .section-title,
    .bjas-admin-section-head,
    .bjas-admin-panel-head
) {
    min-height: 32px !important;
    padding: 5px 7px !important;
}

/* Attendance, leave, overtime, KPI, daily report, and self schedule. */
html body.bjas-approved-layout[data-ui-build="approved-compact-v4"] :is(
    .attendance-page,
    .leave-page-shell
) {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #ffffff !important;
}

html body.bjas-approved-layout[data-ui-build="approved-compact-v4"] :is(
    .att-page-body,
    .attendance-portal-shell
) {
    gap: 7px !important;
}

html body.bjas-approved-layout[data-ui-build="approved-compact-v4"] :is(
    .att-stats,
    .attendance-identity-grid
) {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 0 !important;
    margin: 0 0 7px !important;
    overflow: hidden !important;
    border: 1px solid var(--compact-line) !important;
    border-radius: var(--compact-radius) !important;
    background: #ffffff !important;
}

html body.bjas-approved-layout[data-ui-build="approved-compact-v4"] :is(
    .att-stat,
    .attendance-identity-grid > *
) {
    min-height: 48px !important;
    margin: 0 !important;
    padding: 7px 9px !important;
    border: 0 !important;
    border-right: 1px solid var(--compact-line) !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

html body.bjas-approved-layout[data-ui-build="approved-compact-v4"] :is(
    .att-panel,
    .attendance-overview-card,
    .attendance-capture-card,
    .attendance-history-card,
    .att-sched-card,
    .att-disclosure,
    .leave-page-shell .form-box,
    .leave-page-shell .table-box
) {
    margin: 0 0 7px !important;
    padding: 7px 9px !important;
    border: 1px solid var(--compact-line) !important;
    border-radius: var(--compact-radius) !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

html body.bjas-approved-layout[data-ui-build="approved-compact-v4"] .attendance-capture-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1.35fr) minmax(300px, .85fr) !important;
    gap: 8px !important;
}

html body.bjas-approved-layout[data-ui-build="approved-compact-v4"] :is(
    .att-meta-grid,
    .att-meta-grid--flush,
    .att-meta-grid--record
) {
    gap: 0 !important;
    overflow: hidden !important;
    border: 1px solid var(--compact-line-soft) !important;
    border-radius: 5px !important;
}

html body.bjas-approved-layout[data-ui-build="approved-compact-v4"] :is(
    .att-meta,
    .att-readout
) {
    min-height: 42px !important;
    padding: 6px 8px !important;
    border: 0 !important;
    border-right: 1px solid var(--compact-line-soft) !important;
    border-radius: 0 !important;
    background: #ffffff !important;
}

/* POS operational pages; the cashier terminal and receipt stay excluded. */
html body.bjas-approved-layout[data-ui-build="approved-compact-v4"] :is(
    .pos-tool-page,
    .pos-sales-log-page,
    .pos-customer-display-page
) {
    background: #ffffff !important;
}

html body.bjas-approved-layout[data-ui-build="approved-compact-v4"] :is(
    .sales-log-page-shell,
    .pos-sales-report-shell,
    .wms-page-stack,
    .pos-cd-stage
) {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

html body.bjas-approved-layout[data-ui-build="approved-compact-v4"] :is(
    .sales-log-header,
    .pos-sales-report-header,
    .pos-cd-toolbar
) {
    min-height: 0 !important;
    margin: 0 0 7px !important;
    padding: 5px 0 7px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--compact-line) !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

html body.bjas-approved-layout[data-ui-build="approved-compact-v4"] :is(
    .sales-log-filter-card,
    .sales-log-table-card,
    .pos-sales-table-card,
    .pos-closing-card,
    .attendance-cash-closing-card,
    .delivery-note-preview-shell,
    .manual-delivery-tools,
    .manual-invoice-form,
    .pos-cd-screen
) {
    margin: 0 0 7px !important;
    padding: 7px 9px !important;
    border: 1px solid var(--compact-line) !important;
    border-radius: var(--compact-radius) !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

html body.bjas-approved-layout[data-ui-build="approved-compact-v4"] :is(
    .sales-log-summary-strip,
    .pos-sales-kpi-grid,
    .attendance-cash-closing-summary
) {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 0 !important;
    margin: 0 0 7px !important;
    overflow: hidden !important;
    border: 1px solid var(--compact-line) !important;
    border-radius: var(--compact-radius) !important;
    background: #ffffff !important;
}

html body.bjas-approved-layout[data-ui-build="approved-compact-v4"] :is(
    .sales-log-summary-cell,
    .pos-sales-kpi-card,
    .attendance-cash-closing-summary > *
) {
    min-height: 48px !important;
    margin: 0 !important;
    padding: 7px 9px !important;
    border: 0 !important;
    border-right: 1px solid var(--compact-line) !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

html body.bjas-approved-layout[data-ui-build="approved-compact-v4"] .pos-cd-screen {
    min-height: calc(100dvh - var(--shell-header-height) - var(--shell-breadcrumb-height) - 70px) !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* Documents keep their preview/signing behavior but use compact control panels. */
html body.bjas-approved-layout[data-ui-build="approved-compact-v4"] :is(
    .document-approval-single-shell,
    .document-approval-sheet,
    .document-contract-otp-card
) {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

html body.bjas-approved-layout[data-ui-build="approved-compact-v4"] :is(
    .document-approval-masthead,
    .document-approval-titleblock
) {
    min-height: 0 !important;
    margin: 0 0 7px !important;
    padding: 5px 0 7px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--compact-line) !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

html body.bjas-approved-layout[data-ui-build="approved-compact-v4"] .document-approval-workboard {
    display: grid !important;
    grid-template-columns: minmax(0, 1.5fr) minmax(300px, .72fr) !important;
    gap: 8px !important;
}

html body.bjas-approved-layout[data-ui-build="approved-compact-v4"] :is(
    .document-approval-stage,
    .document-approval-panel,
    .document-approval-sign-section,
    .document-contract-otp-card
) {
    margin: 0 !important;
    padding: 8px 10px !important;
    border: 1px solid var(--compact-line) !important;
    border-radius: var(--compact-radius) !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

/* Product lookup, product master, spreadsheet center, and taxonomy. */
html body.bjas-approved-layout[data-ui-build="approved-compact-v4"] :is(
    .product-lookup-shell,
    .input-item-page,
    .spreadsheet-center-page,
    .category-brand-page,
    .taxonomy-review-page
) {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #ffffff !important;
}

html body.bjas-approved-layout[data-ui-build="approved-compact-v4"] :is(
    .product-lookup-toolbar,
    .products-filter-bar,
    .spreadsheet-center-filterband,
    .category-brand-toolbar,
    .taxonomy-review-toolbar
) {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: end !important;
    gap: 6px !important;
    margin: 0 0 7px !important;
    padding: 6px 8px !important;
    border: 1px solid var(--compact-line) !important;
    border-radius: var(--compact-radius) !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

html body.bjas-approved-layout[data-ui-build="approved-compact-v4"] :is(
    .product-lookup-card,
    .products-list-box,
    .products-manual-box,
    .spreadsheet-list-panel,
    .spreadsheet-preview-panel,
    .category-brand-panel,
    .taxonomy-review-panel
) {
    margin: 0 !important;
    padding: 7px 9px !important;
    border: 1px solid var(--compact-line) !important;
    border-radius: var(--compact-radius) !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

html body.bjas-approved-layout[data-ui-build="approved-compact-v4"] .spreadsheet-center-shell {
    display: grid !important;
    grid-template-columns: minmax(280px, .72fr) minmax(0, 1.28fr) !important;
    gap: 8px !important;
}

/* Search inputs only reserve an icon lane when a visible icon actually exists. */
html body.bjas-approved-layout[data-ui-build="approved-compact-v4"] :is(
    .search-field,
    .internal-search-wrap,
    .ai-search,
    .chat-search-row,
    .chat-thread-search-field,
    .schedule-search-field,
    .approval-filter-search,
    .bjas-admin-list-search,
    [class*="search-field"],
    [class*="search-wrap"],
    [class*="search-box"],
    [class*="search-row"]
) input:not([type="checkbox"]):not([type="radio"]) {
    padding-left: 9px !important;
    text-indent: 0 !important;
}

html body.bjas-approved-layout[data-ui-build="approved-compact-v4"] :is(
    .search-field,
    .internal-search-wrap,
    .ai-search,
    .chat-search-row,
    .chat-thread-search-field,
    .schedule-search-field,
    .approval-filter-search,
    .bjas-admin-list-search,
    [class*="search-field"],
    [class*="search-wrap"],
    [class*="search-box"],
    [class*="search-row"]
):has(:is(
    .search-icon,
    [class*="search-icon"],
    > svg,
    > img
)) input:not([type="checkbox"]):not([type="radio"]) {
    padding-left: 38px !important;
}

html body.bjas-approved-layout[data-ui-build="approved-compact-v4"] :is(
    .search-field,
    .internal-search-wrap,
    .ai-search,
    .chat-search-row,
    .chat-thread-search-field,
    .schedule-search-field,
    .approval-filter-search,
    .bjas-admin-list-search,
    [class*="search-field"],
    [class*="search-wrap"],
    [class*="search-box"],
    [class*="search-row"]
) > :is(
    .search-icon,
    [class*="search-icon"],
    svg,
    img
) {
    position: absolute !important;
    z-index: 2 !important;
    top: 50% !important;
    left: 11px !important;
    width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
    transform: translateY(-50%) !important;
    pointer-events: none !important;
}

@media (max-width: 1024px) {
    html body.bjas-approved-layout[data-ui-build="approved-compact-v4"] :is(
        .acct-form,
        .face-reg-layout,
        .anc-stream-grid,
        .attendance-capture-grid,
        .document-approval-workboard,
        .spreadsheet-center-shell
    ) {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    html body.bjas-approved-layout[data-ui-build="approved-compact-v4"] :is(
        .acct-stat-grid,
        .anc-stat-grid,
        .notifications-summary-cards,
        .att-stats,
        .attendance-identity-grid,
        .sales-log-summary-strip,
        .pos-sales-kpi-grid,
        .attendance-cash-closing-summary
    ) {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 640px) {
    html body.bjas-approved-layout[data-ui-build="approved-compact-v4"] :is(
        .acct-stat-grid,
        .anc-stat-grid,
        .notifications-summary-cards,
        .att-stats,
        .attendance-identity-grid,
        .sales-log-summary-strip,
        .pos-sales-kpi-grid,
        .attendance-cash-closing-summary
    ) {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    html body.bjas-approved-layout[data-ui-build="approved-compact-v4"] :is(
        .acct-stat,
        .anc-stat,
        .notifications-summary-cards > *,
        .att-stat,
        .attendance-identity-grid > *,
        .sales-log-summary-cell,
        .pos-sales-kpi-card,
        .attendance-cash-closing-summary > *
    ) {
        border-right: 0 !important;
        border-bottom: 1px solid var(--compact-line) !important;
    }
}

/* Absolute final overrides: must remain the final rules in this file. */
html[data-theme] body.bjas-approved-layout[data-approved-layout="1"] :is(
    .page-hero,
    .content-header,
    .module-hero,
    .wms-page-header,
    .wms-reference-header,
    .wms-dashboard-header,
    .category-brand-header,
    .approval-page-head,
    .request-compact-header,
    .so-compact-header,
    .attendance-page-header
) {
    display: flex !important;
    width: 100% !important;
    height: auto !important;
    min-height: 38px !important;
    max-height: none !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 4px 0 7px !important;
    overflow: visible !important;
    border: 0 !important;
    border-bottom: 1px solid var(--compact-line) !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

html[data-theme] body.bjas-approved-layout[data-approved-layout="1"] :is(
    .page-hero,
    .content-header,
    .module-hero,
    .wms-page-header,
    .wms-reference-header,
    .wms-dashboard-header,
    .category-brand-header,
    .approval-page-head,
    .request-compact-header,
    .so-compact-header,
    .attendance-page-header
)::before,
html[data-theme] body.bjas-approved-layout[data-approved-layout="1"] :is(
    .page-hero,
    .content-header,
    .module-hero,
    .wms-page-header,
    .wms-reference-header,
    .wms-dashboard-header,
    .category-brand-header,
    .approval-page-head,
    .request-compact-header,
    .so-compact-header,
    .attendance-page-header
)::after {
    display: none !important;
    content: none !important;
}

html[data-theme] body.bjas-approved-layout[data-approved-layout="1"] :is(
    .page-hero,
    .content-header,
    .module-hero,
    .wms-page-header,
    .wms-reference-header,
    .wms-dashboard-header,
    .category-brand-header,
    .approval-page-head,
    .request-compact-header,
    .so-compact-header,
    .attendance-page-header
) :is(h1, h2, .module-title, .request-compact-title, .so-compact-title) {
    margin: 0 !important;
    color: var(--compact-ink) !important;
    font-size: clamp(21px, 1.7vw, 26px) !important;
    line-height: 1.12 !important;
    letter-spacing: -.035em !important;
    font-weight: 720 !important;
}

html[data-theme] body.bjas-approved-layout[data-approved-layout="1"]
    [data-shell-module-sidebar="1"].module-sidebar
    :is(.module-sidebar-link, .sidebar-link, .hris-module-card) {
    position: relative !important;
    display: grid !important;
    min-height: 32px !important;
    grid-template-columns: 21px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 5px 8px !important;
    border: 0 !important;
    border-radius: 6px !important;
    background: transparent !important;
    box-shadow: none !important;
}

html[data-theme] body.bjas-approved-layout[data-approved-layout="1"]
    [data-shell-module-sidebar="1"].module-sidebar
    :is(.module-sidebar-link, .sidebar-link, .hris-module-card):is(.active, .is-active, [aria-current="page"]) {
    background: var(--compact-active) !important;
    color: var(--compact-navy) !important;
}

html[data-theme] body.bjas-approved-layout[data-ui-build="approved-compact-v4"]
    .attendance-photo-main .attendance-portal-form {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 7px !important;
    width: 100% !important;
    min-width: 0 !important;
}

html[data-theme] body.bjas-approved-layout[data-ui-build="approved-compact-v4"]
    .attendance-photo-main .attendance-capture-grid {
    width: 100% !important;
    min-width: 0 !important;
}

@media (min-width: 821px) {
    html body.bjas-approved-layout[data-approved-layout="1"] > .mobile-dock {
        display: none !important;
    }
}

@media (min-width: 1025px) {
    html body.bjas-approved-layout[data-approved-layout="1"] .main.chat-page-main {
        height: calc(100dvh - var(--shell-header-height) - var(--shell-breadcrumb-height)) !important;
        min-height: 0 !important;
        max-height: calc(100dvh - var(--shell-header-height) - var(--shell-breadcrumb-height)) !important;
        overflow: hidden !important;
    }

    html body.bjas-approved-layout[data-approved-layout="1"] .main.chat-page-main
        .internal-module-layout {
        height: calc(100% - 20px) !important;
        min-height: 0 !important;
        max-height: calc(100% - 20px) !important;
        margin-top: 10px !important;
        margin-bottom: 10px !important;
        overflow: hidden !important;
    }

    html body.bjas-approved-layout[data-approved-layout="1"] .main.chat-page-main
        :is(.clean-content-panel, .chat-page-content, .chat-shell) {
        height: 100% !important;
        min-height: 0 !important;
        max-height: 100% !important;
        overflow: hidden !important;
    }

    html body.bjas-approved-layout[data-approved-layout="1"] .main.chat-page-main
        + .internal-base-footer {
        display: none !important;
    }
}

/* Public-shell terminal rules. */
html body.bjas-approved-layout.career-recruitment-page[data-approved-layout="1"]
    .main.career-public-shell > .page-hero {
    display: none !important;
}

@media (min-width: 821px) {
    html body.bjas-approved-layout.login-page[data-approved-layout="1"] {
        height: 100dvh !important;
        min-height: 100dvh !important;
        max-height: 100dvh !important;
        overflow: hidden !important;
    }

    html body.bjas-approved-layout.login-page[data-approved-layout="1"] .login-shell {
        height: 100dvh !important;
        min-height: 0 !important;
        max-height: 100dvh !important;
        overflow: hidden !important;
    }
}

html body.bjas-approved-layout.career-recruitment-page[data-approved-layout="1"]
    :is(.career-astra-search-field, .career-jobs-search-field, .career-candidate-search-field)
    input,
html body.bjas-approved-layout.career-recruitment-page[data-approved-layout="1"]
    #careerSearchInput {
    padding-left: 48px !important;
    text-indent: 0 !important;
}

@media (min-width: 1025px) {
    html[data-theme] body.bjas-approved-layout[data-ui-build="approved-compact-v4"]
        .attendance-photo-main .attendance-camera-frame {
        height: 160px !important;
        min-height: 160px !important;
        aspect-ratio: auto !important;
    }

    html[data-theme] body.bjas-approved-layout[data-ui-build="approved-compact-v4"]
        .attendance-photo-main .internal-base-footer {
        display: none !important;
    }
}