/*
  Front-end layout consistency fixes
  Dibuat untuk merapikan HTML/CSS project tanpa menghapus fitur yang sudah ada.
  Fokus: scroll normal, warna konsisten, responsive lebih aman, dan mencegah halaman kepotong.
*/

:root {
    --primary-color: #0c2344;
    --secondary-color: #14345e;
    --background-color: #f4f6f9;
    --surface-color: #ffffff;
    --surface-soft-color: #f8fafc;
    --text-color: #172033;
    --muted-text-color: #667085;
    --accent-color: #d9a62e;
    --accent-soft-color: #fff4d8;
    --border-color: #dfe5ee;
    --danger-color: #d92d20;
    --success-color: #168364;
    --warning-color: #b45f06;
    --radius-lg: 18px;
    --radius-md: 14px;
    --radius-sm: 10px;
    --layout-page-max: 1500px;
    --font-sans: "Plus Jakarta Sans", Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    /* Alias agar file CSS lama tetap memakai token lama, tapi warnanya satu tema. */
    --bg: var(--primary-color);
    --bg-accent: var(--secondary-color);
    --panel: var(--surface-color);
    --panel-soft: rgba(255, 255, 255, 0.88);
    --surface: rgba(255, 255, 255, 0.94);
    --surface-strong: var(--surface-color);
    --surface-soft: var(--surface-soft-color);
    --line: rgba(15, 35, 68, 0.14);
    --line-strong: rgba(15, 35, 68, 0.24);
    --text: #eaf1fb;
    --text-strong: var(--text-color);
    --text-soft: #475467;
    --text-muted: var(--muted-text-color);
    --accent: var(--accent-color);
    --accent-strong: #b5851f;
    --accent-soft: rgba(217, 166, 46, 0.16);

    --zip-navy: var(--primary-color);
    --zip-navy-2: var(--secondary-color);
    --zip-gold: var(--accent-color);
    --zip-gold-soft: var(--accent-soft-color);
    --zip-bg: var(--background-color);
    --zip-surface: var(--surface-color);
    --zip-surface-soft: var(--surface-soft-color);
    --zip-border: var(--border-color);
    --zip-text: var(--text-color);
    --zip-muted: var(--muted-text-color);
}

/* POS cashier reset: standalone screen, no portal sidebar, neutral palette. */
html[data-theme] body.pos-page-wide.internal-clean-page-shell,
body.pos-page-wide.internal-clean-page-shell {
    background: #f4f7fa !important;
    overflow-x: hidden !important;
}

html[data-theme] body.pos-page-wide.internal-clean-page-shell .main,
body.pos-page-wide.internal-clean-page-shell .main {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
}

html[data-theme] body.pos-page-wide.internal-clean-page-shell .clean-module-layout,
body.pos-page-wide.internal-clean-page-shell .clean-module-layout,
html[data-theme] body.pos-page-wide.internal-clean-page-shell .clean-module-layout.clean-module-layout--no-sidebar,
body.pos-page-wide.internal-clean-page-shell .clean-module-layout.clean-module-layout--no-sidebar,
html[data-theme] body.pos-page-wide.internal-clean-page-shell .clean-module-layout.clean-module-layout--full-bleed,
body.pos-page-wide.internal-clean-page-shell .clean-module-layout.clean-module-layout--full-bleed {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
}

html[data-theme] body.pos-page-wide.internal-clean-page-shell .clean-module-sidebar,
body.pos-page-wide.internal-clean-page-shell .clean-module-sidebar {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

html[data-theme] body.pos-page-wide.internal-clean-page-shell .clean-content-panel,
body.pos-page-wide.internal-clean-page-shell .clean-content-panel,
html[data-theme] body.pos-page-wide.internal-clean-page-shell .clean-content-panel > .page-content.page-content-bleed,
body.pos-page-wide.internal-clean-page-shell .clean-content-panel > .page-content.page-content-bleed {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
}

html[data-theme] body.pos-page-wide :is(.internal-app-topbar, .internal-shell-header, .internal-shell-breadcrumb, .internal-breadcrumb, .clean-breadcrumb-bar, .breadcrumb-bar, .internal-base-footer, .app-version-badge),
body.pos-page-wide :is(.internal-app-topbar, .internal-shell-header, .internal-shell-breadcrumb, .internal-breadcrumb, .clean-breadcrumb-bar, .breadcrumb-bar, .internal-base-footer, .app-version-badge) {
    display: none !important;
}

html[data-theme] body.pos-page-wide .pos-terminal-clean.pos-ipos-refactor,
body.pos-page-wide .pos-terminal-clean.pos-ipos-refactor {
    --ipos-bg: #f4f7fa;
    --ipos-surface: #ffffff;
    --ipos-surface-soft: #f1f5f9;
    --ipos-elevated: #ffffff;
    --ipos-elevated-soft: #f8fafc;
    --ipos-border: #d7e0ea;
    --ipos-border-strong: #c5d1dd;
    --ipos-text: #0f233a;
    --ipos-muted: #62758a;
    --ipos-accent: #254f78;
    --ipos-accent-soft: #eef3f8;
    --ipos-dark: #10233b;
    --ipos-dark-soft: #10233b;
    --ipos-button-bg: #ffffff;
    --ipos-button-hover-bg: #f3f7fb;
    --ipos-primary-bg: #ffffff;
    --ipos-primary-border: #cbd7e4;
    --ipos-primary-color: #10233b;
    --ipos-success-bg: #10233b;
    --ipos-success-border: #10233b;
    --ipos-success-color: #ffffff;
    --ipos-danger-bg: #fff4f4;
    --ipos-danger-border: #efc7c7;
    --ipos-danger-color: #9a3030;
    --ipos-table-head-bg: #eef3f8;
    --ipos-table-head-color: #41566d;
    --ipos-table-row-hover: #f2f6fb;
    --ipos-total-bg: #f7fafc;
    --ipos-total-border: #d7e0ea;
    --ipos-total-value: #0f233a;
    --ipos-empty-bg: #f8fafc;
    --ipos-empty-border: #d7e0ea;
    --ipos-cart-table-bg: #ffffff;
    --ipos-cart-row-bg: #ffffff;
    --ipos-cart-row-alt-bg: #f8fafc;
    --ipos-cart-row-active-bg: #eef3f8;
    --ipos-cart-row-border: #e1e8f0;
    --ipos-cart-input-bg: #ffffff;
    --ipos-cart-input-border: #cbd7e4;
    --ipos-cart-empty-bg: #f8fafc;
    --ipos-picker-window-bg: #ffffff;
    --ipos-picker-table-bg: #ffffff;
    --ipos-picker-row-bg: #ffffff;
    --ipos-picker-row-alt-bg: #f8fafc;
    --ipos-picker-row-hover-bg: #eef3f8;
    --ipos-overlay: rgba(15, 35, 58, 0.36);
    --ipos-panel-shadow: none;
    --ipos-topbar-text: #ffffff;
    --ipos-topbar-muted: rgba(255, 255, 255, 0.72);
    --ipos-topbar-chip-bg: rgba(255, 255, 255, 0.08);
    --ipos-topbar-chip-border: rgba(255, 255, 255, 0.16);
    --ipos-topbar-button-bg: rgba(255, 255, 255, 0.10);
    --ipos-topbar-button-border: rgba(255, 255, 255, 0.20);
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    color: var(--ipos-text) !important;
}

html[data-theme] body.pos-page-wide .pos-terminal-clean.pos-ipos-refactor .pos-ipos-window,
body.pos-page-wide .pos-terminal-clean.pos-ipos-refactor .pos-ipos-window {
    width: 100% !important;
    max-width: none !important;
    min-height: 100dvh !important;
    margin: 0 !important;
    border-radius: 0 !important;
    border: 0 !important;
    background: var(--ipos-bg) !important;
    box-shadow: none !important;
}

html[data-theme] body.pos-page-wide .pos-terminal-clean.pos-ipos-refactor .pos-ipos-topbar,
body.pos-page-wide .pos-terminal-clean.pos-ipos-refactor .pos-ipos-topbar {
    border-radius: 0 !important;
    background: #10233b !important;
    box-shadow: none !important;
}

html[data-theme] body.pos-page-wide .pos-terminal-clean.pos-ipos-refactor .pos-ipos-close,
body.pos-page-wide .pos-terminal-clean.pos-ipos-refactor .pos-ipos-close {
    border-color: #d7b760 !important;
    background: #d7b760 !important;
    color: #10233b !important;
    box-shadow: none !important;
}

html[data-theme] body.pos-page-wide .pos-terminal-clean.pos-ipos-refactor .pos-ipos-close:hover,
body.pos-page-wide .pos-terminal-clean.pos-ipos-refactor .pos-ipos-close:hover {
    border-color: #e3c873 !important;
    background: #e3c873 !important;
}

html[data-theme] body.pos-page-wide .pos-terminal-clean.pos-ipos-refactor .pos-ipos-menu-backdrop,
body.pos-page-wide .pos-terminal-clean.pos-ipos-refactor .pos-ipos-menu-backdrop {
    position: fixed !important;
    inset: 0 !important;
    z-index: 11 !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: rgba(15, 23, 42, 0.22) !important;
    box-shadow: none !important;
    color: transparent !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    transform: none !important;
}

html[data-theme] body.pos-page-wide .pos-terminal-clean.pos-ipos-refactor .pos-ipos-menu-backdrop::before,
html[data-theme] body.pos-page-wide .pos-terminal-clean.pos-ipos-refactor .pos-ipos-menu-backdrop::after,
body.pos-page-wide .pos-terminal-clean.pos-ipos-refactor .pos-ipos-menu-backdrop::before,
body.pos-page-wide .pos-terminal-clean.pos-ipos-refactor .pos-ipos-menu-backdrop::after {
    content: none !important;
    display: none !important;
}

html[data-theme] body.pos-page-wide .pos-terminal-clean.pos-ipos-refactor :is(.pos-ipos-panel, .pos-ipos-payment-compact),
body.pos-page-wide .pos-terminal-clean.pos-ipos-refactor :is(.pos-ipos-panel, .pos-ipos-payment-compact) {
    border: 1px solid var(--ipos-border) !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

html[data-theme] body.pos-page-wide .pos-terminal-clean.pos-ipos-refactor :is(
    .pos-ipos-quickbar-action,
    .pos-ipos-quickbar-action.is-primary,
    .pos-vintage-button.is-primary,
    .pos-vintage-mini,
    .pos-payment-method
),
body.pos-page-wide .pos-terminal-clean.pos-ipos-refactor :is(
    .pos-ipos-quickbar-action,
    .pos-ipos-quickbar-action.is-primary,
    .pos-vintage-button.is-primary,
    .pos-vintage-mini,
    .pos-payment-method
) {
    border-color: #cbd7e4 !important;
    background: #ffffff !important;
    color: #10233b !important;
    box-shadow: none !important;
}

html[data-theme] body.pos-page-wide .pos-terminal-clean.pos-ipos-refactor :is(
    .pos-ipos-quickbar-action.is-success,
    .pos-vintage-button.is-success,
    .pos-ipos-checkout,
    .pos-ipos-pay-open
),
body.pos-page-wide .pos-terminal-clean.pos-ipos-refactor :is(
    .pos-ipos-quickbar-action.is-success,
    .pos-vintage-button.is-success,
    .pos-ipos-checkout,
    .pos-ipos-pay-open
) {
    border-color: #10233b !important;
    background: #10233b !important;
    color: #ffffff !important;
}

html[data-theme] body.pos-page-wide .pos-terminal-clean.pos-ipos-refactor .pos-ipos-quicksearch-result,
body.pos-page-wide .pos-terminal-clean.pos-ipos-refactor .pos-ipos-quicksearch-result {
    border-color: #d7e0ea !important;
    background: #ffffff !important;
    color: #0f233a !important;
    box-shadow: none !important;
}

html[data-theme] body.pos-page-wide .pos-terminal-clean.pos-ipos-refactor .pos-ipos-quicksearch-result:is(:hover, :focus-visible, .is-active),
body.pos-page-wide .pos-terminal-clean.pos-ipos-refactor .pos-ipos-quicksearch-result:is(:hover, :focus-visible, .is-active) {
    border-color: #9fb0c2 !important;
    background: #f2f6fb !important;
    box-shadow: none !important;
}

html[data-theme] body.pos-page-wide .pos-terminal-clean.pos-ipos-refactor :is(.pos-ipos-quicksearch-result-code, .pos-ipos-quicksearch-result-chip, .pos-ipos-counter, .pos-ipos-pagebadge),
body.pos-page-wide .pos-terminal-clean.pos-ipos-refactor :is(.pos-ipos-quicksearch-result-code, .pos-ipos-quicksearch-result-chip, .pos-ipos-counter, .pos-ipos-pagebadge) {
    border-color: #d7e0ea !important;
    background: #eef3f8 !important;
    color: #41566d !important;
}

html[data-theme] body.pos-page-wide .pos-terminal-clean.pos-ipos-refactor :is(input, select, textarea),
body.pos-page-wide .pos-terminal-clean.pos-ipos-refactor :is(input, select, textarea) {
    border-color: #cbd7e4 !important;
    background: #ffffff !important;
    color: #0f233a !important;
    -webkit-text-fill-color: #0f233a !important;
}

@media (max-width: 760px) {
    html[data-theme] body.pos-page-wide .pos-terminal-clean.pos-ipos-refactor .pos-ipos-layout,
    body.pos-page-wide .pos-terminal-clean.pos-ipos-refactor .pos-ipos-layout {
        padding: 10px !important;
    }
}

html,
body,
button,
input,
select,
textarea {
    font-family: var(--font-sans) !important;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    max-width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    max-width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}

body:not(.menu-open):not(.pos-ipos-picker-open):not(.pos-ipos-menu-open):not(.pos-payment-modal-open):not(.career-mobile-menu-open) {
    overflow-y: auto !important;
}

img,
svg,
video,
canvas,
iframe {
    max-width: 100%;
}

img,
video,
canvas {
    height: auto;
}

button,
input,
select,
textarea {
    font: inherit;
    max-width: 100%;
}

a,
button,
.ghost-button,
.btn,
.btn-link,
.button-primary,
.button-secondary,
.page-actions a,
.page-actions button {
    -webkit-tap-highlight-color: transparent;
}

body :is(.layout, .main, .main-public, .page-content, .page-content-bleed, .page-hero, .flash-stack, .form-box, .panel, .box, .card, .card-mini, .table-box, .internal-module-layout, .module-layout, .clean-module-layout, .internal-module-panel, .information-panel, .content-panel, .workspace-gateway, .career-public-shell, .career-candidate-shell, .career-candidate-main, .login-shell, .app-shell, .workspace) {
    min-width: 0 !important;
    box-sizing: border-box !important;
}

body :is(.main, .main-public, .page-content, .page-content-bleed) {
    width: 100%;
    max-width: 100%;
}

body :is(.page-content, .page-content-bleed, .internal-module-panel, .information-panel, .content-panel) {
    min-height: 0;
}

body:not(:has(.chat-page-content)) :is(.page-content, .page-content-bleed, .internal-module-panel, .information-panel, .content-panel) {
    height: auto !important;
    max-height: none !important;
}

body .page-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: clamp(14px, 2vw, 24px);
}

body .page-hero-text,
body .page-actions-desktop-slot,
body .page-actions {
    min-width: 0;
}

body .page-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

body :is(.table-box, .table-responsive, .table-wrap, .stock-table-viewport, .stock-table-wrap, .pos-ipos-tablewrap, .pos-ipos-cartwrap, .products-table-wrap) {
    max-width: 100% !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

body table {
    max-width: 100%;
    border-collapse: collapse;
}

body :is(td, th) {
    word-break: normal;
}

body :is(.card, .card-mini, .box, .panel, .form-box, .table-box) {
    border-color: var(--border-color, rgba(15, 35, 68, 0.14));
}

body :is(.ghost-button, .btn-link, .button-primary, .button-secondary, .page-actions a, .page-actions button, form button[type="submit"]) {
    border-radius: var(--radius-sm, 10px);
}

body :is(.ghost-button:focus-visible, .btn-link:focus-visible, .button-primary:focus-visible, .button-secondary:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible) {
    outline: 3px solid rgba(217, 166, 46, 0.35);
    outline-offset: 2px;
}

/* Shell internal: jangan kunci tinggi halaman. Konten boleh memanjang dan discroll browser. */
body.internal-clean-page-shell,
body.internal-module-shell,
body.internal-portal-shell {
    min-height: 100vh !important;
    height: auto !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    color: var(--text-color) !important;
    background: var(--background-color) !important;
}

body.internal-clean-page-shell .layout,
body.internal-module-shell .layout,
body.internal-portal-shell .layout {
    min-height: 100vh !important;
    height: auto !important;
    overflow: visible !important;
}

body.internal-clean-page-shell .main,
body.internal-module-shell .main,
body.internal-portal-shell .main {
    min-height: 0 !important;
    height: auto !important;
    overflow: visible !important;
}

body.internal-clean-page-shell :is(.internal-module-layout, .module-layout, .clean-module-layout),
body.internal-module-shell :is(.internal-module-layout, .module-layout, .clean-module-layout),
body.internal-portal-shell :is(.internal-module-layout, .module-layout, .clean-module-layout) {
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

body.internal-clean-page-shell :is(.internal-module-panel, .information-panel, .content-panel, .clean-content-panel),
body.internal-module-shell :is(.internal-module-panel, .information-panel, .content-panel, .clean-content-panel),
body.internal-portal-shell :is(.internal-module-panel, .information-panel, .content-panel, .clean-content-panel) {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

/* Perbaikan khusus stok/WMS: file lama mengunci html/body/main ke 100vh + overflow hidden. */
html:has(body.wms-stock-reference-shell),
html[data-theme]:has(body.wms-stock-reference-shell) {
    height: auto !important;
    min-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

body.wms-stock-reference-shell,
html[data-theme] body.wms-stock-reference-shell {
    height: auto !important;
    min-height: 100vh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

body.wms-stock-reference-shell :is(.layout, .main, .page-content, .page-content-bleed, .internal-module-layout, .internal-module-panel, .information-panel, .content-panel, .wms-zip-stock-page, .wms-zip-edit-page, .products-manual-box, .product-edit-form),
html[data-theme] body.wms-stock-reference-shell :is(.layout, .main, .page-content, .page-content-bleed, .internal-module-layout, .internal-module-panel, .information-panel, .content-panel, .wms-zip-stock-page, .wms-zip-edit-page, .products-manual-box, .product-edit-form) {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
}

body.wms-stock-reference-shell :is(.table-section, .table-wrap, .stock-table-viewport),
html[data-theme] body.wms-stock-reference-shell :is(.table-section, .table-wrap, .stock-table-viewport) {
    max-height: none !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
}

body.wms-stock-reference-shell :is(.filter-panel, .top-bar, .products-filter-bar, .stock-filter-bar),
html[data-theme] body.wms-stock-reference-shell :is(.filter-panel, .top-bar, .products-filter-bar, .stock-filter-bar) {
    max-width: 100% !important;
    overflow: visible !important;
}

body.wms-stock-reference-shell .stock-table,
html[data-theme] body.wms-stock-reference-shell .stock-table {
    min-width: 920px;
}

/* SMS Storage/Drive: desktop boleh scroll normal; sidebar tetap scroll sendiri kalau isinya panjang. */
body.sms-premium-compact,
body:has(.sms-premium-compact) {
    min-height: 100vh !important;
    height: auto !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

body.sms-premium-compact .app-shell {
    min-height: 100vh !important;
    height: auto !important;
}

body.sms-premium-compact .workspace {
    height: auto !important;
    min-height: calc(100vh - 76px) !important;
    max-height: none !important;
    overflow: visible !important;
}

body.sms-premium-compact .sidebar {
    max-height: calc(100vh - 56px) !important;
    overflow-y: auto !important;
}

/* Career public: shell kandidat sebelumnya memakai overflow hidden, dibuat aman saat konten panjang. */
body .career-candidate-shell {
    height: auto !important;
    min-height: calc(100vh - 32px) !important;
    overflow: visible !important;
}

body .career-candidate-main,
body .career-candidate-page {
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
}

@media (max-width: 1180px) {
    body.internal-clean-page-shell :is(.internal-module-layout, .module-layout, .clean-module-layout),
    body.internal-module-shell :is(.internal-module-layout, .module-layout, .clean-module-layout),
    body.internal-portal-shell :is(.internal-module-layout, .module-layout, .clean-module-layout) {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body.internal-clean-page-shell :is(.internal-module-nav, .information-module-nav, .clean-module-sidebar, .info-sidebar),
    body.internal-module-shell :is(.internal-module-nav, .information-module-nav, .clean-module-sidebar, .info-sidebar),
    body.internal-portal-shell :is(.internal-module-nav, .information-module-nav, .clean-module-sidebar, .info-sidebar) {
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
    }
}

@media (max-width: 900px) {
    body .layout {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body .sidebar:not(.clean-module-sidebar):not(.information-module-nav) {
        max-width: min(320px, 88vw);
    }

    body .main,
    body .page-content {
        padding-inline: clamp(12px, 4vw, 20px);
    }

    body .page-hero {
        flex-direction: column;
        align-items: stretch;
    }

    body .page-actions-desktop-slot,
    body .page-actions {
        width: 100%;
    }

    body .page-actions > * {
        flex: 1 1 min(220px, 100%);
        justify-content: center;
    }

    body.sms-premium-compact .app-shell {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: auto auto !important;
    }

    body.sms-premium-compact .topbar {
        height: auto !important;
        min-height: 64px !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 10px !important;
        padding-block: 10px !important;
    }

    body.sms-premium-compact .sidebar {
        position: static !important;
        height: auto !important;
        max-height: none !important;
    }

    body.sms-premium-compact .workspace {
        min-height: auto !important;
        margin: 10px !important;
    }
}

@media (max-width: 640px) {
    body .main,
    body .page-content {
        padding-inline: 12px;
    }

    body :is(.page-hero, .box, .panel, .form-box, .table-box, .card, .card-mini) {
        border-radius: var(--radius-md, 14px) !important;
    }

    body :is(.top-bar, .products-filter-bar, .stock-filter-bar, .filter-panel, form.search-form) {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 10px !important;
    }

    body :is(input, select, textarea, button, .ghost-button, .btn-link, .button-primary, .button-secondary) {
        width: 100%;
    }

    body table {
        font-size: 0.88rem;
    }

    body.wms-stock-reference-shell .stock-table,
    html[data-theme] body.wms-stock-reference-shell .stock-table {
        min-width: 760px;
    }
}

/* === AI chat shell guard: scoped fallback, with template-level guard loaded after static CSS. === */
html:has(body.ai-assistant-shell),
html[data-theme]:has(body.ai-assistant-shell),
html[data-theme] body.ai-assistant-shell,
body.ai-assistant-shell {
    background: #000000 !important;
    overflow: hidden !important;
}

html[data-theme] body.ai-assistant-shell :is(.internal-app-topbar, .internal-shell-header, .internal-shell-breadcrumb, .internal-breadcrumb, .clean-module-sidebar, .mobile-command-deck, .page-hero, .flash-stack),
body.ai-assistant-shell :is(.internal-app-topbar, .internal-shell-header, .internal-shell-breadcrumb, .internal-breadcrumb, .clean-module-sidebar, .mobile-command-deck, .page-hero, .flash-stack) {
    display: none !important;
}

html[data-theme] body.ai-assistant-shell :is(.layout, .main, .clean-module-layout, .clean-content-panel, .page-content),
body.ai-assistant-shell :is(.layout, .main, .clean-module-layout, .clean-content-panel, .page-content) {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #000000 !important;
    box-shadow: none !important;
    overflow: hidden !important;
}

html[data-theme] body.ai-assistant-shell .ai-shell.ai-chatgpt-app,
body.ai-assistant-shell .ai-shell.ai-chatgpt-app {
    display: grid !important;
    grid-template-columns: 318px minmax(0, 1fr) !important;
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #000000 !important;
    color: #f7f7f8 !important;
    overflow: hidden !important;
}

html[data-theme] body.ai-assistant-shell .ai-chatgpt-sidebar,
body.ai-assistant-shell .ai-chatgpt-sidebar {
    display: flex !important;
    flex-direction: column !important;
    width: 318px !important;
    height: 100dvh !important;
    padding: 14px 8px 18px !important;
    border-right: 1px solid #242424 !important;
    background: #050505 !important;
    color: #ffffff !important;
    overflow: hidden !important;
}

html[data-theme] body.ai-assistant-shell :is(.ai-chatgpt-nav-item, .ai-chatgpt-prompt-list button, .ai-icon-button, .ai-refresh-button, .ai-sidebar-open-button, .ai-composer-tool-button),
body.ai-assistant-shell :is(.ai-chatgpt-nav-item, .ai-chatgpt-prompt-list button, .ai-icon-button, .ai-refresh-button, .ai-sidebar-open-button, .ai-composer-tool-button) {
    border: 0 !important;
    background: transparent !important;
    color: #f4f4f4 !important;
    box-shadow: none !important;
}

html[data-theme] body.ai-assistant-shell :is(.ai-chatgpt-nav-item:hover, .ai-chatgpt-nav-item.is-active, .ai-chatgpt-nav-item:focus-visible, .ai-icon-button:hover, .ai-refresh-button:hover, .ai-sidebar-open-button:hover, .ai-composer-tool-button:hover),
body.ai-assistant-shell :is(.ai-chatgpt-nav-item:hover, .ai-chatgpt-nav-item.is-active, .ai-chatgpt-nav-item:focus-visible, .ai-icon-button:hover, .ai-refresh-button:hover, .ai-sidebar-open-button:hover, .ai-composer-tool-button:hover) {
    background: #2f2f2f !important;
    color: #ffffff !important;
}

html[data-theme] body.ai-assistant-shell .ai-chatgpt-nav-item,
body.ai-assistant-shell .ai-chatgpt-nav-item {
    display: grid !important;
    grid-template-columns: 30px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 44px !important;
    padding: 9px 14px !important;
    border-radius: 10px !important;
    text-align: left !important;
    text-decoration: none !important;
    font-size: 0.98rem !important;
    line-height: 1.2 !important;
    font-weight: 650 !important;
}

html[data-theme] body.ai-assistant-shell .ai-chatgpt-prompt-list button,
body.ai-assistant-shell .ai-chatgpt-prompt-list button {
    min-height: 34px !important;
    padding: 8px 7px !important;
    border-radius: 8px !important;
    color: #d9d9d9 !important;
    text-align: left !important;
    font-size: 0.88rem !important;
    line-height: 1.28 !important;
    font-weight: 600 !important;
}

html[data-theme] body.ai-assistant-shell .ai-chatgpt-prompt-list button:hover,
body.ai-assistant-shell .ai-chatgpt-prompt-list button:hover {
    background: #1f1f1f !important;
    color: #ffffff !important;
}

html[data-theme] body.ai-assistant-shell .ai-chatgpt-main,
body.ai-assistant-shell .ai-chatgpt-main {
    display: grid !important;
    grid-template-rows: minmax(0, 1fr) auto !important;
    height: 100dvh !important;
    background: #000000 !important;
    overflow: hidden !important;
}

html[data-theme] body.ai-assistant-shell .ai-chatgpt-empty-state h1,
body.ai-assistant-shell .ai-chatgpt-empty-state h1 {
    color: #ffffff !important;
    font-size: clamp(1.42rem, 2vw, 1.9rem) !important;
    line-height: 1.18 !important;
    font-weight: 520 !important;
    letter-spacing: 0 !important;
}

html[data-theme] body.ai-assistant-shell .ai-chatgpt-empty-state p,
body.ai-assistant-shell .ai-chatgpt-empty-state p {
    color: #9a9a9a !important;
}

html[data-theme] body.ai-assistant-shell .ai-chatgpt-composer,
body.ai-assistant-shell .ai-chatgpt-composer {
    position: absolute !important;
    left: 50% !important;
    bottom: 38px !important;
    z-index: 3 !important;
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) auto 46px !important;
    align-items: end !important;
    gap: 4px !important;
    width: min(960px, calc(100vw - 600px)) !important;
    min-width: min(540px, calc(100vw - 360px)) !important;
    min-height: 70px !important;
    margin: 0 !important;
    padding: 10px 12px 10px 14px !important;
    border: 1px solid #303030 !important;
    border-radius: 36px !important;
    background: #2a2a2a !important;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.38) !important;
    transform: translateX(-50%) !important;
}

html[data-theme] body.ai-assistant-shell .ai-chatgpt-composer textarea,
body.ai-assistant-shell .ai-chatgpt-composer textarea {
    width: 100% !important;
    min-height: 42px !important;
    max-height: 160px !important;
    padding: 10px 8px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #f4f4f4 !important;
    resize: none !important;
    outline: none !important;
    box-shadow: none !important;
    font-size: 1.02rem !important;
    line-height: 1.35 !important;
}

html[data-theme] body.ai-assistant-shell .ai-chatgpt-composer textarea::placeholder,
body.ai-assistant-shell .ai-chatgpt-composer textarea::placeholder {
    color: #b0b0b0 !important;
}

html[data-theme] body.ai-assistant-shell .ai-model-select,
body.ai-assistant-shell .ai-model-select {
    width: auto !important;
    min-width: 112px !important;
    height: 40px !important;
    padding: 0 30px 0 12px !important;
    border: 0 !important;
    border-radius: 20px !important;
    background-color: transparent !important;
    color: #d7d7d7 !important;
    box-shadow: none !important;
    font-weight: 650 !important;
}

html[data-theme] body.ai-assistant-shell .ai-model-select:hover,
body.ai-assistant-shell .ai-model-select:hover {
    background-color: #3a3a3a !important;
}

html[data-theme] body.ai-assistant-shell .ai-send-button,
body.ai-assistant-shell .ai-send-button {
    display: inline-grid !important;
    place-items: center !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: #4b4b4b !important;
    color: #101010 !important;
    box-shadow: none !important;
}

html[data-theme] body.ai-assistant-shell .ai-send-button:not(:disabled):hover,
body.ai-assistant-shell .ai-send-button:not(:disabled):hover {
    background: #e8e8e8 !important;
}

html[data-theme] body.ai-assistant-shell .ai-chatgpt-drawer,
body.ai-assistant-shell .ai-chatgpt-drawer {
    border: 1px solid #303030 !important;
    background: #181818 !important;
    color: #f5f5f5 !important;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.54) !important;
}

html[data-theme] body.ai-assistant-shell :is(.ai-status-band, .ai-knowledge-panel, .ai-training-box),
body.ai-assistant-shell :is(.ai-status-band, .ai-knowledge-panel, .ai-training-box) {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #eeeeee !important;
    box-shadow: none !important;
}

html[data-theme] body.ai-assistant-shell :is(.ai-status-card, .ai-knowledge-item, .ai-training-box > summary),
body.ai-assistant-shell :is(.ai-status-card, .ai-knowledge-item, .ai-training-box > summary) {
    border: 1px solid #303030 !important;
    border-radius: 12px !important;
    background: #222222 !important;
    color: #f5f5f5 !important;
    box-shadow: none !important;
}

html[data-theme] body.ai-assistant-shell .ai-training-form :is(input, textarea),
body.ai-assistant-shell .ai-training-form :is(input, textarea) {
    border: 1px solid #343434 !important;
    border-radius: 12px !important;
    background: #101010 !important;
    color: #f2f2f2 !important;
    box-shadow: none !important;
}

html[data-theme] body.ai-assistant-shell .ai-chatgpt-app.sidebar-collapsed,
body.ai-assistant-shell .ai-chatgpt-app.sidebar-collapsed {
    grid-template-columns: 0 minmax(0, 1fr) !important;
}

html[data-theme] body.ai-assistant-shell .ai-chatgpt-app.sidebar-collapsed .ai-chatgpt-sidebar,
body.ai-assistant-shell .ai-chatgpt-app.sidebar-collapsed .ai-chatgpt-sidebar {
    transform: translateX(-100%) !important;
}

html[data-theme] body.ai-assistant-shell .ai-chatgpt-app.sidebar-collapsed .ai-sidebar-open-button,
body.ai-assistant-shell .ai-chatgpt-app.sidebar-collapsed .ai-sidebar-open-button {
    opacity: 1 !important;
    pointer-events: auto !important;
}

@media (max-width: 900px) {
    html:has(body.ai-assistant-shell),
    html[data-theme]:has(body.ai-assistant-shell),
    html[data-theme] body.ai-assistant-shell,
    body.ai-assistant-shell {
        overflow: auto !important;
    }

    html[data-theme] body.ai-assistant-shell .ai-shell.ai-chatgpt-app,
    body.ai-assistant-shell .ai-shell.ai-chatgpt-app {
        grid-template-columns: minmax(0, 1fr) !important;
        height: auto !important;
        min-height: 100dvh !important;
        overflow: visible !important;
    }

    html[data-theme] body.ai-assistant-shell .ai-chatgpt-sidebar,
    body.ai-assistant-shell .ai-chatgpt-sidebar {
        width: 100% !important;
        height: auto !important;
        border-right: 0 !important;
        border-bottom: 1px solid #242424 !important;
    }

    html[data-theme] body.ai-assistant-shell .ai-chatgpt-main,
    body.ai-assistant-shell .ai-chatgpt-main {
        min-height: 620px !important;
        height: calc(100dvh - 230px) !important;
    }

    html[data-theme] body.ai-assistant-shell .ai-chatgpt-composer,
    body.ai-assistant-shell .ai-chatgpt-composer {
        width: min(100% - 28px, 760px) !important;
        min-width: 0 !important;
        grid-template-columns: 40px minmax(0, 1fr) 42px !important;
        bottom: 18px !important;
    }

    html[data-theme] body.ai-assistant-shell .ai-model-select,
    body.ai-assistant-shell .ai-model-select {
        display: none !important;
    }
}

@media (max-width: 480px) {
    html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header],
    body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] {
        grid-template-columns: minmax(0, auto) auto !important;
        grid-template-areas: "brand actions" !important;
        gap: 8px !important;
        padding-inline: 10px !important;
        overflow: hidden !important;
    }

    html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] .internal-shell-logo,
    body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] .internal-shell-logo {
        display: none !important;
    }

    html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] .internal-shell-brand,
    body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] .internal-shell-brand {
        grid-area: brand !important;
        min-width: 0 !important;
        max-width: 96px !important;
    }

    html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] .internal-shell-brand :is(.brand-divider, .brand-logo-wide),
    body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] .internal-shell-brand :is(.brand-divider, .brand-logo-wide) {
        display: none !important;
    }

    html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] .internal-shell-brand .internal-brand-pill,
    body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] .internal-shell-brand .internal-brand-pill {
        width: 84px !important;
        min-width: 84px !important;
        max-width: 84px !important;
        height: 42px !important;
        min-height: 42px !important;
        padding: 0 10px !important;
    }

    html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] .internal-shell-header-actions,
    body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] .internal-shell-header-actions {
        grid-area: actions !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 6px !important;
        width: auto !important;
        max-width: calc(100vw - 116px) !important;
        min-width: 0 !important;
        overflow: visible !important;
    }

    html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] .internal-ai-button,
    body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] .internal-ai-button {
        width: 44px !important;
        min-width: 44px !important;
        height: 42px !important;
        min-height: 42px !important;
        padding: 0 !important;
        font-size: 0 !important;
    }

    html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] .internal-ai-button::after,
    body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] .internal-ai-button::after {
        content: "AI";
        font-size: 0.78rem !important;
        font-weight: 900 !important;
        letter-spacing: 0 !important;
    }

    html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] .internal-topbar-user,
    body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] .internal-topbar-user {
        gap: 5px !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        flex: 0 0 auto !important;
        flex-direction: row-reverse !important;
    }

    html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] :is(.notification-button.internal-icon-button, .profile-button.internal-user-pill),
    body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] :is(.notification-button.internal-icon-button, .profile-button.internal-user-pill) {
        width: 40px !important;
        min-width: 40px !important;
        max-width: 40px !important;
        height: 40px !important;
        min-height: 40px !important;
        padding: 4px !important;
        gap: 0 !important;
    }

    html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] .profile-button.internal-user-pill :is(.profile-name, .dropdown-icon),
    body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] .profile-button.internal-user-pill :is(.profile-name, .dropdown-icon) {
        display: none !important;
    }

    html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] .profile-button.internal-user-pill .avatar,
    body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] .profile-button.internal-user-pill .avatar {
        width: 30px !important;
        min-width: 30px !important;
        height: 30px !important;
        flex-basis: 30px !important;
    }
}

/* Final approval layout override: keep /approvals readable after every generic clean-shell guard. */
html[data-theme] body.wms-approval-page-shell .main,
body.wms-approval-page-shell .main {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
}

html[data-theme] body.wms-approval-page-shell .clean-module-layout,
body.wms-approval-page-shell .clean-module-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: min(1320px, calc(100vw - 32px)) !important;
    max-width: 1320px !important;
    min-width: 0 !important;
    margin: 24px auto 36px !important;
    padding: 0 !important;
    overflow: visible !important;
}

html[data-theme] body.wms-approval-page-shell .clean-content-panel,
body.wms-approval-page-shell .clean-content-panel {
    display: block !important;
    grid-column: 1 / -1 !important;
    position: relative !important;
    z-index: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: clamp(22px, 3vw, 34px) !important;
    overflow: visible !important;
}

html[data-theme] body.wms-approval-page-shell .clean-content-panel > :is(.page-hero, .flash-stack, .page-content, .page-content-bleed),
body.wms-approval-page-shell .clean-content-panel > :is(.page-hero, .flash-stack, .page-content, .page-content-bleed) {
    display: block !important;
    position: relative !important;
    z-index: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 0 20px !important;
    padding: 0 !important;
    overflow: visible !important;
}

html[data-theme] body.wms-approval-page-shell .wms-page-stack,
body.wms-approval-page-shell .wms-page-stack {
    display: grid !important;
    gap: 18px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

/* Final approval layout override: keep /approvals readable after generic clean-shell guards. */
html[data-theme] body.wms-approval-page-shell,
body.wms-approval-page-shell {
    width: 100% !important;
    max-width: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

html[data-theme] body.wms-approval-page-shell .main,
body.wms-approval-page-shell .main {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
}

html[data-theme] body.wms-approval-page-shell .clean-module-layout,
body.wms-approval-page-shell .clean-module-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: min(1320px, calc(100vw - 32px)) !important;
    max-width: 1320px !important;
    min-width: 0 !important;
    margin: 24px auto 36px !important;
    padding: 0 !important;
    overflow: visible !important;
}

html[data-theme] body.wms-approval-page-shell .clean-module-sidebar,
body.wms-approval-page-shell .clean-module-sidebar {
    display: none !important;
}

html[data-theme] body.wms-approval-page-shell .clean-content-panel,
body.wms-approval-page-shell .clean-content-panel {
    display: block !important;
    grid-column: 1 / -1 !important;
    position: relative !important;
    z-index: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: clamp(22px, 3vw, 34px) !important;
    overflow: visible !important;
}

html[data-theme] body.wms-approval-page-shell .clean-content-panel > :is(.page-hero, .flash-stack, .page-content, .page-content-bleed),
body.wms-approval-page-shell .clean-content-panel > :is(.page-hero, .flash-stack, .page-content, .page-content-bleed) {
    display: block !important;
    position: relative !important;
    z-index: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 0 20px !important;
    padding: 0 !important;
    overflow: visible !important;
}

html[data-theme] body.wms-approval-page-shell .wms-page-stack,
body.wms-approval-page-shell .wms-page-stack {
    display: grid !important;
    gap: 18px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

html[data-theme] body.wms-approval-page-shell .wms-command-grid,
body.wms-approval-page-shell .wms-command-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

@media (max-width: 900px) {
    html[data-theme] body.wms-approval-page-shell .clean-module-layout,
    body.wms-approval-page-shell .clean-module-layout {
        width: min(100% - 24px, 900px) !important;
        margin-top: 14px !important;
    }

    html[data-theme] body.wms-approval-page-shell .wms-command-grid,
    body.wms-approval-page-shell .wms-command-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

/* Admin suite final override must stay at EOF because the clean-shell CSS above
   intentionally uses broad !important guards for module pages. */
html[data-theme] body.admin-suite-shell,
body.admin-suite-shell {
    height: auto !important;
    min-height: 100dvh !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

html[data-theme] body.admin-suite-shell > .layout,
body.admin-suite-shell > .layout,
html[data-theme] body.admin-suite-shell .main,
body.admin-suite-shell .main,
html[data-theme] body.admin-suite-shell .clean-module-layout,
body.admin-suite-shell .clean-module-layout,
html[data-theme] body.admin-suite-shell .clean-content-panel,
body.admin-suite-shell .clean-content-panel {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
}

html[data-theme] body.admin-suite-shell .clean-module-layout.clean-module-layout--no-sidebar,
body.admin-suite-shell .clean-module-layout.clean-module-layout--no-sidebar {
    display: block !important;
    width: min(1500px, calc(100vw - 40px)) !important;
    max-width: 1500px !important;
    min-width: 0 !important;
    margin: 22px auto 36px !important;
    padding: 0 !important;
}

html[data-theme] body.admin-suite-shell .clean-content-panel,
body.admin-suite-shell .clean-content-panel {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

html[data-theme] body.admin-suite-shell .clean-content-panel > .page-hero,
body.admin-suite-shell .clean-content-panel > .page-hero {
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 18px !important;
    padding: 18px 0 10px !important;
    overflow: visible !important;
}

html[data-theme] body.admin-suite-shell .clean-content-panel > .page-content.page-content-bleed,
body.admin-suite-shell .clean-content-panel > .page-content.page-content-bleed {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 0 32px !important;
    overflow: visible !important;
    scrollbar-gutter: auto !important;
}

/* WMS approval queue guard: keep the table horizontally scrollable without
   clipping the page vertically when the approval list gets wide or long. */
html[data-theme] body.wms-approval-page-shell,
body.wms-approval-page-shell {
    height: auto !important;
    min-height: 100dvh !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

html[data-theme] body.wms-approval-page-shell :is(.layout, .main, .clean-module-layout, .clean-content-panel, .page-content),
body.wms-approval-page-shell :is(.layout, .main, .clean-module-layout, .clean-content-panel, .page-content) {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
}

html[data-theme] body.wms-approval-page-shell .clean-module-layout,
body.wms-approval-page-shell .clean-module-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: min(1320px, calc(100vw - 32px)) !important;
    max-width: 1320px !important;
    margin: 24px auto 36px !important;
    padding: 0 !important;
}

html[data-theme] body.wms-approval-page-shell .clean-module-sidebar,
body.wms-approval-page-shell .clean-module-sidebar {
    display: none !important;
}

html[data-theme] body.wms-approval-page-shell .clean-content-panel,
body.wms-approval-page-shell .clean-content-panel {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

html[data-theme] body.wms-approval-page-shell .clean-content-panel > :is(.page-hero, .flash-stack, .page-content, .page-content-bleed),
body.wms-approval-page-shell .clean-content-panel > :is(.page-hero, .flash-stack, .page-content, .page-content-bleed) {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

html[data-theme] body.wms-approval-page-shell .approval-queue-table-box,
body.wms-approval-page-shell .approval-queue-table-box {
    width: 100% !important;
    max-width: 100% !important;
    max-height: none !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
}

html[data-theme] body.admin-suite-shell .page-content.page-content-bleed > .admin-local-nav-box,
body.admin-suite-shell .page-content.page-content-bleed > .admin-local-nav-box {
    position: static !important;
    grid-column: auto !important;
    grid-row: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 0 18px !important;
}

html[data-theme] body.admin-suite-shell .page-content.page-content-bleed > :not(.admin-local-nav-box):not(style),
body.admin-suite-shell .page-content.page-content-bleed > :not(.admin-local-nav-box):not(style) {
    grid-column: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    overflow: visible !important;
}

@media (min-width: 981px) {
    html[data-theme] body.admin-suite-shell .clean-content-panel > .page-content.page-content-bleed,
    body.admin-suite-shell .clean-content-panel > .page-content.page-content-bleed {
        padding: 0 0 32px !important;
    }

    html[data-theme] body.admin-suite-shell .page-content.page-content-bleed > .admin-local-nav-box,
    body.admin-suite-shell .page-content.page-content-bleed > .admin-local-nav-box {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 260px !important;
        max-width: 260px !important;
        margin: 0 !important;
    }

    html[data-theme] body.admin-suite-shell .page-content.page-content-bleed > :not(.admin-local-nav-box):not(style):not(script):not([hidden]),
    body.admin-suite-shell .page-content.page-content-bleed > :not(.admin-local-nav-box):not(style):not(script):not([hidden]) {
        display: block !important;
        width: calc(100% - 282px) !important;
        max-width: calc(100% - 282px) !important;
        margin-left: 282px !important;
    }

    html[data-theme] body.admin-suite-shell .page-content.page-content-bleed > .summary:not(.admin-local-nav-box):not(style):not(script):not([hidden]),
    body.admin-suite-shell .page-content.page-content-bleed > .summary:not(.admin-local-nav-box):not(style):not(script):not([hidden]),
    html[data-theme] body.admin-suite-shell .page-content.page-content-bleed > .meta-grid:not(.admin-local-nav-box):not(style):not(script):not([hidden]),
    body.admin-suite-shell .page-content.page-content-bleed > .meta-grid:not(.admin-local-nav-box):not(style):not(script):not([hidden]) {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 16px !important;
    }

    html[data-theme] body.admin-suite-shell .page-content.page-content-bleed > [hidden],
    body.admin-suite-shell .page-content.page-content-bleed > [hidden] {
        display: none !important;
    }
}

/* Internal module cards: show the same workspace icon language used by the left rail. */
html[data-theme] body.internal-module-shell .internal-hub-card,
body.internal-module-shell .internal-hub-card {
    align-items: flex-start !important;
    position: relative !important;
    padding-right: 76px !important;
}

html[data-theme] body.internal-module-shell .internal-hub-card-icon,
body.internal-module-shell .internal-hub-card-icon {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 42px !important;
    height: 42px !important;
    border: 1px solid rgba(217, 166, 46, 0.35) !important;
    border-radius: 12px !important;
    background: #fff7df !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.72) !important;
}

html[data-theme] body.internal-module-shell .internal-hub-card-icon img,
body.internal-module-shell .internal-hub-card-icon img {
    width: 24px !important;
    height: 24px !important;
    object-fit: contain !important;
}

html[data-theme] body.internal-module-shell .internal-hub-card-copy,
body.internal-module-shell .internal-hub-card-copy {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

html[data-theme] body.internal-module-shell .internal-hub-card .information-policy-badge,
body.internal-module-shell .internal-hub-card .information-policy-badge {
    flex: 0 0 auto !important;
    position: absolute !important;
    top: 18px !important;
    right: 18px !important;
    margin-left: 0 !important;
}

@media (max-width: 640px) {
    html[data-theme] body.internal-module-shell .internal-hub-card,
    body.internal-module-shell .internal-hub-card {
        padding-right: 18px !important;
    }

    html[data-theme] body.internal-module-shell .internal-hub-card .information-policy-badge,
    body.internal-module-shell .internal-hub-card .information-policy-badge {
        position: static !important;
        margin-left: auto !important;
    }
}

/* CRM clean-shell repair: keep the CRM operation page readable and aligned. */
html[data-theme] body.crm-page-shell,
body.crm-page-shell {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 100dvh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

html[data-theme] body.crm-page-shell .layout,
body.crm-page-shell .layout,
html[data-theme] body.crm-page-shell .main,
body.crm-page-shell .main {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
}

html[data-theme] body.crm-page-shell .clean-module-layout,
body.crm-page-shell .clean-module-layout {
    position: relative !important;
    display: block !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: min(1500px, calc(100vw - 40px)) !important;
    max-width: 1500px !important;
    min-width: 0 !important;
    margin: 24px auto 36px !important;
    padding: 0 0 0 302px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

html[data-theme] body.crm-page-shell .clean-module-sidebar,
body.crm-page-shell .clean-module-sidebar {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 2 !important;
    width: 280px !important;
    max-width: 280px !important;
    min-width: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

html[data-theme] body.crm-page-shell .clean-content-panel,
body.crm-page-shell .clean-content-panel {
    position: relative !important;
    z-index: 1 !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 640px !important;
    max-height: none !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

html[data-theme] body.crm-page-shell .clean-content-panel > :is(.page-hero, .flash-stack, .page-content, .page-content-bleed),
body.crm-page-shell .clean-content-panel > :is(.page-hero, .flash-stack, .page-content, .page-content-bleed) {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

html[data-theme] body.crm-page-shell .page-content.page-content-bleed,
body.crm-page-shell .page-content.page-content-bleed {
    padding: 0 !important;
}

html[data-theme] body.crm-page-shell :is(.summary, .meta-grid),
body.crm-page-shell :is(.summary, .meta-grid) {
    width: 100% !important;
    min-width: 0 !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

html[data-theme] body.crm-page-shell :is(.form-box, .table-box, .box, .top-bar),
body.crm-page-shell :is(.form-box, .table-box, .box, .top-bar) {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

html[data-theme] body.crm-page-shell .table-box,
body.crm-page-shell .table-box {
    overflow-x: auto !important;
}

@media (max-width: 980px) {
    html[data-theme] body.crm-page-shell .clean-module-layout,
    body.crm-page-shell .clean-module-layout {
        display: block !important;
        width: min(100% - 24px, 980px) !important;
        margin: 14px auto 28px !important;
        padding-left: 0 !important;
    }

    html[data-theme] body.crm-page-shell :is(.clean-module-sidebar, .clean-content-panel),
    body.crm-page-shell :is(.clean-module-sidebar, .clean-content-panel) {
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    html[data-theme] body.crm-page-shell :is(.summary, .meta-grid),
    body.crm-page-shell :is(.summary, .meta-grid) {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 640px) {
    html[data-theme] body.crm-page-shell :is(.summary, .meta-grid),
    body.crm-page-shell :is(.summary, .meta-grid) {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

@media (max-width: 980px) {
    html[data-theme] body.admin-suite-shell .clean-module-layout.clean-module-layout--no-sidebar,
    body.admin-suite-shell .clean-module-layout.clean-module-layout--no-sidebar {
        width: min(100% - 24px, 980px) !important;
        margin: 16px auto 28px !important;
    }

    html[data-theme] body.admin-suite-shell .clean-content-panel > .page-content.page-content-bleed,
    body.admin-suite-shell .clean-content-panel > .page-content.page-content-bleed {
        padding: 0 0 28px !important;
    }

    html[data-theme] body.admin-suite-shell .page-content.page-content-bleed > .admin-local-nav-box,
    body.admin-suite-shell .page-content.page-content-bleed > .admin-local-nav-box,
    html[data-theme] body.admin-suite-shell .page-content.page-content-bleed > :not(.admin-local-nav-box):not(style),
    body.admin-suite-shell .page-content.page-content-bleed > :not(.admin-local-nav-box):not(style) {
        position: static !important;
        grid-column: auto !important;
        grid-row: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
    }
}

/* === BJAS AI chat workspace: scoped dark assistant shell === */
html:has(body.ai-assistant-shell),
html[data-theme]:has(body.ai-assistant-shell) {
    min-height: 100% !important;
    background: #000000 !important;
    overflow: hidden !important;
}

html[data-theme] body.ai-assistant-shell,
body.ai-assistant-shell {
    min-height: 100dvh !important;
    background: #000000 !important;
    color: #f7f7f8 !important;
    overflow: hidden !important;
}

html[data-theme] body.ai-assistant-shell :is(.internal-app-topbar, .internal-shell-breadcrumb, .clean-module-sidebar, .mobile-command-deck, .page-hero, .flash-stack),
body.ai-assistant-shell :is(.internal-app-topbar, .internal-shell-breadcrumb, .clean-module-sidebar, .mobile-command-deck, .page-hero, .flash-stack) {
    display: none !important;
}

html[data-theme] body.ai-assistant-shell :is(.layout, .main, .clean-module-layout, .clean-content-panel, .page-content),
body.ai-assistant-shell :is(.layout, .main, .clean-module-layout, .clean-content-panel, .page-content) {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #000000 !important;
    box-shadow: none !important;
    overflow: hidden !important;
}

html[data-theme] body.ai-assistant-shell .ai-shell.ai-chatgpt-app,
body.ai-assistant-shell .ai-shell.ai-chatgpt-app {
    --ai-bg: #000000;
    --ai-panel: #171717;
    --ai-panel-2: #212121;
    --ai-panel-3: #2f2f2f;
    --ai-line: #242424;
    --ai-soft-line: #333333;
    --ai-text: #f7f7f8;
    --ai-muted: #b4b4b4;
    --ai-faint: #8a8a8a;
    --ai-accent: #e5e5e5;
    display: grid !important;
    grid-template-columns: 318px minmax(0, 1fr);
    position: fixed !important;
    inset: 0 !important;
    z-index: 80 !important;
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    gap: 0 !important;
    background: var(--ai-bg) !important;
    color: var(--ai-text) !important;
    overflow: hidden !important;
    font-family: "Plus Jakarta Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

html[data-theme] body.ai-assistant-shell .ai-chatgpt-sidebar,
body.ai-assistant-shell .ai-chatgpt-sidebar {
    display: flex !important;
    flex-direction: column;
    width: 318px;
    min-width: 0;
    height: 100dvh;
    padding: 14px 8px 18px;
    background: #050505;
    border-right: 1px solid var(--ai-line);
    color: var(--ai-text);
    overflow: hidden;
    transition: transform 180ms ease, width 180ms ease;
    z-index: 4;
}

html[data-theme] body.ai-assistant-shell .ai-chatgpt-sidebar-head,
body.ai-assistant-shell .ai-chatgpt-sidebar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 42px;
    padding: 0 14px 12px;
}

html[data-theme] body.ai-assistant-shell .ai-chatgpt-brand,
body.ai-assistant-shell .ai-chatgpt-brand {
    color: #ffffff !important;
    text-decoration: none !important;
    font-size: 1.28rem;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: 0 !important;
}

html[data-theme] body.ai-assistant-shell .ai-icon-button,
body.ai-assistant-shell .ai-icon-button,
html[data-theme] body.ai-assistant-shell .ai-refresh-button,
body.ai-assistant-shell .ai-refresh-button,
html[data-theme] body.ai-assistant-shell .ai-sidebar-open-button,
body.ai-assistant-shell .ai-sidebar-open-button {
    display: inline-grid !important;
    place-items: center;
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: transparent !important;
    color: #d7d7d7 !important;
    box-shadow: none !important;
    cursor: pointer;
}

html[data-theme] body.ai-assistant-shell .ai-icon-button:hover,
body.ai-assistant-shell .ai-icon-button:hover,
html[data-theme] body.ai-assistant-shell .ai-refresh-button:hover,
body.ai-assistant-shell .ai-refresh-button:hover,
html[data-theme] body.ai-assistant-shell .ai-sidebar-open-button:hover,
body.ai-assistant-shell .ai-sidebar-open-button:hover {
    background: #242424 !important;
    color: #ffffff !important;
}

html[data-theme] body.ai-assistant-shell svg,
body.ai-assistant-shell svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

html[data-theme] body.ai-assistant-shell .ai-chatgpt-nav,
body.ai-assistant-shell .ai-chatgpt-nav {
    display: grid;
    gap: 4px;
    padding: 8px 0;
}

html[data-theme] body.ai-assistant-shell .ai-chatgpt-nav-item,
body.ai-assistant-shell .ai-chatgpt-nav-item {
    display: grid !important;
    grid-template-columns: 30px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-height: 44px;
    width: 100%;
    padding: 9px 14px !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: transparent !important;
    color: #ffffff !important;
    text-align: left;
    text-decoration: none !important;
    font-size: 0.98rem;
    line-height: 1.2;
    font-weight: 650;
    letter-spacing: 0 !important;
    box-shadow: none !important;
    cursor: pointer;
}

html[data-theme] body.ai-assistant-shell .ai-chatgpt-nav-item:hover,
body.ai-assistant-shell .ai-chatgpt-nav-item:hover,
html[data-theme] body.ai-assistant-shell .ai-chatgpt-nav-item.is-active,
body.ai-assistant-shell .ai-chatgpt-nav-item.is-active {
    background: #2f2f2f !important;
}

html[data-theme] body.ai-assistant-shell .ai-chatgpt-nav-icon,
body.ai-assistant-shell .ai-chatgpt-nav-icon {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    color: #f4f4f4;
}

html[data-theme] body.ai-assistant-shell .ai-chatgpt-prompt-list,
body.ai-assistant-shell .ai-chatgpt-prompt-list {
    display: grid;
    gap: 6px;
    margin-top: 18px;
    padding: 0 8px;
    min-height: 0;
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: #3a3a3a transparent;
}

html[data-theme] body.ai-assistant-shell .ai-chatgpt-prompt-list > span,
body.ai-assistant-shell .ai-chatgpt-prompt-list > span {
    padding: 0 6px 6px;
    color: var(--ai-faint);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0 !important;
}

html[data-theme] body.ai-assistant-shell .ai-chatgpt-prompt-list button,
body.ai-assistant-shell .ai-chatgpt-prompt-list button {
    width: 100%;
    min-height: 34px;
    padding: 8px 7px !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: #d9d9d9 !important;
    text-align: left;
    font-size: 0.88rem;
    line-height: 1.28;
    font-weight: 600;
    box-shadow: none !important;
    cursor: pointer;
}

html[data-theme] body.ai-assistant-shell .ai-chatgpt-prompt-list button:hover,
body.ai-assistant-shell .ai-chatgpt-prompt-list button:hover {
    background: #1f1f1f !important;
    color: #ffffff !important;
}

html[data-theme] body.ai-assistant-shell .ai-chatgpt-user,
body.ai-assistant-shell .ai-chatgpt-user {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    margin-top: auto;
    padding: 12px;
    border-radius: 12px;
    color: #ffffff;
}

html[data-theme] body.ai-assistant-shell .ai-chatgpt-user:hover,
body.ai-assistant-shell .ai-chatgpt-user:hover {
    background: #1f1f1f;
}

html[data-theme] body.ai-assistant-shell .ai-chatgpt-user-avatar,
body.ai-assistant-shell .ai-chatgpt-user-avatar {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #3f3f46;
    color: #ffffff;
    font-weight: 800;
}

html[data-theme] body.ai-assistant-shell .ai-chatgpt-user strong,
body.ai-assistant-shell .ai-chatgpt-user strong,
html[data-theme] body.ai-assistant-shell .ai-chatgpt-user small,
body.ai-assistant-shell .ai-chatgpt-user small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html[data-theme] body.ai-assistant-shell .ai-chatgpt-user strong,
body.ai-assistant-shell .ai-chatgpt-user strong {
    font-size: 0.92rem;
    line-height: 1.2;
}

html[data-theme] body.ai-assistant-shell .ai-chatgpt-user small,
body.ai-assistant-shell .ai-chatgpt-user small {
    color: #c2c2c2;
    font-size: 0.78rem;
}

html[data-theme] body.ai-assistant-shell .ai-chatgpt-main,
body.ai-assistant-shell .ai-chatgpt-main {
    position: relative;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    width: 100%;
    min-width: 0;
    height: 100dvh;
    background: #000000;
    overflow: hidden;
}

html[data-theme] body.ai-assistant-shell .ai-chatgpt-top-actions,
body.ai-assistant-shell .ai-chatgpt-top-actions {
    position: absolute;
    top: 18px;
    right: 22px;
    z-index: 3;
}

html[data-theme] body.ai-assistant-shell .ai-sidebar-open-button,
body.ai-assistant-shell .ai-sidebar-open-button {
    position: absolute;
    top: 18px;
    left: 18px;
    z-index: 5;
    opacity: 0;
    pointer-events: none;
}

html[data-theme] body.ai-assistant-shell .ai-chatgpt-center,
body.ai-assistant-shell .ai-chatgpt-center {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    align-content: center;
    width: min(960px, calc(100vw - 390px));
    min-width: 0;
    height: 100%;
    margin: 0 auto;
    padding: 13vh 20px 150px;
    overflow: hidden;
}

html[data-theme] body.ai-assistant-shell .ai-chatgpt-empty-state,
body.ai-assistant-shell .ai-chatgpt-empty-state {
    align-self: end;
    justify-self: center;
    margin-bottom: 62px;
    text-align: center;
}

html[data-theme] body.ai-assistant-shell .ai-chatgpt-empty-state[hidden],
body.ai-assistant-shell .ai-chatgpt-empty-state[hidden] {
    display: none !important;
}

html[data-theme] body.ai-assistant-shell .ai-chatgpt-empty-state h1,
body.ai-assistant-shell .ai-chatgpt-empty-state h1 {
    margin: 0;
    color: #ffffff;
    font-size: clamp(1.42rem, 2vw, 1.9rem);
    line-height: 1.18;
    font-weight: 520;
    letter-spacing: 0 !important;
}

html[data-theme] body.ai-assistant-shell .ai-chatgpt-empty-state p,
body.ai-assistant-shell .ai-chatgpt-empty-state p {
    margin: 10px 0 0;
    color: #9a9a9a;
    font-size: 0.95rem;
    line-height: 1.35;
}

html[data-theme] body.ai-assistant-shell .ai-chat-log,
body.ai-assistant-shell .ai-chat-log {
    display: grid !important;
    align-content: start;
    gap: 18px !important;
    width: min(860px, 100%);
    max-height: 100%;
    margin: 0 auto !important;
    padding: 4px 0 24px !important;
    overflow: auto !important;
    scrollbar-width: thin;
    scrollbar-color: #3a3a3a transparent;
}

html[data-theme] body.ai-assistant-shell .ai-message,
body.ai-assistant-shell .ai-message {
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 12px !important;
    width: 100%;
    min-width: 0;
}

html[data-theme] body.ai-assistant-shell .ai-message-user,
body.ai-assistant-shell .ai-message-user {
    grid-template-columns: minmax(0, 1fr) 34px !important;
}

html[data-theme] body.ai-assistant-shell .ai-message-user .ai-message-avatar,
body.ai-assistant-shell .ai-message-user .ai-message-avatar {
    grid-column: 2;
    grid-row: 1;
}

html[data-theme] body.ai-assistant-shell .ai-message-user .ai-message-bubble,
body.ai-assistant-shell .ai-message-user .ai-message-bubble {
    grid-column: 1;
    justify-self: end;
    max-width: min(680px, 100%);
    background: #2f2f2f !important;
}

html[data-theme] body.ai-assistant-shell .ai-message-avatar,
body.ai-assistant-shell .ai-message-avatar {
    display: grid !important;
    place-items: center !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    background: #191919 !important;
    color: #e6e6e6 !important;
}

html[data-theme] body.ai-assistant-shell .ai-message-avatar svg,
body.ai-assistant-shell .ai-message-avatar svg {
    width: 18px;
    height: 18px;
}

html[data-theme] body.ai-assistant-shell .ai-message-bubble,
body.ai-assistant-shell .ai-message-bubble {
    min-width: 0 !important;
    padding: 11px 14px !important;
    border: 0 !important;
    border-radius: 18px !important;
    background: transparent !important;
    color: #eeeeee !important;
    box-shadow: none !important;
}

html[data-theme] body.ai-assistant-shell .ai-message-bubble p,
body.ai-assistant-shell .ai-message-bubble p {
    margin: 0 !important;
    color: inherit !important;
    font-size: 0.98rem;
    line-height: 1.55 !important;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

html[data-theme] body.ai-assistant-shell .ai-chatgpt-composer,
body.ai-assistant-shell .ai-chatgpt-composer {
    position: absolute;
    left: 50%;
    bottom: 38px;
    z-index: 3;
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) auto 46px !important;
    align-items: end !important;
    gap: 4px !important;
    width: min(960px, calc(100vw - 600px)) !important;
    min-width: min(540px, calc(100vw - 360px));
    min-height: 70px;
    margin: 0 !important;
    padding: 10px 12px 10px 14px !important;
    border: 1px solid #303030 !important;
    border-radius: 36px !important;
    background: #2a2a2a !important;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.38) !important;
    transform: translateX(-50%);
}

html[data-theme] body.ai-assistant-shell .ai-composer-tool-button,
body.ai-assistant-shell .ai-composer-tool-button,
html[data-theme] body.ai-assistant-shell .ai-send-button,
body.ai-assistant-shell .ai-send-button {
    display: inline-grid !important;
    place-items: center;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    box-shadow: none !important;
    cursor: pointer;
}

html[data-theme] body.ai-assistant-shell .ai-composer-tool-button,
body.ai-assistant-shell .ai-composer-tool-button {
    background: transparent !important;
    color: #f0f0f0 !important;
}

html[data-theme] body.ai-assistant-shell .ai-composer-tool-button:hover,
body.ai-assistant-shell .ai-composer-tool-button:hover {
    background: #3a3a3a !important;
}

html[data-theme] body.ai-assistant-shell .ai-send-button,
body.ai-assistant-shell .ai-send-button {
    background: #4b4b4b !important;
    color: #101010 !important;
}

html[data-theme] body.ai-assistant-shell .ai-send-button:not(:disabled):hover,
body.ai-assistant-shell .ai-send-button:not(:disabled):hover {
    background: #e8e8e8 !important;
}

html[data-theme] body.ai-assistant-shell .ai-send-button:disabled,
body.ai-assistant-shell .ai-send-button:disabled {
    opacity: 0.52;
    cursor: wait;
}

html[data-theme] body.ai-assistant-shell .ai-chatgpt-composer textarea,
body.ai-assistant-shell .ai-chatgpt-composer textarea {
    width: 100% !important;
    min-height: 42px !important;
    max-height: 160px !important;
    padding: 10px 8px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #f4f4f4 !important;
    resize: none !important;
    outline: none !important;
    box-shadow: none !important;
    font-size: 1.02rem !important;
    line-height: 1.35 !important;
}

html[data-theme] body.ai-assistant-shell .ai-chatgpt-composer textarea::placeholder,
body.ai-assistant-shell .ai-chatgpt-composer textarea::placeholder {
    color: #b0b0b0 !important;
}

html[data-theme] body.ai-assistant-shell .ai-model-select,
body.ai-assistant-shell .ai-model-select {
    align-self: center;
    width: auto !important;
    min-width: 112px !important;
    height: 40px !important;
    padding: 0 30px 0 12px !important;
    border: 0 !important;
    border-radius: 20px !important;
    background-color: transparent !important;
    color: #d7d7d7 !important;
    box-shadow: none !important;
    font-weight: 650;
    cursor: pointer;
}

html[data-theme] body.ai-assistant-shell .ai-model-select:hover,
body.ai-assistant-shell .ai-model-select:hover {
    background-color: #3a3a3a !important;
}

html[data-theme] body.ai-assistant-shell .ai-model-select option,
body.ai-assistant-shell .ai-model-select option {
    background: #1f1f1f;
    color: #ffffff;
}

html[data-theme] body.ai-assistant-shell .ai-chatgpt-drawer,
body.ai-assistant-shell .ai-chatgpt-drawer {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 6;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    width: min(420px, calc(100vw - 360px));
    max-height: calc(100dvh - 32px);
    padding: 16px;
    border: 1px solid #303030;
    border-radius: 18px;
    background: #181818;
    color: #f5f5f5;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.54);
    overflow: hidden;
}

html[data-theme] body.ai-assistant-shell .ai-chatgpt-drawer[hidden],
body.ai-assistant-shell .ai-chatgpt-drawer[hidden] {
    display: none !important;
}

html[data-theme] body.ai-assistant-shell .ai-chatgpt-drawer-head,
body.ai-assistant-shell .ai-chatgpt-drawer-head,
html[data-theme] body.ai-assistant-shell .ai-knowledge-head,
body.ai-assistant-shell .ai-knowledge-head,
html[data-theme] body.ai-assistant-shell .section-title,
body.ai-assistant-shell .section-title {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 12px !important;
}

html[data-theme] body.ai-assistant-shell .ai-chatgpt-drawer-head,
body.ai-assistant-shell .ai-chatgpt-drawer-head {
    padding-bottom: 12px;
    border-bottom: 1px solid #2d2d2d;
}

html[data-theme] body.ai-assistant-shell .ai-chatgpt-drawer-head span,
body.ai-assistant-shell .ai-chatgpt-drawer-head span,
html[data-theme] body.ai-assistant-shell .ai-knowledge-head span,
body.ai-assistant-shell .ai-knowledge-head span {
    display: block !important;
    color: #a7a7a7 !important;
    font-size: 0.74rem !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
}

html[data-theme] body.ai-assistant-shell .ai-chatgpt-drawer-head strong,
body.ai-assistant-shell .ai-chatgpt-drawer-head strong,
html[data-theme] body.ai-assistant-shell .ai-knowledge-head strong,
body.ai-assistant-shell .ai-knowledge-head strong {
    display: block !important;
    color: #ffffff !important;
    font-size: 1rem !important;
    line-height: 1.24 !important;
    letter-spacing: 0 !important;
}

html[data-theme] body.ai-assistant-shell .ai-drawer-section,
body.ai-assistant-shell .ai-drawer-section {
    display: none;
    min-height: 0;
    padding-top: 14px;
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: #3a3a3a transparent;
}

html[data-theme] body.ai-assistant-shell .ai-drawer-section.active,
body.ai-assistant-shell .ai-drawer-section.active {
    display: block;
}

html[data-theme] body.ai-assistant-shell :is(.ai-status-band, .ai-knowledge-panel, .ai-training-box),
body.ai-assistant-shell :is(.ai-status-band, .ai-knowledge-panel, .ai-training-box) {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #eeeeee !important;
    box-shadow: none !important;
}

html[data-theme] body.ai-assistant-shell .ai-status-grid,
body.ai-assistant-shell .ai-status-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin-top: 14px;
}

html[data-theme] body.ai-assistant-shell .ai-status-card,
body.ai-assistant-shell .ai-status-card,
html[data-theme] body.ai-assistant-shell .ai-knowledge-item,
body.ai-assistant-shell .ai-knowledge-item {
    padding: 12px !important;
    border: 1px solid #303030 !important;
    border-radius: 12px !important;
    background: #222222 !important;
}

html[data-theme] body.ai-assistant-shell .ai-status-card span,
body.ai-assistant-shell .ai-status-card span,
html[data-theme] body.ai-assistant-shell .ai-knowledge-item span,
body.ai-assistant-shell .ai-knowledge-item span {
    display: block;
    color: #cfcfcf !important;
    font-size: 0.78rem !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
}

html[data-theme] body.ai-assistant-shell .ai-status-card strong,
body.ai-assistant-shell .ai-status-card strong {
    display: block;
    margin-top: 7px;
    color: #ffffff !important;
    font-size: 1.35rem;
    line-height: 1.1;
}

html[data-theme] body.ai-assistant-shell .ai-status-card small,
body.ai-assistant-shell .ai-status-card small,
html[data-theme] body.ai-assistant-shell .ai-knowledge-item p,
body.ai-assistant-shell .ai-knowledge-item p,
html[data-theme] body.ai-assistant-shell .section-title p,
body.ai-assistant-shell .section-title p {
    margin: 6px 0 0 !important;
    color: #a7a7a7 !important;
    font-size: 0.84rem !important;
    line-height: 1.42 !important;
}

html[data-theme] body.ai-assistant-shell .section-title h2,
body.ai-assistant-shell .section-title h2 {
    margin: 0 !important;
    color: #ffffff !important;
    font-size: 1rem !important;
    line-height: 1.3 !important;
}

html[data-theme] body.ai-assistant-shell .status-pill,
body.ai-assistant-shell .status-pill,
html[data-theme] body.ai-assistant-shell .ai-queue-pill,
body.ai-assistant-shell .ai-queue-pill {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    min-height: 30px;
    padding: 6px 10px !important;
    border: 1px solid #303030 !important;
    border-radius: 999px !important;
    background: #242424 !important;
    color: #dedede !important;
    font-size: 0.78rem !important;
    line-height: 1.2 !important;
}

html[data-theme] body.ai-assistant-shell .ai-queue-strip,
body.ai-assistant-shell .ai-queue-strip,
html[data-theme] body.ai-assistant-shell .ai-knowledge-list,
body.ai-assistant-shell .ai-knowledge-list {
    display: grid !important;
    gap: 10px !important;
    margin-top: 12px !important;
}

html[data-theme] body.ai-assistant-shell .ai-training-box > summary,
body.ai-assistant-shell .ai-training-box > summary {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px !important;
    border: 1px solid #303030 !important;
    border-radius: 12px !important;
    background: #222222 !important;
    color: #ffffff !important;
    cursor: pointer;
}

html[data-theme] body.ai-assistant-shell .ai-training-form,
body.ai-assistant-shell .ai-training-form {
    display: grid !important;
    gap: 10px !important;
    margin-top: 12px !important;
}

html[data-theme] body.ai-assistant-shell .ai-training-form label,
body.ai-assistant-shell .ai-training-form label {
    color: #cfcfcf !important;
    font-size: 0.82rem !important;
    font-weight: 750 !important;
}

html[data-theme] body.ai-assistant-shell .ai-training-form :is(input, textarea),
body.ai-assistant-shell .ai-training-form :is(input, textarea) {
    width: 100% !important;
    min-width: 0 !important;
    padding: 11px 12px !important;
    border: 1px solid #343434 !important;
    border-radius: 12px !important;
    background: #101010 !important;
    color: #f2f2f2 !important;
    box-shadow: none !important;
}

html[data-theme] body.ai-assistant-shell .ai-training-form button,
body.ai-assistant-shell .ai-training-form button,
html[data-theme] body.ai-assistant-shell .ai-knowledge-item button,
body.ai-assistant-shell .ai-knowledge-item button {
    min-height: 40px !important;
    padding: 9px 14px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: #f2f2f2 !important;
    color: #101010 !important;
    font-weight: 800 !important;
    box-shadow: none !important;
}

html[data-theme] body.ai-assistant-shell .ai-knowledge-item .danger-button,
body.ai-assistant-shell .ai-knowledge-item .danger-button {
    background: #4a1d1d !important;
    color: #ffd6d6 !important;
}

html[data-theme] body.ai-assistant-shell .ai-chatgpt-app.sidebar-collapsed,
body.ai-assistant-shell .ai-chatgpt-app.sidebar-collapsed {
    grid-template-columns: 0 minmax(0, 1fr);
}

html[data-theme] body.ai-assistant-shell .ai-chatgpt-app.sidebar-collapsed .ai-chatgpt-sidebar,
body.ai-assistant-shell .ai-chatgpt-app.sidebar-collapsed .ai-chatgpt-sidebar {
    transform: translateX(-100%);
}

html[data-theme] body.ai-assistant-shell .ai-chatgpt-app.sidebar-collapsed .ai-sidebar-open-button,
body.ai-assistant-shell .ai-chatgpt-app.sidebar-collapsed .ai-sidebar-open-button {
    opacity: 1;
    pointer-events: auto;
}

html[data-theme] body.ai-assistant-shell .ai-chatgpt-app.sidebar-collapsed .ai-chatgpt-center,
body.ai-assistant-shell .ai-chatgpt-app.sidebar-collapsed .ai-chatgpt-center {
    width: min(960px, calc(100vw - 40px));
}

html[data-theme] body.ai-assistant-shell .ai-chatgpt-app.sidebar-collapsed .ai-chatgpt-composer,
body.ai-assistant-shell .ai-chatgpt-app.sidebar-collapsed .ai-chatgpt-composer {
    width: min(960px, calc(100vw - 48px)) !important;
    min-width: 0;
    transform: translateX(-50%);
}

@media (max-width: 1180px) {
    html[data-theme] body.ai-assistant-shell .ai-chatgpt-composer,
    body.ai-assistant-shell .ai-chatgpt-composer {
        width: min(760px, calc(100vw - 390px)) !important;
        min-width: 0;
    }

    html[data-theme] body.ai-assistant-shell .ai-chatgpt-drawer,
    body.ai-assistant-shell .ai-chatgpt-drawer {
        width: min(390px, calc(100vw - 340px));
    }
}

@media (max-width: 900px) {
    html:has(body.ai-assistant-shell),
    html[data-theme]:has(body.ai-assistant-shell),
    html[data-theme] body.ai-assistant-shell,
    body.ai-assistant-shell {
        overflow: auto !important;
    }

    html[data-theme] body.ai-assistant-shell .ai-shell.ai-chatgpt-app,
    body.ai-assistant-shell .ai-shell.ai-chatgpt-app {
        grid-template-columns: minmax(0, 1fr);
        height: auto !important;
        min-height: 100dvh !important;
        overflow: visible !important;
    }

    html[data-theme] body.ai-assistant-shell .ai-chatgpt-sidebar,
    body.ai-assistant-shell .ai-chatgpt-sidebar {
        width: 100%;
        height: auto;
        max-height: none;
        border-right: 0;
        border-bottom: 1px solid var(--ai-line);
    }

    html[data-theme] body.ai-assistant-shell .ai-chatgpt-sidebar-head,
    body.ai-assistant-shell .ai-chatgpt-sidebar-head {
        padding-inline: 8px;
    }

    html[data-theme] body.ai-assistant-shell .ai-chatgpt-nav,
    body.ai-assistant-shell .ai-chatgpt-nav {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
    }

    html[data-theme] body.ai-assistant-shell .ai-chatgpt-nav-item,
    body.ai-assistant-shell .ai-chatgpt-nav-item {
        grid-template-columns: 24px minmax(0, 1fr);
        min-height: 40px;
        padding: 8px !important;
        font-size: 0.82rem;
    }

    html[data-theme] body.ai-assistant-shell .ai-chatgpt-prompt-list,
    body.ai-assistant-shell .ai-chatgpt-prompt-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-height: none;
    }

    html[data-theme] body.ai-assistant-shell .ai-chatgpt-prompt-list > span,
    body.ai-assistant-shell .ai-chatgpt-prompt-list > span {
        grid-column: 1 / -1;
    }

    html[data-theme] body.ai-assistant-shell .ai-chatgpt-main,
    body.ai-assistant-shell .ai-chatgpt-main {
        min-height: 620px;
        height: calc(100dvh - 230px);
    }

    html[data-theme] body.ai-assistant-shell .ai-chatgpt-center,
    body.ai-assistant-shell .ai-chatgpt-center {
        width: min(100% - 24px, 760px);
        padding: 64px 0 130px;
    }

    html[data-theme] body.ai-assistant-shell .ai-chatgpt-composer,
    body.ai-assistant-shell .ai-chatgpt-composer {
        width: min(100% - 28px, 760px) !important;
        min-width: 0;
        grid-template-columns: 40px minmax(0, 1fr) 42px !important;
        bottom: 18px;
        transform: translateX(-50%);
    }

    html[data-theme] body.ai-assistant-shell .ai-model-select,
    body.ai-assistant-shell .ai-model-select {
        display: none !important;
    }

    html[data-theme] body.ai-assistant-shell .ai-chatgpt-drawer,
    body.ai-assistant-shell .ai-chatgpt-drawer {
        position: fixed;
        inset: auto 12px 12px;
        width: auto;
        max-height: min(78dvh, 680px);
    }
}

@media (max-width: 560px) {
    html[data-theme] body.ai-assistant-shell .ai-chatgpt-nav,
    body.ai-assistant-shell .ai-chatgpt-nav,
    html[data-theme] body.ai-assistant-shell .ai-chatgpt-prompt-list,
    body.ai-assistant-shell .ai-chatgpt-prompt-list,
    html[data-theme] body.ai-assistant-shell .ai-status-grid,
    body.ai-assistant-shell .ai-status-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    html[data-theme] body.ai-assistant-shell .ai-chatgpt-empty-state h1,
    body.ai-assistant-shell .ai-chatgpt-empty-state h1 {
        font-size: 1.28rem;
    }

    html[data-theme] body.ai-assistant-shell .ai-chatgpt-composer,
    body.ai-assistant-shell .ai-chatgpt-composer {
        grid-template-columns: 38px minmax(0, 1fr) 40px !important;
        min-height: 62px;
        border-radius: 30px !important;
        padding: 8px 9px !important;
    }
}

/* Admin suite final guard: admin pages use the clean topbar, but their content
   is a normal two-column admin layout and must not inherit the full-height
   module shell constraints. */
html[data-theme] body.admin-suite-shell,
body.admin-suite-shell {
    height: auto !important;
    min-height: 100dvh !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

html[data-theme] body.admin-suite-shell > .layout,
body.admin-suite-shell > .layout,
html[data-theme] body.admin-suite-shell .main,
body.admin-suite-shell .main,
html[data-theme] body.admin-suite-shell .clean-module-layout,
body.admin-suite-shell .clean-module-layout,
html[data-theme] body.admin-suite-shell .clean-content-panel,
body.admin-suite-shell .clean-content-panel {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
}

html[data-theme] body.admin-suite-shell .clean-module-layout.clean-module-layout--no-sidebar,
body.admin-suite-shell .clean-module-layout.clean-module-layout--no-sidebar {
    display: block !important;
    width: min(1500px, calc(100vw - 40px)) !important;
    max-width: 1500px !important;
    min-width: 0 !important;
    margin: 22px auto 36px !important;
    padding: 0 !important;
}

html[data-theme] body.admin-suite-shell .clean-content-panel,
body.admin-suite-shell .clean-content-panel {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

html[data-theme] body.admin-suite-shell .clean-content-panel > .page-hero,
body.admin-suite-shell .clean-content-panel > .page-hero {
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 18px !important;
    padding: 18px 0 10px !important;
    overflow: visible !important;
}

html[data-theme] body.admin-suite-shell .clean-content-panel > .page-content.page-content-bleed,
body.admin-suite-shell .clean-content-panel > .page-content.page-content-bleed {
    display: grid !important;
    grid-template-columns: minmax(240px, 260px) minmax(0, 1fr) !important;
    gap: 22px !important;
    align-items: start !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 0 32px !important;
    overflow: visible !important;
    scrollbar-gutter: auto !important;
}

html[data-theme] body.admin-suite-shell .page-content.page-content-bleed > .admin-local-nav-box,
body.admin-suite-shell .page-content.page-content-bleed > .admin-local-nav-box {
    grid-column: 1 !important;
    width: 100% !important;
    max-width: 260px !important;
    min-width: 0 !important;
}

html[data-theme] body.admin-suite-shell .page-content.page-content-bleed > :not(.admin-local-nav-box):not(style),
body.admin-suite-shell .page-content.page-content-bleed > :not(.admin-local-nav-box):not(style) {
    grid-column: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
}

@media (max-width: 980px) {
    html[data-theme] body.admin-suite-shell .clean-module-layout.clean-module-layout--no-sidebar,
    body.admin-suite-shell .clean-module-layout.clean-module-layout--no-sidebar {
        width: min(100% - 24px, 980px) !important;
        margin: 16px auto 28px !important;
    }

    html[data-theme] body.admin-suite-shell .clean-content-panel > .page-content.page-content-bleed,
    body.admin-suite-shell .clean-content-panel > .page-content.page-content-bleed {
        grid-template-columns: minmax(0, 1fr) !important;
        padding-bottom: 28px !important;
    }

    html[data-theme] body.admin-suite-shell .page-content.page-content-bleed > .admin-local-nav-box,
    body.admin-suite-shell .page-content.page-content-bleed > .admin-local-nav-box,
    html[data-theme] body.admin-suite-shell .page-content.page-content-bleed > :not(.admin-local-nav-box):not(style),
    body.admin-suite-shell .page-content.page-content-bleed > :not(.admin-local-nav-box):not(style) {
        grid-column: 1 !important;
        max-width: 100% !important;
    }
}

@media (max-width: 480px) {
    html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] .topbar-menu-shell:has(.notification-button),
    body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] .topbar-menu-shell:has(.notification-button) {
        display: none !important;
    }

    html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] .internal-ai-button,
    body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] .internal-ai-button {
        position: absolute !important;
        top: 50% !important;
        right: 56px !important;
        transform: translateY(-50%) !important;
    }

    html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] .topbar-menu-shell:has(.profile-button),
    body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] .topbar-menu-shell:has(.profile-button) {
        position: absolute !important;
        top: 50% !important;
        right: 10px !important;
        transform: translateY(-50%) !important;
    }
}

/* Login standalone: form tidak boleh kepotong di layar pendek / mobile landscape. */
body.login-page,
body.login-page .login-shell {
    min-height: 100vh !important;
    height: auto !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

body.login-page .login-form-panel {
    min-height: min(100vh, 900px) !important;
    height: auto !important;
    overflow: visible !important;
}

@media (max-width: 900px), (max-height: 720px) {
    body.login-page .login-shell {
        display: grid !important;
        align-items: stretch !important;
        overflow: visible !important;
    }

    body.login-page .login-form-panel {
        min-height: auto !important;
        justify-content: flex-start !important;
    }
}

/* Polesan konsistensi visual: kartu, form, tombol, dan panel memakai token brand yang sama. */
body :is(.page-hero, .content-header, .filter-panel, .summary-card, .card, .card-mini, .box, .panel, .form-box, .table-box, .workspace-card, .file-surface) {
    border-color: var(--border-color, rgba(15, 35, 68, 0.14)) !important;
}

body :is(.button-primary, .btn-primary, form button[type="submit"]):not(.top-icon-btn):not(.ghost-button) {
    color: #ffffff !important;
    background: linear-gradient(135deg, var(--primary-color, #0c2344), var(--secondary-color, #14345e)) !important;
    border-color: rgba(12, 35, 68, 0.18) !important;
}

body :is(.button-secondary, .btn-secondary, .ghost-button, .btn-link) {
    border-color: var(--border-color, rgba(15, 35, 68, 0.14));
}

body :is(input, select, textarea) {
    color: var(--text-color, #172033);
    background-color: #ffffff;
    border-color: var(--border-color, #dfe5ee);
}

body :is(input, select, textarea):focus {
    border-color: rgba(217, 166, 46, 0.72) !important;
    box-shadow: 0 0 0 4px rgba(217, 166, 46, 0.14) !important;
}

/* Mobile: hanya field dan tombol aksi yang full-width, bukan semua icon button/navbar. */
@media (max-width: 640px) {
    body :is(input, select, textarea) {
        width: 100%;
    }

    body :is(.button-primary, .button-secondary, .btn-link, form button[type="submit"], .page-actions a, .page-actions button):not(.top-icon-btn):not(.icon-button):not(.notification-button):not(.profile-button):not(.sidebar-main-trigger) {
        width: 100%;
        justify-content: center;
    }

    body :is(.top-icon-btn, .icon-button, .notification-button, .profile-button, .sidebar-main-trigger, .floating-toolbelt-launcher, .file-kebab, .folder-kebab) {
        width: auto;
        flex: 0 0 auto;
    }
}

@media (max-width: 640px) {
    body :is(.view-switch-btn, .file-action-btn, .toolbar-chip, .notification-tab, .mobile-menu-button, .login-install-toggle) {
        width: auto;
        flex: 0 0 auto;
    }
}

/* ======================================================================
   HRIS RESPONSIVE V2 — hard guard
   Tujuan: HRIS tidak lagi kepotong/menyempit di desktop, laptop, tablet,
   dan mobile. File ini diload paling akhir dari base.html, jadi selector
   dibuat spesifik untuk menimpa dashboard.css dan internal_portal_zip.css.
   ====================================================================== */

html[data-theme] body.internal-module-shell,
body.internal-module-shell {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 100vh !important;
    height: auto !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    background:
        radial-gradient(circle at top left, rgba(217, 166, 46, 0.10), transparent 30rem),
        linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%) !important;
}

html[data-theme] body.internal-module-shell .layout,
body.internal-module-shell .layout,
html[data-theme] body.internal-module-shell .main,
body.internal-module-shell .main {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 100vh !important;
    height: auto !important;
    overflow: visible !important;
}

html[data-theme] body.internal-module-shell .main,
body.internal-module-shell .main {
    display: block !important;
    padding: 0 0 32px !important;
}

/* Header dan breadcrumb harus full-width, bukan ikut mengecil bersama konten. */
html[data-theme] body.internal-module-shell .module-header,
body.internal-module-shell .module-header,
html[data-theme] body.internal-module-shell .internal-app-topbar,
body.internal-module-shell .internal-app-topbar {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
    align-items: center !important;
    gap: clamp(12px, 2vw, 24px) !important;
    padding: 12px clamp(16px, 3.5vw, 48px) !important;
    overflow: visible !important;
    background: rgba(255, 255, 255, 0.94) !important;
    border-bottom: 1px solid var(--border-color, #dfe5ee) !important;
    box-shadow: 0 8px 28px rgba(15, 23, 42, 0.04) !important;
    backdrop-filter: blur(16px) !important;
}

html[data-theme] body.internal-module-shell .module-header .brand,
body.internal-module-shell .module-header .brand,
html[data-theme] body.internal-module-shell .module-header .user-nav,
body.internal-module-shell .module-header .user-nav {
    min-width: 0 !important;
    max-width: 100% !important;
}

html[data-theme] body.internal-module-shell .module-header .brand,
body.internal-module-shell .module-header .brand {
    justify-self: start !important;
    overflow: hidden !important;
}

html[data-theme] body.internal-module-shell .module-header .header-center-logo,
body.internal-module-shell .module-header .header-center-logo,
html[data-theme] body.internal-module-shell .module-header .internal-topbar-logo,
body.internal-module-shell .module-header .internal-topbar-logo {
    justify-self: center !important;
    width: clamp(128px, 16vw, 220px) !important;
    max-width: 28vw !important;
    height: 48px !important;
    overflow: visible !important;
}

html[data-theme] body.internal-module-shell .module-header .user-nav,
body.internal-module-shell .module-header .user-nav {
    justify-self: end !important;
}

html[data-theme] body.internal-module-shell .breadcrumb-bar,
body.internal-module-shell .breadcrumb-bar,
html[data-theme] body.internal-module-shell .internal-breadcrumb,
body.internal-module-shell .internal-breadcrumb {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: rgba(255, 255, 255, 0.84) !important;
    border-bottom: 1px solid var(--border-color, #dfe5ee) !important;
}

html[data-theme] body.internal-module-shell .breadcrumb-list,
body.internal-module-shell .breadcrumb-list {
    width: min(100% - 32px, 1480px) !important;
    max-width: 1480px !important;
    min-height: 52px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

/* Container utama HRIS dibuat lapang dan stabil. */
html[data-theme] body.internal-module-shell .page-content.hris-clean-shell,
body.internal-module-shell .page-content.hris-clean-shell,
html[data-theme] body.internal-module-shell .page-content.hris-responsive-shell,
body.internal-module-shell .page-content.hris-responsive-shell {
    width: min(100% - 32px, 1480px) !important;
    max-width: 1480px !important;
    min-width: 0 !important;
    margin: 0 auto !important;
    padding: 24px 0 36px !important;
    display: block !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .internal-module-layout,
body.internal-module-shell .hris-clean-shell .internal-module-layout,
html[data-theme] body.internal-module-shell .hris-clean-shell .module-layout,
body.internal-module-shell .hris-clean-shell .module-layout {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(240px, 280px) minmax(0, 1fr) !important;
    gap: clamp(16px, 2vw, 24px) !important;
    align-items: start !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .internal-module-nav,
body.internal-module-shell .hris-clean-shell .internal-module-nav,
html[data-theme] body.internal-module-shell .hris-clean-shell .info-sidebar,
body.internal-module-shell .hris-clean-shell .info-sidebar {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    align-self: start !important;
    position: sticky !important;
    top: 92px !important;
    max-height: calc(100vh - 112px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    border: 1px solid var(--border-color, #dfe5ee) !important;
    box-shadow: 0 16px 34px rgba(12, 35, 68, 0.08) !important;
    scrollbar-width: thin;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .hris-module-disclosure,
body.internal-module-shell .hris-clean-shell .hris-module-disclosure,
html[data-theme] body.internal-module-shell .hris-clean-shell .information-sidebar-card,
body.internal-module-shell .hris-clean-shell .information-sidebar-card {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: inherit !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .hris-module-summary,
body.internal-module-shell .hris-clean-shell .hris-module-summary,
html[data-theme] body.internal-module-shell .hris-clean-shell .information-sidebar-head,
body.internal-module-shell .hris-clean-shell .information-sidebar-head {
    min-height: 76px !important;
    padding: 18px 20px !important;
    border-bottom: 1px solid var(--border-color, #dfe5ee) !important;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .hris-module-grid,
body.internal-module-shell .hris-clean-shell .hris-module-grid,
html[data-theme] body.internal-module-shell .hris-clean-shell .sidebar-menu,
body.internal-module-shell .hris-clean-shell .sidebar-menu {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    padding: 12px !important;
    overflow: visible !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .hris-module-card,
body.internal-module-shell .hris-clean-shell .hris-module-card,
html[data-theme] body.internal-module-shell .hris-clean-shell .sidebar-link,
body.internal-module-shell .hris-clean-shell .sidebar-link {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 54px !important;
    display: grid !important;
    grid-template-columns: 24px minmax(0, auto) minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 12px 14px !important;
    border: 1px solid transparent !important;
    border-radius: 12px !important;
    background: transparent !important;
    color: #344054 !important;
    box-shadow: none !important;
    text-decoration: none !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .hris-module-card:hover,
body.internal-module-shell .hris-clean-shell .hris-module-card:hover,
html[data-theme] body.internal-module-shell .hris-clean-shell .sidebar-link:hover,
body.internal-module-shell .hris-clean-shell .sidebar-link:hover {
    background: #f4f7fb !important;
    border-color: #e5eaf2 !important;
    color: var(--primary-color, #0c2344) !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .hris-module-card.active,
html[data-theme] body.internal-module-shell .hris-clean-shell .hris-module-card.is-active,
body.internal-module-shell .hris-clean-shell .hris-module-card.active,
body.internal-module-shell .hris-clean-shell .hris-module-card.is-active,
html[data-theme] body.internal-module-shell .hris-clean-shell .sidebar-link.active,
html[data-theme] body.internal-module-shell .hris-clean-shell .sidebar-link.is-active,
body.internal-module-shell .hris-clean-shell .sidebar-link.active,
body.internal-module-shell .hris-clean-shell .sidebar-link.is-active {
    background: linear-gradient(135deg, var(--primary-color, #0c2344), var(--secondary-color, #14345e)) !important;
    border-color: rgba(12, 35, 68, 0.16) !important;
    color: #ffffff !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .hris-module-card > .badge,
body.internal-module-shell .hris-clean-shell .hris-module-card > .badge {
    display: inline-flex !important;
    min-width: max-content !important;
    height: 24px !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 8px !important;
    border-radius: 999px !important;
    background: #eef2f7 !important;
    color: #53657a !important;
    font-size: 0.64rem !important;
    line-height: 1 !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .hris-module-card.active > .badge,
html[data-theme] body.internal-module-shell .hris-clean-shell .hris-module-card.is-active > .badge,
body.internal-module-shell .hris-clean-shell .hris-module-card.active > .badge,
body.internal-module-shell .hris-clean-shell .hris-module-card.is-active > .badge {
    background: rgba(255, 255, 255, 0.18) !important;
    color: #ffffff !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .hris-module-card-copy,
body.internal-module-shell .hris-clean-shell .hris-module-card-copy {
    min-width: 0 !important;
    display: block !important;
}

/* Panel kanan HRIS wajib penuh, tidak boleh mengecil jadi kartu sempit. */
html[data-theme] body.internal-module-shell .hris-clean-shell .internal-module-panel,
body.internal-module-shell .hris-clean-shell .internal-module-panel,
html[data-theme] body.internal-module-shell .hris-clean-shell .information-panel,
body.internal-module-shell .hris-clean-shell .information-panel,
html[data-theme] body.internal-module-shell .hris-clean-shell .content-panel,
body.internal-module-shell .hris-clean-shell .content-panel {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: calc(100vh - 188px) !important;
    height: auto !important;
    display: block !important;
    padding: clamp(18px, 2.2vw, 32px) !important;
    overflow: visible !important;
    border: 1px solid var(--border-color, #dfe5ee) !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, 0.97) !important;
    box-shadow: 0 18px 42px rgba(12, 35, 68, 0.08) !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .internal-module-panel > *,
body.internal-module-shell .hris-clean-shell .internal-module-panel > *,
html[data-theme] body.internal-module-shell .hris-clean-shell .information-panel > *,
body.internal-module-shell .hris-clean-shell .information-panel > * {
    max-width: 100% !important;
    min-width: 0 !important;
}

/* Summary, meta, form, dan dashboard card dibuat adaptive. */
html[data-theme] body.internal-module-shell .hris-clean-shell .summary,
body.internal-module-shell .hris-clean-shell .summary {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)) !important;
    gap: 12px !important;
    margin: 0 0 16px !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .meta-grid,
body.internal-module-shell .hris-clean-shell .meta-grid {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)) !important;
    gap: 12px !important;
    margin: 0 0 16px !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .card-mini,
body.internal-module-shell .hris-clean-shell .card-mini,
html[data-theme] body.internal-module-shell .hris-clean-shell .meta-card,
body.internal-module-shell .hris-clean-shell .meta-card {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 82px !important;
    padding: 16px !important;
    border: 1px solid var(--border-color, #dfe5ee) !important;
    border-top: 3px solid var(--accent-color, #d9a62e) !important;
    border-radius: 14px !important;
    background: #ffffff !important;
    box-shadow: 0 10px 22px rgba(12, 35, 68, 0.04) !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .card-mini p,
body.internal-module-shell .hris-clean-shell .card-mini p,
html[data-theme] body.internal-module-shell .hris-clean-shell .meta-card span,
body.internal-module-shell .hris-clean-shell .meta-card span {
    margin: 0 0 8px !important;
    color: var(--muted-text-color, #667085) !important;
    font-size: 0.72rem !important;
    font-weight: 850 !important;
    letter-spacing: 0.08em !important;
    line-height: 1.25 !important;
    text-transform: uppercase !important;
    overflow-wrap: anywhere !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .card-mini h3,
body.internal-module-shell .hris-clean-shell .card-mini h3 {
    margin: 0 !important;
    color: var(--primary-color, #0c2344) !important;
    font-size: clamp(1.35rem, 2vw, 1.9rem) !important;
    line-height: 1 !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .meta-card strong,
body.internal-module-shell .hris-clean-shell .meta-card strong {
    display: block !important;
    color: var(--text-color, #172033) !important;
    font-size: 0.92rem !important;
    line-height: 1.35 !important;
    overflow-wrap: anywhere !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .top-bar,
body.internal-module-shell .hris-clean-shell .top-bar,
html[data-theme] body.internal-module-shell .hris-clean-shell .products-filter-bar,
body.internal-module-shell .hris-clean-shell .products-filter-bar,
html[data-theme] body.internal-module-shell .hris-clean-shell .schedule-filter-bar,
body.internal-module-shell .hris-clean-shell .schedule-filter-bar {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)) !important;
    gap: 12px !important;
    margin: 16px 0 !important;
    padding: 16px !important;
    border: 1px solid var(--border-color, #dfe5ee) !important;
    border-radius: 16px !important;
    background: #f1f5f9 !important;
    box-shadow: none !important;
    overflow: visible !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell :is(input, select, textarea, button, .ghost-button),
body.internal-module-shell .hris-clean-shell :is(input, select, textarea, button, .ghost-button) {
    max-width: 100% !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell :is(input, select, textarea),
body.internal-module-shell .hris-clean-shell :is(input, select, textarea) {
    width: 100% !important;
    min-height: 44px !important;
    border-radius: 12px !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .hris-dashboard-grid,
body.internal-module-shell .hris-clean-shell .hris-dashboard-grid,
html[data-theme] body.internal-module-shell .hris-clean-shell .cards.hris-dashboard-grid,
body.internal-module-shell .hris-clean-shell .cards.hris-dashboard-grid {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)) !important;
    gap: 16px !important;
    margin: 0 !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell :is(.table-box, .form-box, .box, .panel, details.panel-disclosure),
body.internal-module-shell .hris-clean-shell :is(.table-box, .form-box, .box, .panel, details.panel-disclosure) {
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
    border-radius: 16px !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell :is(.table-responsive, .table-wrap, .schedule-board-wrap, .hris-dashboard-schedule-wrap),
body.internal-module-shell .hris-clean-shell :is(.table-responsive, .table-wrap, .schedule-board-wrap, .hris-dashboard-schedule-wrap) {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
}

html[data-theme] body.internal-module-shell .hris-clean-shell table,
body.internal-module-shell .hris-clean-shell table {
    width: 100% !important;
    min-width: 760px;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .form-grid,
body.internal-module-shell .hris-clean-shell .form-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)) !important;
    gap: 14px !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .form-grid > [style*="grid-column"],
body.internal-module-shell .hris-clean-shell .form-grid > [style*="grid-column"] {
    grid-column: auto / span 2 !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .split-actions,
body.internal-module-shell .hris-clean-shell .split-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
}

/* Tablet: nav dipindah ke atas supaya panel tidak menyempit. */
@media (max-width: 1200px) {
    html[data-theme] body.internal-module-shell .page-content.hris-clean-shell,
    body.internal-module-shell .page-content.hris-clean-shell {
        width: min(100% - 24px, 1080px) !important;
        padding-top: 18px !important;
    }

    html[data-theme] body.internal-module-shell .hris-clean-shell .internal-module-layout,
    body.internal-module-shell .hris-clean-shell .internal-module-layout,
    html[data-theme] body.internal-module-shell .hris-clean-shell .module-layout,
    body.internal-module-shell .hris-clean-shell .module-layout {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    html[data-theme] body.internal-module-shell .hris-clean-shell .internal-module-nav,
    body.internal-module-shell .hris-clean-shell .internal-module-nav,
    html[data-theme] body.internal-module-shell .hris-clean-shell .info-sidebar,
    body.internal-module-shell .hris-clean-shell .info-sidebar {
        position: static !important;
        max-height: none !important;
        overflow: visible !important;
    }

    html[data-theme] body.internal-module-shell .hris-clean-shell .hris-module-grid,
    body.internal-module-shell .hris-clean-shell .hris-module-grid,
    html[data-theme] body.internal-module-shell .hris-clean-shell .sidebar-menu,
    body.internal-module-shell .hris-clean-shell .sidebar-menu {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)) !important;
    }
}

@media (max-width: 760px) {
    html[data-theme] body.internal-module-shell .module-header,
    body.internal-module-shell .module-header,
    html[data-theme] body.internal-module-shell .internal-app-topbar,
    body.internal-module-shell .internal-app-topbar {
        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-template-areas:
            "brand user"
            "logo logo" !important;
        padding: 12px !important;
    }

    html[data-theme] body.internal-module-shell .module-header .brand,
    body.internal-module-shell .module-header .brand {
        grid-area: brand !important;
    }

    html[data-theme] body.internal-module-shell .module-header .header-center-logo,
    body.internal-module-shell .module-header .header-center-logo,
    html[data-theme] body.internal-module-shell .module-header .internal-topbar-logo,
    body.internal-module-shell .module-header .internal-topbar-logo {
        grid-area: logo !important;
        max-width: min(240px, 72vw) !important;
        margin: 0 auto !important;
    }

    html[data-theme] body.internal-module-shell .module-header .user-nav,
    body.internal-module-shell .module-header .user-nav {
        grid-area: user !important;
    }

    html[data-theme] body.internal-module-shell .brand-logo-wide,
    body.internal-module-shell .brand-logo-wide,
    html[data-theme] body.internal-module-shell .brand-divider,
    body.internal-module-shell .brand-divider,
    html[data-theme] body.internal-module-shell .profile-name,
    body.internal-module-shell .profile-name {
        display: none !important;
    }

    html[data-theme] body.internal-module-shell .page-content.hris-clean-shell,
    body.internal-module-shell .page-content.hris-clean-shell,
    html[data-theme] body.internal-module-shell .breadcrumb-list,
    body.internal-module-shell .breadcrumb-list {
        width: min(100% - 20px, 760px) !important;
    }

    html[data-theme] body.internal-module-shell .hris-clean-shell .internal-module-panel,
    body.internal-module-shell .hris-clean-shell .internal-module-panel,
    html[data-theme] body.internal-module-shell .hris-clean-shell .information-panel,
    body.internal-module-shell .hris-clean-shell .information-panel,
    html[data-theme] body.internal-module-shell .hris-clean-shell .content-panel,
    body.internal-module-shell .hris-clean-shell .content-panel {
        min-height: 0 !important;
        padding: 16px !important;
        border-radius: 16px !important;
    }

    html[data-theme] body.internal-module-shell .hris-clean-shell .summary,
    body.internal-module-shell .hris-clean-shell .summary,
    html[data-theme] body.internal-module-shell .hris-clean-shell .meta-grid,
    body.internal-module-shell .hris-clean-shell .meta-grid,
    html[data-theme] body.internal-module-shell .hris-clean-shell .top-bar,
    body.internal-module-shell .hris-clean-shell .top-bar,
    html[data-theme] body.internal-module-shell .hris-clean-shell .hris-dashboard-grid,
    body.internal-module-shell .hris-clean-shell .hris-dashboard-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    html[data-theme] body.internal-module-shell .hris-clean-shell .form-grid > [style*="grid-column"],
    body.internal-module-shell .hris-clean-shell .form-grid > [style*="grid-column"] {
        grid-column: 1 / -1 !important;
    }
}

/* === Internal typography guard: Plus Jakarta Sans, readable weight, no heavy display font === */
body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell),
body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) :is(
    .workspace-gateway,
    .clean-module-layout,
    .internal-module-layout,
    .content-panel,
    .info-sidebar,
    .card,
    .panel,
    .table-box,
    .form-box,
    .box,
    button,
    input,
    select,
    textarea
) {
    font-family: var(--font-sans) !important;
}

body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) {
    font-weight: 400;
}

body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) :is(
    .sidebar a,
    .internal-module-nav a,
    .internal-module-nav button,
    .workspace-app-tile p,
    .module-menu-card p,
    label,
    .muted,
    .helper-text
) {
    font-weight: 500 !important;
}

body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) :is(
    button,
    .btn,
    .button-primary,
    .button-secondary,
    .internal-topbar-brand,
    .internal-topbar-actions a,
    .internal-topbar-actions button,
    .module-menu-card strong,
    .workspace-summary-card strong,
    .stat-card strong
) {
    font-weight: 600 !important;
}

body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) :is(
    h1,
    h2,
    .page-title,
    .workspace-hero h1,
    .internal-module-title,
    .content-panel > header h1,
    .content-panel > header h2
) {
    font-weight: 700 !important;
}

body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) :is(
    .eyebrow,
    .kicker,
    .badge,
    .tag,
    .pill,
    .module-chip,
    .workspace-card-label
) {
    font-weight: 700 !important;
    letter-spacing: min(0.06em, 0.6px) !important;
}

@media (max-width: 480px) {
    html[data-theme] body.internal-module-shell .page-content.hris-clean-shell,
    body.internal-module-shell .page-content.hris-clean-shell,
    html[data-theme] body.internal-module-shell .breadcrumb-list,
    body.internal-module-shell .breadcrumb-list {
        width: min(100% - 16px, 480px) !important;
    }

    html[data-theme] body.internal-module-shell .hris-clean-shell .hris-module-card,
    body.internal-module-shell .hris-clean-shell .hris-module-card,
    html[data-theme] body.internal-module-shell .hris-clean-shell .sidebar-link,
    body.internal-module-shell .hris-clean-shell .sidebar-link {
        grid-template-columns: 22px minmax(0, 1fr) !important;
    }

    html[data-theme] body.internal-module-shell .hris-clean-shell .hris-module-card > .badge,
    body.internal-module-shell .hris-clean-shell .hris-module-card > .badge {
        display: none !important;
    }

    html[data-theme] body.internal-module-shell .hris-clean-shell table,
    body.internal-module-shell .hris-clean-shell table {
        min-width: 680px;
    }
}

/* ======================================================================
   HRIS / Daily Report compact cards v3
   Tujuan: kartu tidak terlihat terlalu besar, terasa serapi WMS reference,
   tanpa mengubah fitur dan tetap aman responsive.
   ====================================================================== */

/* Portal Report Staff: halaman /laporan-harian dibuat compact seperti WMS. */
html[data-theme] body.daily-report-portal-shell.internal-clean-page-shell,
body.daily-report-portal-shell.internal-clean-page-shell {
    --compact-card-radius: 8px;
    --compact-card-gap: 10px;
    --compact-panel-padding: 16px;
}

html[data-theme] body.daily-report-portal-shell.internal-clean-page-shell .page-hero,
body.daily-report-portal-shell.internal-clean-page-shell .page-hero,
html[data-theme] body.daily-report-portal-shell.internal-clean-page-shell .page-content.page-content-bleed,
body.daily-report-portal-shell.internal-clean-page-shell .page-content.page-content-bleed {
    width: min(calc(100% - 48px), 1560px) !important;
    max-width: 1560px !important;
}

html[data-theme] body.daily-report-portal-shell.internal-clean-page-shell .page-hero,
body.daily-report-portal-shell.internal-clean-page-shell .page-hero {
    margin-top: 14px !important;
    padding: 12px 0 8px !important;
}

html[data-theme] body.daily-report-portal-shell.internal-clean-page-shell .page-eyebrow,
body.daily-report-portal-shell.internal-clean-page-shell .page-eyebrow {
    margin-bottom: 6px !important;
    font-size: 0.72rem !important;
    line-height: 1.1 !important;
}

html[data-theme] body.daily-report-portal-shell.internal-clean-page-shell .page-hero h1,
body.daily-report-portal-shell.internal-clean-page-shell .page-hero h1 {
    font-size: clamp(2rem, 3.05vw, 3rem) !important;
    line-height: 1 !important;
    letter-spacing: -0.055em !important;
}

html[data-theme] body.daily-report-portal-shell.internal-clean-page-shell .page-content.page-content-bleed,
body.daily-report-portal-shell.internal-clean-page-shell .page-content.page-content-bleed {
    min-height: 0 !important;
    margin-top: 8px !important;
    padding: 0 0 28px !important;
    display: grid !important;
    gap: 12px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

html[data-theme] body.daily-report-portal-shell.internal-clean-page-shell .summary,
body.daily-report-portal-shell.internal-clean-page-shell .summary,
html[data-theme] body.daily-report-portal-shell.internal-clean-page-shell .attendance-identity-grid,
body.daily-report-portal-shell.internal-clean-page-shell .attendance-identity-grid,
html[data-theme] body.daily-report-portal-shell.internal-clean-page-shell .meta-grid,
body.daily-report-portal-shell.internal-clean-page-shell .meta-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)) !important;
    gap: var(--compact-card-gap) !important;
    margin: 0 !important;
}

html[data-theme] body.daily-report-portal-shell.internal-clean-page-shell :is(.card-mini, .meta-card),
body.daily-report-portal-shell.internal-clean-page-shell :is(.card-mini, .meta-card) {
    min-height: 72px !important;
    height: auto !important;
    padding: 13px 15px !important;
    gap: 4px !important;
    align-content: center !important;
    border: 1px solid var(--internal-line, #dfe7f1) !important;
    border-top: 3px solid var(--accent-color, #d9a62e) !important;
    border-radius: var(--compact-card-radius) !important;
    background: #ffffff !important;
    box-shadow: none !important;
    overflow: hidden !important;
}

html[data-theme] body.daily-report-portal-shell.internal-clean-page-shell .meta-card,
body.daily-report-portal-shell.internal-clean-page-shell .meta-card {
    border-top-color: var(--internal-line, #dfe7f1) !important;
}

html[data-theme] body.daily-report-portal-shell.internal-clean-page-shell :is(.card-mini p, .meta-card span),
body.daily-report-portal-shell.internal-clean-page-shell :is(.card-mini p, .meta-card span) {
    margin: 0 0 6px !important;
    color: #687a90 !important;
    font-size: 0.68rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.12em !important;
    line-height: 1.2 !important;
    text-transform: uppercase !important;
}

html[data-theme] body.daily-report-portal-shell.internal-clean-page-shell .card-mini h3,
body.daily-report-portal-shell.internal-clean-page-shell .card-mini h3 {
    margin: 0 !important;
    color: var(--internal-text, #13233b) !important;
    font-size: clamp(1.22rem, 1.7vw, 1.58rem) !important;
    line-height: 1.02 !important;
    letter-spacing: -0.045em !important;
}

html[data-theme] body.daily-report-portal-shell.internal-clean-page-shell .meta-card strong,
body.daily-report-portal-shell.internal-clean-page-shell .meta-card strong {
    margin: 0 !important;
    color: var(--internal-text, #13233b) !important;
    font-size: clamp(1.02rem, 1.45vw, 1.32rem) !important;
    line-height: 1.1 !important;
    letter-spacing: -0.045em !important;
    overflow-wrap: anywhere !important;
}

html[data-theme] body.daily-report-portal-shell.internal-clean-page-shell :is(.form-box, .table-box, .box, .panel),
body.daily-report-portal-shell.internal-clean-page-shell :is(.form-box, .table-box, .box, .panel) {
    padding: var(--compact-panel-padding) !important;
    margin: 0 !important;
    border: 1px solid var(--internal-line, #dfe7f1) !important;
    border-radius: var(--compact-card-radius) !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

html[data-theme] body.daily-report-portal-shell.internal-clean-page-shell .form-box > .section-title,
body.daily-report-portal-shell.internal-clean-page-shell .form-box > .section-title,
html[data-theme] body.daily-report-portal-shell.internal-clean-page-shell .table-box > .section-title,
body.daily-report-portal-shell.internal-clean-page-shell .table-box > .section-title {
    margin-bottom: 12px !important;
}

html[data-theme] body.daily-report-portal-shell.internal-clean-page-shell .section-title h2,
html[data-theme] body.daily-report-portal-shell.internal-clean-page-shell .section-title h3,
body.daily-report-portal-shell.internal-clean-page-shell .section-title h2,
body.daily-report-portal-shell.internal-clean-page-shell .section-title h3 {
    font-size: 1rem !important;
    line-height: 1.1 !important;
    letter-spacing: -0.035em !important;
}

html[data-theme] body.daily-report-portal-shell.internal-clean-page-shell .section-title p,
body.daily-report-portal-shell.internal-clean-page-shell .section-title p {
    display: none !important;
}

html[data-theme] body.daily-report-portal-shell.internal-clean-page-shell .form-grid,
body.daily-report-portal-shell.internal-clean-page-shell .form-grid {
    gap: 12px !important;
}

html[data-theme] body.daily-report-portal-shell.internal-clean-page-shell :is(input, select, textarea),
body.daily-report-portal-shell.internal-clean-page-shell :is(input, select, textarea) {
    min-height: 42px !important;
    border-radius: 8px !important;
}

html[data-theme] body.daily-report-portal-shell.internal-clean-page-shell .split-actions,
body.daily-report-portal-shell.internal-clean-page-shell .split-actions {
    margin-top: 12px !important;
}

html[data-theme] body.daily-report-portal-shell.internal-clean-page-shell .table-box.stack-scroll-shell,
body.daily-report-portal-shell.internal-clean-page-shell .table-box.stack-scroll-shell {
    max-height: none !important;
    overflow: visible !important;
    padding-right: var(--compact-panel-padding) !important;
}

html[data-theme] body.daily-report-portal-shell.internal-clean-page-shell .table-box.stack-scroll-shell > .section-title,
body.daily-report-portal-shell.internal-clean-page-shell .table-box.stack-scroll-shell > .section-title {
    position: static !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
}

/* HRIS module cards juga dibuat compact agar selaras dengan WMS. */
html[data-theme] body.internal-module-shell .hris-clean-shell .internal-module-panel,
body.internal-module-shell .hris-clean-shell .internal-module-panel,
html[data-theme] body.internal-module-shell .hris-clean-shell .information-panel,
body.internal-module-shell .hris-clean-shell .information-panel,
html[data-theme] body.internal-module-shell .hris-clean-shell .content-panel,
body.internal-module-shell .hris-clean-shell .content-panel {
    padding: clamp(18px, 1.8vw, 24px) !important;
    border-radius: 10px !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .summary,
body.internal-module-shell .hris-clean-shell .summary,
html[data-theme] body.internal-module-shell .hris-clean-shell .meta-grid,
body.internal-module-shell .hris-clean-shell .meta-grid {
    gap: 10px !important;
    margin-bottom: 12px !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell :is(.card-mini, .meta-card),
body.internal-module-shell .hris-clean-shell :is(.card-mini, .meta-card) {
    min-height: 72px !important;
    padding: 13px 15px !important;
    border-radius: 8px !important;
    box-shadow: none !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell :is(.card-mini p, .meta-card span),
body.internal-module-shell .hris-clean-shell :is(.card-mini p, .meta-card span) {
    margin-bottom: 6px !important;
    font-size: 0.68rem !important;
    letter-spacing: 0.11em !important;
    line-height: 1.2 !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .card-mini h3,
body.internal-module-shell .hris-clean-shell .card-mini h3 {
    font-size: clamp(1.22rem, 1.55vw, 1.5rem) !important;
    line-height: 1.02 !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .meta-card strong,
body.internal-module-shell .hris-clean-shell .meta-card strong {
    font-size: clamp(0.95rem, 1.15vw, 1.12rem) !important;
    line-height: 1.18 !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell :is(.table-box, .form-box, .box, .panel, details.panel-disclosure),
body.internal-module-shell .hris-clean-shell :is(.table-box, .form-box, .box, .panel, details.panel-disclosure) {
    border-radius: 10px !important;
}

@media (max-width: 760px) {
    html[data-theme] body.daily-report-portal-shell.internal-clean-page-shell .page-hero,
    body.daily-report-portal-shell.internal-clean-page-shell .page-hero,
    html[data-theme] body.daily-report-portal-shell.internal-clean-page-shell .page-content.page-content-bleed,
    body.daily-report-portal-shell.internal-clean-page-shell .page-content.page-content-bleed {
        width: min(calc(100% - 20px), 760px) !important;
    }

    html[data-theme] body.daily-report-portal-shell.internal-clean-page-shell .page-hero h1,
    body.daily-report-portal-shell.internal-clean-page-shell .page-hero h1 {
        font-size: clamp(1.7rem, 9vw, 2.25rem) !important;
    }

    html[data-theme] body.daily-report-portal-shell.internal-clean-page-shell :is(.card-mini, .meta-card),
    body.daily-report-portal-shell.internal-clean-page-shell :is(.card-mini, .meta-card),
    html[data-theme] body.internal-module-shell .hris-clean-shell :is(.card-mini, .meta-card),
    body.internal-module-shell .hris-clean-shell :is(.card-mini, .meta-card) {
        min-height: 68px !important;
        padding: 12px 14px !important;
    }
}

/* ======================================================================
   GLOBAL COMPACT CARDS v4
   Permintaan: semua halaman yang memakai card/panel/box dibuat lebih kecil,
   lebih mirip WMS: padding ringkas, radius sederhana, gap rapat, tanpa
   membuat konten kepotong di desktop/tablet/mobile.
   ====================================================================== */

:root {
    --compact-card-radius-global: 10px;
    --compact-card-radius-mobile: 8px;
    --compact-card-padding-global: clamp(12px, 1.2vw, 16px);
    --compact-panel-padding-global: clamp(14px, 1.45vw, 18px);
    --compact-card-gap-global: 10px;
    --compact-card-min-height-global: 68px;
}

/* Grid kumpulan card: dibuat lebih padat agar tidak menuhin layar. */
body :where(
    .summary,
    .summary-grid,
    .stock-summary-grid,
    .lookup-summary-grid,
    .notifications-summary-cards,
    .document-approval-stat-grid,
    .internal-status-grid,
    .overview-stats,
    .overview-summary,
    .attendance-identity-grid,
    .meta-grid,
    .wms-kpi-grid,
    .biometric-workspace-summary,
    .career-detail-summary-grid,
    .career-profile-document-status-grid
) {
    gap: var(--compact-card-gap-global) !important;
    margin-bottom: 12px !important;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)) !important;
}

body :where(
    .cards,
    .card-grid,
    .card-grid-two,
    .dashboard-cards,
    .folder-card-grid,
    .career-astra-card-grid,
    .career-candidate-card-grid,
    .career-job-card-grid,
    .workspace-card-grid
) {
    gap: 12px !important;
    margin-bottom: 12px !important;
}

/* Card umum di halaman internal dan public: lebih compact, shadow dikurangi. */
body :where(.main, .page-content, .page-content-bleed, .internal-module-panel, .information-panel, .content-panel, .career-public-shell, .career-candidate-shell, .workspace, .app-shell) :where(
    .card,
    .card-mini,
    .summary-card,
    .meta-card,
    .content-card,
    .workspace-card,
    .internal-app-card,
    .internal-hub-card,
    .internal-status-card,
    .report-portal-card,
    .notification-card,
    .announcement-event-card,
    .announcement-permission-card,
    .admin-role-card,
    .barcode-item-card,
    .barcode-layer-card,
    .barcode-template-card,
    .barcode-upload-card,
    .biometric-data-card,
    .biometric-meta-card,
    .biometric-workspace-card,
    .biometric-workspace-stat,
    .attendance-overview-card,
    .attendance-capture-card,
    .attendance-history-card,
    .attendance-log-card,
    .document-approval-stat-card,
    .career-astra-card,
    .career-astra-feature-card,
    .career-astra-stat-card,
    .career-astra-story-card,
    .career-about-card,
    .career-about-band-card,
    .career-about-pillar-card,
    .career-apply-card,
    .career-detail-card,
    .career-detail-process-card,
    .career-detail-summary-card,
    .career-guide-card,
    .career-help-faq-card,
    .career-help-step-card,
    .career-job-card,
    .career-candidate-info-card,
    .career-candidate-preview-card,
    .career-profile-summary-card,
    .career-profile-document-status-card,
    .hris-dashboard-announcement-card,
    .hris-dashboard-leave-card,
    .hris-dashboard-reminder-card,
    .hris-module-card,
    .hris-recruitment-portal-card,
    .manual-adjustment-card,
    .manual-product-mode-card,
    .notification-card,
    .ops-config-card,
    .ops-stock-card,
    .party-card,
    .product-lookup-card,
    .product-lookup-price-card,
    .recruitment-workspace-card,
    .schedule-profile-card,
    .schedule-shift-card,
    .stack-scroll-card,
    .stock-mini-card,
    .variant-price-card,
    .variant-static-card,
    .variant-stock-card,
    .wms-command-card,
    .wms-kpi-card,
    .wms-step-card,
    [class$="-card"],
    [class*="-card "]
) {
    min-height: var(--compact-card-min-height-global) !important;
    height: auto !important;
    padding: var(--compact-card-padding-global) !important;
    gap: 6px !important;
    border-radius: var(--compact-card-radius-global) !important;
    box-shadow: none !important;
    overflow: hidden !important;
}

/* Panel, box, form, dan table yang tampil seperti card juga dibuat ringkas. */
body :where(.main, .page-content, .page-content-bleed, .internal-module-panel, .information-panel, .content-panel, .career-public-shell, .career-candidate-shell, .workspace, .app-shell) :where(
    .panel,
    .form-box,
    .table-box,
    .import-box,
    .box,
    .filter-panel,
    .content-panel,
    .information-panel,
    .internal-module-panel,
    .clean-content-panel,
    .attendance-form-panel,
    .attendance-optional-panel,
    .barcode-toolbar-panel,
    .career-candidate-panel,
    .career-candidate-jobs-list-panel,
    .career-profile-form-panel,
    .chat-main-panel,
    .chat-sidebar-panel,
    .chat-search-panel,
    .document-approval-panel,
    .hris-dashboard-panel,
    .hris-document-approval-panel,
    .hris-document-preview-panel,
    .notification-center-panel,
    .pos-ipos-panel,
    .report-feed-panel,
    .recruitment-workspace-panel,
    .storage-panel,
    [class$="-panel"],
    [class*="-panel "],
    [class$="-box"],
    [class*="-box "]
) {
    padding: var(--compact-panel-padding-global) !important;
    border-radius: var(--compact-card-radius-global) !important;
    box-shadow: none !important;
}

/* Jangan beri padding card ke elemen wrapper/header/copy/action yang namanya mengandung card tapi bukan kartu. */
body :where(
    [class*="-card-grid"],
    [class*="-cards"],
    [class*="-card-actions"],
    [class*="-card-head"],
    [class*="-card-top"],
    [class*="-card-meta"],
    [class*="-card-copy"],
    [class*="-card-brand"],
    [class*="-card-logo"],
    [class*="-card-title"],
    [class*="-card-kicker"],
    [class*="-card-location"],
    [class*="-card-summary"]
) {
    min-height: initial !important;
    padding: initial;
    border-radius: initial;
    box-shadow: initial;
}

/* Tipografi card dibuat lebih kecil seperti WMS, tapi tetap mudah dibaca. */
body :where(.main, .page-content, .page-content-bleed, .internal-module-panel, .information-panel, .content-panel, .career-public-shell, .career-candidate-shell, .workspace, .app-shell) :where(
    .card,
    .card-mini,
    .summary-card,
    .meta-card,
    [class$="-card"],
    [class*="-card "]
) :where(p, small, span, .page-eyebrow, .kicker, .eyebrow) {
    font-size: clamp(0.68rem, 0.72vw, 0.78rem) !important;
    line-height: 1.28 !important;
}

body :where(.main, .page-content, .page-content-bleed, .internal-module-panel, .information-panel, .content-panel, .career-public-shell, .career-candidate-shell, .workspace, .app-shell) :where(
    .card,
    .card-mini,
    .summary-card,
    .meta-card,
    [class$="-card"],
    [class*="-card "]
) :where(h2, h3, strong, .value, .count, .number) {
    font-size: clamp(1.05rem, 1.4vw, 1.55rem) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.035em !important;
}

/* Form dan filter tidak terlalu tinggi. */
body :where(.form-box, .filter-panel, [class$="-box"], [class*="-box "]) :where(input, select, textarea) {
    min-height: 40px !important;
    border-radius: 8px !important;
}

body :where(.form-box, .filter-panel, [class$="-box"], [class*="-box "]) :where(label) {
    margin-bottom: 6px !important;
    font-size: 0.78rem !important;
}

body :where(.form-grid, .top-bar, .products-filter-bar, .stock-filter-bar, form.search-form, .split-actions) {
    gap: 10px !important;
}

/* Khusus internal module: panel kanan tidak perlu terasa besar. */
body.internal-module-shell :where(.internal-module-panel, .information-panel, .content-panel, .clean-content-panel) {
    padding: clamp(16px, 1.6vw, 22px) !important;
    border-radius: 10px !important;
}

/* Khusus report/stok/WMS: ukuran card summary distandarkan agar visualnya sama. */
body :where(.daily-report-portal-shell, .wms-stock-reference-shell, .internal-module-shell) :where(.summary, .summary-grid, .meta-grid) {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)) !important;
    gap: 10px !important;
}

body :where(.daily-report-portal-shell, .wms-stock-reference-shell, .internal-module-shell) :where(.card-mini, .summary-card, .meta-card, .wms-kpi-card) {
    min-height: 66px !important;
    padding: 12px 14px !important;
    border-radius: 8px !important;
}

/* Mobile tetap nyaman: satu kolom, card tidak tinggi, halaman tetap bisa scroll. */
@media (max-width: 760px) {
    body :where(
        .summary,
        .summary-grid,
        .stock-summary-grid,
        .lookup-summary-grid,
        .notifications-summary-cards,
        .document-approval-stat-grid,
        .internal-status-grid,
        .overview-stats,
        .overview-summary,
        .attendance-identity-grid,
        .meta-grid,
        .cards,
        .card-grid,
        .card-grid-two
    ) {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 10px !important;
    }

    body :where(.main, .page-content, .page-content-bleed, .internal-module-panel, .information-panel, .content-panel, .career-public-shell, .career-candidate-shell, .workspace, .app-shell) :where(
        .card,
        .card-mini,
        .summary-card,
        .meta-card,
        [class$="-card"],
        [class*="-card "]
    ) {
        min-height: 62px !important;
        padding: 12px !important;
        border-radius: var(--compact-card-radius-mobile) !important;
    }

    body :where(.main, .page-content, .page-content-bleed, .internal-module-panel, .information-panel, .content-panel, .career-public-shell, .career-candidate-shell, .workspace, .app-shell) :where(
        .panel,
        .form-box,
        .table-box,
        .import-box,
        .box,
        .filter-panel,
        [class$="-panel"],
        [class*="-panel "],
        [class$="-box"],
        [class*="-box "]
    ) {
        padding: 12px !important;
        border-radius: var(--compact-card-radius-mobile) !important;
    }

    body :where(.card, .card-mini, .summary-card, .meta-card, [class$="-card"], [class*="-card "]) :where(h2, h3, strong, .value, .count, .number) {
        font-size: clamp(1rem, 5vw, 1.32rem) !important;
    }
}


/* ======================================================================
   PREMIUM COMPACT INTERNAL SYSTEM v5
   Arah desain: simple, clean, premium, tidak ramai tulisan, card kecil,
   warna konsisten navy-gold, dan tetap aman di desktop/tablet/mobile.
   ====================================================================== */

:root {
    --primary-color: #0b1f3a;
    --secondary-color: #1f3b5c;
    --accent-color: #c9a13a;
    --accent-strong: #a97f20;
    --accent-soft-color: #fff7e3;
    --background-color: #f7f8fb;
    --surface-color: #ffffff;
    --surface-soft-color: #f8fafc;
    --text-color: #0f172a;
    --muted-text-color: #64748b;
    --border-color: #dbe3ee;
    --line: rgba(15, 31, 58, 0.12);
    --line-strong: rgba(15, 31, 58, 0.2);
    --radius-lg: 14px;
    --radius-md: 12px;
    --radius-sm: 8px;
    --premium-page-max: 1560px;
    --premium-card-radius: 10px;
    --premium-panel-radius: 12px;
    --premium-card-padding: 12px 14px;
    --premium-panel-padding: clamp(14px, 1.25vw, 18px);
    --premium-soft-shadow: 0 10px 24px rgba(15, 31, 58, 0.035);
}

html,
body {
    background: var(--background-color) !important;
    color: var(--text-color) !important;
    font-family: "Plus Jakarta Sans", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    text-rendering: geometricPrecision;
    -webkit-font-smoothing: antialiased;
}

body {
    font-size: 0.92rem;
    line-height: 1.45;
}

body :where(.main, .main-public, .page-content, .page-content-bleed) {
    width: min(calc(100% - 48px), var(--premium-page-max)) !important;
    max-width: var(--premium-page-max) !important;
    margin-inline: auto !important;
}

body :where(.main) {
    padding-top: clamp(12px, 1.7vw, 22px) !important;
}

/* Header halaman dibuat tenang: judul tidak terlalu besar dan tidak memenuhi layar. */
body :where(.page-hero) {
    width: min(calc(100% - 48px), var(--premium-page-max)) !important;
    max-width: var(--premium-page-max) !important;
    margin: 0 auto 12px !important;
    padding: clamp(8px, 1.4vw, 18px) 0 clamp(6px, 1vw, 12px) !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body :where(.page-eyebrow, .kicker, .eyebrow) {
    margin-bottom: 6px !important;
    color: var(--accent-strong) !important;
    font-size: 0.68rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.12em !important;
    line-height: 1.15 !important;
    text-transform: uppercase !important;
}

body :where(.page-hero h1, .content-header h1) {
    margin: 0 !important;
    color: var(--primary-color) !important;
    font-size: clamp(1.85rem, 3vw, 2.65rem) !important;
    font-weight: 800 !important;
    line-height: 1.02 !important;
    letter-spacing: -0.055em !important;
}

body :where(.page-hero p:not(.page-eyebrow), .content-header p, .section-title p, .helper-text) {
    color: var(--muted-text-color) !important;
    font-size: 0.78rem !important;
    line-height: 1.42 !important;
}

body :where(.section-title) {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin-bottom: 10px !important;
}

body :where(.section-title h2, .section-title h3) {
    margin: 0 !important;
    color: var(--primary-color) !important;
    font-size: clamp(0.98rem, 1.15vw, 1.12rem) !important;
    font-weight: 800 !important;
    line-height: 1.18 !important;
    letter-spacing: -0.03em !important;
}

body :where(.section-title p) {
    margin: 4px 0 0 !important;
    max-width: 68ch !important;
}

body :where(.internal-band-stack) {
    display: grid !important;
    gap: 16px !important;
    min-width: 0 !important;
}

body :where(.internal-content-band) {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

body :where(.internal-content-band > *),
body :where(.internal-section-head > *),
body :where(.internal-section-head > div) {
    min-width: 0 !important;
}

body :where(.internal-section-head) {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
}

body :where(.internal-section-head > :last-child:not(:first-child)) {
    margin-left: auto !important;
}

@media (max-width: 980px) {
    body :where(.internal-band-stack) {
        gap: 14px !important;
    }
}

@media (max-width: 640px) {
    body :where(.internal-band-stack) {
        gap: 12px !important;
    }
}

/* Premium card system: kecil, rapi, tidak menuhin layar, dan tidak memotong konten. */
body :where(
    .summary,
    .summary-grid,
    .stock-summary-grid,
    .lookup-summary-grid,
    .notifications-summary-cards,
    .document-approval-stat-grid,
    .internal-status-grid,
    .overview-stats,
    .overview-summary,
    .attendance-identity-grid,
    .meta-grid,
    .wms-kpi-grid,
    .biometric-workspace-summary,
    .career-detail-summary-grid,
    .career-profile-document-status-grid
) {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 175px), 1fr)) !important;
    gap: 10px !important;
    margin: 0 0 12px !important;
}

body :where(
    .cards,
    .card-grid,
    .card-grid-two,
    .dashboard-cards,
    .folder-card-grid,
    .career-astra-card-grid,
    .career-candidate-card-grid,
    .career-job-card-grid,
    .workspace-card-grid
) {
    gap: 10px !important;
    margin-bottom: 12px !important;
}

body :where(.main, .page-content, .page-content-bleed, .internal-module-panel, .information-panel, .content-panel, .career-public-shell, .career-candidate-shell, .workspace, .app-shell) :where(
    .card,
    .card-mini,
    .summary-card,
    .meta-card,
    .content-card,
    .workspace-card,
    .internal-app-card,
    .internal-hub-card,
    .internal-status-card,
    .report-portal-card,
    .notification-card,
    .announcement-event-card,
    .announcement-permission-card,
    .admin-role-card,
    .barcode-item-card,
    .barcode-layer-card,
    .barcode-template-card,
    .barcode-upload-card,
    .biometric-data-card,
    .biometric-meta-card,
    .biometric-workspace-card,
    .biometric-workspace-stat,
    .attendance-overview-card,
    .attendance-capture-card,
    .attendance-history-card,
    .attendance-log-card,
    .document-approval-stat-card,
    .career-astra-card,
    .career-astra-feature-card,
    .career-astra-stat-card,
    .career-astra-story-card,
    .career-about-card,
    .career-about-band-card,
    .career-about-pillar-card,
    .career-apply-card,
    .career-detail-card,
    .career-detail-process-card,
    .career-detail-summary-card,
    .career-guide-card,
    .career-help-faq-card,
    .career-help-step-card,
    .career-job-card,
    .career-candidate-info-card,
    .career-candidate-preview-card,
    .career-profile-summary-card,
    .career-profile-document-status-card,
    .hris-dashboard-announcement-card,
    .hris-dashboard-leave-card,
    .hris-dashboard-reminder-card,
    .hris-module-card,
    .hris-recruitment-portal-card,
    .manual-adjustment-card,
    .manual-product-mode-card,
    .notification-card,
    .ops-config-card,
    .ops-stock-card,
    .party-card,
    .product-lookup-card,
    .product-lookup-price-card,
    .recruitment-workspace-card,
    .schedule-profile-card,
    .schedule-shift-card,
    .stack-scroll-card,
    .stock-mini-card,
    .variant-price-card,
    .variant-static-card,
    .variant-stock-card,
    .wms-command-card,
    .wms-kpi-card,
    .wms-step-card,
    [class$="-card"],
    [class*="-card "]
) {
    min-height: 58px !important;
    height: auto !important;
    padding: var(--premium-card-padding) !important;
    border: 1px solid var(--border-color) !important;
    border-top: 2px solid rgba(201, 161, 58, 0.58) !important;
    border-radius: var(--premium-card-radius) !important;
    background: var(--surface-color) !important;
    box-shadow: none !important;
    overflow: visible !important;
}

body :where(.main, .page-content, .page-content-bleed, .internal-module-panel, .information-panel, .content-panel, .career-public-shell, .career-candidate-shell, .workspace, .app-shell) :where(
    .panel,
    .form-box,
    .table-box,
    .import-box,
    .box,
    .filter-panel,
    .content-panel,
    .information-panel,
    .internal-module-panel,
    .clean-content-panel,
    .attendance-form-panel,
    .attendance-optional-panel,
    .barcode-toolbar-panel,
    .career-candidate-panel,
    .career-candidate-jobs-list-panel,
    .career-profile-form-panel,
    .chat-main-panel,
    .chat-sidebar-panel,
    .chat-search-panel,
    .document-approval-panel,
    .hris-dashboard-panel,
    .hris-document-approval-panel,
    .hris-document-preview-panel,
    .notification-center-panel,
    .pos-ipos-panel,
    .report-feed-panel,
    .recruitment-workspace-panel,
    .storage-panel,
    [class$="-panel"],
    [class*="-panel "],
    [class$="-box"],
    [class*="-box "]
) {
    padding: var(--premium-panel-padding) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--premium-panel-radius) !important;
    background: var(--surface-color) !important;
    box-shadow: none !important;
    overflow: visible !important;
}

body :where(.card, .card-mini, .summary-card, .meta-card, [class$="-card"], [class*="-card "]) :where(p, small, span, .page-eyebrow, .kicker, .eyebrow) {
    color: var(--muted-text-color) !important;
    font-size: clamp(0.66rem, 0.68vw, 0.74rem) !important;
    line-height: 1.25 !important;
}

body :where(.card-mini p, .summary-card p, .meta-card span, .wms-kpi-card p) {
    margin: 0 0 5px !important;
    font-weight: 800 !important;
    letter-spacing: 0.11em !important;
    text-transform: uppercase !important;
}

body :where(.card, .card-mini, .summary-card, .meta-card, [class$="-card"], [class*="-card "]) :where(h2, h3, strong, .value, .count, .number) {
    margin: 0 !important;
    color: var(--primary-color) !important;
    font-size: clamp(1rem, 1.25vw, 1.38rem) !important;
    font-weight: 800 !important;
    line-height: 1.08 !important;
    letter-spacing: -0.04em !important;
}

body :where(.card, .card-mini, .summary-card, .meta-card, [class$="-card"], [class*="-card "]) :where(h2) {
    font-size: clamp(0.88rem, 0.98vw, 1rem) !important;
    letter-spacing: -0.025em !important;
}

/* Jangan ubah wrapper/metadata card menjadi box sendiri. */
body :where(
    [class*="-card-grid"],
    [class*="-cards"],
    [class*="-card-actions"],
    [class*="-card-head"],
    [class*="-card-top"],
    [class*="-card-meta"],
    [class*="-card-copy"],
    [class*="-card-brand"],
    [class*="-card-logo"],
    [class*="-card-title"],
    [class*="-card-kicker"],
    [class*="-card-location"],
    [class*="-card-summary"]
) {
    min-height: initial !important;
    padding: initial;
    border: initial;
    border-top: initial;
    border-radius: initial;
    background: initial;
    box-shadow: initial;
}

/* Form: premium compact, mudah discan, tidak terlalu tinggi. */
body :where(label) {
    color: var(--primary-color) !important;
    font-size: 0.74rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.01em !important;
}

body :where(input, select, textarea) {
    min-height: 38px !important;
    padding: 9px 12px !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    color: var(--text-color) !important;
    box-shadow: none !important;
}

body :where(textarea) {
    min-height: 84px !important;
    resize: vertical;
}

body :where(input::placeholder, textarea::placeholder) {
    color: #94a3b8 !important;
}

body :where(.form-grid, .top-bar, .products-filter-bar, .stock-filter-bar, form.search-form, .split-actions) {
    gap: 10px !important;
}

/* Button hierarchy: navy utama, putih border untuk aksi sekunder. */
body :where(.button-primary, .btn-primary, form button[type="submit"]):not(.top-icon-btn):not(.ghost-button) {
    min-height: 38px !important;
    padding: 0 14px !important;
    border: 1px solid var(--primary-color) !important;
    border-radius: 8px !important;
    background: var(--primary-color) !important;
    color: #ffffff !important;
    box-shadow: none !important;
    font-size: 0.86rem !important;
    font-weight: 800 !important;
}

body :where(.button-primary:hover, .btn-primary:hover, form button[type="submit"]:hover):not(.top-icon-btn):not(.ghost-button) {
    background: var(--secondary-color) !important;
    border-color: var(--secondary-color) !important;
}

body :where(.button-secondary, .btn-secondary, .ghost-button, .btn-link, .page-actions a, .page-actions button) {
    min-height: 36px !important;
    padding: 0 12px !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    color: var(--primary-color) !important;
    box-shadow: none !important;
    font-size: 0.84rem !important;
    font-weight: 800 !important;
}

body :where(.button-secondary:hover, .btn-secondary:hover, .ghost-button:hover, .btn-link:hover, .page-actions a:hover, .page-actions button:hover) {
    border-color: rgba(201, 161, 58, 0.55) !important;
    background: var(--accent-soft-color) !important;
}

/* Badge/status dibuat soft, tidak ramai. */
body :where(.badge, .status-badge, .pill, .tag) {
    min-height: 22px !important;
    padding: 3px 8px !important;
    border: 1px solid rgba(15, 31, 58, 0.08) !important;
    border-radius: 999px !important;
    background: #eef2f7 !important;
    color: #475569 !important;
    font-size: 0.66rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.07em !important;
    text-transform: uppercase !important;
}

body :where(.badge.warning, .badge.orange, .status-warning) {
    background: #fff7e3 !important;
    color: #9a6a12 !important;
    border-color: rgba(201, 161, 58, 0.28) !important;
}

body :where(.badge.success, .status-success) {
    background: #ecfdf3 !important;
    color: #087443 !important;
    border-color: rgba(22, 163, 74, 0.18) !important;
}

body :where(.badge.danger, .status-danger, .badge.error) {
    background: #fff1f1 !important;
    color: #b42318 !important;
    border-color: rgba(220, 38, 38, 0.16) !important;
}

/* Table: clean dashboard, row tidak terlalu tinggi, aman scroll horizontal. */
body :where(.table-box, .table-wrap, .table-responsive, .stock-table-viewport, .products-table-wrap) {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
}

body :where(table) {
    width: 100%;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

body :where(th) {
    padding: 10px 12px !important;
    background: #f8fafc !important;
    color: #64748b !important;
    font-size: 0.68rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.09em !important;
    line-height: 1.2 !important;
    text-transform: uppercase !important;
    border-bottom: 1px solid var(--border-color) !important;
}

body :where(td) {
    padding: 10px 12px !important;
    color: var(--text-color) !important;
    font-size: 0.84rem !important;
    line-height: 1.35 !important;
    border-bottom: 1px solid rgba(219, 227, 238, 0.75) !important;
    vertical-align: middle !important;
}

body :where(tbody tr:hover) {
    background: #f8fafc !important;
}

/* HRIS dan internal clean sidebar: icon bukan emoji besar, melainkan chip kecil premium. */
body :where(.hris-module-nav-icon, .sidebar-icon) {
    width: 24px !important;
    height: 24px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 24px !important;
    border: 1px solid rgba(15, 31, 58, 0.09) !important;
    border-radius: 7px !important;
    background: #f1f5f9 !important;
    color: #334155 !important;
    font-size: 0.56rem !important;
    font-weight: 900 !important;
    letter-spacing: 0.04em !important;
    line-height: 1 !important;
}

body :where(.hris-module-card.active, .hris-module-card.is-active, .sidebar-link.active, .sidebar-link.is-active) :where(.hris-module-nav-icon, .sidebar-icon) {
    background: rgba(255, 255, 255, 0.16) !important;
    border-color: rgba(255, 255, 255, 0.22) !important;
    color: #ffffff !important;
}

body.internal-module-shell :where(.hris-clean-shell .hris-module-card, .clean-module-sidebar .hris-module-card, .sidebar-link) {
    min-height: 48px !important;
    padding: 9px 10px !important;
    grid-template-columns: 24px minmax(0, auto) minmax(0, 1fr) !important;
    gap: 8px !important;
    border-radius: 9px !important;
}

body.internal-module-shell :where(.hris-module-card h2, .sidebar-link h2) {
    font-size: 0.84rem !important;
    line-height: 1.16 !important;
}

body.internal-module-shell :where(.hris-module-card small, .sidebar-link small) {
    display: none !important;
}

body.internal-module-shell :where(.hris-module-card > .badge, .sidebar-link > .badge) {
    min-height: 20px !important;
    padding: 2px 7px !important;
    font-size: 0.58rem !important;
}

body.internal-module-shell :where(.hris-clean-shell .internal-module-nav, .clean-module-sidebar, .info-sidebar) {
    border-radius: 12px !important;
    box-shadow: none !important;
}

body.internal-module-shell :where(.hris-clean-shell .internal-module-panel, .hris-clean-shell .information-panel, .hris-clean-shell .content-panel, .clean-content-panel) {
    padding: clamp(14px, 1.3vw, 18px) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
}

body.internal-module-shell :where(.hris-clean-shell .internal-module-layout, .clean-module-layout) {
    gap: 14px !important;
}

/* Daily Report: target screenshot user — tidak lagi terasa penuh dan berat. */
body.daily-report-portal-shell :where(.page-hero h1) {
    font-size: clamp(1.9rem, 3.15vw, 2.75rem) !important;
}

body.daily-report-portal-shell :where(.summary, .attendance-identity-grid, .meta-grid) {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)) !important;
    gap: 10px !important;
}

body.daily-report-portal-shell :where(.card-mini, .meta-card) {
    min-height: 62px !important;
    padding: 11px 13px !important;
}

body.daily-report-portal-shell :where(.card-mini h3) {
    font-size: clamp(1.08rem, 1.55vw, 1.38rem) !important;
}

body.daily-report-portal-shell :where(.meta-card strong) {
    font-size: clamp(0.98rem, 1.3vw, 1.18rem) !important;
}

body.daily-report-portal-shell :where(.form-box, .table-box) {
    padding: clamp(13px, 1.2vw, 16px) !important;
}

/* WMS tetap menjadi reference: rapat, bersih, dan tidak berubah konsep. */
body.wms-stock-reference-shell :where(.wms-kpi-grid, .summary, .summary-grid) {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 185px), 1fr)) !important;
    gap: 10px !important;
}

body.wms-stock-reference-shell :where(.wms-kpi-card, .summary-card, .card-mini) {
    min-height: 60px !important;
    padding: 10px 13px !important;
}

/* Kurangi rasa ramai dari background grid lama: tetap ada ambience, tapi lebih premium. */
body.internal-module-shell,
body.internal-clean-page-shell,
body.internal-portal-shell,
body.wms-stock-reference-shell {
    background:
        radial-gradient(circle at 0 0, rgba(201, 161, 58, 0.08), transparent 26rem),
        linear-gradient(180deg, #fbfcfe 0%, #f4f6f9 100%) !important;
}

/* Mobile/tablet: tetap satu kolom, padding tidak boros, tidak kepotong. */
@media (max-width: 900px) {
    body :where(.main, .main-public, .page-content, .page-content-bleed, .page-hero) {
        width: min(calc(100% - 24px), 900px) !important;
    }

    body :where(.page-hero h1, .content-header h1) {
        font-size: clamp(1.65rem, 8vw, 2.18rem) !important;
    }

    body.internal-module-shell :where(.hris-clean-shell .internal-module-layout, .clean-module-layout) {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

@media (max-width: 640px) {
    body {
        font-size: 0.9rem;
    }

    body :where(.main, .main-public, .page-content, .page-content-bleed, .page-hero) {
        width: min(calc(100% - 18px), 640px) !important;
    }

    body :where(.summary, .summary-grid, .stock-summary-grid, .lookup-summary-grid, .notifications-summary-cards, .document-approval-stat-grid, .internal-status-grid, .overview-stats, .overview-summary, .attendance-identity-grid, .meta-grid, .wms-kpi-grid) {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 8px !important;
    }

    body :where(.card, .card-mini, .summary-card, .meta-card, [class$="-card"], [class*="-card "]) {
        min-height: 56px !important;
        padding: 10px 11px !important;
        border-radius: 9px !important;
    }

    body :where(.panel, .form-box, .table-box, .import-box, .box, .filter-panel, [class$="-panel"], [class*="-panel "], [class$="-box"], [class*="-box "]) {
        padding: 12px !important;
        border-radius: 10px !important;
    }

    body :where(th, td) {
        padding: 9px 10px !important;
    }
}

/* v5 hotfix: tombol utama di page-actions tetap primary meskipun berada di container aksi. */
body :where(.page-actions a.button-primary, .page-actions button.button-primary, .page-actions a.btn-primary, .page-actions button.btn-primary, .page-actions .button-primary, .page-actions .btn-primary) {
    min-height: 38px !important;
    padding: 0 14px !important;
    border: 1px solid var(--primary-color) !important;
    border-radius: 8px !important;
    background: var(--primary-color) !important;
    color: #ffffff !important;
    box-shadow: none !important;
    font-size: 0.86rem !important;
    font-weight: 800 !important;
}

/* ==========================
   V6 PREMIUM COLOR SYNC HOTFIX
   Target: hilangkan sisa biru mencolok pada HRIS/Recruitment dan samakan ke navy + gold.
   File ini dimuat paling akhir, jadi selector dibuat spesifik agar menimpa CSS lama.
   ========================== */
html[data-theme] body.internal-module-shell .hris-clean-shell,
html[data-theme] body.internal-clean-page-shell {
    --premium-navy: #0b1f3a;
    --premium-navy-soft: #122a52;
    --premium-gold: #c9a13a;
    --premium-gold-soft: #fff6df;
    --premium-surface: #ffffff;
    --premium-surface-soft: #f8fafc;
    --premium-border: #dbe3ee;
    --premium-muted: #64748b;
}

/* Button internal: tidak lagi biru gradient, semua primary jadi navy solid premium. */
html[data-theme] body.internal-module-shell .hris-clean-shell :is(button[type="submit"], .button-primary, .btn-primary):not(.ghost-button):not(.top-icon-btn),
html[data-theme] body.internal-clean-page-shell :is(button[type="submit"], .button-primary, .btn-primary):not(.ghost-button):not(.top-icon-btn),
html[data-theme] body.internal-module-shell .hris-clean-shell .top-bar button[type="submit"],
html[data-theme] body.internal-module-shell .hris-clean-shell form button[type="submit"] {
    min-height: 38px !important;
    height: auto !important;
    padding: 0 16px !important;
    border: 1px solid var(--premium-navy) !important;
    border-radius: 8px !important;
    background: var(--premium-navy) !important;
    color: #ffffff !important;
    box-shadow: none !important;
    font-size: 0.84rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.01em !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell :is(button[type="submit"], .button-primary, .btn-primary):not(.ghost-button):not(.top-icon-btn):hover,
html[data-theme] body.internal-clean-page-shell :is(button[type="submit"], .button-primary, .btn-primary):not(.ghost-button):not(.top-icon-btn):hover {
    background: var(--premium-navy-soft) !important;
    border-color: var(--premium-navy-soft) !important;
}

/* Filter bar dibuat lebih tipis seperti WMS, bukan blok tinggi penuh. */
html[data-theme] body.internal-module-shell .hris-clean-shell .top-bar,
html[data-theme] body.internal-module-shell .hris-clean-shell :is(.products-filter-bar, .stock-filter-bar, #soFilterForm) {
    gap: 10px !important;
    padding: 12px !important;
    border: 1px solid var(--premium-border) !important;
    border-radius: 10px !important;
    background: var(--premium-surface-soft) !important;
    box-shadow: none !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .top-bar :is(input, select),
html[data-theme] body.internal-module-shell .hris-clean-shell :is(.products-filter-bar, .stock-filter-bar, #soFilterForm) :is(input, select) {
    min-height: 38px !important;
    height: 38px !important;
    border-radius: 8px !important;
    background: #ffffff !important;
}

/* Recruitment workspace: sisa kartu biru dibuat white-card compact seperti WMS. */
html[data-theme] body.internal-module-shell .hris-clean-shell .recruitment-workspace {
    margin-top: 12px !important;
    gap: 10px !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .recruitment-workspace-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .recruitment-workspace-card,
html[data-theme] body.internal-module-shell .hris-clean-shell .biometric-workspace-card {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr) auto !important;
    align-items: center !important;
    min-height: 72px !important;
    height: auto !important;
    width: 100% !important;
    padding: 12px 14px !important;
    gap: 12px !important;
    border: 1px solid var(--premium-border) !important;
    border-top: 3px solid var(--premium-gold) !important;
    border-radius: 10px !important;
    background: var(--premium-surface) !important;
    color: var(--premium-navy) !important;
    box-shadow: none !important;
    text-align: left !important;
    overflow: hidden !important;
    transform: none !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .recruitment-workspace-card::before,
html[data-theme] body.internal-module-shell .hris-clean-shell .recruitment-workspace-card::after,
html[data-theme] body.internal-module-shell .hris-clean-shell .biometric-workspace-card::before,
html[data-theme] body.internal-module-shell .hris-clean-shell .biometric-workspace-card::after {
    display: none !important;
    content: none !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .recruitment-workspace-card:hover,
html[data-theme] body.internal-module-shell .hris-clean-shell .recruitment-workspace-card.active,
html[data-theme] body.internal-module-shell .hris-clean-shell .biometric-workspace-card:hover,
html[data-theme] body.internal-module-shell .hris-clean-shell .biometric-workspace-card.active {
    border-color: rgba(201, 161, 58, 0.5) !important;
    border-top-color: var(--premium-gold) !important;
    background: #ffffff !important;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.055) !important;
    transform: none !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .recruitment-workspace-icon,
html[data-theme] body.internal-module-shell .hris-clean-shell .biometric-module-mark,
html[data-theme] body.internal-module-shell .hris-clean-shell .biometric-workspace-icon {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    border: 1px solid rgba(201, 161, 58, 0.28) !important;
    border-radius: 9px !important;
    background: var(--premium-gold-soft) !important;
    color: var(--premium-navy) !important;
    box-shadow: none !important;
    font-size: 0.78rem !important;
    font-weight: 900 !important;
    line-height: 1 !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .recruitment-workspace-card.accent-sky .recruitment-workspace-icon,
html[data-theme] body.internal-module-shell .hris-clean-shell .recruitment-workspace-card.accent-indigo .recruitment-workspace-icon,
html[data-theme] body.internal-module-shell .hris-clean-shell .recruitment-workspace-card.accent-emerald .recruitment-workspace-icon,
html[data-theme] body.internal-module-shell .hris-clean-shell .recruitment-workspace-card.accent-teal .recruitment-workspace-icon,
html[data-theme] body.internal-module-shell .hris-clean-shell .recruitment-workspace-card.accent-amber .recruitment-workspace-icon,
html[data-theme] body.internal-module-shell .hris-clean-shell .recruitment-workspace-card.accent-blue .recruitment-workspace-icon,
html[data-theme] body.internal-module-shell .hris-clean-shell .biometric-workspace-card :is(.accent-sky, .accent-indigo, .accent-blue, .accent-amber, .accent-emerald, .accent-teal) {
    background: var(--premium-gold-soft) !important;
    color: var(--premium-navy) !important;
    border-color: rgba(201, 161, 58, 0.28) !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .recruitment-workspace-copy,
html[data-theme] body.internal-module-shell .hris-clean-shell .biometric-module-copy {
    min-width: 0 !important;
    display: grid !important;
    gap: 3px !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .recruitment-workspace-copy strong,
html[data-theme] body.internal-module-shell .hris-clean-shell .biometric-module-copy strong {
    margin: 0 !important;
    color: var(--premium-navy) !important;
    font-size: 0.88rem !important;
    line-height: 1.18 !important;
    letter-spacing: -0.015em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .recruitment-workspace-copy small,
html[data-theme] body.internal-module-shell .hris-clean-shell .biometric-module-copy small {
    margin: 0 !important;
    color: var(--premium-muted) !important;
    font-size: 0.72rem !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .recruitment-workspace-badge,
html[data-theme] body.internal-module-shell .hris-clean-shell .biometric-module-badge {
    position: static !important;
    align-self: center !important;
    justify-self: end !important;
    min-height: 22px !important;
    height: 22px !important;
    padding: 0 9px !important;
    border: 1px solid rgba(15, 31, 58, 0.08) !important;
    border-radius: 999px !important;
    background: #f1f5f9 !important;
    color: var(--premium-navy) !important;
    box-shadow: none !important;
    font-size: 0.64rem !important;
    font-weight: 850 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
}

/* Hilangkan sisa gradient biru pada accent HRIS yang ikut terbawa dari CSS lama. */
html[data-theme] body.internal-module-shell .hris-clean-shell :is(
    .accent-sky,
    .accent-indigo,
    .accent-blue,
    .accent-emerald,
    .accent-teal,
    .accent-amber
):not(.badge):not(.status-badge):not(.hris-module-card.active) {
    box-shadow: none !important;
}

@media (max-width: 920px) {
    html[data-theme] body.internal-module-shell .hris-clean-shell .recruitment-workspace-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    html[data-theme] body.internal-module-shell .hris-clean-shell .recruitment-workspace-card,
    html[data-theme] body.internal-module-shell .hris-clean-shell .biometric-workspace-card {
        grid-template-columns: 32px minmax(0, 1fr) !important;
        min-height: 68px !important;
    }

    html[data-theme] body.internal-module-shell .hris-clean-shell .recruitment-workspace-badge,
    html[data-theme] body.internal-module-shell .hris-clean-shell .biometric-module-badge {
        grid-column: 2 !important;
        justify-self: start !important;
        margin-top: 4px !important;
    }
}

@media (max-width: 640px) {
    html[data-theme] body.internal-module-shell .hris-clean-shell .top-bar {
        grid-template-columns: minmax(0, 1fr) !important;
        padding: 10px !important;
    }

    html[data-theme] body.internal-module-shell .hris-clean-shell .recruitment-workspace-card,
    html[data-theme] body.internal-module-shell .hris-clean-shell .biometric-workspace-card {
        padding: 11px 12px !important;
    }
}


/* ======================================================================
   HRIS CLEAN FOCUS v7
   Target: halaman HRIS tidak terasa penuh, form recruitment tidak memakan layar,
   checkbox tidak berubah jadi kotak besar, dan warna tetap premium navy-gold.
   ====================================================================== */
html[data-theme] body.internal-module-shell .page-content.hris-clean-shell,
body.internal-module-shell .page-content.hris-clean-shell {
    width: min(100% - 36px, 1380px) !important;
    max-width: 1380px !important;
    padding-top: 18px !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .internal-module-layout,
body.internal-module-shell .hris-clean-shell .internal-module-layout,
html[data-theme] body.internal-module-shell .hris-clean-shell .module-layout,
body.internal-module-shell .hris-clean-shell .module-layout {
    grid-template-columns: minmax(220px, 258px) minmax(0, 1fr) !important;
    gap: 14px !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .internal-module-panel,
body.internal-module-shell .hris-clean-shell .internal-module-panel,
html[data-theme] body.internal-module-shell .hris-clean-shell .information-panel,
body.internal-module-shell .hris-clean-shell .information-panel,
html[data-theme] body.internal-module-shell .hris-clean-shell .content-panel,
body.internal-module-shell .hris-clean-shell .content-panel {
    padding: 14px !important;
    border-radius: 14px !important;
    min-height: auto !important;
}

/* Sidebar HRIS dibuat lebih ringkas agar tidak terasa seperti daftar kartu besar. */
html[data-theme] body.internal-module-shell .hris-clean-shell .hris-module-summary,
body.internal-module-shell .hris-clean-shell .hris-module-summary,
html[data-theme] body.internal-module-shell .hris-clean-shell .information-sidebar-head,
body.internal-module-shell .hris-clean-shell .information-sidebar-head {
    min-height: 58px !important;
    padding: 12px 14px !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .hris-module-summary-copy span,
body.internal-module-shell .hris-clean-shell .hris-module-summary-copy span,
html[data-theme] body.internal-module-shell .hris-clean-shell .hris-module-summary-note,
body.internal-module-shell .hris-clean-shell .hris-module-summary-note {
    font-size: 0.72rem !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .hris-module-summary-copy strong,
body.internal-module-shell .hris-clean-shell .hris-module-summary-copy strong {
    font-size: 0.98rem !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .hris-module-grid,
body.internal-module-shell .hris-clean-shell .hris-module-grid,
html[data-theme] body.internal-module-shell .hris-clean-shell .sidebar-menu,
body.internal-module-shell .hris-clean-shell .sidebar-menu {
    gap: 6px !important;
    padding: 9px !important;
}

body.internal-module-shell :where(.hris-clean-shell .hris-module-card, .hris-clean-shell .sidebar-link) {
    min-height: 42px !important;
    padding: 8px 9px !important;
    border-radius: 8px !important;
}

body.internal-module-shell :where(.hris-module-card h2, .sidebar-link h2) {
    font-size: 0.8rem !important;
}

/* Summary/metacard HRIS lebih seperti WMS: kecil, data-first, tidak berat. */
html[data-theme] body.internal-module-shell .hris-clean-shell .summary,
body.internal-module-shell .hris-clean-shell .summary,
html[data-theme] body.internal-module-shell .hris-clean-shell .meta-grid,
body.internal-module-shell .hris-clean-shell .meta-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)) !important;
    gap: 8px !important;
    margin-bottom: 10px !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell :is(.card-mini, .meta-card),
body.internal-module-shell .hris-clean-shell :is(.card-mini, .meta-card) {
    min-height: 54px !important;
    padding: 9px 11px !important;
    border-radius: 9px !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .card-mini h3,
body.internal-module-shell .hris-clean-shell .card-mini h3 {
    font-size: clamp(1rem, 1.25vw, 1.22rem) !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .meta-card strong,
body.internal-module-shell .hris-clean-shell .meta-card strong {
    font-size: clamp(0.86rem, 1vw, 1rem) !important;
    line-height: 1.14 !important;
}

/* HRIS filter bar: tombol tidak lagi memenuhi kolom besar. */
html[data-theme] body.internal-module-shell .hris-clean-shell :is(.top-bar, .products-filter-bar, .schedule-filter-bar),
body.internal-module-shell .hris-clean-shell :is(.top-bar, .products-filter-bar, .schedule-filter-bar) {
    padding: 10px !important;
    gap: 8px !important;
    align-items: end !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .products-filter-bar,
body.internal-module-shell .hris-clean-shell .products-filter-bar {
    grid-template-columns: minmax(220px, 1.35fr) repeat(3, minmax(150px, 0.55fr)) auto !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .products-filter-bar button[type="submit"],
body.internal-module-shell .hris-clean-shell .products-filter-bar button[type="submit"],
html[data-theme] body.internal-module-shell .hris-clean-shell .top-bar button[type="submit"],
body.internal-module-shell .hris-clean-shell .top-bar button[type="submit"] {
    width: auto !important;
    min-width: 104px !important;
    max-width: 138px !important;
    justify-self: start !important;
    min-height: 34px !important;
    height: 34px !important;
    border-radius: 8px !important;
    padding: 0 14px !important;
    font-size: 0.82rem !important;
}

/* Fix utama dari screenshot: checkbox jangan ikut style input text. */
html[data-theme] body.internal-module-shell .hris-clean-shell input[type="checkbox"],
body.internal-module-shell .hris-clean-shell input[type="checkbox"],
html[data-theme] body.internal-module-shell .hris-clean-shell input[type="radio"],
body.internal-module-shell .hris-clean-shell input[type="radio"] {
    appearance: auto !important;
    -webkit-appearance: auto !important;
    width: 15px !important;
    min-width: 15px !important;
    height: 15px !important;
    min-height: 15px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    accent-color: var(--premium-navy, #0b1f3a) !important;
    flex: 0 0 15px !important;
}

/* Semua input HRIS dibuat lebih pendek supaya tidak seperti kotak besar. */
html[data-theme] body.internal-module-shell .hris-clean-shell :is(input:not([type="checkbox"]):not([type="radio"]), select),
body.internal-module-shell .hris-clean-shell :is(input:not([type="checkbox"]):not([type="radio"]), select) {
    min-height: 34px !important;
    height: 34px !important;
    padding: 7px 10px !important;
    border-radius: 8px !important;
    font-size: 0.84rem !important;
    line-height: 1.2 !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell textarea,
body.internal-module-shell .hris-clean-shell textarea {
    min-height: 66px !important;
    padding: 8px 10px !important;
    border-radius: 8px !important;
    font-size: 0.84rem !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell label,
body.internal-module-shell .hris-clean-shell label {
    margin-bottom: 5px !important;
    font-size: 0.7rem !important;
    line-height: 1.2 !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .form-grid,
body.internal-module-shell .hris-clean-shell .form-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)) !important;
    gap: 9px 12px !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .helper-text,
body.internal-module-shell .hris-clean-shell .helper-text {
    font-size: 0.75rem !important;
    line-height: 1.35 !important;
}

/* Recruitment workspace: bukan blok besar, cukup command tiles kecil. */
html[data-theme] body.internal-module-shell .hris-clean-shell .recruitment-workspace,
body.internal-module-shell .hris-clean-shell .recruitment-workspace {
    margin-top: 8px !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .recruitment-workspace > .section-title,
body.internal-module-shell .hris-clean-shell .recruitment-workspace > .section-title {
    margin-bottom: 8px !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .recruitment-workspace > .section-title p,
body.internal-module-shell .hris-clean-shell .recruitment-workspace > .section-title p,
html[data-theme] body.internal-module-shell .hris-clean-shell .recruitment-workspace-head p,
body.internal-module-shell .hris-clean-shell .recruitment-workspace-head p,
html[data-theme] body.internal-module-shell .hris-clean-shell .panel-summary .section-title p,
body.internal-module-shell .hris-clean-shell .panel-summary .section-title p {
    display: none !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .recruitment-workspace-grid,
body.internal-module-shell .hris-clean-shell .recruitment-workspace-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 235px), 1fr)) !important;
    gap: 8px !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .recruitment-workspace-card,
body.internal-module-shell .hris-clean-shell .recruitment-workspace-card,
html[data-theme] body.internal-module-shell .hris-clean-shell .biometric-workspace-card,
body.internal-module-shell .hris-clean-shell .biometric-workspace-card {
    grid-template-columns: 28px minmax(0, 1fr) auto !important;
    min-height: 56px !important;
    padding: 9px 11px !important;
    gap: 9px !important;
    border-top-width: 2px !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .recruitment-workspace-icon,
body.internal-module-shell .hris-clean-shell .recruitment-workspace-icon,
html[data-theme] body.internal-module-shell .hris-clean-shell .biometric-workspace-icon,
body.internal-module-shell .hris-clean-shell .biometric-workspace-icon {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    border-radius: 8px !important;
    font-size: 0.68rem !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .recruitment-workspace-copy strong,
body.internal-module-shell .hris-clean-shell .recruitment-workspace-copy strong {
    font-size: 0.82rem !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .recruitment-workspace-copy small,
body.internal-module-shell .hris-clean-shell .recruitment-workspace-copy small {
    display: none !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .recruitment-workspace-badge,
body.internal-module-shell .hris-clean-shell .recruitment-workspace-badge {
    height: 20px !important;
    min-height: 20px !important;
    padding: 0 7px !important;
    font-size: 0.58rem !important;
}

/* Panel disclosure HRIS lebih kecil, tidak terasa satu blok besar. */
html[data-theme] body.internal-module-shell .hris-clean-shell details.panel-disclosure,
body.internal-module-shell .hris-clean-shell details.panel-disclosure,
html[data-theme] body.internal-module-shell .hris-clean-shell .recruitment-workspace-panel,
body.internal-module-shell .hris-clean-shell .recruitment-workspace-panel {
    margin-top: 10px !important;
    padding: 0 !important;
    border-radius: 12px !important;
    overflow: visible !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .panel-summary,
body.internal-module-shell .hris-clean-shell .panel-summary,
html[data-theme] body.internal-module-shell .hris-clean-shell details.panel-disclosure > summary,
body.internal-module-shell .hris-clean-shell details.panel-disclosure > summary {
    min-height: 50px !important;
    padding: 11px 12px !important;
    gap: 10px !important;
    border-radius: 12px !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .panel-content,
body.internal-module-shell .hris-clean-shell .panel-content {
    padding: 12px !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .section-title,
body.internal-module-shell .hris-clean-shell .section-title {
    gap: 8px !important;
    margin-bottom: 10px !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .section-title h2,
body.internal-module-shell .hris-clean-shell .section-title h2 {
    font-size: 0.98rem !important;
    letter-spacing: -0.02em !important;
}

/* Hilangkan nested scrollbar besar di panel HRIS; biarkan halaman utama scroll normal. */
html[data-theme] body.internal-module-shell .hris-clean-shell .table-box.stack-scroll-shell,
body.internal-module-shell .hris-clean-shell .table-box.stack-scroll-shell {
    max-height: none !important;
    overflow-y: visible !important;
    overflow-x: hidden !important;
    padding-right: 0 !important;
    scrollbar-gutter: auto !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .table-box.stack-scroll-shell > .section-title,
body.internal-module-shell .hris-clean-shell .table-box.stack-scroll-shell > .section-title {
    position: static !important;
    margin: 0 0 8px !important;
    padding: 0 !important;
    box-shadow: none !important;
    border-bottom: 0 !important;
    background: transparent !important;
}

/* Pipeline kandidat dibuat collapsible compact agar satu kandidat tidak memenuhi layar. */
html[data-theme] body.internal-module-shell .hris-clean-shell .stack-scroll-list,
body.internal-module-shell .hris-clean-shell .stack-scroll-list {
    gap: 9px !important;
    max-height: none !important;
    overflow: visible !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .stack-scroll-card[data-recruitment-candidate-card],
body.internal-module-shell .hris-clean-shell .stack-scroll-card[data-recruitment-candidate-card] {
    padding: 0 !important;
    border-radius: 11px !important;
    overflow: hidden !important;
    border: 1px solid var(--premium-border, #dbe3ee) !important;
    border-top: 2px solid rgba(201, 161, 58, 0.62) !important;
    background: #ffffff !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .hris-candidate-compact-head,
body.internal-module-shell .hris-clean-shell .hris-candidate-compact-head {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 12px !important;
    border: 0 !important;
    background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%) !important;
    text-align: left !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .hris-candidate-title,
body.internal-module-shell .hris-clean-shell .hris-candidate-title {
    min-width: 0 !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .hris-candidate-title strong,
body.internal-module-shell .hris-clean-shell .hris-candidate-title strong {
    display: block !important;
    color: var(--premium-navy, #0b1f3a) !important;
    font-size: 0.92rem !important;
    line-height: 1.18 !important;
    letter-spacing: -0.025em !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .hris-candidate-title span,
body.internal-module-shell .hris-clean-shell .hris-candidate-title span,
html[data-theme] body.internal-module-shell .hris-clean-shell .hris-candidate-contact,
body.internal-module-shell .hris-clean-shell .hris-candidate-contact {
    display: block !important;
    margin-top: 2px !important;
    color: var(--premium-muted, #64748b) !important;
    font-size: 0.72rem !important;
    line-height: 1.22 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .hris-candidate-meta,
body.internal-module-shell .hris-clean-shell .hris-candidate-meta {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    min-width: 0 !important;
    flex-wrap: wrap !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .hris-candidate-toggle,
body.internal-module-shell .hris-clean-shell .hris-candidate-toggle {
    min-height: 30px !important;
    height: 30px !important;
    padding: 0 10px !important;
    border-radius: 8px !important;
    border: 1px solid var(--premium-border, #dbe3ee) !important;
    background: #ffffff !important;
    color: var(--premium-navy, #0b1f3a) !important;
    font-size: 0.76rem !important;
    font-weight: 850 !important;
    white-space: nowrap !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .stack-scroll-card[data-recruitment-candidate-card]:not(.is-expanded) > form,
body.internal-module-shell .hris-clean-shell .stack-scroll-card[data-recruitment-candidate-card]:not(.is-expanded) > form {
    display: none !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .stack-scroll-card[data-recruitment-candidate-card].is-expanded > form,
body.internal-module-shell .hris-clean-shell .stack-scroll-card[data-recruitment-candidate-card].is-expanded > form {
    display: block !important;
    padding: 0 12px 12px !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .stack-scroll-card[data-recruitment-candidate-card].is-expanded .hris-candidate-compact-head,
body.internal-module-shell .hris-clean-shell .stack-scroll-card[data-recruitment-candidate-card].is-expanded .hris-candidate-compact-head {
    border-bottom: 1px solid var(--premium-border, #dbe3ee) !important;
    margin-bottom: 12px !important;
}

/* Checkbox chip penempatan lebih kecil dan tidak mencuri fokus visual. */
html[data-theme] body.internal-module-shell .hris-clean-shell label:has(input[type="checkbox"]),
body.internal-module-shell .hris-clean-shell label:has(input[type="checkbox"]) {
    min-height: 30px !important;
    padding: 6px 9px !important;
    border-radius: 8px !important;
    font-size: 0.78rem !important;
    line-height: 1.2 !important;
    background: #ffffff !important;
}

/* Long link seperti CV tidak memaksa halaman melebar. */
html[data-theme] body.internal-module-shell .hris-clean-shell a,
body.internal-module-shell .hris-clean-shell a {
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
}

@media (max-width: 1180px) {
    html[data-theme] body.internal-module-shell .hris-clean-shell .products-filter-bar,
    body.internal-module-shell .hris-clean-shell .products-filter-bar {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    html[data-theme] body.internal-module-shell .hris-clean-shell .products-filter-bar button[type="submit"],
    body.internal-module-shell .hris-clean-shell .products-filter-bar button[type="submit"] {
        width: 100% !important;
        max-width: none !important;
        justify-self: stretch !important;
    }
}

@media (max-width: 900px) {
    html[data-theme] body.internal-module-shell .page-content.hris-clean-shell,
    body.internal-module-shell .page-content.hris-clean-shell {
        width: min(100% - 22px, 900px) !important;
    }

    html[data-theme] body.internal-module-shell .hris-clean-shell .internal-module-layout,
    body.internal-module-shell .hris-clean-shell .internal-module-layout,
    html[data-theme] body.internal-module-shell .hris-clean-shell .module-layout,
    body.internal-module-shell .hris-clean-shell .module-layout {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    html[data-theme] body.internal-module-shell .hris-clean-shell .internal-module-nav,
    body.internal-module-shell .hris-clean-shell .internal-module-nav,
    html[data-theme] body.internal-module-shell .hris-clean-shell .info-sidebar,
    body.internal-module-shell .hris-clean-shell .info-sidebar {
        position: static !important;
        max-height: none !important;
        overflow: visible !important;
    }

    html[data-theme] body.internal-module-shell .hris-clean-shell .hris-module-grid,
    body.internal-module-shell .hris-clean-shell .hris-module-grid,
    html[data-theme] body.internal-module-shell .hris-clean-shell .sidebar-menu,
    body.internal-module-shell .hris-clean-shell .sidebar-menu {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    html[data-theme] body.internal-module-shell .hris-clean-shell .hris-candidate-compact-head,
    body.internal-module-shell .hris-clean-shell .hris-candidate-compact-head {
        grid-template-columns: minmax(0, 1fr) auto !important;
    }

    html[data-theme] body.internal-module-shell .hris-clean-shell .hris-candidate-meta,
    body.internal-module-shell .hris-clean-shell .hris-candidate-meta {
        grid-column: 1 / -1 !important;
    }
}

@media (max-width: 640px) {
    html[data-theme] body.internal-module-shell .page-content.hris-clean-shell,
    body.internal-module-shell .page-content.hris-clean-shell {
        width: min(100% - 16px, 640px) !important;
        padding-top: 12px !important;
    }

    html[data-theme] body.internal-module-shell .hris-clean-shell .internal-module-panel,
    body.internal-module-shell .hris-clean-shell .internal-module-panel,
    html[data-theme] body.internal-module-shell .hris-clean-shell .information-panel,
    body.internal-module-shell .hris-clean-shell .information-panel {
        padding: 10px !important;
    }

    html[data-theme] body.internal-module-shell .hris-clean-shell .hris-module-grid,
    body.internal-module-shell .hris-clean-shell .hris-module-grid,
    html[data-theme] body.internal-module-shell .hris-clean-shell .sidebar-menu,
    body.internal-module-shell .hris-clean-shell .sidebar-menu,
    html[data-theme] body.internal-module-shell .hris-clean-shell .products-filter-bar,
    body.internal-module-shell .hris-clean-shell .products-filter-bar {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    html[data-theme] body.internal-module-shell .hris-clean-shell .recruitment-workspace-card,
    body.internal-module-shell .hris-clean-shell .recruitment-workspace-card {
        grid-template-columns: 28px minmax(0, 1fr) !important;
    }

    html[data-theme] body.internal-module-shell .hris-clean-shell .recruitment-workspace-badge,
    body.internal-module-shell .hris-clean-shell .recruitment-workspace-badge {
        grid-column: 2 !important;
        justify-self: start !important;
    }
}

/* V8 HRIS Asset Icons
   Mengembalikan HRIS ke ikon visual: modul yang sudah punya asset memakai SVG di static/icons/workspace,
   sedangkan modul/aksi yang belum punya asset dibuatkan SVG baru agar tidak tampil sebagai huruf/chip. */
body.internal-module-shell .hris-clean-shell :where(.hris-module-nav-icon, .sidebar-icon) {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    flex: 0 0 24px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 4px !important;
    border-radius: 8px !important;
    border: 1px solid rgba(201, 161, 58, 0.24) !important;
    background: var(--premium-navy, #0b1f3a) !important;
    color: #ffffff !important;
    font-size: 0 !important;
    letter-spacing: 0 !important;
    line-height: 1 !important;
    overflow: hidden !important;
}

body.internal-module-shell .hris-clean-shell :where(.hris-module-nav-icon, .sidebar-icon) img,
html[data-theme] body.internal-module-shell .hris-clean-shell :where(.hris-module-nav-icon, .sidebar-icon) img {
    width: 15px !important;
    height: 15px !important;
    display: block !important;
    object-fit: contain !important;
    opacity: 0.96 !important;
}

body.internal-module-shell .hris-clean-shell :where(.hris-module-card.active, .hris-module-card.is-active, .sidebar-link.active, .sidebar-link.is-active) :where(.hris-module-nav-icon, .sidebar-icon) {
    background: rgba(255, 255, 255, 0.16) !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .recruitment-workspace-icon,
body.internal-module-shell .hris-clean-shell .recruitment-workspace-icon {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 5px !important;
    border-radius: 8px !important;
    background: var(--premium-navy, #0b1f3a) !important;
    border: 1px solid rgba(201, 161, 58, 0.24) !important;
    color: #ffffff !important;
    font-size: 0 !important;
    line-height: 1 !important;
    overflow: hidden !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .recruitment-workspace-card:hover .recruitment-workspace-icon,
body.internal-module-shell .hris-clean-shell .recruitment-workspace-card:hover .recruitment-workspace-icon,
html[data-theme] body.internal-module-shell .hris-clean-shell .recruitment-workspace-card.active .recruitment-workspace-icon,
body.internal-module-shell .hris-clean-shell .recruitment-workspace-card.active .recruitment-workspace-icon {
    background: var(--premium-navy, #0b1f3a) !important;
    border-color: rgba(201, 161, 58, 0.42) !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .recruitment-workspace-icon img,
body.internal-module-shell .hris-clean-shell .recruitment-workspace-icon img {
    width: 17px !important;
    height: 17px !important;
    display: block !important;
    object-fit: contain !important;
    opacity: 0.96 !important;
}


/* V9 HRIS Clean Sidebar
   Menghilangkan label kategori seperti OVERVIEW / CORE HR / LIFECYCLE / ANALYTIC pada sidebar HRIS.
   Sidebar cukup menampilkan icon asset + nama menu agar lebih clean dan tidak penuh. */
body.internal-module-shell .hris-clean-shell :where(.hris-module-card, .sidebar-link) {
    grid-template-columns: 24px minmax(0, 1fr) !important;
    gap: 10px !important;
}

body.internal-module-shell .hris-clean-shell :where(.hris-module-card > .badge, .sidebar-link > .badge) {
    display: none !important;
}

body.internal-module-shell .hris-clean-shell :where(.hris-module-card-copy, .sidebar-link .hris-module-card-copy) {
    grid-column: auto !important;
}

body.internal-module-shell .hris-clean-shell :where(.hris-module-card h2, .sidebar-link h2) {
    margin: 0 !important;
    font-size: 0.86rem !important;
    font-weight: 750 !important;
    letter-spacing: -0.01em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

body.internal-module-shell .hris-clean-shell .hris-module-summary-meta .badge {
    display: none !important;
}

/* HRIS direktori: baris dibuat lebih mudah discan tanpa mengubah flow form. */
html[data-theme] body.internal-module-shell .hris-clean-shell :is(.hris-employee-filter-bar, .hris-leave-filter-bar),
body.internal-module-shell .hris-clean-shell :is(.hris-employee-filter-bar, .hris-leave-filter-bar) {
    align-items: center !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell :is(.hris-employee-filter-bar, .hris-leave-filter-bar) .ghost-button,
body.internal-module-shell .hris-clean-shell :is(.hris-employee-filter-bar, .hris-leave-filter-bar) .ghost-button {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 16px !important;
    text-decoration: none !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell :is(.hris-employee-directory-card > .hris-employee-directory-summary, .hris-leave-directory-card > .hris-leave-directory-summary),
body.internal-module-shell .hris-clean-shell :is(.hris-employee-directory-card > .hris-employee-directory-summary, .hris-leave-directory-card > .hris-leave-directory-summary) {
    align-items: center !important;
    gap: 12px !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell :is(.hris-employee-row-meta, .hris-leave-row-meta),
body.internal-module-shell .hris-clean-shell :is(.hris-employee-row-meta, .hris-leave-row-meta) {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 5px 8px !important;
    margin-top: 6px !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell :is(.hris-employee-row-meta, .hris-leave-row-meta) span,
body.internal-module-shell .hris-clean-shell :is(.hris-employee-row-meta, .hris-leave-row-meta) span {
    display: inline-flex !important;
    align-items: center !important;
    max-width: 220px !important;
    min-height: 22px !important;
    padding: 3px 8px !important;
    border-radius: 999px !important;
    color: #475467 !important;
    background: rgba(248, 250, 252, 0.96) !important;
    border: 1px solid rgba(15, 35, 68, 0.1) !important;
    font-size: 0.72rem !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell :is(.hris-employee-directory-summary, .hris-leave-directory-summary) .panel-summary-meta,
body.internal-module-shell .hris-clean-shell :is(.hris-employee-directory-summary, .hris-leave-directory-summary) .panel-summary-meta {
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell :is(.hris-employee-directory-summary, .hris-leave-directory-summary) .badge,
body.internal-module-shell .hris-clean-shell :is(.hris-employee-directory-summary, .hris-leave-directory-summary) .badge {
    max-width: 170px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

@media (max-width: 720px) {
    html[data-theme] body.internal-module-shell .hris-clean-shell :is(.hris-employee-directory-card > .hris-employee-directory-summary, .hris-leave-directory-card > .hris-leave-directory-summary),
    body.internal-module-shell .hris-clean-shell :is(.hris-employee-directory-card > .hris-employee-directory-summary, .hris-leave-directory-card > .hris-leave-directory-summary) {
        align-items: flex-start !important;
    }

    html[data-theme] body.internal-module-shell .hris-clean-shell :is(.hris-employee-directory-summary, .hris-leave-directory-summary) .panel-summary-meta,
    body.internal-module-shell .hris-clean-shell :is(.hris-employee-directory-summary, .hris-leave-directory-summary) .panel-summary-meta {
        justify-content: flex-start !important;
    }
}

/* HRIS summary dibuat compact agar angka ringkas tidak memenuhi layar. */
html[data-theme] body.internal-module-shell .hris-clean-shell > .internal-module-layout > .content-panel > .summary,
body.internal-module-shell .hris-clean-shell > .internal-module-layout > .content-panel > .summary,
html[data-theme] body.internal-module-shell .hris-clean-shell > .internal-module-layout > .content-panel > .meta-grid,
body.internal-module-shell .hris-clean-shell > .internal-module-layout > .content-panel > .meta-grid {
    grid-template-columns: repeat(auto-fill, minmax(136px, 168px)) !important;
    justify-content: start !important;
    gap: 6px !important;
    margin-bottom: 8px !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell > .internal-module-layout > .content-panel > .summary > .card-mini,
body.internal-module-shell .hris-clean-shell > .internal-module-layout > .content-panel > .summary > .card-mini,
html[data-theme] body.internal-module-shell .hris-clean-shell > .internal-module-layout > .content-panel > .meta-grid > .meta-card,
body.internal-module-shell .hris-clean-shell > .internal-module-layout > .content-panel > .meta-grid > .meta-card {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 3px !important;
    min-height: 48px !important;
    padding: 7px 10px !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    align-content: center !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell > .internal-module-layout > .content-panel > .summary > .card-mini p,
body.internal-module-shell .hris-clean-shell > .internal-module-layout > .content-panel > .summary > .card-mini p,
html[data-theme] body.internal-module-shell .hris-clean-shell > .internal-module-layout > .content-panel > .meta-grid > .meta-card span,
body.internal-module-shell .hris-clean-shell > .internal-module-layout > .content-panel > .meta-grid > .meta-card span {
    margin: 0 !important;
    font-size: 0.66rem !important;
    line-height: 1.15 !important;
    letter-spacing: 0.07em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell > .internal-module-layout > .content-panel > .summary > .card-mini h3,
body.internal-module-shell .hris-clean-shell > .internal-module-layout > .content-panel > .summary > .card-mini h3,
html[data-theme] body.internal-module-shell .hris-clean-shell > .internal-module-layout > .content-panel > .meta-grid > .meta-card strong,
body.internal-module-shell .hris-clean-shell > .internal-module-layout > .content-panel > .meta-grid > .meta-card strong {
    margin: 0 !important;
    text-align: left !important;
    font-size: clamp(0.9rem, 1vw, 1.08rem) !important;
    line-height: 1.1 !important;
    letter-spacing: 0 !important;
    word-spacing: normal !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell > .internal-module-layout > .content-panel > .meta-grid > .report-snapshot-card .report-snapshot-value,
body.internal-module-shell .hris-clean-shell > .internal-module-layout > .content-panel > .meta-grid > .report-snapshot-card .report-snapshot-value {
    display: grid !important;
    gap: 1px !important;
    min-width: 0 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell > .internal-module-layout > .content-panel > .meta-grid > .report-snapshot-card .report-snapshot-value span,
body.internal-module-shell .hris-clean-shell > .internal-module-layout > .content-panel > .meta-grid > .report-snapshot-card .report-snapshot-value span {
    margin: 0 !important;
    color: #041b3a !important;
    font-size: clamp(0.88rem, 0.95vw, 1rem) !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell > .internal-module-layout > .content-panel > .meta-grid > .report-snapshot-card .report-snapshot-value small,
body.internal-module-shell .hris-clean-shell > .internal-module-layout > .content-panel > .meta-grid > .report-snapshot-card .report-snapshot-value small {
    margin: 0 !important;
    color: #64748b !important;
    font-size: 0.66rem !important;
    font-weight: 750 !important;
    letter-spacing: 0 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

@media (max-width: 640px) {
    html[data-theme] body.internal-module-shell .hris-clean-shell > .internal-module-layout > .content-panel > .summary,
    body.internal-module-shell .hris-clean-shell > .internal-module-layout > .content-panel > .summary,
    html[data-theme] body.internal-module-shell .hris-clean-shell > .internal-module-layout > .content-panel > .meta-grid,
    body.internal-module-shell .hris-clean-shell > .internal-module-layout > .content-panel > .meta-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    html[data-theme] body.internal-module-shell .hris-clean-shell > .internal-module-layout > .content-panel > .meta-grid > .meta-card strong,
    body.internal-module-shell .hris-clean-shell > .internal-module-layout > .content-panel > .meta-grid > .meta-card strong {
        white-space: normal !important;
    }
}

/* ======================================================================
   HRIS ATTENDANCE CLEAN MONITOR v10
   Fokus: halaman Attendance Geotag lebih enak dipantau HR, tidak penuh,
   tidak pucat, icon pakai asset, card ringkas seperti WMS.
   ====================================================================== */
html[data-theme] body.internal-module-shell .hris-clean-shell .biometric-workspace-shell,
body.internal-module-shell .hris-clean-shell .biometric-workspace-shell {
    display: grid !important;
    gap: 12px !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .biometric-workspace-hero,
body.internal-module-shell .hris-clean-shell .biometric-workspace-hero {
    padding: 14px !important;
    border: 1px solid var(--premium-border, #dbe3ee) !important;
    border-top: 3px solid var(--premium-gold, #c9a13a) !important;
    border-radius: 14px !important;
    background: #ffffff !important;
    color: var(--premium-navy, #0b1f3a) !important;
    box-shadow: none !important;
    overflow: visible !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .biometric-workspace-head,
body.internal-module-shell .hris-clean-shell .biometric-workspace-head {
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 0 0 12px !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .biometric-workspace-icon,
body.internal-module-shell .hris-clean-shell .biometric-workspace-icon {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    border-radius: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 9px !important;
    background: var(--premium-navy, #0b1f3a) !important;
    border: 1px solid rgba(201, 161, 58, 0.32) !important;
    box-shadow: none !important;
    color: #ffffff !important;
    font-size: 0 !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell :is(.biometric-workspace-icon, .biometric-workspace-stat-icon, .biometric-meta-icon, .biometric-module-mark) img,
body.internal-module-shell .hris-clean-shell :is(.biometric-workspace-icon, .biometric-workspace-stat-icon, .biometric-meta-icon, .biometric-module-mark) img {
    width: 18px !important;
    height: 18px !important;
    display: block !important;
    object-fit: contain !important;
    opacity: 0.98 !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .biometric-workspace-headline,
body.internal-module-shell .hris-clean-shell .biometric-workspace-headline {
    display: grid !important;
    gap: 2px !important;
    min-width: 0 !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .biometric-workspace-kicker,
body.internal-module-shell .hris-clean-shell .biometric-workspace-kicker {
    padding: 0 !important;
    min-height: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--premium-gold, #c9a13a) !important;
    font-size: 0.68rem !important;
    font-weight: 850 !important;
    letter-spacing: 0.11em !important;
    text-transform: uppercase !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .biometric-workspace-headline h2,
body.internal-module-shell .hris-clean-shell .biometric-workspace-headline h2 {
    margin: 0 !important;
    color: var(--premium-navy, #0b1f3a) !important;
    font-size: clamp(1.15rem, 1.6vw, 1.65rem) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.035em !important;
    opacity: 1 !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .biometric-workspace-headline p,
body.internal-module-shell .hris-clean-shell .biometric-workspace-headline p {
    margin: 2px 0 0 !important;
    max-width: 680px !important;
    color: var(--premium-muted, #64748b) !important;
    font-size: 0.82rem !important;
    line-height: 1.45 !important;
    opacity: 1 !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .biometric-workspace-badge,
body.internal-module-shell .hris-clean-shell .biometric-workspace-badge {
    min-width: 0 !important;
    width: auto !important;
    padding: 8px 10px !important;
    border-radius: 10px !important;
    background: var(--premium-surface-soft, #f8fafc) !important;
    border: 1px solid var(--premium-border, #dbe3ee) !important;
    box-shadow: none !important;
    display: grid !important;
    gap: 1px !important;
    justify-items: end !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .biometric-workspace-badge strong,
body.internal-module-shell .hris-clean-shell .biometric-workspace-badge strong {
    margin: 0 !important;
    color: var(--premium-navy, #0b1f3a) !important;
    font-size: 0.78rem !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .biometric-workspace-badge span,
body.internal-module-shell .hris-clean-shell .biometric-workspace-badge span {
    color: var(--premium-muted, #64748b) !important;
    font-size: 0.72rem !important;
    line-height: 1.25 !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .biometric-workspace-filter,
body.internal-module-shell .hris-clean-shell .biometric-workspace-filter {
    display: grid !important;
    grid-template-columns: minmax(220px, 1fr) repeat(2, minmax(140px, 160px)) auto !important;
    gap: 8px !important;
    align-items: center !important;
    margin: 0 0 10px !important;
    padding: 10px !important;
    border-radius: 12px !important;
    background: var(--premium-surface-soft, #f8fafc) !important;
    border: 1px solid var(--premium-border, #dbe3ee) !important;
    box-shadow: none !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .biometric-workspace-filter > *,
body.internal-module-shell .hris-clean-shell .biometric-workspace-filter > * {
    width: 100% !important;
    flex: initial !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .biometric-workspace-filter :is(select, input),
body.internal-module-shell .hris-clean-shell .biometric-workspace-filter :is(select, input) {
    min-height: 36px !important;
    height: 36px !important;
    border-radius: 8px !important;
    border: 1px solid var(--premium-border, #dbe3ee) !important;
    background: #ffffff !important;
    color: var(--premium-navy, #0b1f3a) !important;
    font-size: 0.83rem !important;
    box-shadow: none !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .biometric-workspace-filter button,
body.internal-module-shell .hris-clean-shell .biometric-workspace-filter button {
    min-width: 118px !important;
    max-width: 140px !important;
    width: auto !important;
    justify-self: end !important;
    min-height: 36px !important;
    height: 36px !important;
    padding: 0 14px !important;
    border: 1px solid var(--premium-navy, #0b1f3a) !important;
    border-radius: 8px !important;
    background: var(--premium-navy, #0b1f3a) !important;
    color: #ffffff !important;
    font-size: 0.82rem !important;
    font-weight: 800 !important;
    box-shadow: none !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .biometric-monitor-note,
body.internal-module-shell .hris-clean-shell .biometric-monitor-note {
    display: inline-flex !important;
    align-items: center !important;
    width: auto !important;
    max-width: 100% !important;
    min-height: 30px !important;
    margin: 0 0 10px !important;
    padding: 6px 10px !important;
    border-radius: 999px !important;
    background: rgba(201, 161, 58, 0.10) !important;
    border: 1px solid rgba(201, 161, 58, 0.20) !important;
    color: var(--premium-muted, #64748b) !important;
    font-size: 0.78rem !important;
    line-height: 1.35 !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .biometric-workspace-summary,
body.internal-module-shell .hris-clean-shell .biometric-workspace-summary {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin: 0 0 8px !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .biometric-workspace-stat.card-mini,
body.internal-module-shell .hris-clean-shell .biometric-workspace-stat.card-mini {
    min-height: 72px !important;
    padding: 10px !important;
    border-radius: 12px !important;
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 9px !important;
    border: 1px solid var(--premium-border, #dbe3ee) !important;
    border-top: 2px solid var(--premium-gold, #c9a13a) !important;
    background: #ffffff !important;
    box-shadow: none !important;
    color: var(--premium-navy, #0b1f3a) !important;
    overflow: hidden !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .biometric-workspace-stat-icon,
html[data-theme] body.internal-module-shell .hris-clean-shell .biometric-meta-icon,
body.internal-module-shell .hris-clean-shell .biometric-workspace-stat-icon,
body.internal-module-shell .hris-clean-shell .biometric-meta-icon {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    padding: 8px !important;
    border-radius: 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--premium-navy, #0b1f3a) !important;
    border: 1px solid rgba(201, 161, 58, 0.24) !important;
    box-shadow: none !important;
    font-size: 0 !important;
    color: #ffffff !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .biometric-workspace-stat-copy,
body.internal-module-shell .hris-clean-shell .biometric-workspace-stat-copy {
    display: grid !important;
    gap: 2px !important;
    min-width: 0 !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .biometric-workspace-stat-copy p,
body.internal-module-shell .hris-clean-shell .biometric-workspace-stat-copy p {
    margin: 0 !important;
    color: var(--premium-muted, #64748b) !important;
    font-size: 0.64rem !important;
    font-weight: 850 !important;
    letter-spacing: 0.09em !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .biometric-workspace-stat-copy h3,
body.internal-module-shell .hris-clean-shell .biometric-workspace-stat-copy h3 {
    margin: 0 !important;
    color: var(--premium-navy, #0b1f3a) !important;
    font-size: clamp(1.02rem, 1.25vw, 1.28rem) !important;
    line-height: 1.06 !important;
    letter-spacing: -0.035em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .biometric-workspace-stat-copy small,
body.internal-module-shell .hris-clean-shell .biometric-workspace-stat-copy small {
    display: none !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .biometric-workspace-meta,
body.internal-module-shell .hris-clean-shell .biometric-workspace-meta {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin: 0 0 8px !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .biometric-meta-card,
body.internal-module-shell .hris-clean-shell .biometric-meta-card {
    min-height: 58px !important;
    padding: 9px 10px !important;
    border-radius: 12px !important;
    display: grid !important;
    grid-template-columns: 32px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 8px !important;
    border: 1px solid var(--premium-border, #dbe3ee) !important;
    background: var(--premium-surface-soft, #f8fafc) !important;
    box-shadow: none !important;
    overflow: hidden !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .biometric-meta-icon,
body.internal-module-shell .hris-clean-shell .biometric-meta-icon {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    padding: 7px !important;
    border-radius: 9px !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .biometric-meta-copy,
body.internal-module-shell .hris-clean-shell .biometric-meta-copy {
    display: grid !important;
    gap: 2px !important;
    min-width: 0 !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .biometric-meta-copy span,
body.internal-module-shell .hris-clean-shell .biometric-meta-copy span {
    margin: 0 !important;
    color: var(--premium-muted, #64748b) !important;
    font-size: 0.62rem !important;
    font-weight: 850 !important;
    letter-spacing: 0.09em !important;
    text-transform: uppercase !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .biometric-meta-copy strong,
body.internal-module-shell .hris-clean-shell .biometric-meta-copy strong {
    color: var(--premium-navy, #0b1f3a) !important;
    font-size: 0.86rem !important;
    line-height: 1.16 !important;
    letter-spacing: -0.02em !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .biometric-compact-note,
body.internal-module-shell .hris-clean-shell .biometric-compact-note {
    margin: 4px 0 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .biometric-compact-note summary,
body.internal-module-shell .hris-clean-shell .biometric-compact-note summary {
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    min-height: 28px !important;
    padding: 5px 10px !important;
    border-radius: 999px !important;
    border: 1px solid var(--premium-border, #dbe3ee) !important;
    background: #ffffff !important;
    color: var(--premium-muted, #64748b) !important;
    font-size: 0.72rem !important;
    font-weight: 800 !important;
    list-style: none !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .biometric-compact-note summary::-webkit-details-marker,
body.internal-module-shell .hris-clean-shell .biometric-compact-note summary::-webkit-details-marker {
    display: none !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .biometric-compact-note .helper-text,
body.internal-module-shell .hris-clean-shell .biometric-compact-note .helper-text {
    display: block !important;
    margin-top: 8px !important;
    padding: 10px !important;
    border: 1px solid var(--premium-border, #dbe3ee) !important;
    border-radius: 10px !important;
    background: var(--premium-surface-soft, #f8fafc) !important;
    color: var(--premium-muted, #64748b) !important;
    font-size: 0.78rem !important;
    line-height: 1.45 !important;
}

/* Modul Attendance: kartu command kecil, bukan panel besar penuh tulisan. */
html[data-theme] body.internal-module-shell .hris-clean-shell .biometric-workspace-modules,
body.internal-module-shell .hris-clean-shell .biometric-workspace-modules {
    margin-top: 6px !important;
    padding: 0 !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .biometric-workspace-modules .section-title,
body.internal-module-shell .hris-clean-shell .biometric-workspace-modules .section-title {
    margin-bottom: 8px !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .biometric-workspace-modules .section-title h2,
body.internal-module-shell .hris-clean-shell .biometric-workspace-modules .section-title h2 {
    font-size: 1rem !important;
    color: var(--premium-navy, #0b1f3a) !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .biometric-workspace-modules .section-title p,
body.internal-module-shell .hris-clean-shell .biometric-workspace-modules .section-title p,
html[data-theme] body.internal-module-shell .hris-clean-shell .biometric-module-eyebrow,
body.internal-module-shell .hris-clean-shell .biometric-module-eyebrow,
html[data-theme] body.internal-module-shell .hris-clean-shell .biometric-module-points,
body.internal-module-shell .hris-clean-shell .biometric-module-points,
html[data-theme] body.internal-module-shell .hris-clean-shell .biometric-module-footer small,
body.internal-module-shell .hris-clean-shell .biometric-module-footer small {
    display: none !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .biometric-workspace-grid,
body.internal-module-shell .hris-clean-shell .biometric-workspace-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)) !important;
    gap: 8px !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .biometric-workspace-card,
body.internal-module-shell .hris-clean-shell .biometric-workspace-card {
    min-height: 56px !important;
    padding: 9px 10px !important;
    border-radius: 11px !important;
    display: grid !important;
    grid-template-columns: 30px minmax(0, 1fr) auto !important;
    gap: 9px !important;
    align-items: center !important;
    border: 1px solid var(--premium-border, #dbe3ee) !important;
    border-top: 2px solid var(--premium-gold, #c9a13a) !important;
    background: #ffffff !important;
    box-shadow: none !important;
    color: var(--premium-navy, #0b1f3a) !important;
    overflow: hidden !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .biometric-workspace-card.active,
body.internal-module-shell .hris-clean-shell .biometric-workspace-card.active,
html[data-theme] body.internal-module-shell .hris-clean-shell .biometric-workspace-card:hover,
body.internal-module-shell .hris-clean-shell .biometric-workspace-card:hover {
    border-color: rgba(201, 161, 58, 0.46) !important;
    border-top-color: var(--premium-gold, #c9a13a) !important;
    background: #ffffff !important;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.055) !important;
    transform: none !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .biometric-module-head,
body.internal-module-shell .hris-clean-shell .biometric-module-head {
    display: contents !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .biometric-module-mark,
body.internal-module-shell .hris-clean-shell .biometric-module-mark {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    padding: 7px !important;
    border-radius: 9px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--premium-navy, #0b1f3a) !important;
    border: 1px solid rgba(201, 161, 58, 0.24) !important;
    box-shadow: none !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .biometric-module-mark-dot,
body.internal-module-shell .hris-clean-shell .biometric-module-mark-dot,
html[data-theme] body.internal-module-shell .hris-clean-shell .biometric-module-mark-core,
body.internal-module-shell .hris-clean-shell .biometric-module-mark-core {
    display: none !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .biometric-module-copy,
body.internal-module-shell .hris-clean-shell .biometric-module-copy {
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: grid !important;
    gap: 2px !important;
    min-width: 0 !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .biometric-module-copy strong,
body.internal-module-shell .hris-clean-shell .biometric-module-copy strong {
    color: var(--premium-navy, #0b1f3a) !important;
    font-size: 0.86rem !important;
    line-height: 1.16 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .biometric-module-copy small,
body.internal-module-shell .hris-clean-shell .biometric-module-copy small {
    color: var(--premium-muted, #64748b) !important;
    font-size: 0.7rem !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .biometric-module-badge,
body.internal-module-shell .hris-clean-shell .biometric-module-badge,
html[data-theme] body.internal-module-shell .hris-clean-shell .biometric-module-link,
body.internal-module-shell .hris-clean-shell .biometric-module-link {
    grid-column: 3 !important;
    grid-row: 1 !important;
    align-self: center !important;
    justify-self: end !important;
    min-height: 22px !important;
    padding: 0 8px !important;
    border-radius: 999px !important;
    border: 1px solid var(--premium-border, #dbe3ee) !important;
    background: var(--premium-surface-soft, #f8fafc) !important;
    color: var(--premium-navy, #0b1f3a) !important;
    font-size: 0.62rem !important;
    font-weight: 850 !important;
    letter-spacing: 0.07em !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .biometric-module-footer,
body.internal-module-shell .hris-clean-shell .biometric-module-footer {
    display: contents !important;
}

/* Form & tabel Attendance dibuat data-first untuk monitoring HR. */
html[data-theme] body.internal-module-shell .hris-clean-shell .biometric-data-card,
html[data-theme] body.internal-module-shell .hris-clean-shell .biometric-action-panel,
body.internal-module-shell .hris-clean-shell .biometric-data-card,
body.internal-module-shell .hris-clean-shell .biometric-action-panel {
    padding: 12px !important;
    border: 1px solid var(--premium-border, #dbe3ee) !important;
    border-top: 3px solid var(--premium-gold, #c9a13a) !important;
    border-radius: 14px !important;
    background: #ffffff !important;
    box-shadow: none !important;
    overflow: visible !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .biometric-section-title,
body.internal-module-shell .hris-clean-shell .biometric-section-title {
    grid-template-columns: 32px minmax(0, 1fr) !important;
    gap: 9px !important;
    align-items: center !important;
    margin-bottom: 10px !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .biometric-section-title::before,
body.internal-module-shell .hris-clean-shell .biometric-section-title::before {
    width: 32px !important;
    height: 32px !important;
    border-radius: 9px !important;
    background: var(--premium-navy, #0b1f3a) !important;
    color: #ffffff !important;
    border: 1px solid rgba(201, 161, 58, 0.24) !important;
    box-shadow: none !important;
    font-size: 0.62rem !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .biometric-section-title h2,
body.internal-module-shell .hris-clean-shell .biometric-section-title h2 {
    color: var(--premium-navy, #0b1f3a) !important;
    font-size: 1rem !important;
    line-height: 1.15 !important;
    letter-spacing: -0.02em !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .biometric-section-title p,
body.internal-module-shell .hris-clean-shell .biometric-section-title p {
    display: none !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .biometric-data-card table,
body.internal-module-shell .hris-clean-shell .biometric-data-card table {
    font-size: 0.82rem !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .biometric-data-card th,
body.internal-module-shell .hris-clean-shell .biometric-data-card th {
    padding: 9px 10px !important;
    background: var(--premium-surface-soft, #f8fafc) !important;
    color: var(--premium-muted, #64748b) !important;
    font-size: 0.68rem !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .biometric-data-card td,
body.internal-module-shell .hris-clean-shell .biometric-data-card td {
    padding: 9px 10px !important;
    vertical-align: middle !important;
}

@media (max-width: 1180px) {
    html[data-theme] body.internal-module-shell .hris-clean-shell .biometric-workspace-head,
    body.internal-module-shell .hris-clean-shell .biometric-workspace-head {
        grid-template-columns: 40px minmax(0, 1fr) !important;
    }

    html[data-theme] body.internal-module-shell .hris-clean-shell .biometric-workspace-badge,
    body.internal-module-shell .hris-clean-shell .biometric-workspace-badge {
        grid-column: 1 / -1 !important;
        justify-items: start !important;
    }

    html[data-theme] body.internal-module-shell .hris-clean-shell .biometric-workspace-summary,
    body.internal-module-shell .hris-clean-shell .biometric-workspace-summary {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    html[data-theme] body.internal-module-shell .hris-clean-shell .biometric-workspace-meta,
    body.internal-module-shell .hris-clean-shell .biometric-workspace-meta {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 820px) {
    html[data-theme] body.internal-module-shell .hris-clean-shell .biometric-workspace-filter,
    body.internal-module-shell .hris-clean-shell .biometric-workspace-filter {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    html[data-theme] body.internal-module-shell .hris-clean-shell .biometric-workspace-filter button,
    body.internal-module-shell .hris-clean-shell .biometric-workspace-filter button {
        width: 100% !important;
        max-width: none !important;
        justify-self: stretch !important;
    }

    html[data-theme] body.internal-module-shell .hris-clean-shell .biometric-workspace-summary,
    body.internal-module-shell .hris-clean-shell .biometric-workspace-summary,
    html[data-theme] body.internal-module-shell .hris-clean-shell .biometric-workspace-meta,
    body.internal-module-shell .hris-clean-shell .biometric-workspace-meta {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 520px) {
    html[data-theme] body.internal-module-shell .hris-clean-shell .biometric-workspace-hero,
    body.internal-module-shell .hris-clean-shell .biometric-workspace-hero,
    html[data-theme] body.internal-module-shell .hris-clean-shell .biometric-data-card,
    html[data-theme] body.internal-module-shell .hris-clean-shell .biometric-action-panel,
    body.internal-module-shell .hris-clean-shell .biometric-data-card,
    body.internal-module-shell .hris-clean-shell .biometric-action-panel {
        padding: 10px !important;
        border-radius: 12px !important;
    }

    html[data-theme] body.internal-module-shell .hris-clean-shell .biometric-workspace-summary,
    body.internal-module-shell .hris-clean-shell .biometric-workspace-summary,
    html[data-theme] body.internal-module-shell .hris-clean-shell .biometric-workspace-meta,
    body.internal-module-shell .hris-clean-shell .biometric-workspace-meta {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    html[data-theme] body.internal-module-shell .hris-clean-shell .biometric-workspace-card,
    body.internal-module-shell .hris-clean-shell .biometric-workspace-card {
        grid-template-columns: 30px minmax(0, 1fr) !important;
    }

    html[data-theme] body.internal-module-shell .hris-clean-shell .biometric-module-badge,
    body.internal-module-shell .hris-clean-shell .biometric-module-badge,
    html[data-theme] body.internal-module-shell .hris-clean-shell .biometric-module-link,
    body.internal-module-shell .hris-clean-shell .biometric-module-link {
        display: none !important;
    }
}

/* ======================================================================
   HRIS v11 - NO BLUE RECRUITMENT WORKSPACE
   Root fix: beberapa browser/page tidak punya html[data-theme], jadi override
   lama yang memakai html[data-theme] tidak selalu menang. Selector ini sengaja
   dibuat tanpa dependensi data-theme agar kartu Recruitment tidak kembali biru.
   ====================================================================== */
body.internal-module-shell .hris-clean-shell .recruitment-workspace,
body .hris-clean-shell .recruitment-workspace {
    margin-top: 10px !important;
}

body.internal-module-shell .hris-clean-shell .recruitment-workspace-grid,
body .hris-clean-shell .recruitment-workspace-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 255px), 1fr)) !important;
    gap: 10px !important;
}

body.internal-module-shell .hris-clean-shell button.recruitment-workspace-card,
body.internal-module-shell .hris-clean-shell .recruitment-workspace-card,
body .hris-clean-shell button.recruitment-workspace-card,
body .hris-clean-shell .recruitment-workspace-card,
body.internal-module-shell .hris-clean-shell .recruitment-workspace-card.accent-sky,
body.internal-module-shell .hris-clean-shell .recruitment-workspace-card.accent-indigo,
body.internal-module-shell .hris-clean-shell .recruitment-workspace-card.accent-emerald,
body.internal-module-shell .hris-clean-shell .recruitment-workspace-card.accent-teal,
body.internal-module-shell .hris-clean-shell .recruitment-workspace-card.accent-amber,
body.internal-module-shell .hris-clean-shell .recruitment-workspace-card.accent-blue,
body .hris-clean-shell .recruitment-workspace-card.accent-sky,
body .hris-clean-shell .recruitment-workspace-card.accent-indigo,
body .hris-clean-shell .recruitment-workspace-card.accent-emerald,
body .hris-clean-shell .recruitment-workspace-card.accent-teal,
body .hris-clean-shell .recruitment-workspace-card.accent-amber,
body .hris-clean-shell .recruitment-workspace-card.accent-blue {
    appearance: none !important;
    -webkit-appearance: none !important;
    position: relative !important;
    display: grid !important;
    grid-template-columns: 32px minmax(0, 1fr) auto !important;
    align-items: center !important;
    min-height: 58px !important;
    height: auto !important;
    width: 100% !important;
    padding: 10px 12px !important;
    gap: 10px !important;
    border: 1px solid #dbe3ee !important;
    border-top: 2px solid #d6a935 !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    background-image: none !important;
    color: #0b1f3a !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.035) !important;
    text-align: left !important;
    overflow: hidden !important;
    transform: none !important;
    cursor: pointer !important;
}

body.internal-module-shell .hris-clean-shell .recruitment-workspace-card::before,
body.internal-module-shell .hris-clean-shell .recruitment-workspace-card::after,
body .hris-clean-shell .recruitment-workspace-card::before,
body .hris-clean-shell .recruitment-workspace-card::after {
    display: none !important;
    content: none !important;
    background: none !important;
}

body.internal-module-shell .hris-clean-shell button.recruitment-workspace-card:hover,
body.internal-module-shell .hris-clean-shell button.recruitment-workspace-card.active,
body .hris-clean-shell button.recruitment-workspace-card:hover,
body .hris-clean-shell button.recruitment-workspace-card.active {
    border-color: rgba(214, 169, 53, 0.55) !important;
    border-top-color: #d6a935 !important;
    background: #fffdf7 !important;
    background-image: none !important;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06) !important;
    transform: none !important;
}

body.internal-module-shell .hris-clean-shell .recruitment-workspace-icon,
body .hris-clean-shell .recruitment-workspace-icon,
body.internal-module-shell .hris-clean-shell .recruitment-workspace-card.accent-sky .recruitment-workspace-icon,
body.internal-module-shell .hris-clean-shell .recruitment-workspace-card.accent-indigo .recruitment-workspace-icon,
body.internal-module-shell .hris-clean-shell .recruitment-workspace-card.accent-emerald .recruitment-workspace-icon,
body.internal-module-shell .hris-clean-shell .recruitment-workspace-card.accent-teal .recruitment-workspace-icon,
body.internal-module-shell .hris-clean-shell .recruitment-workspace-card.accent-amber .recruitment-workspace-icon,
body.internal-module-shell .hris-clean-shell .recruitment-workspace-card.accent-blue .recruitment-workspace-icon,
body .hris-clean-shell .recruitment-workspace-card.accent-sky .recruitment-workspace-icon,
body .hris-clean-shell .recruitment-workspace-card.accent-indigo .recruitment-workspace-icon,
body .hris-clean-shell .recruitment-workspace-card.accent-emerald .recruitment-workspace-icon,
body .hris-clean-shell .recruitment-workspace-card.accent-teal .recruitment-workspace-icon,
body .hris-clean-shell .recruitment-workspace-card.accent-amber .recruitment-workspace-icon,
body .hris-clean-shell .recruitment-workspace-card.accent-blue .recruitment-workspace-icon {
    display: grid !important;
    place-items: center !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    border: 1px solid rgba(214, 169, 53, 0.34) !important;
    border-radius: 9px !important;
    background: #fff5d6 !important;
    background-image: none !important;
    color: #0b1f3a !important;
    box-shadow: none !important;
    overflow: hidden !important;
}

body.internal-module-shell .hris-clean-shell .recruitment-workspace-icon img,
body .hris-clean-shell .recruitment-workspace-icon img {
    width: 17px !important;
    height: 17px !important;
    object-fit: contain !important;
    display: block !important;
    opacity: 0.94 !important;
}

body.internal-module-shell .hris-clean-shell .recruitment-workspace-copy,
body .hris-clean-shell .recruitment-workspace-copy {
    display: grid !important;
    gap: 2px !important;
    min-width: 0 !important;
}

body.internal-module-shell .hris-clean-shell .recruitment-workspace-copy strong,
body .hris-clean-shell .recruitment-workspace-copy strong {
    color: #0b1f3a !important;
    font-family: var(--font-sans, 'Plus Jakarta Sans', Inter, sans-serif) !important;
    font-size: 0.84rem !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    letter-spacing: 0 !important;
    margin: 0 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere !important;
}

body.internal-module-shell .hris-clean-shell .recruitment-workspace-copy small,
body .hris-clean-shell .recruitment-workspace-copy small {
    display: none !important;
}

body.internal-module-shell .hris-clean-shell .recruitment-workspace-badge,
body .hris-clean-shell .recruitment-workspace-badge {
    position: static !important;
    justify-self: end !important;
    align-self: center !important;
    min-height: 22px !important;
    height: 22px !important;
    max-width: 112px !important;
    padding: 0 9px !important;
    border: 1px solid #e0e7ef !important;
    border-radius: 999px !important;
    background: #f8fafc !important;
    background-image: none !important;
    color: #0b1f3a !important;
    box-shadow: none !important;
    font-size: 0.65rem !important;
    font-weight: 850 !important;
    letter-spacing: 0.08em !important;
    line-height: 20px !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

body.internal-module-shell .hris-clean-shell .recruitment-workspace > .section-title h2,
body .hris-clean-shell .recruitment-workspace > .section-title h2 {
    font-size: 1rem !important;
    margin: 0 0 6px !important;
}

body.internal-module-shell .hris-clean-shell .recruitment-workspace > .section-title p,
body .hris-clean-shell .recruitment-workspace > .section-title p {
    display: none !important;
}

@media (max-width: 760px) {
    body.internal-module-shell .hris-clean-shell button.recruitment-workspace-card,
    body .hris-clean-shell button.recruitment-workspace-card {
        grid-template-columns: 30px minmax(0, 1fr) !important;
        min-height: 56px !important;
    }
    body.internal-module-shell .hris-clean-shell .recruitment-workspace-badge,
    body .hris-clean-shell .recruitment-workspace-badge {
        grid-column: 2 !important;
        justify-self: start !important;
        margin-top: 2px !important;
    }
}


/* ======================================================================
   HRIS v12 code fixes fallback
   - No image generation, only code revision.
   - Disable blue recruitment cards.
   - Disable HRIS table resize handles.
   - Compact approval queue.
   ====================================================================== */
body.internal-module-shell .hris-clean-shell .table-col-resizer,
body.internal-module-shell .hris-clean-shell .table-row-resizer,
body .hris-clean-shell .table-col-resizer,
body .hris-clean-shell .table-row-resizer { display:none!important; visibility:hidden!important; opacity:0!important; pointer-events:none!important; }
body.internal-module-shell .hris-clean-shell button.recruitment-workspace-card,
body.internal-module-shell .hris-clean-shell a.recruitment-workspace-card,
body.internal-module-shell .hris-clean-shell .recruitment-workspace-card,
body.internal-module-shell .hris-clean-shell .biometric-workspace-card,
body .hris-clean-shell button.recruitment-workspace-card,
body .hris-clean-shell a.recruitment-workspace-card,
body .hris-clean-shell .recruitment-workspace-card,
body .hris-clean-shell .biometric-workspace-card {
    background:#fff!important; background-image:none!important; color:#071a33!important; border:1px solid #dce4ee!important; border-top:2px solid #d6a935!important; box-shadow:none!important;
}
body.internal-module-shell .hris-clean-shell [data-approval-queue] .stack-scroll-list,
body .hris-clean-shell [data-approval-queue] .stack-scroll-list { max-height:62vh!important; overflow-y:auto!important; }
body.internal-module-shell .hris-clean-shell [data-approval-queue] .stack-scroll-card,
body .hris-clean-shell [data-approval-queue] .stack-scroll-card { padding:12px!important; border-radius:12px!important; box-shadow:none!important; }
body.internal-module-shell .hris-clean-shell .hris-attendance-table-shell,
body .hris-clean-shell .hris-attendance-table-shell { overflow-x:auto!important; max-width:100%!important; }


/* ======================================================================
   HRIS v13 - Recruitment command cards no-blue hard lock
   Reason: previous CSS made cards blue until clicked/active.
   ====================================================================== */
body .hris-clean-shell .recruitment-workspace button.hris-recruitment-command,
body .hris-clean-shell .recruitment-workspace button.hris-recruitment-command:not(.active),
body .hris-clean-shell .recruitment-workspace button.hris-recruitment-command:hover,
body .hris-clean-shell .recruitment-workspace button.hris-recruitment-command:focus,
body .hris-clean-shell .recruitment-workspace button.hris-recruitment-command:focus-visible,
body.internal-module-shell .hris-clean-shell .recruitment-workspace button.hris-recruitment-command,
body.internal-module-shell .hris-clean-shell .recruitment-workspace button.hris-recruitment-command:not(.active),
body.internal-module-shell .hris-clean-shell .recruitment-workspace button.hris-recruitment-command:hover,
body.internal-module-shell .hris-clean-shell .recruitment-workspace button.hris-recruitment-command:focus,
body.internal-module-shell .hris-clean-shell .recruitment-workspace button.hris-recruitment-command:focus-visible,
html body .hris-clean-shell .recruitment-workspace-grid > button.recruitment-workspace-card.hris-recruitment-command {
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
    color: #071a33 !important;
    border: 1px solid #dce4ee !important;
    border-top: 2px solid #d6a935 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    transform: none !important;
}
body .hris-clean-shell .recruitment-workspace button.hris-recruitment-command.active,
body.internal-module-shell .hris-clean-shell .recruitment-workspace button.hris-recruitment-command.active,
html body .hris-clean-shell .recruitment-workspace-grid > button.recruitment-workspace-card.hris-recruitment-command.active {
    background: #fffdf7 !important;
    background-color: #fffdf7 !important;
    background-image: none !important;
    border-color: rgba(214,169,53,.62) !important;
    border-top-color: #d6a935 !important;
}
body .hris-clean-shell .recruitment-workspace button.hris-recruitment-command .recruitment-workspace-icon,
body.internal-module-shell .hris-clean-shell .recruitment-workspace button.hris-recruitment-command .recruitment-workspace-icon {
    background: #fff4cf !important;
    background-image: none !important;
    color: #071a33 !important;
    border-color: rgba(214,169,53,.34) !important;
    box-shadow: none !important;
}


/* ======================================================================
   V14 HRIS Colorful SVG Icons
   User request: icon SVG dibuat lebih berwarna untuk sidebar modul,
   workspace recruitment, attendance geotag, dan modul-modul HRIS lain.
   ====================================================================== */
body.internal-module-shell .hris-clean-shell {
    --icon-blue-bg: #e7f0ff;
    --icon-blue-border: #c8dcff;
    --icon-blue-fg: #2158b6;
    --icon-indigo-bg: #ece9ff;
    --icon-indigo-border: #d9d3ff;
    --icon-indigo-fg: #5a48c9;
    --icon-emerald-bg: #e8fbf3;
    --icon-emerald-border: #c6f0dd;
    --icon-emerald-fg: #168a5d;
    --icon-teal-bg: #e6fbfa;
    --icon-teal-border: #c1efec;
    --icon-teal-fg: #0e8b87;
    --icon-amber-bg: #fff6df;
    --icon-amber-border: #f3df9f;
    --icon-amber-fg: #b77912;
    --icon-orange-bg: #fff1e8;
    --icon-orange-border: #ffd5ba;
    --icon-orange-fg: #c96a19;
    --icon-rose-bg: #ffecef;
    --icon-rose-border: #ffcdd8;
    --icon-rose-fg: #c6496a;
    --icon-purple-bg: #f4eafe;
    --icon-purple-border: #e3cfff;
    --icon-purple-fg: #8550d6;
    --icon-slate-bg: #eef2f7;
    --icon-slate-border: #d8e0ea;
    --icon-slate-fg: #4f6783;
    --icon-gold-bg: #fff7dc;
    --icon-gold-border: #efd486;
    --icon-gold-fg: #9b6b10;
}

body.internal-module-shell .hris-clean-shell :where(.hris-module-nav-icon, .sidebar-icon),
body.internal-module-shell .hris-clean-shell .recruitment-workspace-icon,
body.internal-module-shell .hris-clean-shell .biometric-workspace-icon,
body.internal-module-shell .hris-clean-shell .biometric-workspace-stat-icon,
body.internal-module-shell .hris-clean-shell .biometric-meta-icon,
body.internal-module-shell .hris-clean-shell .biometric-module-mark {
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.5) !important;
    transition: background-color .18s ease, border-color .18s ease, transform .18s ease !important;
}

body.internal-module-shell .hris-clean-shell :where(.hris-module-nav-icon, .sidebar-icon) img,
body.internal-module-shell .hris-clean-shell .recruitment-workspace-icon img,
body.internal-module-shell .hris-clean-shell .biometric-workspace-icon img,
body.internal-module-shell .hris-clean-shell .biometric-workspace-stat-icon img,
body.internal-module-shell .hris-clean-shell .biometric-meta-icon img,
body.internal-module-shell .hris-clean-shell .biometric-module-mark img {
    opacity: 1 !important;
}

/* Sidebar module icon tones */
body.internal-module-shell .hris-clean-shell .icon-tone-dashboard { background: var(--icon-blue-bg) !important; border-color: var(--icon-blue-border) !important; }
body.internal-module-shell .hris-clean-shell .icon-tone-employee { background: var(--icon-indigo-bg) !important; border-color: var(--icon-indigo-border) !important; }
body.internal-module-shell .hris-clean-shell .icon-tone-leave { background: var(--icon-emerald-bg) !important; border-color: var(--icon-emerald-border) !important; }
body.internal-module-shell .hris-clean-shell .icon-tone-approvals { background: var(--icon-amber-bg) !important; border-color: var(--icon-amber-border) !important; }
body.internal-module-shell .hris-clean-shell .icon-tone-payroll { background: var(--icon-teal-bg) !important; border-color: var(--icon-teal-border) !important; }
body.internal-module-shell .hris-clean-shell .icon-tone-recruitment { background: var(--icon-blue-bg) !important; border-color: var(--icon-blue-border) !important; }
body.internal-module-shell .hris-clean-shell .icon-tone-onboarding { background: var(--icon-emerald-bg) !important; border-color: var(--icon-emerald-border) !important; }
body.internal-module-shell .hris-clean-shell .icon-tone-offboarding { background: var(--icon-rose-bg) !important; border-color: var(--icon-rose-border) !important; }
body.internal-module-shell .hris-clean-shell .icon-tone-kpi { background: var(--icon-gold-bg) !important; border-color: var(--icon-gold-border) !important; }
body.internal-module-shell .hris-clean-shell .icon-tone-helpdesk { background: var(--icon-sky-bg, #eaf4ff) !important; border-color: var(--icon-blue-border) !important; }
body.internal-module-shell .hris-clean-shell .icon-tone-report { background: var(--icon-purple-bg) !important; border-color: var(--icon-purple-border) !important; }
body.internal-module-shell .hris-clean-shell .icon-tone-biometric { background: var(--icon-orange-bg) !important; border-color: var(--icon-orange-border) !important; }
body.internal-module-shell .hris-clean-shell .icon-tone-announcement { background: var(--icon-amber-bg) !important; border-color: var(--icon-amber-border) !important; }
body.internal-module-shell .hris-clean-shell .icon-tone-documents { background: var(--icon-slate-bg) !important; border-color: var(--icon-slate-border) !important; }

/* Recruitment workspace icon tones by accent */
body.internal-module-shell .hris-clean-shell .recruitment-workspace-card.accent-sky .recruitment-workspace-icon,
body.internal-module-shell .hris-clean-shell .biometric-workspace-card.accent-sky :is(.biometric-module-mark, .recruitment-workspace-icon) { background: var(--icon-blue-bg) !important; border-color: var(--icon-blue-border) !important; }
body.internal-module-shell .hris-clean-shell .recruitment-workspace-card.accent-indigo .recruitment-workspace-icon,
body.internal-module-shell .hris-clean-shell .biometric-workspace-card.accent-indigo :is(.biometric-module-mark, .recruitment-workspace-icon) { background: var(--icon-indigo-bg) !important; border-color: var(--icon-indigo-border) !important; }
body.internal-module-shell .hris-clean-shell .recruitment-workspace-card.accent-emerald .recruitment-workspace-icon,
body.internal-module-shell .hris-clean-shell .biometric-workspace-card.accent-emerald :is(.biometric-module-mark, .recruitment-workspace-icon) { background: var(--icon-emerald-bg) !important; border-color: var(--icon-emerald-border) !important; }
body.internal-module-shell .hris-clean-shell .recruitment-workspace-card.accent-teal .recruitment-workspace-icon,
body.internal-module-shell .hris-clean-shell .biometric-workspace-card.accent-teal :is(.biometric-module-mark, .recruitment-workspace-icon) { background: var(--icon-teal-bg) !important; border-color: var(--icon-teal-border) !important; }
body.internal-module-shell .hris-clean-shell .recruitment-workspace-card.accent-amber .recruitment-workspace-icon,
body.internal-module-shell .hris-clean-shell .biometric-workspace-card.accent-amber :is(.biometric-module-mark, .recruitment-workspace-icon) { background: var(--icon-amber-bg) !important; border-color: var(--icon-amber-border) !important; }
body.internal-module-shell .hris-clean-shell .recruitment-workspace-card.accent-blue .recruitment-workspace-icon,
body.internal-module-shell .hris-clean-shell .biometric-workspace-card.accent-blue :is(.biometric-module-mark, .recruitment-workspace-icon) { background: var(--icon-purple-bg) !important; border-color: var(--icon-purple-border) !important; }

/* Attendance icon tones */
body.internal-module-shell .hris-clean-shell .biometric-workspace-icon.accent-blue,
body.internal-module-shell .hris-clean-shell .biometric-workspace-stat-icon.accent-blue,
body.internal-module-shell .hris-clean-shell .biometric-meta-icon.accent-blue { background: var(--icon-blue-bg) !important; border-color: var(--icon-blue-border) !important; }
body.internal-module-shell .hris-clean-shell .biometric-workspace-stat-icon.accent-emerald,
body.internal-module-shell .hris-clean-shell .biometric-meta-icon.accent-emerald { background: var(--icon-emerald-bg) !important; border-color: var(--icon-emerald-border) !important; }
body.internal-module-shell .hris-clean-shell .biometric-workspace-stat-icon.accent-sky,
body.internal-module-shell .hris-clean-shell .biometric-meta-icon.accent-sky { background: var(--icon-amber-bg) !important; border-color: var(--icon-amber-border) !important; }
body.internal-module-shell .hris-clean-shell .biometric-workspace-stat-icon.accent-amber,
body.internal-module-shell .hris-clean-shell .biometric-meta-icon.accent-amber { background: var(--icon-orange-bg) !important; border-color: var(--icon-orange-border) !important; }
body.internal-module-shell .hris-clean-shell .biometric-workspace-stat-icon.accent-indigo,
body.internal-module-shell .hris-clean-shell .biometric-meta-icon.accent-indigo { background: var(--icon-purple-bg) !important; border-color: var(--icon-purple-border) !important; }

/* Make active/current module icon a bit richer instead of plain white */
body.internal-module-shell .hris-clean-shell :where(.hris-module-card.active, .hris-module-card.is-active, .sidebar-link.active, .sidebar-link.is-active) :where(.hris-module-nav-icon, .sidebar-icon) {
    box-shadow: 0 4px 12px rgba(11, 31, 58, 0.12), inset 0 1px 0 rgba(255,255,255,0.6) !important;
    transform: translateY(-1px) !important;
}

/* V16 POS Header Homebase Select Fix */
html[data-theme] body .pos-terminal-clean.pos-ipos-refactor .pos-ipos-topbar .pos-ipos-toolbar-switcher,
body .pos-terminal-clean.pos-ipos-refactor .pos-ipos-topbar .pos-ipos-toolbar-switcher {
    min-width: 190px !important;
    background: rgba(255, 255, 255, 0.09) !important;
    border-color: rgba(255, 255, 255, 0.16) !important;
}
html[data-theme] body .pos-terminal-clean.pos-ipos-refactor .pos-ipos-topbar .pos-ipos-toolbar-switcher select,
body .pos-terminal-clean.pos-ipos-refactor .pos-ipos-topbar .pos-ipos-toolbar-switcher select {
    width: 100% !important;
    min-height: 30px !important;
    height: 30px !important;
    padding: 2px 30px 2px 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    box-shadow: none !important;
    outline: none !important;
    font-size: 0.92rem !important;
    font-weight: 800 !important;
    cursor: pointer !important;
}
html[data-theme] body .pos-terminal-clean.pos-ipos-refactor .pos-ipos-topbar .pos-ipos-toolbar-switcher select:focus,
body .pos-terminal-clean.pos-ipos-refactor .pos-ipos-topbar .pos-ipos-toolbar-switcher select:focus {
    background: transparent !important;
    background-color: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}
html[data-theme] body .pos-terminal-clean.pos-ipos-refactor .pos-ipos-topbar .pos-ipos-toolbar-switcher select option,
body .pos-terminal-clean.pos-ipos-refactor .pos-ipos-topbar .pos-ipos-toolbar-switcher select option {
    color: #0b1f3a !important;
    background: #ffffff !important;
    -webkit-text-fill-color: #0b1f3a !important;
}


/* ======================================================================
   V17 Login Priority Fix - Premium Clean Mobile/Desktop
   Fokus: halaman login lebih premium, tidak terasa penuh, dan form lebih nyaman.
   ====================================================================== */
html[data-theme] body.login-page,
body.login-page {
    min-height: 100dvh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    background:
        radial-gradient(circle at top left, rgba(201, 161, 58, 0.12), transparent 34%),
        linear-gradient(135deg, #eef3f8 0%, #f7f9fc 42%, #ffffff 100%) !important;
    color: #071a33 !important;
}

html[data-theme] body.login-page .login-shell,
body.login-page .login-shell {
    width: min(100%, 1440px) !important;
    min-height: 100dvh !important;
    margin: 0 auto !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1.1fr) minmax(420px, 0.72fr) !important;
    align-items: stretch !important;
    background: transparent !important;
    overflow: visible !important;
}

html[data-theme] body.login-page .login-hero-panel,
body.login-page .login-hero-panel {
    min-height: 100dvh !important;
    padding: clamp(18px, 2.5vw, 34px) !important;
    background: #071a33 !important;
    overflow: hidden !important;
    isolation: isolate !important;
}

html[data-theme] body.login-page .login-hero-panel::before,
body.login-page .login-hero-panel::before {
    content: "ERP Operations";
    position: absolute !important;
    left: clamp(34px, 5vw, 72px) !important;
    bottom: clamp(30px, 5vh, 64px) !important;
    z-index: 3 !important;
    max-width: min(520px, calc(100% - 64px)) !important;
    color: rgba(255,255,255,0.92) !important;
    font-family: var(--font-sans, 'Plus Jakarta Sans', Inter, sans-serif) !important;
    font-size: clamp(2.6rem, 5vw, 5.4rem) !important;
    font-weight: 850 !important;
    line-height: 0.92 !important;
    letter-spacing: -0.075em !important;
    text-shadow: 0 18px 48px rgba(0,0,0,0.42) !important;
    pointer-events: none !important;
}

html[data-theme] body.login-page .login-hero-panel::after,
body.login-page .login-hero-panel::after {
    content: "CV.BJAS • Mataram Sports & Mega Sports";
    position: absolute !important;
    left: clamp(34px, 5vw, 72px) !important;
    bottom: clamp(18px, 3.1vh, 38px) !important;
    z-index: 3 !important;
    color: rgba(255,255,255,0.72) !important;
    font-size: 0.78rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    pointer-events: none !important;
}

html[data-theme] body.login-page .login-hero-media,
body.login-page .login-hero-media {
    position: absolute !important;
    inset: clamp(12px, 1.6vw, 24px) !important;
    width: auto !important;
    height: auto !important;
    border-radius: clamp(20px, 2.2vw, 34px) !important;
    overflow: hidden !important;
    box-shadow: 0 30px 80px rgba(5, 12, 24, 0.36) !important;
}

html[data-theme] body.login-page .login-hero-media img,
body.login-page .login-hero-media img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    filter: saturate(1.03) contrast(1.02) brightness(0.86) !important;
    transform: scale(1.015) !important;
}

html[data-theme] body.login-page .login-hero-scrim,
body.login-page .login-hero-scrim {
    inset: clamp(12px, 1.6vw, 24px) !important;
    border-radius: clamp(20px, 2.2vw, 34px) !important;
    background:
        linear-gradient(180deg, rgba(7, 26, 51, 0.12), rgba(7, 26, 51, 0.72)),
        linear-gradient(90deg, rgba(7, 26, 51, 0.34), rgba(7, 26, 51, 0.05)) !important;
}

html[data-theme] body.login-page .login-form-panel,
body.login-page .login-form-panel {
    min-height: 100dvh !important;
    justify-content: center !important;
    padding: clamp(26px, 5vh, 54px) clamp(28px, 3vw, 48px) !important;
    background: rgba(255, 255, 255, 0.84) !important;
    border-left: 1px solid rgba(216, 226, 239, 0.92) !important;
    box-shadow: -24px 0 70px rgba(15, 23, 42, 0.08) !important;
    backdrop-filter: blur(16px) !important;
}

html[data-theme] body.login-page .login-panel-brand,
body.login-page .login-panel-brand {
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 22px !important;
}

html[data-theme] body.login-page .login-panel-brand-mark,
body.login-page .login-panel-brand-mark {
    width: 58px !important;
    height: 58px !important;
    flex-basis: 58px !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    border: 1px solid rgba(216, 226, 239, 0.95) !important;
    box-shadow: 0 14px 32px rgba(11, 31, 58, 0.12) !important;
}

html[data-theme] body.login-page .login-panel-brand-mark img,
body.login-page .login-panel-brand-mark img {
    padding: 11px !important;
}

html[data-theme] body.login-page .login-panel-brand-copy span,
body.login-page .login-panel-brand-copy span {
    color: #7a8799 !important;
    font-size: 0.76rem !important;
    font-weight: 850 !important;
    letter-spacing: 0.19em !important;
}

html[data-theme] body.login-page .login-panel-brand-copy strong,
body.login-page .login-panel-brand-copy strong {
    color: #071a33 !important;
    font-size: 1.08rem !important;
    font-weight: 850 !important;
}

html[data-theme] body.login-page .login-panel-copy,
body.login-page .login-panel-copy {
    margin-bottom: 18px !important;
}

html[data-theme] body.login-page .login-panel-copy h1,
body.login-page .login-panel-copy h1 {
    margin-bottom: 8px !important;
    color: #071a33 !important;
    font-size: clamp(2rem, 3.2vw, 3rem) !important;
    line-height: 0.98 !important;
    letter-spacing: -0.065em !important;
    font-weight: 900 !important;
}

html[data-theme] body.login-page .login-form-panel .subcopy,
body.login-page .login-form-panel .subcopy {
    max-width: 420px !important;
    color: #6c788b !important;
    font-size: 0.96rem !important;
    line-height: 1.65 !important;
}

html[data-theme] body.login-page .login-form-grid,
body.login-page .login-form-grid {
    gap: 13px !important;
    width: 100% !important;
    max-width: 430px !important;
}

html[data-theme] body.login-page .login-form-grid label,
body.login-page .login-form-grid label {
    margin-bottom: 7px !important;
    display: inline-block !important;
    color: #071a33 !important;
    font-size: 0.73rem !important;
    font-weight: 850 !important;
    letter-spacing: 0.02em !important;
}

html[data-theme] body.login-page .login-form-grid input,
body.login-page .login-form-grid input {
    min-height: 48px !important;
    height: 48px !important;
    padding: 0 14px !important;
    border-radius: 10px !important;
    border: 1px solid #d7e0ec !important;
    background: #f5f8fc !important;
    color: #071a33 !important;
    font-size: 0.96rem !important;
    font-weight: 650 !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.92) !important;
}

html[data-theme] body.login-page .login-form-grid input:focus,
body.login-page .login-form-grid input:focus {
    border-color: rgba(201, 161, 58, 0.72) !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 4px rgba(201, 161, 58, 0.13) !important;
    outline: none !important;
}

html[data-theme] body.login-page .password-box .toggle,
body.login-page .password-box .toggle {
    right: 10px !important;
    bottom: 8px !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 10px !important;
    border-radius: 8px !important;
    background: rgba(201, 161, 58, 0.12) !important;
    color: #9b6b10 !important;
    font-size: 0.78rem !important;
    font-weight: 850 !important;
}

html[data-theme] body.login-page .password-box input,
body.login-page .password-box input {
    padding-right: 98px !important;
}

html[data-theme] body.login-page .login-form-grid button[type="submit"],
body.login-page .login-form-grid button[type="submit"] {
    min-height: 48px !important;
    margin-top: 2px !important;
    border-radius: 10px !important;
    border: 1px solid #0b1f3a !important;
    background: #0b1f3a !important;
    color: #ffffff !important;
    font-size: 0.92rem !important;
    font-weight: 850 !important;
    letter-spacing: 0.01em !important;
    box-shadow: 0 14px 30px rgba(11, 31, 58, 0.18) !important;
}

html[data-theme] body.login-page .login-form-grid button[type="submit"]:hover,
body.login-page .login-form-grid button[type="submit"]:hover {
    background: #122b4d !important;
    transform: translateY(-1px) !important;
}

html[data-theme] body.login-page .login-forgot-link,
body.login-page .login-forgot-link {
    margin: 12px 0 0 !important;
    font-size: 0.9rem !important;
}

html[data-theme] body.login-page .login-forgot-link a,
body.login-page .login-forgot-link a {
    color: #9b6b10 !important;
    font-weight: 850 !important;
    text-decoration-thickness: 1px !important;
    text-underline-offset: 3px !important;
}

html[data-theme] body.login-page .login-footnote,
body.login-page .login-footnote {
    max-width: 410px !important;
    margin-top: 12px !important;
    color: #6c788b !important;
    font-size: 0.88rem !important;
    line-height: 1.6 !important;
}

html[data-theme] body.login-page .flash-stack,
body.login-page .flash-stack {
    max-width: 430px !important;
    margin-bottom: 14px !important;
}

@media (max-width: 980px) {
    html[data-theme] body.login-page .login-shell,
    body.login-page .login-shell {
        min-height: 100dvh !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        align-content: start !important;
        padding: 12px !important;
        gap: 0 !important;
        background: #eef3f8 !important;
    }

    html[data-theme] body.login-page .login-hero-panel,
    body.login-page .login-hero-panel {
        min-height: 0 !important;
        height: clamp(210px, 44vw, 340px) !important;
        padding: 0 !important;
        border-radius: 22px 22px 0 0 !important;
        background: #071a33 !important;
    }

    html[data-theme] body.login-page .login-hero-media,
    body.login-page .login-hero-media,
    html[data-theme] body.login-page .login-hero-scrim,
    body.login-page .login-hero-scrim {
        inset: 0 !important;
        border-radius: 22px 22px 0 0 !important;
    }

    html[data-theme] body.login-page .login-hero-panel::before,
    html[data-theme] body.login-page .login-hero-panel::after,
    body.login-page .login-hero-panel::before,
    body.login-page .login-hero-panel::after {
        display: none !important;
        content: none !important;
    }

    html[data-theme] body.login-page .login-form-panel,
    body.login-page .login-form-panel {
        min-height: auto !important;
        padding: 24px clamp(18px, 5vw, 30px) 28px !important;
        border-left: 0 !important;
        border-radius: 0 0 22px 22px !important;
        background: #ffffff !important;
        box-shadow: 0 22px 60px rgba(11, 31, 58, 0.12) !important;
        backdrop-filter: none !important;
    }

    html[data-theme] body.login-page .login-panel-brand,
    body.login-page .login-panel-brand {
        margin-bottom: 17px !important;
    }

    html[data-theme] body.login-page .login-panel-copy h1,
    body.login-page .login-panel-copy h1 {
        font-size: clamp(1.8rem, 8vw, 2.45rem) !important;
    }

    html[data-theme] body.login-page .login-form-grid,
    body.login-page .login-form-grid {
        max-width: none !important;
    }
}

@media (max-width: 560px) {
    html[data-theme] body.login-page .login-shell,
    body.login-page .login-shell {
        padding: 0 !important;
        background: #07111f !important;
    }

    html[data-theme] body.login-page .login-hero-panel,
    body.login-page .login-hero-panel {
        height: min(41vh, 330px) !important;
        min-height: 214px !important;
        border-radius: 0 !important;
    }

    html[data-theme] body.login-page .login-hero-media,
    body.login-page .login-hero-media,
    html[data-theme] body.login-page .login-hero-scrim,
    body.login-page .login-hero-scrim {
        border-radius: 0 !important;
    }

    html[data-theme] body.login-page .login-hero-media img,
    body.login-page .login-hero-media img {
        object-position: center center !important;
    }

    html[data-theme] body.login-page .login-form-panel,
    body.login-page .login-form-panel {
        margin-top: -10px !important;
        border-radius: 22px 22px 0 0 !important;
        padding: 24px 20px max(30px, env(safe-area-inset-bottom)) !important;
        min-height: calc(100dvh - min(41vh, 330px) + 10px) !important;
        justify-content: start !important;
    }

    html[data-theme] body.login-page .login-panel-brand-mark,
    body.login-page .login-panel-brand-mark {
        width: 52px !important;
        height: 52px !important;
        flex-basis: 52px !important;
        border-radius: 16px !important;
    }

    html[data-theme] body.login-page .login-panel-brand-copy span,
    body.login-page .login-panel-brand-copy span {
        font-size: 0.72rem !important;
    }

    html[data-theme] body.login-page .login-panel-brand-copy strong,
    body.login-page .login-panel-brand-copy strong {
        font-size: 1.03rem !important;
    }

    html[data-theme] body.login-page .login-panel-copy,
    body.login-page .login-panel-copy {
        margin-bottom: 16px !important;
    }

    html[data-theme] body.login-page .login-panel-copy h1,
    body.login-page .login-panel-copy h1 {
        margin-bottom: 8px !important;
        font-size: clamp(1.85rem, 7.5vw, 2.28rem) !important;
        letter-spacing: -0.06em !important;
    }

    html[data-theme] body.login-page .login-form-panel .subcopy,
    body.login-page .login-form-panel .subcopy {
        font-size: 0.92rem !important;
        line-height: 1.55 !important;
    }

    html[data-theme] body.login-page .login-form-grid input,
    html[data-theme] body.login-page .login-form-grid button[type="submit"],
    body.login-page .login-form-grid input,
    body.login-page .login-form-grid button[type="submit"] {
        min-height: 46px !important;
        height: 46px !important;
    }

    html[data-theme] body.login-page .login-footnote,
    body.login-page .login-footnote {
        font-size: 0.86rem !important;
    }
}


/* === BJAS icon rollout: bold SVG assets across all internal pages === */
:root {
    --bjas-icon-size-sm: 24px;
    --bjas-icon-size-md: 30px;
    --bjas-icon-size-lg: 42px;
}

html body :is(.sidebar-icon-image, .sidebar-subtile-icon, .workspace-app-icon-image, .internal-app-icon img, .hris-module-nav-icon img, .recruitment-workspace-icon img, .biometric-module-mark img, .internal-status-icon img, .summary-icon img, .search-icon img) {
    display: block !important;
    object-fit: contain !important;
    opacity: 1 !important;
    filter: none !important;
}

html body :is(.sidebar-icon-image, .sidebar-subtile-icon) {
    width: var(--bjas-icon-size-md) !important;
    height: var(--bjas-icon-size-md) !important;
    flex: 0 0 var(--bjas-icon-size-md) !important;
}

html body :is(.hris-module-nav-icon, span.hris-module-nav-icon, .sidebar-icon.hris-module-nav-icon) {
    width: var(--bjas-icon-size-md) !important;
    height: var(--bjas-icon-size-md) !important;
    min-width: var(--bjas-icon-size-md) !important;
    flex: 0 0 var(--bjas-icon-size-md) !important;
    display: inline-grid !important;
    place-items: center !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: inherit !important;
    font-size: 0 !important;
    line-height: 0 !important;
    overflow: hidden !important;
    opacity: 1 !important;
    filter: none !important;
}

html body :is(.hris-module-nav-icon img, .sidebar-icon.hris-module-nav-icon img) {
    width: var(--bjas-icon-size-md) !important;
    height: var(--bjas-icon-size-md) !important;
    max-width: none !important;
    max-height: none !important;
}

html body :is(.hris-module-card.active, .hris-module-card:hover) :is(.hris-module-nav-icon, .hris-module-nav-icon img),
html body :is(.sidebar-subtile.active, .sidebar-subtile:hover) :is(.sidebar-subtile-icon),
html body :is(.sidebar-main-trigger.active, .sidebar-main-trigger:hover) :is(.sidebar-icon-image) {
    filter: none !important;
    opacity: 1 !important;
}

html body :is(.workspace-app-icon, .internal-app-icon, .app-icon) {
    width: var(--bjas-icon-size-lg) !important;
    height: var(--bjas-icon-size-lg) !important;
    min-width: var(--bjas-icon-size-lg) !important;
    display: inline-grid !important;
    place-items: center !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    font-size: 0 !important;
    line-height: 0 !important;
    overflow: hidden !important;
}

html body :is(.workspace-app-icon-image, .internal-app-icon img, .app-icon img) {
    width: var(--bjas-icon-size-lg) !important;
    height: var(--bjas-icon-size-lg) !important;
}

html body :is(.internal-status-icon, .summary-icon, .search-icon) {
    display: inline-grid !important;
    place-items: center !important;
    font-size: 0 !important;
    line-height: 0 !important;
    color: transparent !important;
}

html body :is(.internal-status-icon img, .summary-icon img) {
    width: var(--bjas-icon-size-lg) !important;
    height: var(--bjas-icon-size-lg) !important;
}

html body .search-icon img {
    width: var(--bjas-icon-size-sm) !important;
    height: var(--bjas-icon-size-sm) !important;
}

html body :is(.recruitment-workspace-icon, .biometric-module-mark) {
    display: inline-grid !important;
    place-items: center !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
}

html body :is(.recruitment-workspace-icon img, .biometric-module-mark img) {
    width: var(--bjas-icon-size-lg) !important;
    height: var(--bjas-icon-size-lg) !important;
}

html body .hris-clean-shell .biometric-section-title::before {
    content: "" !important;
    width: 42px !important;
    height: 42px !important;
    border-radius: 14px !important;
    background-color: transparent !important;
    background-image: url("/static/icons/workspace/hris-attendance-module.svg") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 42px 42px !important;
    box-shadow: none !important;
}

html body :is(.career-candidate-nav-icon, .ops-picker-button, .top-icon-btn, .drive-top-icon, .nav-icon) svg {
    width: 22px !important;
    height: 22px !important;
    fill: none !important;
    stroke: #0b1f3a !important;
    stroke-width: 2.8px !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

html body :is(.career-candidate-nav-icon, .ops-picker-button, .top-icon-btn, .drive-top-icon, .nav-icon) svg :is(path, circle, rect, line, polyline) {
    stroke: #0b1f3a !important;
    stroke-width: 2.8px !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

html body :is(.career-candidate-sidebar-nav a.is-active, .career-candidate-sidebar-nav a:hover) .career-candidate-nav-icon svg,
html body :is(.career-candidate-sidebar-nav a.is-active, .career-candidate-sidebar-nav a:hover) .career-candidate-nav-icon svg :is(path, circle, rect, line, polyline) {
    stroke: #d6a935 !important;
}

@media (max-width: 720px) {
    :root {
        --bjas-icon-size-sm: 22px;
        --bjas-icon-size-md: 28px;
        --bjas-icon-size-lg: 38px;
    }
}

/* Attendance Portal Compact Premium Refresh - 2026-05-22
   Fokus: form absen foto/geotag lebih clean, compact, dan aman di mobile. */
body .attendance-portal-main .attendance-portal-shell {
    width: min(100%, 1120px) !important;
    margin-inline: auto !important;
    gap: 12px !important;
}

body .attendance-portal-main .attendance-capture-card,
body .attendance-portal-main .attendance-overview-card {
    border: 1px solid var(--border-color, #dbe3ee) !important;
    border-top: 2px solid rgba(214, 169, 53, 0.72) !important;
    background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%) !important;
    box-shadow: 0 10px 26px rgba(11, 31, 58, 0.06) !important;
}

body.attendance-page-shell .attendance-portal-main .attendance-break-countdown-card {
    display: grid !important;
    align-content: center !important;
    gap: 5px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 64px !important;
    border-color: rgba(212, 167, 62, 0.45) !important;
    background: linear-gradient(180deg, rgba(255, 248, 225, 0.94), rgba(255, 255, 255, 0.98)) !important;
}

body.attendance-page-shell .attendance-portal-main .attendance-break-countdown-card .shell-break-chip-value {
    color: var(--primary-color, #0b1f3a) !important;
    font-family: var(--mono, monospace) !important;
    font-size: clamp(1.12rem, 1.7vw, 1.42rem) !important;
    line-height: 1.1 !important;
}

body.attendance-page-shell .attendance-portal-main .attendance-break-countdown-card .shell-break-chip-label {
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
}

body.attendance-page-shell .attendance-portal-main .attendance-break-countdown-card .shell-break-chip-hint {
    color: var(--muted-text, #64748b) !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
}

body.attendance-page-shell .attendance-portal-main .attendance-break-countdown-card.is-over-limit {
    border-color: rgba(220, 38, 38, 0.38) !important;
    background: linear-gradient(180deg, rgba(254, 242, 242, 0.96), rgba(255, 255, 255, 0.98)) !important;
}

body.attendance-page-shell .attendance-portal-main .attendance-break-countdown-card.is-over-limit .shell-break-chip-value,
body.attendance-page-shell .attendance-portal-main .attendance-break-countdown-card.is-over-limit .shell-break-chip-hint {
    color: #b42318 !important;
}

body .attendance-portal-main .attendance-capture-card {
    padding: 14px !important;
    overflow: visible !important;
}

body .attendance-portal-main .attendance-capture-card > .section-title {
    margin: 0 0 12px !important;
    padding: 10px 12px !important;
    border: 1px solid rgba(219, 227, 238, 0.9) !important;
    border-radius: 14px !important;
    background: #f8fafc !important;
}

body .attendance-portal-main .attendance-capture-card > .section-title h2 {
    margin: 0 !important;
    color: var(--primary-color, #0b1f3a) !important;
    font-size: 0.98rem !important;
    letter-spacing: -0.02em !important;
}

body .attendance-portal-main .attendance-capture-card > .section-title p {
    display: none !important;
}

body .attendance-portal-main .attendance-capture-grid {
    grid-template-columns: minmax(230px, 320px) minmax(0, 1fr) !important;
    gap: 14px !important;
    align-items: start !important;
}

body .attendance-portal-main .attendance-camera-panel {
    display: grid !important;
    gap: 8px !important;
    min-width: 0 !important;
}

body .attendance-portal-main .attendance-camera-frame {
    min-height: 220px !important;
    border-radius: 16px !important;
    border-color: rgba(11, 31, 58, 0.18) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

body .attendance-portal-main .attendance-camera-frame[data-camera-orientation="landscape"] {
    min-height: 190px !important;
}

body .attendance-portal-main .attendance-camera-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin-top: 0 !important;
}

body .attendance-portal-main .attendance-camera-actions > * {
    width: 100% !important;
    min-height: 34px !important;
    justify-content: center !important;
    padding: 7px 10px !important;
    border-radius: 999px !important;
    font-size: 0.78rem !important;
}

body .attendance-portal-main .attendance-form-panel {
    padding: 12px !important;
    gap: 10px !important;
    border: 1px solid rgba(219, 227, 238, 0.92) !important;
    border-radius: 16px !important;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
    overflow: visible !important;
}

body .attendance-portal-main .attendance-form-quick-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
}

body .attendance-portal-main .attendance-form-quick-grid .meta-card {
    min-height: 54px !important;
    padding: 9px 12px !important;
    border: 1px solid rgba(219, 227, 238, 0.95) !important;
    border-top: 0 !important;
    border-left: 3px solid var(--accent-color, #d6a935) !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    overflow: hidden !important;
}

body .attendance-portal-main .attendance-form-quick-grid .meta-card span {
    margin: 0 0 4px !important;
    color: var(--muted-text, #64748b) !important;
    font-size: 0.62rem !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
}

body .attendance-portal-main .attendance-form-quick-grid .meta-card strong {
    display: block !important;
    max-width: 100% !important;
    color: var(--primary-color, #0b1f3a) !important;
    font-size: clamp(0.9rem, 1.1vw, 1.08rem) !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

body .attendance-portal-main .attendance-form-panel .form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px 10px !important;
}

body .attendance-portal-main .attendance-form-panel .form-grid > div {
    display: grid !important;
    gap: 4px !important;
    min-width: 0 !important;
}

body .attendance-portal-main .attendance-form-panel .form-grid > .span-full {
    grid-column: 1 / -1 !important;
}

body .attendance-portal-main .attendance-form-panel label {
    margin: 0 !important;
    color: var(--primary-color, #0b1f3a) !important;
    font-size: 0.68rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.01em !important;
}

body .attendance-portal-main .attendance-form-panel :where(input, select, textarea) {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 36px !important;
    padding: 7px 10px !important;
    border: 1px solid var(--border-color, #dbe3ee) !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    color: var(--text-color, #0f172a) !important;
    font-size: 0.82rem !important;
    line-height: 1.25 !important;
    box-shadow: none !important;
}

body .attendance-portal-main .attendance-form-panel textarea {
    min-height: 76px !important;
}

body .attendance-portal-main .attendance-form-panel :where(input[readonly], select:disabled, textarea:disabled) {
    background: #f8fafc !important;
    color: #334155 !important;
}

body .attendance-portal-main .attendance-form-panel .helper-text {
    margin: 0 !important;
    color: var(--muted-text, #64748b) !important;
    font-size: 0.67rem !important;
    line-height: 1.32 !important;
}

body .attendance-portal-main .attendance-form-panel a.helper-text {
    color: var(--secondary-color, #1f3b5c) !important;
    font-weight: 700 !important;
    text-decoration-thickness: 1px !important;
    text-underline-offset: 2px !important;
}

body .attendance-portal-main .attendance-form-panel .split-actions {
    gap: 8px !important;
}

body .attendance-portal-main .attendance-form-panel .ghost-button,
body .attendance-portal-main .attendance-submit-row button {
    min-height: 36px !important;
    padding: 8px 12px !important;
    border-radius: 10px !important;
    font-size: 0.78rem !important;
    font-weight: 800 !important;
}

body .attendance-portal-main .attendance-submit-row {
    margin-top: 2px !important;
    justify-content: flex-start !important;
}

body .attendance-portal-main .attendance-submit-row button {
    width: auto !important;
    min-width: 132px !important;
    background: var(--primary-color, #0b1f3a) !important;
    color: #ffffff !important;
}

body .attendance-portal-main .attendance-optional-panel {
    border: 1px solid rgba(219, 227, 238, 0.95) !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    overflow: hidden !important;
}

body .attendance-portal-main .attendance-optional-panel summary {
    min-height: 38px !important;
    padding: 9px 12px !important;
    color: var(--primary-color, #0b1f3a) !important;
    font-size: 0.78rem !important;
    font-weight: 800 !important;
}

body .attendance-portal-main .attendance-optional-panel-body {
    gap: 6px !important;
    padding: 0 12px 12px !important;
}

@media (max-width: 1080px) {
    body .attendance-portal-main .attendance-capture-grid {
        grid-template-columns: 1fr !important;
    }

    body .attendance-portal-main .attendance-camera-frame {
        min-height: 200px !important;
        max-height: 340px !important;
    }
}

@media (max-width: 640px) {
    body.attendance-page-shell .attendance-portal-main {
        padding-top: 8px !important;
    }

    body.attendance-page-shell .attendance-portal-main .attendance-portal-shell {
        gap: 9px !important;
    }

    body.attendance-page-shell .attendance-portal-main .attendance-overview-card,
    body.attendance-page-shell .attendance-portal-main .attendance-capture-card {
        padding: 10px !important;
        border-radius: 14px !important;
    }

    body.attendance-page-shell .attendance-portal-main .attendance-overview-head {
        gap: 7px !important;
    }

    body.attendance-page-shell .attendance-portal-main .attendance-overview-head p,
    body.attendance-page-shell .attendance-portal-main .attendance-overview-card .helper-text {
        display: block !important;
        font-size: 0.72rem !important;
        line-height: 1.35 !important;
    }

    body.attendance-page-shell .attendance-portal-main .attendance-overview-head h2 {
        font-size: 0.96rem !important;
        line-height: 1.08 !important;
    }

    body.attendance-page-shell .attendance-portal-main .attendance-overview-kicker {
        margin-bottom: 4px !important;
        font-size: 0.6rem !important;
    }

    body.attendance-page-shell .attendance-portal-main .attendance-overview-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 7px !important;
    }

    body.attendance-page-shell .attendance-portal-main .attendance-overview-grid .meta-card {
        min-height: 48px !important;
        padding: 8px !important;
        border-radius: 11px !important;
    }

    body.attendance-page-shell .attendance-portal-main .attendance-overview-grid .meta-card:nth-child(n+3) {
        display: grid !important;
    }

    body.attendance-page-shell .attendance-portal-main .attendance-overview-grid .attendance-break-countdown-card {
        grid-column: 1 / -1 !important;
        width: 100% !important;
    }

    body.attendance-page-shell .attendance-portal-main .attendance-capture-card > .section-title {
        display: block !important;
        padding: 8px 10px !important;
    }

    body.attendance-page-shell .attendance-portal-main .attendance-capture-card > .section-title p {
        display: none !important;
    }

    body.attendance-page-shell .attendance-portal-main .attendance-capture-grid {
        gap: 10px !important;
    }

    body.attendance-page-shell .attendance-portal-main .attendance-form-panel {
        order: 1 !important;
        padding: 10px !important;
        gap: 8px !important;
        border-radius: 14px !important;
    }

    body.attendance-page-shell .attendance-portal-main .attendance-camera-panel {
        order: 2 !important;
    }

    body.attendance-page-shell .attendance-portal-main .attendance-form-quick-grid {
        grid-template-columns: 1fr !important;
        gap: 7px !important;
    }

    body.attendance-page-shell .attendance-portal-main .attendance-form-quick-grid .meta-card {
        min-height: 46px !important;
        padding: 8px 9px !important;
        border-radius: 11px !important;
    }

    body.attendance-page-shell .attendance-portal-main .attendance-form-quick-grid .meta-card span {
        font-size: 0.56rem !important;
        letter-spacing: 0.12em !important;
    }

    body.attendance-page-shell .attendance-portal-main .attendance-form-quick-grid .meta-card strong,
    body.attendance-page-shell .attendance-portal-main .attendance-overview-grid .meta-card strong {
        font-size: 0.84rem !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        line-height: 1.25 !important;
        word-break: break-word !important;
    }

    body.attendance-page-shell .attendance-portal-main .attendance-form-panel .form-grid {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    body.attendance-page-shell .attendance-portal-main .attendance-form-panel .form-grid > .span-full {
        grid-column: 1 / -1 !important;
    }

    body.attendance-page-shell .attendance-portal-main .attendance-form-panel label {
        font-size: 0.63rem !important;
    }

    body.attendance-page-shell .attendance-portal-main .attendance-form-panel :where(input, select, textarea) {
        min-height: 34px !important;
        padding: 7px 9px !important;
        border-radius: 9px !important;
        font-size: 0.78rem !important;
    }

    body.attendance-page-shell .attendance-portal-main .attendance-form-panel .form-grid .helper-text:not([data-location-helper]) {
        display: none !important;
    }

    body.attendance-page-shell .attendance-portal-main .attendance-form-panel [data-location-helper] {
        font-size: 0.63rem !important;
        line-height: 1.25 !important;
    }

    body.attendance-page-shell .attendance-portal-main .attendance-form-panel a.helper-text {
        display: inline-block !important;
        font-size: 0.63rem !important;
    }

    body.attendance-page-shell .attendance-portal-main .attendance-form-panel .ghost-button,
    body.attendance-page-shell .attendance-portal-main .attendance-submit-row button {
        min-height: 34px !important;
        padding: 7px 10px !important;
        border-radius: 9px !important;
        font-size: 0.74rem !important;
    }

    body.attendance-page-shell .attendance-portal-main .attendance-submit-row,
    body.attendance-page-shell .attendance-portal-main .attendance-submit-row button {
        width: 100% !important;
    }

    body.attendance-page-shell .attendance-portal-main .attendance-submit-row + .helper-text {
        display: none !important;
    }

    body.attendance-page-shell .attendance-portal-main .attendance-optional-panel summary {
        min-height: 34px !important;
        padding: 8px 10px !important;
        font-size: 0.74rem !important;
    }

    body.attendance-page-shell .attendance-portal-main .attendance-camera-frame {
        min-height: 170px !important;
        max-height: 260px !important;
        border-radius: 14px !important;
    }

    body.attendance-page-shell .attendance-portal-main .attendance-camera-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 7px !important;
    }

    body.attendance-page-shell .attendance-portal-main .attendance-camera-panel > .helper-text {
        font-size: 0.63rem !important;
        line-height: 1.25 !important;
    }
}

@media (max-width: 520px) {
    body.attendance-page-shell .attendance-portal-main .attendance-overview-grid {
        grid-template-columns: 1fr !important;
    }
}


/* === Icon color fix: keep SVG assets colorful, not flattened to black/navy === */
html[data-theme] body.internal-portal-shell :is(.workspace-app-icon-image, .internal-app-icon img, .app-icon img, .internal-status-icon img, .summary-icon img, .search-icon img),
html body.internal-portal-shell :is(.workspace-app-icon-image, .internal-app-icon img, .app-icon img, .internal-status-icon img, .summary-icon img, .search-icon img),
html[data-theme] body.internal-module-shell :is(.sidebar-icon-image, .sidebar-subtile-icon, .workspace-app-icon-image, .hris-module-nav-icon img, .recruitment-workspace-icon img, .biometric-module-mark img, .internal-status-icon img, .summary-icon img),
html body.internal-module-shell :is(.sidebar-icon-image, .sidebar-subtile-icon, .workspace-app-icon-image, .hris-module-nav-icon img, .recruitment-workspace-icon img, .biometric-module-mark img, .internal-status-icon img, .summary-icon img),
html[data-theme] body.internal-clean-page-shell :is(.sidebar-icon-image, .sidebar-subtile-icon, .workspace-app-icon-image, .hris-module-nav-icon img, .internal-status-icon img, .summary-icon img),
html body.internal-clean-page-shell :is(.sidebar-icon-image, .sidebar-subtile-icon, .workspace-app-icon-image, .hris-module-nav-icon img, .internal-status-icon img, .summary-icon img) {
    filter: none !important;
    opacity: 1 !important;
    mix-blend-mode: normal !important;
    color: initial !important;
}

html[data-theme] body.internal-portal-shell .internal-app-icon .workspace-app-icon-image,
html body.internal-portal-shell .internal-app-icon .workspace-app-icon-image,
html[data-theme] body.internal-portal-shell .workspace-app-icon-image,
html body.internal-portal-shell .workspace-app-icon-image {
    width: 40px !important;
    height: 40px !important;
    max-width: 40px !important;
    max-height: 40px !important;
    object-fit: contain !important;
}

html[data-theme] body.internal-portal-shell .internal-status-icon img,
html body.internal-portal-shell .internal-status-icon img,
html[data-theme] body.internal-portal-shell .summary-icon img,
html body.internal-portal-shell .summary-icon img {
    width: 38px !important;
    height: 38px !important;
}

html[data-theme] body.internal-module-shell .hris-module-nav-icon img,
html body.internal-module-shell .hris-module-nav-icon img,
html[data-theme] body.internal-clean-page-shell .hris-module-nav-icon img,
html body.internal-clean-page-shell .hris-module-nav-icon img,
html[data-theme] body.internal-module-shell .sidebar-icon-image,
html body.internal-module-shell .sidebar-icon-image {
    filter: none !important;
    width: 30px !important;
    height: 30px !important;
    object-fit: contain !important;
}

html[data-theme] body.internal-portal-shell .app-icon,
html body.internal-portal-shell .app-icon,
html[data-theme] body.internal-portal-shell .internal-app-icon,
html body.internal-portal-shell .internal-app-icon {
    background: #fff8e6 !important;
    border-color: rgba(214, 169, 53, 0.28) !important;
}

html[data-theme] body.internal-portal-shell .internal-app-card.accent-lavender .internal-app-icon,
html[data-theme] body.internal-portal-shell .internal-app-card.accent-lilac .internal-app-icon,
html body.internal-portal-shell .internal-app-card.accent-lavender .internal-app-icon,
html body.internal-portal-shell .internal-app-card.accent-lilac .internal-app-icon {
    background: #f1f0ff !important;
    border-color: #dedcff !important;
}

html[data-theme] body.internal-portal-shell .internal-app-card.accent-mint .internal-app-icon,
html[data-theme] body.internal-portal-shell .internal-app-card.accent-sage .internal-app-icon,
html body.internal-portal-shell .internal-app-card.accent-mint .internal-app-icon,
html body.internal-portal-shell .internal-app-card.accent-sage .internal-app-icon {
    background: #ecfdf5 !important;
    border-color: #ccebdd !important;
}

html[data-theme] body.internal-portal-shell .internal-app-card.accent-blue .internal-app-icon,
html body.internal-portal-shell .internal-app-card.accent-blue .internal-app-icon {
    background: #eef6ff !important;
    border-color: #cfe3f8 !important;
}

html[data-theme] body.internal-portal-shell a.internal-status-card,
html body.internal-portal-shell a.internal-status-card {
    color: inherit !important;
    text-decoration: none !important;
    cursor: pointer !important;
}

html[data-theme] body.internal-portal-shell a.internal-status-card:hover,
html body.internal-portal-shell a.internal-status-card:hover {
    transform: translateY(-1px) !important;
    border-color: rgba(210, 170, 72, 0.42) !important;
    box-shadow: 0 18px 34px rgba(15, 35, 68, 0.09) !important;
}

html[data-theme] body.internal-portal-shell a.internal-status-card:focus-visible,
html body.internal-portal-shell a.internal-status-card:focus-visible {
    outline: 3px solid rgba(47, 133, 239, 0.28) !important;
    outline-offset: 3px !important;
}

/* === Internal module sidebar color guard: active item stays readable and light === */
html[data-theme] body.internal-module-shell .hris-clean-shell :is(a.hris-module-card.active, a.hris-module-card.is-active, a.sidebar-link.active, a.sidebar-link.is-active),
body.internal-module-shell .hris-clean-shell :is(a.hris-module-card.active, a.hris-module-card.is-active, a.sidebar-link.active, a.sidebar-link.is-active),
html[data-theme] body.internal-clean-page-shell :is(a.hris-module-card.active, a.hris-module-card.is-active, a.sidebar-link.active, a.sidebar-link.is-active),
body.internal-clean-page-shell :is(a.hris-module-card.active, a.hris-module-card.is-active, a.sidebar-link.active, a.sidebar-link.is-active) {
    background: linear-gradient(135deg, #fffaf0 0%, #ffffff 52%, #f4f8fd 100%) !important;
    border-color: rgba(210, 170, 72, 0.46) !important;
    color: #10264d !important;
    box-shadow: inset 4px 0 0 #d6aa36, 0 12px 24px rgba(15, 35, 68, 0.07) !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell :is(a.hris-module-card.active, a.hris-module-card.is-active, a.sidebar-link.active, a.sidebar-link.is-active):hover,
body.internal-module-shell .hris-clean-shell :is(a.hris-module-card.active, a.hris-module-card.is-active, a.sidebar-link.active, a.sidebar-link.is-active):hover,
html[data-theme] body.internal-clean-page-shell :is(a.hris-module-card.active, a.hris-module-card.is-active, a.sidebar-link.active, a.sidebar-link.is-active):hover,
body.internal-clean-page-shell :is(a.hris-module-card.active, a.hris-module-card.is-active, a.sidebar-link.active, a.sidebar-link.is-active):hover {
    background: linear-gradient(135deg, #fff6dc 0%, #ffffff 58%, #edf6ff 100%) !important;
    color: #10264d !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell :is(a.hris-module-card:hover, a.hris-module-card.active, a.hris-module-card.is-active, a.sidebar-link:hover, a.sidebar-link.active, a.sidebar-link.is-active) :is(h2, small, .hris-module-card-copy, .hris-module-card-copy *),
body.internal-module-shell .hris-clean-shell :is(a.hris-module-card:hover, a.hris-module-card.active, a.hris-module-card.is-active, a.sidebar-link:hover, a.sidebar-link.active, a.sidebar-link.is-active) :is(h2, small, .hris-module-card-copy, .hris-module-card-copy *),
html[data-theme] body.internal-clean-page-shell :is(a.hris-module-card:hover, a.hris-module-card.active, a.hris-module-card.is-active, a.sidebar-link:hover, a.sidebar-link.active, a.sidebar-link.is-active) :is(h2, small, .hris-module-card-copy, .hris-module-card-copy *),
body.internal-clean-page-shell :is(a.hris-module-card:hover, a.hris-module-card.active, a.hris-module-card.is-active, a.sidebar-link:hover, a.sidebar-link.active, a.sidebar-link.is-active) :is(h2, small, .hris-module-card-copy, .hris-module-card-copy *) {
    color: #10264d !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell :is(a.hris-module-card.active, a.hris-module-card.is-active, a.sidebar-link.active, a.sidebar-link.is-active) :is(.hris-module-nav-icon, .sidebar-icon),
body.internal-module-shell .hris-clean-shell :is(a.hris-module-card.active, a.hris-module-card.is-active, a.sidebar-link.active, a.sidebar-link.is-active) :is(.hris-module-nav-icon, .sidebar-icon),
html[data-theme] body.internal-clean-page-shell :is(a.hris-module-card.active, a.hris-module-card.is-active, a.sidebar-link.active, a.sidebar-link.is-active) :is(.hris-module-nav-icon, .sidebar-icon),
body.internal-clean-page-shell :is(a.hris-module-card.active, a.hris-module-card.is-active, a.sidebar-link.active, a.sidebar-link.is-active) :is(.hris-module-nav-icon, .sidebar-icon) {
    filter: none !important;
    opacity: 1 !important;
    color: inherit !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell :is(a.hris-module-card.active, a.hris-module-card.is-active, a.sidebar-link.active, a.sidebar-link.is-active) :is(.hris-module-nav-icon img, .sidebar-icon img),
body.internal-module-shell .hris-clean-shell :is(a.hris-module-card.active, a.hris-module-card.is-active, a.sidebar-link.active, a.sidebar-link.is-active) :is(.hris-module-nav-icon img, .sidebar-icon img),
html[data-theme] body.internal-clean-page-shell :is(a.hris-module-card.active, a.hris-module-card.is-active, a.sidebar-link.active, a.sidebar-link.is-active) :is(.hris-module-nav-icon img, .sidebar-icon img),
body.internal-clean-page-shell :is(a.hris-module-card.active, a.hris-module-card.is-active, a.sidebar-link.active, a.sidebar-link.is-active) :is(.hris-module-nav-icon img, .sidebar-icon img) {
    filter: none !important;
    opacity: 1 !important;
    mix-blend-mode: normal !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell :is(a.hris-module-card.active, a.hris-module-card.is-active, a.sidebar-link.active, a.sidebar-link.is-active) > .badge,
body.internal-module-shell .hris-clean-shell :is(a.hris-module-card.active, a.hris-module-card.is-active, a.sidebar-link.active, a.sidebar-link.is-active) > .badge,
html[data-theme] body.internal-clean-page-shell :is(a.hris-module-card.active, a.hris-module-card.is-active, a.sidebar-link.active, a.sidebar-link.is-active) > .badge,
body.internal-clean-page-shell :is(a.hris-module-card.active, a.hris-module-card.is-active, a.sidebar-link.active, a.sidebar-link.is-active) > .badge {
    background: rgba(16, 38, 77, 0.08) !important;
    color: #10264d !important;
}

html[data-theme] body.pos-page-wide .pos-sales-log-return-row,
body.pos-page-wide .pos-sales-log-return-row {
    width: 100% !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
}

html[data-theme] body.pos-page-wide .pos-sales-log-back-link,
body.pos-page-wide .pos-sales-log-back-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

html[data-theme] body.pos-page-wide .pos-sales-log-back-link::before,
body.pos-page-wide .pos-sales-log-back-link::before {
    content: "<" !important;
    font-weight: 900 !important;
    line-height: 1 !important;
}

html[data-theme] body.pos-page-wide .pos-sales-action-dialog-backdrop,
body.pos-page-wide .pos-sales-action-dialog-backdrop {
    position: fixed !important;
    inset: 0 !important;
    z-index: 1300 !important;
    display: grid !important;
    place-items: center !important;
    padding: 18px !important;
    background: rgba(9, 22, 38, 0.42) !important;
    backdrop-filter: blur(8px) !important;
}

html[data-theme] body.pos-page-wide .pos-sales-action-dialog,
body.pos-page-wide .pos-sales-action-dialog {
    width: min(460px, 100%) !important;
    display: grid !important;
    gap: 16px !important;
    padding: 20px !important;
    border-radius: 22px !important;
    border: 1px solid rgba(203, 213, 225, 0.9) !important;
    background: #ffffff !important;
    color: #0f2442 !important;
    box-shadow: 0 28px 64px rgba(15, 36, 66, 0.2) !important;
}

html[data-theme] body.pos-page-wide .pos-sales-action-dialog-head strong,
body.pos-page-wide .pos-sales-action-dialog-head strong {
    display: block !important;
    color: #0f2442 !important;
    font-size: 1.04rem !important;
    line-height: 1.25 !important;
}

html[data-theme] body.pos-page-wide .pos-sales-action-dialog-head p,
body.pos-page-wide .pos-sales-action-dialog-head p {
    margin: 8px 0 0 !important;
    color: #627086 !important;
    line-height: 1.55 !important;
}

html[data-theme] body.pos-page-wide .pos-sales-action-dialog-fields,
body.pos-page-wide .pos-sales-action-dialog-fields {
    display: grid !important;
    gap: 12px !important;
}

html[data-theme] body.pos-page-wide .pos-sales-action-dialog-fields label,
body.pos-page-wide .pos-sales-action-dialog-fields label {
    display: grid !important;
    gap: 7px !important;
    color: #233854 !important;
    font-weight: 800 !important;
}

html[data-theme] body.pos-page-wide .pos-sales-action-dialog-fields :is(input, textarea),
body.pos-page-wide .pos-sales-action-dialog-fields :is(input, textarea) {
    width: 100% !important;
    min-height: 46px !important;
    border: 1px solid rgba(203, 213, 225, 0.95) !important;
    border-radius: 14px !important;
    padding: 11px 13px !important;
    background: #ffffff !important;
    color: #0f2442 !important;
}

html[data-theme] body.pos-page-wide .pos-sales-action-dialog-actions,
body.pos-page-wide .pos-sales-action-dialog-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
}

html[data-theme] body.pos-page-wide .pos-sales-action-dialog-actions button,
body.pos-page-wide .pos-sales-action-dialog-actions button {
    min-height: 44px !important;
    justify-content: center !important;
}

html[data-theme] body.pos-page-wide .pos-sales-log-toast,
body.pos-page-wide .pos-sales-log-toast {
    max-width: min(420px, calc(100vw - 32px)) !important;
    line-height: 1.45 !important;
    white-space: normal !important;
}

html[data-theme] body.pos-page-wide .pos-sales-log-toast.is-error,
body.pos-page-wide .pos-sales-log-toast.is-error {
    background: #3a1720 !important;
    border-color: rgba(248, 113, 113, 0.36) !important;
    color: #ffe7ea !important;
}

html[data-theme] body.pos-page-wide .pos-sales-log-toast.is-success,
body.pos-page-wide .pos-sales-log-toast.is-success {
    background: #0f3b2f !important;
    border-color: rgba(74, 222, 128, 0.32) !important;
    color: #dcfce7 !important;
}

html[data-theme] body.pos-page-wide .pos-sales-log-toast.is-hiding,
body.pos-page-wide .pos-sales-log-toast.is-hiding {
    opacity: 0 !important;
    transform: translateY(-6px) !important;
}

@media (max-width: 640px) {
    html[data-theme] body.pos-page-wide .pos-sales-action-dialog-actions,
    body.pos-page-wide .pos-sales-action-dialog-actions {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

/* === Internal shell header base: keep portal/WMS/HRIS topbar and breadcrumb in one rhythm === */
html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell),
body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) {
    --internal-shell-header-sticky-height: 76px;
}

html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) .internal-shell-header,
body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) .internal-shell-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 120 !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    min-height: 76px !important;
    padding-inline: clamp(16px, 4vw, 42px) !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(124px, 220px) minmax(0, 1fr) !important;
    align-items: center !important;
    gap: clamp(12px, 2vw, 24px) !important;
    background: rgba(255, 255, 255, 0.94) !important;
    backdrop-filter: blur(14px) !important;
    border-bottom: 1px solid rgba(223, 229, 238, 0.86) !important;
    box-shadow: 0 10px 24px rgba(15, 35, 68, 0.06) !important;
    box-sizing: border-box !important;
}

html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) .internal-shell-brand,
body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) .internal-shell-brand {
    min-width: 0 !important;
    max-width: 100% !important;
    justify-self: start !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
    overflow: hidden !important;
}

html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) .internal-shell-brand :is(.brand-logo, .brand-pill, .brand-logo-wide),
body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) .internal-shell-brand :is(.brand-logo, .brand-pill, .brand-logo-wide) {
    min-width: 0 !important;
    max-width: min(210px, 34vw) !important;
    height: 46px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding-inline: 16px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) .internal-shell-brand .brand-logo-wide,
body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) .internal-shell-brand .brand-logo-wide {
    flex: 0 1 auto !important;
}

html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) .internal-shell-brand .brand-divider,
body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) .internal-shell-brand .brand-divider {
    flex: 0 0 auto !important;
}

html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) .internal-shell-logo,
body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) .internal-shell-logo {
    justify-self: center !important;
    pointer-events: auto !important;
    width: clamp(132px, 15vw, 220px) !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
}

html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) .internal-shell-logo img,
body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) .internal-shell-logo img {
    display: block !important;
    width: 100% !important;
    max-height: 48px !important;
    object-fit: contain !important;
}

html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) .internal-shell-header-actions,
body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) .internal-shell-header-actions {
    min-width: 0 !important;
    max-width: 100% !important;
    justify-self: end !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    overflow: visible !important;
}

html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) .internal-shell-header-actions > .internal-topbar-user,
body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) .internal-shell-header-actions > .internal-topbar-user {
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

html[data-theme] body:is(.internal-module-shell, .internal-clean-page-shell) .internal-shell-breadcrumb,
body:is(.internal-module-shell, .internal-clean-page-shell) .internal-shell-breadcrumb {
    position: sticky !important;
    top: var(--internal-shell-header-sticky-height) !important;
    z-index: 110 !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: blur(12px) !important;
    border-bottom: 1px solid rgba(223, 229, 238, 0.92) !important;
    box-shadow: 0 10px 20px rgba(15, 35, 68, 0.04) !important;
    box-sizing: border-box !important;
}

html[data-theme] body:is(.internal-module-shell, .internal-clean-page-shell) .internal-shell-breadcrumb .breadcrumb-list,
body:is(.internal-module-shell, .internal-clean-page-shell) .internal-shell-breadcrumb .breadcrumb-list {
    width: min(1500px, calc(100% - clamp(24px, 4vw, 64px))) !important;
    max-width: 1500px !important;
    min-height: 52px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    box-sizing: border-box !important;
}

@media (max-width: 980px) {
    html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) .internal-shell-header,
    body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) .internal-shell-header {
        padding-inline: clamp(12px, 4vw, 20px) !important;
        grid-template-columns: minmax(0, 1fr) minmax(118px, 180px) auto !important;
    }

    html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) .internal-shell-header-actions,
    body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) .internal-shell-header-actions {
        width: auto !important;
        justify-self: end !important;
    }

    html[data-theme] body:is(.internal-module-shell, .internal-clean-page-shell) .internal-shell-breadcrumb .breadcrumb-list,
    body:is(.internal-module-shell, .internal-clean-page-shell) .internal-shell-breadcrumb .breadcrumb-list {
        width: calc(100% - 24px) !important;
        min-height: 46px !important;
        gap: 8px !important;
    }

    html[data-theme] body:is(.internal-module-shell, .internal-clean-page-shell) .internal-shell-breadcrumb,
    body:is(.internal-module-shell, .internal-clean-page-shell) .internal-shell-breadcrumb {
        position: static !important;
        top: auto !important;
        z-index: auto !important;
        box-shadow: none !important;
    }
}

@media (max-width: 760px) {
    html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) .internal-shell-header,
    body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) .internal-shell-header {
        min-height: 64px !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-template-areas:
            "brand actions"
            "logo logo" !important;
        gap: 8px 10px !important;
        padding-block: 10px !important;
    }

    html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) .internal-shell-brand,
    body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) .internal-shell-brand {
        grid-area: brand !important;
    }

    html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) .internal-shell-header-actions,
    body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) .internal-shell-header-actions {
        grid-area: actions !important;
    }

    html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) .internal-shell-logo,
    body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) .internal-shell-logo {
        grid-area: logo !important;
        width: min(210px, 68vw) !important;
    }

    html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) .internal-shell-brand :is(.brand-logo, .brand-pill, .brand-logo-wide),
    body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) .internal-shell-brand :is(.brand-logo, .brand-pill, .brand-logo-wide) {
        max-width: min(170px, 44vw) !important;
        height: 42px !important;
        padding-inline: 12px !important;
    }

    html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) .internal-shell-brand .brand-divider,
    html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) .internal-shell-brand .brand-logo-wide,
    body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) .internal-shell-brand .brand-divider,
    body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) .internal-shell-brand .brand-logo-wide {
        display: none !important;
    }
}

/* Footer internal dibuat satu base yang tidak menimpa konten panjang. */
html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) .internal-base-footer,
body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) .internal-base-footer {
    width: min(1500px, calc(100% - clamp(20px, 4vw, 64px))) !important;
    min-height: 40px !important;
    margin: 8px auto 18px !important;
    padding: 10px 16px !important;
    border: 1px solid rgba(223, 229, 238, 0.78) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.82) !important;
    box-shadow: 0 10px 24px rgba(15, 35, 68, 0.04) !important;
    box-sizing: border-box !important;
}

/* === Internal portal/module late guard: grid dan kartu tetap aman di semua layar === */
html[data-theme] body.internal-portal-shell .workspace-gateway,
body.internal-portal-shell .workspace-gateway,
html[data-theme] body.internal-module-hub-shell .internal-hub-shell,
body.internal-module-hub-shell .internal-hub-shell {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
    box-sizing: border-box !important;
}

html[data-theme] body.internal-portal-shell :is(.internal-hero-section, .internal-apps-section),
body.internal-portal-shell :is(.internal-hero-section, .internal-apps-section) {
    width: min(1500px, calc(100% - clamp(22px, 5vw, 72px))) !important;
    max-width: 1500px !important;
    min-width: 0 !important;
    margin-inline: auto !important;
    box-sizing: border-box !important;
}

html[data-theme] body.internal-portal-shell :is(.internal-status-grid, .internal-app-grid),
body.internal-portal-shell :is(.internal-status-grid, .internal-app-grid) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

html[data-theme] body.internal-portal-shell .internal-status-grid,
body.internal-portal-shell .internal-status-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

html[data-theme] body.internal-portal-shell .internal-app-grid,
body.internal-portal-shell .internal-app-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)) !important;
}

html[data-theme] body.internal-portal-shell :is(.internal-status-card, .internal-app-card),
body.internal-portal-shell :is(.internal-status-card, .internal-app-card) {
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    box-sizing: border-box !important;
}

html[data-theme] body.internal-portal-shell :is(.internal-status-card h2, .internal-status-card p, .internal-app-copy h3, .internal-app-copy p, .internal-app-copy small),
body.internal-portal-shell :is(.internal-status-card h2, .internal-status-card p, .internal-app-copy h3, .internal-app-copy p, .internal-app-copy small) {
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
}

html[data-theme] body.internal-module-shell .internal-module-layout,
body.internal-module-shell .internal-module-layout {
    width: min(1500px, calc(100% - clamp(22px, 5vw, 72px))) !important;
    max-width: 1500px !important;
    min-width: 0 !important;
    margin-inline: auto !important;
    display: grid !important;
    grid-template-columns: minmax(236px, 300px) minmax(0, 1fr) !important;
    gap: clamp(14px, 2vw, 24px) !important;
    align-items: start !important;
    box-sizing: border-box !important;
}

html[data-theme] body.internal-wms-module-shell .internal-module-layout,
body.internal-wms-module-shell .internal-module-layout {
    grid-template-columns: minmax(236px, 324px) minmax(0, 1fr) !important;
}

html[data-theme] body.internal-module-shell :is(.internal-module-nav, .information-module-nav, .info-sidebar, .internal-module-panel, .information-panel, .content-panel),
body.internal-module-shell :is(.internal-module-nav, .information-module-nav, .info-sidebar, .internal-module-panel, .information-panel, .content-panel) {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

html[data-theme] body.internal-module-shell .information-sidebar-card,
body.internal-module-shell .information-sidebar-card {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
}

html[data-theme] body.internal-module-shell .sidebar-menu,
body.internal-module-shell .sidebar-menu {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
    min-width: 0 !important;
}

html[data-theme] body.internal-module-shell .sidebar-link,
body.internal-module-shell .sidebar-link {
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 64px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

html[data-theme] body.internal-module-shell .hris-module-card-copy,
body.internal-module-shell .hris-module-card-copy,
html[data-theme] body.internal-module-shell .hris-module-card-copy :is(h2, small),
body.internal-module-shell .hris-module-card-copy :is(h2, small) {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
}

html[data-theme] body.internal-module-hub-shell .internal-hub-card-grid,
body.internal-module-hub-shell .internal-hub-card-grid {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)) !important;
    gap: clamp(14px, 2vw, 22px) !important;
}

html[data-theme] body.internal-module-hub-shell .internal-hub-card,
body.internal-module-hub-shell .internal-hub-card {
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 128px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

html[data-theme] body.internal-module-hub-shell .internal-hub-card :is(h2, p, strong, span),
body.internal-module-hub-shell .internal-hub-card :is(h2, p, strong, span),
html[data-theme] body.internal-module-shell .information-panel-head :is(h1, p, span),
body.internal-module-shell .information-panel-head :is(h1, p, span) {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
}

@media (max-width: 1180px) {
    html[data-theme] body.internal-module-shell .internal-module-layout,
    body.internal-module-shell .internal-module-layout {
        width: calc(100% - 24px) !important;
        grid-template-columns: minmax(0, 1fr) !important;
    }

    html[data-theme] body.internal-module-shell .sidebar-menu,
    body.internal-module-shell .sidebar-menu {
        grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)) !important;
    }
}

@media (max-width: 760px) {
    html[data-theme] body.internal-portal-shell :is(.internal-hero-section, .internal-apps-section),
    body.internal-portal-shell :is(.internal-hero-section, .internal-apps-section) {
        width: calc(100% - 20px) !important;
    }

    html[data-theme] body.internal-portal-shell .internal-status-grid,
    body.internal-portal-shell .internal-status-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    html[data-theme] body.internal-portal-shell .internal-app-card,
    body.internal-portal-shell .internal-app-card {
        min-height: 176px !important;
    }

    html[data-theme] body.internal-module-shell .internal-module-layout,
    body.internal-module-shell .internal-module-layout {
        width: calc(100% - 20px) !important;
        gap: 12px !important;
    }

    html[data-theme] body.internal-module-hub-shell .internal-hub-card,
    body.internal-module-hub-shell .internal-hub-card {
        min-height: 128px !important;
    }
}

/* === Final scoped guards: POS, clean-shell pages, Attendance mobile === */
html[data-theme] body.pos-page-wide,
body.pos-page-wide,
html[data-theme] body.pos-payment-modal-open,
body.pos-payment-modal-open {
    background: #f7fafc !important;
    font-family: var(--font-sans, "Plus Jakarta Sans", Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif) !important;
}

body.pos-page-wide .floating-toolbelt,
body.pos-page-wide .floating-toolbelt-launcher,
body.pos-page-wide .floating-toolbelt-menu,
body.pos-page-wide .notification-center-root,
body.pos-page-wide .attendance-camera-shortcut-root,
body.pos-page-wide .chat-widget-root,
body.pos-payment-modal-open .floating-toolbelt,
body.pos-payment-modal-open .floating-toolbelt-launcher,
body.pos-payment-modal-open .floating-toolbelt-menu,
body.pos-payment-modal-open .notification-center-root,
body.pos-payment-modal-open .attendance-camera-shortcut-root,
body.pos-payment-modal-open .chat-widget-root {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

body.pos-page-wide::before,
body.pos-page-wide::after,
body.pos-payment-modal-open::before,
body.pos-payment-modal-open::after,
body .pos-ipos-refactor .pos-payment-modal::before,
body .pos-ipos-refactor .pos-payment-modal::after,
body .pos-ipos-refactor .pos-payment-modal-backdrop::before,
body .pos-ipos-refactor .pos-payment-modal-backdrop::after,
body .pos-ipos-refactor .pos-payment-modal-window::before,
body .pos-ipos-refactor .pos-payment-modal-window::after {
    content: none !important;
    display: none !important;
}

html[data-theme] body.pos-clean-shell.internal-clean-page-shell .clean-module-layout:not(.clean-module-layout--no-sidebar),
body.pos-clean-shell.internal-clean-page-shell .clean-module-layout:not(.clean-module-layout--no-sidebar) {
    grid-template-columns: minmax(190px, 230px) minmax(0, 1fr) !important;
    gap: 14px !important;
    width: min(100% - 28px, 1760px) !important;
    max-width: 1760px !important;
    margin: 18px auto 32px !important;
}

html:has(body.pos-clean-shell.internal-clean-page-shell),
html[data-theme]:has(body.pos-clean-shell.internal-clean-page-shell) {
    height: auto !important;
    min-height: 100% !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

html[data-theme] body.pos-clean-shell.internal-clean-page-shell,
body.pos-clean-shell.internal-clean-page-shell {
    height: auto !important;
    min-height: 100dvh !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

html[data-theme] body.pos-clean-shell.internal-clean-page-shell :is(.layout, .main),
body.pos-clean-shell.internal-clean-page-shell :is(.layout, .main) {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
}

html[data-theme] body.pos-clean-shell.internal-clean-page-shell .clean-module-sidebar,
body.pos-clean-shell.internal-clean-page-shell .clean-module-sidebar {
    max-width: 230px !important;
    top: 142px !important;
}

html[data-theme] body.pos-clean-shell.internal-clean-page-shell .clean-module-sidebar .information-sidebar-card,
body.pos-clean-shell.internal-clean-page-shell .clean-module-sidebar .information-sidebar-card {
    padding: 10px !important;
}

html[data-theme] body.pos-clean-shell.internal-clean-page-shell .clean-module-sidebar .hris-module-card,
body.pos-clean-shell.internal-clean-page-shell .clean-module-sidebar .hris-module-card {
    min-height: 52px !important;
    padding: 9px 10px !important;
    gap: 8px !important;
}

html[data-theme] body.pos-clean-shell.internal-clean-page-shell .clean-module-sidebar .hris-module-nav-icon,
body.pos-clean-shell.internal-clean-page-shell .clean-module-sidebar .hris-module-nav-icon {
    width: 34px !important;
    height: 34px !important;
}

html[data-theme] body.pos-clean-shell.internal-clean-page-shell .clean-content-panel,
body.pos-clean-shell.internal-clean-page-shell .clean-content-panel {
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

html[data-theme] body.pos-clean-shell.internal-clean-page-shell .page-content.page-content-bleed,
body.pos-clean-shell.internal-clean-page-shell .page-content.page-content-bleed {
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
}

@media (max-width: 980px) {
    html[data-theme] body.pos-clean-shell.internal-clean-page-shell .clean-module-layout:not(.clean-module-layout--no-sidebar),
    body.pos-clean-shell.internal-clean-page-shell .clean-module-layout:not(.clean-module-layout--no-sidebar) {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 10px !important;
        width: min(100% - 18px, 980px) !important;
        margin: 10px auto 24px !important;
    }

    html[data-theme] body.pos-clean-shell.internal-clean-page-shell .clean-module-sidebar,
    body.pos-clean-shell.internal-clean-page-shell .clean-module-sidebar {
        max-width: 100% !important;
        position: static !important;
    }

    html[data-theme] body.pos-clean-shell.internal-clean-page-shell .clean-module-sidebar .sidebar-menu,
    body.pos-clean-shell.internal-clean-page-shell .clean-module-sidebar .sidebar-menu {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    html[data-theme] body.pos-clean-shell .pos-ipos-payment-compact,
    body.pos-clean-shell .pos-ipos-payment-compact {
        top: auto !important;
        bottom: 12px !important;
        height: auto !important;
        max-height: calc(100dvh - 24px) !important;
        align-content: start !important;
        grid-auto-rows: auto !important;
    }

    html[data-theme] body.pos-clean-shell .pos-ipos-payment-compact .pos-ipos-pay-open,
    body.pos-clean-shell .pos-ipos-payment-compact .pos-ipos-pay-open {
        height: auto !important;
        min-height: 44px !important;
    }

    html[data-theme] body.pos-clean-shell #posCheckoutRoot,
    body.pos-clean-shell #posCheckoutRoot {
        padding-bottom: 138px !important;
    }
}

html[data-theme] body.internal-clean-page-shell .clean-module-layout:not(.clean-module-layout--no-sidebar),
body.internal-clean-page-shell .clean-module-layout:not(.clean-module-layout--no-sidebar) {
    display: grid !important;
    grid-template-columns: minmax(240px, 280px) minmax(0, 1fr) !important;
    align-items: start !important;
    width: min(100% - 32px, 1480px) !important;
    max-width: 1480px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
}

html[data-theme] body.internal-clean-page-shell .clean-module-layout.clean-module-layout--no-sidebar,
body.internal-clean-page-shell .clean-module-layout.clean-module-layout--no-sidebar {
    grid-template-columns: minmax(0, 1fr) !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

html[data-theme] body.internal-clean-page-shell .clean-module-sidebar,
body.internal-clean-page-shell .clean-module-sidebar,
html[data-theme] body.internal-clean-page-shell .clean-content-panel,
body.internal-clean-page-shell .clean-content-panel,
html[data-theme] body.internal-clean-page-shell .clean-content-panel > .page-content,
body.internal-clean-page-shell .clean-content-panel > .page-content {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
}

html[data-theme] body.schedule-page-shell.internal-clean-page-shell .clean-content-panel > .page-content.page-content-bleed,
body.schedule-page-shell.internal-clean-page-shell .clean-content-panel > .page-content.page-content-bleed {
    display: grid !important;
    gap: 18px !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
}

html[data-theme] body.schedule-page-shell :is(.schedule-board-shell, .schedule-live-shell, .table-box),
body.schedule-page-shell :is(.schedule-board-shell, .schedule-live-shell, .table-box) {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
}

html[data-theme] body.internal-clean-page-shell .clean-module-sidebar .sidebar-link:hover,
body.internal-clean-page-shell .clean-module-sidebar .sidebar-link:hover,
html[data-theme] body.internal-module-shell .hris-clean-shell .sidebar-link:hover,
body.internal-module-shell .hris-clean-shell .sidebar-link:hover,
html[data-theme] body.internal-module-shell .hris-clean-shell .hris-module-card:hover,
body.internal-module-shell .hris-clean-shell .hris-module-card:hover {
    background: #ffffff !important;
    color: #071a33 !important;
}

html[data-theme] body.internal-clean-page-shell .clean-module-sidebar .sidebar-link:hover :is(h2, small, span),
body.internal-clean-page-shell .clean-module-sidebar .sidebar-link:hover :is(h2, small, span),
html[data-theme] body.internal-module-shell .hris-clean-shell .sidebar-link:hover :is(h2, small, span),
body.internal-module-shell .hris-clean-shell .sidebar-link:hover :is(h2, small, span),
html[data-theme] body.internal-module-shell .hris-clean-shell .hris-module-card:hover :is(h2, small, span),
body.internal-module-shell .hris-clean-shell .hris-module-card:hover :is(h2, small, span) {
    color: inherit !important;
}

html[data-theme] body.internal-portal-shell .workspace-app-tile.internal-app-card,
body.internal-portal-shell .workspace-app-tile.internal-app-card,
html[data-theme] body.internal-portal-shell .workspace-app-tile.internal-app-card:hover,
body.internal-portal-shell .workspace-app-tile.internal-app-card:hover {
    background-color: #ffffff !important;
    color: #071a33 !important;
    text-shadow: none !important;
}

html[data-theme] body.internal-portal-shell .workspace-app-tile.internal-app-card :is(h3, strong),
body.internal-portal-shell .workspace-app-tile.internal-app-card :is(h3, strong) {
    color: #071a33 !important;
}

html[data-theme] body.internal-portal-shell .workspace-app-tile.internal-app-card p,
body.internal-portal-shell .workspace-app-tile.internal-app-card p {
    color: #66758d !important;
}

@media (max-width: 980px) {
    html[data-theme] body.internal-clean-page-shell .clean-module-layout:not(.clean-module-layout--no-sidebar),
    body.internal-clean-page-shell .clean-module-layout:not(.clean-module-layout--no-sidebar) {
        grid-template-columns: minmax(0, 1fr) !important;
        width: min(100% - 20px, 760px) !important;
    }
}

@media (max-width: 640px) {
    body.attendance-page-shell .attendance-portal-main .attendance-overview-grid .meta-card:nth-child(n+3) {
        display: grid !important;
    }

    body.attendance-page-shell .attendance-portal-main .attendance-form-panel .form-grid,
    body.attendance-page-shell .attendance-portal-main .attendance-form-quick-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 520px) {
    body.attendance-page-shell .attendance-portal-main .attendance-overview-grid {
        grid-template-columns: 1fr !important;
    }

    body.attendance-page-shell .attendance-portal-main .attendance-camera-actions {
        grid-template-columns: 1fr !important;
    }
}

/* === WMS workflow guard: request, request owner, inbound, outbound === */
body.wms-refactor-shell .page-hero {
    position: relative !important;
    z-index: 1 !important;
    margin-bottom: 8px !important;
    overflow: visible !important;
}

body.wms-refactor-shell .page-content.page-content-bleed {
    position: relative !important;
    z-index: 0 !important;
    padding-top: 6px !important;
}

body.request-workflow-shell .wms-page-stack,
body.request-workflow-shell .request-workflow-scroll,
body.wms-refactor-shell .wms-page-stack {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    gap: 18px !important;
    box-sizing: border-box !important;
}

body.request-workflow-shell .request-workflow-scroll,
body.wms-refactor-shell .request-workflow-scroll {
    min-width: 0 !important;
    overflow: visible !important;
    grid-auto-flow: row !important;
}

body.request-workflow-shell .wms-step-grid,
body.request-workflow-shell .wms-kpi-grid,
body.wms-refactor-shell .wms-step-grid,
body.wms-refactor-shell .wms-kpi-grid {
    align-items: stretch !important;
}

body.request-workflow-shell :is(.wms-step-grid, .wms-kpi-grid),
body.wms-refactor-shell :is(.wms-step-grid, .wms-kpi-grid) {
    width: 100% !important;
    min-width: 0 !important;
}

body.request-workflow-shell :is(.wms-step-card, .wms-kpi-card),
body.wms-refactor-shell :is(.wms-step-card, .wms-kpi-card) {
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    word-break: break-word !important;
}

body.request-workflow-shell :is(.ops-batch-box, .ops-queue-box, .table-box),
body.wms-refactor-shell :is(.ops-batch-box, .ops-queue-box, .table-box) {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

body.request-workflow-shell .ops-batch-box form,
body.wms-refactor-shell .ops-batch-box form {
    display: grid !important;
    gap: 18px !important;
    min-width: 0 !important;
}

body.request-workflow-shell :is(.ops-entry-box, .request-custom-callout),
body.wms-refactor-shell :is(.ops-entry-box, .request-custom-callout) {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

body.request-workflow-shell :is(.section-title, .section-title > div),
body.wms-refactor-shell :is(.section-title, .section-title > div) {
    min-width: 0 !important;
}

body.request-workflow-shell .section-title,
body.wms-refactor-shell .section-title {
    flex-wrap: wrap !important;
    gap: 12px !important;
}

body.request-workflow-shell :is(.ops-config-grid, .ops-entry-grid),
body.wms-refactor-shell :is(.ops-config-grid, .ops-entry-grid) {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    align-items: start !important;
}

body.request-workflow-shell .ops-config-grid > *,
body.request-workflow-shell .ops-entry-grid > *,
body.wms-refactor-shell .ops-config-grid > *,
body.request-workflow-shell .ops-entry-grid > div,
body.wms-refactor-shell .ops-entry-grid > div {
    min-width: 0 !important;
}

body.request-workflow-shell :is(.ops-item-display, .money-input, .ops-stock-card, .ops-config-card),
body.wms-refactor-shell :is(.ops-item-display, .money-input, .ops-stock-card, .ops-config-card) {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

body.request-workflow-shell :is(.split-actions, .ops-entry-actions),
body.wms-refactor-shell :is(.split-actions, .ops-entry-actions) {
    width: 100% !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 10px !important;
}

body.request-workflow-shell :is(.split-actions button, .ops-entry-actions button),
body.wms-refactor-shell :is(.split-actions button, .ops-entry-actions button) {
    flex: 1 1 160px !important;
    max-width: 100% !important;
}

body.request-workflow-shell :is(#inboundFormFeedback, #outboundFormFeedback, #transferFormFeedback, #requestFormFeedback, #ownerRequestFormFeedback),
body.wms-refactor-shell :is(#inboundFormFeedback, #outboundFormFeedback, #transferFormFeedback, #requestFormFeedback, #ownerRequestFormFeedback) {
    width: 100% !important;
    min-height: 20px !important;
    margin: 0 !important;
    order: -1;
}

body.request-workflow-shell [data-scrollable-table="1"],
body.wms-refactor-shell [data-scrollable-table="1"] {
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
}

body.request-workflow-shell [data-scrollable-table="1"] table,
body.wms-refactor-shell [data-scrollable-table="1"] table {
    width: 100% !important;
    min-width: 720px !important;
}

body.wms-refactor-shell .stock-opname-shell :is(.summary, .meta-grid) {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)) !important;
    gap: 12px !important;
}

body.wms-refactor-shell .stock-opname-shell :is(.card-mini, .meta-card) {
    min-width: 0 !important;
    max-width: 100% !important;
    word-break: break-word !important;
}

body.wms-refactor-shell .stock-opname-shell :is(.top-bar, #soFilterForm) {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)) !important;
    gap: 12px !important;
    align-items: end !important;
}

body.wms-refactor-shell .stock-opname-shell :is(.top-bar, #soFilterForm) > * {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

body.wms-refactor-shell .stock-opname-shell .so-save-bar {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 12px !important;
}

@media (max-width: 1280px) {
    body.request-workflow-shell .ops-entry-grid,
    body.wms-refactor-shell .ops-entry-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        align-items: start !important;
    }

    body.request-workflow-shell :is(.ops-entry-actions, .split-actions),
    body.wms-refactor-shell :is(.ops-entry-actions, .split-actions) {
        grid-column: 1 / -1 !important;
    }
}

@media (max-width: 980px) {
    body.request-workflow-shell :is(.ops-config-grid, .ops-entry-grid),
    body.wms-refactor-shell :is(.ops-config-grid, .ops-entry-grid) {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body.wms-refactor-shell .stock-opname-shell :is(.summary, .meta-grid, .top-bar, #soFilterForm) {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body.request-workflow-shell .request-workflow-scroll,
    body.wms-refactor-shell .request-workflow-scroll {
        gap: 14px !important;
    }

    body.request-workflow-shell :is(.ops-batch-box, .ops-queue-box, .table-box),
    body.wms-refactor-shell :is(.ops-batch-box, .ops-queue-box, .table-box) {
        padding: 14px !important;
    }
}

@media (max-width: 640px) {
    body.request-workflow-shell .wms-page-stack,
    body.wms-refactor-shell .wms-page-stack {
        gap: 12px !important;
    }

    body.request-workflow-shell :is(.split-actions, .ops-entry-actions),
    body.wms-refactor-shell :is(.split-actions, .ops-entry-actions) {
        width: 100% !important;
    }

    body.request-workflow-shell :is(.split-actions button, .ops-entry-actions button),
    body.wms-refactor-shell :is(.split-actions button, .ops-entry-actions button) {
        width: 100% !important;
    }

    body.request-workflow-shell [data-scrollable-table="1"] table,
    body.wms-refactor-shell [data-scrollable-table="1"] table {
        min-width: 640px !important;
    }

    body.wms-refactor-shell .stock-opname-shell .so-save-bar {
        position: sticky !important;
        bottom: 12px !important;
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

/* === Final internal sidebar active guard: never fall back to dark blocks === */
html[data-theme] body:is(.internal-module-shell, .internal-clean-page-shell) :is(a.hris-module-card:hover, a.sidebar-link:hover),
body:is(.internal-module-shell, .internal-clean-page-shell) :is(a.hris-module-card:hover, a.sidebar-link:hover) {
    background: linear-gradient(135deg, #fffdf7 0%, #ffffff 55%, #f6f9fd 100%) !important;
    border-color: rgba(210, 170, 72, 0.34) !important;
    color: #10264d !important;
    box-shadow: inset 4px 0 0 rgba(214, 170, 54, 0.76), 0 10px 22px rgba(15, 35, 68, 0.06) !important;
}

html[data-theme] body:is(.internal-module-shell, .internal-clean-page-shell) :is(a.hris-module-card.active, a.hris-module-card.is-active, a.sidebar-link.active, a.sidebar-link.is-active),
body:is(.internal-module-shell, .internal-clean-page-shell) :is(a.hris-module-card.active, a.hris-module-card.is-active, a.sidebar-link.active, a.sidebar-link.is-active) {
    background: linear-gradient(135deg, #fff7dc 0%, #ffffff 54%, #f3f8ff 100%) !important;
    border-color: rgba(210, 170, 72, 0.5) !important;
    color: #10264d !important;
    box-shadow: inset 4px 0 0 #d6aa36, 0 12px 24px rgba(15, 35, 68, 0.07) !important;
}

html[data-theme] body:is(.internal-module-shell, .internal-clean-page-shell) :is(a.hris-module-card.active, a.hris-module-card.is-active, a.sidebar-link.active, a.sidebar-link.is-active) :is(h2, strong, small),
body:is(.internal-module-shell, .internal-clean-page-shell) :is(a.hris-module-card.active, a.hris-module-card.is-active, a.sidebar-link.active, a.sidebar-link.is-active) :is(h2, strong, small) {
    color: #10264d !important;
}

html[data-theme] body:is(.internal-module-shell, .internal-clean-page-shell) :is(a.hris-module-card, a.sidebar-link) :is(.hris-module-nav-icon, .sidebar-icon),
body:is(.internal-module-shell, .internal-clean-page-shell) :is(a.hris-module-card, a.sidebar-link) :is(.hris-module-nav-icon, .sidebar-icon) {
    background: rgba(255, 248, 224, 0.72) !important;
    border: 1px solid rgba(214, 170, 54, 0.28) !important;
    color: #10264d !important;
    filter: none !important;
    opacity: 1 !important;
}

html[data-theme] body:is(.internal-module-shell, .internal-clean-page-shell) :is(a.hris-module-card, a.sidebar-link) :is(.hris-module-nav-icon img, .sidebar-icon img),
body:is(.internal-module-shell, .internal-clean-page-shell) :is(a.hris-module-card, a.sidebar-link) :is(.hris-module-nav-icon img, .sidebar-icon img) {
    filter: none !important;
    opacity: 0.96 !important;
    mix-blend-mode: normal !important;
}

/* === Request Gudang layout guard: title, steps, and queue must not overlap === */
html[data-theme] body.request-workflow-shell .page-hero,
body.request-workflow-shell .page-hero {
    position: relative !important;
    z-index: 2 !important;
    min-height: 0 !important;
    width: 100% !important;
    margin: 0 0 14px !important;
    padding: 0 !important;
    display: block !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
}

html[data-theme] body.request-workflow-shell .page-hero-text,
body.request-workflow-shell .page-hero-text {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    gap: 4px !important;
}

html[data-theme] body.request-workflow-shell .page-eyebrow,
body.request-workflow-shell .page-eyebrow {
    margin: 0 !important;
    line-height: 1.1 !important;
}

html[data-theme] body.request-workflow-shell .page-hero h1,
body.request-workflow-shell .page-hero h1 {
    max-width: 100% !important;
    margin: 0 !important;
    font-size: clamp(1.85rem, 3.4vw, 3rem) !important;
    line-height: 1.02 !important;
    letter-spacing: 0 !important;
    overflow-wrap: anywhere !important;
}

html[data-theme] body.request-workflow-shell .page-content.page-content-bleed,
body.request-workflow-shell .page-content.page-content-bleed {
    position: relative !important;
    z-index: 1 !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    overflow: visible !important;
}

html[data-theme] body.request-workflow-shell .wms-page-stack,
body.request-workflow-shell .wms-page-stack {
    position: relative !important;
    z-index: 1 !important;
    clear: both !important;
    grid-template-rows: auto auto minmax(0, auto) !important;
    overflow: visible !important;
}

html[data-theme] body.request-workflow-shell :is(.wms-step-grid, .wms-kpi-grid),
body.request-workflow-shell :is(.wms-step-grid, .wms-kpi-grid) {
    margin-top: 0 !important;
    align-self: stretch !important;
}

@media (max-width: 760px) {
    html[data-theme] body.request-workflow-shell .page-hero,
    body.request-workflow-shell .page-hero {
        margin-bottom: 12px !important;
    }

    html[data-theme] body.request-workflow-shell .page-hero h1,
    body.request-workflow-shell .page-hero h1 {
        font-size: clamp(1.55rem, 8vw, 2.2rem) !important;
        line-height: 1.06 !important;
    }
}

/* === Base header/footer late guard: consistent shell without changing page design === */
html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header],
body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] {
    overflow: visible !important;
    isolation: isolate !important;
}

html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] .internal-topbar-user,
body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] .internal-topbar-user {
    min-width: 0 !important;
    max-width: 100% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-wrap: nowrap !important;
    gap: clamp(8px, 1.2vw, 14px) !important;
}

html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] .topbar-menu-shell,
body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] .topbar-menu-shell {
    position: relative !important;
    flex: 0 0 auto !important;
    min-width: 0 !important;
}

html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] :is(.internal-icon-button, .internal-user-pill),
body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] :is(.internal-icon-button, .internal-user-pill) {
    flex: 0 0 auto !important;
    min-width: 0 !important;
    height: 52px !important;
    max-height: 52px !important;
    border-radius: 999px !important;
    box-sizing: border-box !important;
}

html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] .internal-icon-button,
body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] .internal-icon-button {
    width: 52px !important;
    padding: 0 !important;
    display: inline-grid !important;
    place-items: center !important;
}

html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] .internal-ai-button,
body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] .internal-ai-button {
    width: auto !important;
    min-width: 78px !important;
    padding: 0 14px !important;
    color: #10264d !important;
    font-size: 0.78rem !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
    text-decoration: none !important;
}

html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] .internal-user-pill,
body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] .internal-user-pill {
    max-width: min(230px, 34vw) !important;
    padding: 8px 12px 8px 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    overflow: hidden !important;
}

html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] .profile-name,
body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] .profile-name {
    min-width: 0 !important;
    max-width: 120px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] .avatar,
body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] .avatar {
    flex: 0 0 36px !important;
    width: 36px !important;
    height: 36px !important;
}

html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] .dropdown-icon,
body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] .dropdown-icon {
    flex: 0 0 auto !important;
}

html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] .internal-break-chip,
body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] .internal-break-chip {
    min-width: 0 !important;
    max-width: min(280px, 30vw) !important;
    overflow: hidden !important;
}

html[data-theme] body:is(.internal-module-shell, .internal-clean-page-shell) :is(a.hris-module-card.active, a.hris-module-card.is-active, a.sidebar-link.active, a.sidebar-link.is-active) :is(.hris-module-nav-icon, .sidebar-icon),
body:is(.internal-module-shell, .internal-clean-page-shell) :is(a.hris-module-card.active, a.hris-module-card.is-active, a.sidebar-link.active, a.sidebar-link.is-active) :is(.hris-module-nav-icon, .sidebar-icon) {
    background: rgba(255, 248, 224, 0.92) !important;
    border-color: rgba(214, 170, 54, 0.38) !important;
    color: #10264d !important;
    box-shadow: none !important;
}

html[data-theme] body:is(.internal-module-shell, .internal-clean-page-shell) :is(a.hris-module-card.active, a.hris-module-card.is-active, a.sidebar-link.active, a.sidebar-link.is-active) :is(.hris-module-nav-icon img, .sidebar-icon img),
body:is(.internal-module-shell, .internal-clean-page-shell) :is(a.hris-module-card.active, a.hris-module-card.is-active, a.sidebar-link.active, a.sidebar-link.is-active) :is(.hris-module-nav-icon img, .sidebar-icon img) {
    filter: none !important;
    opacity: 1 !important;
    mix-blend-mode: normal !important;
}

@media (max-width: 980px) {
    html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] .profile-name,
    body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] .profile-name {
        max-width: 86px !important;
    }

    html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] .shell-break-chip-label,
    html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] .shell-break-chip-hint,
    body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] .shell-break-chip-label,
    body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] .shell-break-chip-hint {
        display: none !important;
    }
}

@media (max-width: 760px) {
    html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header],
    body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] {
        min-height: 64px !important;
        grid-template-areas: "brand actions" !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 8px !important;
        padding-block: 8px !important;
    }

    html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] .internal-shell-logo,
    body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] .internal-shell-logo {
        display: none !important;
    }

    html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] .internal-topbar-user,
    body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] .internal-topbar-user {
        gap: 7px !important;
    }

    html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] :is(.internal-icon-button, .internal-user-pill),
    body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] :is(.internal-icon-button, .internal-user-pill) {
        height: 46px !important;
        max-height: 46px !important;
    }

    html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] .internal-icon-button,
    body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] .internal-icon-button {
        width: 46px !important;
    }

    html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] .internal-user-pill,
    body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] .internal-user-pill {
        max-width: 132px !important;
        padding-inline: 12px 9px !important;
        gap: 7px !important;
    }

    html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] .profile-name,
    body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] .profile-name {
        max-width: 56px !important;
    }

    html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] .avatar,
    body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] .avatar {
        flex-basis: 32px !important;
        width: 32px !important;
        height: 32px !important;
    }

    html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] .internal-break-chip,
    body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] .internal-break-chip {
        max-width: 88px !important;
        min-height: 42px !important;
        padding: 6px 8px !important;
    }
}

@media (max-width: 520px) {
    html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] .brand-fallback,
    body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] .brand-fallback {
        max-width: 72px !important;
        display: block !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] .profile-name,
    body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] .profile-name {
        display: none !important;
    }

    html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] .internal-user-pill,
    body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] .internal-user-pill {
        width: 58px !important;
        max-width: 58px !important;
        padding-inline: 8px !important;
    }
}

/* === Single viewport shell: body tidak scroll, konten scroll di panel masing-masing === */
html:has(body.internal-portal-shell),
html:has(body.internal-module-shell),
html:has(body.internal-clean-page-shell),
html[data-theme]:has(body.internal-portal-shell),
html[data-theme]:has(body.internal-module-shell),
html[data-theme]:has(body.internal-clean-page-shell) {
    height: 100% !important;
    min-height: 100% !important;
    overflow: hidden !important;
}

html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell),
body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) {
    width: 100% !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
    color: #071a33 !important;
    background:
        linear-gradient(90deg, rgba(232, 244, 255, 0.72) 0%, rgba(247, 250, 253, 0.96) 44%, rgba(255, 251, 242, 0.82) 100%),
        #f5f8fc !important;
}

html[data-theme] body.internal-clean-page-shell,
body.internal-clean-page-shell {
    --internal-shell-frame-top: 128px;
}

html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) .layout,
body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) .layout {
    width: 100% !important;
    min-width: 0 !important;
    height: 100dvh !important;
    min-height: 0 !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
    display: grid !important;
}

html[data-theme] body.internal-clean-page-shell > .layout,
body.internal-clean-page-shell > .layout {
    height: calc(100dvh - var(--internal-shell-frame-top, 128px)) !important;
    max-height: calc(100dvh - var(--internal-shell-frame-top, 128px)) !important;
}

html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) .main,
body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) .main {
    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: hidden !important;
    display: grid !important;
    grid-template-rows: auto auto minmax(0, 1fr) auto !important;
    align-content: stretch !important;
}

html[data-theme] body.internal-clean-page-shell .main,
body.internal-clean-page-shell .main {
    grid-template-rows: minmax(0, 1fr) auto !important;
}

html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) .page-hero,
body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) .page-hero {
    flex: 0 0 auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding-block: clamp(10px, 1.4vh, 18px) !important;
}

html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) .flash-stack,
body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) .flash-stack {
    max-height: min(18vh, 180px) !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) .page-content,
body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) .page-content,
html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) .page-content-bleed,
body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) .page-content-bleed {
    min-height: 0 !important;
    height: 100% !important;
    max-height: 100% !important;
    overflow: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-gutter: stable both-edges !important;
}

html[data-theme] body.internal-clean-page-shell .clean-module-layout,
body.internal-clean-page-shell .clean-module-layout,
html[data-theme] body.internal-module-shell .hris-clean-shell .internal-module-layout,
body.internal-module-shell .hris-clean-shell .internal-module-layout,
html[data-theme] body.internal-module-shell .page-content.hris-clean-shell .internal-module-layout,
body.internal-module-shell .page-content.hris-clean-shell .internal-module-layout {
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: hidden !important;
    align-items: stretch !important;
}

html[data-theme] body.internal-clean-page-shell .clean-content-panel,
body.internal-clean-page-shell .clean-content-panel,
html[data-theme] body.internal-module-shell .hris-clean-shell .content-panel,
body.internal-module-shell .hris-clean-shell .content-panel {
    min-height: 0 !important;
    height: 100% !important;
    max-height: 100% !important;
    overflow: hidden !important;
    display: grid !important;
    grid-template-rows: auto auto minmax(0, 1fr) !important;
    align-content: stretch !important;
}

html[data-theme] body.internal-clean-page-shell .clean-content-panel > .page-content,
body.internal-clean-page-shell .clean-content-panel > .page-content,
html[data-theme] body.internal-module-shell .hris-clean-shell .content-panel > .page-content,
body.internal-module-shell .hris-clean-shell .content-panel > .page-content {
    min-height: 0 !important;
    height: 100% !important;
    max-height: 100% !important;
    overflow: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
}

html[data-theme] body:is(.internal-clean-page-shell, .internal-module-shell) :is(.internal-module-nav, .information-module-nav, .clean-module-sidebar, .info-sidebar),
body:is(.internal-clean-page-shell, .internal-module-shell) :is(.internal-module-nav, .information-module-nav, .clean-module-sidebar, .info-sidebar) {
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: hidden !important;
}

html[data-theme] body:is(.internal-clean-page-shell, .internal-module-shell) :is(.hris-module-disclosure, .information-sidebar-card),
body:is(.internal-clean-page-shell, .internal-module-shell) :is(.hris-module-disclosure, .information-sidebar-card) {
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: hidden !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
}

html[data-theme] body:is(.internal-clean-page-shell, .internal-module-shell) :is(.hris-module-grid, .sidebar-menu),
body:is(.internal-clean-page-shell, .internal-module-shell) :is(.hris-module-grid, .sidebar-menu) {
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 8px !important;
}

html[data-theme] body.internal-portal-shell .workspace-gateway,
body.internal-portal-shell .workspace-gateway {
    min-height: 0 !important;
    height: 100% !important;
    max-height: 100% !important;
    overflow: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    padding-block: clamp(16px, 2vh, 28px) !important;
}

html[data-theme] body.internal-portal-shell :is(.internal-hero-section, .internal-apps-section),
body.internal-portal-shell :is(.internal-hero-section, .internal-apps-section) {
    margin-block: 0 !important;
}

html[data-theme] body.internal-portal-shell .internal-hero-section,
body.internal-portal-shell .internal-hero-section {
    gap: clamp(12px, 1.8vh, 22px) !important;
}

html[data-theme] body.internal-portal-shell .internal-status-grid,
body.internal-portal-shell .internal-status-grid {
    gap: clamp(10px, 1.3vw, 16px) !important;
}

html[data-theme] body.internal-portal-shell .internal-app-grid,
body.internal-portal-shell .internal-app-grid {
    gap: clamp(12px, 1.4vw, 18px) !important;
}

html[data-theme] body.internal-portal-shell .workspace-app-tile.internal-app-card,
body.internal-portal-shell .workspace-app-tile.internal-app-card {
    min-height: 0 !important;
    padding: clamp(16px, 1.8vw, 22px) !important;
}

html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) .internal-base-footer,
body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) .internal-base-footer {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 34px !important;
    margin: 0 !important;
    border-radius: 0 !important;
    border-inline: 0 !important;
    border-bottom: 0 !important;
    background: rgba(255, 255, 255, 0.94) !important;
}

/* Color guard: komponen internal tetap terang dan teks tetap terbaca. */
html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) :is(.card, .card-mini, .box, .panel, .form-box, .table-box, .summary-card, .internal-status-card, .workspace-app-tile, .recruitment-workspace-card, .biometric-workspace-card):not(.tone-dark):not(.is-danger),
body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) :is(.card, .card-mini, .box, .panel, .form-box, .table-box, .summary-card, .internal-status-card, .workspace-app-tile, .recruitment-workspace-card, .biometric-workspace-card):not(.tone-dark):not(.is-danger) {
    background-color: #ffffff !important;
    color: #071a33 !important;
    border-color: rgba(214, 226, 239, 0.96) !important;
    text-shadow: none !important;
}

html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) :is(.card, .card-mini, .box, .panel, .form-box, .table-box, .summary-card, .internal-status-card, .workspace-app-tile, .recruitment-workspace-card, .biometric-workspace-card):not(.tone-dark):not(.is-danger) :is(h1, h2, h3, h4, strong, label),
body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) :is(.card, .card-mini, .box, .panel, .form-box, .table-box, .summary-card, .internal-status-card, .workspace-app-tile, .recruitment-workspace-card, .biometric-workspace-card):not(.tone-dark):not(.is-danger) :is(h1, h2, h3, h4, strong, label) {
    color: #071a33 !important;
}

html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) :is(.card, .card-mini, .box, .panel, .form-box, .table-box, .summary-card, .internal-status-card, .workspace-app-tile, .recruitment-workspace-card, .biometric-workspace-card):not(.tone-dark):not(.is-danger) :is(p, small, span, td),
body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) :is(.card, .card-mini, .box, .panel, .form-box, .table-box, .summary-card, .internal-status-card, .workspace-app-tile, .recruitment-workspace-card, .biometric-workspace-card):not(.tone-dark):not(.is-danger) :is(p, small, span, td) {
    text-shadow: none !important;
}

@media (max-width: 1180px) {
    html[data-theme] body.internal-clean-page-shell,
    body.internal-clean-page-shell {
        --internal-shell-frame-top: 110px;
    }

    html[data-theme] body.internal-clean-page-shell .clean-module-layout,
    body.internal-clean-page-shell .clean-module-layout,
    html[data-theme] body.internal-module-shell .hris-clean-shell .internal-module-layout,
    body.internal-module-shell .hris-clean-shell .internal-module-layout {
        grid-template-columns: minmax(0, 1fr) !important;
        overflow: hidden !important;
    }

    html[data-theme] body:is(.internal-clean-page-shell, .internal-module-shell) :is(.internal-module-nav, .information-module-nav, .clean-module-sidebar, .info-sidebar),
    body:is(.internal-clean-page-shell, .internal-module-shell) :is(.internal-module-nav, .information-module-nav, .clean-module-sidebar, .info-sidebar) {
        max-height: min(36dvh, 280px) !important;
    }
}

@media (max-width: 760px) {
    html[data-theme] body.internal-clean-page-shell,
    body.internal-clean-page-shell {
        --internal-shell-frame-top: 110px;
    }

    html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) .main,
    body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) .main {
        grid-template-rows: auto minmax(0, 1fr) auto !important;
    }

    html[data-theme] body.internal-clean-page-shell .main,
    body.internal-clean-page-shell .main {
        grid-template-rows: minmax(0, 1fr) auto !important;
    }

    html[data-theme] body:is(.internal-clean-page-shell, .internal-module-shell) :is(.internal-module-nav, .information-module-nav, .clean-module-sidebar, .info-sidebar),
    body:is(.internal-clean-page-shell, .internal-module-shell) :is(.internal-module-nav, .information-module-nav, .clean-module-sidebar, .info-sidebar) {
        max-height: 28dvh !important;
    }

    html[data-theme] body.internal-portal-shell .workspace-gateway,
    body.internal-portal-shell .workspace-gateway {
        padding: 14px !important;
    }

    html[data-theme] body.internal-portal-shell .internal-app-grid,
    body.internal-portal-shell .internal-app-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

/* HRIS dan halaman modul zip punya konten langsung di panel, jadi panelnya yang scroll. */
html[data-theme] body.internal-module-hub-shell .page-content > .internal-module-layout > .content-panel,
body.internal-module-hub-shell .page-content > .internal-module-layout > .content-panel,
html[data-theme] body.internal-module-hub-shell .page-content.hris-clean-shell .content-panel,
body.internal-module-hub-shell .page-content.hris-clean-shell .content-panel {
    display: block !important;
    min-height: 0 !important;
    height: 100% !important;
    max-height: 100% !important;
    overflow: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-gutter: stable both-edges !important;
}

html[data-theme] body.internal-module-hub-shell .page-content > .internal-module-layout > .content-panel > *,
body.internal-module-hub-shell .page-content > .internal-module-layout > .content-panel > *,
html[data-theme] body.internal-module-hub-shell .page-content.hris-clean-shell .content-panel > *,
body.internal-module-hub-shell .page-content.hris-clean-shell .content-panel > * {
    min-width: 0 !important;
    max-width: 100% !important;
}

/* Module hub pages are launchpads, not sub-pages: keep them full-width without a sidebar. */
html[data-theme] body.internal-module-hub-shell .page-content.hris-clean-shell > .internal-module-layout.internal-module-layout--hub,
body.internal-module-hub-shell .page-content.hris-clean-shell > .internal-module-layout.internal-module-layout--hub,
html[data-theme] body.internal-wms-module-shell.internal-module-hub-shell .page-content.hris-clean-shell > .internal-module-layout.internal-module-layout--hub,
body.internal-wms-module-shell.internal-module-hub-shell .page-content.hris-clean-shell > .internal-module-layout.internal-module-layout--hub {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    gap: 0 !important;
    margin: 0 auto !important;
    padding: 0 !important;
    overflow: hidden !important;
}

html[data-theme] body.internal-module-hub-shell .page-content.hris-clean-shell > .internal-module-layout.internal-module-layout--hub > .internal-module-nav,
body.internal-module-hub-shell .page-content.hris-clean-shell > .internal-module-layout.internal-module-layout--hub > .internal-module-nav,
html[data-theme] body.internal-wms-module-shell.internal-module-hub-shell .page-content.hris-clean-shell > .internal-module-layout.internal-module-layout--hub > .internal-module-nav,
body.internal-wms-module-shell.internal-module-hub-shell .page-content.hris-clean-shell > .internal-module-layout.internal-module-layout--hub > .internal-module-nav {
    display: none !important;
}

html[data-theme] body.internal-module-hub-shell .page-content.hris-clean-shell > .internal-module-layout.internal-module-layout--hub > .content-panel,
body.internal-module-hub-shell .page-content.hris-clean-shell > .internal-module-layout.internal-module-layout--hub > .content-panel,
html[data-theme] body.internal-wms-module-shell.internal-module-hub-shell .page-content.hris-clean-shell > .internal-module-layout.internal-module-layout--hub > .content-panel,
body.internal-wms-module-shell.internal-module-hub-shell .page-content.hris-clean-shell > .internal-module-layout.internal-module-layout--hub > .content-panel {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    height: 100% !important;
    padding: clamp(22px, 3vw, 40px) !important;
    overflow: auto !important;
}

html[data-theme] body.internal-module-hub-shell .page-content.hris-clean-shell > .internal-module-layout.internal-module-layout--hub .internal-hub-card-grid,
body.internal-module-hub-shell .page-content.hris-clean-shell > .internal-module-layout.internal-module-layout--hub .internal-hub-card-grid,
html[data-theme] body.internal-wms-module-shell.internal-module-hub-shell .page-content.hris-clean-shell > .internal-module-layout.internal-module-layout--hub .internal-hub-card-grid,
body.internal-wms-module-shell.internal-module-hub-shell .page-content.hris-clean-shell > .internal-module-layout.internal-module-layout--hub .internal-hub-card-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)) !important;
}

/* === Recovery guard: hanya workspace dan halaman hub, subpage tetap pakai layout normal. === */
html:has(body.internal-portal-shell),
html:has(body.internal-module-hub-shell),
html[data-theme]:has(body.internal-portal-shell),
html[data-theme]:has(body.internal-module-hub-shell) {
    height: auto !important;
    min-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

html[data-theme] body.internal-portal-shell,
body.internal-portal-shell,
html[data-theme] body.internal-module-hub-shell,
body.internal-module-hub-shell {
    height: auto !important;
    min-height: 100dvh !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

html[data-theme] body.internal-portal-shell > .layout,
body.internal-portal-shell > .layout,
html[data-theme] body.internal-module-hub-shell > .layout,
body.internal-module-hub-shell > .layout,
html[data-theme] body.internal-portal-shell .main,
body.internal-portal-shell .main,
html[data-theme] body.internal-module-hub-shell .main,
body.internal-module-hub-shell .main {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
}

html[data-theme] body.internal-portal-shell .page-content,
body.internal-portal-shell .page-content {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
}

html[data-theme] body.internal-portal-shell .workspace-gateway,
body.internal-portal-shell .workspace-gateway {
    display: block !important;
    width: min(1180px, calc(100% - 32px)) !important;
    max-width: 1180px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 auto !important;
    padding: clamp(18px, 3vw, 42px) 0 48px !important;
    overflow: visible !important;
}

html[data-theme] body.internal-portal-shell .internal-hero-section,
body.internal-portal-shell .internal-hero-section,
html[data-theme] body.internal-portal-shell .internal-apps-section,
body.internal-portal-shell .internal-apps-section,
html[data-theme] body.internal-portal-shell .internal-app-grid,
body.internal-portal-shell .internal-app-grid {
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
}

html[data-theme] body.internal-portal-shell .internal-app-grid,
body.internal-portal-shell .internal-app-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)) !important;
}

html[data-theme] body.internal-module-hub-shell .page-content.hris-clean-shell,
body.internal-module-hub-shell .page-content.hris-clean-shell {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
}

html[data-theme] body.internal-module-hub-shell .page-content.hris-clean-shell > .internal-module-layout.internal-module-layout--hub,
body.internal-module-hub-shell .page-content.hris-clean-shell > .internal-module-layout.internal-module-layout--hub,
html[data-theme] body.internal-wms-module-shell.internal-module-hub-shell .page-content.hris-clean-shell > .internal-module-layout.internal-module-layout--hub,
body.internal-wms-module-shell.internal-module-hub-shell .page-content.hris-clean-shell > .internal-module-layout.internal-module-layout--hub {
    display: block !important;
    width: min(1280px, calc(100% - 32px)) !important;
    max-width: 1280px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 auto !important;
    overflow: visible !important;
}

html[data-theme] body.internal-module-hub-shell .page-content.hris-clean-shell > .internal-module-layout.internal-module-layout--hub > .content-panel,
body.internal-module-hub-shell .page-content.hris-clean-shell > .internal-module-layout.internal-module-layout--hub > .content-panel,
html[data-theme] body.internal-wms-module-shell.internal-module-hub-shell .page-content.hris-clean-shell > .internal-module-layout.internal-module-layout--hub > .content-panel,
body.internal-wms-module-shell.internal-module-hub-shell .page-content.hris-clean-shell > .internal-module-layout.internal-module-layout--hub > .content-panel {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
}

/* Subpage modul harus kembali ke layout dua kolom yang stabil. */
html[data-theme] body.internal-module-shell:not(.internal-module-hub-shell) .page-content.hris-clean-shell,
body.internal-module-shell:not(.internal-module-hub-shell) .page-content.hris-clean-shell {
    width: min(100% - 32px, 1480px) !important;
    max-width: 1480px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 auto !important;
    padding: 24px 0 36px !important;
    overflow: visible !important;
}

html[data-theme] body.internal-module-shell:not(.internal-module-hub-shell) .page-content.hris-clean-shell > .internal-module-layout:not(.internal-module-layout--hub),
body.internal-module-shell:not(.internal-module-hub-shell) .page-content.hris-clean-shell > .internal-module-layout:not(.internal-module-layout--hub) {
    display: grid !important;
    grid-template-columns: minmax(240px, 280px) minmax(0, 1fr) !important;
    gap: clamp(16px, 2vw, 24px) !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
}

html[data-theme] body.internal-module-shell:not(.internal-module-hub-shell) .page-content.hris-clean-shell > .internal-module-layout:not(.internal-module-layout--hub) > .content-panel,
body.internal-module-shell:not(.internal-module-hub-shell) .page-content.hris-clean-shell > .internal-module-layout:not(.internal-module-layout--hub) > .content-panel {
    display: block !important;
    height: auto !important;
    min-height: calc(100dvh - 188px) !important;
    max-height: none !important;
    overflow: visible !important;
}

html[data-theme] body.internal-module-shell:not(.internal-module-hub-shell) .page-content.hris-clean-shell > .internal-module-layout:not(.internal-module-layout--hub) > .content-panel[data-hris-module="recruitment"],
body.internal-module-shell:not(.internal-module-hub-shell) .page-content.hris-clean-shell > .internal-module-layout:not(.internal-module-layout--hub) > .content-panel[data-hris-module="recruitment"] {
    min-height: auto !important;
    padding-bottom: 18px !important;
}

/* Halaman lanjutan clean shell tetap punya sidebar dan panel konten yang tidak kepotong. */
html[data-theme] body.internal-clean-page-shell .clean-module-layout,
body.internal-clean-page-shell .clean-module-layout {
    width: min(100% - 32px, 1480px) !important;
    max-width: 1480px !important;
    margin: 24px auto 36px !important;
    grid-template-columns: minmax(240px, 280px) minmax(0, 1fr) !important;
    height: auto !important;
    min-height: calc(100dvh - var(--internal-shell-frame-top, 128px) - 36px) !important;
    max-height: none !important;
    overflow: visible !important;
}

html[data-theme] body.internal-clean-page-shell .clean-content-panel,
body.internal-clean-page-shell .clean-content-panel {
    display: block !important;
    height: auto !important;
    min-height: calc(100dvh - var(--internal-shell-frame-top, 128px) - 36px) !important;
    max-height: none !important;
    overflow: visible !important;
}

html[data-theme] body.internal-clean-page-shell .clean-content-panel > .page-content,
body.internal-clean-page-shell .clean-content-panel > .page-content {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
}

@media (max-width: 1180px) {
    html[data-theme] body.internal-module-shell:not(.internal-module-hub-shell) .page-content.hris-clean-shell > .internal-module-layout:not(.internal-module-layout--hub),
    body.internal-module-shell:not(.internal-module-hub-shell) .page-content.hris-clean-shell > .internal-module-layout:not(.internal-module-layout--hub),
    html[data-theme] body.internal-clean-page-shell .clean-module-layout,
    body.internal-clean-page-shell .clean-module-layout {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

@media (max-width: 760px) {
    html[data-theme] body.internal-module-shell:not(.internal-module-hub-shell) .page-content.hris-clean-shell,
    body.internal-module-shell:not(.internal-module-hub-shell) .page-content.hris-clean-shell,
    html[data-theme] body.internal-clean-page-shell .clean-module-layout,
    body.internal-clean-page-shell .clean-module-layout {
        width: min(100% - 20px, 760px) !important;
        margin-block: 14px 24px !important;
    }
}

/* Final guard: subpage modul bukan hub. Jangan ikut aturan launchpad/satu layar. */
html:has(body.internal-module-shell:not(.internal-module-hub-shell)),
html[data-theme]:has(body.internal-module-shell:not(.internal-module-hub-shell)) {
    height: auto !important;
    min-height: 100% !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

html[data-theme] body.internal-module-shell:not(.internal-module-hub-shell),
body.internal-module-shell:not(.internal-module-hub-shell) {
    width: 100% !important;
    height: auto !important;
    min-height: 100dvh !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

html[data-theme] body.internal-module-shell:not(.internal-module-hub-shell) > .layout,
body.internal-module-shell:not(.internal-module-hub-shell) > .layout,
html[data-theme] body.internal-module-shell:not(.internal-module-hub-shell) .main,
body.internal-module-shell:not(.internal-module-hub-shell) .main {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
}

html[data-theme] body.internal-module-shell:not(.internal-module-hub-shell) .page-content.hris-clean-shell,
body.internal-module-shell:not(.internal-module-hub-shell) .page-content.hris-clean-shell {
    display: block !important;
    width: min(1480px, calc(100% - 32px)) !important;
    max-width: 1480px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 24px auto 36px !important;
    padding: 0 !important;
    overflow: visible !important;
}

html[data-theme] body.internal-module-shell:not(.internal-module-hub-shell) .page-content.hris-clean-shell > .internal-module-layout:not(.internal-module-layout--hub),
body.internal-module-shell:not(.internal-module-hub-shell) .page-content.hris-clean-shell > .internal-module-layout:not(.internal-module-layout--hub) {
    display: grid !important;
    grid-template-columns: minmax(250px, 300px) minmax(0, 1fr) !important;
    align-items: start !important;
    gap: clamp(16px, 2vw, 24px) !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 auto !important;
    padding: 0 !important;
    overflow: visible !important;
}

html[data-theme] body.internal-module-shell:not(.internal-module-hub-shell) .page-content.hris-clean-shell > .internal-module-layout:not(.internal-module-layout--hub) > .internal-module-nav,
body.internal-module-shell:not(.internal-module-hub-shell) .page-content.hris-clean-shell > .internal-module-layout:not(.internal-module-layout--hub) > .internal-module-nav,
html[data-theme] body.internal-module-shell:not(.internal-module-hub-shell) .page-content.hris-clean-shell :is(.information-module-nav, .info-sidebar),
body.internal-module-shell:not(.internal-module-hub-shell) .page-content.hris-clean-shell :is(.information-module-nav, .info-sidebar) {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
}

html[data-theme] body.internal-module-shell:not(.internal-module-hub-shell) .page-content.hris-clean-shell .information-sidebar-card,
body.internal-module-shell:not(.internal-module-hub-shell) .page-content.hris-clean-shell .information-sidebar-card {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
}

html[data-theme] body.internal-module-shell:not(.internal-module-hub-shell) .page-content.hris-clean-shell .sidebar-menu,
body.internal-module-shell:not(.internal-module-hub-shell) .page-content.hris-clean-shell .sidebar-menu {
    display: grid !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
}

html[data-theme] body.internal-module-shell:not(.internal-module-hub-shell) .page-content.hris-clean-shell .sidebar-link,
body.internal-module-shell:not(.internal-module-hub-shell) .page-content.hris-clean-shell .sidebar-link {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

html[data-theme] body.internal-module-shell:not(.internal-module-hub-shell) .page-content.hris-clean-shell .hris-module-card-copy,
body.internal-module-shell:not(.internal-module-hub-shell) .page-content.hris-clean-shell .hris-module-card-copy {
    display: block !important;
    min-width: 0 !important;
    overflow: hidden !important;
}

html[data-theme] body.internal-module-shell:not(.internal-module-hub-shell) .page-content.hris-clean-shell .hris-module-card-copy :is(h2, small),
body.internal-module-shell:not(.internal-module-hub-shell) .page-content.hris-clean-shell .hris-module-card-copy :is(h2, small) {
    display: block !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

html[data-theme] body.internal-module-shell:not(.internal-module-hub-shell) .page-content.hris-clean-shell > .internal-module-layout:not(.internal-module-layout--hub) > .content-panel,
body.internal-module-shell:not(.internal-module-hub-shell) .page-content.hris-clean-shell > .internal-module-layout:not(.internal-module-layout--hub) > .content-panel {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: calc(100dvh - 188px) !important;
    max-height: none !important;
    overflow: visible !important;
}

@media (max-width: 1180px) {
    html[data-theme] body.internal-module-shell:not(.internal-module-hub-shell) .page-content.hris-clean-shell > .internal-module-layout:not(.internal-module-layout--hub),
    body.internal-module-shell:not(.internal-module-hub-shell) .page-content.hris-clean-shell > .internal-module-layout:not(.internal-module-layout--hub) {
        grid-template-columns: minmax(220px, 260px) minmax(0, 1fr) !important;
    }
}

@media (max-width: 860px) {
    html[data-theme] body.internal-module-shell:not(.internal-module-hub-shell) .page-content.hris-clean-shell,
    body.internal-module-shell:not(.internal-module-hub-shell) .page-content.hris-clean-shell {
        width: min(100% - 20px, 860px) !important;
        margin-block: 14px 28px !important;
    }

    html[data-theme] body.internal-module-shell:not(.internal-module-hub-shell) .page-content.hris-clean-shell > .internal-module-layout:not(.internal-module-layout--hub),
    body.internal-module-shell:not(.internal-module-hub-shell) .page-content.hris-clean-shell > .internal-module-layout:not(.internal-module-layout--hub) {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

/* Final guard: clean WMS subpage seperti /request/ tetap layout kerja normal, bukan rail/hub kosong. */
html:has(body.internal-clean-page-shell.wms-refactor-shell),
html[data-theme]:has(body.internal-clean-page-shell.wms-refactor-shell) {
    height: auto !important;
    min-height: 100% !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

html[data-theme] body.internal-clean-page-shell.wms-refactor-shell,
body.internal-clean-page-shell.wms-refactor-shell {
    width: 100% !important;
    height: auto !important;
    min-height: 100dvh !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

html[data-theme] body.internal-clean-page-shell.wms-refactor-shell > .layout,
body.internal-clean-page-shell.wms-refactor-shell > .layout,
html[data-theme] body.internal-clean-page-shell.wms-refactor-shell .main,
body.internal-clean-page-shell.wms-refactor-shell .main {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
}

html[data-theme] body.internal-clean-page-shell.wms-refactor-shell .clean-module-layout,
body.internal-clean-page-shell.wms-refactor-shell .clean-module-layout {
    display: grid !important;
    grid-template-columns: minmax(250px, 300px) minmax(0, 1fr) !important;
    align-items: start !important;
    gap: clamp(16px, 2vw, 24px) !important;
    width: min(1480px, calc(100% - 32px)) !important;
    max-width: 1480px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 24px auto 36px !important;
    padding: 0 !important;
    overflow: visible !important;
}

html[data-theme] body.internal-clean-page-shell.wms-refactor-shell .clean-module-sidebar,
body.internal-clean-page-shell.wms-refactor-shell .clean-module-sidebar,
html[data-theme] body.internal-clean-page-shell.wms-refactor-shell .internal-module-nav,
body.internal-clean-page-shell.wms-refactor-shell .internal-module-nav,
html[data-theme] body.internal-clean-page-shell.wms-refactor-shell :is(.information-module-nav, .info-sidebar),
body.internal-clean-page-shell.wms-refactor-shell :is(.information-module-nav, .info-sidebar) {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
}

html[data-theme] body.internal-clean-page-shell.wms-refactor-shell .information-sidebar-card,
body.internal-clean-page-shell.wms-refactor-shell .information-sidebar-card {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
}

html[data-theme] body.internal-clean-page-shell.wms-refactor-shell .sidebar-menu,
body.internal-clean-page-shell.wms-refactor-shell .sidebar-menu {
    display: grid !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
}

html[data-theme] body.internal-clean-page-shell.wms-refactor-shell .sidebar-link,
body.internal-clean-page-shell.wms-refactor-shell .sidebar-link {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

html[data-theme] body.internal-clean-page-shell.wms-refactor-shell .hris-module-card-copy,
body.internal-clean-page-shell.wms-refactor-shell .hris-module-card-copy {
    display: block !important;
    min-width: 0 !important;
    overflow: hidden !important;
}

html[data-theme] body.internal-clean-page-shell.wms-refactor-shell .hris-module-card-copy :is(h2, small),
body.internal-clean-page-shell.wms-refactor-shell .hris-module-card-copy :is(h2, small) {
    display: block !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

html[data-theme] body.internal-clean-page-shell.wms-refactor-shell .clean-content-panel,
body.internal-clean-page-shell.wms-refactor-shell .clean-content-panel {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: calc(100dvh - 188px) !important;
    max-height: none !important;
    overflow: visible !important;
}

html[data-theme] body.internal-clean-page-shell.wms-refactor-shell .clean-content-panel > .page-content,
body.internal-clean-page-shell.wms-refactor-shell .clean-content-panel > .page-content {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
}

@media (max-width: 860px) {
    html[data-theme] body.internal-clean-page-shell.wms-refactor-shell .clean-module-layout,
    body.internal-clean-page-shell.wms-refactor-shell .clean-module-layout {
        grid-template-columns: minmax(0, 1fr) !important;
        width: min(100% - 20px, 860px) !important;
        margin-block: 14px 28px !important;
    }
}

/* Final scoped hub and AI fixes: jangan biarkan aturan subpage/clean shell saling menimpa. */
html[data-theme] body.internal-module-hub-shell .page-content.hris-clean-shell > .internal-module-layout.internal-module-layout--hub,
body.internal-module-hub-shell .page-content.hris-clean-shell > .internal-module-layout.internal-module-layout--hub {
    display: block !important;
    width: min(1440px, calc(100% - 48px)) !important;
    max-width: 1440px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 24px auto 40px !important;
    padding: 0 !important;
    overflow: visible !important;
}

html[data-theme] body.internal-module-hub-shell .page-content.hris-clean-shell > .internal-module-layout.internal-module-layout--hub > .content-panel,
body.internal-module-hub-shell .page-content.hris-clean-shell > .internal-module-layout.internal-module-layout--hub > .content-panel {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: clamp(26px, 3vw, 42px) !important;
    overflow: visible !important;
}

html[data-theme] body.internal-module-hub-shell .internal-hub-card-grid,
body.internal-module-hub-shell .internal-hub-card-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 18px !important;
}

html[data-theme] body.internal-module-hub-shell .internal-hub-card,
body.internal-module-hub-shell .internal-hub-card {
    min-height: 128px !important;
    padding: 18px 20px !important;
}

html[data-theme] body.internal-module-hub-shell .internal-hub-card h2,
body.internal-module-hub-shell .internal-hub-card h2 {
    font-size: 0.96rem !important;
}

html[data-theme] body.internal-module-hub-shell .internal-hub-card p,
body.internal-module-hub-shell .internal-hub-card p {
    font-size: 0.86rem !important;
    line-height: 1.45 !important;
}

html[data-theme] body.internal-clean-page-shell .clean-module-layout.clean-module-layout--no-sidebar,
body.internal-clean-page-shell .clean-module-layout.clean-module-layout--no-sidebar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: min(1320px, calc(100% - 32px)) !important;
    max-width: 1320px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 24px auto 36px !important;
    overflow: visible !important;
}

html[data-theme] body.internal-clean-page-shell .clean-module-layout.clean-module-layout--no-sidebar .clean-content-panel,
body.internal-clean-page-shell .clean-module-layout.clean-module-layout--no-sidebar .clean-content-panel {
    display: block !important;
    grid-column: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: clamp(24px, 3vw, 38px) !important;
    overflow: visible !important;
}

html[data-theme] body.pos-clean-shell.internal-clean-page-shell .clean-module-layout.clean-module-layout--no-sidebar .clean-content-panel,
body.pos-clean-shell.internal-clean-page-shell .clean-module-layout.clean-module-layout--no-sidebar .clean-content-panel {
    padding: 0 !important;
}

html[data-theme] body.internal-clean-page-shell .clean-module-layout.clean-module-layout--no-sidebar .page-hero,
body.internal-clean-page-shell .clean-module-layout.clean-module-layout--no-sidebar .page-hero {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    position: relative !important;
    z-index: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 0 22px !important;
    padding: 0 !important;
    overflow: visible !important;
}

html[data-theme] body.internal-clean-page-shell .clean-module-layout.clean-module-layout--no-sidebar .page-hero-text,
body.internal-clean-page-shell .clean-module-layout.clean-module-layout--no-sidebar .page-hero-text {
    flex: 1 1 min(100%, 620px) !important;
    width: auto !important;
    min-width: min(100%, 420px) !important;
    max-width: 860px !important;
    overflow: visible !important;
}

html[data-theme] body.internal-clean-page-shell .clean-module-layout.clean-module-layout--no-sidebar .page-actions-desktop-slot,
body.internal-clean-page-shell .clean-module-layout.clean-module-layout--no-sidebar .page-actions-desktop-slot,
html[data-theme] body.internal-clean-page-shell .clean-module-layout.clean-module-layout--no-sidebar .page-actions,
body.internal-clean-page-shell .clean-module-layout.clean-module-layout--no-sidebar .page-actions,
html[data-theme] body.internal-clean-page-shell .clean-module-layout.clean-module-layout--no-sidebar .split-actions,
body.internal-clean-page-shell .clean-module-layout.clean-module-layout--no-sidebar .split-actions {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

html[data-theme] body.internal-clean-page-shell .clean-module-layout.clean-module-layout--no-sidebar .split-actions > *,
body.internal-clean-page-shell .clean-module-layout.clean-module-layout--no-sidebar .split-actions > * {
    flex: 0 0 auto !important;
    width: auto !important;
}

html[data-theme] body.internal-clean-page-shell .clean-module-layout.clean-module-layout--no-sidebar .clean-content-panel > .page-content,
body.internal-clean-page-shell .clean-module-layout.clean-module-layout--no-sidebar .clean-content-panel > .page-content {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
    overscroll-behavior: auto !important;
    scrollbar-gutter: auto !important;
}

html[data-theme] body.ai-assistant-shell,
body.ai-assistant-shell {
    overflow-x: hidden !important;
}

html[data-theme] body.ai-assistant-shell .page-motion-curtain,
body.ai-assistant-shell .page-motion-curtain {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

html[data-theme] body.ai-assistant-shell > .layout,
body.ai-assistant-shell > .layout,
html[data-theme] body.ai-assistant-shell .main,
body.ai-assistant-shell .main {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
}

html[data-theme] body.ai-assistant-shell .main,
body.ai-assistant-shell .main {
    padding: 0 0 36px !important;
}

html[data-theme] body.ai-assistant-shell .clean-module-layout.clean-module-layout--no-sidebar,
body.ai-assistant-shell .clean-module-layout.clean-module-layout--no-sidebar {
    display: block !important;
    width: min(1320px, calc(100vw - 32px)) !important;
    max-width: 1320px !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 24px auto 36px !important;
    padding: 0 !important;
    overflow: visible !important;
}

html[data-theme] body.ai-assistant-shell .clean-content-panel,
body.ai-assistant-shell .clean-content-panel {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
}

html[data-theme] body.ai-assistant-shell .page-hero,
body.ai-assistant-shell .page-hero {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    gap: 16px !important;
    overflow: visible !important;
}

html[data-theme] body.ai-assistant-shell .page-hero-text,
body.ai-assistant-shell .page-hero-text {
    flex: 1 1 520px !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 820px !important;
}

html[data-theme] body.ai-assistant-shell .page-hero h1,
body.ai-assistant-shell .page-hero h1 {
    max-width: 100% !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
}

html[data-theme] body.ai-assistant-shell .clean-content-panel > .page-content,
body.ai-assistant-shell .clean-content-panel > .page-content {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
}

html[data-theme] body.internal-clean-page-shell .ai-shell,
body.internal-clean-page-shell .ai-shell {
    display: grid !important;
    gap: 20px !important;
    width: 100% !important;
    min-width: 0 !important;
}

html[data-theme] body.internal-clean-page-shell .ai-status-band,
body.internal-clean-page-shell .ai-status-band,
html[data-theme] body.internal-clean-page-shell .ai-chat-panel,
body.internal-clean-page-shell .ai-chat-panel,
html[data-theme] body.internal-clean-page-shell .ai-knowledge-panel,
body.internal-clean-page-shell .ai-knowledge-panel {
    border: 1px solid rgba(223, 229, 238, 0.9) !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    box-shadow: 0 18px 42px rgba(15, 35, 68, 0.07) !important;
    padding: clamp(18px, 2vw, 26px) !important;
}

html[data-theme] body.internal-clean-page-shell .ai-status-grid,
body.internal-clean-page-shell .ai-status-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)) !important;
    gap: 14px !important;
}

html[data-theme] body.internal-clean-page-shell .ai-workbench,
body.internal-clean-page-shell .ai-workbench {
    display: grid !important;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr) !important;
    gap: 18px !important;
    align-items: start !important;
}

html[data-theme] body.internal-clean-page-shell .ai-chat-log,
body.internal-clean-page-shell .ai-chat-log {
    max-height: 420px !important;
    overflow: auto !important;
}

html[data-theme] body.internal-clean-page-shell .ai-queue-strip,
body.internal-clean-page-shell .ai-queue-strip,
html[data-theme] body.internal-clean-page-shell .ai-quick-actions,
body.internal-clean-page-shell .ai-quick-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    align-items: center !important;
}

html[data-theme] body.internal-clean-page-shell .ai-queue-strip,
body.internal-clean-page-shell .ai-queue-strip {
    margin-top: 14px !important;
}

html[data-theme] body.internal-clean-page-shell .ai-queue-pill,
body.internal-clean-page-shell .ai-queue-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    min-height: 34px !important;
    padding: 7px 11px !important;
    border: 1px solid rgba(208, 222, 238, 0.92) !important;
    border-radius: 999px !important;
    background: #f8fbff !important;
    color: #324762 !important;
    font-size: 0.84rem !important;
    line-height: 1.25 !important;
}

html[data-theme] body.internal-clean-page-shell .ai-queue-pill b,
body.internal-clean-page-shell .ai-queue-pill b {
    color: #0f2442 !important;
}

html[data-theme] body.internal-clean-page-shell .ai-chat-head,
body.internal-clean-page-shell .ai-chat-head,
html[data-theme] body.internal-clean-page-shell .ai-knowledge-head,
body.internal-clean-page-shell .ai-knowledge-head,
html[data-theme] body.internal-clean-page-shell .section-title,
body.internal-clean-page-shell .section-title {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 12px !important;
}

html[data-theme] body.internal-clean-page-shell .ai-chat-head,
body.internal-clean-page-shell .ai-chat-head {
    margin-bottom: 14px !important;
}

html[data-theme] body.internal-clean-page-shell .ai-chat-head span,
body.internal-clean-page-shell .ai-chat-head span,
html[data-theme] body.internal-clean-page-shell .ai-knowledge-head span,
body.internal-clean-page-shell .ai-knowledge-head span {
    display: block !important;
    color: #5f718b !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
}

html[data-theme] body.internal-clean-page-shell .ai-chat-log,
body.internal-clean-page-shell .ai-chat-log {
    display: grid !important;
    gap: 12px !important;
    margin: 14px 0 !important;
}

html[data-theme] body.internal-clean-page-shell .ai-message,
body.internal-clean-page-shell .ai-message {
    display: grid !important;
    grid-template-columns: 38px minmax(0, 1fr) !important;
    gap: 10px !important;
    align-items: start !important;
}

html[data-theme] body.internal-clean-page-shell .ai-message-avatar,
body.internal-clean-page-shell .ai-message-avatar {
    display: grid !important;
    place-items: center !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 13px !important;
    background: #eaf3ff !important;
    color: #0f3f88 !important;
    font-size: 0.72rem !important;
    font-weight: 900 !important;
}

html[data-theme] body.internal-clean-page-shell .ai-message-bubble,
body.internal-clean-page-shell .ai-message-bubble {
    min-width: 0 !important;
    padding: 12px 14px !important;
    border: 1px solid rgba(208, 222, 238, 0.88) !important;
    border-radius: 16px !important;
    background: #f8fbff !important;
}

html[data-theme] body.internal-clean-page-shell .ai-message-bubble p,
body.internal-clean-page-shell .ai-message-bubble p {
    margin: 0 !important;
    line-height: 1.5 !important;
}

html[data-theme] body.internal-clean-page-shell .ai-quick-actions button,
body.internal-clean-page-shell .ai-quick-actions button,
html[data-theme] body.internal-clean-page-shell .ai-chat-form button,
body.internal-clean-page-shell .ai-chat-form button {
    min-height: 40px !important;
    border: 0 !important;
    border-radius: 999px !important;
    padding: 9px 16px !important;
    background: linear-gradient(135deg, #1f5fbf, #48a7ff) !important;
    color: #ffffff !important;
    font-weight: 800 !important;
}

html[data-theme] body.internal-clean-page-shell .ai-chat-form,
body.internal-clean-page-shell .ai-chat-form {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 10px !important;
    align-items: end !important;
    margin-top: 12px !important;
}

html[data-theme] body.internal-clean-page-shell .ai-chat-form textarea,
body.internal-clean-page-shell .ai-chat-form textarea {
    width: 100% !important;
    min-height: 52px !important;
    resize: vertical !important;
    border: 1px solid rgba(208, 222, 238, 0.95) !important;
    border-radius: 14px !important;
    padding: 12px 14px !important;
    background: #ffffff !important;
    color: #0f2442 !important;
}

html[data-theme] body.internal-clean-page-shell .ai-knowledge-list,
body.internal-clean-page-shell .ai-knowledge-list {
    display: grid !important;
    gap: 12px !important;
    margin-top: 14px !important;
}

html[data-theme] body.internal-clean-page-shell .ai-knowledge-item,
body.internal-clean-page-shell .ai-knowledge-item {
    padding: 12px 0 !important;
    border-top: 1px solid rgba(223, 229, 238, 0.9) !important;
}

@media (max-width: 1180px) {
    html[data-theme] body.internal-module-hub-shell .internal-hub-card-grid,
    body.internal-module-hub-shell .internal-hub-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 980px) {
    html[data-theme] body.internal-clean-page-shell .ai-workbench,
    body.internal-clean-page-shell .ai-workbench {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

@media (max-width: 760px) {
    html[data-theme] body.internal-module-hub-shell .page-content.hris-clean-shell > .internal-module-layout.internal-module-layout--hub,
    body.internal-module-hub-shell .page-content.hris-clean-shell > .internal-module-layout.internal-module-layout--hub,
    html[data-theme] body.internal-clean-page-shell .clean-module-layout.clean-module-layout--no-sidebar,
    body.internal-clean-page-shell .clean-module-layout.clean-module-layout--no-sidebar {
        width: min(100% - 20px, 760px) !important;
        margin: 14px auto 28px !important;
    }

    html[data-theme] body.internal-module-hub-shell .internal-hub-card-grid,
    body.internal-module-hub-shell .internal-hub-card-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    html[data-theme] body.internal-module-hub-shell .internal-hub-card,
    body.internal-module-hub-shell .internal-hub-card {
        min-height: 110px !important;
    }
}

/* === Attendance family shell guard (final override to prevent clipped scroll) === */
html[data-theme] body.internal-clean-page-shell:is(.attendance-page-shell, .schedule-page-shell, .daily-report-portal-shell, .overtime-page-shell, .kpi-page-shell),
body.internal-clean-page-shell:is(.attendance-page-shell, .schedule-page-shell, .daily-report-portal-shell, .overtime-page-shell, .kpi-page-shell) {
    height: auto !important;
    min-height: 100dvh !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

html[data-theme] body.internal-clean-page-shell:is(.attendance-page-shell, .schedule-page-shell, .daily-report-portal-shell, .overtime-page-shell, .kpi-page-shell) > .layout,
body.internal-clean-page-shell:is(.attendance-page-shell, .schedule-page-shell, .daily-report-portal-shell, .overtime-page-shell, .kpi-page-shell) > .layout,
html[data-theme] body.internal-clean-page-shell:is(.attendance-page-shell, .schedule-page-shell, .daily-report-portal-shell, .overtime-page-shell, .kpi-page-shell) .main,
body.internal-clean-page-shell:is(.attendance-page-shell, .schedule-page-shell, .daily-report-portal-shell, .overtime-page-shell, .kpi-page-shell) .main,
html[data-theme] body.internal-clean-page-shell:is(.attendance-page-shell, .schedule-page-shell, .daily-report-portal-shell, .overtime-page-shell, .kpi-page-shell) .clean-module-layout,
body.internal-clean-page-shell:is(.attendance-page-shell, .schedule-page-shell, .daily-report-portal-shell, .overtime-page-shell, .kpi-page-shell) .clean-module-layout {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    align-items: start !important;
}

html[data-theme] body.internal-clean-page-shell:is(.attendance-page-shell, .schedule-page-shell, .daily-report-portal-shell, .overtime-page-shell, .kpi-page-shell) .clean-content-panel,
body.internal-clean-page-shell:is(.attendance-page-shell, .schedule-page-shell, .daily-report-portal-shell, .overtime-page-shell, .kpi-page-shell) .clean-content-panel,
html[data-theme] body.internal-clean-page-shell:is(.attendance-page-shell, .schedule-page-shell, .daily-report-portal-shell, .overtime-page-shell, .kpi-page-shell) .clean-content-panel > .page-content,
body.internal-clean-page-shell:is(.attendance-page-shell, .schedule-page-shell, .daily-report-portal-shell, .overtime-page-shell, .kpi-page-shell) .clean-content-panel > .page-content,
html[data-theme] body.internal-clean-page-shell:is(.attendance-page-shell, .schedule-page-shell, .daily-report-portal-shell, .overtime-page-shell, .kpi-page-shell) .clean-content-panel > .page-content-bleed,
body.internal-clean-page-shell:is(.attendance-page-shell, .schedule-page-shell, .daily-report-portal-shell, .overtime-page-shell, .kpi-page-shell) .clean-content-panel > .page-content-bleed {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
}

body.attendance-page-shell .attendance-camera-shortcut-root,
body.attendance-page-shell .floating-toolbelt,
body.attendance-page-shell .mobile-dock {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Schedule board can scroll horizontally, but page shell must remain naturally scrollable. */
html[data-theme] body.schedule-page-shell.internal-clean-page-shell .clean-content-panel,
body.schedule-page-shell.internal-clean-page-shell .clean-content-panel,
html[data-theme] body.schedule-page-shell.internal-clean-page-shell .clean-content-panel > .page-content.page-content-bleed,
body.schedule-page-shell.internal-clean-page-shell .clean-content-panel > .page-content.page-content-bleed {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
}

body.schedule-page-shell .schedule-board-lane-wrap,
body.schedule-page-shell .schedule-board-wrap,
body.schedule-page-shell :is(.schedule-board-shell, .schedule-live-shell, .table-box) {
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
}

.overtime-hour-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.overtime-hour-presets button {
    border: 1px solid rgba(15, 42, 76, 0.16);
    border-radius: 999px;
    background: #f7fbff;
    color: #0f2a4c;
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 800;
    line-height: 1;
    min-height: 34px;
    padding: 8px 12px;
}

.overtime-hour-presets button:hover,
.overtime-hour-presets button:focus-visible {
    background: #eaf4ff;
    border-color: rgba(36, 123, 245, 0.38);
    color: #125ebf;
}

/* === Final internal font polish: keep Plus Jakarta Sans modern and lighter across portal shells === */
body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell),
body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) :is(
    .workspace-gateway,
    .clean-module-layout,
    .internal-module-layout,
    .content-panel,
    .clean-content-panel,
    .info-sidebar,
    .card,
    .panel,
    .table-box,
    .form-box,
    .box,
    button,
    input,
    select,
    textarea
) {
    font-family: var(--font-sans, "Plus Jakarta Sans", Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif) !important;
    font-optical-sizing: auto;
}

body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) :is(
    p,
    li,
    td,
    th,
    small,
    .helper-text,
    .muted,
    .text-muted,
    .summary-card small,
    .workspace-app-tile p,
    .module-menu-card p,
    .card p,
    .content-panel p,
    .info-sidebar p
) {
    font-weight: 400 !important;
}

body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) :is(
    label,
    .sidebar a,
    .sidebar-link,
    .sidebar-subtile,
    .internal-module-nav a,
    .internal-module-nav button,
    .brand-fallback,
    .app-count,
    .breadcrumb,
    .page-breadcrumb,
    .summary-label,
    .summary-card span,
    .workspace-summary-card span,
    .stat-card span,
    .user-nav small
) {
    font-weight: 500 !important;
}

body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) :is(
    button,
    .btn,
    .button-primary,
    .button-secondary,
    .ghost-button,
    .page-actions a,
    .page-actions button,
    .notification-button,
    .profile-button,
    .summary-card strong,
    .workspace-summary-card strong,
    .workspace-app-tile strong,
    .module-menu-card strong,
    .stat-card strong,
    .sidebar-title,
    .brand-copy strong,
    .user-nav strong,
    .hris-module-summary-copy strong
) {
    font-weight: 600 !important;
}

body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) :is(
    h1,
    h2,
    .page-title,
    .workspace-hero h1,
    .page-hero h1,
    .section-heading h2,
    .internal-module-title,
    .content-panel > header h1,
    .content-panel > header h2,
    .workspace-gateway h1,
    .clean-page-title
) {
    font-weight: 700 !important;
}

body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) :is(
    h3,
    h4,
    .section-title,
    .card-title,
    .panel-title,
    .module-menu-card h3,
    .workspace-app-tile h3
) {
    font-weight: 600 !important;
}

body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) :is(
    .eyebrow,
    .kicker,
    .page-eyebrow,
    .section-kicker,
    .module-kicker,
    .hris-module-summary-copy > span:first-child
) {
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
}

/* === Attendance hidden-state guard - 2026-05-25 ===
   Fix: beberapa selector compact memakai display:* !important sehingga elemen
   dengan atribut hidden tetap muncul (preview foto kosong, lokasi lainnya,
   link Google Maps, dan fallback camera). Hidden harus menang di halaman absen. */
html[data-theme] body.attendance-page-shell .attendance-portal-main [hidden],
body.attendance-page-shell .attendance-portal-main [hidden] {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

html[data-theme] body.attendance-page-shell .attendance-portal-main .attendance-camera-frame :is(img, canvas)[hidden],
body.attendance-page-shell .attendance-portal-main .attendance-camera-frame :is(img, canvas)[hidden],
html[data-theme] body.attendance-page-shell .attendance-portal-main .attendance-camera-actions :is(button, input)[hidden],
body.attendance-page-shell .attendance-portal-main .attendance-camera-actions :is(button, input)[hidden],
html[data-theme] body.attendance-page-shell .attendance-portal-main .attendance-form-panel :is(div, a, small, input, select, textarea, button)[hidden],
body.attendance-page-shell .attendance-portal-main .attendance-form-panel :is(div, a, small, input, select, textarea, button)[hidden] {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* === Attendance module layout recovery - 2026-05-25 v2 ===
   Guard khusus group BJAS Attendance: sidebar + konten harus tetap 2 kolom
   normal di desktop dan 1 kolom di mobile. Mencegah konten Report/Absen
   menyempit sehingga judul pecah per kata. */
html[data-theme] body.internal-clean-page-shell:is(.attendance-page-shell, .schedule-page-shell, .daily-report-portal-shell, .overtime-page-shell, .kpi-page-shell, .leave-page-shell),
body.internal-clean-page-shell:is(.attendance-page-shell, .schedule-page-shell, .daily-report-portal-shell, .overtime-page-shell, .kpi-page-shell, .leave-page-shell) {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

html[data-theme] body.internal-clean-page-shell:is(.attendance-page-shell, .schedule-page-shell, .daily-report-portal-shell, .overtime-page-shell, .kpi-page-shell, .leave-page-shell) .main,
body.internal-clean-page-shell:is(.attendance-page-shell, .schedule-page-shell, .daily-report-portal-shell, .overtime-page-shell, .kpi-page-shell, .leave-page-shell) .main {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    overflow: visible !important;
}

html[data-theme] body.internal-clean-page-shell:is(.attendance-page-shell, .schedule-page-shell, .daily-report-portal-shell, .overtime-page-shell, .kpi-page-shell, .leave-page-shell) .clean-module-layout,
body.internal-clean-page-shell:is(.attendance-page-shell, .schedule-page-shell, .daily-report-portal-shell, .overtime-page-shell, .kpi-page-shell, .leave-page-shell) .clean-module-layout {
    display: grid !important;
    grid-template-columns: minmax(220px, 280px) minmax(0, 1fr) !important;
    gap: 22px !important;
    align-items: start !important;
    width: min(1500px, calc(100% - 40px)) !important;
    max-width: 1500px !important;
    min-width: 0 !important;
    margin: 24px auto 36px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

html[data-theme] body.internal-clean-page-shell:is(.attendance-page-shell, .schedule-page-shell, .daily-report-portal-shell, .overtime-page-shell, .kpi-page-shell, .leave-page-shell) .clean-module-sidebar,
body.internal-clean-page-shell:is(.attendance-page-shell, .schedule-page-shell, .daily-report-portal-shell, .overtime-page-shell, .kpi-page-shell, .leave-page-shell) .clean-module-sidebar {
    grid-column: 1 !important;
    width: 100% !important;
    max-width: 280px !important;
    min-width: 0 !important;
    align-self: start !important;
    overflow: visible !important;
}

html[data-theme] body.internal-clean-page-shell:is(.attendance-page-shell, .schedule-page-shell, .daily-report-portal-shell, .overtime-page-shell, .kpi-page-shell, .leave-page-shell) .clean-module-sidebar .information-sidebar-card,
body.internal-clean-page-shell:is(.attendance-page-shell, .schedule-page-shell, .daily-report-portal-shell, .overtime-page-shell, .kpi-page-shell, .leave-page-shell) .clean-module-sidebar .information-sidebar-card,
html[data-theme] body.internal-clean-page-shell:is(.attendance-page-shell, .schedule-page-shell, .daily-report-portal-shell, .overtime-page-shell, .kpi-page-shell, .leave-page-shell) .clean-module-sidebar .hris-module-disclosure,
body.internal-clean-page-shell:is(.attendance-page-shell, .schedule-page-shell, .daily-report-portal-shell, .overtime-page-shell, .kpi-page-shell, .leave-page-shell) .clean-module-sidebar .hris-module-disclosure {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
}

html[data-theme] body.internal-clean-page-shell:is(.attendance-page-shell, .schedule-page-shell, .daily-report-portal-shell, .overtime-page-shell, .kpi-page-shell, .leave-page-shell) .clean-content-panel,
body.internal-clean-page-shell:is(.attendance-page-shell, .schedule-page-shell, .daily-report-portal-shell, .overtime-page-shell, .kpi-page-shell, .leave-page-shell) .clean-content-panel {
    grid-column: 2 !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: clamp(16px, 2vw, 24px) !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

html[data-theme] body.internal-clean-page-shell:is(.attendance-page-shell, .schedule-page-shell, .daily-report-portal-shell, .overtime-page-shell, .kpi-page-shell, .leave-page-shell) .clean-content-panel > :is(.page-hero, .flash-stack, .page-content, .page-content-bleed),
body.internal-clean-page-shell:is(.attendance-page-shell, .schedule-page-shell, .daily-report-portal-shell, .overtime-page-shell, .kpi-page-shell, .leave-page-shell) .clean-content-panel > :is(.page-hero, .flash-stack, .page-content, .page-content-bleed) {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
}

html[data-theme] body.internal-clean-page-shell:is(.attendance-page-shell, .schedule-page-shell, .daily-report-portal-shell, .overtime-page-shell, .kpi-page-shell, .leave-page-shell) .clean-content-panel > .page-content.page-content-bleed,
body.internal-clean-page-shell:is(.attendance-page-shell, .schedule-page-shell, .daily-report-portal-shell, .overtime-page-shell, .kpi-page-shell, .leave-page-shell) .clean-content-panel > .page-content.page-content-bleed {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
    padding: 0 0 28px !important;
    overflow: visible !important;
}

html[data-theme] body.internal-clean-page-shell:is(.attendance-page-shell, .schedule-page-shell, .daily-report-portal-shell, .overtime-page-shell, .kpi-page-shell, .leave-page-shell) :is(.section-title, .page-hero, .page-hero-text),
body.internal-clean-page-shell:is(.attendance-page-shell, .schedule-page-shell, .daily-report-portal-shell, .overtime-page-shell, .kpi-page-shell, .leave-page-shell) :is(.section-title, .page-hero, .page-hero-text) {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

html[data-theme] body.internal-clean-page-shell:is(.attendance-page-shell, .schedule-page-shell, .daily-report-portal-shell, .overtime-page-shell, .kpi-page-shell, .leave-page-shell) .section-title > div,
body.internal-clean-page-shell:is(.attendance-page-shell, .schedule-page-shell, .daily-report-portal-shell, .overtime-page-shell, .kpi-page-shell, .leave-page-shell) .section-title > div,
html[data-theme] body.internal-clean-page-shell:is(.attendance-page-shell, .schedule-page-shell, .daily-report-portal-shell, .overtime-page-shell, .kpi-page-shell, .leave-page-shell) .page-hero-text,
body.internal-clean-page-shell:is(.attendance-page-shell, .schedule-page-shell, .daily-report-portal-shell, .overtime-page-shell, .kpi-page-shell, .leave-page-shell) .page-hero-text {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

html[data-theme] body.internal-clean-page-shell:is(.attendance-page-shell, .schedule-page-shell, .daily-report-portal-shell, .overtime-page-shell, .kpi-page-shell, .leave-page-shell) :is(.section-title h1, .section-title h2, .section-title h3, .section-title p, .page-hero h1, .page-hero p),
body.internal-clean-page-shell:is(.attendance-page-shell, .schedule-page-shell, .daily-report-portal-shell, .overtime-page-shell, .kpi-page-shell, .leave-page-shell) :is(.section-title h1, .section-title h2, .section-title h3, .section-title p, .page-hero h1, .page-hero p) {
    max-width: 100% !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    white-space: normal !important;
}

@media (max-width: 980px) {
    html[data-theme] body.internal-clean-page-shell:is(.attendance-page-shell, .schedule-page-shell, .daily-report-portal-shell, .overtime-page-shell, .kpi-page-shell, .leave-page-shell) .clean-module-layout,
    body.internal-clean-page-shell:is(.attendance-page-shell, .schedule-page-shell, .daily-report-portal-shell, .overtime-page-shell, .kpi-page-shell, .leave-page-shell) .clean-module-layout {
        grid-template-columns: minmax(0, 1fr) !important;
        width: min(100% - 24px, 980px) !important;
        gap: 14px !important;
        margin: 14px auto 28px !important;
    }

    html[data-theme] body.internal-clean-page-shell:is(.attendance-page-shell, .schedule-page-shell, .daily-report-portal-shell, .overtime-page-shell, .kpi-page-shell, .leave-page-shell) .clean-module-sidebar,
    body.internal-clean-page-shell:is(.attendance-page-shell, .schedule-page-shell, .daily-report-portal-shell, .overtime-page-shell, .kpi-page-shell, .leave-page-shell) .clean-module-sidebar,
    html[data-theme] body.internal-clean-page-shell:is(.attendance-page-shell, .schedule-page-shell, .daily-report-portal-shell, .overtime-page-shell, .kpi-page-shell, .leave-page-shell) .clean-content-panel,
    body.internal-clean-page-shell:is(.attendance-page-shell, .schedule-page-shell, .daily-report-portal-shell, .overtime-page-shell, .kpi-page-shell, .leave-page-shell) .clean-content-panel {
        grid-column: 1 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
}

@media (max-width: 640px) {
    html[data-theme] body.internal-clean-page-shell:is(.attendance-page-shell, .schedule-page-shell, .daily-report-portal-shell, .overtime-page-shell, .kpi-page-shell, .leave-page-shell) .clean-content-panel,
    body.internal-clean-page-shell:is(.attendance-page-shell, .schedule-page-shell, .daily-report-portal-shell, .overtime-page-shell, .kpi-page-shell, .leave-page-shell) .clean-content-panel {
        padding: 12px !important;
        border-radius: 12px !important;
    }
}


/* attendance-layout-hard-guard duplicate in static css */
/* Attendance clean-shell hard guard: template-level fallback so the Attendance pages
   stay readable even when the static CSS cache is stale. */
html[data-theme] body.internal-clean-page-shell:is(.attendance-page-shell, .schedule-page-shell, .daily-report-portal-shell, .overtime-page-shell, .kpi-page-shell, .leave-page-shell) .internal-shell-compat-markers[hidden],
body.internal-clean-page-shell:is(.attendance-page-shell, .schedule-page-shell, .daily-report-portal-shell, .overtime-page-shell, .kpi-page-shell, .leave-page-shell) .internal-shell-compat-markers[hidden] {
    display: none !important;
}

html[data-theme] body.internal-clean-page-shell:is(.attendance-page-shell, .schedule-page-shell, .daily-report-portal-shell, .overtime-page-shell, .kpi-page-shell, .leave-page-shell),
body.internal-clean-page-shell:is(.attendance-page-shell, .schedule-page-shell, .daily-report-portal-shell, .overtime-page-shell, .kpi-page-shell, .leave-page-shell) {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
}

html[data-theme] body.internal-clean-page-shell:is(.attendance-page-shell, .schedule-page-shell, .daily-report-portal-shell, .overtime-page-shell, .kpi-page-shell, .leave-page-shell) :is(.layout, .main),
body.internal-clean-page-shell:is(.attendance-page-shell, .schedule-page-shell, .daily-report-portal-shell, .overtime-page-shell, .kpi-page-shell, .leave-page-shell) :is(.layout, .main) {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    overflow: visible !important;
}

html[data-theme] body.internal-clean-page-shell:is(.attendance-page-shell, .schedule-page-shell, .daily-report-portal-shell, .overtime-page-shell, .kpi-page-shell, .leave-page-shell) .clean-module-layout,
body.internal-clean-page-shell:is(.attendance-page-shell, .schedule-page-shell, .daily-report-portal-shell, .overtime-page-shell, .kpi-page-shell, .leave-page-shell) .clean-module-layout {
    display: grid !important;
    grid-template-columns: minmax(240px, 280px) minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 22px !important;
    width: min(1500px, calc(100vw - 40px)) !important;
    max-width: 1500px !important;
    min-width: 0 !important;
    margin: 24px auto 36px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

html[data-theme] body.internal-clean-page-shell:is(.attendance-page-shell, .schedule-page-shell, .daily-report-portal-shell, .overtime-page-shell, .kpi-page-shell, .leave-page-shell) .clean-module-sidebar,
body.internal-clean-page-shell:is(.attendance-page-shell, .schedule-page-shell, .daily-report-portal-shell, .overtime-page-shell, .kpi-page-shell, .leave-page-shell) .clean-module-sidebar {
    grid-column: 1 !important;
    width: 100% !important;
    max-width: 280px !important;
    min-width: 0 !important;
    position: sticky !important;
    top: 146px !important;
    align-self: start !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

html[data-theme] body.internal-clean-page-shell:is(.attendance-page-shell, .schedule-page-shell, .daily-report-portal-shell, .overtime-page-shell, .kpi-page-shell, .leave-page-shell) .clean-module-sidebar :is(.hris-module-disclosure, .information-sidebar-card),
body.internal-clean-page-shell:is(.attendance-page-shell, .schedule-page-shell, .daily-report-portal-shell, .overtime-page-shell, .kpi-page-shell, .leave-page-shell) .clean-module-sidebar :is(.hris-module-disclosure, .information-sidebar-card) {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

html[data-theme] body.internal-clean-page-shell:is(.attendance-page-shell, .schedule-page-shell, .daily-report-portal-shell, .overtime-page-shell, .kpi-page-shell, .leave-page-shell) .clean-content-panel,
body.internal-clean-page-shell:is(.attendance-page-shell, .schedule-page-shell, .daily-report-portal-shell, .overtime-page-shell, .kpi-page-shell, .leave-page-shell) .clean-content-panel {
    grid-column: 2 !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 560px !important;
    height: auto !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

html[data-theme] body.internal-clean-page-shell:is(.attendance-page-shell, .schedule-page-shell, .daily-report-portal-shell, .overtime-page-shell, .kpi-page-shell, .leave-page-shell) .clean-content-panel > :is(.page-hero, .flash-stack, .page-content, .page-content-bleed),
body.internal-clean-page-shell:is(.attendance-page-shell, .schedule-page-shell, .daily-report-portal-shell, .overtime-page-shell, .kpi-page-shell, .leave-page-shell) .clean-content-panel > :is(.page-hero, .flash-stack, .page-content, .page-content-bleed) {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
}

html[data-theme] body.internal-clean-page-shell:is(.attendance-page-shell, .schedule-page-shell, .daily-report-portal-shell, .overtime-page-shell, .kpi-page-shell, .leave-page-shell) :is(.page-hero, .page-hero-text, .section-title, .section-title > div),
body.internal-clean-page-shell:is(.attendance-page-shell, .schedule-page-shell, .daily-report-portal-shell, .overtime-page-shell, .kpi-page-shell, .leave-page-shell) :is(.page-hero, .page-hero-text, .section-title, .section-title > div) {
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

html[data-theme] body.internal-clean-page-shell:is(.attendance-page-shell, .schedule-page-shell, .daily-report-portal-shell, .overtime-page-shell, .kpi-page-shell, .leave-page-shell) :is(.page-hero h1, .page-hero h2, .section-title h1, .section-title h2, .section-title h3, .page-hero p, .section-title p),
body.internal-clean-page-shell:is(.attendance-page-shell, .schedule-page-shell, .daily-report-portal-shell, .overtime-page-shell, .kpi-page-shell, .leave-page-shell) :is(.page-hero h1, .page-hero h2, .section-title h1, .section-title h2, .section-title h3, .page-hero p, .section-title p) {
    max-width: 100% !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    white-space: normal !important;
}

@media (max-width: 980px) {
    html[data-theme] body.internal-clean-page-shell:is(.attendance-page-shell, .schedule-page-shell, .daily-report-portal-shell, .overtime-page-shell, .kpi-page-shell, .leave-page-shell) .clean-module-layout,
    body.internal-clean-page-shell:is(.attendance-page-shell, .schedule-page-shell, .daily-report-portal-shell, .overtime-page-shell, .kpi-page-shell, .leave-page-shell) .clean-module-layout {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 14px !important;
        width: min(100% - 24px, 980px) !important;
        margin: 14px auto 28px !important;
    }

    html[data-theme] body.internal-clean-page-shell:is(.attendance-page-shell, .schedule-page-shell, .daily-report-portal-shell, .overtime-page-shell, .kpi-page-shell, .leave-page-shell) :is(.clean-module-sidebar, .clean-content-panel),
    body.internal-clean-page-shell:is(.attendance-page-shell, .schedule-page-shell, .daily-report-portal-shell, .overtime-page-shell, .kpi-page-shell, .leave-page-shell) :is(.clean-module-sidebar, .clean-content-panel) {
        grid-column: 1 !important;
        width: 100% !important;
        max-width: 100% !important;
        position: static !important;
    }
}

@media (max-width: 640px) {
    html[data-theme] body.internal-clean-page-shell:is(.attendance-page-shell, .schedule-page-shell, .daily-report-portal-shell, .overtime-page-shell, .kpi-page-shell, .leave-page-shell) .clean-content-panel,
    body.internal-clean-page-shell:is(.attendance-page-shell, .schedule-page-shell, .daily-report-portal-shell, .overtime-page-shell, .kpi-page-shell, .leave-page-shell) .clean-content-panel {
        padding: 12px !important;
        border-radius: 12px !important;
    }
}




/* Attendance family scroll guard v4: halaman Attendance boleh panjang dan body harus bisa scroll.
   Menimpa single-viewport rule lama yang mengunci internal-clean-page-shell ke 100dvh + overflow hidden. */
html:has(body.internal-clean-page-shell:is(.attendance-page-shell, .schedule-page-shell, .daily-report-portal-shell, .overtime-page-shell, .kpi-page-shell, .leave-page-shell)),
html[data-theme]:has(body.internal-clean-page-shell:is(.attendance-page-shell, .schedule-page-shell, .daily-report-portal-shell, .overtime-page-shell, .kpi-page-shell, .leave-page-shell)) {
    height: auto !important;
    min-height: 100% !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

html[data-theme] body.internal-clean-page-shell:is(.attendance-page-shell, .schedule-page-shell, .daily-report-portal-shell, .overtime-page-shell, .kpi-page-shell, .leave-page-shell),
body.internal-clean-page-shell:is(.attendance-page-shell, .schedule-page-shell, .daily-report-portal-shell, .overtime-page-shell, .kpi-page-shell, .leave-page-shell),
html[data-theme] body.internal-clean-page-shell:is(.attendance-page-shell, .schedule-page-shell, .daily-report-portal-shell, .overtime-page-shell, .kpi-page-shell, .leave-page-shell) > .layout,
body.internal-clean-page-shell:is(.attendance-page-shell, .schedule-page-shell, .daily-report-portal-shell, .overtime-page-shell, .kpi-page-shell, .leave-page-shell) > .layout,
html[data-theme] body.internal-clean-page-shell:is(.attendance-page-shell, .schedule-page-shell, .daily-report-portal-shell, .overtime-page-shell, .kpi-page-shell, .leave-page-shell) .main,
body.internal-clean-page-shell:is(.attendance-page-shell, .schedule-page-shell, .daily-report-portal-shell, .overtime-page-shell, .kpi-page-shell, .leave-page-shell) .main {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
}

html[data-theme] body.internal-clean-page-shell:is(.attendance-page-shell, .schedule-page-shell, .daily-report-portal-shell, .overtime-page-shell, .kpi-page-shell, .leave-page-shell),
body.internal-clean-page-shell:is(.attendance-page-shell, .schedule-page-shell, .daily-report-portal-shell, .overtime-page-shell, .kpi-page-shell, .leave-page-shell) {
    min-height: 100dvh !important;
    overflow-y: auto !important;
}

html[data-theme] body.internal-clean-page-shell:is(.attendance-page-shell, .schedule-page-shell, .daily-report-portal-shell, .overtime-page-shell, .kpi-page-shell, .leave-page-shell) .clean-module-layout,
body.internal-clean-page-shell:is(.attendance-page-shell, .schedule-page-shell, .daily-report-portal-shell, .overtime-page-shell, .kpi-page-shell, .leave-page-shell) .clean-module-layout,
html[data-theme] body.internal-clean-page-shell:is(.attendance-page-shell, .schedule-page-shell, .daily-report-portal-shell, .overtime-page-shell, .kpi-page-shell, .leave-page-shell) .clean-content-panel,
body.internal-clean-page-shell:is(.attendance-page-shell, .schedule-page-shell, .daily-report-portal-shell, .overtime-page-shell, .kpi-page-shell, .leave-page-shell) .clean-content-panel {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

@media (max-width: 640px) {
    html[data-theme] body.internal-clean-page-shell:is(.attendance-page-shell, .schedule-page-shell, .daily-report-portal-shell, .overtime-page-shell, .kpi-page-shell, .leave-page-shell) .clean-module-layout,
    body.internal-clean-page-shell:is(.attendance-page-shell, .schedule-page-shell, .daily-report-portal-shell, .overtime-page-shell, .kpi-page-shell, .leave-page-shell) .clean-module-layout {
        width: min(100% - 16px, 640px) !important;
        gap: 10px !important;
        margin: 10px auto 24px !important;
    }

    html[data-theme] body.internal-clean-page-shell:is(.attendance-page-shell, .schedule-page-shell, .daily-report-portal-shell, .overtime-page-shell, .kpi-page-shell, .leave-page-shell) .clean-module-sidebar,
    body.internal-clean-page-shell:is(.attendance-page-shell, .schedule-page-shell, .daily-report-portal-shell, .overtime-page-shell, .kpi-page-shell, .leave-page-shell) .clean-module-sidebar {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        padding-bottom: 2px !important;
        scrollbar-width: none !important;
        -webkit-overflow-scrolling: touch !important;
    }

    html[data-theme] body.internal-clean-page-shell:is(.attendance-page-shell, .schedule-page-shell, .daily-report-portal-shell, .overtime-page-shell, .kpi-page-shell, .leave-page-shell) .clean-module-sidebar::-webkit-scrollbar,
    body.internal-clean-page-shell:is(.attendance-page-shell, .schedule-page-shell, .daily-report-portal-shell, .overtime-page-shell, .kpi-page-shell, .leave-page-shell) .clean-module-sidebar::-webkit-scrollbar {
        display: none !important;
    }

    html[data-theme] body.internal-clean-page-shell:is(.attendance-page-shell, .schedule-page-shell, .daily-report-portal-shell, .overtime-page-shell, .kpi-page-shell, .leave-page-shell) .clean-module-sidebar .information-sidebar-card,
    html[data-theme] body.internal-clean-page-shell:is(.attendance-page-shell, .schedule-page-shell, .daily-report-portal-shell, .overtime-page-shell, .kpi-page-shell, .leave-page-shell) .clean-module-sidebar .hris-module-disclosure,
    body.internal-clean-page-shell:is(.attendance-page-shell, .schedule-page-shell, .daily-report-portal-shell, .overtime-page-shell, .kpi-page-shell, .leave-page-shell) .clean-module-sidebar .information-sidebar-card,
    body.internal-clean-page-shell:is(.attendance-page-shell, .schedule-page-shell, .daily-report-portal-shell, .overtime-page-shell, .kpi-page-shell, .leave-page-shell) .clean-module-sidebar .hris-module-disclosure {
        padding: 6px !important;
        border-radius: 14px !important;
        overflow: visible !important;
    }

    html[data-theme] body.internal-clean-page-shell:is(.attendance-page-shell, .schedule-page-shell, .daily-report-portal-shell, .overtime-page-shell, .kpi-page-shell, .leave-page-shell) .clean-module-sidebar .hris-module-summary,
    body.internal-clean-page-shell:is(.attendance-page-shell, .schedule-page-shell, .daily-report-portal-shell, .overtime-page-shell, .kpi-page-shell, .leave-page-shell) .clean-module-sidebar .hris-module-summary {
        display: none !important;
    }

    html[data-theme] body.internal-clean-page-shell:is(.attendance-page-shell, .schedule-page-shell, .daily-report-portal-shell, .overtime-page-shell, .kpi-page-shell, .leave-page-shell) .clean-module-sidebar .sidebar-menu,
    body.internal-clean-page-shell:is(.attendance-page-shell, .schedule-page-shell, .daily-report-portal-shell, .overtime-page-shell, .kpi-page-shell, .leave-page-shell) .clean-module-sidebar .sidebar-menu {
        display: flex !important;
        flex-flow: row nowrap !important;
        gap: 8px !important;
        width: max-content !important;
        min-width: 100% !important;
        overflow: visible !important;
        padding: 0 !important;
    }

    html[data-theme] body.internal-clean-page-shell:is(.attendance-page-shell, .schedule-page-shell, .daily-report-portal-shell, .overtime-page-shell, .kpi-page-shell, .leave-page-shell) .clean-module-sidebar .sidebar-link,
    body.internal-clean-page-shell:is(.attendance-page-shell, .schedule-page-shell, .daily-report-portal-shell, .overtime-page-shell, .kpi-page-shell, .leave-page-shell) .clean-module-sidebar .sidebar-link {
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: 104px !important;
        min-height: 44px !important;
        padding: 8px 10px !important;
        border-radius: 999px !important;
        gap: 8px !important;
    }

    html[data-theme] body.internal-clean-page-shell:is(.attendance-page-shell, .schedule-page-shell, .daily-report-portal-shell, .overtime-page-shell, .kpi-page-shell, .leave-page-shell) .clean-module-sidebar .sidebar-icon,
    body.internal-clean-page-shell:is(.attendance-page-shell, .schedule-page-shell, .daily-report-portal-shell, .overtime-page-shell, .kpi-page-shell, .leave-page-shell) .clean-module-sidebar .sidebar-icon {
        width: 28px !important;
        min-width: 28px !important;
        height: 28px !important;
    }

    html[data-theme] body.internal-clean-page-shell:is(.attendance-page-shell, .schedule-page-shell, .daily-report-portal-shell, .overtime-page-shell, .kpi-page-shell, .leave-page-shell) .clean-module-sidebar .sidebar-link h2,
    body.internal-clean-page-shell:is(.attendance-page-shell, .schedule-page-shell, .daily-report-portal-shell, .overtime-page-shell, .kpi-page-shell, .leave-page-shell) .clean-module-sidebar .sidebar-link h2 {
        font-size: 0.82rem !important;
        line-height: 1.05 !important;
        white-space: nowrap !important;
    }

    html[data-theme] body.internal-clean-page-shell:is(.attendance-page-shell, .schedule-page-shell, .daily-report-portal-shell, .overtime-page-shell, .kpi-page-shell, .leave-page-shell) .clean-module-sidebar .sidebar-link small,
    body.internal-clean-page-shell:is(.attendance-page-shell, .schedule-page-shell, .daily-report-portal-shell, .overtime-page-shell, .kpi-page-shell, .leave-page-shell) .clean-module-sidebar .sidebar-link small {
        display: none !important;
    }
}

/* Admin suite final EOF guard: clean-shell layout rules above are intentionally
   broad for module pages, so admin gets a late scoped reset. */
html[data-theme] body.admin-suite-shell,
body.admin-suite-shell {
    height: auto !important;
    min-height: 100dvh !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

html[data-theme] body.admin-suite-shell > .layout,
body.admin-suite-shell > .layout,
html[data-theme] body.admin-suite-shell .main,
body.admin-suite-shell .main,
html[data-theme] body.admin-suite-shell .clean-module-layout,
body.admin-suite-shell .clean-module-layout,
html[data-theme] body.admin-suite-shell .clean-content-panel,
body.admin-suite-shell .clean-content-panel {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
}

html[data-theme] body.admin-suite-shell .clean-module-layout.clean-module-layout--no-sidebar,
body.admin-suite-shell .clean-module-layout.clean-module-layout--no-sidebar {
    display: block !important;
    width: min(1500px, calc(100vw - 40px)) !important;
    max-width: 1500px !important;
    min-width: 0 !important;
    margin: 22px auto 36px !important;
    padding: 0 !important;
}

html[data-theme] body.admin-suite-shell .clean-content-panel,
body.admin-suite-shell .clean-content-panel {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

html[data-theme] body.admin-suite-shell .clean-content-panel > .page-hero,
body.admin-suite-shell .clean-content-panel > .page-hero {
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 18px !important;
    padding: 18px 0 10px !important;
    overflow: visible !important;
}

html[data-theme] body.admin-suite-shell .clean-content-panel > .page-content.page-content-bleed,
body.admin-suite-shell .clean-content-panel > .page-content.page-content-bleed {
    display: grid !important;
    grid-template-columns: minmax(240px, 260px) minmax(0, 1fr) !important;
    gap: 22px !important;
    align-items: start !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 0 32px !important;
    overflow: visible !important;
    scrollbar-gutter: auto !important;
}

html[data-theme] body.admin-suite-shell .page-content.page-content-bleed > .admin-local-nav-box,
body.admin-suite-shell .page-content.page-content-bleed > .admin-local-nav-box {
    grid-column: 1 !important;
    width: 100% !important;
    max-width: 260px !important;
    min-width: 0 !important;
}

html[data-theme] body.admin-suite-shell .page-content.page-content-bleed > :not(.admin-local-nav-box):not(style),
body.admin-suite-shell .page-content.page-content-bleed > :not(.admin-local-nav-box):not(style) {
    grid-column: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
}

@media (max-width: 980px) {
    html[data-theme] body.admin-suite-shell .clean-module-layout.clean-module-layout--no-sidebar,
    body.admin-suite-shell .clean-module-layout.clean-module-layout--no-sidebar {
        width: min(100% - 24px, 980px) !important;
        margin: 16px auto 28px !important;
    }

    html[data-theme] body.admin-suite-shell .clean-content-panel > .page-content.page-content-bleed,
    body.admin-suite-shell .clean-content-panel > .page-content.page-content-bleed {
        grid-template-columns: minmax(0, 1fr) !important;
        padding-bottom: 28px !important;
    }

    html[data-theme] body.admin-suite-shell .page-content.page-content-bleed > .admin-local-nav-box,
    body.admin-suite-shell .page-content.page-content-bleed > .admin-local-nav-box,
    html[data-theme] body.admin-suite-shell .page-content.page-content-bleed > :not(.admin-local-nav-box):not(style),
    body.admin-suite-shell .page-content.page-content-bleed > :not(.admin-local-nav-box):not(style) {
        grid-column: 1 !important;
        max-width: 100% !important;
    }
}

/* Mobile topbar final guard: keep AI, notification, and account reachable on
   390px screens without changing the desktop header. */

/* Module root guard: root pages like BJAS Permission are still sidebar pages.
   Keep the sidebar visible, but undo older single-viewport rules that clipped the
   content panel and squeezed the module rail. */
html:has(body.internal-module-root-with-sidebar-shell),
html[data-theme]:has(body.internal-module-root-with-sidebar-shell) {
    height: auto !important;
    min-height: 100% !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

html[data-theme] body.internal-module-root-with-sidebar-shell,
body.internal-module-root-with-sidebar-shell {
    width: 100% !important;
    min-height: 100dvh !important;
    height: auto !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

html[data-theme] body.internal-module-root-with-sidebar-shell > .layout,
body.internal-module-root-with-sidebar-shell > .layout,
html[data-theme] body.internal-module-root-with-sidebar-shell .main,
body.internal-module-root-with-sidebar-shell .main {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
}

html[data-theme] body.internal-module-root-with-sidebar-shell .page-content.hris-clean-shell,
body.internal-module-root-with-sidebar-shell .page-content.hris-clean-shell {
    display: block !important;
    width: min(1480px, calc(100% - 32px)) !important;
    max-width: 1480px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 24px auto 36px !important;
    padding: 0 !important;
    overflow: visible !important;
    scrollbar-gutter: auto !important;
}

html[data-theme] body.internal-module-root-with-sidebar-shell .page-content.hris-clean-shell > .internal-module-layout,
body.internal-module-root-with-sidebar-shell .page-content.hris-clean-shell > .internal-module-layout {
    display: grid !important;
    grid-template-columns: minmax(250px, 300px) minmax(0, 1fr) !important;
    align-items: start !important;
    gap: clamp(16px, 2vw, 24px) !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 auto !important;
    padding: 0 !important;
    overflow: visible !important;
}

html[data-theme] body.internal-module-root-with-sidebar-shell .page-content.hris-clean-shell > .internal-module-layout > .internal-module-nav,
body.internal-module-root-with-sidebar-shell .page-content.hris-clean-shell > .internal-module-layout > .internal-module-nav,
html[data-theme] body.internal-module-root-with-sidebar-shell .page-content.hris-clean-shell :is(.information-module-nav, .info-sidebar),
body.internal-module-root-with-sidebar-shell .page-content.hris-clean-shell :is(.information-module-nav, .info-sidebar) {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
}

html[data-theme] body.internal-module-root-with-sidebar-shell .page-content.hris-clean-shell .information-sidebar-card,
body.internal-module-root-with-sidebar-shell .page-content.hris-clean-shell .information-sidebar-card {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
}

html[data-theme] body.internal-module-root-with-sidebar-shell .page-content.hris-clean-shell .sidebar-menu,
body.internal-module-root-with-sidebar-shell .page-content.hris-clean-shell .sidebar-menu {
    display: grid !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
}

html[data-theme] body.internal-module-root-with-sidebar-shell .page-content.hris-clean-shell .sidebar-link,
body.internal-module-root-with-sidebar-shell .page-content.hris-clean-shell .sidebar-link {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

html[data-theme] body.internal-module-root-with-sidebar-shell .page-content.hris-clean-shell .hris-module-card-copy,
body.internal-module-root-with-sidebar-shell .page-content.hris-clean-shell .hris-module-card-copy {
    display: block !important;
    min-width: 0 !important;
    overflow: hidden !important;
}

html[data-theme] body.internal-module-root-with-sidebar-shell .page-content.hris-clean-shell .hris-module-card-copy :is(h2, small),
body.internal-module-root-with-sidebar-shell .page-content.hris-clean-shell .hris-module-card-copy :is(h2, small) {
    display: block !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

html[data-theme] body.internal-module-root-with-sidebar-shell .page-content.hris-clean-shell > .internal-module-layout > .content-panel,
body.internal-module-root-with-sidebar-shell .page-content.hris-clean-shell > .internal-module-layout > .content-panel {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: calc(100dvh - 188px) !important;
    max-height: none !important;
    overflow: visible !important;
}

html[data-theme] body.internal-module-root-with-sidebar-shell .page-content.hris-clean-shell .internal-hub-card-grid,
body.internal-module-root-with-sidebar-shell .page-content.hris-clean-shell .internal-hub-card-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)) !important;
    gap: 14px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

@media (max-width: 1180px) {
    html[data-theme] body.internal-module-root-with-sidebar-shell .page-content.hris-clean-shell > .internal-module-layout,
    body.internal-module-root-with-sidebar-shell .page-content.hris-clean-shell > .internal-module-layout {
        grid-template-columns: minmax(220px, 260px) minmax(0, 1fr) !important;
    }
}

@media (max-width: 860px) {
    html[data-theme] body.internal-module-root-with-sidebar-shell .page-content.hris-clean-shell,
    body.internal-module-root-with-sidebar-shell .page-content.hris-clean-shell {
        width: min(100% - 20px, 860px) !important;
        margin-block: 14px 28px !important;
    }

    html[data-theme] body.internal-module-root-with-sidebar-shell .page-content.hris-clean-shell > .internal-module-layout,
    body.internal-module-root-with-sidebar-shell .page-content.hris-clean-shell > .internal-module-layout {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

/* Final approval layout override: keep /approvals readable after generic clean-shell guards. */
html[data-theme] body.wms-approval-page-shell > .layout,
body.wms-approval-page-shell > .layout {
    display: block !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100vw !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
}

html[data-theme] body.wms-approval-page-shell .main,
body.wms-approval-page-shell .main {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
}

html[data-theme] body.wms-approval-page-shell .clean-module-layout,
body.wms-approval-page-shell .clean-module-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: min(1320px, calc(100vw - 32px)) !important;
    max-width: 1320px !important;
    min-width: 0 !important;
    margin: 24px auto 36px !important;
    padding: 0 !important;
    overflow: visible !important;
}

html[data-theme] body.wms-approval-page-shell .clean-content-panel,
body.wms-approval-page-shell .clean-content-panel {
    display: block !important;
    grid-column: 1 / -1 !important;
    position: relative !important;
    z-index: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: clamp(22px, 3vw, 34px) !important;
    overflow: visible !important;
}

html[data-theme] body.wms-approval-page-shell .clean-content-panel > :is(.page-hero, .flash-stack, .page-content, .page-content-bleed),
body.wms-approval-page-shell .clean-content-panel > :is(.page-hero, .flash-stack, .page-content, .page-content-bleed) {
    display: block !important;
    position: relative !important;
    z-index: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 0 20px !important;
    padding: 0 !important;
    overflow: visible !important;
}

html[data-theme] body.wms-approval-page-shell .wms-page-stack,
body.wms-approval-page-shell .wms-page-stack {
    display: grid !important;
    gap: 18px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

@media (max-width: 480px) {
    html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header],
    body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] {
        grid-template-columns: minmax(0, auto) auto !important;
        grid-template-areas: "brand actions" !important;
        gap: 8px !important;
        padding-inline: 10px !important;
        overflow: hidden !important;
    }

    html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] .internal-shell-logo,
    body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] .internal-shell-logo {
        display: none !important;
    }

    html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] .internal-shell-brand,
    body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] .internal-shell-brand {
        grid-area: brand !important;
        min-width: 0 !important;
        max-width: 94px !important;
    }

    html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] .internal-shell-brand :is(.brand-divider, .brand-logo-wide),
    body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] .internal-shell-brand :is(.brand-divider, .brand-logo-wide) {
        display: none !important;
    }

    html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] .internal-shell-brand .internal-brand-pill,
    body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] .internal-shell-brand .internal-brand-pill {
        width: 84px !important;
        min-width: 84px !important;
        max-width: 84px !important;
        height: 42px !important;
        min-height: 42px !important;
        padding: 0 10px !important;
    }

    html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] .internal-shell-header-actions,
    body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] .internal-shell-header-actions {
        grid-area: actions !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 5px !important;
        width: auto !important;
        max-width: calc(100vw - 112px) !important;
        min-width: 0 !important;
        overflow: visible !important;
        transform: translateX(-28px) !important;
    }

    html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] .internal-ai-button,
    body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] .internal-ai-button {
        width: 40px !important;
        min-width: 40px !important;
        max-width: 40px !important;
        height: 40px !important;
        min-height: 40px !important;
        padding: 0 !important;
        font-size: 0 !important;
        overflow: hidden !important;
    }

    html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] .internal-ai-button::after,
    body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] .internal-ai-button::after {
        content: "AI";
        font-size: 0.76rem !important;
        font-weight: 900 !important;
        letter-spacing: 0 !important;
    }

    html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] .internal-topbar-user,
    body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] .internal-topbar-user {
        gap: 5px !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        flex: 0 0 auto !important;
    }

    html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] :is(.notification-button.internal-icon-button, .profile-button.internal-user-pill),
    body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] :is(.notification-button.internal-icon-button, .profile-button.internal-user-pill) {
        width: 40px !important;
        min-width: 40px !important;
        max-width: 40px !important;
        height: 40px !important;
        min-height: 40px !important;
        padding: 4px !important;
        gap: 0 !important;
    }

    html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] .profile-button.internal-user-pill :is(.profile-name, .dropdown-icon),
    body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] .profile-button.internal-user-pill :is(.profile-name, .dropdown-icon) {
        display: none !important;
    }

    html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] .profile-button.internal-user-pill .avatar,
    body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] .profile-button.internal-user-pill .avatar {
        width: 30px !important;
        min-width: 30px !important;
        height: 30px !important;
        flex-basis: 30px !important;
    }
}

/* CRM terminal guard: keep CRM out of the compact single-viewport shell. */
html[data-theme] body.crm-page-shell,
body.crm-page-shell {
    height: auto !important;
    min-height: 100dvh !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

html[data-theme] body.crm-page-shell > .layout,
body.crm-page-shell > .layout,
html[data-theme] body.crm-page-shell .main,
body.crm-page-shell .main {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
}

html[data-theme] body.crm-page-shell .clean-module-layout,
body.crm-page-shell .clean-module-layout {
    position: relative !important;
    display: block !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: min(1500px, calc(100vw - 40px)) !important;
    max-width: 1500px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    margin: 24px auto 36px !important;
    padding: 0 0 0 302px !important;
    overflow: visible !important;
}

html[data-theme] body.crm-page-shell .clean-module-sidebar,
body.crm-page-shell .clean-module-sidebar {
    position: absolute !important;
    inset: 0 auto auto 0 !important;
    z-index: 2 !important;
    width: 280px !important;
    max-width: 280px !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

html[data-theme] body.crm-page-shell .clean-content-panel,
body.crm-page-shell .clean-content-panel,
html[data-theme] body.crm-page-shell .clean-content-panel > .page-content,
body.crm-page-shell .clean-content-panel > .page-content {
    display: block !important;
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
}

html[data-theme] body.crm-page-shell :is(.summary, .meta-grid),
body.crm-page-shell :is(.summary, .meta-grid) {
    gap: 10px !important;
    margin-bottom: 12px !important;
}

html[data-theme] body.crm-page-shell :is(.card-mini, .meta-card),
body.crm-page-shell :is(.card-mini, .meta-card) {
    min-height: 68px !important;
    padding: 10px 14px !important;
    border-radius: 12px !important;
    gap: 5px !important;
}

html[data-theme] body.crm-page-shell :is(.card-mini p, .meta-card span),
body.crm-page-shell :is(.card-mini p, .meta-card span) {
    font-size: 0.68rem !important;
    letter-spacing: 0.11em !important;
}

html[data-theme] body.crm-page-shell .card-mini h3,
body.crm-page-shell .card-mini h3 {
    margin-top: 2px !important;
    font-size: clamp(1.05rem, 1.4vw, 1.32rem) !important;
    letter-spacing: 0 !important;
    line-height: 1.12 !important;
}

html[data-theme] body.crm-page-shell .meta-card strong,
body.crm-page-shell .meta-card strong {
    font-size: clamp(0.98rem, 1.2vw, 1.18rem) !important;
    line-height: 1.18 !important;
}

html[data-theme] body.crm-page-shell .crm-local-nav-box,
body.crm-page-shell .crm-local-nav-box {
    padding: 10px 12px !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
}

html[data-theme] body.crm-page-shell .crm-local-nav,
body.crm-page-shell .crm-local-nav {
    gap: 8px !important;
}

html[data-theme] body.crm-page-shell .crm-local-nav .ghost-button,
body.crm-page-shell .crm-local-nav .ghost-button {
    min-width: 112px !important;
    min-height: 38px !important;
    padding: 8px 12px !important;
}

html[data-theme] body.crm-page-shell .products-filter-bar,
body.crm-page-shell .products-filter-bar {
    padding: 10px 12px !important;
    gap: 10px !important;
    margin-bottom: 10px !important;
}

@media (max-width: 980px) {
    html[data-theme] body.crm-page-shell .clean-module-layout,
    body.crm-page-shell .clean-module-layout {
        width: min(100% - 24px, 980px) !important;
        margin: 14px auto 28px !important;
        padding-left: 0 !important;
    }

    html[data-theme] body.crm-page-shell .clean-module-sidebar,
    body.crm-page-shell .clean-module-sidebar,
    html[data-theme] body.crm-page-shell .clean-content-panel,
    body.crm-page-shell .clean-content-panel {
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
    }
}
html[data-theme] body.ai-assistant-shell .ai-training-box,
body.ai-assistant-shell .ai-training-box {
    margin: 0 0 14px;
    padding: 12px;
    border: 1px solid var(--portal-border, #d8e2ef);
    border-radius: 10px;
    background: #ffffff;
}

html[data-theme] body.ai-assistant-shell .ai-training-box > summary,
body.ai-assistant-shell .ai-training-box > summary {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-weight: 800;
    color: var(--portal-navy, #071a33);
}

html[data-theme] body.ai-assistant-shell .ai-training-form,
body.ai-assistant-shell .ai-training-form {
    display: grid;
    gap: 8px;
    margin-top: 12px;
}

html[data-theme] body.ai-assistant-shell .ai-training-form :is(input, textarea),
body.ai-assistant-shell .ai-training-form :is(input, textarea) {
    width: 100%;
    min-width: 0;
}

html[data-theme] body.ai-assistant-shell .ai-custom-knowledge-list,
body.ai-assistant-shell .ai-custom-knowledge-list {
    margin-top: 12px;
}

/* Approval pages must keep the clean-shell sidebar like the other sub pages. */
html[data-theme] body.wms-approval-page-shell .clean-module-layout,
body.wms-approval-page-shell .clean-module-layout {
    display: grid !important;
    grid-template-columns: minmax(240px, 280px) minmax(0, 1fr) !important;
    gap: 22px !important;
    width: min(1500px, calc(100vw - 40px)) !important;
    max-width: 1500px !important;
    margin: 24px auto 36px !important;
    padding: 0 !important;
    overflow: visible !important;
}

html[data-theme] body.wms-approval-page-shell .clean-module-sidebar,
body.wms-approval-page-shell .clean-module-sidebar {
    display: block !important;
    grid-column: 1 !important;
    position: sticky !important;
    top: 146px !important;
    align-self: start !important;
    width: 100% !important;
    max-width: 280px !important;
    min-width: 0 !important;
    height: auto !important;
    max-height: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: visible !important;
}

html[data-theme] body.wms-approval-page-shell .clean-content-panel,
body.wms-approval-page-shell .clean-content-panel {
    grid-column: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

@media (max-width: 980px) {
    html[data-theme] body.wms-approval-page-shell .clean-module-layout,
    body.wms-approval-page-shell .clean-module-layout {
        grid-template-columns: minmax(0, 1fr) !important;
        width: min(100% - 24px, 980px) !important;
        margin: 14px auto 28px !important;
    }

    html[data-theme] body.wms-approval-page-shell .clean-module-sidebar,
    body.wms-approval-page-shell .clean-module-sidebar,
    html[data-theme] body.wms-approval-page-shell .clean-content-panel,
    body.wms-approval-page-shell .clean-content-panel {
        grid-column: 1 !important;
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* Catalog-inspired module layout: compact, even cards, and cleaner section rhythm. */
html[data-theme] body.internal-module-shell .internal-module-layout,
body.internal-module-shell .internal-module-layout {
    width: min(1500px, calc(100vw - 40px)) !important;
    max-width: 1500px !important;
    gap: 24px !important;
    align-items: start !important;
}

html[data-theme] body.internal-module-shell .internal-module-panel,
body.internal-module-shell .internal-module-panel {
    padding: clamp(18px, 2.4vw, 30px) !important;
    border: 1px solid #dbe6f2 !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    box-shadow: 0 18px 42px rgba(7, 26, 51, 0.08) !important;
}

html[data-theme] body.internal-module-shell .information-panel-head,
body.internal-module-shell .information-panel-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 420px) !important;
    align-items: end !important;
    gap: 14px 22px !important;
    margin: 0 0 18px !important;
    padding: 0 0 16px !important;
    border-bottom: 1px solid #e7edf5 !important;
}

html[data-theme] body.internal-module-shell .information-panel-head p,
body.internal-module-shell .information-panel-head p {
    margin: 0 0 6px !important;
    color: #d09a12 !important;
    font-size: 0.74rem !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    text-transform: uppercase !important;
    grid-column: 1 !important;
}

html[data-theme] body.internal-module-shell .information-panel-head h1,
body.internal-module-shell .information-panel-head h1 {
    margin: 0 !important;
    font-size: clamp(1.85rem, 3vw, 2.65rem) !important;
    line-height: 1.02 !important;
    letter-spacing: 0 !important;
    grid-column: 1 !important;
}

html[data-theme] body.internal-module-shell .information-panel-head span,
body.internal-module-shell .information-panel-head span {
    max-width: 460px !important;
    color: #64748b !important;
    font-size: 0.92rem !important;
    line-height: 1.45 !important;
    text-align: right !important;
    grid-column: 2 !important;
    grid-row: 1 / span 2 !important;
}

html[data-theme] body.internal-module-shell .internal-hub-card-grid,
body.internal-module-shell .internal-hub-card-grid,
html[data-theme] body.internal-module-hub-shell .internal-hub-card-grid,
body.internal-module-hub-shell .internal-hub-card-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(310px, 100%), 1fr)) !important;
    gap: 12px !important;
    width: 100% !important;
}

html[data-theme] body.internal-module-shell .internal-hub-card,
body.internal-module-shell .internal-hub-card,
html[data-theme] body.internal-module-hub-shell .internal-hub-card,
body.internal-module-hub-shell .internal-hub-card,
html[data-theme] body.internal-module-shell .internal-hub-card.is-featured,
body.internal-module-shell .internal-hub-card.is-featured {
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 12px !important;
    min-height: 104px !important;
    padding: 14px 16px !important;
    border: 1px solid #dce6f1 !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    box-shadow: none !important;
    overflow: hidden !important;
}

html[data-theme] body.internal-module-shell .internal-hub-card:hover,
body.internal-module-shell .internal-hub-card:hover {
    border-color: rgba(208, 154, 18, 0.55) !important;
    box-shadow: 0 12px 28px rgba(7, 26, 51, 0.09) !important;
    transform: translateY(-1px) !important;
}

html[data-theme] body.internal-module-shell .internal-hub-card-icon,
body.internal-module-shell .internal-hub-card-icon {
    width: 42px !important;
    height: 42px !important;
    border-radius: 8px !important;
    border: 1px solid rgba(208, 154, 18, 0.32) !important;
    background: #fff8e8 !important;
}

html[data-theme] body.internal-module-shell .internal-hub-card-icon img,
body.internal-module-shell .internal-hub-card-icon img {
    width: 24px !important;
    height: 24px !important;
}

html[data-theme] body.internal-module-shell .internal-hub-card-copy,
body.internal-module-shell .internal-hub-card-copy {
    display: grid !important;
    gap: 6px !important;
    min-width: 0 !important;
}

html[data-theme] body.internal-module-shell .information-policy-scope,
body.internal-module-shell .information-policy-scope {
    color: #76839a !important;
    font-size: 0.68rem !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
}

html[data-theme] body.internal-module-shell .internal-hub-card h2,
body.internal-module-shell .internal-hub-card h2 {
    margin: 0 !important;
    color: #041b3a !important;
    font-size: 0.96rem !important;
    line-height: 1.25 !important;
    letter-spacing: 0 !important;
    overflow: visible !important;
    display: block !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
}

html[data-theme] body.internal-module-shell .information-policy-badge,
body.internal-module-shell .information-policy-badge,
html[data-theme] body.internal-module-shell .internal-hub-card .information-policy-badge,
body.internal-module-shell .internal-hub-card .information-policy-badge {
    position: static !important;
    align-self: start !important;
    justify-self: end !important;
    top: auto !important;
    right: auto !important;
    margin-left: 0 !important;
    padding: 5px 10px !important;
    border-radius: 999px !important;
    font-size: 0.72rem !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

@media (max-width: 980px) {
    html[data-theme] body.internal-module-shell .internal-module-layout,
    body.internal-module-shell .internal-module-layout {
        width: min(100% - 24px, 980px) !important;
        gap: 14px !important;
    }

    html[data-theme] body.internal-module-shell .information-panel-head,
    body.internal-module-shell .information-panel-head {
        display: block !important;
    }

    html[data-theme] body.internal-module-shell .information-panel-head span,
    body.internal-module-shell .information-panel-head span {
        display: block !important;
        margin-top: 8px !important;
        max-width: 100% !important;
        text-align: left !important;
    }
}

@media (max-width: 640px) {
    html[data-theme] body.internal-module-shell .internal-module-panel,
    body.internal-module-shell .internal-module-panel {
        padding: 14px !important;
    }

    html[data-theme] body.internal-module-shell .internal-hub-card,
    body.internal-module-shell .internal-hub-card {
        grid-template-columns: 40px minmax(0, 1fr) !important;
    }

    html[data-theme] body.internal-module-shell .information-policy-badge,
    body.internal-module-shell .information-policy-badge,
    html[data-theme] body.internal-module-shell .internal-hub-card .information-policy-badge,
    body.internal-module-shell .internal-hub-card .information-policy-badge {
        grid-column: 2 !important;
        justify-self: start !important;
        align-self: auto !important;
        margin-left: 0 !important;
    }
}

/* Plain sidebar final guard: overrides older card-like sidebar rules below the cascade. */
html[data-theme] body:is(.internal-module-shell, .internal-clean-page-shell) :is(.information-module-nav, .clean-module-sidebar, .info-sidebar),
body:is(.internal-module-shell, .internal-clean-page-shell) :is(.information-module-nav, .clean-module-sidebar, .info-sidebar) {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

html[data-theme] body:is(.internal-module-shell, .internal-clean-page-shell) :is(.information-sidebar-card, .hris-module-disclosure),
body:is(.internal-module-shell, .internal-clean-page-shell) :is(.information-sidebar-card, .hris-module-disclosure) {
    background: #ffffff !important;
    border: 1px solid #e5edf6 !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    overflow: hidden !important;
}

html[data-theme] body:is(.internal-module-shell, .internal-clean-page-shell) :is(.information-sidebar-head, .hris-module-summary),
body:is(.internal-module-shell, .internal-clean-page-shell) :is(.information-sidebar-head, .hris-module-summary) {
    background: #ffffff !important;
    border: 0 !important;
    border-bottom: 1px solid #e9eff6 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 14px 16px !important;
}

html[data-theme] body:is(.internal-module-shell, .internal-clean-page-shell) :is(.information-sidebar-head, .hris-module-summary)::before,
html[data-theme] body:is(.internal-module-shell, .internal-clean-page-shell) :is(.information-sidebar-head, .hris-module-summary)::after,
body:is(.internal-module-shell, .internal-clean-page-shell) :is(.information-sidebar-head, .hris-module-summary)::before,
body:is(.internal-module-shell, .internal-clean-page-shell) :is(.information-sidebar-head, .hris-module-summary)::after,
html[data-theme] body:is(.internal-module-shell, .internal-clean-page-shell) :is(.sidebar-link, .hris-module-card)::before,
html[data-theme] body:is(.internal-module-shell, .internal-clean-page-shell) :is(.sidebar-link, .hris-module-card)::after,
body:is(.internal-module-shell, .internal-clean-page-shell) :is(.sidebar-link, .hris-module-card)::before,
body:is(.internal-module-shell, .internal-clean-page-shell) :is(.sidebar-link, .hris-module-card)::after {
    content: none !important;
    display: none !important;
}

html[data-theme] body:is(.internal-module-shell, .internal-clean-page-shell) :is(.sidebar-menu, .hris-module-grid),
body:is(.internal-module-shell, .internal-clean-page-shell) :is(.sidebar-menu, .hris-module-grid) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 2px !important;
    padding: 8px !important;
}

html[data-theme] body:is(.internal-module-shell, .internal-clean-page-shell) :is(a.sidebar-link, a.hris-module-card),
body:is(.internal-module-shell, .internal-clean-page-shell) :is(a.sidebar-link, a.hris-module-card) {
    min-height: 42px !important;
    padding: 9px 10px !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    color: #0b1f3a !important;
    gap: 10px !important;
    transform: none !important;
}

html[data-theme] body:is(.internal-module-shell, .internal-clean-page-shell) :is(a.sidebar-link:hover, a.hris-module-card:hover),
body:is(.internal-module-shell, .internal-clean-page-shell) :is(a.sidebar-link:hover, a.hris-module-card:hover) {
    background: #f5f8fc !important;
    color: #071a33 !important;
}

html[data-theme] body:is(.internal-module-shell, .internal-clean-page-shell) :is(a.sidebar-link.active, a.sidebar-link.is-active, a.hris-module-card.active, a.hris-module-card.is-active),
body:is(.internal-module-shell, .internal-clean-page-shell) :is(a.sidebar-link.active, a.sidebar-link.is-active, a.hris-module-card.active, a.hris-module-card.is-active),
html[data-theme] body.internal-module-shell .hris-clean-shell :is(a.hris-module-card.active, a.hris-module-card.is-active, a.sidebar-link.active, a.sidebar-link.is-active),
body.internal-module-shell .hris-clean-shell :is(a.hris-module-card.active, a.hris-module-card.is-active, a.sidebar-link.active, a.sidebar-link.is-active) {
    background: #eef4ff !important;
    color: #071a33 !important;
    border: 0 !important;
    box-shadow: inset 3px 0 0 #0b1f3a !important;
}

html[data-theme] body:is(.internal-module-shell, .internal-clean-page-shell) :is(.sidebar-icon, .hris-module-nav-icon),
body:is(.internal-module-shell, .internal-clean-page-shell) :is(.sidebar-icon, .hris-module-nav-icon),
html[data-theme] body:is(.internal-module-shell, .internal-clean-page-shell) :is(a.sidebar-link.active, a.sidebar-link.is-active, a.hris-module-card.active, a.hris-module-card.is-active) :is(.sidebar-icon, .hris-module-nav-icon),
body:is(.internal-module-shell, .internal-clean-page-shell) :is(a.sidebar-link.active, a.sidebar-link.is-active, a.hris-module-card.active, a.hris-module-card.is-active) :is(.sidebar-icon, .hris-module-nav-icon) {
    width: 24px !important;
    min-width: 24px !important;
    height: 24px !important;
    flex: 0 0 24px !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    color: inherit !important;
}

html[data-theme] body:is(.internal-module-shell, .internal-clean-page-shell) :is(.sidebar-link h2, .hris-module-card h2),
body:is(.internal-module-shell, .internal-clean-page-shell) :is(.sidebar-link h2, .hris-module-card h2),
html[data-theme] body:is(.internal-module-shell, .internal-clean-page-shell) :is(a.sidebar-link:hover, a.sidebar-link.active, a.sidebar-link.is-active, a.hris-module-card:hover, a.hris-module-card.active, a.hris-module-card.is-active) :is(h2, small, .hris-module-card-copy, .hris-module-card-copy *),
body:is(.internal-module-shell, .internal-clean-page-shell) :is(a.sidebar-link:hover, a.sidebar-link.active, a.sidebar-link.is-active, a.hris-module-card:hover, a.hris-module-card.active, a.hris-module-card.is-active) :is(h2, small, .hris-module-card-copy, .hris-module-card-copy *) {
    color: inherit !important;
    letter-spacing: 0 !important;
}

html[data-theme] body.internal-module-shell .page-content.hris-clean-shell .info-sidebar a.card.hris-module-card.sidebar-link,
body.internal-module-shell .page-content.hris-clean-shell .info-sidebar a.card.hris-module-card.sidebar-link,
html[data-theme] body.internal-clean-page-shell .clean-module-sidebar a.card.hris-module-card.sidebar-link,
body.internal-clean-page-shell .clean-module-sidebar a.card.hris-module-card.sidebar-link {
    min-height: 42px !important;
    padding: 9px 10px !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    outline: 0 !important;
    transform: none !important;
}

html[data-theme] body.internal-module-shell .page-content.hris-clean-shell .info-sidebar a.card.hris-module-card.sidebar-link:hover,
body.internal-module-shell .page-content.hris-clean-shell .info-sidebar a.card.hris-module-card.sidebar-link:hover,
html[data-theme] body.internal-clean-page-shell .clean-module-sidebar a.card.hris-module-card.sidebar-link:hover,
body.internal-clean-page-shell .clean-module-sidebar a.card.hris-module-card.sidebar-link:hover {
    background: #f5f8fc !important;
}

html[data-theme] body.internal-module-shell .page-content.hris-clean-shell .info-sidebar a.card.hris-module-card.sidebar-link.active,
html[data-theme] body.internal-module-shell .page-content.hris-clean-shell .info-sidebar a.card.hris-module-card.sidebar-link.is-active,
body.internal-module-shell .page-content.hris-clean-shell .info-sidebar a.card.hris-module-card.sidebar-link.active,
body.internal-module-shell .page-content.hris-clean-shell .info-sidebar a.card.hris-module-card.sidebar-link.is-active,
html[data-theme] body.internal-clean-page-shell .clean-module-sidebar a.card.hris-module-card.sidebar-link.active,
html[data-theme] body.internal-clean-page-shell .clean-module-sidebar a.card.hris-module-card.sidebar-link.is-active,
body.internal-clean-page-shell .clean-module-sidebar a.card.hris-module-card.sidebar-link.active,
body.internal-clean-page-shell .clean-module-sidebar a.card.hris-module-card.sidebar-link.is-active {
    background: #eef4ff !important;
    border: 0 !important;
    box-shadow: inset 3px 0 0 #0b1f3a !important;
}

html[data-theme] body.internal-module-shell .page-content.hris-clean-shell .info-sidebar a.card.hris-module-card.sidebar-link .hris-module-nav-icon.sidebar-icon,
body.internal-module-shell .page-content.hris-clean-shell .info-sidebar a.card.hris-module-card.sidebar-link .hris-module-nav-icon.sidebar-icon,
html[data-theme] body.internal-clean-page-shell .clean-module-sidebar a.card.hris-module-card.sidebar-link .hris-module-nav-icon.sidebar-icon,
body.internal-clean-page-shell .clean-module-sidebar a.card.hris-module-card.sidebar-link .hris-module-nav-icon.sidebar-icon {
    width: 24px !important;
    min-width: 24px !important;
    height: 24px !important;
    flex: 0 0 24px !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 6px !important;
    box-shadow: none !important;
}

html[data-theme] body.internal-module-shell .page-content.hris-clean-shell .info-sidebar :is(.information-sidebar-card, .hris-module-disclosure, .table-box)::before,
html[data-theme] body.internal-module-shell .page-content.hris-clean-shell .info-sidebar :is(.information-sidebar-card, .hris-module-disclosure, .table-box)::after,
body.internal-module-shell .page-content.hris-clean-shell .info-sidebar :is(.information-sidebar-card, .hris-module-disclosure, .table-box)::before,
body.internal-module-shell .page-content.hris-clean-shell .info-sidebar :is(.information-sidebar-card, .hris-module-disclosure, .table-box)::after,
html[data-theme] body.internal-clean-page-shell .clean-module-sidebar :is(.information-sidebar-card, .hris-module-disclosure, .table-box)::before,
html[data-theme] body.internal-clean-page-shell .clean-module-sidebar :is(.information-sidebar-card, .hris-module-disclosure, .table-box)::after,
body.internal-clean-page-shell .clean-module-sidebar :is(.information-sidebar-card, .hris-module-disclosure, .table-box)::before,
body.internal-clean-page-shell .clean-module-sidebar :is(.information-sidebar-card, .hris-module-disclosure, .table-box)::after {
    content: none !important;
    display: none !important;
}

/* Internal topbar mobile final guard: keep AI, notification, and avatar inside the viewport. */
@media (max-width: 520px) {
    html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header],
    body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] {
        width: 100% !important;
        max-width: 100vw !important;
        min-width: 0 !important;
        grid-template-columns: minmax(0, 94px) minmax(0, auto) !important;
        grid-template-areas: "brand actions" !important;
        justify-content: stretch !important;
        align-items: center !important;
        gap: 8px !important;
        padding-inline: 10px !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }

    html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] .internal-shell-brand,
    body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] .internal-shell-brand {
        grid-area: brand !important;
        max-width: 94px !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }

    html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] .internal-shell-brand .internal-brand-pill,
    body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] .internal-shell-brand .internal-brand-pill {
        width: 84px !important;
        min-width: 84px !important;
        max-width: 84px !important;
        height: 40px !important;
        min-height: 40px !important;
        padding-inline: 8px !important;
    }

    html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] .internal-shell-logo,
    body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] .internal-shell-logo,
    html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] .internal-shell-brand :is(.brand-divider, .brand-logo-wide),
    body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] .internal-shell-brand :is(.brand-divider, .brand-logo-wide) {
        display: none !important;
    }

    html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] .internal-shell-header-actions,
    body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] .internal-shell-header-actions {
        grid-area: actions !important;
        position: static !important;
        width: auto !important;
        max-width: calc(100vw - 118px) !important;
        min-width: 0 !important;
        justify-self: end !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        overflow: visible !important;
        transform: none !important;
    }

    html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] .internal-topbar-user,
    body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] .internal-topbar-user {
        width: auto !important;
        max-width: 100% !important;
        min-width: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        flex: 0 1 auto !important;
        flex-direction: row !important;
        gap: 5px !important;
        overflow: visible !important;
    }

    html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] .topbar-menu-shell,
    body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] .topbar-menu-shell,
    html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] .topbar-menu-shell:has(.notification-button),
    body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] .topbar-menu-shell:has(.notification-button),
    html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] .topbar-menu-shell:has(.profile-button),
    body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] .topbar-menu-shell:has(.profile-button) {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        display: block !important;
        flex: 0 0 auto !important;
        min-width: 0 !important;
        transform: none !important;
    }

    html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] .internal-ai-button,
    body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] .internal-ai-button {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        transform: none !important;
    }

    html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] :is(.internal-ai-button, .notification-button.internal-icon-button, .profile-button.internal-user-pill),
    body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] :is(.internal-ai-button, .notification-button.internal-icon-button, .profile-button.internal-user-pill) {
        width: 38px !important;
        min-width: 38px !important;
        max-width: 38px !important;
        height: 38px !important;
        min-height: 38px !important;
        padding: 3px !important;
        gap: 0 !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }

    html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] .internal-ai-button::after,
    body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] .internal-ai-button::after {
        content: "AI";
        font-size: 0.74rem !important;
        font-weight: 900 !important;
        letter-spacing: 0 !important;
    }

    html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] .profile-button.internal-user-pill :is(.profile-name, .dropdown-icon),
    body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] .profile-button.internal-user-pill :is(.profile-name, .dropdown-icon) {
        display: none !important;
    }

    html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] .profile-button.internal-user-pill .avatar,
    body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] .profile-button.internal-user-pill .avatar {
        display: inline-flex !important;
        flex: 0 0 30px !important;
        width: 30px !important;
        min-width: 30px !important;
        height: 30px !important;
        min-height: 30px !important;
    }
}

@media (max-width: 380px) {
    html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header],
    body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] {
        grid-template-columns: minmax(0, 78px) minmax(0, auto) !important;
        padding-inline: 8px !important;
        gap: 6px !important;
    }

    html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] .internal-shell-brand,
    body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] .internal-shell-brand {
        max-width: 78px !important;
    }

    html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] .internal-shell-brand .internal-brand-pill,
    body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] .internal-shell-brand .internal-brand-pill {
        width: 72px !important;
        min-width: 72px !important;
        max-width: 72px !important;
    }

    html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] .internal-shell-header-actions,
    body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] .internal-shell-header-actions {
        max-width: calc(100vw - 92px) !important;
    }

    html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] .internal-topbar-user,
    body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] .internal-topbar-user {
        gap: 4px !important;
    }

    html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] :is(.internal-ai-button, .notification-button.internal-icon-button, .profile-button.internal-user-pill),
    body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] :is(.internal-ai-button, .notification-button.internal-icon-button, .profile-button.internal-user-pill) {
        width: 36px !important;
        min-width: 36px !important;
        max-width: 36px !important;
        height: 36px !important;
        min-height: 36px !important;
    }

    html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] .profile-button.internal-user-pill .avatar,
    body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] .profile-button.internal-user-pill .avatar {
        flex-basis: 28px !important;
        width: 28px !important;
        min-width: 28px !important;
        height: 28px !important;
        min-height: 28px !important;
    }
}

/* Mobile simple shell: compact subpage navigation and update prompt. */
@media (max-width: 760px) {
    html[data-theme] body:is(.internal-module-shell, .internal-clean-page-shell) :is(.information-module-nav, .clean-module-sidebar, .info-sidebar),
    body:is(.internal-module-shell, .internal-clean-page-shell) :is(.information-module-nav, .clean-module-sidebar, .info-sidebar) {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    html[data-theme] body:is(.internal-module-shell, .internal-clean-page-shell) :is(.information-sidebar-card, .hris-module-disclosure),
    body:is(.internal-module-shell, .internal-clean-page-shell) :is(.information-sidebar-card, .hris-module-disclosure) {
        width: 100% !important;
        max-width: 100% !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        overflow: visible !important;
    }

    html[data-theme] body:is(.internal-module-shell, .internal-clean-page-shell) :is(.information-sidebar-head, .hris-module-summary),
    body:is(.internal-module-shell, .internal-clean-page-shell) :is(.information-sidebar-head, .hris-module-summary) {
        display: none !important;
    }

    html[data-theme] body:is(.internal-module-shell, .internal-clean-page-shell) :is(.sidebar-menu, .hris-module-grid),
    body:is(.internal-module-shell, .internal-clean-page-shell) :is(.sidebar-menu, .hris-module-grid),
    html[data-theme] body.internal-module-shell .page-content.hris-clean-shell .info-sidebar :is(.sidebar-menu, .hris-module-grid),
    body.internal-module-shell .page-content.hris-clean-shell .info-sidebar :is(.sidebar-menu, .hris-module-grid),
    html[data-theme] body.internal-clean-page-shell .clean-module-sidebar :is(.sidebar-menu, .hris-module-grid),
    body.internal-clean-page-shell .clean-module-sidebar :is(.sidebar-menu, .hris-module-grid) {
        display: flex !important;
        grid-template-columns: none !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 8px !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 2px 8px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x proximity !important;
        scrollbar-width: none !important;
    }

    html[data-theme] body:is(.internal-module-shell, .internal-clean-page-shell) :is(.sidebar-menu, .hris-module-grid)::-webkit-scrollbar,
    body:is(.internal-module-shell, .internal-clean-page-shell) :is(.sidebar-menu, .hris-module-grid)::-webkit-scrollbar {
        display: none !important;
    }

    html[data-theme] body:is(.internal-module-shell, .internal-clean-page-shell) :is(a.sidebar-link, a.hris-module-card),
    body:is(.internal-module-shell, .internal-clean-page-shell) :is(a.sidebar-link, a.hris-module-card),
    html[data-theme] body.internal-module-shell .page-content.hris-clean-shell .info-sidebar a.card.hris-module-card.sidebar-link,
    body.internal-module-shell .page-content.hris-clean-shell .info-sidebar a.card.hris-module-card.sidebar-link,
    html[data-theme] body.internal-clean-page-shell .clean-module-sidebar a.card.hris-module-card.sidebar-link,
    body.internal-clean-page-shell .clean-module-sidebar a.card.hris-module-card.sidebar-link {
        width: auto !important;
        min-width: max-content !important;
        max-width: none !important;
        min-height: 38px !important;
        flex: 0 0 auto !important;
        padding: 8px 11px !important;
        gap: 7px !important;
        background: #ffffff !important;
        border: 1px solid #dce7f2 !important;
        border-radius: 999px !important;
        box-shadow: none !important;
        white-space: nowrap !important;
        scroll-snap-align: start !important;
    }

    html[data-theme] body:is(.internal-module-shell, .internal-clean-page-shell) :is(a.sidebar-link.active, a.sidebar-link.is-active, a.hris-module-card.active, a.hris-module-card.is-active),
    body:is(.internal-module-shell, .internal-clean-page-shell) :is(a.sidebar-link.active, a.sidebar-link.is-active, a.hris-module-card.active, a.hris-module-card.is-active),
    html[data-theme] body.internal-module-shell .page-content.hris-clean-shell .info-sidebar a.card.hris-module-card.sidebar-link.active,
    html[data-theme] body.internal-module-shell .page-content.hris-clean-shell .info-sidebar a.card.hris-module-card.sidebar-link.is-active,
    body.internal-module-shell .page-content.hris-clean-shell .info-sidebar a.card.hris-module-card.sidebar-link.active,
    body.internal-module-shell .page-content.hris-clean-shell .info-sidebar a.card.hris-module-card.sidebar-link.is-active,
    html[data-theme] body.internal-clean-page-shell .clean-module-sidebar a.card.hris-module-card.sidebar-link.active,
    html[data-theme] body.internal-clean-page-shell .clean-module-sidebar a.card.hris-module-card.sidebar-link.is-active,
    body.internal-clean-page-shell .clean-module-sidebar a.card.hris-module-card.sidebar-link.active,
    body.internal-clean-page-shell .clean-module-sidebar a.card.hris-module-card.sidebar-link.is-active {
        background: #0b1f3a !important;
        border-color: #0b1f3a !important;
        color: #ffffff !important;
        box-shadow: none !important;
    }

    html[data-theme] body:is(.internal-module-shell, .internal-clean-page-shell) :is(.sidebar-icon, .hris-module-nav-icon),
    body:is(.internal-module-shell, .internal-clean-page-shell) :is(.sidebar-icon, .hris-module-nav-icon),
    html[data-theme] body.internal-module-shell .page-content.hris-clean-shell .info-sidebar a.card.hris-module-card.sidebar-link .hris-module-nav-icon.sidebar-icon,
    body.internal-module-shell .page-content.hris-clean-shell .info-sidebar a.card.hris-module-card.sidebar-link .hris-module-nav-icon.sidebar-icon,
    html[data-theme] body.internal-clean-page-shell .clean-module-sidebar a.card.hris-module-card.sidebar-link .hris-module-nav-icon.sidebar-icon,
    body.internal-clean-page-shell .clean-module-sidebar a.card.hris-module-card.sidebar-link .hris-module-nav-icon.sidebar-icon {
        width: 20px !important;
        min-width: 20px !important;
        height: 20px !important;
        flex: 0 0 20px !important;
    }

    html[data-theme] body:is(.internal-module-shell, .internal-clean-page-shell) :is(a.sidebar-link, a.hris-module-card) :is(small, .hris-module-card-copy),
    body:is(.internal-module-shell, .internal-clean-page-shell) :is(a.sidebar-link, a.hris-module-card) :is(small, .hris-module-card-copy) {
        display: none !important;
    }

    html[data-theme] body:is(.internal-module-shell, .internal-clean-page-shell) :is(a.sidebar-link h2, a.hris-module-card h2),
    body:is(.internal-module-shell, .internal-clean-page-shell) :is(a.sidebar-link h2, a.hris-module-card h2) {
        font-size: 0.9rem !important;
        line-height: 1.15 !important;
        white-space: nowrap !important;
    }
}

@media (max-width: 640px) {
    html[data-theme] body .app-update-prompt,
    body .app-update-prompt {
        left: 12px !important;
        right: 12px !important;
        bottom: 12px !important;
        width: auto !important;
        max-width: none !important;
        grid-template-columns: 36px minmax(0, 1fr) 24px !important;
        gap: 10px !important;
        padding: 14px 12px !important;
        border-radius: 16px !important;
    }

    html[data-theme] body .app-update-icon,
    body .app-update-icon {
        width: 36px !important;
        height: 36px !important;
    }

    html[data-theme] body .app-update-icon svg,
    body .app-update-icon svg {
        width: 18px !important;
        height: 18px !important;
    }

    html[data-theme] body .app-update-copy,
    body .app-update-copy {
        gap: 2px !important;
    }

    html[data-theme] body .app-update-copy strong,
    body .app-update-copy strong {
        font-size: 0.96rem !important;
    }

    html[data-theme] body .app-update-copy span,
    body .app-update-copy span {
        font-size: 0.8rem !important;
        line-height: 1.25 !important;
    }

    html[data-theme] body .app-update-copy small,
    body .app-update-copy small {
        display: none !important;
    }

    html[data-theme] body .app-update-notes,
    body .app-update-notes {
        display: block !important;
        max-height: 88px !important;
        overflow: auto !important;
        margin-top: 4px !important;
        padding-right: 2px !important;
        font-size: 0.76rem !important;
        line-height: 1.28 !important;
    }

    html[data-theme] body .app-update-actions,
    body .app-update-actions {
        margin-top: 8px !important;
        gap: 14px !important;
    }

    html[data-theme] body .app-update-actions button,
    body .app-update-actions button {
        width: auto !important;
        min-height: 30px !important;
        font-size: 0.88rem !important;
    }

    html[data-theme] body .app-update-close,
    body .app-update-close {
        width: 24px !important;
        height: 24px !important;
        font-size: 1.35rem !important;
    }
}

@media (max-width: 760px) {
    html[data-theme] body.internal-module-shell .page-content.hris-clean-shell .internal-module-layout > .info-sidebar,
    body.internal-module-shell .page-content.hris-clean-shell .internal-module-layout > .info-sidebar,
    html[data-theme] body.internal-clean-page-shell .clean-module-layout > .clean-module-sidebar,
    body.internal-clean-page-shell .clean-module-layout > .clean-module-sidebar {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        overflow: visible !important;
    }

    html[data-theme] body.internal-module-shell .page-content.hris-clean-shell .info-sidebar details.hris-module-disclosure.information-sidebar-card,
    body.internal-module-shell .page-content.hris-clean-shell .info-sidebar details.hris-module-disclosure.information-sidebar-card,
    html[data-theme] body.internal-clean-page-shell .clean-module-sidebar details.hris-module-disclosure.information-sidebar-card,
    body.internal-clean-page-shell .clean-module-sidebar details.hris-module-disclosure.information-sidebar-card {
        display: block !important;
        grid-template-columns: none !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        overflow: visible !important;
    }

    html[data-theme] body.internal-module-shell .page-content.hris-clean-shell .info-sidebar nav.hris-module-grid.sidebar-menu,
    body.internal-module-shell .page-content.hris-clean-shell .info-sidebar nav.hris-module-grid.sidebar-menu,
    html[data-theme] body.internal-clean-page-shell .clean-module-sidebar nav.hris-module-grid.sidebar-menu,
    body.internal-clean-page-shell .clean-module-sidebar nav.hris-module-grid.sidebar-menu {
        display: flex !important;
        grid-template-columns: none !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 2px 8px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
    }

    html[data-theme] body.internal-module-shell .page-content.hris-clean-shell .info-sidebar nav.hris-module-grid.sidebar-menu > a.card.hris-module-card.sidebar-link,
    body.internal-module-shell .page-content.hris-clean-shell .info-sidebar nav.hris-module-grid.sidebar-menu > a.card.hris-module-card.sidebar-link,
    html[data-theme] body.internal-clean-page-shell .clean-module-sidebar nav.hris-module-grid.sidebar-menu > a.card.hris-module-card.sidebar-link,
    body.internal-clean-page-shell .clean-module-sidebar nav.hris-module-grid.sidebar-menu > a.card.hris-module-card.sidebar-link {
        width: auto !important;
        inline-size: auto !important;
        min-width: max-content !important;
        max-width: none !important;
        height: 40px !important;
        min-height: 40px !important;
        max-height: 40px !important;
        grid-template-columns: 20px max-content !important;
        grid-auto-rows: min-content !important;
        align-items: center !important;
        align-content: center !important;
        overflow: visible !important;
    }

    html[data-theme] body.internal-module-shell .page-content.hris-clean-shell .info-sidebar nav.hris-module-grid.sidebar-menu > a.card.hris-module-card.sidebar-link .hris-module-card-copy,
    body.internal-module-shell .page-content.hris-clean-shell .info-sidebar nav.hris-module-grid.sidebar-menu > a.card.hris-module-card.sidebar-link .hris-module-card-copy,
    html[data-theme] body.internal-clean-page-shell .clean-module-sidebar nav.hris-module-grid.sidebar-menu > a.card.hris-module-card.sidebar-link .hris-module-card-copy,
    body.internal-clean-page-shell .clean-module-sidebar nav.hris-module-grid.sidebar-menu > a.card.hris-module-card.sidebar-link .hris-module-card-copy {
        display: block !important;
        width: auto !important;
        max-width: 180px !important;
        min-width: 0 !important;
        height: auto !important;
        line-height: 1.15 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    html[data-theme] body.internal-module-shell .page-content.hris-clean-shell .info-sidebar .hris-module-grid.sidebar-menu,
    body.internal-module-shell .page-content.hris-clean-shell .info-sidebar .hris-module-grid.sidebar-menu,
    html[data-theme] body.internal-clean-page-shell .clean-module-sidebar .hris-module-grid.sidebar-menu,
    body.internal-clean-page-shell .clean-module-sidebar .hris-module-grid.sidebar-menu {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
    }

    html[data-theme] body.internal-module-shell .page-content.hris-clean-shell .info-sidebar .hris-module-grid.sidebar-menu > a.card.hris-module-card.sidebar-link,
    body.internal-module-shell .page-content.hris-clean-shell .info-sidebar .hris-module-grid.sidebar-menu > a.card.hris-module-card.sidebar-link,
    html[data-theme] body.internal-clean-page-shell .clean-module-sidebar .hris-module-grid.sidebar-menu > a.card.hris-module-card.sidebar-link,
    body.internal-clean-page-shell .clean-module-sidebar .hris-module-grid.sidebar-menu > a.card.hris-module-card.sidebar-link {
        width: auto !important;
        inline-size: auto !important;
        min-width: max-content !important;
        max-width: none !important;
        height: 40px !important;
        min-height: 40px !important;
        max-height: 40px !important;
        grid-template-columns: 20px max-content !important;
        grid-auto-rows: min-content !important;
        align-items: center !important;
        align-content: center !important;
        overflow: visible !important;
    }

    html[data-theme] body.internal-module-shell .page-content.hris-clean-shell .info-sidebar .hris-module-grid.sidebar-menu > a.card.hris-module-card.sidebar-link .hris-module-card-copy,
    body.internal-module-shell .page-content.hris-clean-shell .info-sidebar .hris-module-grid.sidebar-menu > a.card.hris-module-card.sidebar-link .hris-module-card-copy,
    html[data-theme] body.internal-clean-page-shell .clean-module-sidebar .hris-module-grid.sidebar-menu > a.card.hris-module-card.sidebar-link .hris-module-card-copy,
    body.internal-clean-page-shell .clean-module-sidebar .hris-module-grid.sidebar-menu > a.card.hris-module-card.sidebar-link .hris-module-card-copy {
        display: block !important;
        width: auto !important;
        max-width: 180px !important;
        min-width: 0 !important;
        height: auto !important;
        line-height: 1.15 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    html[data-theme] body.internal-module-shell .page-content.hris-clean-shell .info-sidebar .hris-module-grid.sidebar-menu > a.card.hris-module-card.sidebar-link:is(.active, .is-active) :is(h2, .hris-module-card-copy, .hris-module-card-copy *),
    body.internal-module-shell .page-content.hris-clean-shell .info-sidebar .hris-module-grid.sidebar-menu > a.card.hris-module-card.sidebar-link:is(.active, .is-active) :is(h2, .hris-module-card-copy, .hris-module-card-copy *),
    html[data-theme] body.internal-clean-page-shell .clean-module-sidebar .hris-module-grid.sidebar-menu > a.card.hris-module-card.sidebar-link:is(.active, .is-active) :is(h2, .hris-module-card-copy, .hris-module-card-copy *),
    body.internal-clean-page-shell .clean-module-sidebar .hris-module-grid.sidebar-menu > a.card.hris-module-card.sidebar-link:is(.active, .is-active) :is(h2, .hris-module-card-copy, .hris-module-card-copy *) {
        color: #ffffff !important;
    }
}

/* Workspace gateway compact launcher: pusat modul harus cepat dipakai, bukan hero panjang. */
html[data-theme] body.internal-portal-shell .workspace-gateway.internal-portal-home,
body.internal-portal-shell .workspace-gateway.internal-portal-home {
    width: min(1240px, calc(100% - clamp(28px, 5vw, 72px))) !important;
    max-width: 1240px !important;
    margin: 0 auto !important;
    padding: clamp(20px, 2.4vw, 30px) 0 38px !important;
    display: grid !important;
    gap: 18px !important;
}

html[data-theme] body.internal-portal-shell .workspace-gateway .internal-hero-section,
body.internal-portal-shell .workspace-gateway .internal-hero-section {
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
}

html[data-theme] body.internal-portal-shell .workspace-gateway .internal-search-wrap,
body.internal-portal-shell .workspace-gateway .internal-search-wrap {
    width: min(580px, 100%) !important;
    height: 50px !important;
    min-height: 50px !important;
    margin: 0 auto !important;
    border-radius: 999px !important;
}

html[data-theme] body.internal-portal-shell .workspace-gateway .internal-search-wrap input,
body.internal-portal-shell .workspace-gateway .internal-search-wrap input {
    height: 50px !important;
    min-height: 50px !important;
    font-size: 0.96rem !important;
}

html[data-theme] body.internal-portal-shell .workspace-gateway .internal-welcome-copy,
body.internal-portal-shell .workspace-gateway .internal-welcome-copy {
    display: grid !important;
    gap: 5px !important;
    max-width: 760px !important;
    margin: 0 auto !important;
    text-align: center !important;
}

html[data-theme] body.internal-portal-shell .workspace-gateway .internal-welcome-copy .eyebrow,
body.internal-portal-shell .workspace-gateway .internal-welcome-copy .eyebrow {
    margin: 0 !important;
    font-size: 0.74rem !important;
    line-height: 1.1 !important;
}

html[data-theme] body.internal-portal-shell .workspace-gateway .internal-welcome-copy h1,
body.internal-portal-shell .workspace-gateway .internal-welcome-copy h1 {
    margin: 0 !important;
    font-size: clamp(1.95rem, 3.2vw, 2.65rem) !important;
    line-height: 1.05 !important;
    letter-spacing: 0 !important;
}

html[data-theme] body.internal-portal-shell .workspace-gateway .internal-welcome-copy p:not(.eyebrow),
body.internal-portal-shell .workspace-gateway .internal-welcome-copy p:not(.eyebrow) {
    margin: 0 !important;
    font-size: 0.96rem !important;
}

html[data-theme] body.internal-portal-shell .workspace-gateway .internal-status-grid,
body.internal-portal-shell .workspace-gateway .internal-status-grid {
    width: 100% !important;
    margin: 2px 0 0 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
}

html[data-theme] body.internal-portal-shell .workspace-gateway .internal-status-card,
body.internal-portal-shell .workspace-gateway .internal-status-card {
    min-height: 68px !important;
    padding: 12px 16px !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    gap: 13px !important;
    box-shadow: none !important;
}

html[data-theme] body.internal-portal-shell .workspace-gateway .internal-status-icon,
body.internal-portal-shell .workspace-gateway .internal-status-icon {
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
}

html[data-theme] body.internal-portal-shell .workspace-gateway .internal-status-card h2,
body.internal-portal-shell .workspace-gateway .internal-status-card h2 {
    margin: 0 !important;
    font-size: 0.98rem !important;
    line-height: 1.15 !important;
}

html[data-theme] body.internal-portal-shell .workspace-gateway .internal-status-card p,
body.internal-portal-shell .workspace-gateway .internal-status-card p {
    margin: 4px 0 0 !important;
    font-size: 0.72rem !important;
    line-height: 1.2 !important;
    letter-spacing: 0.08em !important;
}

html[data-theme] body.internal-portal-shell .workspace-gateway .internal-apps-section,
body.internal-portal-shell .workspace-gateway .internal-apps-section {
    width: 100% !important;
    margin: 0 !important;
    display: grid !important;
    gap: 14px !important;
}

html[data-theme] body.internal-portal-shell .workspace-gateway .internal-apps-heading,
body.internal-portal-shell .workspace-gateway .internal-apps-heading {
    margin: 0 !important;
    align-items: end !important;
}

html[data-theme] body.internal-portal-shell .workspace-gateway .internal-apps-heading p,
body.internal-portal-shell .workspace-gateway .internal-apps-heading p {
    display: none !important;
}

html[data-theme] body.internal-portal-shell .workspace-gateway .internal-apps-heading h2,
body.internal-portal-shell .workspace-gateway .internal-apps-heading h2 {
    margin: 0 !important;
    font-size: clamp(1.35rem, 2vw, 1.75rem) !important;
    line-height: 1.1 !important;
}

html[data-theme] body.internal-portal-shell .workspace-gateway .app-count,
body.internal-portal-shell .workspace-gateway .app-count {
    min-height: 30px !important;
    padding: 6px 10px !important;
    border-radius: 999px !important;
    font-size: 0.78rem !important;
}

html[data-theme] body.internal-portal-shell .workspace-gateway .internal-app-grid,
body.internal-portal-shell .workspace-gateway .internal-app-grid {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 12px !important;
}

html[data-theme] body.internal-portal-shell .workspace-gateway .internal-app-card,
body.internal-portal-shell .workspace-gateway .internal-app-card {
    min-height: 132px !important;
    height: auto !important;
    padding: 14px !important;
    border-radius: 12px !important;
    gap: 10px !important;
    box-shadow: none !important;
}

html[data-theme] body.internal-portal-shell .workspace-gateway .card-topline,
body.internal-portal-shell .workspace-gateway .card-topline {
    align-items: center !important;
    gap: 10px !important;
}

html[data-theme] body.internal-portal-shell .workspace-gateway .internal-app-icon,
body.internal-portal-shell .workspace-gateway .internal-app-icon {
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
}

html[data-theme] body.internal-portal-shell .workspace-gateway .internal-app-copy,
body.internal-portal-shell .workspace-gateway .internal-app-copy {
    display: grid !important;
    gap: 5px !important;
}

html[data-theme] body.internal-portal-shell .workspace-gateway .internal-app-copy h3,
body.internal-portal-shell .workspace-gateway .internal-app-copy h3 {
    margin: 0 !important;
    font-size: 0.96rem !important;
    line-height: 1.2 !important;
}

html[data-theme] body.internal-portal-shell .workspace-gateway .internal-app-copy p,
body.internal-portal-shell .workspace-gateway .internal-app-copy p {
    margin: 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    font-size: 0.8rem !important;
    line-height: 1.35 !important;
}

@media (max-width: 1180px) {
    html[data-theme] body.internal-portal-shell .workspace-gateway .internal-app-grid,
    body.internal-portal-shell .workspace-gateway .internal-app-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 980px) {
    html[data-theme] body.internal-portal-shell .workspace-gateway .internal-app-grid,
    body.internal-portal-shell .workspace-gateway .internal-app-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 760px) {
    html[data-theme] body.internal-portal-shell [data-internal-base-header],
    body.internal-portal-shell [data-internal-base-header] {
        min-height: 64px !important;
        grid-template-columns: minmax(0, 94px) minmax(0, auto) !important;
        grid-template-areas: "brand actions" !important;
        gap: 8px !important;
        padding: 10px !important;
        align-items: center !important;
        overflow: visible !important;
    }

    html[data-theme] body.internal-portal-shell [data-internal-base-header] .internal-shell-logo,
    body.internal-portal-shell [data-internal-base-header] .internal-shell-logo,
    html[data-theme] body.internal-portal-shell [data-internal-base-header] .internal-shell-brand :is(.brand-divider, .brand-logo-wide),
    body.internal-portal-shell [data-internal-base-header] .internal-shell-brand :is(.brand-divider, .brand-logo-wide) {
        display: none !important;
    }

    html[data-theme] body.internal-portal-shell [data-internal-base-header] .internal-shell-brand,
    body.internal-portal-shell [data-internal-base-header] .internal-shell-brand {
        grid-area: brand !important;
        max-width: 94px !important;
        overflow: hidden !important;
    }

    html[data-theme] body.internal-portal-shell [data-internal-base-header] .internal-shell-header-actions,
    body.internal-portal-shell [data-internal-base-header] .internal-shell-header-actions {
        grid-area: actions !important;
        justify-self: end !important;
        max-width: calc(100vw - 118px) !important;
        transform: none !important;
    }

    html[data-theme] body.internal-portal-shell .workspace-gateway.internal-portal-home,
    body.internal-portal-shell .workspace-gateway.internal-portal-home {
        width: min(100% - 24px, 520px) !important;
        padding: 16px 0 28px !important;
        gap: 14px !important;
    }

    html[data-theme] body.internal-portal-shell .workspace-gateway .internal-hero-section,
    body.internal-portal-shell .workspace-gateway .internal-hero-section {
        gap: 12px !important;
    }

    html[data-theme] body.internal-portal-shell .workspace-gateway .internal-search-wrap,
    body.internal-portal-shell .workspace-gateway .internal-search-wrap,
    html[data-theme] body.internal-portal-shell .workspace-gateway .internal-search-wrap input,
    body.internal-portal-shell .workspace-gateway .internal-search-wrap input {
        height: 46px !important;
        min-height: 46px !important;
    }

    html[data-theme] body.internal-portal-shell .workspace-gateway .internal-welcome-copy,
    body.internal-portal-shell .workspace-gateway .internal-welcome-copy {
        gap: 3px !important;
        text-align: left !important;
    }

    html[data-theme] body.internal-portal-shell .workspace-gateway .internal-welcome-copy .eyebrow,
    body.internal-portal-shell .workspace-gateway .internal-welcome-copy .eyebrow {
        font-size: 0.68rem !important;
    }

    html[data-theme] body.internal-portal-shell .workspace-gateway .internal-welcome-copy h1,
    body.internal-portal-shell .workspace-gateway .internal-welcome-copy h1 {
        font-size: clamp(1.45rem, 7.8vw, 2rem) !important;
        line-height: 1.08 !important;
    }

    html[data-theme] body.internal-portal-shell .workspace-gateway .internal-welcome-copy p:not(.eyebrow),
    body.internal-portal-shell .workspace-gateway .internal-welcome-copy p:not(.eyebrow) {
        font-size: 0.84rem !important;
    }

    html[data-theme] body.internal-portal-shell .workspace-gateway .internal-status-grid,
    body.internal-portal-shell .workspace-gateway .internal-status-grid {
        display: flex !important;
        grid-template-columns: none !important;
        gap: 8px !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-top: 2px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scrollbar-width: none !important;
    }

    html[data-theme] body.internal-portal-shell .workspace-gateway .internal-status-grid::-webkit-scrollbar,
    body.internal-portal-shell .workspace-gateway .internal-status-grid::-webkit-scrollbar {
        display: none !important;
    }

    html[data-theme] body.internal-portal-shell .workspace-gateway .internal-status-card,
    body.internal-portal-shell .workspace-gateway .internal-status-card {
        min-width: 178px !important;
        max-width: 210px !important;
        min-height: 56px !important;
        padding: 9px 11px !important;
        gap: 9px !important;
        flex: 0 0 auto !important;
        border-radius: 12px !important;
    }

    html[data-theme] body.internal-portal-shell .workspace-gateway .internal-status-icon,
    body.internal-portal-shell .workspace-gateway .internal-status-icon {
        width: 32px !important;
        min-width: 32px !important;
        height: 32px !important;
    }

    html[data-theme] body.internal-portal-shell .workspace-gateway .internal-status-card h2,
    body.internal-portal-shell .workspace-gateway .internal-status-card h2 {
        font-size: 0.86rem !important;
    }

    html[data-theme] body.internal-portal-shell .workspace-gateway .internal-status-card p,
    body.internal-portal-shell .workspace-gateway .internal-status-card p {
        margin-top: 2px !important;
        font-size: 0.62rem !important;
        white-space: nowrap !important;
    }

    html[data-theme] body.internal-portal-shell .workspace-gateway .internal-apps-heading,
    body.internal-portal-shell .workspace-gateway .internal-apps-heading {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;
    }

    html[data-theme] body.internal-portal-shell .workspace-gateway .internal-apps-heading h2,
    body.internal-portal-shell .workspace-gateway .internal-apps-heading h2 {
        font-size: 1.15rem !important;
    }

    html[data-theme] body.internal-portal-shell .workspace-gateway .app-count,
    body.internal-portal-shell .workspace-gateway .app-count {
        white-space: nowrap !important;
        font-size: 0.72rem !important;
    }

    html[data-theme] body.internal-portal-shell .workspace-gateway .internal-app-grid,
    body.internal-portal-shell .workspace-gateway .internal-app-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    html[data-theme] body.internal-portal-shell .workspace-gateway .internal-app-card,
    body.internal-portal-shell .workspace-gateway .internal-app-card {
        min-height: 112px !important;
        padding: 11px !important;
        gap: 8px !important;
        border-radius: 12px !important;
    }

    html[data-theme] body.internal-portal-shell .workspace-gateway .internal-app-icon,
    body.internal-portal-shell .workspace-gateway .internal-app-icon {
        width: 34px !important;
        min-width: 34px !important;
        height: 34px !important;
    }

    html[data-theme] body.internal-portal-shell .workspace-gateway .status-pill,
    html[data-theme] body.internal-portal-shell .workspace-gateway .app-badge,
    body.internal-portal-shell .workspace-gateway .status-pill,
    body.internal-portal-shell .workspace-gateway .app-badge {
        max-width: 86px !important;
        padding: 4px 7px !important;
        font-size: 0.62rem !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    html[data-theme] body.internal-portal-shell .workspace-gateway .internal-app-copy,
    body.internal-portal-shell .workspace-gateway .internal-app-copy {
        gap: 4px !important;
    }

    html[data-theme] body.internal-portal-shell .workspace-gateway .internal-app-copy h3,
    body.internal-portal-shell .workspace-gateway .internal-app-copy h3 {
        font-size: 0.9rem !important;
        line-height: 1.15 !important;
    }

    html[data-theme] body.internal-portal-shell .workspace-gateway .internal-app-copy p,
    body.internal-portal-shell .workspace-gateway .internal-app-copy p {
        -webkit-line-clamp: 2 !important;
        font-size: 0.74rem !important;
        line-height: 1.28 !important;
    }
}

@media (max-width: 380px) {
    html[data-theme] body.internal-portal-shell .workspace-gateway .internal-app-grid,
    body.internal-portal-shell .workspace-gateway .internal-app-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

/* Pusat modul polish: tombol topbar mobile tetap ikon, popup update tidak menutup terlalu banyak kartu. */
@media (max-width: 760px) {
    html[data-theme] body.internal-portal-shell [data-internal-base-header] .internal-ai-button > span,
    body.internal-portal-shell [data-internal-base-header] .internal-ai-button > span,
    html[data-theme] body.internal-portal-shell .site-header.internal-app-topbar .internal-ai-button > span,
    body.internal-portal-shell .site-header.internal-app-topbar .internal-ai-button > span {
        display: none !important;
    }

    html[data-theme] body.internal-portal-shell [data-internal-base-header] .internal-topbar-user,
    body.internal-portal-shell [data-internal-base-header] .internal-topbar-user {
        flex-wrap: nowrap !important;
        align-items: center !important;
    }
}

@media (min-width: 641px) {
    html[data-theme] body.internal-portal-shell .app-update-prompt,
    body.internal-portal-shell .app-update-prompt {
        width: min(318px, calc(100vw - 24px)) !important;
        grid-template-columns: 38px minmax(0, 1fr) 24px !important;
        gap: 10px !important;
        padding: 16px 14px 14px !important;
        border-radius: 16px !important;
    }

    html[data-theme] body.internal-portal-shell .app-update-icon,
    body.internal-portal-shell .app-update-icon {
        width: 38px !important;
        height: 38px !important;
    }

    html[data-theme] body.internal-portal-shell .app-update-copy,
    body.internal-portal-shell .app-update-copy {
        gap: 3px !important;
    }

    html[data-theme] body.internal-portal-shell .app-update-copy strong,
    body.internal-portal-shell .app-update-copy strong {
        font-size: 0.95rem !important;
    }

    html[data-theme] body.internal-portal-shell .app-update-copy span,
    html[data-theme] body.internal-portal-shell .app-update-copy small,
    html[data-theme] body.internal-portal-shell .app-update-notes,
    body.internal-portal-shell .app-update-copy span,
    body.internal-portal-shell .app-update-copy small,
    body.internal-portal-shell .app-update-notes {
        font-size: 0.8rem !important;
        line-height: 1.3 !important;
    }

    html[data-theme] body.internal-portal-shell .app-update-notes,
    body.internal-portal-shell .app-update-notes {
        max-height: 88px !important;
        overflow: auto !important;
        padding-right: 2px !important;
    }

    html[data-theme] body.internal-portal-shell .app-update-actions,
    body.internal-portal-shell .app-update-actions {
        gap: 10px !important;
        margin-top: 6px !important;
    }
}

@media (min-width: 1024px) {
    html[data-theme] body.internal-portal-shell .app-update-prompt,
    body.internal-portal-shell .app-update-prompt {
        top: 96px !important;
        bottom: auto !important;
    }
}

/* HRIS pass: ringkasan dashboard dan update prompt tidak memotong area kerja. */
@media (min-width: 641px) {
    html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) .app-update-prompt,
    body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) .app-update-prompt {
        width: min(318px, calc(100vw - 24px)) !important;
        grid-template-columns: 38px minmax(0, 1fr) 24px !important;
        gap: 10px !important;
        padding: 16px 14px 14px !important;
        border-radius: 16px !important;
    }

    html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) .app-update-icon,
    body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) .app-update-icon {
        width: 38px !important;
        height: 38px !important;
    }

    html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) .app-update-copy strong,
    body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) .app-update-copy strong {
        font-size: 0.95rem !important;
    }

    html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) .app-update-copy span,
    html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) .app-update-copy small,
    html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) .app-update-notes,
    body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) .app-update-copy span,
    body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) .app-update-copy small,
    body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) .app-update-notes {
        font-size: 0.8rem !important;
        line-height: 1.3 !important;
    }

    html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) .app-update-notes,
    body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) .app-update-notes {
        max-height: 88px !important;
        overflow: auto !important;
        padding-right: 2px !important;
    }
}

@media (min-width: 1024px) {
    html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) .app-update-prompt,
    body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) .app-update-prompt {
        top: 96px !important;
        bottom: auto !important;
    }
}

html[data-theme] body .app-update-actions button.app-update-primary,
html[data-theme] body .app-update-actions button.app-update-secondary,
body .app-update-actions button.app-update-primary,
body .app-update-actions button.app-update-secondary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    line-height: 1.2 !important;
}

html[data-theme] body .app-update-actions button.app-update-primary,
body .app-update-actions button.app-update-primary {
    color: #2563eb !important;
}

html[data-theme] body .app-update-actions button.app-update-secondary,
body .app-update-actions button.app-update-secondary {
    color: #98a2b3 !important;
}

html[data-theme] body .app-update-actions button.app-update-primary:hover,
html[data-theme] body .app-update-actions button.app-update-secondary:hover,
body .app-update-actions button.app-update-primary:hover,
body .app-update-actions button.app-update-secondary:hover {
    text-decoration: underline !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .content-panel[data-hris-module="dashboard"] > .meta-grid,
body.internal-module-shell .hris-clean-shell .content-panel[data-hris-module="dashboard"] > .meta-grid {
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)) !important;
    gap: 8px !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .content-panel[data-hris-module="dashboard"] > .meta-grid > .meta-card,
body.internal-module-shell .hris-clean-shell .content-panel[data-hris-module="dashboard"] > .meta-grid > .meta-card {
    min-height: 54px !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .content-panel[data-hris-module="dashboard"] > .meta-grid > .meta-card strong,
body.internal-module-shell .hris-clean-shell .content-panel[data-hris-module="dashboard"] > .meta-grid > .meta-card strong {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere !important;
    letter-spacing: 0 !important;
    word-spacing: normal !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .content-panel[data-hris-module="dashboard"] > .schedule-filter-bar,
body.internal-module-shell .hris-clean-shell .content-panel[data-hris-module="dashboard"] > .schedule-filter-bar {
    grid-template-columns: minmax(220px, 1fr) minmax(140px, 0.45fr) minmax(140px, 0.45fr) auto !important;
}

@media (max-width: 760px) {
    html[data-theme] body.internal-module-shell .hris-clean-shell .content-panel[data-hris-module="dashboard"] > .meta-grid,
    body.internal-module-shell .hris-clean-shell .content-panel[data-hris-module="dashboard"] > .meta-grid,
    html[data-theme] body.internal-module-shell .hris-clean-shell .content-panel[data-hris-module="dashboard"] > .schedule-filter-bar,
    body.internal-module-shell .hris-clean-shell .content-panel[data-hris-module="dashboard"] > .schedule-filter-bar {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] .internal-ai-button > span,
    body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] .internal-ai-button > span {
        display: none !important;
    }

    html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] .internal-ai-button::after,
    body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) [data-internal-base-header] .internal-ai-button::after {
        content: "AI" !important;
        font-size: 0.74rem !important;
        font-weight: 900 !important;
        letter-spacing: 0 !important;
    }
}

/* HRIS compact density: panel dan row dibuat lebih tipis di semua subhalaman HRIS. */
html[data-theme] body.internal-module-shell .page-content.hris-clean-shell > .internal-module-layout > .content-panel,
body.internal-module-shell .page-content.hris-clean-shell > .internal-module-layout > .content-panel {
    padding: 16px 16px 20px !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell :is(.table-box, .form-box, .box, .panel, details.panel-disclosure),
body.internal-module-shell .hris-clean-shell :is(.table-box, .form-box, .box, .panel, details.panel-disclosure) {
    border-radius: 7px !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell details.panel-disclosure,
body.internal-module-shell .hris-clean-shell details.panel-disclosure {
    gap: 0 !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell details.panel-disclosure > summary.panel-summary,
body.internal-module-shell .hris-clean-shell details.panel-disclosure > summary.panel-summary,
html[data-theme] body.internal-module-shell .hris-clean-shell .recruitment-workspace-panel > summary,
body.internal-module-shell .hris-clean-shell .recruitment-workspace-panel > summary {
    min-height: 44px !important;
    padding: 9px 12px !important;
    gap: 10px !important;
    border-radius: 7px !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell details.panel-disclosure > summary.panel-summary .section-title,
body.internal-module-shell .hris-clean-shell details.panel-disclosure > summary.panel-summary .section-title {
    margin: 0 !important;
    gap: 8px !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell details.panel-disclosure > summary.panel-summary .section-title p,
body.internal-module-shell .hris-clean-shell details.panel-disclosure > summary.panel-summary .section-title p {
    display: none !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell details.panel-disclosure > summary.panel-summary :is(h2, h3),
body.internal-module-shell .hris-clean-shell details.panel-disclosure > summary.panel-summary :is(h2, h3) {
    font-size: 0.92rem !important;
    line-height: 1.15 !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell details.panel-disclosure > .panel-content,
body.internal-module-shell .hris-clean-shell details.panel-disclosure > .panel-content {
    margin-top: 0 !important;
    padding: 10px 12px 12px !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .stack-scroll-list,
body.internal-module-shell .hris-clean-shell .stack-scroll-list {
    gap: 7px !important;
    padding: 0 !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell details.stack-scroll-card,
body.internal-module-shell .hris-clean-shell details.stack-scroll-card {
    margin-top: 0 !important;
    border-radius: 7px !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell details.stack-scroll-card > summary.panel-summary,
body.internal-module-shell .hris-clean-shell details.stack-scroll-card > summary.panel-summary {
    min-height: 42px !important;
    padding: 6px 10px !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell details.stack-scroll-card > summary.panel-summary :is(h2, h3),
body.internal-module-shell .hris-clean-shell details.stack-scroll-card > summary.panel-summary :is(h2, h3) {
    font-size: 0.88rem !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell details.stack-scroll-card > summary.panel-summary .panel-summary-meta,
body.internal-module-shell .hris-clean-shell details.stack-scroll-card > summary.panel-summary .panel-summary-meta {
    gap: 6px !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell :is(.panel-summary-meta, .split-actions),
body.internal-module-shell .hris-clean-shell :is(.panel-summary-meta, .split-actions) {
    gap: 8px !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell :is(.badge, .panel-summary-state),
body.internal-module-shell .hris-clean-shell :is(.badge, .panel-summary-state) {
    min-height: 22px !important;
    padding: 4px 9px !important;
    font-size: 0.67rem !important;
    line-height: 1 !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell :is(.hris-employee-row-meta, .hris-leave-row-meta),
body.internal-module-shell .hris-clean-shell :is(.hris-employee-row-meta, .hris-leave-row-meta) {
    margin-top: 4px !important;
    gap: 4px 6px !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell :is(.hris-employee-row-meta, .hris-leave-row-meta) span,
body.internal-module-shell .hris-clean-shell :is(.hris-employee-row-meta, .hris-leave-row-meta) span {
    min-height: 20px !important;
    padding: 2px 7px !important;
    font-size: 0.68rem !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .biometric-data-card.hris-overtime-balance-card,
body.internal-module-shell .hris-clean-shell .biometric-data-card.hris-overtime-balance-card {
    display: block !important;
    max-width: 100% !important;
    overflow: auto !important;
    overflow-y: hidden !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell table.hris-overtime-balance-table,
body.internal-module-shell .hris-clean-shell table.hris-overtime-balance-table {
    min-width: 1280px !important;
    width: max-content !important;
    table-layout: auto !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .hris-overtime-balance-table :is(th, td),
body.internal-module-shell .hris-clean-shell .hris-overtime-balance-table :is(th, td) {
    white-space: nowrap !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .hris-overtime-balance-table .hris-overtime-staff-cell,
body.internal-module-shell .hris-clean-shell .hris-overtime-balance-table .hris-overtime-staff-cell {
    min-width: 220px !important;
    max-width: 280px !important;
    white-space: normal !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .hris-overtime-balance-table .hris-overtime-staff-name,
body.internal-module-shell .hris-clean-shell .hris-overtime-balance-table .hris-overtime-staff-name {
    display: block !important;
    line-height: 1.22 !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .hris-overtime-balance-table .hris-overtime-homebase-cell,
body.internal-module-shell .hris-clean-shell .hris-overtime-balance-table .hris-overtime-homebase-cell {
    min-width: 150px !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .hris-overtime-balance-table .hris-overtime-balance-cell,
body.internal-module-shell .hris-clean-shell .hris-overtime-balance-table .hris-overtime-balance-cell {
    min-width: 190px !important;
    white-space: normal !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .biometric-data-card.hris-overtime-usage-card,
body.internal-module-shell .hris-clean-shell .biometric-data-card.hris-overtime-usage-card {
    display: block !important;
    max-width: 100% !important;
    overflow: auto !important;
    overflow-y: hidden !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell table.hris-overtime-usage-table,
body.internal-module-shell .hris-clean-shell table.hris-overtime-usage-table {
    min-width: 980px !important;
    width: max-content !important;
    table-layout: auto !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .hris-overtime-usage-table :is(th, td),
body.internal-module-shell .hris-clean-shell .hris-overtime-usage-table :is(th, td) {
    white-space: nowrap !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .hris-overtime-usage-table .hris-overtime-staff-cell,
body.internal-module-shell .hris-clean-shell .hris-overtime-usage-table .hris-overtime-staff-cell {
    min-width: 180px !important;
    max-width: 240px !important;
    white-space: normal !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .hris-overtime-usage-table .hris-overtime-staff-name,
body.internal-module-shell .hris-clean-shell .hris-overtime-usage-table .hris-overtime-staff-name {
    display: block !important;
    line-height: 1.22 !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .hris-overtime-usage-table .hris-overtime-homebase-cell,
body.internal-module-shell .hris-clean-shell .hris-overtime-usage-table .hris-overtime-homebase-cell {
    min-width: 150px !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
}

@media (max-width: 760px) {
    html[data-theme] body.internal-module-shell .page-content.hris-clean-shell > .internal-module-layout > .content-panel,
    body.internal-module-shell .page-content.hris-clean-shell > .internal-module-layout > .content-panel {
        padding: 12px 10px 16px !important;
    }

    html[data-theme] body.internal-module-shell .hris-clean-shell details.panel-disclosure > summary.panel-summary,
    body.internal-module-shell .hris-clean-shell details.panel-disclosure > summary.panel-summary {
        min-height: 42px !important;
        padding: 8px 10px !important;
    }

    html[data-theme] body.internal-module-shell .hris-clean-shell details.panel-disclosure > .panel-content,
    body.internal-module-shell .hris-clean-shell details.panel-disclosure > .panel-content {
        padding: 8px 10px 10px !important;
    }
}

/* Universal phone fit guard: internal module pages must not overflow on 320px-430px phones. */
@media (max-width: 860px) {
    html[data-theme],
    html[data-theme] body,
    body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) :is(
        .layout,
        .main,
        .page-content,
        .container,
        .portal-shell,
        .workspace-gateway,
        .internal-module-layout,
        .module-layout,
        .internal-module-panel,
        .information-panel,
        .content-panel,
        .internal-module-nav,
        .info-sidebar,
        .table-box,
        .form-box,
        .panel,
        .box,
        .card,
        details,
        summary
    ),
    body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) :is(
        .layout,
        .main,
        .page-content,
        .container,
        .portal-shell,
        .workspace-gateway,
        .internal-module-layout,
        .module-layout,
        .internal-module-panel,
        .information-panel,
        .content-panel,
        .internal-module-nav,
        .info-sidebar,
        .table-box,
        .form-box,
        .panel,
        .box,
        .card,
        details,
        summary
    ) {
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    html[data-theme] body.internal-module-shell .internal-module-layout,
    body.internal-module-shell .internal-module-layout {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 10px !important;
        width: 100% !important;
    }

    html[data-theme] body.internal-module-shell .internal-module-layout > .internal-module-nav,
    html[data-theme] body.internal-module-shell .internal-module-layout > .info-sidebar,
    body.internal-module-shell .internal-module-layout > .internal-module-nav,
    body.internal-module-shell .internal-module-layout > .info-sidebar {
        position: static !important;
        inset: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }

    html[data-theme] body.internal-module-shell .info-sidebar :is(.sidebar-menu, .hris-module-grid),
    body.internal-module-shell .info-sidebar :is(.sidebar-menu, .hris-module-grid) {
        display: grid !important;
        grid-auto-flow: column !important;
        grid-auto-columns: minmax(116px, 42vw) !important;
        grid-template-columns: none !important;
        gap: 8px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        scroll-snap-type: x proximity !important;
        padding: 2px 2px 8px !important;
    }

    html[data-theme] body.internal-module-shell .info-sidebar a.card.hris-module-card.sidebar-link,
    body.internal-module-shell .info-sidebar a.card.hris-module-card.sidebar-link {
        min-height: 56px !important;
        padding: 8px !important;
        gap: 8px !important;
        scroll-snap-align: start !important;
    }

    html[data-theme] body.internal-module-shell .info-sidebar a.card.hris-module-card.sidebar-link .hris-module-card-copy h2,
    body.internal-module-shell .info-sidebar a.card.hris-module-card.sidebar-link .hris-module-card-copy h2 {
        font-size: 0.78rem !important;
        line-height: 1.15 !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }

    html[data-theme] body.internal-module-shell .info-sidebar a.card.hris-module-card.sidebar-link .hris-module-card-copy small,
    body.internal-module-shell .info-sidebar a.card.hris-module-card.sidebar-link .hris-module-card-copy small {
        font-size: 0.65rem !important;
        line-height: 1.1 !important;
        white-space: normal !important;
    }

    html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) :is(input, select, textarea, button, .ghost-button, .button-primary, .button-secondary),
    body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) :is(input, select, textarea, button, .ghost-button, .button-primary, .button-secondary) {
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }
}

@media (max-width: 760px) {
    html[data-theme] body.bjas-document-shell .page-content,
    body.bjas-document-shell .page-content {
        width: 100% !important;
        padding-inline: clamp(8px, 3vw, 12px) !important;
    }

    html[data-theme] body.bjas-document-shell .page-content.document-approval-sheet-page,
    body.bjas-document-shell .page-content.document-approval-sheet-page {
        margin-inline: 0 !important;
        padding: 8px !important;
    }

    html[data-theme] body.bjas-document-shell .page-content.document-approval-sheet-page > .internal-module-layout,
    body.bjas-document-shell .page-content.document-approval-sheet-page > .internal-module-layout {
        margin: 0 !important;
        padding: 0 !important;
    }

    html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) :is(.internal-breadcrumb, .breadcrumb-bar, .clean-breadcrumb-bar),
    body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) :is(.internal-breadcrumb, .breadcrumb-bar, .clean-breadcrumb-bar) {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }

    html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) :is(.breadcrumb-list, .internal-breadcrumb ol),
    body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) :is(.breadcrumb-list, .internal-breadcrumb ol) {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow: hidden !important;
        gap: 4px 7px !important;
    }

    html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) :is(.breadcrumb-list li, .internal-breadcrumb li),
    body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell) :is(.breadcrumb-list li, .internal-breadcrumb li) {
        min-width: 0 !important;
        max-width: 100% !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }

    html[data-theme] body.bjas-document-shell .hris-clean-shell :is(.summary, .meta-grid, .form-grid, .top-bar, .products-filter-bar, .hris-document-workspace, .hris-document-preview-meta),
    body.bjas-document-shell .hris-clean-shell :is(.summary, .meta-grid, .form-grid, .top-bar, .products-filter-bar, .hris-document-workspace, .hris-document-preview-meta) {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        width: 100% !important;
        gap: 8px !important;
    }

    html[data-theme] body.bjas-document-shell .hris-clean-shell :is(.summary .card-mini, .meta-card),
    body.bjas-document-shell .hris-clean-shell :is(.summary .card-mini, .meta-card) {
        min-height: 48px !important;
        padding: 9px 10px !important;
    }

    html[data-theme] body.bjas-document-shell .hris-clean-shell details.panel-disclosure > summary.panel-summary,
    body.bjas-document-shell .hris-clean-shell details.panel-disclosure > summary.panel-summary {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        align-items: stretch !important;
        width: 100% !important;
    }

    html[data-theme] body.bjas-document-shell .hris-clean-shell details.panel-disclosure > summary.panel-summary .panel-summary-meta,
    body.bjas-document-shell .hris-clean-shell details.panel-disclosure > summary.panel-summary .panel-summary-meta {
        width: 100% !important;
        justify-content: flex-start !important;
        flex-wrap: wrap !important;
    }

    html[data-theme] body.bjas-document-shell .hris-clean-shell details.panel-disclosure > summary.panel-summary :is(.panel-summary-state, button, .ghost-button),
    body.bjas-document-shell .hris-clean-shell details.panel-disclosure > summary.panel-summary :is(.panel-summary-state, button, .ghost-button) {
        width: 100% !important;
        justify-content: center !important;
        text-align: center !important;
    }

    html[data-theme] body.bjas-document-shell .hris-document-preview-banner,
    body.bjas-document-shell .hris-document-preview-banner,
    html[data-theme] body.bjas-document-shell .split-actions,
    body.bjas-document-shell .split-actions {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
        gap: 8px !important;
    }

    html[data-theme] body.bjas-document-shell .hris-document-preview-banner .ghost-button,
    body.bjas-document-shell .hris-document-preview-banner .ghost-button,
    html[data-theme] body.bjas-document-shell .split-actions :is(a, button),
    body.bjas-document-shell .split-actions :is(a, button) {
        width: 100% !important;
        justify-content: center !important;
        text-align: center !important;
    }

    html[data-theme] body.bjas-document-shell .hris-document-preview-stage,
    body.bjas-document-shell .hris-document-preview-stage {
        width: 100% !important;
        max-width: 100% !important;
        overflow: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    html[data-theme] body.bjas-document-shell .hris-document-preview-stage iframe,
    html[data-theme] body.bjas-document-shell .hris-document-preview-stage img,
    body.bjas-document-shell .hris-document-preview-stage iframe,
    body.bjas-document-shell .hris-document-preview-stage img {
        width: 100% !important;
        max-width: 100% !important;
    }

    html[data-theme] body.bjas-document-shell .hris-document-preview-stage iframe,
    body.bjas-document-shell .hris-document-preview-stage iframe {
        min-height: 52vh !important;
    }

    html[data-theme] body.bjas-document-shell .document-module-actions .page-actions,
    body.bjas-document-shell .document-module-actions .page-actions {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 8px !important;
        width: 100% !important;
    }

    html[data-theme] body.bjas-document-shell .document-approval-sheet-page,
    body.bjas-document-shell .document-approval-sheet-page {
        width: 100% !important;
        max-width: 100% !important;
        padding-inline: 8px !important;
    }

    html[data-theme] body.bjas-document-shell .document-approval-sheet,
    body.bjas-document-shell .document-approval-sheet {
        gap: 10px !important;
    }

    html[data-theme] body.bjas-document-shell :is(.document-approval-masthead, .document-approval-workboard, .document-approval-paper, .document-approval-panel, .document-approval-sign-section),
    body.bjas-document-shell :is(.document-approval-masthead, .document-approval-workboard, .document-approval-paper, .document-approval-panel, .document-approval-sign-section) {
        border-radius: 12px !important;
        padding: 12px !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    html[data-theme] body.bjas-document-shell .document-approval-masthead,
    body.bjas-document-shell .document-approval-masthead,
    html[data-theme] body.bjas-document-shell .document-approval-branding,
    body.bjas-document-shell .document-approval-branding,
    html[data-theme] body.bjas-document-shell .document-approval-panel-head,
    body.bjas-document-shell .document-approval-panel-head {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
    }

    html[data-theme] body.bjas-document-shell .document-approval-brand-mark,
    body.bjas-document-shell .document-approval-brand-mark {
        width: 46px !important;
        height: 46px !important;
    }

    html[data-theme] body.bjas-document-shell .document-approval-brand-mark img,
    body.bjas-document-shell .document-approval-brand-mark img {
        width: 34px !important;
        height: 34px !important;
    }

    html[data-theme] body.bjas-document-shell :is(.document-approval-masthead h2, .document-approval-titleblock h2),
    body.bjas-document-shell :is(.document-approval-masthead h2, .document-approval-titleblock h2) {
        font-size: clamp(1.05rem, 6vw, 1.45rem) !important;
        line-height: 1.12 !important;
        overflow-wrap: anywhere !important;
    }

    html[data-theme] body.bjas-document-shell :is(.document-approval-masthead p, .document-approval-titleblock p, .document-approval-paper-head p, .document-approval-panel-head p, .document-approval-note-copy, .document-approval-sign-help),
    body.bjas-document-shell :is(.document-approval-masthead p, .document-approval-titleblock p, .document-approval-paper-head p, .document-approval-panel-head p, .document-approval-note-copy, .document-approval-sign-help) {
        font-size: 0.82rem !important;
        line-height: 1.45 !important;
        overflow-wrap: anywhere !important;
    }

    html[data-theme] body.bjas-document-shell :is(.document-approval-stat-grid, .document-approval-detail-grid, .document-approval-inline-list, .document-approval-preview-foot),
    body.bjas-document-shell :is(.document-approval-stat-grid, .document-approval-detail-grid, .document-approval-inline-list, .document-approval-preview-foot) {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 8px !important;
        width: 100% !important;
    }

    html[data-theme] body.bjas-document-shell .document-approval-stat-card,
    body.bjas-document-shell .document-approval-stat-card {
        min-height: 56px !important;
        padding: 10px !important;
        border-radius: 10px !important;
    }

    html[data-theme] body.bjas-document-shell .document-approval-preview-shell,
    body.bjas-document-shell .document-approval-preview-shell {
        width: 100% !important;
        max-width: 100% !important;
    }

    html[data-theme] body.bjas-document-shell .document-approval-preview-stage,
    body.bjas-document-shell .document-approval-preview-stage {
        padding: 8px !important;
        border-radius: 12px !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    html[data-theme] body.bjas-document-shell .document-approval-preview-toolbar,
    body.bjas-document-shell .document-approval-preview-toolbar {
        gap: 6px !important;
        overflow-x: auto !important;
    }

    html[data-theme] body.bjas-document-shell .document-approval-preview-frame,
    html[data-theme] body.bjas-document-shell .document-approval-preview-frame iframe,
    body.bjas-document-shell .document-approval-preview-frame,
    body.bjas-document-shell .document-approval-preview-frame iframe {
        min-height: 46vh !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    html[data-theme] body.bjas-document-shell .document-approval-sign-pad,
    body.bjas-document-shell .document-approval-sign-pad {
        min-height: 150px !important;
        width: 100% !important;
    }

    html[data-theme] body.bjas-document-shell .document-approval-sign-actions,
    body.bjas-document-shell .document-approval-sign-actions {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    html[data-theme] body.bjas-document-shell .info-sidebar :is(.sidebar-menu, .hris-module-grid),
    body.bjas-document-shell .info-sidebar :is(.sidebar-menu, .hris-module-grid) {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-auto-flow: row !important;
        grid-auto-columns: auto !important;
        overflow: visible !important;
        scroll-snap-type: none !important;
    }

    html[data-theme] body.bjas-document-shell .info-sidebar :is(.sidebar-menu, .hris-module-grid) > a.card.hris-module-card.sidebar-link,
    body.bjas-document-shell .info-sidebar :is(.sidebar-menu, .hris-module-grid) > a.card.hris-module-card.sidebar-link {
        width: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }
}

@media (max-width: 380px) {
    html[data-theme] body.internal-module-shell .info-sidebar :is(.sidebar-menu, .hris-module-grid),
    body.internal-module-shell .info-sidebar :is(.sidebar-menu, .hris-module-grid) {
        grid-auto-columns: minmax(96px, 47vw) !important;
    }

    html[data-theme] body.internal-module-shell .info-sidebar a.card.hris-module-card.sidebar-link,
    body.internal-module-shell .info-sidebar a.card.hris-module-card.sidebar-link {
        min-height: 50px !important;
        padding: 7px !important;
    }

    html[data-theme] body.internal-module-shell .info-sidebar a.card.hris-module-card.sidebar-link small,
    body.internal-module-shell .info-sidebar a.card.hris-module-card.sidebar-link small {
        display: none !important;
    }

    html[data-theme] body.bjas-document-shell :is(.document-approval-kicker, .document-approval-title-eyebrow),
    body.bjas-document-shell :is(.document-approval-kicker, .document-approval-title-eyebrow) {
        font-size: 0.64rem !important;
        letter-spacing: 0.08em !important;
    }
}

@media (max-width: 760px) {
    html[data-theme] body.internal-clean-page-shell.bjas-document-shell .clean-module-sidebar nav.hris-module-grid.sidebar-menu,
    body.internal-clean-page-shell.bjas-document-shell .clean-module-sidebar nav.hris-module-grid.sidebar-menu,
    html[data-theme] body.internal-module-shell.bjas-document-shell .page-content.hris-clean-shell .info-sidebar nav.hris-module-grid.sidebar-menu,
    body.internal-module-shell.bjas-document-shell .page-content.hris-clean-shell .info-sidebar nav.hris-module-grid.sidebar-menu,
    html[data-theme] body.internal-module-shell.bjas-document-shell .document-approval-sheet-page .info-sidebar nav.hris-module-grid.sidebar-menu,
    body.internal-module-shell.bjas-document-shell .document-approval-sheet-page .info-sidebar nav.hris-module-grid.sidebar-menu {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-auto-flow: row !important;
        grid-auto-columns: auto !important;
        overflow: visible !important;
        padding: 0 !important;
        gap: 8px !important;
    }

    html[data-theme] body.internal-clean-page-shell.bjas-document-shell .clean-module-sidebar nav.hris-module-grid.sidebar-menu > a.card.hris-module-card.sidebar-link,
    body.internal-clean-page-shell.bjas-document-shell .clean-module-sidebar nav.hris-module-grid.sidebar-menu > a.card.hris-module-card.sidebar-link,
    html[data-theme] body.internal-module-shell.bjas-document-shell .page-content.hris-clean-shell .info-sidebar nav.hris-module-grid.sidebar-menu > a.card.hris-module-card.sidebar-link,
    body.internal-module-shell.bjas-document-shell .page-content.hris-clean-shell .info-sidebar nav.hris-module-grid.sidebar-menu > a.card.hris-module-card.sidebar-link,
    html[data-theme] body.internal-module-shell.bjas-document-shell .document-approval-sheet-page .info-sidebar nav.hris-module-grid.sidebar-menu > a.card.hris-module-card.sidebar-link,
    body.internal-module-shell.bjas-document-shell .document-approval-sheet-page .info-sidebar nav.hris-module-grid.sidebar-menu > a.card.hris-module-card.sidebar-link {
        width: auto !important;
        inline-size: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 50px !important;
        max-height: none !important;
        grid-template-columns: 20px minmax(0, 1fr) !important;
        overflow: hidden !important;
    }

    html[data-theme] body.internal-clean-page-shell.bjas-document-shell .clean-module-sidebar nav.hris-module-grid.sidebar-menu > a.card.hris-module-card.sidebar-link .hris-module-card-copy,
    body.internal-clean-page-shell.bjas-document-shell .clean-module-sidebar nav.hris-module-grid.sidebar-menu > a.card.hris-module-card.sidebar-link .hris-module-card-copy,
    html[data-theme] body.internal-module-shell.bjas-document-shell .page-content.hris-clean-shell .info-sidebar nav.hris-module-grid.sidebar-menu > a.card.hris-module-card.sidebar-link .hris-module-card-copy,
    body.internal-module-shell.bjas-document-shell .page-content.hris-clean-shell .info-sidebar nav.hris-module-grid.sidebar-menu > a.card.hris-module-card.sidebar-link .hris-module-card-copy,
    html[data-theme] body.internal-module-shell.bjas-document-shell .document-approval-sheet-page .info-sidebar nav.hris-module-grid.sidebar-menu > a.card.hris-module-card.sidebar-link .hris-module-card-copy,
    body.internal-module-shell.bjas-document-shell .document-approval-sheet-page .info-sidebar nav.hris-module-grid.sidebar-menu > a.card.hris-module-card.sidebar-link .hris-module-card-copy {
        min-width: 0 !important;
        max-width: 100% !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        text-overflow: clip !important;
    }

    html[data-theme] body.internal-module-shell.bjas-document-shell .page-content.document-approval-sheet-page > .internal-module-layout,
    body.internal-module-shell.bjas-document-shell .page-content.document-approval-sheet-page > .internal-module-layout {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        width: 100% !important;
        max-width: 100% !important;
        gap: 10px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    html[data-theme] body.internal-module-shell.bjas-document-shell .page-content.document-approval-sheet-page > .internal-module-layout > .content-panel,
    body.internal-module-shell.bjas-document-shell .page-content.document-approval-sheet-page > .internal-module-layout > .content-panel,
    html[data-theme] body.internal-module-shell.bjas-document-shell .page-content.document-approval-sheet-page .document-approval-sheet,
    body.internal-module-shell.bjas-document-shell .page-content.document-approval-sheet-page .document-approval-sheet {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    html[data-theme] body.internal-clean-page-shell.internal-module-shell.bjas-document-shell .content-panel.clean-content-panel,
    body.internal-clean-page-shell.internal-module-shell.bjas-document-shell .content-panel.clean-content-panel {
        padding: 8px !important;
        box-sizing: border-box !important;
    }

    html[data-theme] body.internal-clean-page-shell.internal-module-shell.bjas-document-shell .content-panel.clean-content-panel > .page-content.document-approval-sheet-page,
    body.internal-clean-page-shell.internal-module-shell.bjas-document-shell .content-panel.clean-content-panel > .page-content.document-approval-sheet-page,
    html[data-theme] body.internal-module-shell.bjas-document-shell .content-panel > .page-content.document-approval-sheet-page,
    body.internal-module-shell.bjas-document-shell .content-panel > .page-content.document-approval-sheet-page {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 8px !important;
        box-sizing: border-box !important;
    }

    html[data-theme] body.internal-module-shell.bjas-document-shell .page-content.document-approval-sheet-page :is(
        .internal-module-layout,
        .content-panel,
        .document-approval-sheet,
        .document-approval-masthead,
        .document-approval-workboard,
        .document-approval-paper,
        .document-approval-panel,
        .document-approval-sign-section,
        .document-approval-stat-card,
        .document-approval-preview-stage,
        .document-approval-preview-frame,
        .document-approval-sign-pad
    ),
    body.internal-module-shell.bjas-document-shell .page-content.document-approval-sheet-page :is(
        .internal-module-layout,
        .content-panel,
        .document-approval-sheet,
        .document-approval-masthead,
        .document-approval-workboard,
        .document-approval-paper,
        .document-approval-panel,
        .document-approval-sign-section,
        .document-approval-stat-card,
        .document-approval-preview-stage,
        .document-approval-preview-frame,
        .document-approval-sign-pad
    ) {
        box-sizing: border-box !important;
    }

    html[data-theme] body.internal-module-shell.bjas-document-shell .page-content.document-approval-sheet-page :is(
        .document-approval-masthead,
        .document-approval-workboard,
        .document-approval-paper,
        .document-approval-panel,
        .document-approval-sign-section,
        .document-approval-branding,
        .document-approval-titleblock,
        .document-approval-stat-grid,
        .document-approval-stage,
        .document-approval-detail-grid
    ),
    body.internal-module-shell.bjas-document-shell .page-content.document-approval-sheet-page :is(
        .document-approval-masthead,
        .document-approval-workboard,
        .document-approval-paper,
        .document-approval-panel,
        .document-approval-sign-section,
        .document-approval-branding,
        .document-approval-titleblock,
        .document-approval-stat-grid,
        .document-approval-stage,
        .document-approval-detail-grid
    ) {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }

    html[data-theme] body.internal-module-shell.bjas-document-shell .page-content.document-approval-sheet-page :is(.document-approval-branding > div, .document-approval-titleblock, .document-approval-paper-head),
    body.internal-module-shell.bjas-document-shell .page-content.document-approval-sheet-page :is(.document-approval-branding > div, .document-approval-titleblock, .document-approval-paper-head) {
        min-width: 0 !important;
        max-width: 100% !important;
        overflow-wrap: anywhere !important;
    }
}

/* Final POS standalone guard: keep cashier chrome compact on phones only. */
html[data-theme] body.pos-clean-shell.internal-clean-page-shell .clean-module-layout.clean-module-layout--no-sidebar .clean-content-panel,
body.pos-clean-shell.internal-clean-page-shell .clean-module-layout.clean-module-layout--no-sidebar .clean-content-panel,
html[data-theme] body.pos-clean-shell.internal-clean-page-shell .clean-module-layout.clean-module-layout--no-sidebar .clean-content-panel > .page-content,
body.pos-clean-shell.internal-clean-page-shell .clean-module-layout.clean-module-layout--no-sidebar .clean-content-panel > .page-content {
    padding: 0 !important;
}

@media (max-width: 760px) {
    html[data-theme] body.pos-page-wide .pos-terminal-clean.pos-ipos-refactor .pos-ipos-topbar,
    body.pos-page-wide .pos-terminal-clean.pos-ipos-refactor .pos-ipos-topbar {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center !important;
        gap: 8px 10px !important;
        padding: 10px !important;
        overflow: hidden !important;
    }

    html[data-theme] body.pos-page-wide .pos-terminal-clean.pos-ipos-refactor .pos-ipos-brand,
    body.pos-page-wide .pos-terminal-clean.pos-ipos-refactor .pos-ipos-brand {
        min-width: 0 !important;
        gap: 8px !important;
    }

    html[data-theme] body.pos-page-wide .pos-terminal-clean.pos-ipos-refactor .pos-ipos-brand-mark,
    body.pos-page-wide .pos-terminal-clean.pos-ipos-refactor .pos-ipos-brand-mark {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        border-radius: 12px !important;
        font-size: 0.82rem !important;
    }

    html[data-theme] body.pos-page-wide .pos-terminal-clean.pos-ipos-refactor .pos-ipos-brand-copy,
    body.pos-page-wide .pos-terminal-clean.pos-ipos-refactor .pos-ipos-brand-copy {
        min-width: 0 !important;
    }

    html[data-theme] body.pos-page-wide .pos-terminal-clean.pos-ipos-refactor .pos-ipos-brand-copy strong,
    body.pos-page-wide .pos-terminal-clean.pos-ipos-refactor .pos-ipos-brand-copy strong {
        font-size: 0.9rem !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    html[data-theme] body.pos-page-wide .pos-terminal-clean.pos-ipos-refactor .pos-ipos-topactions,
    body.pos-page-wide .pos-terminal-clean.pos-ipos-refactor .pos-ipos-topactions {
        grid-column: 2 !important;
        display: flex !important;
        justify-content: flex-end !important;
        width: auto !important;
        min-width: 0 !important;
        gap: 6px !important;
        margin-left: 0 !important;
    }

    html[data-theme] body.pos-page-wide .pos-terminal-clean.pos-ipos-refactor :is(.pos-ipos-header-menu, .pos-ipos-close),
    body.pos-page-wide .pos-terminal-clean.pos-ipos-refactor :is(.pos-ipos-header-menu, .pos-ipos-close) {
        width: auto !important;
        min-width: 0 !important;
    }

    html[data-theme] body.pos-page-wide .pos-terminal-clean.pos-ipos-refactor :is(.pos-ipos-menu-trigger, .pos-ipos-close),
    body.pos-page-wide .pos-terminal-clean.pos-ipos-refactor :is(.pos-ipos-menu-trigger, .pos-ipos-close) {
        min-height: 38px !important;
        padding: 8px 10px !important;
        font-size: 0.84rem !important;
        white-space: nowrap !important;
    }

    html[data-theme] body.pos-page-wide .pos-terminal-clean.pos-ipos-refactor .pos-ipos-toolbar,
    body.pos-page-wide .pos-terminal-clean.pos-ipos-refactor .pos-ipos-toolbar {
        grid-column: 1 / -1 !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        width: 100% !important;
        overflow: visible !important;
    }

    html[data-theme] body.pos-page-wide .pos-terminal-clean.pos-ipos-refactor .pos-ipos-toolbar-pill,
    body.pos-page-wide .pos-terminal-clean.pos-ipos-refactor .pos-ipos-toolbar-pill {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 50px !important;
        padding: 8px 10px !important;
    }

    html[data-theme] body.pos-page-wide .pos-terminal-clean.pos-ipos-refactor .pos-ipos-toolbar-switcher select,
    body.pos-page-wide .pos-terminal-clean.pos-ipos-refactor .pos-ipos-toolbar-switcher select {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }
}

@media (max-width: 360px) {
    html[data-theme] body.pos-page-wide .pos-terminal-clean.pos-ipos-refactor .pos-ipos-brand-copy strong,
    body.pos-page-wide .pos-terminal-clean.pos-ipos-refactor .pos-ipos-brand-copy strong {
        max-width: 76px !important;
    }

    html[data-theme] body.pos-page-wide .pos-terminal-clean.pos-ipos-refactor :is(.pos-ipos-menu-trigger, .pos-ipos-close),
    body.pos-page-wide .pos-terminal-clean.pos-ipos-refactor :is(.pos-ipos-menu-trigger, .pos-ipos-close) {
        padding-inline: 8px !important;
        font-size: 0.78rem !important;
    }
}

/* BJAS Document already uses the clean-shell sidebar from base.html. */
html[data-theme] body.bjas-document-shell.internal-clean-page-shell .hris-clean-shell > .internal-module-layout > .internal-module-nav,
body.bjas-document-shell.internal-clean-page-shell .hris-clean-shell > .internal-module-layout > .internal-module-nav {
    display: none !important;
}

html[data-theme] body.bjas-document-shell.internal-clean-page-shell.internal-module-shell:not(.internal-module-hub-shell) .page-content.hris-clean-shell > .internal-module-layout:not(.internal-module-layout--hub) > .internal-module-nav,
body.bjas-document-shell.internal-clean-page-shell.internal-module-shell:not(.internal-module-hub-shell) .page-content.hris-clean-shell > .internal-module-layout:not(.internal-module-layout--hub) > .internal-module-nav,
html[data-theme] body.bjas-document-shell.internal-clean-page-shell.internal-module-shell:not(.internal-module-hub-shell) .page-content.hris-clean-shell :is(.information-module-nav, .info-sidebar),
body.bjas-document-shell.internal-clean-page-shell.internal-module-shell:not(.internal-module-hub-shell) .page-content.hris-clean-shell :is(.information-module-nav, .info-sidebar) {
    display: none !important;
}

html[data-theme] body.bjas-document-shell.internal-clean-page-shell .hris-clean-shell > .internal-module-layout,
body.bjas-document-shell.internal-clean-page-shell .hris-clean-shell > .internal-module-layout {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

html[data-theme] body.bjas-document-shell.internal-clean-page-shell.internal-module-shell:not(.internal-module-hub-shell) .page-content.hris-clean-shell > .internal-module-layout:not(.internal-module-layout--hub),
body.bjas-document-shell.internal-clean-page-shell.internal-module-shell:not(.internal-module-hub-shell) .page-content.hris-clean-shell > .internal-module-layout:not(.internal-module-layout--hub) {
    display: block !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

html[data-theme] body.bjas-document-shell.internal-clean-page-shell .hris-clean-shell > .internal-module-layout > .internal-module-panel,
body.bjas-document-shell.internal-clean-page-shell .hris-clean-shell > .internal-module-layout > .internal-module-panel {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
}

html[data-theme] body.bjas-document-shell.internal-clean-page-shell.internal-module-shell:not(.internal-module-hub-shell) .page-content.hris-clean-shell > .internal-module-layout:not(.internal-module-layout--hub) > .internal-module-panel,
body.bjas-document-shell.internal-clean-page-shell.internal-module-shell:not(.internal-module-hub-shell) .page-content.hris-clean-shell > .internal-module-layout:not(.internal-module-layout--hub) > .internal-module-panel {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
}

/* POS final guard: remove blue artifacts from checkout backdrop and table resize handles. */
html[data-theme] body.pos-page-wide.internal-clean-page-shell .pos-terminal-clean.pos-ipos-refactor .pos-payment-modal,
body.pos-page-wide.internal-clean-page-shell .pos-terminal-clean.pos-ipos-refactor .pos-payment-modal {
    background: #f7fafc !important;
}

html[data-theme] body.pos-page-wide.internal-clean-page-shell .pos-terminal-clean.pos-ipos-refactor .pos-payment-modal-backdrop,
body.pos-page-wide.internal-clean-page-shell .pos-terminal-clean.pos-ipos-refactor .pos-payment-modal-backdrop {
    position: fixed !important;
    inset: 0 !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: rgba(15, 23, 42, 0.34) !important;
    box-shadow: none !important;
    color: transparent !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    transform: none !important;
}

html[data-theme] body.pos-page-wide.internal-clean-page-shell .pos-terminal-clean.pos-ipos-refactor .pos-payment-modal-close,
body.pos-page-wide.internal-clean-page-shell .pos-terminal-clean.pos-ipos-refactor .pos-payment-modal-close {
    border: 1px solid var(--ipos-border) !important;
    background: #f8fafc !important;
    color: var(--ipos-text) !important;
    box-shadow: none !important;
}

html[data-theme] body.pos-page-wide.internal-clean-page-shell .pos-terminal-clean.pos-ipos-refactor .pos-payment-modal-close:hover,
body.pos-page-wide.internal-clean-page-shell .pos-terminal-clean.pos-ipos-refactor .pos-payment-modal-close:hover {
    background: #fff7e0 !important;
}

html[data-theme] body.pos-page-wide.internal-clean-page-shell .pos-checkout-success-modal[hidden],
body.pos-page-wide.internal-clean-page-shell .pos-checkout-success-modal[hidden] {
    display: none !important;
}

html[data-theme] body.pos-page-wide.internal-clean-page-shell .pos-checkout-success-modal,
body.pos-page-wide.internal-clean-page-shell .pos-checkout-success-modal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 2400 !important;
    display: grid !important;
    place-items: center !important;
    padding: 20px !important;
    background: transparent !important;
    color: #0f172a !important;
    -webkit-text-fill-color: initial !important;
    isolation: isolate !important;
}

html[data-theme] body.pos-checkout-success-open,
body.pos-checkout-success-open,
html[data-theme] body.modal-open.pos-checkout-success-open,
body.modal-open.pos-checkout-success-open {
    overflow: hidden !important;
}

html[data-theme] body.pos-page-wide.internal-clean-page-shell .pos-checkout-success-backdrop,
body.pos-page-wide.internal-clean-page-shell .pos-checkout-success-backdrop {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: rgba(15, 23, 42, 0.42) !important;
    box-shadow: none !important;
    color: transparent !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    backdrop-filter: blur(2px) !important;
    -webkit-backdrop-filter: blur(2px) !important;
}

html[data-theme] body.pos-page-wide.internal-clean-page-shell .pos-checkout-success-window,
body.pos-page-wide.internal-clean-page-shell .pos-checkout-success-window {
    position: relative !important;
    width: min(580px, calc(100vw - 32px)) !important;
    max-height: calc(100dvh - 32px) !important;
    overflow: auto !important;
    display: grid !important;
    gap: 12px !important;
    padding: 16px !important;
    border: 1px solid #d9e2ec !important;
    border-top: 3px solid #d7b760 !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    color: #0b1f3a !important;
    box-shadow: 0 22px 54px rgba(15, 23, 42, 0.2) !important;
}

html[data-theme] body.pos-page-wide.internal-clean-page-shell .pos-checkout-success-head,
html[data-theme] body.pos-page-wide.internal-clean-page-shell .pos-checkout-success-actions,
body.pos-page-wide.internal-clean-page-shell .pos-checkout-success-head,
body.pos-page-wide.internal-clean-page-shell .pos-checkout-success-actions {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

html[data-theme] body.pos-page-wide.internal-clean-page-shell .pos-checkout-success-head,
body.pos-page-wide.internal-clean-page-shell .pos-checkout-success-head {
    justify-content: space-between !important;
}

html[data-theme] body.pos-page-wide.internal-clean-page-shell .pos-checkout-success-head h3,
body.pos-page-wide.internal-clean-page-shell .pos-checkout-success-head h3 {
    margin: 2px 0 0 !important;
    color: #0b1f3a !important;
    font-size: 19px !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
}

html[data-theme] body.pos-page-wide.internal-clean-page-shell .pos-checkout-success-head .pos-ipos-kicker,
body.pos-page-wide.internal-clean-page-shell .pos-checkout-success-head .pos-ipos-kicker {
    color: #8a681d !important;
}

html[data-theme] body.pos-page-wide.internal-clean-page-shell .pos-checkout-success-close,
body.pos-page-wide.internal-clean-page-shell .pos-checkout-success-close {
    width: 34px !important;
    height: 34px !important;
    border: 1px solid #cfd9e6 !important;
    border-radius: 8px !important;
    background: #f8fafc !important;
    color: #0b1f3a !important;
    box-shadow: none !important;
}

html[data-theme] body.pos-page-wide.internal-clean-page-shell .pos-checkout-success-close:hover,
body.pos-page-wide.internal-clean-page-shell .pos-checkout-success-close:hover {
    background: #edf2f7 !important;
}

html[data-theme] body.pos-page-wide.internal-clean-page-shell .pos-checkout-success-body,
body.pos-page-wide.internal-clean-page-shell .pos-checkout-success-body {
    display: grid !important;
    gap: 6px !important;
}

html[data-theme] body.pos-page-wide.internal-clean-page-shell .pos-checkout-success-body > div,
body.pos-page-wide.internal-clean-page-shell .pos-checkout-success-body > div {
    min-height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 8px 12px !important;
    padding: 7px 10px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    background: #f8fafc !important;
    color: #0b1f3a !important;
}

html[data-theme] body.pos-page-wide.internal-clean-page-shell .pos-checkout-success-body span,
body.pos-page-wide.internal-clean-page-shell .pos-checkout-success-body span {
    color: #64748b !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
}

html[data-theme] body.pos-page-wide.internal-clean-page-shell .pos-checkout-success-body strong,
body.pos-page-wide.internal-clean-page-shell .pos-checkout-success-body strong {
    min-width: 0 !important;
    color: #0b1f3a !important;
    font-size: 13.5px !important;
    font-weight: 900 !important;
    line-height: 1.25 !important;
    text-align: right !important;
    overflow-wrap: anywhere !important;
}

html[data-theme] body.pos-page-wide.internal-clean-page-shell .pos-checkout-success-body [data-wa-tone="sent"],
body.pos-page-wide.internal-clean-page-shell .pos-checkout-success-body [data-wa-tone="sent"] {
    border-color: #bbf7d0 !important;
    background: #f0fdf4 !important;
}

html[data-theme] body.pos-page-wide.internal-clean-page-shell .pos-checkout-success-body [data-wa-tone="sent"] strong,
body.pos-page-wide.internal-clean-page-shell .pos-checkout-success-body [data-wa-tone="sent"] strong {
    color: #047857 !important;
}

html[data-theme] body.pos-page-wide.internal-clean-page-shell .pos-checkout-success-body [data-wa-tone="failed"],
html[data-theme] body.pos-page-wide.internal-clean-page-shell .pos-checkout-success-body [data-wa-tone="skipped"],
body.pos-page-wide.internal-clean-page-shell .pos-checkout-success-body [data-wa-tone="failed"],
body.pos-page-wide.internal-clean-page-shell .pos-checkout-success-body [data-wa-tone="skipped"] {
    border-color: #fecaca !important;
    background: #fff5f5 !important;
}

html[data-theme] body.pos-page-wide.internal-clean-page-shell .pos-checkout-success-body [data-wa-tone="failed"] strong,
html[data-theme] body.pos-page-wide.internal-clean-page-shell .pos-checkout-success-body [data-wa-tone="skipped"] strong,
body.pos-page-wide.internal-clean-page-shell .pos-checkout-success-body [data-wa-tone="failed"] strong,
body.pos-page-wide.internal-clean-page-shell .pos-checkout-success-body [data-wa-tone="skipped"] strong {
    color: #b42318 !important;
}

html[data-theme] body.pos-page-wide.internal-clean-page-shell .pos-checkout-success-body [data-wa-tone="queued"],
html[data-theme] body.pos-page-wide.internal-clean-page-shell .pos-checkout-success-body [data-wa-tone="processing"],
body.pos-page-wide.internal-clean-page-shell .pos-checkout-success-body [data-wa-tone="queued"],
body.pos-page-wide.internal-clean-page-shell .pos-checkout-success-body [data-wa-tone="processing"] {
    border-color: #fde68a !important;
    background: #fffbeb !important;
}

html[data-theme] body.pos-page-wide.internal-clean-page-shell .pos-checkout-success-body [data-wa-tone="queued"] strong,
html[data-theme] body.pos-page-wide.internal-clean-page-shell .pos-checkout-success-body [data-wa-tone="processing"] strong,
body.pos-page-wide.internal-clean-page-shell .pos-checkout-success-body [data-wa-tone="queued"] strong,
body.pos-page-wide.internal-clean-page-shell .pos-checkout-success-body [data-wa-tone="processing"] strong {
    color: #92400e !important;
}

html[data-theme] body.pos-page-wide.internal-clean-page-shell .pos-checkout-success-help,
body.pos-page-wide.internal-clean-page-shell .pos-checkout-success-help {
    flex-basis: 100% !important;
    margin-top: -2px !important;
    color: #475569 !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
    overflow-wrap: anywhere !important;
}

html[data-theme] body.pos-page-wide.internal-clean-page-shell .pos-checkout-success-actions,
body.pos-page-wide.internal-clean-page-shell .pos-checkout-success-actions {
    justify-content: flex-end !important;
    flex-wrap: wrap !important;
}

html[data-theme] body.pos-page-wide.internal-clean-page-shell .pos-checkout-success-actions .pos-vintage-button,
body.pos-page-wide.internal-clean-page-shell .pos-checkout-success-actions .pos-vintage-button {
    min-height: 34px !important;
    padding: 0 12px !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 9px !important;
    background: #ffffff !important;
    color: #0b1f3a !important;
    box-shadow: none !important;
    font-size: 12.5px !important;
    font-weight: 800 !important;
}

html[data-theme] body.pos-page-wide.internal-clean-page-shell .pos-checkout-success-actions .pos-vintage-button:is(:hover, :focus-visible),
body.pos-page-wide.internal-clean-page-shell .pos-checkout-success-actions .pos-vintage-button:is(:hover, :focus-visible) {
    background: #f1f5f9 !important;
}

html[data-theme] body.pos-page-wide.internal-clean-page-shell .pos-checkout-success-actions .pos-vintage-button.is-success,
body.pos-page-wide.internal-clean-page-shell .pos-checkout-success-actions .pos-vintage-button.is-success {
    border-color: #0b1f3a !important;
    background: #0b1f3a !important;
    color: #ffffff !important;
}

html[data-theme] body.pos-page-wide.internal-clean-page-shell .pos-checkout-success-actions .pos-vintage-button.is-success:is(:hover, :focus-visible),
body.pos-page-wide.internal-clean-page-shell .pos-checkout-success-actions .pos-vintage-button.is-success:is(:hover, :focus-visible) {
    background: #132b4a !important;
}

html[data-theme] body.pos-page-wide.internal-clean-page-shell .pos-checkout-success-actions .pos-checkout-success-retry,
body.pos-page-wide.internal-clean-page-shell .pos-checkout-success-actions .pos-checkout-success-retry {
    border-color: #f3c36b !important;
    background: #fff7ed !important;
    color: #92400e !important;
}

@media (max-width: 520px) {
    html[data-theme] body.pos-page-wide.internal-clean-page-shell .pos-checkout-success-modal,
    body.pos-page-wide.internal-clean-page-shell .pos-checkout-success-modal {
        padding: 12px !important;
    }

    html[data-theme] body.pos-page-wide.internal-clean-page-shell .pos-checkout-success-window,
    body.pos-page-wide.internal-clean-page-shell .pos-checkout-success-window {
        width: calc(100vw - 24px) !important;
        border-radius: 14px !important;
        padding: 14px !important;
    }

    html[data-theme] body.pos-page-wide.internal-clean-page-shell .pos-checkout-success-actions,
    body.pos-page-wide.internal-clean-page-shell .pos-checkout-success-actions {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    html[data-theme] body.pos-page-wide.internal-clean-page-shell .pos-checkout-success-actions .pos-vintage-button,
    body.pos-page-wide.internal-clean-page-shell .pos-checkout-success-actions .pos-vintage-button {
        width: 100% !important;
    }
}

html[data-theme] body.pos-page-wide .pos-terminal-clean.pos-ipos-refactor table.wms-layout-resizable .table-col-resizer,
html[data-theme] body.pos-page-wide .pos-terminal-clean.pos-ipos-refactor table.wms-layout-resizable .table-row-resizer,
body.pos-page-wide .pos-terminal-clean.pos-ipos-refactor table.wms-layout-resizable .table-col-resizer,
body.pos-page-wide .pos-terminal-clean.pos-ipos-refactor table.wms-layout-resizable .table-row-resizer {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

html[data-theme] body.pos-page-wide .pos-terminal-clean.pos-ipos-refactor :is(.pos-vintage-cartbox, .pos-ipos-cartbox, .pos-vintage-pickertablebox, .pos-ipos-pickertablebox, .pos-ipos-log-tablebox)::before,
body.pos-page-wide .pos-terminal-clean.pos-ipos-refactor :is(.pos-vintage-cartbox, .pos-ipos-cartbox, .pos-vintage-pickertablebox, .pos-ipos-pickertablebox, .pos-ipos-log-tablebox)::before {
    background: #c9a13a !important;
}

html[data-theme] body.pos-page-wide .table-box::before,
body.pos-page-wide .table-box::before {
    background: #c9a13a !important;
}

html[data-theme] body.pos-page-wide .pos-terminal-clean.pos-ipos-refactor :is(.pos-vintage-cartbox, .pos-ipos-cartbox, .pos-vintage-pickertablebox, .pos-ipos-pickertablebox, .pos-ipos-log-tablebox),
body.pos-page-wide .pos-terminal-clean.pos-ipos-refactor :is(.pos-vintage-cartbox, .pos-ipos-cartbox, .pos-vintage-pickertablebox, .pos-ipos-pickertablebox, .pos-ipos-log-tablebox) {
    scrollbar-color: rgba(112, 126, 145, 0.52) rgba(241, 245, 249, 0.88) !important;
}

html[data-theme] body.pos-page-wide .table-box,
body.pos-page-wide .table-box {
    scrollbar-color: rgba(112, 126, 145, 0.52) rgba(241, 245, 249, 0.88) !important;
}

html[data-theme] body.pos-page-wide .pos-terminal-clean.pos-ipos-refactor :is(.pos-vintage-cartbox, .pos-ipos-cartbox, .pos-vintage-pickertablebox, .pos-ipos-pickertablebox, .pos-ipos-log-tablebox)::-webkit-scrollbar-thumb,
body.pos-page-wide .pos-terminal-clean.pos-ipos-refactor :is(.pos-vintage-cartbox, .pos-ipos-cartbox, .pos-vintage-pickertablebox, .pos-ipos-pickertablebox, .pos-ipos-log-tablebox)::-webkit-scrollbar-thumb {
    background: rgba(112, 126, 145, 0.58) !important;
    border: 2px solid #f8fafc !important;
    border-radius: 999px !important;
}

html[data-theme] body.pos-page-wide .table-box::-webkit-scrollbar-thumb,
body.pos-page-wide .table-box::-webkit-scrollbar-thumb {
    background: rgba(112, 126, 145, 0.58) !important;
    border: 2px solid #f8fafc !important;
    border-radius: 999px !important;
}

html[data-theme] body.pos-page-wide .pos-terminal-clean.pos-ipos-refactor :is(.pos-vintage-cartbox, .pos-ipos-cartbox, .pos-vintage-pickertablebox, .pos-ipos-pickertablebox, .pos-ipos-log-tablebox)::-webkit-scrollbar-track,
body.pos-page-wide .pos-terminal-clean.pos-ipos-refactor :is(.pos-vintage-cartbox, .pos-ipos-cartbox, .pos-vintage-pickertablebox, .pos-ipos-pickertablebox, .pos-ipos-log-tablebox)::-webkit-scrollbar-track {
    background: rgba(241, 245, 249, 0.88) !important;
}

html[data-theme] body.pos-page-wide .table-box::-webkit-scrollbar-track,
body.pos-page-wide .table-box::-webkit-scrollbar-track {
    background: rgba(241, 245, 249, 0.88) !important;
}

/* =========================================================
   Stable internal header and sticky sidebar
   Scope: internal ERP shell only
   ========================================================= */

html[data-theme] body:is(.internal-module-shell, .internal-clean-page-shell):not(.ai-assistant-shell):not(.pos-clean-shell) .internal-app-topbar.internal-shell-header,
body:is(.internal-module-shell, .internal-clean-page-shell):not(.ai-assistant-shell):not(.pos-clean-shell) .internal-app-topbar.internal-shell-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 80 !important;
    min-height: 72px !important;
    height: 72px !important;
    max-height: 72px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 18px !important;
    padding: 0 clamp(16px, 3vw, 48px) !important;
    background: rgba(255, 255, 255, 0.96) !important;
    backdrop-filter: blur(16px) !important;
    border-bottom: 1px solid rgba(226, 232, 240, 0.9) !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
}

html:has(body:is(.internal-module-shell, .internal-clean-page-shell):not(.ai-assistant-shell):not(.pos-clean-shell)),
html[data-theme]:has(body:is(.internal-module-shell, .internal-clean-page-shell):not(.ai-assistant-shell):not(.pos-clean-shell)) {
    height: auto !important;
    min-height: 100% !important;
    max-height: none !important;
    overflow: visible !important;
}

html[data-theme] body:is(.internal-module-shell, .internal-clean-page-shell):not(.ai-assistant-shell):not(.pos-clean-shell),
body:is(.internal-module-shell, .internal-clean-page-shell):not(.ai-assistant-shell):not(.pos-clean-shell) {
    height: auto !important;
    min-height: 100dvh !important;
    max-height: none !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
}

html[data-theme] body:is(.internal-module-shell, .internal-clean-page-shell):not(.ai-assistant-shell):not(.pos-clean-shell) .main,
body:is(.internal-module-shell, .internal-clean-page-shell):not(.ai-assistant-shell):not(.pos-clean-shell) .main {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 0 34px !important;
    margin: 0 !important;
    overflow: visible !important;
}

html[data-theme] body:is(.internal-module-shell, .internal-clean-page-shell):not(.ai-assistant-shell):not(.pos-clean-shell) .internal-shell-brand,
body:is(.internal-module-shell, .internal-clean-page-shell):not(.ai-assistant-shell):not(.pos-clean-shell) .internal-shell-brand {
    justify-self: start !important;
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

html[data-theme] body:is(.internal-module-shell, .internal-clean-page-shell):not(.ai-assistant-shell):not(.pos-clean-shell) .internal-shell-logo,
body:is(.internal-module-shell, .internal-clean-page-shell):not(.ai-assistant-shell):not(.pos-clean-shell) .internal-shell-logo {
    justify-self: center !important;
    align-self: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 0 !important;
    max-height: 40px !important;
}

html[data-theme] body:is(.internal-module-shell, .internal-clean-page-shell):not(.ai-assistant-shell):not(.pos-clean-shell) .internal-shell-logo img,
body:is(.internal-module-shell, .internal-clean-page-shell):not(.ai-assistant-shell):not(.pos-clean-shell) .internal-shell-logo img {
    display: block !important;
    width: auto !important;
    max-width: min(220px, 28vw) !important;
    max-height: 34px !important;
    object-fit: contain !important;
}

html[data-theme] body:is(.internal-module-shell, .internal-clean-page-shell):not(.ai-assistant-shell):not(.pos-clean-shell) .internal-shell-header-actions,
body:is(.internal-module-shell, .internal-clean-page-shell):not(.ai-assistant-shell):not(.pos-clean-shell) .internal-shell-header-actions {
    justify-self: end !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 12px !important;
    min-width: 0 !important;
    max-width: 100% !important;
    transform: none !important;
    overflow: visible !important;
}

html[data-theme] body:is(.internal-module-shell, .internal-clean-page-shell):not(.ai-assistant-shell):not(.pos-clean-shell) [data-internal-base-header] .internal-shell-header-actions,
body:is(.internal-module-shell, .internal-clean-page-shell):not(.ai-assistant-shell):not(.pos-clean-shell) [data-internal-base-header] .internal-shell-header-actions {
    transform: none !important;
}

html[data-theme] body.request-workflow-shell .wms-page-stack :is(.wms-step-card, .wms-kpi-card),
body.request-workflow-shell .wms-page-stack :is(.wms-step-card, .wms-kpi-card) {
    overflow: hidden !important;
}

html[data-theme] body:is(.internal-module-shell, .internal-clean-page-shell):not(.ai-assistant-shell):not(.pos-clean-shell) .internal-shell-header :is(button, .internal-icon-button, .internal-brand-pill, .profile-button, .notification-button, .ai-topbar-link),
body:is(.internal-module-shell, .internal-clean-page-shell):not(.ai-assistant-shell):not(.pos-clean-shell) .internal-shell-header :is(button, .internal-icon-button, .internal-brand-pill, .profile-button, .notification-button, .ai-topbar-link) {
    min-height: 42px !important;
    max-height: 48px !important;
}

html[data-theme] body:is(.internal-module-shell, .internal-clean-page-shell):not(.ai-assistant-shell):not(.pos-clean-shell) .internal-shell-breadcrumb,
body:is(.internal-module-shell, .internal-clean-page-shell):not(.ai-assistant-shell):not(.pos-clean-shell) .internal-shell-breadcrumb {
    min-height: 52px !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 clamp(16px, 3vw, 48px) !important;
    border-bottom: 1px solid rgba(226, 232, 240, 0.75) !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
}

html[data-theme] body:is(.internal-module-shell, .internal-clean-page-shell):not(.ai-assistant-shell):not(.pos-clean-shell) .internal-shell-breadcrumb .breadcrumb-list,
body:is(.internal-module-shell, .internal-clean-page-shell):not(.ai-assistant-shell):not(.pos-clean-shell) .internal-shell-breadcrumb .breadcrumb-list {
    width: min(100%, 1500px) !important;
    margin: 0 auto !important;
    min-height: 52px !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    box-sizing: border-box !important;
}

html[data-theme] body.internal-module-shell:not(.internal-module-hub-shell):not(.bjas-document-shell) .internal-module-layout:not(.internal-module-layout--hub),
body.internal-module-shell:not(.internal-module-hub-shell):not(.bjas-document-shell) .internal-module-layout:not(.internal-module-layout--hub) {
    display: grid !important;
    grid-template-columns: 280px minmax(0, 1fr) !important;
    gap: 18px !important;
    width: min(100% - 32px, 1500px) !important;
    max-width: 1500px !important;
    box-sizing: border-box !important;
    margin: 18px auto 36px !important;
    align-items: start !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
}

html[data-theme] body.internal-module-shell:not(.internal-module-hub-shell):not(.bjas-document-shell) .page-content.hris-clean-shell > .internal-module-layout:not(.internal-module-layout--hub),
body.internal-module-shell:not(.internal-module-hub-shell):not(.bjas-document-shell) .page-content.hris-clean-shell > .internal-module-layout:not(.internal-module-layout--hub) {
    grid-template-columns: 280px minmax(0, 1fr) !important;
    gap: 18px !important;
    width: min(100% - 32px, 1500px) !important;
    max-width: 1500px !important;
    box-sizing: border-box !important;
    margin: 18px auto 36px !important;
}

html[data-theme] body.internal-module-shell:not(.internal-module-hub-shell):not(.bjas-document-shell) .internal-module-layout:not(.internal-module-layout--hub) > .internal-module-nav,
body.internal-module-shell:not(.internal-module-hub-shell):not(.bjas-document-shell) .internal-module-layout:not(.internal-module-layout--hub) > .internal-module-nav {
    position: sticky !important;
    top: 90px !important;
    align-self: start !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 280px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 108px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    z-index: 20 !important;
}

html[data-theme] body.internal-module-shell:not(.internal-module-hub-shell):not(.bjas-document-shell) .page-content.hris-clean-shell > .internal-module-layout:not(.internal-module-layout--hub) > .internal-module-nav,
body.internal-module-shell:not(.internal-module-hub-shell):not(.bjas-document-shell) .page-content.hris-clean-shell > .internal-module-layout:not(.internal-module-layout--hub) > .internal-module-nav {
    position: sticky !important;
    align-self: start !important;
    max-width: 280px !important;
    max-height: min(590px, calc(100dvh - 108px)) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    top: 90px !important;
}

html[data-theme] body.internal-module-shell:not(.internal-module-hub-shell):not(.bjas-document-shell) .internal-module-layout:not(.internal-module-layout--hub) > .content-panel,
body.internal-module-shell:not(.internal-module-hub-shell):not(.bjas-document-shell) .internal-module-layout:not(.internal-module-layout--hub) > .content-panel {
    min-width: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    height: auto !important;
    min-height: calc(100dvh - 180px) !important;
    max-height: none !important;
    overflow: visible !important;
    z-index: 1 !important;
}

html[data-theme] body.internal-clean-page-shell:not(.ai-assistant-shell):not(.pos-clean-shell):not(.bjas-document-shell) .clean-module-layout:not(.clean-module-layout--no-sidebar),
body.internal-clean-page-shell:not(.ai-assistant-shell):not(.pos-clean-shell):not(.bjas-document-shell) .clean-module-layout:not(.clean-module-layout--no-sidebar) {
    display: grid !important;
    grid-template-columns: 280px minmax(0, 1fr) !important;
    gap: 18px !important;
    width: min(100% - 32px, 1500px) !important;
    max-width: 1500px !important;
    box-sizing: border-box !important;
    margin: 18px auto 36px !important;
    align-items: start !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
}

html[data-theme] body.internal-clean-page-shell:not(.ai-assistant-shell):not(.pos-clean-shell):not(.bjas-document-shell) .clean-module-layout:not(.clean-module-layout--no-sidebar) > .clean-module-sidebar,
body.internal-clean-page-shell:not(.ai-assistant-shell):not(.pos-clean-shell):not(.bjas-document-shell) .clean-module-layout:not(.clean-module-layout--no-sidebar) > .clean-module-sidebar {
    position: sticky !important;
    top: 90px !important;
    align-self: start !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 280px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 108px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    z-index: 20 !important;
}

html[data-theme] body.internal-clean-page-shell:not(.ai-assistant-shell):not(.pos-clean-shell):not(.bjas-document-shell) .clean-module-layout:not(.clean-module-layout--no-sidebar) > .clean-content-panel,
body.internal-clean-page-shell:not(.ai-assistant-shell):not(.pos-clean-shell):not(.bjas-document-shell) .clean-module-layout:not(.clean-module-layout--no-sidebar) > .clean-content-panel {
    min-width: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    height: auto !important;
    min-height: calc(100dvh - 180px) !important;
    max-height: none !important;
    overflow: visible !important;
    z-index: 1 !important;
}

html[data-theme] body.internal-clean-page-shell .clean-module-layout.clean-module-layout--no-sidebar,
body.internal-clean-page-shell .clean-module-layout.clean-module-layout--no-sidebar {
    grid-template-columns: minmax(0, 1fr) !important;
    width: min(100% - 32px, 1320px) !important;
    max-width: 1320px !important;
}

@media (max-width: 1180px) {
    html[data-theme] body.internal-module-shell:not(.internal-module-hub-shell):not(.bjas-document-shell) .internal-module-layout:not(.internal-module-layout--hub),
    body.internal-module-shell:not(.internal-module-hub-shell):not(.bjas-document-shell) .internal-module-layout:not(.internal-module-layout--hub),
    html[data-theme] body.internal-module-shell:not(.internal-module-hub-shell):not(.bjas-document-shell) .page-content.hris-clean-shell > .internal-module-layout:not(.internal-module-layout--hub),
    body.internal-module-shell:not(.internal-module-hub-shell):not(.bjas-document-shell) .page-content.hris-clean-shell > .internal-module-layout:not(.internal-module-layout--hub),
    html[data-theme] body.internal-clean-page-shell:not(.ai-assistant-shell):not(.pos-clean-shell):not(.bjas-document-shell) .clean-module-layout:not(.clean-module-layout--no-sidebar),
    body.internal-clean-page-shell:not(.ai-assistant-shell):not(.pos-clean-shell):not(.bjas-document-shell) .clean-module-layout:not(.clean-module-layout--no-sidebar) {
        grid-template-columns: minmax(0, 1fr) !important;
        width: min(100% - 24px, 980px) !important;
        max-width: 980px !important;
        gap: 14px !important;
        margin: 14px auto 28px !important;
    }

    html[data-theme] body.internal-module-shell:not(.internal-module-hub-shell):not(.bjas-document-shell) .internal-module-layout:not(.internal-module-layout--hub) > .internal-module-nav,
    body.internal-module-shell:not(.internal-module-hub-shell):not(.bjas-document-shell) .internal-module-layout:not(.internal-module-layout--hub) > .internal-module-nav,
    html[data-theme] body.internal-module-shell:not(.internal-module-hub-shell):not(.bjas-document-shell) .page-content.hris-clean-shell > .internal-module-layout:not(.internal-module-layout--hub) > .internal-module-nav,
    body.internal-module-shell:not(.internal-module-hub-shell):not(.bjas-document-shell) .page-content.hris-clean-shell > .internal-module-layout:not(.internal-module-layout--hub) > .internal-module-nav,
    html[data-theme] body.internal-clean-page-shell:not(.ai-assistant-shell):not(.pos-clean-shell):not(.bjas-document-shell) .clean-module-layout:not(.clean-module-layout--no-sidebar) > .clean-module-sidebar,
    body.internal-clean-page-shell:not(.ai-assistant-shell):not(.pos-clean-shell):not(.bjas-document-shell) .clean-module-layout:not(.clean-module-layout--no-sidebar) > .clean-module-sidebar {
        position: static !important;
        top: auto !important;
        max-width: none !important;
        max-height: none !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
    }
}

@media (max-width: 760px) {
    html[data-theme] body:is(.internal-module-shell, .internal-clean-page-shell):not(.ai-assistant-shell):not(.pos-clean-shell) .internal-app-topbar.internal-shell-header,
    body:is(.internal-module-shell, .internal-clean-page-shell):not(.ai-assistant-shell):not(.pos-clean-shell) .internal-app-topbar.internal-shell-header {
        min-height: 64px !important;
        height: 64px !important;
        max-height: 64px !important;
        gap: 10px !important;
        padding-inline: 10px !important;
    }

    html[data-theme] body:is(.internal-module-shell, .internal-clean-page-shell):not(.ai-assistant-shell):not(.pos-clean-shell) .internal-shell-brand,
    body:is(.internal-module-shell, .internal-clean-page-shell):not(.ai-assistant-shell):not(.pos-clean-shell) .internal-shell-brand {
        gap: 8px !important;
    }

    html[data-theme] body:is(.internal-module-shell, .internal-clean-page-shell):not(.ai-assistant-shell):not(.pos-clean-shell) .internal-brand-pill,
    body:is(.internal-module-shell, .internal-clean-page-shell):not(.ai-assistant-shell):not(.pos-clean-shell) .internal-brand-pill {
        min-height: 36px !important;
        max-height: 40px !important;
        padding-inline: 10px !important;
    }

    html[data-theme] body:is(.internal-module-shell, .internal-clean-page-shell):not(.ai-assistant-shell):not(.pos-clean-shell) .internal-shell-logo img,
    body:is(.internal-module-shell, .internal-clean-page-shell):not(.ai-assistant-shell):not(.pos-clean-shell) .internal-shell-logo img {
        max-width: min(150px, 24vw) !important;
        max-height: 28px !important;
    }

    html[data-theme] body:is(.internal-module-shell, .internal-clean-page-shell):not(.ai-assistant-shell):not(.pos-clean-shell) .internal-shell-header-actions,
    body:is(.internal-module-shell, .internal-clean-page-shell):not(.ai-assistant-shell):not(.pos-clean-shell) .internal-shell-header-actions {
        gap: 8px !important;
    }

    html[data-theme] body:is(.internal-module-shell, .internal-clean-page-shell):not(.ai-assistant-shell):not(.pos-clean-shell) .internal-shell-breadcrumb,
    body:is(.internal-module-shell, .internal-clean-page-shell):not(.ai-assistant-shell):not(.pos-clean-shell) .internal-shell-breadcrumb {
        min-height: 48px !important;
        padding-inline: 12px !important;
    }
}

/* Final guard: attendance history accordion remains compact, readable, and expandable. */
html[data-theme] body.attendance-page-shell .attendance-history-disclosure,
body.attendance-page-shell .attendance-history-disclosure {
    overflow: visible !important;
    background: #ffffff !important;
    border-color: #dbe3ef !important;
}

html[data-theme] body.attendance-page-shell .attendance-history-section-header,
body.attendance-page-shell .attendance-history-section-header {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 14px 16px 10px !important;
}

html[data-theme] body.attendance-page-shell .attendance-history-title,
body.attendance-page-shell .attendance-history-title {
    margin: 0 !important;
    color: #0f172a !important;
    font-size: 18px !important;
    font-weight: 900 !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
}

html[data-theme] body.attendance-page-shell .attendance-history-note,
body.attendance-page-shell .attendance-history-note {
    display: block !important;
    margin: 4px 0 0 !important;
    color: #64748b !important;
    font-size: 12.5px !important;
    line-height: 1.35 !important;
}

html[data-theme] body.attendance-page-shell .attendance-history-header-actions,
body.attendance-page-shell .attendance-history-header-actions {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
}

html[data-theme] body.attendance-page-shell .attendance-history-toggle-state,
body.attendance-page-shell .attendance-history-toggle-state {
    min-height: 34px !important;
    padding: 6px 12px !important;
    background: #f8fafc !important;
    border-color: #d7e1ef !important;
    color: #0f2747 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

html[data-theme] body.attendance-page-shell .attendance-history-state-open,
body.attendance-page-shell .attendance-history-state-open,
html[data-theme] body.attendance-page-shell .attendance-history-disclosure[open] .attendance-history-state-closed,
body.attendance-page-shell .attendance-history-disclosure[open] .attendance-history-state-closed {
    display: none !important;
}

html[data-theme] body.attendance-page-shell .attendance-history-disclosure[open] .attendance-history-state-open,
body.attendance-page-shell .attendance-history-disclosure[open] .attendance-history-state-open {
    display: inline !important;
}

html[data-theme] body.attendance-page-shell .attendance-history-disclosure .panel-content,
body.attendance-page-shell .attendance-history-disclosure .panel-content {
    min-width: 0 !important;
    margin-top: 4px !important;
    overflow: visible !important;
}

html[data-theme] body.attendance-page-shell .attendance-log-list,
body.attendance-page-shell .attendance-log-list {
    display: grid !important;
    gap: 4px !important;
    max-height: 480px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 0 6px 2px 0 !important;
    border: 1px solid #dbe3ef !important;
    border-radius: 14px !important;
    background: #ffffff !important;
    scrollbar-color: #cbd5e1 transparent !important;
    scrollbar-gutter: stable !important;
}

html[data-theme] body.attendance-page-shell .attendance-log-list::-webkit-scrollbar,
body.attendance-page-shell .attendance-log-list::-webkit-scrollbar {
    width: 8px !important;
}

html[data-theme] body.attendance-page-shell .attendance-log-list::-webkit-scrollbar-track,
body.attendance-page-shell .attendance-log-list::-webkit-scrollbar-track {
    background: transparent !important;
}

html[data-theme] body.attendance-page-shell .attendance-log-list::-webkit-scrollbar-thumb,
body.attendance-page-shell .attendance-log-list::-webkit-scrollbar-thumb {
    background: #cbd5e1 !important;
    border-radius: 999px !important;
    border: 2px solid #ffffff !important;
}

html[data-theme] body.attendance-page-shell .attendance-log-card,
body.attendance-page-shell .attendance-log-card {
    min-height: 0 !important;
    overflow: hidden !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

html[data-theme] body.attendance-page-shell .attendance-log-card[open],
body.attendance-page-shell .attendance-log-card[open] {
    border-color: #cbd5e1 !important;
}

html[data-theme] body.attendance-page-shell .attendance-log-toggle,
body.attendance-page-shell .attendance-log-toggle {
    position: relative !important;
    display: grid !important;
    grid-template-columns: minmax(180px, 240px) minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 14px !important;
    min-height: 68px !important;
    padding: 12px 44px 12px 14px !important;
    overflow: visible !important;
    background: #ffffff !important;
}

html[data-theme] body.attendance-page-shell .attendance-log-card-disclosure > .attendance-log-toggle::after,
body.attendance-page-shell .attendance-log-card-disclosure > .attendance-log-toggle::after {
    top: 50% !important;
    right: 16px !important;
    width: 10px !important;
    height: 10px !important;
    border-right: 2px solid #64748b !important;
    border-bottom: 2px solid #64748b !important;
    transform: translateY(-50%) rotate(45deg) !important;
}

html[data-theme] body.attendance-page-shell .attendance-log-card-disclosure[open] > .attendance-log-toggle::after,
body.attendance-page-shell .attendance-log-card-disclosure[open] > .attendance-log-toggle::after {
    transform: translateY(-50%) rotate(225deg) !important;
}

html[data-theme] body.attendance-page-shell .attendance-history-date-block,
body.attendance-page-shell .attendance-history-date-block {
    min-width: 0 !important;
    display: grid !important;
    gap: 4px !important;
}

html[data-theme] body.attendance-page-shell .attendance-history-date,
body.attendance-page-shell .attendance-history-date {
    margin: 0 !important;
    color: #0f172a !important;
    font-size: 20px !important;
    font-weight: 900 !important;
    line-height: 1.05 !important;
    letter-spacing: 0 !important;
}

html[data-theme] body.attendance-page-shell .attendance-history-shift,
body.attendance-page-shell .attendance-history-shift {
    margin: 0 !important;
    color: #64748b !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
}

html[data-theme] body.attendance-page-shell .attendance-history-summary,
body.attendance-page-shell .attendance-history-summary {
    min-width: 0 !important;
    margin: 0 !important;
    color: #475569 !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
}

html[data-theme] body.attendance-page-shell .attendance-history-row > .attendance-history-actions,
body.attendance-page-shell .attendance-history-row > .attendance-history-actions {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    min-width: max-content !important;
    margin-top: 0 !important;
    white-space: nowrap !important;
}

html[data-theme] body.attendance-page-shell .attendance-history-badge,
body.attendance-page-shell .attendance-history-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 28px !important;
    height: 28px !important;
    padding: 0 10px !important;
    border: 1px solid #d7e1ef !important;
    border-radius: 999px !important;
    background: #f8fafc !important;
    color: #0f2747 !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    letter-spacing: 0.04em !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
}

html[data-theme] body.attendance-page-shell .attendance-history-badge.green,
body.attendance-page-shell .attendance-history-badge.green {
    background: #ecfdf3 !important;
    border-color: #bbf7d0 !important;
    color: #166534 !important;
}

html[data-theme] body.attendance-page-shell .attendance-history-badge.orange,
body.attendance-page-shell .attendance-history-badge.orange {
    background: #fffbeb !important;
    border-color: #fde68a !important;
    color: #92400e !important;
}

html[data-theme] body.attendance-page-shell .attendance-history-badge.red,
body.attendance-page-shell .attendance-history-badge.red {
    background: #fff1f2 !important;
    border-color: #fecdd3 !important;
    color: #9f1239 !important;
}

html[data-theme] body.attendance-page-shell .attendance-log-body,
body.attendance-page-shell .attendance-log-body {
    position: relative !important;
    z-index: 2 !important;
    display: grid !important;
    gap: 10px !important;
    padding: 10px 14px 12px !important;
    overflow: visible !important;
    border-top: 1px solid #e2e8f0 !important;
    background: #f8fafc !important;
}

html[data-theme] body.attendance-page-shell .attendance-log-summary,
body.attendance-page-shell .attendance-log-summary {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
}

html[data-theme] body.attendance-page-shell .attendance-log-summary .meta-card,
body.attendance-page-shell .attendance-log-summary .meta-card {
    min-height: 0 !important;
    padding: 9px 10px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

html[data-theme] body.attendance-page-shell .attendance-log-summary .meta-card span,
body.attendance-page-shell .attendance-log-summary .meta-card span {
    color: #64748b !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
}

html[data-theme] body.attendance-page-shell .attendance-log-summary .meta-card strong,
body.attendance-page-shell .attendance-log-summary .meta-card strong {
    color: #0f172a !important;
    font-size: 13px !important;
    line-height: 1.25 !important;
}

html[data-theme] body.attendance-page-shell .attendance-log-note,
body.attendance-page-shell .attendance-log-note {
    margin: 0 !important;
    color: #475569 !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
}

html[data-theme] body.attendance-page-shell .attendance-log-detail,
body.attendance-page-shell .attendance-log-detail {
    overflow: hidden !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    background: #ffffff !important;
}

html[data-theme] body.attendance-page-shell .attendance-log-detail summary,
body.attendance-page-shell .attendance-log-detail summary {
    padding: 10px 12px !important;
    color: #0f2747 !important;
    font-size: 12.5px !important;
    line-height: 1.3 !important;
}

html[data-theme] body.attendance-page-shell .attendance-log-events,
body.attendance-page-shell .attendance-log-events,
html[data-theme] body.attendance-page-shell .attendance-log-edit-form,
body.attendance-page-shell .attendance-log-edit-form {
    padding: 0 12px 12px !important;
}

html[data-theme] body.attendance-page-shell .attendance-log-events,
body.attendance-page-shell .attendance-log-events {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
    gap: 8px !important;
}

html[data-theme] body.attendance-page-shell .attendance-log-event,
body.attendance-page-shell .attendance-log-event {
    display: grid !important;
    gap: 8px !important;
    min-width: 0 !important;
    padding: 10px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    background: #ffffff !important;
}

html[data-theme] body.attendance-page-shell .attendance-log-event p,
body.attendance-page-shell .attendance-log-event p,
html[data-theme] body.attendance-page-shell .attendance-log-event-note,
body.attendance-page-shell .attendance-log-event-note {
    margin: 0 !important;
    color: #475569 !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
}

html[data-theme] body.attendance-page-shell .attendance-log-event strong,
body.attendance-page-shell .attendance-log-event strong,
html[data-theme] body.attendance-page-shell .attendance-log-event-meta strong,
body.attendance-page-shell .attendance-log-event-meta strong {
    color: #0f172a !important;
}

html[data-theme] body.attendance-page-shell .attendance-log-edit-form,
body.attendance-page-shell .attendance-log-edit-form {
    overflow: visible !important;
}

html[data-theme] body.attendance-page-shell .attendance-log-edit-form .form-grid,
body.attendance-page-shell .attendance-log-edit-form .form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

html[data-theme] body.attendance-page-shell .attendance-log-edit-form .span-full,
body.attendance-page-shell .attendance-log-edit-form .span-full {
    grid-column: 1 / -1 !important;
}

@media (max-width: 768px) {
    html[data-theme] body.attendance-page-shell .attendance-history-section-header,
    body.attendance-page-shell .attendance-history-section-header {
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 12px !important;
    }

    html[data-theme] body.attendance-page-shell .attendance-history-header-actions,
    body.attendance-page-shell .attendance-history-header-actions {
        justify-content: space-between !important;
        width: 100% !important;
    }

    html[data-theme] body.attendance-page-shell .attendance-log-list,
    body.attendance-page-shell .attendance-log-list {
        max-height: none !important;
        overflow: visible !important;
        padding: 0 !important;
        border-radius: 12px !important;
    }

    html[data-theme] body.attendance-page-shell .attendance-log-toggle,
    body.attendance-page-shell .attendance-log-toggle {
        grid-template-columns: 1fr !important;
        align-items: start !important;
        gap: 8px !important;
        min-height: 0 !important;
        padding: 12px 40px 12px 12px !important;
    }

    html[data-theme] body.attendance-page-shell .attendance-history-date,
    body.attendance-page-shell .attendance-history-date {
        font-size: 18px !important;
    }

    html[data-theme] body.attendance-page-shell .attendance-history-summary,
    body.attendance-page-shell .attendance-history-summary {
        font-size: 12.5px !important;
    }

    html[data-theme] body.attendance-page-shell .attendance-history-row > .attendance-history-actions,
    body.attendance-page-shell .attendance-history-row > .attendance-history-actions {
        justify-content: flex-start !important;
        width: 100% !important;
        min-width: 0 !important;
        flex-wrap: wrap !important;
    }

    html[data-theme] body.attendance-page-shell .attendance-log-summary,
    body.attendance-page-shell .attendance-log-summary,
    html[data-theme] body.attendance-page-shell .attendance-log-events,
    body.attendance-page-shell .attendance-log-events,
    html[data-theme] body.attendance-page-shell .attendance-log-edit-form .form-grid,
    body.attendance-page-shell .attendance-log-edit-form .form-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Attendance self schedule refresh - scoped to Jadwal Saya */
body.schedule-self-page-shell .attendance-schedule-content,
body.schedule-self-page-shell .attendance-schedule-page {
    width: 100% !important;
    max-width: 1120px !important;
    margin: 0 auto !important;
    overflow-x: clip !important;
}

body.schedule-self-page-shell .attendance-schedule-page,
body.schedule-self-page-shell .attendance-schedule-page * {
    box-sizing: border-box !important;
}

body.schedule-self-page-shell .attendance-schedule-page {
    display: grid !important;
    gap: 14px !important;
}

body.schedule-self-page-shell .attendance-schedule-filter {
    display: grid !important;
    grid-template-columns: minmax(190px, 1fr) minmax(150px, .75fr) minmax(150px, .75fr) auto !important;
    gap: 12px !important;
    align-items: end !important;
    margin: 0 !important;
    padding: 14px 16px !important;
    border: 1px solid #dbe5f1 !important;
    border-radius: 8px !important;
    background: #ffffff !important;
}

body.schedule-self-page-shell .attendance-schedule-filter label {
    display: flex !important;
    min-width: 0 !important;
    flex-direction: column !important;
    gap: 6px !important;
}

body.schedule-self-page-shell .attendance-schedule-filter label > span,
body.schedule-self-page-shell .attendance-summary-card > span {
    color: #172b57 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    line-height: 1.2 !important;
    text-transform: none !important;
}

body.schedule-self-page-shell .attendance-schedule-filter input,
body.schedule-self-page-shell .attendance-schedule-filter select,
body.schedule-self-page-shell .attendance-schedule-filter button {
    width: 100% !important;
    min-width: 0 !important;
    height: 38px !important;
    min-height: 38px !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    font-weight: 800 !important;
}

body.schedule-self-page-shell .attendance-schedule-submit {
    border-color: #061b49 !important;
    background: #061b49 !important;
    color: #ffffff !important;
}

body.schedule-self-page-shell .attendance-schedule-count {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 38px !important;
    padding: 0 16px !important;
    border-radius: 6px !important;
    background: #eef5ff !important;
    color: #172b57 !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
}

body.schedule-self-page-shell .attendance-schedule-summary {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 12px !important;
    margin: 0 !important;
}

body.schedule-self-page-shell .attendance-summary-card {
    position: relative !important;
    min-height: 100px !important;
    padding: 16px 18px 14px 58px !important;
    border: 1px solid #dbe5f1 !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

body.schedule-self-page-shell .attendance-summary-card::before {
    content: "" !important;
    position: absolute !important;
    left: 18px !important;
    top: 20px !important;
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    background: #eaf2ff !important;
    box-shadow: inset 0 0 0 8px #f4f8ff !important;
}

body.schedule-self-page-shell .attendance-summary-card:nth-child(2)::before {
    background: #e0f7e9 !important;
    box-shadow: inset 0 0 0 8px #f1fbf5 !important;
}

body.schedule-self-page-shell .attendance-summary-card:nth-child(3)::before {
    background: #efe7ff !important;
    box-shadow: inset 0 0 0 8px #f8f4ff !important;
}

body.schedule-self-page-shell .attendance-summary-card-live::before {
    background: #fff1db !important;
    box-shadow: inset 0 0 0 8px #fff8ef !important;
}

body.schedule-self-page-shell .attendance-summary-card strong {
    display: block !important;
    margin-top: 4px !important;
    color: #061b49 !important;
    font-size: 16px !important;
    line-height: 1.25 !important;
    white-space: normal !important;
}

body.schedule-self-page-shell .attendance-summary-card small {
    display: block !important;
    margin-top: 3px !important;
    color: #52627c !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
}

body.schedule-self-page-shell .attendance-schedule-link {
    display: inline-flex !important;
    align-items: center !important;
    width: fit-content !important;
    margin-top: 8px !important;
    padding: 5px 9px !important;
    border-radius: 6px !important;
    background: #fff1db !important;
    color: #d05d00 !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    text-decoration: none !important;
}

body.schedule-self-page-shell .attendance-schedule-section,
body.schedule-self-page-shell .attendance-rundown-details {
    min-width: 0 !important;
    padding: 14px 16px !important;
    border: 1px solid #dbe5f1 !important;
    border-radius: 8px !important;
    background: #ffffff !important;
}

body.schedule-self-page-shell .attendance-section-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin-bottom: 12px !important;
}

body.schedule-self-page-shell .attendance-section-head h2,
body.schedule-self-page-shell .attendance-rundown-summary h2 {
    margin: 0 !important;
    color: #061b49 !important;
    font-size: 16px !important;
    line-height: 1.25 !important;
}

body.schedule-self-page-shell .attendance-status-legend {
    display: inline-flex !important;
    align-items: center !important;
    gap: 16px !important;
    color: #172b57 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
}

body.schedule-self-page-shell .attendance-status-legend span {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    white-space: nowrap !important;
}

body.schedule-self-page-shell .attendance-status-legend i {
    width: 9px !important;
    height: 9px !important;
    border-radius: 50% !important;
}

body.schedule-self-page-shell .attendance-status-legend .is-work { background: #0f9f65 !important; }
body.schedule-self-page-shell .attendance-status-legend .is-live { background: #0d6efd !important; }
body.schedule-self-page-shell .attendance-status-legend .is-off { background: #f59e0b !important; }
body.schedule-self-page-shell .attendance-status-legend .is-muted { background: #64748b !important; }

body.schedule-self-page-shell .attendance-week-list {
    display: grid !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    gap: 10px !important;
    overflow-x: visible !important;
}

body.schedule-self-page-shell .attendance-week-card {
    display: flex !important;
    min-width: 0 !important;
    min-height: 132px !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    padding: 12px !important;
    border: 1px solid #dbe5f1 !important;
    border-radius: 8px !important;
    background: #ffffff !important;
}

body.schedule-self-page-shell .attendance-week-card.is-today {
    border-color: #5f8dff !important;
    box-shadow: inset 0 -3px 0 #5f8dff !important;
}

body.schedule-self-page-shell .attendance-week-date {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
}

body.schedule-self-page-shell .attendance-week-date > span {
    color: #52627c !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
    text-transform: uppercase !important;
}

body.schedule-self-page-shell .attendance-week-date strong {
    color: #061b49 !important;
    font-size: 14px !important;
    line-height: 1.15 !important;
}

body.schedule-self-page-shell .attendance-week-date em {
    width: fit-content !important;
    padding: 4px 7px !important;
    border-radius: 6px !important;
    background: #eef5ff !important;
    color: #0d6efd !important;
    font-size: 11px !important;
    font-style: normal !important;
    font-weight: 900 !important;
}

body.schedule-self-page-shell .attendance-week-shift {
    display: flex !important;
    min-width: 0 !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
}

body.schedule-self-page-shell .attendance-week-shift strong {
    color: #061b49 !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
}

body.schedule-self-page-shell .attendance-week-shift small {
    color: #52627c !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
}

body.schedule-self-page-shell .attendance-personal-live {
    display: grid !important;
    gap: 6px !important;
    margin-top: 0 !important;
    padding-top: 8px !important;
}

body.schedule-self-page-shell .attendance-personal-live > span {
    color: #0d6efd !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

body.schedule-self-page-shell .attendance-personal-live .schedule-self-live-item {
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
    gap: 5px !important;
    padding: 8px !important;
    border-radius: 8px !important;
}

body.schedule-self-page-shell .attendance-live-today-list,
body.schedule-self-page-shell .schedule-self-rundown-list {
    display: grid !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

body.schedule-self-page-shell .attendance-live-row,
body.schedule-self-page-shell .attendance-rundown-details .schedule-self-rundown-list li {
    display: grid !important;
    grid-template-columns: 34px minmax(112px, .55fr) minmax(0, 1fr) auto !important;
    gap: 10px !important;
    align-items: center !important;
    min-width: 0 !important;
    min-height: 44px !important;
    padding: 8px 10px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    background: #ffffff !important;
}

body.schedule-self-page-shell .attendance-live-row.is-current,
body.schedule-self-page-shell .attendance-rundown-details .schedule-self-rundown-list li.is-current {
    border-color: #bfdbfe !important;
    background: #eff6ff !important;
}

body.schedule-self-page-shell .attendance-live-row.is-next,
body.schedule-self-page-shell .attendance-rundown-details .schedule-self-rundown-list li.is-next {
    border-color: #fde7bd !important;
    background: #fff7e8 !important;
}

body.schedule-self-page-shell .attendance-live-row.is-done,
body.schedule-self-page-shell .attendance-rundown-details .schedule-self-rundown-list li.is-done {
    border-color: #c8ead8 !important;
    background: #f0fbf5 !important;
}

body.schedule-self-page-shell .attendance-live-row.is-later,
body.schedule-self-page-shell .attendance-rundown-details .schedule-self-rundown-list li.is-later {
    border-color: #e2e8f0 !important;
    background: #f8fafc !important;
}

body.schedule-self-page-shell .attendance-live-row.is-mine,
body.schedule-self-page-shell .attendance-rundown-details .schedule-self-rundown-list li.is-mine {
    box-shadow: inset 3px 0 0 #0d6efd !important;
}

body.schedule-self-page-shell .schedule-self-rundown-no {
    width: 25px !important;
    height: 25px !important;
    background: #061b49 !important;
}

body.schedule-self-page-shell .attendance-live-row > strong,
body.schedule-self-page-shell .attendance-rundown-details .schedule-self-rundown-list li > strong {
    color: #061b49 !important;
    font-size: 13px !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
}

body.schedule-self-page-shell .attendance-live-row > div,
body.schedule-self-page-shell .attendance-rundown-details .schedule-self-rundown-list li > div {
    min-width: 0 !important;
}

body.schedule-self-page-shell .attendance-live-row > div span,
body.schedule-self-page-shell .attendance-rundown-details .schedule-self-rundown-list li > div span {
    display: block !important;
    overflow: hidden !important;
    color: #061b49 !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    line-height: 1.15 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

body.schedule-self-page-shell .attendance-live-row > div small,
body.schedule-self-page-shell .attendance-rundown-details .schedule-self-rundown-list li > div small {
    display: block !important;
    overflow: hidden !important;
    margin-top: 2px !important;
    color: #52627c !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

body.schedule-self-page-shell .attendance-live-row > em,
body.schedule-self-page-shell .attendance-rundown-details .schedule-self-rundown-list li > em,
body.schedule-self-page-shell .attendance-personal-live .schedule-self-live-item > em {
    justify-self: end !important;
    padding: 5px 8px !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    font-style: normal !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

body.schedule-self-page-shell .is-current > em,
body.schedule-self-page-shell .attendance-personal-live .is-current > em {
    background: #dbeafe !important;
    color: #0d6efd !important;
}

body.schedule-self-page-shell .is-next > em,
body.schedule-self-page-shell .attendance-personal-live .is-next > em {
    background: #ffedd5 !important;
    color: #c2410c !important;
}

body.schedule-self-page-shell .is-done > em,
body.schedule-self-page-shell .attendance-personal-live .is-done > em {
    background: #dcfce7 !important;
    color: #0f8a52 !important;
}

body.schedule-self-page-shell .is-later > em,
body.schedule-self-page-shell .attendance-personal-live .is-later > em {
    background: #e2e8f0 !important;
    color: #52627c !important;
}

body.schedule-self-page-shell .attendance-rundown-details {
    margin: 0 !important;
}

body.schedule-self-page-shell .attendance-rundown-summary {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 14px !important;
    margin: 0 !important;
    cursor: pointer !important;
    list-style: none !important;
}

body.schedule-self-page-shell .attendance-rundown-summary::-webkit-details-marker {
    display: none !important;
}

body.schedule-self-page-shell .attendance-rundown-summary > div span {
    color: #172b57 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

body.schedule-self-page-shell .attendance-rundown-summary > strong {
    padding: 7px 12px !important;
    border-radius: 999px !important;
    background: #eef5ff !important;
    color: #061b49 !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
}

body.schedule-self-page-shell .attendance-rundown-days {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important;
    gap: 10px !important;
    margin-top: 14px !important;
}

body.schedule-self-page-shell .attendance-rundown-days .schedule-self-rundown-day {
    border-radius: 8px !important;
    background: #f8fafc !important;
}

body.schedule-self-page-shell .attendance-schedule-empty {
    min-height: 80px !important;
    border-radius: 8px !important;
}

@media (max-width: 1180px) {
    body.schedule-self-page-shell .attendance-schedule-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    body.schedule-self-page-shell .attendance-week-list {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 760px) {
    body.schedule-self-page-shell {
        overflow-x: hidden !important;
    }

    body.schedule-self-page-shell .attendance-schedule-content,
    body.schedule-self-page-shell .attendance-schedule-page {
        max-width: 100% !important;
        overflow-x: clip !important;
    }

    body.schedule-self-page-shell .attendance-schedule-page {
        gap: 12px !important;
    }

    body.schedule-self-page-shell .attendance-schedule-filter {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        padding: 12px !important;
    }

    body.schedule-self-page-shell .attendance-schedule-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    body.schedule-self-page-shell .attendance-summary-card {
        min-height: 92px !important;
        padding: 12px 12px 12px 44px !important;
    }

    body.schedule-self-page-shell .attendance-summary-card::before {
        left: 12px !important;
        top: 15px !important;
        width: 24px !important;
        height: 24px !important;
        box-shadow: inset 0 0 0 6px #f4f8ff !important;
    }

    body.schedule-self-page-shell .attendance-summary-card strong {
        font-size: 13px !important;
    }

    body.schedule-self-page-shell .attendance-summary-card small {
        font-size: 11px !important;
    }

    body.schedule-self-page-shell .attendance-schedule-section,
    body.schedule-self-page-shell .attendance-rundown-details {
        padding: 12px !important;
    }

    body.schedule-self-page-shell .attendance-section-head {
        align-items: flex-start !important;
        flex-direction: column !important;
        gap: 8px !important;
    }

    body.schedule-self-page-shell .attendance-status-legend {
        width: 100% !important;
        gap: 10px !important;
        overflow-x: auto !important;
        padding-bottom: 2px !important;
    }

    body.schedule-self-page-shell .attendance-week-list {
        display: flex !important;
        gap: 8px !important;
        overflow-x: auto !important;
        padding-bottom: 4px !important;
        scroll-snap-type: x proximity !important;
    }

    body.schedule-self-page-shell .attendance-week-card {
        flex: 0 0 84px !important;
        min-height: 110px !important;
        padding: 9px !important;
        scroll-snap-align: start !important;
    }

    body.schedule-self-page-shell .attendance-week-shift .schedule-chip,
    body.schedule-self-page-shell .attendance-week-shift .schedule-self-off {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    body.schedule-self-page-shell .attendance-week-shift strong,
    body.schedule-self-page-shell .attendance-week-shift small,
    body.schedule-self-page-shell .attendance-personal-live {
        display: none !important;
    }

    body.schedule-self-page-shell .attendance-live-row,
    body.schedule-self-page-shell .attendance-rundown-details .schedule-self-rundown-list li {
        grid-template-columns: 28px minmax(80px, .75fr) minmax(0, 1fr) !important;
        gap: 8px !important;
        padding: 8px !important;
    }

    body.schedule-self-page-shell .attendance-live-row > em,
    body.schedule-self-page-shell .attendance-rundown-details .schedule-self-rundown-list li > em {
        grid-column: 2 / -1 !important;
        justify-self: start !important;
    }

    body.schedule-self-page-shell .attendance-rundown-summary {
        align-items: flex-start !important;
    }

    body.schedule-self-page-shell .attendance-rundown-days {
        grid-template-columns: 1fr !important;
    }
}

/* ==================================================
WMS Daily Flow Final Compact Lock
Transfer / Outbound / Inbound only
================================================== */
html[data-theme] body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .wms-compact-cockpit,
body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .wms-compact-cockpit {
    grid-template-columns: minmax(0, 1fr) minmax(292px, 316px) !important;
    gap: 10px !important;
}

html[data-theme] body.wms-transfer-page-shell .wms-compact-flow .transfer-entry-grid,
body.wms-transfer-page-shell .wms-compact-flow .transfer-entry-grid {
    grid-template-columns: minmax(132px, 1fr) 32px minmax(82px, .45fr) 58px 58px 64px !important;
    gap: 6px !important;
    overflow: visible !important;
}

html[data-theme] body.wms-outbound-page-shell .wms-compact-flow .outbound-entry-grid,
body.wms-outbound-page-shell .wms-compact-flow .outbound-entry-grid {
    grid-template-columns: minmax(124px, 1fr) 32px minmax(78px, .42fr) 54px 54px minmax(58px, .32fr) 60px !important;
    gap: 6px !important;
    overflow: visible !important;
}

html[data-theme] body.wms-inbound-page-shell .wms-compact-flow .inbound-entry-grid,
body.wms-inbound-page-shell .wms-compact-flow .inbound-entry-grid {
    grid-template-columns: minmax(140px, 1fr) 32px minmax(82px, .42fr) 58px 58px !important;
    gap: 6px 8px !important;
    overflow: visible !important;
}

html[data-theme] body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .picker-field button,
body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .picker-field button {
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    padding: 0 !important;
}

html[data-theme] body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .action-field button,
body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .action-field button {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 5px !important;
    font-size: 11px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

html[data-theme] body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .form-field input,
html[data-theme] body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .form-field select,
body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .form-field input,
body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .form-field select {
    padding-left: 9px !important;
    padding-right: 9px !important;
}

html[data-theme] body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .ops-queue-table :is(th, td),
body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .ops-queue-table :is(th, td) {
    padding: 6px 5px !important;
    font-size: 10.5px !important;
}

html[data-theme] body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .ops-queue-table th:first-child,
html[data-theme] body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .ops-queue-table td:first-child,
body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .ops-queue-table th:first-child,
body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .ops-queue-table td:first-child {
    width: 30px !important;
}

html[data-theme] body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .ops-queue-table th:last-child,
html[data-theme] body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .ops-queue-table td:last-child,
body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .ops-queue-table th:last-child,
body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .ops-queue-table td:last-child {
    width: 38px !important;
}

@media (max-width: 1180px) {
    html[data-theme] body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .wms-compact-cockpit,
    body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .wms-compact-cockpit {
        grid-template-columns: 1fr !important;
    }

    html[data-theme] body.wms-transfer-page-shell .wms-compact-flow .transfer-entry-grid,
    body.wms-transfer-page-shell .wms-compact-flow .transfer-entry-grid,
    html[data-theme] body.wms-outbound-page-shell .wms-compact-flow .outbound-entry-grid,
    body.wms-outbound-page-shell .wms-compact-flow .outbound-entry-grid {
        grid-template-columns: minmax(180px, 1fr) 36px minmax(110px, .65fr) 78px 78px !important;
        gap: 8px !important;
    }

    html[data-theme] body.wms-transfer-page-shell .wms-compact-flow .transfer-entry-grid .action-field,
    body.wms-transfer-page-shell .wms-compact-flow .transfer-entry-grid .action-field {
        grid-column: 5 / 6 !important;
    }

    html[data-theme] body.wms-outbound-page-shell .wms-compact-flow .outbound-entry-grid .note-field,
    body.wms-outbound-page-shell .wms-compact-flow .outbound-entry-grid .note-field {
        grid-column: 1 / 5 !important;
    }

    html[data-theme] body.wms-outbound-page-shell .wms-compact-flow .outbound-entry-grid .action-field,
    body.wms-outbound-page-shell .wms-compact-flow .outbound-entry-grid .action-field {
        grid-column: 5 / 6 !important;
    }
}

@media (max-width: 720px) {
    html[data-theme] body.wms-transfer-page-shell .wms-compact-flow .transfer-entry-grid,
    html[data-theme] body.wms-outbound-page-shell .wms-compact-flow .outbound-entry-grid,
    html[data-theme] body.wms-inbound-page-shell .wms-compact-flow .inbound-entry-grid,
    body.wms-transfer-page-shell .wms-compact-flow .transfer-entry-grid,
    body.wms-outbound-page-shell .wms-compact-flow .outbound-entry-grid,
    body.wms-inbound-page-shell .wms-compact-flow .inbound-entry-grid {
        grid-template-columns: 1fr !important;
    }

    html[data-theme] body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .form-field,
    body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .form-field {
        grid-column: auto !important;
    }
}

/* Final width tune after cockpit lock */
html[data-theme] body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .wms-compact-cockpit,
body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .wms-compact-cockpit {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 300px) !important;
}

html[data-theme] body.wms-transfer-page-shell .wms-compact-flow .transfer-entry-grid,
body.wms-transfer-page-shell .wms-compact-flow .transfer-entry-grid {
    grid-template-columns: minmax(150px, 1fr) 32px minmax(92px, .48fr) 62px 62px 68px !important;
}

html[data-theme] body.wms-outbound-page-shell .wms-compact-flow .outbound-entry-grid,
body.wms-outbound-page-shell .wms-compact-flow .outbound-entry-grid {
    grid-template-columns: minmax(162px, 1fr) 32px minmax(96px, .48fr) 60px 60px minmax(72px, .36fr) 68px !important;
}

html[data-theme] body.wms-inbound-page-shell .wms-compact-flow .inbound-entry-grid,
body.wms-inbound-page-shell .wms-compact-flow .inbound-entry-grid {
    grid-template-columns: minmax(160px, 1fr) 32px minmax(96px, .48fr) 62px 62px !important;
}

/* =========================================================
   Request cockpit final pass
   Scope: request gudang + request owner only
   ========================================================= */
html[data-theme] body.request-workflow-shell .page-hero,
body.request-workflow-shell .page-hero {
    margin: 0 0 8px !important;
    padding: 0 !important;
    min-height: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

html[data-theme] body.request-workflow-shell .page-hero-text,
body.request-workflow-shell .page-hero-text {
    gap: 2px !important;
}

html[data-theme] body.request-workflow-shell .page-eyebrow,
body.request-workflow-shell .page-eyebrow {
    margin: 0 !important;
    font-size: 10px !important;
    line-height: 1 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
}

html[data-theme] body.request-workflow-shell .page-hero h1,
body.request-workflow-shell .page-hero h1 {
    margin: 0 !important;
    font-size: 22px !important;
    line-height: 1.05 !important;
    letter-spacing: 0 !important;
}

html[data-theme] body.request-workflow-shell .page-hero p,
body.request-workflow-shell .page-hero p {
    margin: 2px 0 0 !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    max-width: 520px !important;
}

html[data-theme] body.request-workflow-shell .page-content.page-content-bleed,
body.request-workflow-shell .page-content.page-content-bleed {
    overflow: hidden !important;
}

html[data-theme] body.request-workflow-shell .wms-page-stack.request-cockpit-page,
body.request-workflow-shell .wms-page-stack.request-cockpit-page {
    height: calc(100dvh - 124px) !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    overflow: hidden !important;
}

html[data-theme] body.request-workflow-shell .wms-step-grid,
body.request-workflow-shell .wms-step-grid {
    display: none !important;
}

html[data-theme] body.request-workflow-shell .wms-kpi-grid,
body.request-workflow-shell .wms-kpi-grid {
    flex: 0 0 auto !important;
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin: 0 !important;
}

html[data-theme] body.request-workflow-shell .wms-kpi-card,
body.request-workflow-shell .wms-kpi-card {
    min-height: 48px !important;
    padding: 7px 10px !important;
    border-radius: 10px !important;
    box-shadow: none !important;
}

html[data-theme] body.request-workflow-shell .wms-kpi-card span,
body.request-workflow-shell .wms-kpi-card span {
    display: block !important;
    font-size: 10px !important;
    line-height: 1.1 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
}

html[data-theme] body.request-workflow-shell .wms-kpi-card strong,
body.request-workflow-shell .wms-kpi-card strong {
    display: block !important;
    margin-top: 2px !important;
    font-size: 17px !important;
    line-height: 1.05 !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

html[data-theme] body.request-workflow-shell .wms-kpi-card small,
body.request-workflow-shell .wms-kpi-card small {
    display: none !important;
}

html[data-theme] body.request-workflow-shell .request-main-form,
body.request-workflow-shell .request-main-form {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

html[data-theme] body.request-workflow-shell .request-workflow-scroll.request-cockpit,
body.request-workflow-shell .request-workflow-scroll.request-cockpit {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr) !important;
    gap: 10px !important;
    overflow: hidden !important;
}

html[data-theme] body.request-workflow-shell :is(.request-form-panel, .request-queue-panel),
body.request-workflow-shell :is(.request-form-panel, .request-queue-panel) {
    min-height: 0 !important;
    border-radius: 12px !important;
    padding: 10px 12px !important;
    box-shadow: none !important;
}

html[data-theme] body.request-workflow-shell .request-form-panel,
body.request-workflow-shell .request-form-panel {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    overflow: auto !important;
}

html[data-theme] body.request-workflow-shell .request-queue-panel,
body.request-workflow-shell .request-queue-panel {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    overflow: hidden !important;
}

html[data-theme] body.request-workflow-shell .request-queue-head,
body.request-workflow-shell .request-queue-head {
    margin: 0 !important;
    padding-bottom: 4px !important;
    position: static !important;
    background: transparent !important;
}

html[data-theme] body.request-workflow-shell .request-queue-table-wrap,
body.request-workflow-shell .request-queue-table-wrap {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: auto !important;
}

html[data-theme] body.request-workflow-shell .internal-section-head,
body.request-workflow-shell .internal-section-head {
    margin: 0 0 6px !important;
}

html[data-theme] body.request-workflow-shell .internal-section-head h2,
html[data-theme] body.request-workflow-shell .internal-section-head h3,
body.request-workflow-shell .internal-section-head h2,
body.request-workflow-shell .internal-section-head h3 {
    margin: 0 !important;
    font-size: 17px !important;
    line-height: 1.2 !important;
}

html[data-theme] body.request-workflow-shell .internal-section-head p,
body.request-workflow-shell .internal-section-head p {
    display: none !important;
}

html[data-theme] body.request-workflow-shell :is(.ops-config-grid, .request-owner-config-grid, .request-route-grid),
body.request-workflow-shell :is(.ops-config-grid, .request-owner-config-grid, .request-route-grid) {
    gap: 8px !important;
    margin: 0 !important;
}

html[data-theme] body.request-workflow-shell .request-owner-config-grid,
body.request-workflow-shell .request-owner-config-grid {
    grid-template-columns: minmax(220px, 1fr) auto !important;
}

html[data-theme] body.request-workflow-shell .request-route-grid,
body.request-workflow-shell .request-route-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

html[data-theme] body.request-workflow-shell .ops-config-card,
body.request-workflow-shell .ops-config-card {
    min-height: 0 !important;
    padding: 8px 10px !important;
    border-radius: 10px !important;
    box-shadow: none !important;
}

html[data-theme] body.request-workflow-shell .ops-config-card strong,
body.request-workflow-shell .ops-config-card strong {
    font-size: 14px !important;
    line-height: 1.1 !important;
}

html[data-theme] body.request-workflow-shell .owner-target-card,
body.request-workflow-shell .owner-target-card {
    display: flex !important;
    align-items: end !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

html[data-theme] body.request-workflow-shell .owner-target-card .variant-mini-label,
html[data-theme] body.request-workflow-shell .owner-target-card small,
body.request-workflow-shell .owner-target-card .variant-mini-label,
body.request-workflow-shell .owner-target-card small {
    display: none !important;
}

html[data-theme] body.request-workflow-shell .owner-target-chip,
html[data-theme] body.request-workflow-shell .owner-target-card strong,
body.request-workflow-shell .owner-target-chip,
body.request-workflow-shell .owner-target-card strong {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 28px !important;
    padding: 4px 10px !important;
    border-radius: 999px !important;
    background: rgba(16, 37, 77, 0.08) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
}

html[data-theme] body.request-workflow-shell .ops-entry-box,
body.request-workflow-shell .ops-entry-box {
    margin: 0 !important;
    padding: 10px 12px !important;
    border-radius: 10px !important;
    box-shadow: none !important;
}

html[data-theme] body.request-workflow-shell .request-gudang-entry-grid,
body.request-workflow-shell .request-gudang-entry-grid {
    grid-template-columns: minmax(240px, 1fr) 110px 90px auto !important;
    gap: 8px !important;
}

html[data-theme] body.request-workflow-shell .request-owner-entry-grid,
body.request-workflow-shell .request-owner-entry-grid {
    grid-template-columns: minmax(220px, 1fr) 88px 86px minmax(150px, 0.75fr) auto !important;
    gap: 8px !important;
}

html[data-theme] body.request-workflow-shell .request-custom-entry-grid,
body.request-workflow-shell .request-custom-entry-grid {
    grid-template-columns: minmax(220px, 1fr) minmax(140px, 0.8fr) minmax(150px, 0.85fr) 86px auto !important;
    gap: 8px !important;
    margin-top: 0 !important;
}

html[data-theme] body.request-workflow-shell :is(input, select, button),
body.request-workflow-shell :is(input, select, button) {
    min-height: 32px !important;
    height: 32px !important;
    font-size: 12px !important;
}

html[data-theme] body.request-workflow-shell label,
body.request-workflow-shell label {
    font-size: 11px !important;
    line-height: 1.1 !important;
    font-weight: 700 !important;
}

html[data-theme] body.request-workflow-shell .helper-text,
body.request-workflow-shell .helper-text {
    margin-top: 3px !important;
    font-size: 10.5px !important;
    line-height: 1.15 !important;
}

html[data-theme] body.request-workflow-shell .ops-stock-card,
body.request-workflow-shell .ops-stock-card {
    min-height: 32px !important;
    padding: 6px 8px !important;
    border-radius: 8px !important;
}

html[data-theme] body.request-workflow-shell .ops-stock-value,
body.request-workflow-shell .ops-stock-value {
    font-size: 15px !important;
    line-height: 1 !important;
}

html[data-theme] body.request-workflow-shell .ops-stock-state,
body.request-workflow-shell .ops-stock-state {
    font-size: 10px !important;
    line-height: 1.15 !important;
}

html[data-theme] body.request-workflow-shell .ops-entry-actions,
body.request-workflow-shell .ops-entry-actions {
    width: auto !important;
    min-width: 0 !important;
}

html[data-theme] body.request-workflow-shell .ops-entry-actions button,
body.request-workflow-shell .ops-entry-actions button {
    min-width: 88px !important;
    width: auto !important;
    flex: 0 0 auto !important;
}

html[data-theme] body.request-workflow-shell .request-custom-item-panel,
body.request-workflow-shell .request-custom-item-panel {
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    overflow: hidden !important;
}

html[data-theme] body.request-workflow-shell .request-custom-item-panel > summary,
body.request-workflow-shell .request-custom-item-panel > summary {
    min-height: 32px !important;
    display: flex !important;
    align-items: center !important;
    padding: 5px 8px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    cursor: pointer !important;
    list-style: none !important;
}

html[data-theme] body.request-workflow-shell .request-custom-item-panel > summary::-webkit-details-marker,
body.request-workflow-shell .request-custom-item-panel > summary::-webkit-details-marker {
    display: none !important;
}

html[data-theme] body.request-workflow-shell .request-custom-item-panel:not([open]),
body.request-workflow-shell .request-custom-item-panel:not([open]) {
    max-height: 34px !important;
}

html[data-theme] body.request-workflow-shell .request-custom-item-body,
body.request-workflow-shell .request-custom-item-body {
    padding: 0 8px 8px !important;
}

html[data-theme] body.request-workflow-shell .request-custom-item-copy,
body.request-workflow-shell .request-custom-item-copy {
    margin: 0 0 6px !important;
    font-size: 10.5px !important;
    line-height: 1.15 !important;
    color: #5b6d82 !important;
}

html[data-theme] body.request-workflow-shell .request-queue-panel .ops-queue-table,
body.request-workflow-shell .request-queue-panel .ops-queue-table {
    min-width: 0 !important;
    width: 100% !important;
    table-layout: fixed !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

html[data-theme] body.request-workflow-shell .request-queue-panel .ops-queue-table th,
html[data-theme] body.request-workflow-shell .request-queue-panel .ops-queue-table td,
body.request-workflow-shell .request-queue-panel .ops-queue-table th,
body.request-workflow-shell .request-queue-panel .ops-queue-table td {
    padding: 5px 6px !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    vertical-align: middle !important;
}

html[data-theme] body.request-workflow-shell .request-queue-panel .ops-queue-table thead th,
body.request-workflow-shell .request-queue-panel .ops-queue-table thead th {
    position: sticky !important;
    top: 0 !important;
    z-index: 3 !important;
    font-size: 10px !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
}

html[data-theme] body.request-workflow-shell .request-queue-panel .ops-queue-table td,
body.request-workflow-shell .request-queue-panel .ops-queue-table td {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

html[data-theme] body.request-workflow-shell .request-queue-panel .ops-queue-table td strong,
body.request-workflow-shell .request-queue-panel .ops-queue-table td strong {
    margin-bottom: 2px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

html[data-theme] body.request-workflow-shell .request-action-bar,
body.request-workflow-shell .request-action-bar {
    flex: 0 0 auto !important;
    min-height: 42px !important;
    max-height: 46px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    padding: 6px 0 0 !important;
    position: sticky !important;
    bottom: 0 !important;
    z-index: 5 !important;
    background: rgba(255, 255, 255, 0.96) !important;
    backdrop-filter: blur(10px) !important;
}

html[data-theme] body.request-workflow-shell .request-action-bar > .helper-text,
body.request-workflow-shell .request-action-bar > .helper-text {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
}

html[data-theme] body.request-workflow-shell .request-action-bar button,
body.request-workflow-shell .request-action-bar button {
    height: 32px !important;
    min-height: 32px !important;
    min-width: 132px !important;
    padding: 5px 12px !important;
    font-size: 12px !important;
    border-radius: 8px !important;
    flex: 0 0 auto !important;
}

html[data-theme] body.request-workflow-shell .request-remove-icon,
body.request-workflow-shell .request-remove-icon {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    min-height: 26px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 7px !important;
    font-size: 0 !important;
    line-height: 1 !important;
    color: #dc2626 !important;
}

html[data-theme] body.request-workflow-shell .request-remove-icon svg,
body.request-workflow-shell .request-remove-icon svg {
    width: 14px !important;
    height: 14px !important;
    display: block !important;
    pointer-events: none !important;
}

html[data-theme] body.request-workflow-shell .request-remove-icon:hover,
body.request-workflow-shell .request-remove-icon:hover {
    color: #b91c1c !important;
    background: #fee2e2 !important;
    border-color: #fecaca !important;
}

html[data-theme] body.request-workflow-shell .request-history-panel,
body.request-workflow-shell .request-history-panel {
    flex: 0 0 auto !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    padding: 0 !important;
}

html[data-theme] body.request-workflow-shell .request-history-panel > summary,
body.request-workflow-shell .request-history-panel > summary {
    min-height: 34px !important;
    display: flex !important;
    align-items: center !important;
    padding: 6px 10px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    cursor: pointer !important;
    list-style: none !important;
}

html[data-theme] body.request-workflow-shell .request-history-panel > summary::-webkit-details-marker,
body.request-workflow-shell .request-history-panel > summary::-webkit-details-marker {
    display: none !important;
}

html[data-theme] body.request-workflow-shell .request-history-panel:not([open]),
body.request-workflow-shell .request-history-panel:not([open]) {
    max-height: 36px !important;
}

html[data-theme] body.request-workflow-shell .request-history-table-wrap,
body.request-workflow-shell .request-history-table-wrap {
    overflow: auto !important;
}

html[data-theme] body.request-workflow-shell .request-history-panel table,
body.request-workflow-shell .request-history-panel table {
    width: 100% !important;
    min-width: 920px !important;
}

html[data-theme] body.request-workflow-shell .request-history-panel :is(th, td),
body.request-workflow-shell .request-history-panel :is(th, td) {
    padding: 6px 8px !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    vertical-align: middle !important;
}

html[data-theme] body.request-workflow-shell .request-history-panel thead th,
body.request-workflow-shell .request-history-panel thead th {
    font-size: 10px !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
}

html[data-theme] body.request-workflow-shell .request-history-panel :is(.split-actions, .table-action-stack, .table-action-row),
body.request-workflow-shell .request-history-panel :is(.split-actions, .table-action-stack, .table-action-row) {
    position: static !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    padding: 0 !important;
    background: transparent !important;
}

html[data-theme] body.request-workflow-shell .request-history-panel :is(.split-actions button, .table-action-stack button, .table-action-row button),
body.request-workflow-shell .request-history-panel :is(.split-actions button, .table-action-stack button, .table-action-row button) {
    min-width: 0 !important;
    height: 28px !important;
    min-height: 28px !important;
    padding: 4px 8px !important;
    flex: 0 0 auto !important;
}

html[data-theme] body.request-workflow-shell .request-history-panel .approval-reason-input,
body.request-workflow-shell .request-history-panel .approval-reason-input {
    min-height: 30px !important;
    height: 30px !important;
    font-size: 12px !important;
}

@media (max-width: 1180px) {
    html[data-theme] body.request-workflow-shell .page-content.page-content-bleed,
    body.request-workflow-shell .page-content.page-content-bleed,
    html[data-theme] body.request-workflow-shell .wms-page-stack.request-cockpit-page,
    body.request-workflow-shell .wms-page-stack.request-cockpit-page {
        height: auto !important;
        overflow: visible !important;
    }

    html[data-theme] body.request-workflow-shell .request-workflow-scroll.request-cockpit,
    body.request-workflow-shell .request-workflow-scroll.request-cockpit {
        grid-template-columns: 1fr !important;
        overflow: visible !important;
    }

    html[data-theme] body.request-workflow-shell :is(.request-form-panel, .request-queue-panel),
    body.request-workflow-shell :is(.request-form-panel, .request-queue-panel) {
        overflow: visible !important;
    }

    html[data-theme] body.request-workflow-shell .request-queue-table-wrap .ops-queue-table,
    body.request-workflow-shell .request-queue-table-wrap .ops-queue-table {
        min-width: 760px !important;
    }

    html[data-theme] body.request-workflow-shell .request-action-bar,
    body.request-workflow-shell .request-action-bar {
        position: static !important;
        max-height: none !important;
    }
}

@media (max-width: 640px) {
    html[data-theme] body.request-workflow-shell .wms-kpi-grid,
    body.request-workflow-shell .wms-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    html[data-theme] body.request-workflow-shell :is(.request-owner-entry-grid, .request-gudang-entry-grid, .ops-entry-grid, .ops-config-grid, .request-custom-entry-grid),
    body.request-workflow-shell :is(.request-owner-entry-grid, .request-gudang-entry-grid, .ops-entry-grid, .ops-config-grid, .request-custom-entry-grid) {
        grid-template-columns: 1fr !important;
    }

    html[data-theme] body.request-workflow-shell .request-action-bar,
    body.request-workflow-shell .request-action-bar {
        align-items: stretch !important;
        flex-direction: column !important;
    }

    html[data-theme] body.request-workflow-shell .request-action-bar button,
    body.request-workflow-shell .request-action-bar button {
        width: 100% !important;
    }

    html[data-theme] body.request-workflow-shell .request-queue-table-wrap .ops-queue-table,
    body.request-workflow-shell .request-queue-table-wrap .ops-queue-table {
        min-width: 680px !important;
    }
}

/* =========================================================
   Compact stock opname cockpit
   Scope: stock opname page only
   ========================================================= */
html[data-theme] body.stock-opname-page-shell .page-hero,
body.stock-opname-page-shell .page-hero {
    display: none !important;
}

html[data-theme] body.stock-opname-page-shell .page-content.page-content-bleed,
body.stock-opname-page-shell .page-content.page-content-bleed {
    overflow: hidden !important;
}

html[data-theme] body.stock-opname-page-shell .wms-page-stack.stock-opname-shell.so-cockpit-page,
body.stock-opname-page-shell .wms-page-stack.stock-opname-shell.so-cockpit-page {
    height: calc(100dvh - 124px) !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    overflow: hidden !important;
}

html[data-theme] body.stock-opname-page-shell .so-compact-header,
body.stock-opname-page-shell .so-compact-header {
    flex: 0 0 auto !important;
    min-height: 44px !important;
    max-height: 52px !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin: 0 !important;
}

html[data-theme] body.stock-opname-page-shell .so-compact-header-copy,
body.stock-opname-page-shell .so-compact-header-copy {
    min-width: 0 !important;
}

html[data-theme] body.stock-opname-page-shell .so-compact-kicker,
body.stock-opname-page-shell .so-compact-kicker {
    margin: 0 0 2px !important;
    font-size: 10px !important;
    line-height: 1 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
}

html[data-theme] body.stock-opname-page-shell .so-compact-title,
body.stock-opname-page-shell .so-compact-title {
    margin: 0 !important;
    font-size: 22px !important;
    line-height: 1.05 !important;
    font-weight: 800 !important;
}

html[data-theme] body.stock-opname-page-shell .so-compact-subtitle,
body.stock-opname-page-shell .so-compact-subtitle {
    margin: 2px 0 0 !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
}

html[data-theme] body.stock-opname-page-shell .so-header-actions,
body.stock-opname-page-shell .so-header-actions {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}

html[data-theme] body.stock-opname-page-shell .so-header-actions :is(button, .btn, .btn-link, a),
body.stock-opname-page-shell .so-header-actions :is(button, .btn, .btn-link, a) {
    min-height: 32px !important;
    height: 32px !important;
    padding: 5px 12px !important;
    font-size: 12px !important;
    border-radius: 8px !important;
}

html[data-theme] body.stock-opname-page-shell .wms-step-grid,
body.stock-opname-page-shell .wms-step-grid {
    display: none !important;
}

html[data-theme] body.stock-opname-page-shell .summary.so-status-strip,
body.stock-opname-page-shell .summary.so-status-strip {
    flex: 0 0 auto !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin: 0 !important;
}

html[data-theme] body.stock-opname-page-shell .summary.so-status-strip .card-mini,
body.stock-opname-page-shell .summary.so-status-strip .card-mini {
    min-height: 48px !important;
    padding: 7px 10px !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    box-shadow: none !important;
}

html[data-theme] body.stock-opname-page-shell .summary.so-status-strip .card-mini p,
body.stock-opname-page-shell .summary.so-status-strip .card-mini p {
    margin: 0 !important;
    font-size: 10px !important;
    line-height: 1.1 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
}

html[data-theme] body.stock-opname-page-shell .summary.so-status-strip .card-mini h3,
body.stock-opname-page-shell .summary.so-status-strip .card-mini h3 {
    margin: 2px 0 0 !important;
    font-size: 18px !important;
    line-height: 1.05 !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
}

html[data-theme] body.stock-opname-page-shell .summary.so-status-strip .card-mini small,
body.stock-opname-page-shell .summary.so-status-strip .card-mini small {
    display: none !important;
}

html[data-theme] body.stock-opname-page-shell .so-control-toolbar,
body.stock-opname-page-shell .so-control-toolbar {
    flex: 0 0 auto !important;
    min-height: 40px !important;
    display: grid !important;
    grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr) auto auto minmax(220px, 1fr) auto !important;
    gap: 8px !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 7px 10px !important;
    border-radius: 10px !important;
}

html[data-theme] body.stock-opname-page-shell .so-toolbar-field,
body.stock-opname-page-shell .so-toolbar-field {
    min-width: 0 !important;
    display: grid !important;
    gap: 4px !important;
}

html[data-theme] body.stock-opname-page-shell .so-toolbar-field > span,
body.stock-opname-page-shell .so-toolbar-field > span {
    font-size: 10px !important;
    line-height: 1 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    opacity: 0.8 !important;
}

html[data-theme] body.stock-opname-page-shell .so-control-chip,
body.stock-opname-page-shell .so-control-chip {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    min-height: 32px !important;
    padding: 4px 9px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
}

html[data-theme] body.stock-opname-page-shell .so-control-chip span,
body.stock-opname-page-shell .so-control-chip span {
    font-size: 10px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    opacity: 0.75 !important;
}

html[data-theme] body.stock-opname-page-shell .so-toolbar-search,
body.stock-opname-page-shell .so-toolbar-search {
    min-width: 0 !important;
}

html[data-theme] body.stock-opname-page-shell .so-control-toolbar :is(input, select, button),
body.stock-opname-page-shell .so-control-toolbar :is(input, select, button) {
    min-height: 32px !important;
    height: 32px !important;
    font-size: 12px !important;
}

html[data-theme] body.stock-opname-page-shell .so-scan-input,
body.stock-opname-page-shell .so-scan-input {
    width: 100% !important;
    min-width: 0 !important;
    padding: 4px 8px !important;
}

html[data-theme] body.stock-opname-page-shell .so-scope-note,
body.stock-opname-page-shell .so-scope-note {
    margin: -2px 0 0 !important;
    font-size: 10.5px !important;
    line-height: 1.15 !important;
}

html[data-theme] body.stock-opname-page-shell .so-flow-note,
body.stock-opname-page-shell .so-flow-note {
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 10px !important;
    overflow: hidden !important;
}

html[data-theme] body.stock-opname-page-shell .so-flow-note > summary,
body.stock-opname-page-shell .so-flow-note > summary {
    min-height: 32px !important;
    display: flex !important;
    align-items: center !important;
    padding: 6px 10px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    cursor: pointer !important;
    list-style: none !important;
}

html[data-theme] body.stock-opname-page-shell .so-flow-note > summary::-webkit-details-marker,
body.stock-opname-page-shell .so-flow-note > summary::-webkit-details-marker {
    display: none !important;
}

html[data-theme] body.stock-opname-page-shell .so-flow-note:not([open]),
body.stock-opname-page-shell .so-flow-note:not([open]) {
    max-height: 34px !important;
}

html[data-theme] body.stock-opname-page-shell .so-flow-note-body,
body.stock-opname-page-shell .so-flow-note-body {
    padding: 0 10px 10px !important;
    display: grid !important;
    gap: 6px !important;
}

html[data-theme] body.stock-opname-page-shell .so-flow-note-body p,
body.stock-opname-page-shell .so-flow-note-body p {
    margin: 0 !important;
    font-size: 10.5px !important;
    line-height: 1.2 !important;
}

html[data-theme] body.stock-opname-page-shell .so-work-area,
body.stock-opname-page-shell .so-work-area {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    padding: 10px 12px !important;
    border-radius: 12px !important;
}

html[data-theme] body.stock-opname-page-shell .so-work-head,
body.stock-opname-page-shell .so-work-head {
    flex: 0 0 auto !important;
    margin: 0 0 8px !important;
}

html[data-theme] body.stock-opname-page-shell .so-work-head h2,
body.stock-opname-page-shell .so-work-head h2 {
    margin: 0 !important;
    font-size: 17px !important;
    line-height: 1.2 !important;
}

html[data-theme] body.stock-opname-page-shell .so-work-head p,
body.stock-opname-page-shell .so-work-head p {
    display: none !important;
}

html[data-theme] body.stock-opname-page-shell .so-table-wrap,
body.stock-opname-page-shell .so-table-wrap {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: auto !important;
}

html[data-theme] body.stock-opname-page-shell .stock-opname-table.so-table,
body.stock-opname-page-shell .stock-opname-table.so-table {
    width: 100% !important;
    min-width: 980px !important;
    table-layout: fixed !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

html[data-theme] body.stock-opname-page-shell .stock-opname-table.so-table th,
html[data-theme] body.stock-opname-page-shell .stock-opname-table.so-table td,
body.stock-opname-page-shell .stock-opname-table.so-table th,
body.stock-opname-page-shell .stock-opname-table.so-table td {
    padding: 5px 6px !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    vertical-align: middle !important;
}

html[data-theme] body.stock-opname-page-shell .stock-opname-table.so-table thead th,
body.stock-opname-page-shell .stock-opname-table.so-table thead th {
    position: sticky !important;
    top: 0 !important;
    z-index: 3 !important;
    height: 30px !important;
    font-size: 10px !important;
    line-height: 1.1 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    white-space: nowrap !important;
}

html[data-theme] body.stock-opname-page-shell .stock-opname-table.so-table tbody tr,
body.stock-opname-page-shell .stock-opname-table.so-table tbody tr {
    height: 38px !important;
}

html[data-theme] body.stock-opname-page-shell .stock-opname-table.so-table .stock-opname-product-cell,
body.stock-opname-page-shell .stock-opname-table.so-table .stock-opname-product-cell {
    min-width: 0 !important;
}

html[data-theme] body.stock-opname-page-shell .stock-opname-table.so-table .stock-opname-product-cell strong,
body.stock-opname-page-shell .stock-opname-table.so-table .stock-opname-product-cell strong {
    display: block !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 12px !important;
    line-height: 1.15 !important;
}

html[data-theme] body.stock-opname-page-shell .stock-opname-table.so-table .stock-opname-product-cell small,
body.stock-opname-page-shell .stock-opname-table.so-table .stock-opname-product-cell small {
    display: none !important;
}

html[data-theme] body.stock-opname-page-shell .stock-opname-table.so-table :is(input, select),
body.stock-opname-page-shell .stock-opname-table.so-table :is(input, select) {
    height: 28px !important;
    min-height: 28px !important;
    padding: 3px 6px !important;
    font-size: 12px !important;
}

html[data-theme] body.stock-opname-page-shell .stock-opname-table.so-table .stock-opname-system-cell,
html[data-theme] body.stock-opname-page-shell .stock-opname-table.so-table .stock-opname-diff-cell,
body.stock-opname-page-shell .stock-opname-table.so-table .stock-opname-system-cell,
body.stock-opname-page-shell .stock-opname-table.so-table .stock-opname-diff-cell {
    text-align: center !important;
    font-variant-numeric: tabular-nums !important;
}

html[data-theme] body.stock-opname-page-shell .stock-opname-table.so-table .stock-opname-input-cell,
body.stock-opname-page-shell .stock-opname-table.so-table .stock-opname-input-cell {
    width: 92px !important;
}

html[data-theme] body.stock-opname-page-shell .stock-opname-table.so-table .stock-opname-diff-cell[data-state="up"],
body.stock-opname-page-shell .stock-opname-table.so-table .stock-opname-diff-cell[data-state="up"] {
    color: #047857 !important;
}

html[data-theme] body.stock-opname-page-shell .stock-opname-table.so-table .stock-opname-diff-cell[data-state="down"],
body.stock-opname-page-shell .stock-opname-table.so-table .stock-opname-diff-cell[data-state="down"] {
    color: #b91c1c !important;
}

html[data-theme] body.stock-opname-page-shell .so-action-bar,
body.stock-opname-page-shell .so-action-bar {
    flex: 0 0 auto !important;
    min-height: 44px !important;
    max-height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 6px 10px !important;
    position: sticky !important;
    bottom: 0 !important;
    z-index: 5 !important;
    background: rgba(255, 255, 255, 0.96) !important;
    backdrop-filter: blur(10px) !important;
    border-top: 1px solid rgba(226, 232, 240, 0.9) !important;
}

html[data-theme] body.stock-opname-page-shell .so-action-status,
body.stock-opname-page-shell .so-action-status {
    min-width: 0 !important;
    flex: 1 1 auto !important;
}

html[data-theme] body.stock-opname-page-shell .so-action-status strong,
body.stock-opname-page-shell .so-action-status strong {
    display: block !important;
    font-size: 13px !important;
}

html[data-theme] body.stock-opname-page-shell .so-action-status small,
body.stock-opname-page-shell .so-action-status small {
    margin-top: 2px !important;
    display: block !important;
    font-size: 10.5px !important;
    line-height: 1.15 !important;
}

html[data-theme] body.stock-opname-page-shell .so-action-controls,
body.stock-opname-page-shell .so-action-controls {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}

html[data-theme] body.stock-opname-page-shell .so-action-bar :is(button, .btn, .btn-link, a),
body.stock-opname-page-shell .so-action-bar :is(button, .btn, .btn-link, a) {
    height: 32px !important;
    min-height: 32px !important;
    padding: 5px 12px !important;
    font-size: 12px !important;
    border-radius: 8px !important;
}

html[data-theme] body.stock-opname-page-shell .so-save-btn,
body.stock-opname-page-shell .so-save-btn {
    min-width: 150px !important;
}

html[data-theme] body.stock-opname-page-shell .so-pagination,
body.stock-opname-page-shell .so-pagination {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
}

html[data-theme] body.stock-opname-page-shell .so-pagination button,
body.stock-opname-page-shell .so-pagination button {
    width: 28px !important;
    min-width: 28px !important;
    height: 28px !important;
    min-height: 28px !important;
    padding: 0 !important;
}

@media (max-width: 1180px) {
    html[data-theme] body.stock-opname-page-shell .page-content.page-content-bleed,
    body.stock-opname-page-shell .page-content.page-content-bleed,
    html[data-theme] body.stock-opname-page-shell .wms-page-stack.stock-opname-shell.so-cockpit-page,
    body.stock-opname-page-shell .wms-page-stack.stock-opname-shell.so-cockpit-page {
        height: auto !important;
        overflow: visible !important;
    }

    html[data-theme] body.stock-opname-page-shell .summary.so-status-strip,
    body.stock-opname-page-shell .summary.so-status-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    html[data-theme] body.stock-opname-page-shell .so-control-toolbar,
    body.stock-opname-page-shell .so-control-toolbar {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    html[data-theme] body.stock-opname-page-shell .so-work-area,
    body.stock-opname-page-shell .so-work-area {
        min-height: 520px !important;
    }

    html[data-theme] body.stock-opname-page-shell .so-table-wrap,
    body.stock-opname-page-shell .so-table-wrap {
        overflow-x: auto !important;
    }

    html[data-theme] body.stock-opname-page-shell .stock-opname-table.so-table,
    body.stock-opname-page-shell .stock-opname-table.so-table {
        min-width: 980px !important;
    }

    html[data-theme] body.stock-opname-page-shell .so-action-bar,
    body.stock-opname-page-shell .so-action-bar {
        position: static !important;
        max-height: none !important;
    }
}

@media (max-width: 640px) {
    html[data-theme] body.stock-opname-page-shell .so-compact-header,
    body.stock-opname-page-shell .so-compact-header {
        align-items: flex-start !important;
        flex-direction: column !important;
        max-height: none !important;
    }

    html[data-theme] body.stock-opname-page-shell .summary.so-status-strip,
    body.stock-opname-page-shell .summary.so-status-strip {
        grid-template-columns: 1fr !important;
    }

    html[data-theme] body.stock-opname-page-shell .so-control-toolbar,
    body.stock-opname-page-shell .so-control-toolbar {
        grid-template-columns: 1fr !important;
    }

    html[data-theme] body.stock-opname-page-shell .so-action-bar,
    body.stock-opname-page-shell .so-action-bar {
        align-items: stretch !important;
        flex-direction: column !important;
    }

    html[data-theme] body.stock-opname-page-shell .so-action-controls,
    body.stock-opname-page-shell .so-action-controls {
        width: 100% !important;
        justify-content: stretch !important;
        flex-direction: column !important;
    }

    html[data-theme] body.stock-opname-page-shell .so-action-bar :is(button, .btn, .btn-link, a),
    body.stock-opname-page-shell .so-action-bar :is(button, .btn, .btn-link, a) {
        width: 100% !important;
    }
}

/* =========================================================
   Request compact mockup alignment
   Scope: request gudang + request owner only
   ========================================================= */
html[data-theme] body.request-workflow-shell,
body.request-workflow-shell {
    overflow-x: hidden !important;
}

html[data-theme] body.request-workflow-shell .page-hero,
body.request-workflow-shell .page-hero {
    display: none !important;
}

html[data-theme] body.request-workflow-shell .page-content.page-content-bleed,
body.request-workflow-shell .page-content.page-content-bleed {
    overflow: visible !important;
    overflow-x: hidden !important;
}

html[data-theme] body.request-workflow-shell .wms-page-stack.request-cockpit-page,
body.request-workflow-shell .wms-page-stack.request-cockpit-page {
    height: auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    overflow: visible !important;
}

html[data-theme] body.request-workflow-shell .request-compact-header,
body.request-workflow-shell .request-compact-header {
    min-height: 56px !important;
    max-height: 70px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin: 0 !important;
}

html[data-theme] body.request-workflow-shell .request-compact-lead,
body.request-workflow-shell .request-compact-lead {
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

html[data-theme] body.request-workflow-shell .request-compact-icon,
body.request-workflow-shell .request-compact-icon {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 12px !important;
    background: rgba(37, 99, 235, 0.08) !important;
    color: #1d4ed8 !important;
}

html[data-theme] body.request-workflow-shell .request-compact-icon svg,
body.request-workflow-shell .request-compact-icon svg {
    width: 20px !important;
    height: 20px !important;
    display: block !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.8 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

html[data-theme] body.request-workflow-shell .request-compact-copy,
body.request-workflow-shell .request-compact-copy {
    min-width: 0 !important;
}

html[data-theme] body.request-workflow-shell .request-compact-title,
html[data-theme] body.request-workflow-shell .wms-page-stack.request-cockpit-page h1.request-compact-title,
body.request-workflow-shell .request-compact-title,
body.request-workflow-shell .wms-page-stack.request-cockpit-page h1.request-compact-title {
    margin: 0 !important;
    font-size: 24px !important;
    line-height: 1.08 !important;
    letter-spacing: 0 !important;
}

html[data-theme] body.request-workflow-shell .request-compact-subtitle,
body.request-workflow-shell .request-compact-subtitle {
    margin: 4px 0 0 !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    color: #64748b !important;
}

html[data-theme] body.request-workflow-shell .request-compact-subtitle span,
body.request-workflow-shell .request-compact-subtitle span {
    padding-inline: 4px !important;
    color: #94a3b8 !important;
}

html[data-theme] body.request-workflow-shell .request-compact-meta,
body.request-workflow-shell .request-compact-meta {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}

html[data-theme] body.request-workflow-shell .request-status-chip,
html[data-theme] body.request-workflow-shell .request-compact-time,
body.request-workflow-shell .request-status-chip,
body.request-workflow-shell .request-compact-time {
    min-height: 32px !important;
    padding: 5px 10px !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
}

html[data-theme] body.request-workflow-shell .wms-step-grid,
body.request-workflow-shell .wms-step-grid {
    display: none !important;
}

html[data-theme] body.request-workflow-shell .wms-kpi-grid,
body.request-workflow-shell .wms-kpi-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 0 !important;
    margin: 0 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
}

html[data-theme] body.request-workflow-shell .wms-kpi-card,
body.request-workflow-shell .wms-kpi-card {
    min-height: 54px !important;
    padding: 8px 12px !important;
    border-radius: 0 !important;
    border-right: 1px solid rgba(226, 232, 240, 0.9) !important;
    box-shadow: none !important;
}

html[data-theme] body.request-workflow-shell .wms-kpi-card:last-child,
body.request-workflow-shell .wms-kpi-card:last-child {
    border-right: 0 !important;
}

html[data-theme] body.request-workflow-shell .wms-kpi-card strong,
body.request-workflow-shell .wms-kpi-card strong {
    font-size: 14px !important;
    line-height: 1.1 !important;
}

html[data-theme] body.request-workflow-shell .wms-kpi-card small,
body.request-workflow-shell .wms-kpi-card small {
    display: none !important;
}

html[data-theme] body.request-workflow-shell .request-main-form,
body.request-workflow-shell .request-main-form {
    flex: 0 0 auto !important;
    min-height: 0 !important;
    height: auto !important;
    display: grid !important;
    gap: 8px !important;
}

html[data-theme] body.request-workflow-shell .request-workflow-scroll.request-cockpit,
body.request-workflow-shell .request-workflow-scroll.request-cockpit {
    flex: 0 0 auto !important;
    min-height: 0 !important;
    height: auto !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.85fr) !important;
    gap: 10px !important;
    align-items: start !important;
    overflow: visible !important;
}

html[data-theme] body.request-workflow-shell .request-form-panel,
html[data-theme] body.request-workflow-shell .ops-batch-box.request-form-panel,
body.request-workflow-shell .request-form-panel,
body.request-workflow-shell .ops-batch-box.request-form-panel {
    min-height: 0 !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    overflow: visible !important;
    padding: 10px 12px !important;
    border-radius: 12px !important;
    box-shadow: none !important;
}

html[data-theme] body.request-workflow-shell .request-queue-panel,
body.request-workflow-shell .request-queue-panel {
    min-height: 0 !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    overflow: visible !important;
    padding: 10px 12px !important;
    border-radius: 12px !important;
    box-shadow: none !important;
}

html[data-theme] body.request-workflow-shell :is(.request-form-panel, .request-queue-panel, .request-workflow-scroll, .request-cockpit),
body.request-workflow-shell :is(.request-form-panel, .request-queue-panel, .request-workflow-scroll, .request-cockpit) {
    max-width: 100% !important;
    min-width: 0 !important;
}

html[data-theme] body.request-workflow-shell .request-queue-head,
body.request-workflow-shell .request-queue-head {
    margin: 0 !important;
    padding: 0 !important;
}

html[data-theme] body.request-workflow-shell .request-queue-head p,
body.request-workflow-shell .request-queue-head p {
    display: none !important;
}

html[data-theme] body.request-workflow-shell .ops-entry-box,
body.request-workflow-shell .ops-entry-box {
    margin: 0 !important;
    padding: 10px 12px !important;
    border-radius: 10px !important;
    box-shadow: none !important;
}

html[data-theme] body.request-workflow-shell .ops-config-grid,
html[data-theme] body.request-workflow-shell .request-route-grid,
body.request-workflow-shell .ops-config-grid,
body.request-workflow-shell .request-route-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin: 0 !important;
    align-items: end !important;
}

html[data-theme] body.request-workflow-shell .request-owner-config-row,
body.request-workflow-shell .request-owner-config-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    align-items: end !important;
}

html[data-theme] body.request-workflow-shell .ops-config-card,
body.request-workflow-shell .ops-config-card {
    min-height: 0 !important;
    height: auto !important;
    padding: 8px 10px !important;
    border-radius: 10px !important;
    box-shadow: none !important;
}

html[data-theme] body.request-workflow-shell .owner-target-card,
body.request-workflow-shell .owner-target-card {
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    display: flex !important;
    align-items: end !important;
    justify-content: flex-start !important;
    gap: 8px !important;
}

html[data-theme] body.request-workflow-shell .owner-target-card p,
html[data-theme] body.request-workflow-shell .owner-target-card small,
html[data-theme] body.request-workflow-shell .owner-target-card .variant-mini-label,
body.request-workflow-shell .owner-target-card p,
body.request-workflow-shell .owner-target-card small,
body.request-workflow-shell .owner-target-card .variant-mini-label {
    display: none !important;
}

html[data-theme] body.request-workflow-shell .request-owner-chip,
html[data-theme] body.request-workflow-shell .owner-target-chip,
html[data-theme] body.request-workflow-shell .owner-target-card strong,
body.request-workflow-shell .request-owner-chip,
body.request-workflow-shell .owner-target-chip,
body.request-workflow-shell .owner-target-card strong {
    min-height: 28px !important;
    height: 28px !important;
    padding: 4px 8px !important;
    font-size: 11px !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
}

html[data-theme] body.request-workflow-shell .ops-item-selector,
body.request-workflow-shell .ops-item-selector {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 42px !important;
    gap: 8px !important;
    align-items: center !important;
}

html[data-theme] body.request-workflow-shell .request-gudang-entry-grid,
html[data-theme] body.request-workflow-shell .ops-entry-grid.request-entry-grid.request-gudang-entry-grid,
body.request-workflow-shell .request-gudang-entry-grid,
body.request-workflow-shell .ops-entry-grid.request-entry-grid.request-gudang-entry-grid {
    display: grid !important;
    grid-template-columns: minmax(220px, 1fr) 110px 90px auto !important;
    gap: 8px !important;
    align-items: end !important;
}

html[data-theme] body.request-workflow-shell .request-owner-entry-grid,
body.request-workflow-shell .request-owner-entry-grid {
    display: grid !important;
    grid-template-columns: minmax(220px, 1fr) 90px 90px minmax(150px, 0.75fr) auto !important;
    gap: 8px !important;
    align-items: end !important;
}

html[data-theme] body.request-workflow-shell .request-custom-entry-grid,
body.request-workflow-shell .request-custom-entry-grid {
    display: grid !important;
    grid-template-columns: minmax(180px, 1fr) minmax(140px, 0.8fr) minmax(150px, 0.85fr) 86px auto !important;
    gap: 8px !important;
    align-items: end !important;
    margin-top: 0 !important;
}

html[data-theme] body.request-workflow-shell :is(.ops-entry-grid input, .ops-entry-grid select, .ops-entry-grid button, .ops-config-grid input, .ops-config-grid select, .ops-config-grid button),
body.request-workflow-shell :is(.ops-entry-grid input, .ops-entry-grid select, .ops-entry-grid button, .ops-config-grid input, .ops-config-grid select, .ops-config-grid button) {
    height: 32px !important;
    min-height: 32px !important;
    font-size: 12px !important;
}

html[data-theme] body.request-workflow-shell .helper-text,
body.request-workflow-shell .helper-text {
    margin-top: 3px !important;
    font-size: 11px !important;
    line-height: 1.15 !important;
}

html[data-theme] body.request-workflow-shell .ops-stock-card,
body.request-workflow-shell .ops-stock-card {
    min-height: 0 !important;
    height: auto !important;
    padding: 6px 8px !important;
    border-radius: 8px !important;
}

html[data-theme] body.request-workflow-shell .ops-entry-actions,
body.request-workflow-shell .ops-entry-actions {
    width: auto !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: end !important;
}

html[data-theme] body.request-workflow-shell .ops-entry-actions button,
body.request-workflow-shell .ops-entry-actions button {
    width: auto !important;
    min-width: 96px !important;
    height: 32px !important;
    min-height: 32px !important;
}

html[data-theme] body.request-workflow-shell .request-custom-item-panel,
html[data-theme] body.request-workflow-shell details.request-custom-item-panel,
body.request-workflow-shell .request-custom-item-panel,
body.request-workflow-shell details.request-custom-item-panel {
    flex: 0 0 auto !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

html[data-theme] body.request-workflow-shell .request-custom-item-panel > summary,
body.request-workflow-shell .request-custom-item-panel > summary {
    min-height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 5px 8px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    cursor: pointer !important;
}

html[data-theme] body.request-workflow-shell .request-custom-item-panel:not([open]),
body.request-workflow-shell .request-custom-item-panel:not([open]) {
    max-height: 34px !important;
    overflow: hidden !important;
}

html[data-theme] body.request-workflow-shell .request-custom-item-copy,
body.request-workflow-shell .request-custom-item-copy {
    display: none !important;
}

html[data-theme] body.request-workflow-shell .request-custom-item-body,
body.request-workflow-shell .request-custom-item-body {
    padding: 0 8px 8px !important;
}

html[data-theme] body.request-workflow-shell .request-queue-panel .ops-queue-box,
body.request-workflow-shell .request-queue-panel .ops-queue-box {
    min-height: 0 !important;
    max-height: 260px !important;
    overflow: auto !important;
    padding: 0 !important;
    border-radius: 10px !important;
}

html[data-theme] body.request-workflow-shell .request-queue-table-wrap,
body.request-workflow-shell .request-queue-table-wrap {
    min-height: 0 !important;
    overflow: auto !important;
}

html[data-theme] body.request-workflow-shell .request-queue-panel .ops-queue-table,
body.request-workflow-shell .request-queue-panel .ops-queue-table {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

html[data-theme] body.request-workflow-shell .request-queue-panel .ops-queue-table th,
html[data-theme] body.request-workflow-shell .request-queue-panel .ops-queue-table td,
body.request-workflow-shell .request-queue-panel .ops-queue-table th,
body.request-workflow-shell .request-queue-panel .ops-queue-table td {
    padding: 5px 6px !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    vertical-align: middle !important;
}

html[data-theme] body.request-workflow-shell .request-queue-table th:nth-child(1),
html[data-theme] body.request-workflow-shell .request-queue-table td:nth-child(1),
body.request-workflow-shell .request-queue-table th:nth-child(1),
body.request-workflow-shell .request-queue-table td:nth-child(1) {
    width: 36px !important;
}

html[data-theme] body.request-workflow-shell .request-queue-table th:nth-child(3),
html[data-theme] body.request-workflow-shell .request-queue-table td:nth-child(3),
body.request-workflow-shell .request-queue-table th:nth-child(3),
body.request-workflow-shell .request-queue-table td:nth-child(3) {
    width: 80px !important;
}

html[data-theme] body.request-workflow-shell .request-queue-table th:nth-child(4),
html[data-theme] body.request-workflow-shell .request-queue-table td:nth-child(4),
body.request-workflow-shell .request-queue-table th:nth-child(4),
body.request-workflow-shell .request-queue-table td:nth-child(4) {
    width: 60px !important;
}

html[data-theme] body.request-workflow-shell .request-queue-table th:nth-child(5),
html[data-theme] body.request-workflow-shell .request-queue-table td:nth-child(5),
body.request-workflow-shell .request-queue-table th:nth-child(5),
body.request-workflow-shell .request-queue-table td:nth-child(5) {
    width: 42px !important;
}

html[data-theme] body.request-workflow-shell .owner-request-queue-table th:nth-child(5),
html[data-theme] body.request-workflow-shell .owner-request-queue-table td:nth-child(5),
body.request-workflow-shell .owner-request-queue-table th:nth-child(5),
body.request-workflow-shell .owner-request-queue-table td:nth-child(5) {
    width: 140px !important;
}

html[data-theme] body.request-workflow-shell .owner-request-queue-table th:nth-child(6),
html[data-theme] body.request-workflow-shell .owner-request-queue-table td:nth-child(6),
body.request-workflow-shell .owner-request-queue-table th:nth-child(6),
body.request-workflow-shell .owner-request-queue-table td:nth-child(6) {
    width: 42px !important;
}

html[data-theme] body.request-workflow-shell .request-empty-cell,
body.request-workflow-shell .request-empty-cell {
    height: 72px !important;
    max-height: 90px !important;
    padding: 10px !important;
    text-align: center !important;
    vertical-align: middle !important;
    font-size: 12px !important;
    color: #64748b !important;
}

html[data-theme] body.request-workflow-shell .request-empty-compact,
body.request-workflow-shell .request-empty-compact {
    min-height: 56px !important;
    max-height: 72px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: column !important;
    gap: 6px !important;
}

html[data-theme] body.request-workflow-shell .request-owner-empty-cell,
body.request-workflow-shell .request-owner-empty-cell {
    height: 72px !important;
    max-height: 90px !important;
    padding: 10px !important;
    text-align: center !important;
    vertical-align: middle !important;
    font-size: 12px !important;
    color: #64748b !important;
}

html[data-theme] body.request-workflow-shell .request-owner-empty-compact,
body.request-workflow-shell .request-owner-empty-compact {
    min-height: 56px !important;
    max-height: 72px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: column !important;
    gap: 6px !important;
}

html[data-theme] body.request-workflow-shell .request-empty-compact strong,
html[data-theme] body.request-workflow-shell .request-owner-empty-compact strong,
body.request-workflow-shell .request-empty-compact strong,
body.request-workflow-shell .request-owner-empty-compact strong {
    font-size: 12px !important;
    line-height: 1.2 !important;
}

html[data-theme] body.request-workflow-shell .request-empty-icon,
body.request-workflow-shell .request-empty-icon {
    width: 28px !important;
    height: 28px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 0.55 !important;
}

html[data-theme] body.request-workflow-shell .split-actions.request-action-bar,
html[data-theme] body.request-workflow-shell .request-owner-action-bar,
body.request-workflow-shell .split-actions.request-action-bar,
body.request-workflow-shell .request-owner-action-bar {
    position: static !important;
    min-height: 38px !important;
    max-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    margin-top: 8px !important;
    padding: 0 !important;
    background: transparent !important;
    backdrop-filter: none !important;
}

html[data-theme] body.request-workflow-shell .request-action-bar > .helper-text,
html[data-theme] body.request-workflow-shell .request-owner-action-bar > .helper-text,
body.request-workflow-shell .request-action-bar > .helper-text,
body.request-workflow-shell .request-owner-action-bar > .helper-text {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
}

html[data-theme] body.request-workflow-shell .split-actions.request-action-bar button,
html[data-theme] body.request-workflow-shell .request-owner-action-bar button,
body.request-workflow-shell .split-actions.request-action-bar button,
body.request-workflow-shell .request-owner-action-bar button {
    height: 32px !important;
    min-height: 32px !important;
    padding: 5px 12px !important;
    font-size: 12px !important;
    border-radius: 8px !important;
    width: auto !important;
    min-width: 132px !important;
}

html[data-theme] body.request-workflow-shell .request-remove-icon,
html[data-theme] body.request-workflow-shell .ops-remove-button,
body.request-workflow-shell .request-remove-icon,
body.request-workflow-shell .ops-remove-button {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    line-height: 1 !important;
}

html[data-theme] body.request-workflow-shell .request-history-panel,
body.request-workflow-shell .request-history-panel {
    flex: 0 0 auto !important;
    margin-top: 8px !important;
    border-radius: 10px !important;
    overflow: hidden !important;
}

html[data-theme] body.request-workflow-shell .request-history-panel > summary,
body.request-workflow-shell .request-history-panel > summary {
    min-height: 34px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 6px 10px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    cursor: pointer !important;
}

html[data-theme] body.request-workflow-shell .request-history-panel:not([open]),
body.request-workflow-shell .request-history-panel:not([open]) {
    max-height: 36px !important;
}

@media (max-width: 1180px) {
    html[data-theme] body.request-workflow-shell .request-workflow-scroll.request-cockpit,
    body.request-workflow-shell .request-workflow-scroll.request-cockpit {
        grid-template-columns: 1fr !important;
        overflow: visible !important;
    }

    html[data-theme] body.request-workflow-shell .request-queue-panel .ops-queue-box,
    body.request-workflow-shell .request-queue-panel .ops-queue-box {
        max-height: none !important;
    }

    html[data-theme] body.request-workflow-shell .wms-kpi-grid,
    body.request-workflow-shell .wms-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 640px) {
    html[data-theme] body.request-workflow-shell .request-compact-header,
    body.request-workflow-shell .request-compact-header {
        align-items: flex-start !important;
        flex-direction: column !important;
        max-height: none !important;
    }

    html[data-theme] body.request-workflow-shell .request-compact-meta,
    body.request-workflow-shell .request-compact-meta {
        justify-content: flex-start !important;
    }

    html[data-theme] body.request-workflow-shell .wms-kpi-grid,
    body.request-workflow-shell .wms-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    html[data-theme] body.request-workflow-shell :is(.request-gudang-entry-grid, .ops-entry-grid, .request-owner-entry-grid, .ops-config-grid, .request-custom-entry-grid, .request-owner-config-row),
    body.request-workflow-shell :is(.request-gudang-entry-grid, .ops-entry-grid, .request-owner-entry-grid, .ops-config-grid, .request-custom-entry-grid, .request-owner-config-row) {
        grid-template-columns: 1fr !important;
        gap: 6px !important;
    }

    html[data-theme] body.request-workflow-shell .request-action-bar,
    html[data-theme] body.request-workflow-shell .request-owner-action-bar,
    body.request-workflow-shell .request-action-bar,
    body.request-workflow-shell .request-owner-action-bar {
        align-items: stretch !important;
        flex-direction: column !important;
        max-height: none !important;
    }

    html[data-theme] body.request-workflow-shell .request-action-bar button,
    html[data-theme] body.request-workflow-shell .request-owner-action-bar button,
    body.request-workflow-shell .request-action-bar button,
    body.request-workflow-shell .request-owner-action-bar button {
        width: 100% !important;
    }

    html[data-theme] body.request-workflow-shell .request-queue-panel .ops-queue-table,
    body.request-workflow-shell .request-queue-panel .ops-queue-table {
        min-width: 680px !important;
    }
}

/* =========================================================
   Request compact follow-up fix
   Scope: request gudang + request owner only
   ========================================================= */
html[data-theme] body.request-workflow-shell *,
body.request-workflow-shell * {
    box-sizing: border-box !important;
}

html[data-theme] body.request-workflow-shell .wms-kpi-grid,
body.request-workflow-shell .wms-kpi-grid {
    display: grid !important;
    grid-template-columns: 1.15fr 0.85fr 0.85fr 0.85fr 1fr 0.85fr !important;
    gap: 0 !important;
    margin-bottom: 10px !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
}

html[data-theme] body.request-workflow-shell .wms-kpi-card,
body.request-workflow-shell .wms-kpi-card {
    min-width: 0 !important;
    min-height: 56px !important;
    padding: 8px 12px !important;
    overflow: hidden !important;
}

html[data-theme] body.request-workflow-shell .wms-kpi-card strong,
body.request-workflow-shell .wms-kpi-card strong {
    display: block !important;
    max-width: 100% !important;
    font-size: 13px !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

html[data-theme] body.request-workflow-shell .request-cockpit,
html[data-theme] body.request-workflow-shell .request-workflow-scroll,
body.request-workflow-shell .request-cockpit,
body.request-workflow-shell .request-workflow-scroll {
    display: grid !important;
    grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.85fr) !important;
    gap: 12px !important;
    align-items: start !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: visible !important;
}

html[data-theme] body.request-workflow-shell .request-cockpit > *,
html[data-theme] body.request-workflow-shell .request-workflow-scroll > *,
body.request-workflow-shell .request-cockpit > *,
body.request-workflow-shell .request-workflow-scroll > * {
    min-width: 0 !important;
    align-self: start !important;
}

html[data-theme] body.request-workflow-shell .request-form-panel,
html[data-theme] body.request-workflow-shell .ops-batch-box,
body.request-workflow-shell .request-form-panel,
body.request-workflow-shell .ops-batch-box {
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    padding: 10px 14px !important;
    overflow: visible !important;
    align-self: start !important;
}

html[data-theme] body.request-workflow-shell .request-queue-panel,
body.request-workflow-shell .request-queue-panel {
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    align-self: start !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding: 10px 14px !important;
    overflow: visible !important;
}

html[data-theme] body.request-workflow-shell .ops-entry-grid,
html[data-theme] body.request-workflow-shell .request-gudang-entry-grid,
body.request-workflow-shell .ops-entry-grid,
body.request-workflow-shell .request-gudang-entry-grid {
    display: grid !important;
    grid-template-columns: minmax(240px, 1fr) 44px minmax(96px, 110px) minmax(86px, 96px) minmax(92px, auto) !important;
    gap: 8px !important;
    align-items: end !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

html[data-theme] body.request-workflow-shell .request-owner-entry-grid,
body.request-workflow-shell .request-owner-entry-grid {
    display: grid !important;
    grid-template-columns: minmax(190px, 1fr) 42px 76px 76px minmax(110px, 0.55fr) 88px !important;
    gap: 8px !important;
    align-items: end !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
}

html[data-theme] body.request-workflow-shell .request-custom-entry-grid,
body.request-workflow-shell .request-custom-entry-grid {
    display: grid !important;
    grid-template-columns: minmax(180px, 1fr) minmax(130px, 0.8fr) minmax(130px, 0.8fr) 86px 110px !important;
    gap: 8px !important;
    align-items: end !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

html[data-theme] body.request-workflow-shell .ops-entry-grid > *,
html[data-theme] body.request-workflow-shell .request-gudang-entry-grid > *,
html[data-theme] body.request-workflow-shell .request-owner-entry-grid > *,
body.request-workflow-shell .ops-entry-grid > *,
body.request-workflow-shell .request-gudang-entry-grid > *,
body.request-workflow-shell .request-owner-entry-grid > * {
    min-width: 0 !important;
    max-width: 100% !important;
}

html[data-theme] body.request-workflow-shell .ops-entry-grid .form-field,
html[data-theme] body.request-workflow-shell .ops-entry-grid .field-group,
html[data-theme] body.request-workflow-shell .request-gudang-entry-grid .form-field,
html[data-theme] body.request-workflow-shell .request-gudang-entry-grid .field-group,
html[data-theme] body.request-workflow-shell .request-owner-entry-grid .form-field,
html[data-theme] body.request-workflow-shell .request-owner-entry-grid .field-group,
body.request-workflow-shell .ops-entry-grid .form-field,
body.request-workflow-shell .ops-entry-grid .field-group,
body.request-workflow-shell .request-gudang-entry-grid .form-field,
body.request-workflow-shell .request-gudang-entry-grid .field-group,
body.request-workflow-shell .request-owner-entry-grid .form-field,
body.request-workflow-shell .request-owner-entry-grid .field-group {
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    overflow: visible !important;
}

html[data-theme] body.request-workflow-shell .ops-entry-grid label,
html[data-theme] body.request-workflow-shell .request-gudang-entry-grid label,
html[data-theme] body.request-workflow-shell .request-owner-entry-grid label,
body.request-workflow-shell .ops-entry-grid label,
body.request-workflow-shell .request-gudang-entry-grid label,
body.request-workflow-shell .request-owner-entry-grid label {
    font-size: 11px !important;
    line-height: 1.15 !important;
    margin: 0 0 3px 0 !important;
    font-weight: 800 !important;
}

html[data-theme] body.request-workflow-shell .sr-only,
body.request-workflow-shell .sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

html[data-theme] body.request-workflow-shell .ops-entry-grid input,
html[data-theme] body.request-workflow-shell .ops-entry-grid select,
html[data-theme] body.request-workflow-shell .ops-entry-grid button,
html[data-theme] body.request-workflow-shell .request-gudang-entry-grid input,
html[data-theme] body.request-workflow-shell .request-gudang-entry-grid select,
html[data-theme] body.request-workflow-shell .request-gudang-entry-grid button,
html[data-theme] body.request-workflow-shell .request-owner-entry-grid input,
html[data-theme] body.request-workflow-shell .request-owner-entry-grid select,
html[data-theme] body.request-workflow-shell .request-owner-entry-grid button,
body.request-workflow-shell .ops-entry-grid input,
body.request-workflow-shell .ops-entry-grid select,
body.request-workflow-shell .ops-entry-grid button,
body.request-workflow-shell .request-gudang-entry-grid input,
body.request-workflow-shell .request-gudang-entry-grid select,
body.request-workflow-shell .request-gudang-entry-grid button,
body.request-workflow-shell .request-owner-entry-grid input,
body.request-workflow-shell .request-owner-entry-grid select,
body.request-workflow-shell .request-owner-entry-grid button {
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    font-size: 12px !important;
    box-sizing: border-box !important;
}

html[data-theme] body.request-workflow-shell .request-gudang-entry-grid button,
html[data-theme] body.request-workflow-shell .ops-entry-grid button,
html[data-theme] body.request-workflow-shell .request-owner-entry-grid button,
body.request-workflow-shell .request-gudang-entry-grid button,
body.request-workflow-shell .ops-entry-grid button,
body.request-workflow-shell .request-owner-entry-grid button {
    width: 100% !important;
    min-width: 84px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

html[data-theme] body.request-workflow-shell .ops-entry-stock,
body.request-workflow-shell .ops-entry-stock {
    gap: 4px !important;
}

html[data-theme] body.request-workflow-shell .ops-stock-card,
body.request-workflow-shell .ops-stock-card {
    min-height: 0 !important;
    height: 34px !important;
    max-height: 34px !important;
    padding: 0 10px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    border-radius: 8px !important;
}

html[data-theme] body.request-workflow-shell .ops-stock-value,
body.request-workflow-shell .ops-stock-value {
    font-size: 13px !important;
    line-height: 1 !important;
}

html[data-theme] body.request-workflow-shell .helper-text,
html[data-theme] body.request-workflow-shell .field-helper,
html[data-theme] body.request-workflow-shell .form-helper,
html[data-theme] body.request-workflow-shell .ops-helper-text,
body.request-workflow-shell .helper-text,
body.request-workflow-shell .field-helper,
body.request-workflow-shell .form-helper,
body.request-workflow-shell .ops-helper-text {
    margin-top: 4px !important;
    font-size: 11px !important;
    line-height: 1.15 !important;
    color: #64748b !important;
    max-height: 26px !important;
    overflow: hidden !important;
}

html[data-theme] body.request-workflow-shell .ops-entry-grid .helper-text,
html[data-theme] body.request-workflow-shell .request-gudang-entry-grid .helper-text,
html[data-theme] body.request-workflow-shell .request-owner-entry-grid .helper-text,
body.request-workflow-shell .ops-entry-grid .helper-text,
body.request-workflow-shell .request-gudang-entry-grid .helper-text,
body.request-workflow-shell .request-owner-entry-grid .helper-text {
    display: block !important;
    max-height: 26px !important;
}

html[data-theme] body.request-workflow-shell .request-queue-panel,
body.request-workflow-shell .request-queue-panel {
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    align-self: start !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding: 10px 14px !important;
    overflow: visible !important;
}

html[data-theme] body.request-workflow-shell .ops-queue-box,
html[data-theme] body.request-workflow-shell .request-queue-box,
html[data-theme] body.request-workflow-shell .queue-table-wrap,
body.request-workflow-shell .ops-queue-box,
body.request-workflow-shell .request-queue-box,
body.request-workflow-shell .queue-table-wrap {
    min-height: 0 !important;
    height: auto !important;
    max-height: 220px !important;
    overflow: auto !important;
    padding: 0 !important;
    margin: 0 !important;
}

html[data-theme] body.request-workflow-shell .request-empty-cell,
html[data-theme] body.request-workflow-shell .request-owner-empty-cell,
body.request-workflow-shell .request-empty-cell,
body.request-workflow-shell .request-owner-empty-cell {
    height: 72px !important;
    max-height: 90px !important;
    padding: 8px !important;
    vertical-align: middle !important;
}

html[data-theme] body.request-workflow-shell .request-empty-compact,
html[data-theme] body.request-workflow-shell .request-owner-empty-compact,
body.request-workflow-shell .request-empty-compact,
body.request-workflow-shell .request-owner-empty-compact {
    min-height: 52px !important;
    max-height: 68px !important;
    gap: 4px !important;
}

html[data-theme] body.request-workflow-shell .split-actions,
html[data-theme] body.request-workflow-shell .request-action-bar,
html[data-theme] body.request-workflow-shell .request-owner-action-bar,
body.request-workflow-shell .split-actions,
body.request-workflow-shell .request-action-bar,
body.request-workflow-shell .request-owner-action-bar {
    position: static !important;
    min-height: 34px !important;
    height: auto !important;
    max-height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    margin-top: 8px !important;
    padding: 0 !important;
    flex: 0 0 auto !important;
}

html[data-theme] body.request-workflow-shell .split-actions button,
html[data-theme] body.request-workflow-shell .request-action-bar button,
html[data-theme] body.request-workflow-shell .request-owner-action-bar button,
body.request-workflow-shell .split-actions button,
body.request-workflow-shell .request-action-bar button,
body.request-workflow-shell .request-owner-action-bar button {
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    padding: 6px 14px !important;
    font-size: 12px !important;
    border-radius: 8px !important;
    width: auto !important;
    min-width: 140px !important;
}

@media (max-width: 640px) {
    html[data-theme] body.request-workflow-shell .request-cockpit,
    html[data-theme] body.request-workflow-shell .request-workflow-scroll,
    body.request-workflow-shell .request-cockpit,
    body.request-workflow-shell .request-workflow-scroll {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    html[data-theme] body.request-workflow-shell .request-status-strip,
    html[data-theme] body.request-workflow-shell .wms-kpi-grid,
    body.request-workflow-shell .request-status-strip,
    body.request-workflow-shell .wms-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    html[data-theme] body.request-workflow-shell .ops-entry-grid,
    html[data-theme] body.request-workflow-shell .request-gudang-entry-grid,
    body.request-workflow-shell .ops-entry-grid,
    body.request-workflow-shell .request-gudang-entry-grid {
        grid-template-columns: 1fr 38px 72px 72px !important;
    }

    html[data-theme] body.request-workflow-shell .request-owner-entry-grid,
    body.request-workflow-shell .request-owner-entry-grid {
        grid-template-columns: 1fr 38px 72px 72px !important;
    }

    html[data-theme] body.request-workflow-shell .request-owner-entry-grid .catatan-field,
    html[data-theme] body.request-workflow-shell .request-owner-entry-grid .note-field,
    body.request-workflow-shell .request-owner-entry-grid .catatan-field,
    body.request-workflow-shell .request-owner-entry-grid .note-field {
        grid-column: 1 / -1 !important;
    }

    html[data-theme] body.request-workflow-shell .ops-entry-grid button,
    html[data-theme] body.request-workflow-shell .request-gudang-entry-grid button,
    html[data-theme] body.request-workflow-shell .request-owner-entry-grid button,
    body.request-workflow-shell .ops-entry-grid button,
    body.request-workflow-shell .request-gudang-entry-grid button,
    body.request-workflow-shell .request-owner-entry-grid button {
        grid-column: 1 / -1 !important;
        width: 100% !important;
    }

    html[data-theme] body.request-workflow-shell .request-action-bar button,
    html[data-theme] body.request-workflow-shell .request-owner-action-bar button,
    html[data-theme] body.request-workflow-shell .split-actions button,
    body.request-workflow-shell .request-action-bar button,
    body.request-workflow-shell .request-owner-action-bar button,
    body.request-workflow-shell .split-actions button {
        width: 100% !important;
    }
}

/* WMS global compact guard
   Scope: dashboard, stock, input item, stock opname, transfer, outbound,
   inbound, approvals, audit, and request pages carrying wms-module-shell. */

body.wms-module-shell {
    --wms-radius: 12px;
    --wms-gap: 12px;
    --wms-card-pad: 14px;
    --wms-border: #d8e4f2;
    --wms-soft: #f8fbff;
    --wms-text: #082047;
    --wms-muted: #64748b;
    --wms-blue: #0b2345;
    --wms-accent: #d6af3a;
    overflow-x: hidden !important;
}

body.wms-module-shell :is(.wms-page-stack, .workspace-panel, .content-card, .form-box, .table-box, .panel, .box, .card, .card-mini, .module-card, .dashboard-card) {
    min-height: 0 !important;
    height: auto !important;
}

body.wms-module-shell :is(.wms-command-card, .wms-kpi-card, .wms-step-card, .summary-card, .meta-card) {
    height: auto !important;
    align-self: start !important;
}

body.wms-module-shell :is(.page-hero, .content-header, .wms-reference-header) {
    min-height: 0 !important;
    padding: 14px 18px !important;
    border-radius: 14px !important;
}

body.wms-module-shell :is(.page-hero h1, .content-header h1, .content-header h2) {
    font-size: clamp(1.35rem, 2vw, 1.9rem) !important;
    line-height: 1.1 !important;
    margin: 0 !important;
}

body.wms-module-shell :is(.page-hero p, .page-subtitle, .content-header p, .wms-reference-header p) {
    margin-top: 4px !important;
    line-height: 1.3 !important;
}

body.wms-module-shell :is(.top-bar, .products-filter-bar, .stock-filter-bar, #soFilterForm) {
    gap: 8px !important;
}

body.wms-module-shell :is(.table-wrap, .inventory-table-wrap, .audit-table-wrap, .stock-opname-table-wrap, .stock-table-viewport, .wms-variant-table-wrap) {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
}

body.wms-module-shell :is(.empty-state, .ops-queue-empty, .approval-empty-state) {
    min-height: 52px !important;
    max-height: 96px !important;
    padding: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}

body.wms-module-shell :is(.action-bar, .request-action-bar, .request-owner-action-bar, .split-actions, .form-actions, .sticky-actions, .so-action-bar) {
    min-height: 36px !important;
    height: auto !important;
    margin-top: 8px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
}

body.wms-module-shell :is(.action-bar button, .request-action-bar button, .request-owner-action-bar button, .split-actions button, .form-actions button, .so-action-bar button) {
    min-height: 34px !important;
    height: 34px !important;
    max-height: 34px !important;
}

body.wms-module-shell :is(table, .ops-queue-table, .audit-log-table, .approval-queue-table) {
    max-width: 100% !important;
}

body.wms-module-shell.wms-dashboard-page-shell .wms-page-stack {
    gap: 12px !important;
    padding-bottom: 16px !important;
}

body.wms-module-shell.wms-dashboard-page-shell .dashboard-cards {
    gap: 10px !important;
}

body.wms-module-shell.wms-dashboard-page-shell .dashboard-cards .card {
    min-height: 92px !important;
    padding: 12px 14px !important;
    border-radius: 12px !important;
}

body.wms-module-shell.wms-dashboard-page-shell .dashboard-cards .card h2 {
    margin-top: 6px !important;
    font-size: clamp(1.3rem, 1.8vw, 2rem) !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

body.wms-module-shell.wms-dashboard-page-shell .dashboard-aging-grid {
    gap: 10px !important;
}

body.wms-module-shell.wms-dashboard-page-shell .dashboard-aging-grid .card-mini {
    min-height: 70px !important;
    padding: 10px 12px !important;
}

body.wms-module-shell.wms-dashboard-page-shell .wms-command-grid {
    gap: 10px !important;
}

body.wms-module-shell.wms-dashboard-page-shell .wms-command-card {
    min-height: 148px !important;
    padding: 14px !important;
}

body.wms-module-shell.wms-dashboard-page-shell .dashboard-alerts {
    gap: 8px !important;
}

body.wms-module-shell.wms-dashboard-page-shell .dashboard-alerts .alert {
    padding: 10px 12px !important;
}

body.wms-module-shell.wms-dashboard-page-shell .dashboard-activity-box .section-title {
    margin-bottom: 8px !important;
}

body.wms-module-shell.wms-dashboard-page-shell .dashboard-activity-box table th,
body.wms-module-shell.wms-dashboard-page-shell .dashboard-activity-box table td {
    padding: 8px 10px !important;
}

body.wms-module-shell.wms-stock-reference-shell .wms-zip-stock-page,
body.wms-module-shell.wms-stock-reference-shell .stock-page-shell {
    min-height: 0 !important;
    height: auto !important;
}

body.wms-module-shell.wms-stock-reference-shell .stock-pagination-strip {
    margin-top: 8px !important;
}

body.wms-module-shell.wms-stock-reference-shell .wms-product-tools:not([open]) {
    max-height: 38px !important;
    overflow: hidden !important;
}

body.wms-module-shell.wms-stock-reference-shell .wms-product-tools > summary {
    min-height: 34px !important;
    padding: 6px 10px !important;
}

body.wms-module-shell.wms-stock-reference-shell .wms-input-meta-grid {
    gap: 8px !important;
}

body.wms-module-shell.wms-stock-reference-shell .wms-input-meta-grid .meta-card {
    min-height: 64px !important;
    padding: 10px 12px !important;
}

body.wms-module-shell.wms-stock-reference-shell .wms-product-editor-shell {
    align-self: start !important;
}

body.wms-module-shell.wms-stock-reference-shell .wms-product-editor-actions {
    margin-top: 12px !important;
}

body.wms-module-shell.wms-stock-reference-shell .wms-single-product-panel {
    gap: 10px !important;
}

body.wms-module-shell.wms-stock-reference-shell .variant-builder-table {
    min-width: 980px !important;
}

body.wms-module-shell.stock-opname-page-shell .wms-step-grid {
    display: none !important;
}

body.wms-module-shell.stock-opname-page-shell .so-status-strip {
    gap: 8px !important;
}

body.wms-module-shell.stock-opname-page-shell .so-status-strip .card-mini {
    min-height: 50px !important;
    padding: 8px 10px !important;
}

body.wms-module-shell.stock-opname-page-shell .so-status-strip .card-mini h3 {
    font-size: 1.1rem !important;
    white-space: nowrap !important;
}

/* WMS Stock & Produk final viewport lock. Keep the browser still on desktop;
   only the inventory table gets its own scroll. */
body.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell {
    overflow-x: hidden !important;
}

body.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-filter-chips {
    grid-column: 1 / -1 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 0 1px 1px !important;
    scrollbar-width: none !important;
}

body.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-filter-chips::-webkit-scrollbar {
    display: none !important;
}

body.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-filter-chip {
    appearance: none !important;
    flex: 0 0 auto !important;
    min-height: 28px !important;
    height: 28px !important;
    padding: 0 10px !important;
    border: 1px solid #d8e4f2 !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    color: #24405f !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    cursor: pointer !important;
}

body.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-filter-chip.is-active {
    border-color: #0f62fe !important;
    background: #eaf2ff !important;
    color: #063d92 !important;
}

body.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell [data-product-bulk-delete][aria-disabled="true"] {
    opacity: 0.55 !important;
}

body.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-mobile-check {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    min-width: 28px !important;
    height: 28px !important;
    margin: 0 !important;
}

body.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-mobile-check input {
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    cursor: pointer !important;
}

body.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-mobile-actions .stock-product-delete-button {
    flex: 0 0 auto !important;
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
}

@media (min-width: 1024px) {
    html:has(body.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell),
    html[data-theme]:has(body.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell) {
        width: 100% !important;
        height: 100dvh !important;
        min-height: 100dvh !important;
        max-height: 100dvh !important;
        overflow: hidden !important;
    }

    html[data-theme] body.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell,
    body.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell {
        width: 100% !important;
        height: 100dvh !important;
        min-height: 100dvh !important;
        max-height: 100dvh !important;
        overflow: hidden !important;
    }

    html[data-theme] body.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell :is(.layout, .main),
    body.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell :is(.layout, .main) {
        height: calc(100dvh - 86px) !important;
        min-height: 0 !important;
        max-height: calc(100dvh - 86px) !important;
        overflow: hidden !important;
    }

    html[data-theme] body.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .internal-module-layout:not(.internal-module-layout--hub),
    body.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .internal-module-layout:not(.internal-module-layout--hub) {
        height: 100% !important;
        min-height: 0 !important;
        max-height: 100% !important;
        overflow: hidden !important;
        padding-top: 10px !important;
        padding-bottom: 10px !important;
        align-items: stretch !important;
    }

    html[data-theme] body.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .internal-module-panel,
    body.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .internal-module-panel {
        height: 100% !important;
        min-height: 0 !important;
        max-height: 100% !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        padding: 14px 16px 12px !important;
    }

    html[data-theme] body.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .page-content.page-content-bleed,
    body.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .page-content.page-content-bleed {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        height: auto !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
    }

    html[data-theme] body.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .wms-reference-header,
    body.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .wms-reference-header {
        flex: 0 0 auto !important;
        margin-bottom: 8px !important;
    }

    html[data-theme] body.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .wms-zip-stock-page:not(.is-hidden),
    body.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .wms-zip-stock-page:not(.is-hidden) {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        height: 100% !important;
        overflow: hidden !important;
        display: grid !important;
        grid-template-rows: auto auto minmax(0, 1fr) !important;
        gap: 8px !important;
    }

    html[data-theme] body.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .wms-stock-filter,
    body.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .wms-stock-filter {
        flex: 0 0 auto !important;
        min-height: 0 !important;
        overflow: hidden !important;
        padding: 8px 10px !important;
        margin: 0 !important;
    }

    html[data-theme] body.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .wms-stock-filter-grid,
    body.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .wms-stock-filter-grid {
        display: grid !important;
        grid-template-columns: minmax(300px, 1.3fr) minmax(150px, .42fr) auto !important;
        align-items: end !important;
        gap: 6px 8px !important;
    }

    html[data-theme] body.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .wms-stock-filter :is(input, select),
    body.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .wms-stock-filter :is(input, select) {
        height: 34px !important;
        min-height: 34px !important;
        font-size: 12px !important;
    }

    html[data-theme] body.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .wms-stock-filter :is(button, a.button-secondary),
    body.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .wms-stock-filter :is(button, a.button-secondary) {
        height: 34px !important;
        min-height: 34px !important;
        font-size: 12px !important;
    }

    html[data-theme] body.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .wms-stock-stats,
    body.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .wms-stock-stats {
        flex: 0 0 auto !important;
        min-height: 0 !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 8px !important;
        margin: 0 !important;
    }

    html[data-theme] body.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .wms-stock-stat,
    body.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .wms-stock-stat {
        height: 58px !important;
        min-height: 58px !important;
        padding: 8px 10px !important;
    }

    html[data-theme] body.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .wms-stock-table-card,
    body.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .wms-stock-table-card {
        min-height: 0 !important;
        height: 100% !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        padding: 8px 10px !important;
        margin: 0 !important;
    }

    html[data-theme] body.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .wms-stock-table-toolbar,
    body.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .wms-stock-table-toolbar {
        flex: 0 0 auto !important;
        min-height: 38px !important;
        padding: 0 0 6px !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;
    }

    html[data-theme] body.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .wms-stock-table-actions,
    body.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .wms-stock-table-actions {
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 6px !important;
        flex-wrap: wrap !important;
    }

    html[data-theme] body.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .stock-desktop-table,
    body.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .stock-desktop-table {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }

    html[data-theme] body.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .stock-table-viewport,
    html[data-theme] body.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .wms-stock-table-wrap,
    body.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .stock-table-viewport,
    body.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .wms-stock-table-wrap {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
        overflow: auto !important;
        scrollbar-gutter: stable !important;
        overscroll-behavior: contain !important;
    }

    html[data-theme] body.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .wms-stock-table,
    body.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .wms-stock-table {
        width: 100% !important;
        min-width: 980px !important;
        table-layout: fixed !important;
    }

    html[data-theme] body.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .wms-stock-table thead th,
    body.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .wms-stock-table thead th {
        position: sticky !important;
        top: 0 !important;
        z-index: 3 !important;
        background: #f8fafc !important;
        height: 32px !important;
        padding: 6px 8px !important;
        white-space: nowrap !important;
    }

    html[data-theme] body.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .wms-stock-table tbody tr,
    body.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .wms-stock-table tbody tr {
        height: 44px !important;
    }

    html[data-theme] body.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .wms-stock-table td,
    body.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .wms-stock-table td {
        padding: 4px 8px !important;
        white-space: nowrap !important;
    }

    html[data-theme] body.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .stock-item-name-cell,
    body.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .stock-item-name-cell {
        min-width: 260px !important;
        white-space: normal !important;
    }

    html[data-theme] body.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .stock-item-title,
    body.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .stock-item-title {
        overflow-wrap: anywhere !important;
    }

    html[data-theme] body.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .stock-row-actions,
    body.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .stock-row-actions {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 4px !important;
        flex-wrap: nowrap !important;
    }

    html[data-theme] body.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .stock-action-button,
    html[data-theme] body.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .stock-detail-button,
    body.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .stock-action-button,
    body.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .stock-detail-button {
        height: 28px !important;
        min-height: 28px !important;
        padding: 0 8px !important;
        font-size: 11px !important;
    }

    html[data-theme] body.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .stock-product-delete-button,
    html[data-theme] body.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .stock-row-menu-button,
    body.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .stock-product-delete-button,
    body.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .stock-row-menu-button {
        width: 28px !important;
        min-width: 28px !important;
        height: 28px !important;
        min-height: 28px !important;
        padding: 0 !important;
    }

    html[data-theme] body.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .stock-pagination-strip,
    body.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .stock-pagination-strip {
        flex: 0 0 auto !important;
        margin: 6px 0 0 !important;
        padding: 6px 0 0 !important;
        overflow: hidden !important;
    }
}

body.wms-module-shell.stock-opname-page-shell .so-control-toolbar {
    gap: 8px !important;
}

body.wms-module-shell.stock-opname-page-shell .so-scope-note {
    margin-top: -2px !important;
}

body.wms-module-shell.stock-opname-page-shell .so-work-head {
    margin-bottom: 6px !important;
}

body.wms-module-shell.stock-opname-page-shell .so-table-wrap {
    min-height: 0 !important;
}

body.wms-module-shell.stock-opname-page-shell .so-action-bar {
    position: sticky !important;
    bottom: 12px !important;
    padding: 8px 10px !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 24px rgba(8, 32, 71, 0.12) !important;
    background: rgba(255, 255, 255, 0.98) !important;
}

body.wms-module-shell.stock-opname-page-shell .so-action-controls {
    gap: 8px !important;
}

body.wms-module-shell.stock-opname-page-shell .stock-opname-table {
    min-width: 940px !important;
}

body.wms-module-shell.wms-transfer-page-shell .wms-step-grid,
body.wms-module-shell.wms-outbound-page-shell .wms-step-grid,
body.wms-module-shell.wms-inbound-page-shell .wms-step-grid {
    display: none !important;
}

body.wms-module-shell.wms-transfer-page-shell .wms-kpi-grid,
body.wms-module-shell.wms-outbound-page-shell .wms-kpi-grid,
body.wms-module-shell.wms-inbound-page-shell .wms-kpi-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 10px !important;
}

body.wms-module-shell.wms-transfer-page-shell .wms-kpi-card,
body.wms-module-shell.wms-outbound-page-shell .wms-kpi-card,
body.wms-module-shell.wms-inbound-page-shell .wms-kpi-card {
    min-height: 56px !important;
    padding: 8px 10px !important;
}

body.wms-module-shell.wms-transfer-page-shell .wms-kpi-card strong,
body.wms-module-shell.wms-outbound-page-shell .wms-kpi-card strong,
body.wms-module-shell.wms-inbound-page-shell .wms-kpi-card strong {
    font-size: 14px !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

body.wms-module-shell.wms-transfer-page-shell .wms-kpi-card small,
body.wms-module-shell.wms-outbound-page-shell .wms-kpi-card small,
body.wms-module-shell.wms-inbound-page-shell .wms-kpi-card small {
    display: none !important;
}

body.wms-module-shell.wms-transfer-page-shell :is(.ops-card, .wms-card, .ops-batch-box),
body.wms-module-shell.wms-outbound-page-shell :is(.ops-card, .wms-card, .ops-batch-box),
body.wms-module-shell.wms-inbound-page-shell :is(.ops-card, .wms-card, .ops-batch-box) {
    padding: 12px 14px !important;
    border-radius: 12px !important;
}

body.wms-module-shell.wms-transfer-page-shell .ops-config-grid,
body.wms-module-shell.wms-outbound-page-shell .ops-config-grid,
body.wms-module-shell.wms-inbound-page-shell .ops-config-grid {
    gap: 8px !important;
    align-items: start !important;
}

body.wms-module-shell.wms-transfer-page-shell .ops-config-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

body.wms-module-shell.wms-outbound-page-shell .ops-config-grid,
body.wms-module-shell.wms-inbound-page-shell .ops-config-grid {
    grid-template-columns: minmax(0, 1fr) minmax(220px, 0.85fr) !important;
}

body.wms-module-shell.wms-transfer-page-shell .ops-config-card,
body.wms-module-shell.wms-outbound-page-shell .ops-config-card,
body.wms-module-shell.wms-inbound-page-shell .ops-config-card {
    padding: 10px 12px !important;
    border-radius: 10px !important;
    gap: 4px !important;
}

body.wms-module-shell.wms-transfer-page-shell .ops-entry-box,
body.wms-module-shell.wms-outbound-page-shell .ops-entry-box,
body.wms-module-shell.wms-inbound-page-shell .ops-entry-box {
    margin-bottom: 10px !important;
    padding: 10px 12px !important;
    border-radius: 12px !important;
}

body.wms-module-shell.wms-transfer-page-shell :is(.ops-entry-grid, .transfer-entry-grid),
body.wms-module-shell.wms-outbound-page-shell :is(.ops-entry-grid, .outbound-entry-grid),
body.wms-module-shell.wms-inbound-page-shell :is(.ops-entry-grid, .inbound-entry-grid) {
    display: grid !important;
    gap: 8px !important;
    align-items: start !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

body.wms-module-shell.wms-transfer-page-shell .transfer-entry-grid {
    grid-template-columns: minmax(210px, 1fr) 44px minmax(170px, 0.85fr) minmax(100px, 110px) minmax(86px, 96px) 96px !important;
}

body.wms-module-shell.wms-outbound-page-shell .outbound-entry-grid {
    grid-template-columns: minmax(180px, 1fr) 44px minmax(150px, 0.7fr) 100px 90px minmax(140px, 0.8fr) 96px !important;
}

body.wms-module-shell.wms-inbound-page-shell .inbound-entry-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
}

body.wms-module-shell.wms-inbound-page-shell .inbound-entry-grid .item-field {
    grid-column: span 3 !important;
}

body.wms-module-shell.wms-inbound-page-shell .inbound-entry-grid .picker-field {
    grid-column: span 1 !important;
}

body.wms-module-shell.wms-inbound-page-shell .inbound-entry-grid .barcode-field {
    grid-column: span 3 !important;
}

body.wms-module-shell.wms-inbound-page-shell .inbound-entry-grid .stock-field {
    grid-column: span 2 !important;
}

body.wms-module-shell.wms-inbound-page-shell .inbound-entry-grid .qty-field {
    grid-column: span 2 !important;
}

body.wms-module-shell.wms-inbound-page-shell .inbound-entry-grid .cost-field {
    grid-column: span 2 !important;
}

body.wms-module-shell.wms-inbound-page-shell .inbound-entry-grid .expiry-field {
    grid-column: span 2 !important;
}

body.wms-module-shell.wms-inbound-page-shell .inbound-entry-grid .date-field {
    grid-column: span 2 !important;
}

body.wms-module-shell.wms-inbound-page-shell .inbound-entry-grid .note-field {
    grid-column: span 4 !important;
}

body.wms-module-shell.wms-inbound-page-shell .inbound-entry-grid .action-field {
    grid-column: span 2 !important;
}

body.wms-module-shell.wms-transfer-page-shell :is(.ops-entry-grid > *, .transfer-entry-grid > *),
body.wms-module-shell.wms-outbound-page-shell :is(.ops-entry-grid > *, .outbound-entry-grid > *),
body.wms-module-shell.wms-inbound-page-shell :is(.ops-entry-grid > *, .inbound-entry-grid > *) {
    min-width: 0 !important;
    max-width: 100% !important;
}

body.wms-module-shell.wms-transfer-page-shell :is(.form-field, .field-group),
body.wms-module-shell.wms-outbound-page-shell :is(.form-field, .field-group),
body.wms-module-shell.wms-inbound-page-shell :is(.form-field, .field-group) {
    min-height: 0 !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    justify-content: flex-start !important;
}

body.wms-module-shell.wms-transfer-page-shell :is(.ops-entry-grid input, .ops-entry-grid select, .ops-entry-grid button),
body.wms-module-shell.wms-outbound-page-shell :is(.ops-entry-grid input, .ops-entry-grid select, .ops-entry-grid button),
body.wms-module-shell.wms-inbound-page-shell :is(.ops-entry-grid input, .ops-entry-grid select, .ops-entry-grid button) {
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    box-sizing: border-box !important;
    font-size: 12px !important;
}

body.wms-module-shell.wms-transfer-page-shell .money-input,
body.wms-module-shell.wms-inbound-page-shell .money-input {
    min-height: 36px !important;
}

body.wms-module-shell.wms-transfer-page-shell :is(.ops-entry-grid label, .ops-config-grid label),
body.wms-module-shell.wms-outbound-page-shell :is(.ops-entry-grid label, .ops-config-grid label),
body.wms-module-shell.wms-inbound-page-shell :is(.ops-entry-grid label, .ops-config-grid label) {
    margin: 0 0 3px !important;
    font-size: 11px !important;
    line-height: 1.15 !important;
    font-weight: 800 !important;
}

body.wms-module-shell.wms-transfer-page-shell :is(.helper-text, .field-helper, .form-helper, .ops-helper-text),
body.wms-module-shell.wms-outbound-page-shell :is(.helper-text, .field-helper, .form-helper, .ops-helper-text),
body.wms-module-shell.wms-inbound-page-shell :is(.helper-text, .field-helper, .form-helper, .ops-helper-text) {
    margin-top: 0 !important;
    font-size: 11px !important;
    line-height: 1.15 !important;
    color: var(--wms-muted) !important;
    max-height: 26px !important;
    overflow: hidden !important;
}

body.wms-module-shell.wms-transfer-page-shell .ops-stock-card,
body.wms-module-shell.wms-outbound-page-shell .ops-stock-card,
body.wms-module-shell.wms-inbound-page-shell .ops-stock-card {
    min-height: 36px !important;
    height: 36px !important;
    max-height: 36px !important;
    padding: 4px 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
}

body.wms-module-shell.wms-transfer-page-shell .ops-stock-state,
body.wms-module-shell.wms-outbound-page-shell .ops-stock-state,
body.wms-module-shell.wms-inbound-page-shell .ops-stock-state {
    display: block !important;
}

body.wms-module-shell.wms-transfer-page-shell :is(.ops-entry-actions button, .transfer-entry-grid button),
body.wms-module-shell.wms-outbound-page-shell :is(.ops-entry-actions button, .outbound-entry-grid button),
body.wms-module-shell.wms-inbound-page-shell :is(.ops-entry-actions button, .inbound-entry-grid button) {
    width: 100% !important;
    min-width: 88px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    align-self: start !important;
}

body.wms-module-shell.wms-transfer-page-shell :is(.ops-queue-box, .queue-table-wrap),
body.wms-module-shell.wms-outbound-page-shell :is(.ops-queue-box, .queue-table-wrap),
body.wms-module-shell.wms-inbound-page-shell :is(.ops-queue-box, .queue-table-wrap) {
    min-height: 0 !important;
    max-height: 240px !important;
    overflow: auto !important;
    padding: 0 !important;
    border-radius: 10px !important;
}

body.wms-module-shell.wms-transfer-page-shell .ops-queue-table,
body.wms-module-shell.wms-outbound-page-shell .ops-queue-table {
    min-width: 0 !important;
    table-layout: fixed !important;
}

body.wms-module-shell.wms-inbound-page-shell .ops-queue-table {
    min-width: 980px !important;
    table-layout: fixed !important;
}

body.wms-module-shell.wms-transfer-page-shell .ops-queue-table th,
body.wms-module-shell.wms-transfer-page-shell .ops-queue-table td,
body.wms-module-shell.wms-outbound-page-shell .ops-queue-table th,
body.wms-module-shell.wms-outbound-page-shell .ops-queue-table td,
body.wms-module-shell.wms-inbound-page-shell .ops-queue-table th,
body.wms-module-shell.wms-inbound-page-shell .ops-queue-table td {
    padding: 6px 8px !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    vertical-align: middle !important;
}

body.wms-module-shell.wms-transfer-page-shell .ops-queue-table th,
body.wms-module-shell.wms-outbound-page-shell .ops-queue-table th,
body.wms-module-shell.wms-inbound-page-shell .ops-queue-table th {
    top: 0 !important;
    font-size: 10px !important;
    text-transform: uppercase !important;
}

body.wms-module-shell.wms-transfer-page-shell .request-empty-cell,
body.wms-module-shell.wms-outbound-page-shell .request-empty-cell,
body.wms-module-shell.wms-inbound-page-shell .request-empty-cell {
    height: 72px !important;
    max-height: 90px !important;
    padding: 8px !important;
    vertical-align: middle !important;
}

body.wms-module-shell .request-empty-compact,
body.wms-module-shell .request-owner-empty-compact {
    min-height: 52px !important;
    max-height: 68px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: column !important;
    gap: 4px !important;
}

body.wms-module-shell .request-empty-icon {
    width: 28px !important;
    height: 28px !important;
    opacity: .55 !important;
}

body.wms-module-shell .request-remove-icon,
body.wms-module-shell .ops-remove-button {
    width: 28px !important;
    min-width: 28px !important;
    height: 28px !important;
    min-height: 28px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important;
    font-size: 0 !important;
    line-height: 1 !important;
    color: #dc2626 !important;
}

body.wms-module-shell .request-remove-icon svg,
body.wms-module-shell .ops-remove-button svg {
    width: 14px !important;
    height: 14px !important;
    display: block !important;
    pointer-events: none !important;
}

body.wms-module-shell .request-remove-icon:hover,
body.wms-module-shell .ops-remove-button:hover {
    color: #b91c1c !important;
    background: #fee2e2 !important;
    border-color: #fecaca !important;
}

body.wms-module-shell.wms-approval-page-shell .wms-command-grid {
    gap: 10px !important;
}

body.wms-module-shell.wms-approval-page-shell .wms-command-card {
    min-height: 120px !important;
    padding: 12px 14px !important;
}

body.wms-module-shell.wms-approval-page-shell .approval-queue-table-box .section-title {
    margin-bottom: 8px !important;
}

body.wms-module-shell.wms-approval-page-shell .approval-queue-table {
    min-width: 980px !important;
}

body.wms-module-shell.wms-approval-page-shell .approval-queue-table th,
body.wms-module-shell.wms-approval-page-shell .approval-queue-table td {
    padding: 8px 10px !important;
    vertical-align: middle !important;
}

body.wms-module-shell.wms-approval-page-shell .approval-queue-action-col {
    width: 220px !important;
}

body.wms-module-shell.wms-approval-page-shell .table-action-stack,
body.wms-module-shell.wms-approval-page-shell .table-action-row {
    gap: 6px !important;
}

body.wms-module-shell.wms-approval-page-shell .approval-reason-input {
    min-height: 32px !important;
}

body.wms-module-shell.wms-approval-page-shell .empty-state {
    max-height: 120px !important;
}

body.wms-module-shell.wms-audit-page-shell .wms-split-band {
    display: grid !important;
    grid-template-columns: minmax(0, 1.2fr) minmax(240px, 0.8fr) !important;
    gap: 10px !important;
    align-items: start !important;
}

body.wms-module-shell.wms-audit-page-shell .wms-filter-band,
body.wms-module-shell.wms-audit-page-shell .wms-panel-note {
    padding: 12px 14px !important;
    border-radius: 12px !important;
}

body.wms-module-shell.wms-audit-page-shell .top-bar {
    display: grid !important;
    grid-template-columns: minmax(180px, 1.3fr) repeat(2, minmax(140px, 0.9fr)) minmax(140px, 0.9fr) minmax(130px, 0.8fr) minmax(130px, 0.8fr) auto !important;
    gap: 8px !important;
    align-items: center !important;
}

body.wms-module-shell.wms-audit-page-shell .top-bar :is(input, select, button) {
    min-height: 34px !important;
    height: 34px !important;
}

body.wms-module-shell.wms-audit-page-shell .wms-inline-status {
    gap: 6px !important;
}

body.wms-module-shell.wms-audit-page-shell .table-box {
    overflow: auto !important;
}

body.wms-module-shell.wms-audit-page-shell .audit-log-table {
    min-width: 1040px !important;
}

body.wms-module-shell.wms-audit-page-shell .audit-log-table th,
body.wms-module-shell.wms-audit-page-shell .audit-log-table td {
    padding: 8px 10px !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
}

body.wms-module-shell.wms-audit-page-shell .audit-log-table th:nth-child(1),
body.wms-module-shell.wms-audit-page-shell .audit-log-table td:nth-child(1),
body.wms-module-shell.wms-audit-page-shell .audit-log-table th:nth-child(2),
body.wms-module-shell.wms-audit-page-shell .audit-log-table td:nth-child(2),
body.wms-module-shell.wms-audit-page-shell .audit-log-table th:nth-child(3),
body.wms-module-shell.wms-audit-page-shell .audit-log-table td:nth-child(3),
body.wms-module-shell.wms-audit-page-shell .audit-log-table th:nth-child(6),
body.wms-module-shell.wms-audit-page-shell .audit-log-table td:nth-child(6),
body.wms-module-shell.wms-audit-page-shell .audit-log-table th:nth-child(7),
body.wms-module-shell.wms-audit-page-shell .audit-log-table td:nth-child(7),
body.wms-module-shell.wms-audit-page-shell .audit-log-table th:nth-child(9),
body.wms-module-shell.wms-audit-page-shell .audit-log-table td:nth-child(9) {
    white-space: nowrap !important;
}

body.wms-module-shell.wms-audit-page-shell .audit-log-table td:nth-child(8) {
    max-width: 220px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

@media (max-width: 1180px) {
    body.wms-module-shell.wms-audit-page-shell .wms-split-band {
        grid-template-columns: 1fr !important;
    }

    body.wms-module-shell.wms-audit-page-shell .top-bar {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    body.wms-module-shell.wms-transfer-page-shell .wms-kpi-grid,
    body.wms-module-shell.wms-outbound-page-shell .wms-kpi-grid,
    body.wms-module-shell.wms-inbound-page-shell .wms-kpi-grid,
    body.wms-module-shell.stock-opname-page-shell .so-status-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    body.wms-module-shell.wms-transfer-page-shell .transfer-entry-grid,
    body.wms-module-shell.wms-outbound-page-shell .outbound-entry-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    body.wms-module-shell.wms-inbound-page-shell .inbound-entry-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    body.wms-module-shell.wms-transfer-page-shell .ops-config-grid,
    body.wms-module-shell.wms-outbound-page-shell .ops-config-grid,
    body.wms-module-shell.wms-inbound-page-shell .ops-config-grid {
        grid-template-columns: 1fr !important;
    }

    body.wms-module-shell.wms-inbound-page-shell .inbound-entry-grid > * {
        grid-column: auto !important;
    }
}

@media (max-width: 640px) {
    body.wms-module-shell.wms-dashboard-page-shell .dashboard-cards,
    body.wms-module-shell.wms-dashboard-page-shell .dashboard-aging-grid,
    body.wms-module-shell.wms-dashboard-page-shell .wms-command-grid,
    body.wms-module-shell.stock-opname-page-shell .so-status-strip {
        grid-template-columns: 1fr !important;
    }

    body.wms-module-shell.wms-transfer-page-shell .transfer-entry-grid,
    body.wms-module-shell.wms-outbound-page-shell .outbound-entry-grid,
    body.wms-module-shell.wms-inbound-page-shell .inbound-entry-grid,
    body.wms-module-shell.wms-audit-page-shell .top-bar {
        grid-template-columns: 1fr !important;
    }

    body.wms-module-shell.wms-transfer-page-shell .transfer-entry-grid button,
    body.wms-module-shell.wms-outbound-page-shell .outbound-entry-grid button,
    body.wms-module-shell.wms-inbound-page-shell .inbound-entry-grid button,
    body.wms-module-shell.wms-audit-page-shell .top-bar button {
        width: 100% !important;
    }

    body.wms-module-shell.wms-approval-page-shell .wms-command-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ==================================================
Request Gudang / Owner Compact V3
Final cascade guard, scoped only for request pages
================================================== */

html[data-theme] body.request-workflow-shell .request-compact-v3,
body.request-workflow-shell .request-compact-v3 {
    --req-page-max: 1280px;
    --req-gap: 10px;
    --req-panel-gap: 12px;
    --req-radius: 12px;
    --req-border: #d8e4f2;
    --req-blue: #071f3f;
    --req-muted: #64748b;
    --req-soft: #f8fbff;
    --req-input-h: 36px;
    --req-label-h: 16px;
    --req-helper-h: 28px;
    --req-status-h: 64px;
    --req-empty-h: 92px;
    width: 100% !important;
    max-width: var(--req-page-max) !important;
    margin: 0 auto !important;
    padding: 18px 20px 20px !important;
    box-sizing: border-box !important;
    gap: 10px !important;
}

html[data-theme] body.request-workflow-shell .request-compact-v3,
html[data-theme] body.request-workflow-shell .request-compact-v3 *,
body.request-workflow-shell .request-compact-v3,
body.request-workflow-shell .request-compact-v3 * {
    box-sizing: border-box !important;
}

html[data-theme] body.request-workflow-shell .page-content.page-content-bleed,
body.request-workflow-shell .page-content.page-content-bleed {
    overflow: visible !important;
}

html[data-theme] body.request-workflow-shell .request-compact-v3 .request-compact-header,
body.request-workflow-shell .request-compact-v3 .request-compact-header {
    min-height: 58px !important;
    max-height: 70px !important;
    margin-bottom: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
}

html[data-theme] body.request-workflow-shell .request-compact-v3 .request-compact-header h1,
html[data-theme] body.request-workflow-shell .request-compact-v3 h1,
body.request-workflow-shell .request-compact-v3 .request-compact-header h1,
body.request-workflow-shell .request-compact-v3 h1 {
    font-size: 26px !important;
    line-height: 1.05 !important;
    margin: 0 !important;
    letter-spacing: 0 !important;
}

html[data-theme] body.request-workflow-shell .request-compact-v3 .request-compact-subtitle,
body.request-workflow-shell .request-compact-v3 .request-compact-subtitle {
    font-size: 12px !important;
    line-height: 1.2 !important;
    color: var(--req-muted) !important;
}

html[data-theme] body.request-workflow-shell .request-compact-v3 .wms-kpi-grid,
body.request-workflow-shell .request-compact-v3 .wms-kpi-grid {
    display: grid !important;
    grid-template-columns: 1.25fr repeat(4, .9fr) .8fr !important;
    height: var(--req-status-h) !important;
    min-height: var(--req-status-h) !important;
    max-height: var(--req-status-h) !important;
    gap: 0 !important;
    margin-bottom: 12px !important;
    overflow: hidden !important;
    border-radius: 12px !important;
}

html[data-theme] body.request-workflow-shell .request-compact-v3 .wms-kpi-card,
body.request-workflow-shell .request-compact-v3 .wms-kpi-card {
    height: var(--req-status-h) !important;
    min-height: var(--req-status-h) !important;
    max-height: var(--req-status-h) !important;
    padding: 8px 12px !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 4px !important;
}

html[data-theme] body.request-workflow-shell .request-compact-v3 .wms-kpi-card small,
html[data-theme] body.request-workflow-shell .request-compact-v3 .wms-kpi-card span,
body.request-workflow-shell .request-compact-v3 .wms-kpi-card small,
body.request-workflow-shell .request-compact-v3 .wms-kpi-card span {
    font-size: 11px !important;
    line-height: 1.1 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
    color: var(--req-muted) !important;
    white-space: nowrap !important;
}

html[data-theme] body.request-workflow-shell .request-compact-v3 .wms-kpi-card strong,
body.request-workflow-shell .request-compact-v3 .wms-kpi-card strong {
    display: block !important;
    font-size: 14px !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

html[data-theme] body.request-workflow-shell .request-compact-v3 .request-cockpit,
body.request-workflow-shell .request-compact-v3 .request-cockpit {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 360px !important;
    gap: var(--req-panel-gap) !important;
    align-items: start !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: visible !important;
}

html[data-theme] body.request-workflow-shell .request-compact-v3 .request-cockpit > *,
body.request-workflow-shell .request-compact-v3 .request-cockpit > * {
    min-width: 0 !important;
    align-self: start !important;
}

html[data-theme] body.request-workflow-shell .request-compact-v3 .request-form-panel,
html[data-theme] body.request-workflow-shell .request-compact-v3 .request-queue-panel,
body.request-workflow-shell .request-compact-v3 .request-form-panel,
body.request-workflow-shell .request-compact-v3 .request-queue-panel {
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    padding: 12px 14px !important;
    border-radius: var(--req-radius) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    overflow: visible !important;
    align-self: start !important;
}

html[data-theme] body.request-workflow-shell .request-compact-v3 .request-form-panel h2,
html[data-theme] body.request-workflow-shell .request-compact-v3 .request-queue-panel h3,
body.request-workflow-shell .request-compact-v3 .request-form-panel h2,
body.request-workflow-shell .request-compact-v3 .request-queue-panel h3 {
    font-size: 18px !important;
    line-height: 1.15 !important;
    margin: 0 0 4px !important;
    letter-spacing: 0 !important;
}

html[data-theme] body.request-workflow-shell .request-compact-v3 .internal-section-head p,
body.request-workflow-shell .request-compact-v3 .internal-section-head p {
    margin: 2px 0 0 !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
}

html[data-theme] body.request-workflow-shell .request-compact-v3 .ops-config-grid,
html[data-theme] body.request-workflow-shell .request-compact-v3 .request-owner-config-row,
body.request-workflow-shell .request-compact-v3 .ops-config-grid,
body.request-workflow-shell .request-compact-v3 .request-owner-config-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    align-items: start !important;
    width: 100% !important;
}

html[data-theme] body.request-workflow-shell .request-compact-v3 .ops-config-grid select,
html[data-theme] body.request-workflow-shell .request-compact-v3 .request-owner-config-row select,
body.request-workflow-shell .request-compact-v3 .ops-config-grid select,
body.request-workflow-shell .request-compact-v3 .request-owner-config-row select {
    height: var(--req-input-h) !important;
    min-height: var(--req-input-h) !important;
    max-height: var(--req-input-h) !important;
    font-size: 13px !important;
}

html[data-theme] body.request-workflow-shell .request-compact-v3 .request-add-card,
body.request-workflow-shell .request-compact-v3 .request-add-card {
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    padding: 12px 14px !important;
    border-radius: var(--req-radius) !important;
    overflow: visible !important;
}

html[data-theme] body.request-workflow-shell .request-compact-v3 .request-add-card h3,
body.request-workflow-shell .request-compact-v3 .request-add-card h3 {
    font-size: 18px !important;
    line-height: 1.15 !important;
    margin: 0 0 10px !important;
    letter-spacing: 0 !important;
}

html[data-theme] body.request-workflow-shell .request-gudang-compact-v3 .request-add-row,
html[data-theme] body.request-workflow-shell .request-gudang-compact-v3 .request-gudang-add-row,
body.request-workflow-shell .request-gudang-compact-v3 .request-add-row,
body.request-workflow-shell .request-gudang-compact-v3 .request-gudang-add-row {
    display: grid !important;
    grid-template-columns: minmax(280px, 1fr) 112px 104px 104px !important;
    gap: 10px !important;
    align-items: start !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

html[data-theme] body.request-workflow-shell .request-owner-compact-v3 .request-add-row,
html[data-theme] body.request-workflow-shell .request-owner-compact-v3 .request-owner-add-row,
body.request-workflow-shell .request-owner-compact-v3 .request-add-row,
body.request-workflow-shell .request-owner-compact-v3 .request-owner-add-row {
    display: grid !important;
    grid-template-columns: minmax(260px, 1fr) 96px 96px minmax(130px, 0.65fr) 104px !important;
    gap: 10px !important;
    align-items: start !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

html[data-theme] body.request-workflow-shell .request-compact-v3 .request-field,
body.request-workflow-shell .request-compact-v3 .request-field {
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    display: grid !important;
    grid-template-rows: var(--req-label-h) var(--req-input-h) var(--req-helper-h) !important;
    gap: 4px !important;
    overflow: visible !important;
    align-content: start !important;
}

html[data-theme] body.request-workflow-shell .request-compact-v3 .request-field label,
body.request-workflow-shell .request-compact-v3 .request-field label {
    height: var(--req-label-h) !important;
    min-height: var(--req-label-h) !important;
    max-height: var(--req-label-h) !important;
    font-size: 12px !important;
    line-height: var(--req-label-h) !important;
    font-weight: 800 !important;
    margin: 0 !important;
    color: var(--req-blue) !important;
}

html[data-theme] body.request-workflow-shell .request-compact-v3 .request-field input,
html[data-theme] body.request-workflow-shell .request-compact-v3 .request-field select,
html[data-theme] body.request-workflow-shell .request-compact-v3 .request-stock-input,
body.request-workflow-shell .request-compact-v3 .request-field input,
body.request-workflow-shell .request-compact-v3 .request-field select,
body.request-workflow-shell .request-compact-v3 .request-stock-input {
    height: var(--req-input-h) !important;
    min-height: var(--req-input-h) !important;
    max-height: var(--req-input-h) !important;
    font-size: 13px !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

html[data-theme] body.request-workflow-shell .request-compact-v3 .request-helper,
body.request-workflow-shell .request-compact-v3 .request-helper {
    height: var(--req-helper-h) !important;
    min-height: 0 !important;
    max-height: var(--req-helper-h) !important;
    margin: 0 !important;
    font-size: 12px !important;
    line-height: 14px !important;
    color: var(--req-muted) !important;
    overflow: hidden !important;
}

html[data-theme] body.request-workflow-shell .request-compact-v3 .request-stock-field .request-helper,
html[data-theme] body.request-workflow-shell .request-compact-v3 .request-qty-field .request-helper,
html[data-theme] body.request-workflow-shell .request-compact-v3 .request-note-field .request-helper,
body.request-workflow-shell .request-compact-v3 .request-stock-field .request-helper,
body.request-workflow-shell .request-compact-v3 .request-qty-field .request-helper,
body.request-workflow-shell .request-compact-v3 .request-note-field .request-helper {
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
}

html[data-theme] body.request-workflow-shell .request-compact-v3 .request-picker-line,
body.request-workflow-shell .request-compact-v3 .request-picker-line {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 42px !important;
    gap: 8px !important;
    align-items: center !important;
    height: var(--req-input-h) !important;
    min-height: var(--req-input-h) !important;
    max-height: var(--req-input-h) !important;
    width: 100% !important;
}

html[data-theme] body.request-workflow-shell .request-compact-v3 .request-picker-line input,
body.request-workflow-shell .request-compact-v3 .request-picker-line input {
    width: 100% !important;
    height: var(--req-input-h) !important;
    min-height: var(--req-input-h) !important;
    max-height: var(--req-input-h) !important;
}

html[data-theme] body.request-workflow-shell .request-compact-v3 .request-picker-button,
body.request-workflow-shell .request-compact-v3 .request-picker-button {
    width: 42px !important;
    height: var(--req-input-h) !important;
    min-width: 42px !important;
    min-height: var(--req-input-h) !important;
    max-height: var(--req-input-h) !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important;
    align-self: center !important;
    grid-column: auto !important;
}

html[data-theme] body.request-workflow-shell .request-compact-v3 .request-action-field,
body.request-workflow-shell .request-compact-v3 .request-action-field {
    padding-top: 0 !important;
    grid-column: auto !important;
}

html[data-theme] body.request-workflow-shell .request-compact-v3 .request-action-field .request-label-spacer,
html[data-theme] body.request-workflow-shell .request-compact-v3 .request-action-field .request-helper-spacer,
body.request-workflow-shell .request-compact-v3 .request-action-field .request-label-spacer,
body.request-workflow-shell .request-compact-v3 .request-action-field .request-helper-spacer {
    display: none !important;
}

html[data-theme] body.request-workflow-shell .request-compact-v3 .request-action-field button,
html[data-theme] body.request-workflow-shell .request-compact-v3 .request-add-button,
body.request-workflow-shell .request-compact-v3 .request-action-field button,
body.request-workflow-shell .request-compact-v3 .request-add-button {
    grid-row: 2 !important;
    width: 100% !important;
    height: var(--req-input-h) !important;
    min-height: var(--req-input-h) !important;
    max-height: var(--req-input-h) !important;
    min-width: 0 !important;
    padding: 0 12px !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    border-radius: 8px !important;
    white-space: nowrap !important;
    align-self: stretch !important;
    flex: 0 0 auto !important;
    grid-column: auto !important;
}

html[data-theme] body.request-workflow-shell .request-compact-v3 .ops-stock-card,
body.request-workflow-shell .request-compact-v3 .ops-stock-card {
    min-height: var(--req-input-h) !important;
    height: var(--req-input-h) !important;
    max-height: var(--req-input-h) !important;
    padding: 0 12px !important;
    margin: 0 !important;
    background: #fff !important;
    border: 1px solid var(--req-border) !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    border-radius: 8px !important;
}

html[data-theme] body.request-workflow-shell .request-compact-v3 .ops-stock-value,
body.request-workflow-shell .request-compact-v3 .ops-stock-value {
    font-size: 13px !important;
    line-height: 1 !important;
}

html[data-theme] body.request-workflow-shell .request-compact-v3 .ops-queue-box,
html[data-theme] body.request-workflow-shell .request-compact-v3 .request-queue-table-wrap,
body.request-workflow-shell .request-compact-v3 .ops-queue-box,
body.request-workflow-shell .request-compact-v3 .request-queue-table-wrap {
    min-height: 0 !important;
    height: auto !important;
    max-height: 170px !important;
    overflow: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 10px !important;
}

html[data-theme] body.request-workflow-shell .request-compact-v3 .request-queue-panel,
body.request-workflow-shell .request-compact-v3 .request-queue-panel {
    min-width: 360px !important;
    max-width: 360px !important;
}

html[data-theme] body.request-workflow-shell .request-compact-v3 table,
html[data-theme] body.request-workflow-shell .request-compact-v3 [data-scrollable-table="1"] table,
body.request-workflow-shell .request-compact-v3 table,
body.request-workflow-shell .request-compact-v3 [data-scrollable-table="1"] table {
    width: 100% !important;
    min-width: 0 !important;
    table-layout: fixed !important;
}

html[data-theme] body.request-workflow-shell .request-compact-v3 .request-queue-panel table,
html[data-theme] body.request-workflow-shell .request-compact-v3 .request-queue-panel [data-scrollable-table="1"] table,
body.request-workflow-shell .request-compact-v3 .request-queue-panel table,
body.request-workflow-shell .request-compact-v3 .request-queue-panel [data-scrollable-table="1"] table {
    table-layout: auto !important;
}

html[data-theme] body.request-workflow-shell .request-compact-v3 th,
html[data-theme] body.request-workflow-shell .request-compact-v3 td,
body.request-workflow-shell .request-compact-v3 th,
body.request-workflow-shell .request-compact-v3 td {
    font-size: 12px !important;
    line-height: 1.2 !important;
    padding: 7px 8px !important;
}

html[data-theme] body.request-workflow-shell .request-compact-v3 .request-queue-panel th,
html[data-theme] body.request-workflow-shell .request-compact-v3 .request-queue-panel td,
body.request-workflow-shell .request-compact-v3 .request-queue-panel th,
body.request-workflow-shell .request-compact-v3 .request-queue-panel td {
    font-size: 11px !important;
    line-height: 1.15 !important;
    padding: 6px 6px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

html[data-theme] body.request-workflow-shell .request-compact-v3 .request-queue-panel th:first-child,
html[data-theme] body.request-workflow-shell .request-compact-v3 .request-queue-panel td:first-child,
body.request-workflow-shell .request-compact-v3 .request-queue-panel th:first-child,
body.request-workflow-shell .request-compact-v3 .request-queue-panel td:first-child {
    width: 42px !important;
}

html[data-theme] body.request-workflow-shell .request-owner-compact-v3 .request-queue-panel th:last-child,
html[data-theme] body.request-workflow-shell .request-owner-compact-v3 .request-queue-panel td:last-child,
body.request-workflow-shell .request-owner-compact-v3 .request-queue-panel th:last-child,
body.request-workflow-shell .request-owner-compact-v3 .request-queue-panel td:last-child {
    width: 56px !important;
}

html[data-theme] body.request-workflow-shell .request-gudang-compact-v3 .request-queue-panel th:last-child,
html[data-theme] body.request-workflow-shell .request-gudang-compact-v3 .request-queue-panel td:last-child,
body.request-workflow-shell .request-gudang-compact-v3 .request-queue-panel th:last-child,
body.request-workflow-shell .request-gudang-compact-v3 .request-queue-panel td:last-child {
    width: 64px !important;
}

html[data-theme] body.request-workflow-shell .request-compact-v3 .request-empty-cell,
html[data-theme] body.request-workflow-shell .request-compact-v3 .request-owner-empty-cell,
body.request-workflow-shell .request-compact-v3 .request-empty-cell,
body.request-workflow-shell .request-compact-v3 .request-owner-empty-cell {
    height: var(--req-empty-h) !important;
    min-height: var(--req-empty-h) !important;
    max-height: var(--req-empty-h) !important;
    padding: 8px !important;
    vertical-align: middle !important;
}

html[data-theme] body.request-workflow-shell .request-compact-v3 .request-empty-compact,
html[data-theme] body.request-workflow-shell .request-compact-v3 .request-owner-empty-compact,
body.request-workflow-shell .request-compact-v3 .request-empty-compact,
body.request-workflow-shell .request-compact-v3 .request-owner-empty-compact {
    height: calc(var(--req-empty-h) - 16px) !important;
    min-height: 0 !important;
    max-height: calc(var(--req-empty-h) - 16px) !important;
    padding: 0 !important;
    gap: 4px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: column !important;
}

html[data-theme] body.request-workflow-shell .request-compact-v3 .request-empty-compact strong,
html[data-theme] body.request-workflow-shell .request-compact-v3 .request-owner-empty-compact strong,
body.request-workflow-shell .request-compact-v3 .request-empty-compact strong,
body.request-workflow-shell .request-compact-v3 .request-owner-empty-compact strong {
    max-width: 100% !important;
    padding: 0 10px !important;
    margin: 0 !important;
    font-size: 11px !important;
    line-height: 1.25 !important;
    text-align: center !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
}

html[data-theme] body.request-workflow-shell .request-compact-v3 .request-action-bar,
html[data-theme] body.request-workflow-shell .request-compact-v3 .request-owner-action-bar,
body.request-workflow-shell .request-compact-v3 .request-action-bar,
body.request-workflow-shell .request-compact-v3 .request-owner-action-bar {
    position: static !important;
    margin-top: 0 !important;
    padding: 0 !important;
    min-height: 38px !important;
    height: 38px !important;
    max-height: 38px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    flex: 0 0 auto !important;
    flex-wrap: nowrap !important;
}

html[data-theme] body.request-workflow-shell .request-compact-v3 .request-action-bar > .helper-text,
html[data-theme] body.request-workflow-shell .request-compact-v3 .request-owner-action-bar > .helper-text,
body.request-workflow-shell .request-compact-v3 .request-action-bar > .helper-text,
body.request-workflow-shell .request-compact-v3 .request-owner-action-bar > .helper-text {
    flex: 1 1 auto !important;
    width: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
}

html[data-theme] body.request-workflow-shell .request-compact-v3 .request-action-bar button,
html[data-theme] body.request-workflow-shell .request-compact-v3 .request-owner-action-bar button,
body.request-workflow-shell .request-compact-v3 .request-action-bar button,
body.request-workflow-shell .request-compact-v3 .request-owner-action-bar button {
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    min-width: 140px !important;
    width: auto !important;
    padding: 0 16px !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    border-radius: 8px !important;
    flex: 0 0 auto !important;
}

html[data-theme] body.request-workflow-shell .request-compact-v3 .request-custom-item-panel,
html[data-theme] body.request-workflow-shell .request-history-panel,
body.request-workflow-shell .request-compact-v3 .request-custom-item-panel,
body.request-workflow-shell .request-history-panel {
    min-height: 0 !important;
    height: auto !important;
    margin-top: 0 !important;
    border-radius: 10px !important;
    overflow: hidden !important;
}

html[data-theme] body.request-workflow-shell .request-compact-v3 .request-custom-item-panel > summary,
html[data-theme] body.request-workflow-shell .request-history-panel > summary,
body.request-workflow-shell .request-compact-v3 .request-custom-item-panel > summary,
body.request-workflow-shell .request-history-panel > summary {
    min-height: 34px !important;
    height: 34px !important;
    max-height: 34px !important;
    padding: 0 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    cursor: pointer !important;
}

html[data-theme] body.request-workflow-shell .request-compact-v3 .request-custom-item-panel:not([open]),
html[data-theme] body.request-workflow-shell .request-history-panel:not([open]),
body.request-workflow-shell .request-compact-v3 .request-custom-item-panel:not([open]),
body.request-workflow-shell .request-history-panel:not([open]) {
    max-height: 36px !important;
}

@media (max-width: 900px) {
    html[data-theme] body.request-workflow-shell .request-compact-v3,
    body.request-workflow-shell .request-compact-v3 {
        padding: 12px !important;
    }

    html[data-theme] body.request-workflow-shell .request-compact-v3 .request-cockpit,
    body.request-workflow-shell .request-compact-v3 .request-cockpit {
        grid-template-columns: 1fr !important;
    }

    html[data-theme] body.request-workflow-shell .request-compact-v3 .request-queue-panel,
    body.request-workflow-shell .request-compact-v3 .request-queue-panel {
        min-width: 0 !important;
    }

    html[data-theme] body.request-workflow-shell .request-compact-v3 .wms-kpi-grid,
    body.request-workflow-shell .request-compact-v3 .wms-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        height: auto !important;
        max-height: none !important;
    }

    html[data-theme] body.request-workflow-shell .request-compact-v3 .wms-kpi-card,
    body.request-workflow-shell .request-compact-v3 .wms-kpi-card {
        height: 58px !important;
        min-height: 58px !important;
        max-height: 58px !important;
    }

    html[data-theme] body.request-workflow-shell .request-gudang-compact-v3 .request-add-row,
    html[data-theme] body.request-workflow-shell .request-owner-compact-v3 .request-add-row,
    body.request-workflow-shell .request-gudang-compact-v3 .request-add-row,
    body.request-workflow-shell .request-owner-compact-v3 .request-add-row {
        grid-template-columns: 1fr 96px 96px !important;
    }

    html[data-theme] body.request-workflow-shell .request-owner-compact-v3 .request-note-field,
    body.request-workflow-shell .request-owner-compact-v3 .request-note-field {
        grid-column: 1 / -1 !important;
    }

    html[data-theme] body.request-workflow-shell .request-compact-v3 .request-action-field,
    body.request-workflow-shell .request-compact-v3 .request-action-field {
        grid-column: 1 / -1 !important;
        padding-top: 0 !important;
    }
}

@media (max-width: 640px) {
    html[data-theme] body.request-workflow-shell .request-gudang-compact-v3 .request-add-row,
    html[data-theme] body.request-workflow-shell .request-owner-compact-v3 .request-add-row,
    body.request-workflow-shell .request-gudang-compact-v3 .request-add-row,
    body.request-workflow-shell .request-owner-compact-v3 .request-add-row {
        grid-template-columns: 1fr !important;
    }

    html[data-theme] body.request-workflow-shell .request-compact-v3 .request-action-field,
    body.request-workflow-shell .request-compact-v3 .request-action-field {
        padding-top: 0 !important;
    }

    html[data-theme] body.request-workflow-shell .request-compact-v3 .request-action-bar,
    html[data-theme] body.request-workflow-shell .request-compact-v3 .request-owner-action-bar,
    body.request-workflow-shell .request-compact-v3 .request-action-bar,
    body.request-workflow-shell .request-compact-v3 .request-owner-action-bar {
        height: auto !important;
        max-height: none !important;
        flex-wrap: wrap !important;
    }

    html[data-theme] body.request-workflow-shell .request-compact-v3 .request-action-bar button,
    html[data-theme] body.request-workflow-shell .request-compact-v3 .request-owner-action-bar button,
    body.request-workflow-shell .request-compact-v3 .request-action-bar button,
    body.request-workflow-shell .request-compact-v3 .request-owner-action-bar button {
        width: 100% !important;
    }
}

html[data-theme] body.request-workflow-shell.picker-open .picker-modal,
body.request-workflow-shell.picker-open .picker-modal {
    z-index: 2000 !important;
}

html[data-theme] body.request-workflow-shell.picker-open .picker-modal-backdrop,
body.request-workflow-shell.picker-open .picker-modal-backdrop {
    z-index: 0 !important;
    background: rgba(7, 19, 37, 0.78) !important;
}

html[data-theme] body.request-workflow-shell.picker-open .picker-modal-panel,
body.request-workflow-shell.picker-open .picker-modal-panel {
    z-index: 1 !important;
}

/* ==================================================
Stock Opname Mobile UX Refresh
Scoped only for stock opname page
================================================== */

@media (max-width: 760px) {
    html[data-theme] body.stock-opname-page-shell .page-content.page-content-bleed,
    html[data-theme] body.stock-opname-page-shell .wms-page-stack.stock-opname-shell.so-cockpit-page.so-mobile-friendly,
    body.stock-opname-page-shell .page-content.page-content-bleed,
    body.stock-opname-page-shell .wms-page-stack.stock-opname-shell.so-cockpit-page.so-mobile-friendly {
        height: auto !important;
        overflow: visible !important;
    }

    html[data-theme] body.stock-opname-page-shell .wms-page-stack.stock-opname-shell.so-cockpit-page.so-mobile-friendly,
    body.stock-opname-page-shell .wms-page-stack.stock-opname-shell.so-cockpit-page.so-mobile-friendly {
        gap: 12px !important;
        padding-bottom: 20px !important;
    }

    html[data-theme] body.stock-opname-page-shell .so-compact-header,
    body.stock-opname-page-shell .so-compact-header {
        align-items: flex-start !important;
        flex-direction: column !important;
        gap: 10px !important;
        min-height: 0 !important;
    }

    html[data-theme] body.stock-opname-page-shell .so-header-actions,
    body.stock-opname-page-shell .so-header-actions {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    html[data-theme] body.stock-opname-page-shell .so-header-actions :is(button, .btn, .btn-link, a),
    body.stock-opname-page-shell .so-header-actions :is(button, .btn, .btn-link, a) {
        width: 100% !important;
        justify-content: center !important;
        text-align: center !important;
    }

    html[data-theme] body.stock-opname-page-shell .summary.so-status-strip,
    body.stock-opname-page-shell .summary.so-status-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    html[data-theme] body.stock-opname-page-shell .summary.so-status-strip .card-mini:first-child,
    body.stock-opname-page-shell .summary.so-status-strip .card-mini:first-child {
        grid-column: 1 / -1 !important;
    }

    html[data-theme] body.stock-opname-page-shell .summary.so-status-strip .card-mini,
    body.stock-opname-page-shell .summary.so-status-strip .card-mini {
        min-height: 58px !important;
        padding: 10px 12px !important;
    }

    html[data-theme] body.stock-opname-page-shell .summary.so-status-strip .card-mini small,
    body.stock-opname-page-shell .summary.so-status-strip .card-mini small {
        display: block !important;
        margin-top: 4px !important;
        font-size: 10px !important;
        line-height: 1.2 !important;
    }

    html[data-theme] body.stock-opname-page-shell .so-control-toolbar,
    body.stock-opname-page-shell .so-control-toolbar {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        padding: 12px !important;
    }

    html[data-theme] body.stock-opname-page-shell .so-toolbar-field,
    body.stock-opname-page-shell .so-toolbar-field {
        gap: 6px !important;
    }

    html[data-theme] body.stock-opname-page-shell .so-toolbar-field > span,
    body.stock-opname-page-shell .so-toolbar-field > span {
        font-size: 11px !important;
    }

    html[data-theme] body.stock-opname-page-shell .so-toolbar-search,
    body.stock-opname-page-shell .so-toolbar-search {
        order: -1 !important;
    }

    html[data-theme] body.stock-opname-page-shell .so-control-chip,
    body.stock-opname-page-shell .so-control-chip {
        min-height: 38px !important;
        justify-content: space-between !important;
        width: 100% !important;
        border-radius: 10px !important;
        padding: 8px 10px !important;
    }

    html[data-theme] body.stock-opname-page-shell .so-control-toolbar :is(input, select, button),
    body.stock-opname-page-shell .so-control-toolbar :is(input, select, button) {
        min-height: 40px !important;
        height: 40px !important;
        font-size: 14px !important;
    }

    html[data-theme] body.stock-opname-page-shell .so-control-toolbar > button[type="submit"],
    body.stock-opname-page-shell .so-control-toolbar > button[type="submit"] {
        width: 100% !important;
    }

    html[data-theme] body.stock-opname-page-shell .so-scope-note,
    body.stock-opname-page-shell .so-scope-note {
        margin-top: -4px !important;
        font-size: 11px !important;
        line-height: 1.35 !important;
    }

    html[data-theme] body.stock-opname-page-shell .so-flow-note > summary,
    body.stock-opname-page-shell .so-flow-note > summary {
        min-height: 38px !important;
        padding: 8px 12px !important;
        font-size: 13px !important;
    }

    html[data-theme] body.stock-opname-page-shell .so-work-area,
    body.stock-opname-page-shell .so-work-area {
        min-height: 0 !important;
        padding: 12px !important;
        overflow: visible !important;
    }

    html[data-theme] body.stock-opname-page-shell .so-work-head h2,
    body.stock-opname-page-shell .so-work-head h2 {
        font-size: 18px !important;
    }

    html[data-theme] body.stock-opname-page-shell .so-work-head p,
    body.stock-opname-page-shell .so-work-head p {
        display: block !important;
        margin-top: 4px !important;
        font-size: 12px !important;
        line-height: 1.35 !important;
    }

    html[data-theme] body.stock-opname-page-shell .so-table-wrap,
    body.stock-opname-page-shell .so-table-wrap {
        overflow: visible !important;
    }

    html[data-theme] body.stock-opname-page-shell .stock-opname-table.so-table,
    html[data-theme] body.stock-opname-page-shell .stock-opname-table.so-table thead,
    html[data-theme] body.stock-opname-page-shell .stock-opname-table.so-table tbody,
    body.stock-opname-page-shell .stock-opname-table.so-table,
    body.stock-opname-page-shell .stock-opname-table.so-table thead,
    body.stock-opname-page-shell .stock-opname-table.so-table tbody {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    html[data-theme] body.stock-opname-page-shell .stock-opname-table.so-table thead,
    body.stock-opname-page-shell .stock-opname-table.so-table thead {
        display: none !important;
    }

    html[data-theme] body.stock-opname-page-shell .stock-opname-table.so-table tbody tr[data-row="item"],
    body.stock-opname-page-shell .stock-opname-table.so-table tbody tr[data-row="item"] {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px 12px !important;
        width: 100% !important;
        height: auto !important;
        margin-bottom: 12px !important;
        padding: 12px !important;
        border: 1px solid rgba(203, 213, 225, 0.9) !important;
        border-radius: 14px !important;
        background: #fff !important;
        box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06) !important;
    }

    html[data-theme] body.stock-opname-page-shell .stock-opname-table.so-table tbody tr[data-row="item"] > td,
    body.stock-opname-page-shell .stock-opname-table.so-table tbody tr[data-row="item"] > td {
        display: grid !important;
        gap: 6px !important;
        width: 100% !important;
        min-width: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        text-align: left !important;
        vertical-align: top !important;
    }

    html[data-theme] body.stock-opname-page-shell .stock-opname-table.so-table tbody tr[data-row="item"] > td::before,
    body.stock-opname-page-shell .stock-opname-table.so-table tbody tr[data-row="item"] > td::before {
        content: attr(data-label) !important;
        font-size: 10px !important;
        line-height: 1.1 !important;
        font-weight: 800 !important;
        letter-spacing: 0.06em !important;
        text-transform: uppercase !important;
        color: #64748b !important;
    }

    html[data-theme] body.stock-opname-page-shell .stock-opname-table.so-table tbody tr[data-row="item"] > td:nth-child(1),
    html[data-theme] body.stock-opname-page-shell .stock-opname-table.so-table tbody tr[data-row="item"] > td:nth-child(3),
    body.stock-opname-page-shell .stock-opname-table.so-table tbody tr[data-row="item"] > td:nth-child(1),
    body.stock-opname-page-shell .stock-opname-table.so-table tbody tr[data-row="item"] > td:nth-child(3) {
        align-content: start !important;
    }

    html[data-theme] body.stock-opname-page-shell .stock-opname-table.so-table tbody tr[data-row="item"] > td:nth-child(2),
    body.stock-opname-page-shell .stock-opname-table.so-table tbody tr[data-row="item"] > td:nth-child(2) {
        grid-column: 1 / -1 !important;
        padding-bottom: 4px !important;
        border-bottom: 1px solid rgba(226, 232, 240, 0.9) !important;
    }

    html[data-theme] body.stock-opname-page-shell .stock-opname-table.so-table tbody tr[data-row="item"] > td:nth-child(2)::before,
    body.stock-opname-page-shell .stock-opname-table.so-table tbody tr[data-row="item"] > td:nth-child(2)::before {
        display: none !important;
    }

    html[data-theme] body.stock-opname-page-shell .stock-opname-table.so-table .mono[data-label="SKU"],
    body.stock-opname-page-shell .stock-opname-table.so-table .mono[data-label="SKU"] {
        padding: 8px 10px !important;
        border-radius: 10px !important;
        background: #f8fafc !important;
        border: 1px solid rgba(226, 232, 240, 0.9) !important;
        font-size: 12px !important;
        line-height: 1.2 !important;
    }

    html[data-theme] body.stock-opname-page-shell .stock-opname-table.so-table .stock-opname-product-cell strong,
    body.stock-opname-page-shell .stock-opname-table.so-table .stock-opname-product-cell strong {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        font-size: 14px !important;
        line-height: 1.35 !important;
    }

    html[data-theme] body.stock-opname-page-shell .stock-opname-table.so-table .stock-opname-product-cell small,
    body.stock-opname-page-shell .stock-opname-table.so-table .stock-opname-product-cell small {
        display: block !important;
        font-size: 11px !important;
        line-height: 1.35 !important;
    }

    html[data-theme] body.stock-opname-page-shell .stock-opname-table.so-table :is(.stock-opname-system-cell, .stock-opname-diff-cell),
    body.stock-opname-page-shell .stock-opname-table.so-table :is(.stock-opname-system-cell, .stock-opname-diff-cell) {
        padding: 9px 10px !important;
        border-radius: 10px !important;
        background: #f8fafc !important;
        border: 1px solid rgba(226, 232, 240, 0.9) !important;
        text-align: left !important;
    }

    html[data-theme] body.stock-opname-page-shell .stock-opname-table.so-table .stock-opname-input-cell,
    body.stock-opname-page-shell .stock-opname-table.so-table .stock-opname-input-cell {
        width: 100% !important;
    }

    html[data-theme] body.stock-opname-page-shell .stock-opname-table.so-table .stock-opname-input-cell input,
    body.stock-opname-page-shell .stock-opname-table.so-table .stock-opname-input-cell input {
        width: 100% !important;
        height: 42px !important;
        min-height: 42px !important;
        font-size: 15px !important;
        padding: 8px 10px !important;
        border-radius: 10px !important;
    }

    html[data-theme] body.stock-opname-page-shell .stock-opname-table.so-table .stock-opname-diff-cell[data-state="up"],
    html[data-theme] body.stock-opname-page-shell .stock-opname-table.so-table .stock-opname-diff-cell[data-state="down"],
    body.stock-opname-page-shell .stock-opname-table.so-table .stock-opname-diff-cell[data-state="up"],
    body.stock-opname-page-shell .stock-opname-table.so-table .stock-opname-diff-cell[data-state="down"] {
        font-weight: 800 !important;
    }

    html[data-theme] body.stock-opname-page-shell .stock-opname-table.so-table .so-empty-row,
    body.stock-opname-page-shell .stock-opname-table.so-table .so-empty-row {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
    }

    html[data-theme] body.stock-opname-page-shell .stock-opname-table.so-table .so-empty-row td,
    body.stock-opname-page-shell .stock-opname-table.so-table .so-empty-row td {
        display: block !important;
        padding: 18px 14px !important;
    }

    html[data-theme] body.stock-opname-page-shell .so-action-bar,
    body.stock-opname-page-shell .so-action-bar {
        position: sticky !important;
        bottom: 0 !important;
        align-items: stretch !important;
        flex-direction: column !important;
        gap: 10px !important;
        padding: 12px !important;
        border-radius: 14px 14px 0 0 !important;
        box-shadow: 0 -12px 24px rgba(15, 23, 42, 0.08) !important;
    }

    html[data-theme] body.stock-opname-page-shell .so-action-status,
    body.stock-opname-page-shell .so-action-status {
        width: 100% !important;
    }

    html[data-theme] body.stock-opname-page-shell .so-action-status strong,
    body.stock-opname-page-shell .so-action-status strong {
        font-size: 14px !important;
    }

    html[data-theme] body.stock-opname-page-shell .so-action-status small,
    body.stock-opname-page-shell .so-action-status small {
        font-size: 11px !important;
        line-height: 1.35 !important;
    }

    html[data-theme] body.stock-opname-page-shell .so-action-controls,
    body.stock-opname-page-shell .so-action-controls {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    html[data-theme] body.stock-opname-page-shell .so-pagination,
    body.stock-opname-page-shell .so-pagination {
        grid-column: 1 / -1 !important;
        display: grid !important;
        grid-template-columns: 42px minmax(0, 1fr) 42px !important;
        gap: 8px !important;
        align-items: center !important;
        width: 100% !important;
    }

    html[data-theme] body.stock-opname-page-shell .so-pagination button,
    body.stock-opname-page-shell .so-pagination button {
        width: 42px !important;
        min-width: 42px !important;
        height: 42px !important;
        min-height: 42px !important;
    }

    html[data-theme] body.stock-opname-page-shell #pageInfo,
    body.stock-opname-page-shell #pageInfo {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 42px !important;
        width: 100% !important;
    }

    html[data-theme] body.stock-opname-page-shell .so-action-bar :is(button, .btn, .btn-link, a),
    body.stock-opname-page-shell .so-action-bar :is(button, .btn, .btn-link, a) {
        width: 100% !important;
        min-height: 42px !important;
        height: 42px !important;
    }

    html[data-theme] body.stock-opname-page-shell .so-save-btn,
    body.stock-opname-page-shell .so-save-btn {
        grid-column: 1 / -1 !important;
        min-width: 0 !important;
    }
}

/* ==================================================
Request Compact Target + Picker Layer Guard
Scoped only for request pages
================================================== */

:root {
    --wms-z-sidebar: 100;
    --wms-z-topbar: 200;
    --wms-z-dropdown: 1000;
    --wms-z-modal-backdrop: 9000;
    --wms-z-modal: 9010;
    --wms-z-toast: 9500;
}

body.request-workflow-shell.modal-open {
    overflow: hidden !important;
}

html[data-theme] body.request-workflow-shell .request-compact-target,
body.request-workflow-shell .request-compact-target {
    --req-page-max: 1280px;
    --req-gap: 10px;
    --req-panel-gap: 12px;
    --req-radius: 12px;
    --req-input-h: 36px;
    --req-label-h: 16px;
    --req-helper-h: 28px;
    --req-status-h: 64px;
    --req-empty-h: 92px;
    --req-blue: #071f3f;
    --req-muted: #64748b;
    max-width: var(--req-page-max) !important;
    margin: 0 auto !important;
    padding: 18px 20px 20px !important;
    box-sizing: border-box !important;
}

html[data-theme] body.request-workflow-shell .request-compact-target,
html[data-theme] body.request-workflow-shell .request-compact-target *,
body.request-workflow-shell .request-compact-target,
body.request-workflow-shell .request-compact-target * {
    box-sizing: border-box !important;
}

html[data-theme] body.request-workflow-shell .internal-module-nav,
html[data-theme] body.request-workflow-shell .clean-module-sidebar,
body.request-workflow-shell .internal-module-nav,
body.request-workflow-shell .clean-module-sidebar {
    z-index: var(--wms-z-sidebar) !important;
}

html[data-theme] body.request-workflow-shell .internal-app-topbar.internal-shell-header,
body.request-workflow-shell .internal-app-topbar.internal-shell-header {
    z-index: var(--wms-z-topbar) !important;
}

html[data-theme] body.request-workflow-shell .request-compact-target .request-compact-header,
body.request-workflow-shell .request-compact-target .request-compact-header {
    min-height: 58px !important;
    max-height: 70px !important;
    margin-bottom: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
}

html[data-theme] body.request-workflow-shell .request-compact-target h1,
body.request-workflow-shell .request-compact-target h1 {
    font-size: 26px !important;
    line-height: 1.05 !important;
    margin: 0 !important;
    letter-spacing: -0.03em !important;
}

html[data-theme] body.request-workflow-shell .request-compact-target .request-cockpit,
body.request-workflow-shell .request-compact-target .request-cockpit {
    grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.8fr) !important;
    gap: 12px !important;
}

html[data-theme] body.request-workflow-shell .request-compact-target .request-add-card .internal-section-head p,
body.request-workflow-shell .request-compact-target .request-add-card .internal-section-head p {
    display: none !important;
}

html[data-theme] body.request-workflow-shell .request-compact-target .request-form-panel,
html[data-theme] body.request-workflow-shell .request-compact-target .request-queue-panel,
body.request-workflow-shell .request-compact-target .request-form-panel,
body.request-workflow-shell .request-compact-target .request-queue-panel {
    min-width: 0 !important;
}

html[data-theme] body.request-workflow-shell .request-gudang-compact-target .request-add-row,
html[data-theme] body.request-workflow-shell .request-gudang-compact-target .ops-entry-grid.request-entry-grid.request-gudang-entry-grid.request-add-row,
body.request-workflow-shell .request-gudang-compact-target .ops-entry-grid.request-entry-grid.request-gudang-entry-grid.request-add-row,
body.request-workflow-shell .request-gudang-compact-target .request-add-row {
    grid-template-columns: minmax(0, 1fr) 96px 88px 88px !important;
    gap: 10px !important;
}

html[data-theme] body.request-workflow-shell .request-owner-compact-target .request-add-row,
html[data-theme] body.request-workflow-shell .request-owner-compact-target .ops-entry-grid.outbound-entry-grid.request-owner-entry-grid.request-add-row,
body.request-workflow-shell .request-owner-compact-target .ops-entry-grid.outbound-entry-grid.request-owner-entry-grid.request-add-row,
body.request-workflow-shell .request-owner-compact-target .request-add-row {
    grid-template-columns: minmax(0, 1fr) 90px 90px !important;
    gap: 8px !important;
}

html[data-theme] body.request-workflow-shell .request-owner-compact-target .request-note-field,
body.request-workflow-shell .request-owner-compact-target .request-note-field {
    grid-column: 1 / span 2 !important;
}

html[data-theme] body.request-workflow-shell .request-owner-compact-target .request-action-field,
body.request-workflow-shell .request-owner-compact-target .request-action-field {
    grid-column: 3 !important;
}

html[data-theme] body.request-workflow-shell .request-compact-target .request-field,
body.request-workflow-shell .request-compact-target .request-field {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: visible !important;
}

html[data-theme] body.request-workflow-shell .request-compact-target .request-picker-line,
body.request-workflow-shell .request-compact-target .request-picker-line {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 42px !important;
    gap: 8px !important;
    align-items: center !important;
    height: var(--req-input-h) !important;
    width: 100% !important;
}

html[data-theme] body.request-workflow-shell .request-compact-target .request-picker-button,
body.request-workflow-shell .request-compact-target .request-picker-button {
    width: 42px !important;
    height: var(--req-input-h) !important;
    min-width: 42px !important;
    max-height: var(--req-input-h) !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important;
}

html[data-theme] body.request-workflow-shell .request-compact-target .request-stock-field .request-stock-input,
html[data-theme] body.request-workflow-shell .request-compact-target .request-stock-field .ops-stock-card,
body.request-workflow-shell .request-compact-target .request-stock-field .request-stock-input,
body.request-workflow-shell .request-compact-target .request-stock-field .ops-stock-card {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    min-height: var(--req-input-h) !important;
    height: var(--req-input-h) !important;
    padding: 0 12px !important;
    border-radius: 8px !important;
}

html[data-theme] body.request-workflow-shell .request-compact-target .request-add-button,
body.request-workflow-shell .request-compact-target .request-add-button {
    width: 100% !important;
    min-width: 0 !important;
    height: var(--req-input-h) !important;
    max-height: var(--req-input-h) !important;
    padding: 0 10px !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    border-radius: 8px !important;
    white-space: nowrap !important;
}

html[data-theme] body.request-workflow-shell .request-compact-target .ops-queue-box,
html[data-theme] body.request-workflow-shell .request-compact-target .request-queue-table-wrap,
body.request-workflow-shell .request-compact-target .ops-queue-box,
body.request-workflow-shell .request-compact-target .request-queue-table-wrap {
    max-height: 170px !important;
}

html[data-theme] body.request-workflow-shell .picker-modal[hidden],
body.request-workflow-shell .picker-modal[hidden] {
    display: none !important;
}

html[data-theme] body.request-workflow-shell .picker-modal,
body.request-workflow-shell .picker-modal {
    position: fixed !important;
    inset: 0 !important;
    z-index: auto !important;
    display: block !important;
    padding: 0 !important;
    overflow: visible !important;
    pointer-events: none !important;
}

html[data-theme] body.request-workflow-shell .picker-modal-backdrop,
body.request-workflow-shell .picker-modal-backdrop {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: var(--wms-z-modal-backdrop) !important;
    background: rgba(7, 17, 31, 0.72) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    pointer-events: auto !important;
}

html[data-theme] body.request-workflow-shell .picker-modal-panel,
body.request-workflow-shell .picker-modal-panel {
    position: fixed !important;
    z-index: var(--wms-z-modal) !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: min(1120px, calc(100vw - 48px)) !important;
    max-width: calc(100vw - 48px) !important;
    max-height: calc(100vh - 72px) !important;
    border-radius: 14px !important;
    overflow: auto !important;
    pointer-events: auto !important;
}

html[data-theme] body.request-workflow-shell.picker-open .picker-modal,
body.request-workflow-shell.picker-open .picker-modal {
    z-index: auto !important;
}

html[data-theme] body.request-workflow-shell.picker-open .picker-modal-backdrop,
body.request-workflow-shell.picker-open .picker-modal-backdrop {
    z-index: var(--wms-z-modal-backdrop) !important;
}

html[data-theme] body.request-workflow-shell.picker-open .picker-modal-panel,
body.request-workflow-shell.picker-open .picker-modal-panel {
    z-index: var(--wms-z-modal) !important;
}

@media (max-width: 900px) {
    html[data-theme] body.request-workflow-shell .request-compact-target .request-cockpit,
    body.request-workflow-shell .request-compact-target .request-cockpit {
        grid-template-columns: 1fr !important;
    }

    html[data-theme] body.request-workflow-shell .request-owner-compact-target .request-add-row,
    body.request-workflow-shell .request-owner-compact-target .request-add-row {
        grid-template-columns: 1fr 96px 96px !important;
    }

    html[data-theme] body.request-workflow-shell .request-owner-compact-target .request-note-field,
    body.request-workflow-shell .request-owner-compact-target .request-note-field {
        grid-column: 1 / -1 !important;
    }

    html[data-theme] body.request-workflow-shell .request-owner-compact-target .request-action-field,
    body.request-workflow-shell .request-owner-compact-target .request-action-field {
        grid-column: 1 / -1 !important;
    }
}

@media (max-width: 640px) {
    html[data-theme] body.request-workflow-shell .request-gudang-compact-target .request-add-row,
    html[data-theme] body.request-workflow-shell .request-gudang-compact-target .ops-entry-grid.request-entry-grid.request-gudang-entry-grid.request-add-row,
    html[data-theme] body.request-workflow-shell .request-owner-compact-target .request-add-row,
    html[data-theme] body.request-workflow-shell .request-owner-compact-target .ops-entry-grid.outbound-entry-grid.request-owner-entry-grid.request-add-row,
    body.request-workflow-shell .request-gudang-compact-target .ops-entry-grid.request-entry-grid.request-gudang-entry-grid.request-add-row,
    body.request-workflow-shell .request-gudang-compact-target .request-add-row,
    body.request-workflow-shell .request-owner-compact-target .ops-entry-grid.outbound-entry-grid.request-owner-entry-grid.request-add-row,
    body.request-workflow-shell .request-owner-compact-target .request-add-row {
        grid-template-columns: 1fr !important;
    }

    html[data-theme] body.request-workflow-shell .request-compact-target .request-action-field,
    body.request-workflow-shell .request-compact-target .request-action-field {
        grid-column: 1 / -1 !important;
        padding-top: 0 !important;
    }

    html[data-theme] body.request-workflow-shell .request-compact-target .request-action-bar button,
    html[data-theme] body.request-workflow-shell .request-compact-target .request-owner-action-bar button,
    body.request-workflow-shell .request-compact-target .request-action-bar button,
    body.request-workflow-shell .request-compact-target .request-owner-action-bar button {
        width: 100% !important;
    }
}

/* ==================================================
Stock Opname Mobile Card Hierarchy Pass
Scoped only for stock opname page
=================================================== */

@media (max-width: 760px) {
    html[data-theme] body.stock-opname-page-shell .so-mobile-friendly .stock-opname-table.so-table tbody tr[data-row="item"],
    body.stock-opname-page-shell .so-mobile-friendly .stock-opname-table.so-table tbody tr[data-row="item"] {
        gap: 10px !important;
        padding: 14px 12px !important;
    }

    html[data-theme] body.stock-opname-page-shell .so-mobile-friendly .stock-opname-table.so-table tbody tr[data-row="item"] > td,
    body.stock-opname-page-shell .so-mobile-friendly .stock-opname-table.so-table tbody tr[data-row="item"] > td {
        min-height: 0 !important;
        padding: 8px 10px !important;
        border-radius: 12px !important;
    }

    html[data-theme] body.stock-opname-page-shell .so-mobile-friendly .stock-opname-table.so-table tbody tr[data-row="item"] > td::before,
    body.stock-opname-page-shell .so-mobile-friendly .stock-opname-table.so-table tbody tr[data-row="item"] > td::before {
        margin-bottom: 6px !important;
        font-size: 10px !important;
        letter-spacing: 0.08em !important;
    }

    html[data-theme] body.stock-opname-page-shell .so-mobile-friendly .stock-opname-table.so-table tbody tr[data-row="item"] > td.mono,
    body.stock-opname-page-shell .so-mobile-friendly .stock-opname-table.so-table tbody tr[data-row="item"] > td.mono {
        font-size: 12px !important;
    }

    html[data-theme] body.stock-opname-page-shell .so-mobile-friendly .stock-opname-table.so-table tbody tr[data-row="item"] > td.stock-opname-product-cell,
    body.stock-opname-page-shell .so-mobile-friendly .stock-opname-table.so-table tbody tr[data-row="item"] > td.stock-opname-product-cell {
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    html[data-theme] body.stock-opname-page-shell .so-mobile-friendly .stock-opname-table.so-table tbody tr[data-row="item"] > td.stock-opname-product-cell strong,
    body.stock-opname-page-shell .so-mobile-friendly .stock-opname-table.so-table tbody tr[data-row="item"] > td.stock-opname-product-cell strong {
        display: block !important;
        font-size: 15px !important;
        line-height: 1.35 !important;
        color: #0f2747 !important;
    }

    html[data-theme] body.stock-opname-page-shell .so-mobile-friendly .stock-opname-table.so-table tbody tr[data-row="item"] > td.stock-opname-product-cell > small:not(.helper-text),
    body.stock-opname-page-shell .so-mobile-friendly .stock-opname-table.so-table tbody tr[data-row="item"] > td.stock-opname-product-cell > small:not(.helper-text) {
        display: none !important;
    }

    html[data-theme] body.stock-opname-page-shell .so-mobile-friendly .stock-opname-table.so-table tbody tr[data-row="item"] > td.stock-opname-product-cell .helper-text,
    body.stock-opname-page-shell .so-mobile-friendly .stock-opname-table.so-table tbody tr[data-row="item"] > td.stock-opname-product-cell .helper-text {
        display: block !important;
        margin-top: 6px !important;
        padding: 8px 10px !important;
        border-radius: 10px !important;
        background: rgba(227, 236, 247, 0.72) !important;
        font-size: 11px !important;
        line-height: 1.45 !important;
    }

    html[data-theme] body.stock-opname-page-shell .so-mobile-friendly[data-dual-area="0"] .stock-opname-table.so-table tbody tr[data-row="item"],
    body.stock-opname-page-shell .so-mobile-friendly[data-dual-area="0"] .stock-opname-table.so-table tbody tr[data-row="item"] {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-template-areas:
            "product product"
            "sku variant"
            "system input"
            "diff diff" !important;
    }

    html[data-theme] body.stock-opname-page-shell .so-mobile-friendly[data-dual-area="0"] .stock-opname-table.so-table tbody tr[data-row="item"] > td:nth-child(1),
    body.stock-opname-page-shell .so-mobile-friendly[data-dual-area="0"] .stock-opname-table.so-table tbody tr[data-row="item"] > td:nth-child(1) {
        grid-area: sku !important;
    }

    html[data-theme] body.stock-opname-page-shell .so-mobile-friendly[data-dual-area="0"] .stock-opname-table.so-table tbody tr[data-row="item"] > td:nth-child(2),
    body.stock-opname-page-shell .so-mobile-friendly[data-dual-area="0"] .stock-opname-table.so-table tbody tr[data-row="item"] > td:nth-child(2) {
        grid-area: product !important;
    }

    html[data-theme] body.stock-opname-page-shell .so-mobile-friendly[data-dual-area="0"] .stock-opname-table.so-table tbody tr[data-row="item"] > td:nth-child(3),
    body.stock-opname-page-shell .so-mobile-friendly[data-dual-area="0"] .stock-opname-table.so-table tbody tr[data-row="item"] > td:nth-child(3) {
        grid-area: variant !important;
    }

    html[data-theme] body.stock-opname-page-shell .so-mobile-friendly[data-dual-area="0"] .stock-opname-table.so-table tbody tr[data-row="item"] > td:nth-child(4),
    body.stock-opname-page-shell .so-mobile-friendly[data-dual-area="0"] .stock-opname-table.so-table tbody tr[data-row="item"] > td:nth-child(4) {
        grid-area: system !important;
    }

    html[data-theme] body.stock-opname-page-shell .so-mobile-friendly[data-dual-area="0"] .stock-opname-table.so-table tbody tr[data-row="item"] > td:nth-child(5),
    body.stock-opname-page-shell .so-mobile-friendly[data-dual-area="0"] .stock-opname-table.so-table tbody tr[data-row="item"] > td:nth-child(5) {
        grid-area: input !important;
    }

    html[data-theme] body.stock-opname-page-shell .so-mobile-friendly[data-dual-area="0"] .stock-opname-table.so-table tbody tr[data-row="item"] > td:nth-child(6),
    body.stock-opname-page-shell .so-mobile-friendly[data-dual-area="0"] .stock-opname-table.so-table tbody tr[data-row="item"] > td:nth-child(6) {
        grid-area: diff !important;
    }

    html[data-theme] body.stock-opname-page-shell .so-mobile-friendly[data-dual-area="1"] .stock-opname-table.so-table tbody tr[data-row="item"],
    body.stock-opname-page-shell .so-mobile-friendly[data-dual-area="1"] .stock-opname-table.so-table tbody tr[data-row="item"] {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-template-areas:
            "product product"
            "sku variant"
            "display-system gudang-system"
            "display-input gudang-input"
            "display-diff gudang-diff" !important;
    }

    html[data-theme] body.stock-opname-page-shell .so-mobile-friendly[data-dual-area="1"] .stock-opname-table.so-table tbody tr[data-row="item"] > td:nth-child(1),
    body.stock-opname-page-shell .so-mobile-friendly[data-dual-area="1"] .stock-opname-table.so-table tbody tr[data-row="item"] > td:nth-child(1) {
        grid-area: sku !important;
    }

    html[data-theme] body.stock-opname-page-shell .so-mobile-friendly[data-dual-area="1"] .stock-opname-table.so-table tbody tr[data-row="item"] > td:nth-child(2),
    body.stock-opname-page-shell .so-mobile-friendly[data-dual-area="1"] .stock-opname-table.so-table tbody tr[data-row="item"] > td:nth-child(2) {
        grid-area: product !important;
    }

    html[data-theme] body.stock-opname-page-shell .so-mobile-friendly[data-dual-area="1"] .stock-opname-table.so-table tbody tr[data-row="item"] > td:nth-child(3),
    body.stock-opname-page-shell .so-mobile-friendly[data-dual-area="1"] .stock-opname-table.so-table tbody tr[data-row="item"] > td:nth-child(3) {
        grid-area: variant !important;
    }

    html[data-theme] body.stock-opname-page-shell .so-mobile-friendly[data-dual-area="1"] .stock-opname-table.so-table tbody tr[data-row="item"] > td:nth-child(4),
    body.stock-opname-page-shell .so-mobile-friendly[data-dual-area="1"] .stock-opname-table.so-table tbody tr[data-row="item"] > td:nth-child(4) {
        grid-area: display-system !important;
    }

    html[data-theme] body.stock-opname-page-shell .so-mobile-friendly[data-dual-area="1"] .stock-opname-table.so-table tbody tr[data-row="item"] > td:nth-child(5),
    body.stock-opname-page-shell .so-mobile-friendly[data-dual-area="1"] .stock-opname-table.so-table tbody tr[data-row="item"] > td:nth-child(5) {
        grid-area: display-input !important;
    }

    html[data-theme] body.stock-opname-page-shell .so-mobile-friendly[data-dual-area="1"] .stock-opname-table.so-table tbody tr[data-row="item"] > td:nth-child(6),
    body.stock-opname-page-shell .so-mobile-friendly[data-dual-area="1"] .stock-opname-table.so-table tbody tr[data-row="item"] > td:nth-child(6) {
        grid-area: display-diff !important;
    }

    html[data-theme] body.stock-opname-page-shell .so-mobile-friendly[data-dual-area="1"] .stock-opname-table.so-table tbody tr[data-row="item"] > td:nth-child(7),
    body.stock-opname-page-shell .so-mobile-friendly[data-dual-area="1"] .stock-opname-table.so-table tbody tr[data-row="item"] > td:nth-child(7) {
        grid-area: gudang-system !important;
    }

    html[data-theme] body.stock-opname-page-shell .so-mobile-friendly[data-dual-area="1"] .stock-opname-table.so-table tbody tr[data-row="item"] > td:nth-child(8),
    body.stock-opname-page-shell .so-mobile-friendly[data-dual-area="1"] .stock-opname-table.so-table tbody tr[data-row="item"] > td:nth-child(8) {
        grid-area: gudang-input !important;
    }

    html[data-theme] body.stock-opname-page-shell .so-mobile-friendly[data-dual-area="1"] .stock-opname-table.so-table tbody tr[data-row="item"] > td:nth-child(9),
    body.stock-opname-page-shell .so-mobile-friendly[data-dual-area="1"] .stock-opname-table.so-table tbody tr[data-row="item"] > td:nth-child(9) {
        grid-area: gudang-diff !important;
    }

    html[data-theme] body.stock-opname-page-shell .so-mobile-friendly .stock-opname-table.so-table .stock-opname-system-cell,
    html[data-theme] body.stock-opname-page-shell .so-mobile-friendly .stock-opname-table.so-table .stock-opname-diff-cell,
    body.stock-opname-page-shell .so-mobile-friendly .stock-opname-table.so-table .stock-opname-system-cell,
    body.stock-opname-page-shell .so-mobile-friendly .stock-opname-table.so-table .stock-opname-diff-cell {
        background: rgba(243, 247, 252, 0.96) !important;
    }

    html[data-theme] body.stock-opname-page-shell .so-mobile-friendly .stock-opname-table.so-table .stock-opname-input-cell,
    body.stock-opname-page-shell .so-mobile-friendly .stock-opname-table.so-table .stock-opname-input-cell {
        background: rgba(232, 242, 255, 0.72) !important;
        border-color: rgba(84, 149, 229, 0.24) !important;
    }

    html[data-theme] body.stock-opname-page-shell .so-mobile-friendly .stock-opname-table.so-table .stock-opname-input-cell input,
    body.stock-opname-page-shell .so-mobile-friendly .stock-opname-table.so-table .stock-opname-input-cell input {
        min-height: 46px !important;
        height: 46px !important;
        border-width: 2px !important;
        font-size: 22px !important;
        font-weight: 800 !important;
        text-align: center !important;
        background: #ffffff !important;
    }

    html[data-theme] body.stock-opname-page-shell .so-mobile-friendly .stock-opname-table.so-table .stock-opname-input-cell::before,
    body.stock-opname-page-shell .so-mobile-friendly .stock-opname-table.so-table .stock-opname-input-cell::before {
        color: #245aa5 !important;
    }

    html[data-theme] body.stock-opname-page-shell .so-mobile-friendly .stock-opname-table.so-table .stock-opname-diff-cell[data-state="changed"],
    body.stock-opname-page-shell .so-mobile-friendly .stock-opname-table.so-table .stock-opname-diff-cell[data-state="changed"] {
        background: rgba(255, 236, 201, 0.92) !important;
        color: #8f4f00 !important;
    }

    html[data-theme] body.stock-opname-page-shell .so-mobile-friendly .stock-opname-table.so-table .stock-opname-diff-cell[data-state="negative"],
    body.stock-opname-page-shell .so-mobile-friendly .stock-opname-table.so-table .stock-opname-diff-cell[data-state="negative"] {
        background: rgba(255, 228, 230, 0.96) !important;
        color: #b42318 !important;
    }

    html[data-theme] body.stock-opname-page-shell .so-mobile-friendly .so-action-status strong,
    body.stock-opname-page-shell .so-mobile-friendly .so-action-status strong {
        font-size: 22px !important;
        line-height: 1.1 !important;
    }

    html[data-theme] body.stock-opname-page-shell .so-mobile-friendly .so-action-status small,
    body.stock-opname-page-shell .so-mobile-friendly .so-action-status small {
        font-size: 12px !important;
        line-height: 1.45 !important;
    }
}

@media (max-width: 760px) {
    html[data-theme] body.stock-opname-page-shell .so-mobile-friendly .stock-opname-table.so-table tbody tr[data-row="item"],
    body.stock-opname-page-shell .so-mobile-friendly .stock-opname-table.so-table tbody tr[data-row="item"] {
        gap: 8px !important;
        padding: 10px !important;
    }

    html[data-theme] body.stock-opname-page-shell .so-mobile-friendly .stock-opname-table.so-table tbody tr[data-row="item"] > td,
    body.stock-opname-page-shell .so-mobile-friendly .stock-opname-table.so-table tbody tr[data-row="item"] > td {
        padding: 7px 8px !important;
        border-radius: 10px !important;
        resize: none !important;
    }

    html[data-theme] body.stock-opname-page-shell .so-mobile-friendly .stock-opname-table.so-table .stock-opname-input-cell input,
    body.stock-opname-page-shell .so-mobile-friendly .stock-opname-table.so-table .stock-opname-input-cell input {
        min-height: 40px !important;
        height: 40px !important;
        max-height: 40px !important;
        font-size: 18px !important;
        resize: none !important;
    }

    html[data-theme] body.stock-opname-page-shell .so-save-bar.so-action-bar,
    body.stock-opname-page-shell .so-save-bar.so-action-bar {
        padding: 10px !important;
        border-radius: 12px !important;
    }
}

/* ==================================================
HRIS Report Content Recap
Compact content recap for HR daily/live reports
=================================================== */

html[data-theme] body.internal-module-shell .hris-clean-shell .hris-report-content-recap-panel,
body.internal-module-shell .hris-clean-shell .hris-report-content-recap-panel {
    padding: 12px 14px !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .hris-report-content-recap-wrap,
body.internal-module-shell .hris-clean-shell .hris-report-content-recap-wrap {
    max-height: 420px !important;
    overflow: auto !important;
    border: 1px solid rgba(214, 225, 238, 0.9) !important;
    border-radius: 10px !important;
    background: #fbfdff !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .hris-report-content-recap-table,
body.internal-module-shell .hris-clean-shell .hris-report-content-recap-table {
    width: 100% !important;
    border-collapse: collapse !important;
    table-layout: auto !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .hris-report-content-recap-table th,
html[data-theme] body.internal-module-shell .hris-clean-shell .hris-report-content-recap-table td,
body.internal-module-shell .hris-clean-shell .hris-report-content-recap-table th,
body.internal-module-shell .hris-clean-shell .hris-report-content-recap-table td {
    padding: 7px 8px !important;
    border-bottom: 1px solid rgba(222, 230, 240, 0.9) !important;
    vertical-align: top !important;
    text-align: left !important;
    font-size: 11px !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .hris-report-content-recap-table th,
body.internal-module-shell .hris-clean-shell .hris-report-content-recap-table th {
    position: sticky !important;
    top: 0 !important;
    z-index: 1 !important;
    background: #f4f8fc !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: #5d6f86 !important;
    white-space: nowrap !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .hris-report-content-recap-table tbody tr:last-child td,
body.internal-module-shell .hris-clean-shell .hris-report-content-recap-table tbody tr:last-child td {
    border-bottom: 0 !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .hris-report-content-cell,
body.internal-module-shell .hris-clean-shell .hris-report-content-cell {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    min-width: 0 !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .hris-report-content-cell strong,
body.internal-module-shell .hris-clean-shell .hris-report-content-cell strong {
    font-size: 11px !important;
    line-height: 1.3 !important;
    color: #10243f !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .hris-report-content-cell small,
body.internal-module-shell .hris-clean-shell .hris-report-content-cell small {
    font-size: 10px !important;
    line-height: 1.3 !important;
    color: #68788d !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .hris-report-content-recap-table .mono,
body.internal-module-shell .hris-clean-shell .hris-report-content-recap-table .mono {
    font-size: 11px !important;
    text-align: center !important;
    white-space: nowrap !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .hris-report-content-recap-table .is-warning,
body.internal-module-shell .hris-clean-shell .hris-report-content-recap-table .is-warning {
    color: #b45309 !important;
    font-weight: 800 !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .hris-report-content-recap-table td:nth-child(6),
html[data-theme] body.internal-module-shell .hris-clean-shell .hris-report-content-recap-table td:nth-child(7),
html[data-theme] body.internal-module-shell .hris-clean-shell .hris-report-content-recap-table td:nth-child(8),
html[data-theme] body.internal-module-shell .hris-clean-shell .hris-report-content-recap-table td:nth-child(9),
html[data-theme] body.internal-module-shell .hris-clean-shell .hris-report-content-recap-table td:nth-child(10),
body.internal-module-shell .hris-clean-shell .hris-report-content-recap-table td:nth-child(6),
body.internal-module-shell .hris-clean-shell .hris-report-content-recap-table td:nth-child(7),
body.internal-module-shell .hris-clean-shell .hris-report-content-recap-table td:nth-child(8),
body.internal-module-shell .hris-clean-shell .hris-report-content-recap-table td:nth-child(9),
body.internal-module-shell .hris-clean-shell .hris-report-content-recap-table td:nth-child(10) {
    min-width: 180px !important;
    max-width: 260px !important;
    white-space: normal !important;
    word-break: break-word !important;
}

@media (max-width: 900px) {
    html[data-theme] body.internal-module-shell .hris-clean-shell .hris-report-content-recap-wrap,
    body.internal-module-shell .hris-clean-shell .hris-report-content-recap-wrap {
        max-height: none !important;
    }

    html[data-theme] body.internal-module-shell .hris-clean-shell .hris-report-content-recap-table,
    body.internal-module-shell .hris-clean-shell .hris-report-content-recap-table {
        min-width: 1120px !important;
    }
}

/* ==================================================
Internal Header Responsive Refactor
Shared fix for internal and WMS ratio changes
=================================================== */

@media (max-width: 1100px) {
    html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell):not(.ai-assistant-shell):not(.pos-clean-shell) [data-internal-base-header] .internal-shell-logo,
    body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell):not(.ai-assistant-shell):not(.pos-clean-shell) [data-internal-base-header] .internal-shell-logo {
        display: none !important;
    }
}

@media (max-width: 760px) {
    html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell):not(.ai-assistant-shell):not(.pos-clean-shell) [data-internal-base-header],
    body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell):not(.ai-assistant-shell):not(.pos-clean-shell) [data-internal-base-header] {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center !important;
        min-height: 58px !important;
        height: auto !important;
        max-height: none !important;
        gap: 10px !important;
        padding: 10px 12px !important;
        overflow: visible !important;
    }

    html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell):not(.ai-assistant-shell):not(.pos-clean-shell) [data-internal-base-header] .internal-shell-brand,
    body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell):not(.ai-assistant-shell):not(.pos-clean-shell) [data-internal-base-header] .internal-shell-brand {
        min-width: 0 !important;
        max-width: 100% !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 0 !important;
        overflow: hidden !important;
        text-decoration: none !important;
    }

    html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell):not(.ai-assistant-shell):not(.pos-clean-shell) [data-internal-base-header] .internal-shell-brand :is(.brand-divider, .brand-logo-wide),
    body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell):not(.ai-assistant-shell):not(.pos-clean-shell) [data-internal-base-header] .internal-shell-brand :is(.brand-divider, .brand-logo-wide) {
        display: none !important;
    }

    html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell):not(.ai-assistant-shell):not(.pos-clean-shell) [data-internal-base-header] .internal-shell-brand .internal-brand-pill,
    body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell):not(.ai-assistant-shell):not(.pos-clean-shell) [data-internal-base-header] .internal-shell-brand .internal-brand-pill {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: auto !important;
        min-width: 88px !important;
        max-width: 100% !important;
        height: 36px !important;
        min-height: 36px !important;
        padding: 0 12px !important;
        border-radius: 12px !important;
        flex: 0 1 auto !important;
    }

    html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell):not(.ai-assistant-shell):not(.pos-clean-shell) [data-internal-base-header] .brand-fallback,
    body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell):not(.ai-assistant-shell):not(.pos-clean-shell) [data-internal-base-header] .brand-fallback {
        display: block !important;
        max-width: 100% !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        font-size: 12px !important;
        line-height: 1 !important;
        font-weight: 800 !important;
    }

    html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell):not(.ai-assistant-shell):not(.pos-clean-shell) [data-internal-base-header] .internal-shell-header-actions,
    body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell):not(.ai-assistant-shell):not(.pos-clean-shell) [data-internal-base-header] .internal-shell-header-actions {
        min-width: 0 !important;
        max-width: 100% !important;
        justify-self: end !important;
        position: static !important;
    }

    html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell):not(.ai-assistant-shell):not(.pos-clean-shell) [data-internal-base-header] .internal-topbar-user,
    body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell):not(.ai-assistant-shell):not(.pos-clean-shell) [data-internal-base-header] .internal-topbar-user {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
        min-width: 0 !important;
        position: static !important;
        overflow: visible !important;
    }

    html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell):not(.ai-assistant-shell):not(.pos-clean-shell) [data-internal-base-header] .topbar-menu-shell,
    body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell):not(.ai-assistant-shell):not(.pos-clean-shell) [data-internal-base-header] .topbar-menu-shell,
    html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell):not(.ai-assistant-shell):not(.pos-clean-shell) [data-internal-base-header] .topbar-menu-shell:has(.notification-button),
    body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell):not(.ai-assistant-shell):not(.pos-clean-shell) [data-internal-base-header] .topbar-menu-shell:has(.notification-button),
    html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell):not(.ai-assistant-shell):not(.pos-clean-shell) [data-internal-base-header] .topbar-menu-shell:has(.profile-button),
    body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell):not(.ai-assistant-shell):not(.pos-clean-shell) [data-internal-base-header] .topbar-menu-shell:has(.profile-button) {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        transform: none !important;
        display: block !important;
        flex: 0 0 auto !important;
        min-width: 0 !important;
    }

    html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell):not(.ai-assistant-shell):not(.pos-clean-shell) [data-internal-base-header] .internal-ai-button,
    body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell):not(.ai-assistant-shell):not(.pos-clean-shell) [data-internal-base-header] .internal-ai-button {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        transform: none !important;
    }

    html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell):not(.ai-assistant-shell):not(.pos-clean-shell) [data-internal-base-header] :is(.internal-ai-button, .notification-button.internal-icon-button, .profile-button.internal-user-pill),
    body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell):not(.ai-assistant-shell):not(.pos-clean-shell) [data-internal-base-header] :is(.internal-ai-button, .notification-button.internal-icon-button, .profile-button.internal-user-pill) {
        width: 36px !important;
        min-width: 36px !important;
        max-width: 36px !important;
        height: 36px !important;
        min-height: 36px !important;
        max-height: 36px !important;
        padding: 0 !important;
        gap: 0 !important;
        border-radius: 999px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 0 0 36px !important;
        overflow: hidden !important;
    }

    html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell):not(.ai-assistant-shell):not(.pos-clean-shell) [data-internal-base-header] .internal-ai-button > span,
    body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell):not(.ai-assistant-shell):not(.pos-clean-shell) [data-internal-base-header] .internal-ai-button > span,
    html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell):not(.ai-assistant-shell):not(.pos-clean-shell) [data-internal-base-header] .profile-button.internal-user-pill :is(.profile-name, .dropdown-icon),
    body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell):not(.ai-assistant-shell):not(.pos-clean-shell) [data-internal-base-header] .profile-button.internal-user-pill :is(.profile-name, .dropdown-icon) {
        display: none !important;
    }

    html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell):not(.ai-assistant-shell):not(.pos-clean-shell) [data-internal-base-header] .internal-ai-button::after,
    body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell):not(.ai-assistant-shell):not(.pos-clean-shell) [data-internal-base-header] .internal-ai-button::after {
        content: "AI" !important;
        font-size: 0.72rem !important;
        font-weight: 800 !important;
        line-height: 1 !important;
        letter-spacing: 0 !important;
    }

    html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell):not(.ai-assistant-shell):not(.pos-clean-shell) [data-internal-base-header] .profile-button.internal-user-pill .avatar,
    body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell):not(.ai-assistant-shell):not(.pos-clean-shell) [data-internal-base-header] .profile-button.internal-user-pill .avatar {
        width: 24px !important;
        min-width: 24px !important;
        height: 24px !important;
        min-height: 24px !important;
        margin: 0 !important;
        flex: 0 0 24px !important;
        font-size: 0.82rem !important;
    }

    html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell):not(.ai-assistant-shell):not(.pos-clean-shell) .page-hero,
    body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell):not(.ai-assistant-shell):not(.pos-clean-shell) .page-hero {
        margin: 10px 0 12px !important;
        padding: 12px 14px !important;
        border-radius: 14px !important;
        gap: 8px !important;
        min-height: 0 !important;
    }

    html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell):not(.ai-assistant-shell):not(.pos-clean-shell) .page-hero-text,
    body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell):not(.ai-assistant-shell):not(.pos-clean-shell) .page-hero-text {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell):not(.ai-assistant-shell):not(.pos-clean-shell) .page-hero h1,
    body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell):not(.ai-assistant-shell):not(.pos-clean-shell) .page-hero h1 {
        margin: 0 !important;
        font-size: clamp(1.32rem, 5.5vw, 1.72rem) !important;
        line-height: 1.08 !important;
        letter-spacing: 0 !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }

    html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell):not(.ai-assistant-shell):not(.pos-clean-shell) .page-hero :is(.page-subtitle, p),
    body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell):not(.ai-assistant-shell):not(.pos-clean-shell) .page-hero :is(.page-subtitle, p) {
        margin-top: 4px !important;
        font-size: 12px !important;
        line-height: 1.42 !important;
        max-width: none !important;
    }

    html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell):not(.ai-assistant-shell):not(.pos-clean-shell) .mobile-command-deck,
    body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell):not(.ai-assistant-shell):not(.pos-clean-shell) .mobile-command-deck {
        width: 100% !important;
        margin: 10px 0 12px !important;
        padding: 12px !important;
        border-radius: 14px !important;
    }
}

@media (max-width: 420px) {
    html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell):not(.ai-assistant-shell):not(.pos-clean-shell) [data-internal-base-header],
    body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell):not(.ai-assistant-shell):not(.pos-clean-shell) [data-internal-base-header] {
        min-height: 54px !important;
        gap: 8px !important;
        padding: 9px 10px !important;
    }

    html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell):not(.ai-assistant-shell):not(.pos-clean-shell) [data-internal-base-header] .internal-shell-brand .internal-brand-pill,
    body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell):not(.ai-assistant-shell):not(.pos-clean-shell) [data-internal-base-header] .internal-shell-brand .internal-brand-pill {
        min-width: 78px !important;
        height: 34px !important;
        min-height: 34px !important;
        padding: 0 10px !important;
    }

    html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell):not(.ai-assistant-shell):not(.pos-clean-shell) [data-internal-base-header] :is(.internal-ai-button, .notification-button.internal-icon-button, .profile-button.internal-user-pill),
    body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell):not(.ai-assistant-shell):not(.pos-clean-shell) [data-internal-base-header] :is(.internal-ai-button, .notification-button.internal-icon-button, .profile-button.internal-user-pill) {
        width: 34px !important;
        min-width: 34px !important;
        max-width: 34px !important;
        height: 34px !important;
        min-height: 34px !important;
        max-height: 34px !important;
        flex-basis: 34px !important;
    }

    html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell):not(.ai-assistant-shell):not(.pos-clean-shell) .page-hero,
    body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell):not(.ai-assistant-shell):not(.pos-clean-shell) .page-hero {
        padding: 10px 12px !important;
    }

    html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell):not(.ai-assistant-shell):not(.pos-clean-shell) .page-hero h1,
    body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell):not(.ai-assistant-shell):not(.pos-clean-shell) .page-hero h1 {
        font-size: 1.24rem !important;
    }
}

/* ==================================================
Internal Popup Layer Guard
Keep sticky shell below dialogs and picker modals
=================================================== */

html[data-theme] body:is(.internal-module-shell, .internal-clean-page-shell, .request-workflow-shell) :is(.internal-module-nav, .clean-module-sidebar, .info-sidebar),
body:is(.internal-module-shell, .internal-clean-page-shell, .request-workflow-shell) :is(.internal-module-nav, .clean-module-sidebar, .info-sidebar) {
    z-index: 40 !important;
}

html[data-theme] body:is(.internal-module-shell, .internal-clean-page-shell, .request-workflow-shell) :is(.module-header, .internal-app-topbar.internal-shell-header, [data-internal-base-header]),
body:is(.internal-module-shell, .internal-clean-page-shell, .request-workflow-shell) :is(.module-header, .internal-app-topbar.internal-shell-header, [data-internal-base-header]) {
    z-index: 60 !important;
}

html[data-theme] body:is(.internal-module-shell, .internal-clean-page-shell, .request-workflow-shell) .topbar-dropdown,
body:is(.internal-module-shell, .internal-clean-page-shell, .request-workflow-shell) .topbar-dropdown {
    z-index: 1000 !important;
}

html[data-theme] body:is(.internal-module-shell, .internal-clean-page-shell, .request-workflow-shell) .picker-modal,
body:is(.internal-module-shell, .internal-clean-page-shell, .request-workflow-shell) .picker-modal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 8990 !important;
}

html[data-theme] body:is(.internal-module-shell, .internal-clean-page-shell, .request-workflow-shell) .picker-modal-backdrop,
body:is(.internal-module-shell, .internal-clean-page-shell, .request-workflow-shell) .picker-modal-backdrop {
    z-index: 9000 !important;
}

html[data-theme] body:is(.internal-module-shell, .internal-clean-page-shell, .request-workflow-shell) .picker-modal-panel,
body:is(.internal-module-shell, .internal-clean-page-shell, .request-workflow-shell) .picker-modal-panel {
    z-index: 9010 !important;
}

/* ==================================================
Request Compact Final Alignment
Kill older conflicting request rules
=================================================== */

html[data-theme] body.request-workflow-shell .page-content.page-content-bleed,
body.request-workflow-shell .page-content.page-content-bleed,
html[data-theme] body.request-workflow-shell .wms-page-stack.request-cockpit-page,
body.request-workflow-shell .wms-page-stack.request-cockpit-page,
html[data-theme] body.request-workflow-shell .request-main-form,
body.request-workflow-shell .request-main-form,
html[data-theme] body.request-workflow-shell .request-workflow-scroll.request-cockpit,
body.request-workflow-shell .request-workflow-scroll.request-cockpit {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
}

html[data-theme] body.request-workflow-shell .request-compact-target .request-cockpit,
body.request-workflow-shell .request-compact-target .request-cockpit {
    display: grid !important;
    grid-template-columns: minmax(620px, 1.08fr) minmax(430px, 0.92fr) !important;
    gap: 12px !important;
    align-items: start !important;
}

html[data-theme] body.request-workflow-shell .request-compact-target .request-form-panel,
html[data-theme] body.request-workflow-shell .request-compact-target .request-queue-panel,
body.request-workflow-shell .request-compact-target .request-form-panel,
body.request-workflow-shell .request-compact-target .request-queue-panel {
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    padding: 12px 14px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    overflow: visible !important;
    align-self: start !important;
}

html[data-theme] body.request-workflow-shell .request-compact-target .request-form-panel,
body.request-workflow-shell .request-compact-target .request-form-panel {
    overflow: visible !important;
}

html[data-theme] body.request-workflow-shell .request-compact-target .request-add-card,
body.request-workflow-shell .request-compact-target .ops-entry-box.request-add-card,
body.request-workflow-shell .request-compact-target .request-add-card,
body.request-workflow-shell .request-compact-target .ops-entry-box.request-add-card {
    padding: 12px 14px !important;
    margin: 0 !important;
    border-radius: 12px !important;
    overflow: visible !important;
}

html[data-theme] body.request-workflow-shell .request-compact-target .request-add-card h3,
body.request-workflow-shell .request-compact-target .request-add-card h3 {
    font-size: 18px !important;
    line-height: 1.15 !important;
    margin: 0 0 10px !important;
}

html[data-theme] body.request-workflow-shell .request-gudang-compact-target .request-add-row,
html[data-theme] body.request-workflow-shell .request-gudang-compact-target .ops-entry-grid.request-entry-grid.request-gudang-entry-grid.request-add-row,
body.request-workflow-shell .request-gudang-compact-target .request-add-row,
body.request-workflow-shell .request-gudang-compact-target .ops-entry-grid.request-entry-grid.request-gudang-entry-grid.request-add-row {
    display: grid !important;
    grid-template-columns: minmax(280px, 1fr) 112px 104px 104px !important;
    gap: 10px !important;
    align-items: start !important;
    width: 100% !important;
}

html[data-theme] body.request-workflow-shell .request-owner-compact-target .request-add-row,
html[data-theme] body.request-workflow-shell .request-owner-compact-target .ops-entry-grid.outbound-entry-grid.request-owner-entry-grid.request-add-row,
body.request-workflow-shell .request-owner-compact-target .request-add-row,
body.request-workflow-shell .request-owner-compact-target .ops-entry-grid.outbound-entry-grid.request-owner-entry-grid.request-add-row {
    display: grid !important;
    grid-template-columns: minmax(250px, 1fr) 96px 96px minmax(132px, 0.7fr) 96px !important;
    gap: 10px !important;
    align-items: start !important;
    width: 100% !important;
}

html[data-theme] body.request-workflow-shell .request-owner-compact-target .request-note-field,
body.request-workflow-shell .request-owner-compact-target .request-note-field,
html[data-theme] body.request-workflow-shell .request-owner-compact-target .request-action-field,
body.request-workflow-shell .request-owner-compact-target .request-action-field {
    grid-column: auto !important;
}

html[data-theme] body.request-workflow-shell .request-compact-target .request-field,
body.request-workflow-shell .request-compact-target .request-field {
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    overflow: visible !important;
}

html[data-theme] body.request-workflow-shell .request-compact-target .request-field label,
body.request-workflow-shell .request-compact-target .request-field label {
    height: 16px !important;
    min-height: 16px !important;
    max-height: 16px !important;
    margin: 0 !important;
    font-size: 12px !important;
    line-height: 16px !important;
    font-weight: 800 !important;
}

html[data-theme] body.request-workflow-shell .request-compact-target .request-field input,
html[data-theme] body.request-workflow-shell .request-compact-target .request-field select,
body.request-workflow-shell .request-compact-target .request-field input,
body.request-workflow-shell .request-compact-target .request-field select {
    width: 100% !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    font-size: 13px !important;
}

html[data-theme] body.request-workflow-shell .request-compact-target .request-helper,
body.request-workflow-shell .request-compact-target .request-helper {
    height: 28px !important;
    max-height: 28px !important;
    margin: 0 !important;
    font-size: 12px !important;
    line-height: 14px !important;
    overflow: hidden !important;
}

html[data-theme] body.request-workflow-shell .request-compact-target .request-stock-field .request-stock-input,
html[data-theme] body.request-workflow-shell .request-compact-target .request-stock-field .ops-stock-card.request-stock-input,
body.request-workflow-shell .request-compact-target .request-stock-field .request-stock-input,
body.request-workflow-shell .request-compact-target .request-stock-field .ops-stock-card.request-stock-input {
    appearance: none !important;
    min-height: 36px !important;
    height: 36px !important;
    max-height: 36px !important;
    padding: 0 12px !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    text-align: left !important;
    font-size: 13px !important;
    font-weight: 700 !important;
}

html[data-theme] body.request-workflow-shell .request-compact-target .request-action-field,
body.request-workflow-shell .request-compact-target .request-action-field {
    padding-top: 20px !important;
}

html[data-theme] body.request-workflow-shell .request-compact-target .request-action-field .request-label-spacer,
html[data-theme] body.request-workflow-shell .request-compact-target .request-action-field .request-helper-spacer,
body.request-workflow-shell .request-compact-target .request-action-field .request-label-spacer,
body.request-workflow-shell .request-compact-target .request-action-field .request-helper-spacer {
    display: none !important;
}

html[data-theme] body.request-workflow-shell .request-compact-target .request-action-bar,
html[data-theme] body.request-workflow-shell .request-compact-target .request-owner-action-bar,
body.request-workflow-shell .request-compact-target .request-action-bar,
body.request-workflow-shell .request-compact-target .request-owner-action-bar {
    position: static !important;
    margin-top: 10px !important;
    padding: 0 !important;
    min-height: 38px !important;
    height: 38px !important;
    max-height: 38px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    background: transparent !important;
    backdrop-filter: none !important;
}

html[data-theme] body.request-workflow-shell .request-compact-target .request-action-bar > .helper-text,
html[data-theme] body.request-workflow-shell .request-compact-target .request-owner-action-bar > .helper-text,
body.request-workflow-shell .request-compact-target .request-action-bar > .helper-text,
body.request-workflow-shell .request-compact-target .request-owner-action-bar > .helper-text {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
}

html[data-theme] body.request-workflow-shell .request-compact-target .ops-queue-box,
html[data-theme] body.request-workflow-shell .request-compact-target .request-queue-table-wrap,
body.request-workflow-shell .request-compact-target .ops-queue-box,
body.request-workflow-shell .request-compact-target .request-queue-table-wrap {
    min-height: 0 !important;
    height: auto !important;
    max-height: 170px !important;
    overflow: auto !important;
    padding: 0 !important;
    margin: 0 !important;
}

html[data-theme] body.request-workflow-shell .request-compact-target .request-history-panel,
html[data-theme] body.request-workflow-shell .request-compact-target .request-custom-item-panel,
body.request-workflow-shell .request-compact-target .request-history-panel,
body.request-workflow-shell .request-compact-target .request-custom-item-panel {
    margin-top: 10px !important;
}

@media (max-width: 1180px) {
    html[data-theme] body.request-workflow-shell .request-compact-target .request-cockpit,
    body.request-workflow-shell .request-compact-target .request-cockpit {
        grid-template-columns: 1fr !important;
    }

    html[data-theme] body.request-workflow-shell .request-owner-compact-target .request-add-row,
    html[data-theme] body.request-workflow-shell .request-owner-compact-target .ops-entry-grid.outbound-entry-grid.request-owner-entry-grid.request-add-row,
    body.request-workflow-shell .request-owner-compact-target .request-add-row,
    body.request-workflow-shell .request-owner-compact-target .ops-entry-grid.outbound-entry-grid.request-owner-entry-grid.request-add-row {
        grid-template-columns: minmax(0, 1fr) 96px 96px !important;
    }

    html[data-theme] body.request-workflow-shell .request-owner-compact-target .request-note-field,
    body.request-workflow-shell .request-owner-compact-target .request-note-field {
        grid-column: 1 / span 2 !important;
    }

    html[data-theme] body.request-workflow-shell .request-owner-compact-target .request-action-field,
    body.request-workflow-shell .request-owner-compact-target .request-action-field {
        grid-column: 3 !important;
    }
}

@media (max-width: 900px) {
    html[data-theme] body.request-workflow-shell .request-gudang-compact-target .request-add-row,
    html[data-theme] body.request-workflow-shell .request-owner-compact-target .request-add-row,
    body.request-workflow-shell .request-gudang-compact-target .request-add-row,
    body.request-workflow-shell .request-owner-compact-target .request-add-row {
        grid-template-columns: 1fr 96px 96px !important;
    }

    html[data-theme] body.request-workflow-shell .request-owner-compact-target .request-note-field,
    body.request-workflow-shell .request-owner-compact-target .request-note-field {
        grid-column: 1 / -1 !important;
    }

    html[data-theme] body.request-workflow-shell .request-compact-target .request-action-field,
    body.request-workflow-shell .request-compact-target .request-action-field {
        grid-column: 1 / -1 !important;
        padding-top: 0 !important;
    }
}

@media (max-width: 640px) {
    html[data-theme] body.request-workflow-shell .request-gudang-compact-target .request-add-row,
    html[data-theme] body.request-workflow-shell .request-owner-compact-target .request-add-row,
    body.request-workflow-shell .request-gudang-compact-target .request-add-row,
    body.request-workflow-shell .request-owner-compact-target .request-add-row {
        grid-template-columns: 1fr !important;
    }

    html[data-theme] body.request-workflow-shell .request-compact-target .request-action-bar,
    html[data-theme] body.request-workflow-shell .request-compact-target .request-owner-action-bar,
    body.request-workflow-shell .request-compact-target .request-action-bar,
    body.request-workflow-shell .request-compact-target .request-owner-action-bar {
        height: auto !important;
        max-height: none !important;
        flex-direction: column !important;
        align-items: stretch !important;
    }

    html[data-theme] body.request-workflow-shell .request-compact-target .request-action-bar button,
    html[data-theme] body.request-workflow-shell .request-compact-target .request-owner-action-bar button,
    body.request-workflow-shell .request-compact-target .request-action-bar button,
    body.request-workflow-shell .request-compact-target .request-owner-action-bar button {
        width: 100% !important;
    }
}

/* ==================================================
Request Compact Visual Lock
Final pass to match compact mockup inside WMS shell
=================================================== */

html[data-theme] body.request-workflow-shell .request-compact-target .request-cockpit,
body.request-workflow-shell .request-compact-target .request-cockpit {
    grid-template-columns: minmax(0, 1.12fr) minmax(460px, 0.88fr) !important;
    gap: 14px !important;
}

html[data-theme] body.request-workflow-shell .request-compact-target :is(.request-form-panel, .request-queue-panel, .request-add-card, .request-add-row, .request-field, .request-picker-line),
body.request-workflow-shell .request-compact-target :is(.request-form-panel, .request-queue-panel, .request-add-card, .request-add-row, .request-field, .request-picker-line) {
    min-width: 0 !important;
    max-width: 100% !important;
}

html[data-theme] body.request-workflow-shell .request-gudang-compact-target .request-add-row,
html[data-theme] body.request-workflow-shell .request-gudang-compact-target .ops-entry-grid.request-entry-grid.request-gudang-entry-grid.request-add-row,
body.request-workflow-shell .request-gudang-compact-target .request-add-row,
body.request-workflow-shell .request-gudang-compact-target .ops-entry-grid.request-entry-grid.request-gudang-entry-grid.request-add-row {
    grid-template-columns: minmax(220px, 1fr) 100px 92px 92px !important;
    gap: 8px !important;
}

html[data-theme] body.request-workflow-shell .request-owner-compact-target .request-add-row,
html[data-theme] body.request-workflow-shell .request-owner-compact-target .ops-entry-grid.outbound-entry-grid.request-owner-entry-grid.request-add-row,
body.request-workflow-shell .request-owner-compact-target .request-add-row,
body.request-workflow-shell .request-owner-compact-target .ops-entry-grid.outbound-entry-grid.request-owner-entry-grid.request-add-row {
    grid-template-columns: minmax(200px, 1fr) 88px 88px minmax(118px, 0.62fr) 88px !important;
    gap: 8px !important;
}

html[data-theme] body.request-workflow-shell .request-compact-target .request-picker-line,
body.request-workflow-shell .request-compact-target .request-picker-line {
    grid-template-columns: minmax(0, 1fr) 42px !important;
    gap: 8px !important;
}

html[data-theme] body.request-workflow-shell .request-compact-target .request-picker-line > *,
body.request-workflow-shell .request-compact-target .request-picker-line > * {
    min-width: 0 !important;
}

html[data-theme] body.request-workflow-shell .request-compact-target .request-item-input,
html[data-theme] body.request-workflow-shell .request-compact-target .request-note-input,
body.request-workflow-shell .request-compact-target .request-item-input,
body.request-workflow-shell .request-compact-target .request-note-input {
    min-width: 0 !important;
    width: 100% !important;
}

html[data-theme] body.request-workflow-shell .request-compact-target .ops-entry-actions.request-action-field,
body.request-workflow-shell .request-compact-target .ops-entry-actions.request-action-field {
    width: 92px !important;
    min-width: 92px !important;
    max-width: 92px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    flex-wrap: nowrap !important;
    align-self: start !important;
    gap: 4px !important;
}

html[data-theme] body.request-workflow-shell .request-owner-compact-target .ops-entry-actions.request-action-field,
body.request-workflow-shell .request-owner-compact-target .ops-entry-actions.request-action-field {
    width: 88px !important;
    min-width: 88px !important;
    max-width: 88px !important;
}

html[data-theme] body.request-workflow-shell .request-compact-target .ops-entry-actions.request-action-field button,
html[data-theme] body.request-workflow-shell .request-compact-target .request-add-button,
body.request-workflow-shell .request-compact-target .ops-entry-actions.request-action-field button,
body.request-workflow-shell .request-compact-target .request-add-button {
    flex: 0 0 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    padding: 0 10px !important;
    white-space: nowrap !important;
}

html[data-theme] body.request-workflow-shell .request-compact-target .request-queue-panel,
body.request-workflow-shell .request-compact-target .request-queue-panel {
    padding: 12px 14px 14px !important;
    gap: 8px !important;
}

html[data-theme] body.request-workflow-shell .request-compact-target .request-queue-table,
body.request-workflow-shell .request-compact-target .request-queue-table,
html[data-theme] body.request-workflow-shell .request-compact-target .owner-request-queue-table,
body.request-workflow-shell .request-compact-target .owner-request-queue-table {
    width: 100% !important;
    min-width: 0 !important;
    table-layout: fixed !important;
}

html[data-theme] body.request-workflow-shell .request-compact-target .request-queue-table th,
html[data-theme] body.request-workflow-shell .request-compact-target .request-queue-table td,
html[data-theme] body.request-workflow-shell .request-compact-target .owner-request-queue-table th,
html[data-theme] body.request-workflow-shell .request-compact-target .owner-request-queue-table td,
body.request-workflow-shell .request-compact-target .request-queue-table th,
body.request-workflow-shell .request-compact-target .request-queue-table td,
body.request-workflow-shell .request-compact-target .owner-request-queue-table th,
body.request-workflow-shell .request-compact-target .owner-request-queue-table td {
    padding: 7px 8px !important;
    font-size: 11.5px !important;
    line-height: 1.2 !important;
}

html[data-theme] body.request-workflow-shell .request-compact-target .request-queue-table thead th,
html[data-theme] body.request-workflow-shell .request-compact-target .owner-request-queue-table thead th,
body.request-workflow-shell .request-compact-target .request-queue-table thead th,
body.request-workflow-shell .request-compact-target .owner-request-queue-table thead th {
    font-size: 11px !important;
    white-space: nowrap !important;
}

html[data-theme] body.request-workflow-shell .request-gudang-compact-target .request-queue-table th:nth-child(1),
html[data-theme] body.request-workflow-shell .request-gudang-compact-target .request-queue-table td:nth-child(1),
body.request-workflow-shell .request-gudang-compact-target .request-queue-table th:nth-child(1),
body.request-workflow-shell .request-gudang-compact-target .request-queue-table td:nth-child(1) {
    width: 44px !important;
}

html[data-theme] body.request-workflow-shell .request-gudang-compact-target .request-queue-table th:nth-child(3),
html[data-theme] body.request-workflow-shell .request-gudang-compact-target .request-queue-table td:nth-child(3),
body.request-workflow-shell .request-gudang-compact-target .request-queue-table th:nth-child(3),
body.request-workflow-shell .request-gudang-compact-target .request-queue-table td:nth-child(3) {
    width: 92px !important;
}

html[data-theme] body.request-workflow-shell .request-gudang-compact-target .request-queue-table th:nth-child(4),
html[data-theme] body.request-workflow-shell .request-gudang-compact-target .request-queue-table td:nth-child(4),
body.request-workflow-shell .request-gudang-compact-target .request-queue-table th:nth-child(4),
body.request-workflow-shell .request-gudang-compact-target .request-queue-table td:nth-child(4) {
    width: 64px !important;
}

html[data-theme] body.request-workflow-shell .request-gudang-compact-target .request-queue-table th:nth-child(5),
html[data-theme] body.request-workflow-shell .request-gudang-compact-target .request-queue-table td:nth-child(5),
body.request-workflow-shell .request-gudang-compact-target .request-queue-table th:nth-child(5),
body.request-workflow-shell .request-gudang-compact-target .request-queue-table td:nth-child(5) {
    width: 56px !important;
}

html[data-theme] body.request-workflow-shell .request-owner-compact-target .owner-request-queue-table th:nth-child(1),
html[data-theme] body.request-workflow-shell .request-owner-compact-target .owner-request-queue-table td:nth-child(1),
body.request-workflow-shell .request-owner-compact-target .owner-request-queue-table th:nth-child(1),
body.request-workflow-shell .request-owner-compact-target .owner-request-queue-table td:nth-child(1) {
    width: 44px !important;
}

html[data-theme] body.request-workflow-shell .request-owner-compact-target .owner-request-queue-table th:nth-child(3),
html[data-theme] body.request-workflow-shell .request-owner-compact-target .owner-request-queue-table td:nth-child(3),
body.request-workflow-shell .request-owner-compact-target .owner-request-queue-table th:nth-child(3),
body.request-workflow-shell .request-owner-compact-target .owner-request-queue-table td:nth-child(3) {
    width: 72px !important;
}

html[data-theme] body.request-workflow-shell .request-owner-compact-target .owner-request-queue-table th:nth-child(4),
html[data-theme] body.request-workflow-shell .request-owner-compact-target .owner-request-queue-table td:nth-child(4),
body.request-workflow-shell .request-owner-compact-target .owner-request-queue-table th:nth-child(4),
body.request-workflow-shell .request-owner-compact-target .owner-request-queue-table td:nth-child(4) {
    width: 60px !important;
}

html[data-theme] body.request-workflow-shell .request-owner-compact-target .owner-request-queue-table th:nth-child(5),
html[data-theme] body.request-workflow-shell .request-owner-compact-target .owner-request-queue-table td:nth-child(5),
body.request-workflow-shell .request-owner-compact-target .owner-request-queue-table th:nth-child(5),
body.request-workflow-shell .request-owner-compact-target .owner-request-queue-table td:nth-child(5) {
    width: 120px !important;
    white-space: normal !important;
}

html[data-theme] body.request-workflow-shell .request-owner-compact-target .owner-request-queue-table th:nth-child(6),
html[data-theme] body.request-workflow-shell .request-owner-compact-target .owner-request-queue-table td:nth-child(6),
body.request-workflow-shell .request-owner-compact-target .owner-request-queue-table th:nth-child(6),
body.request-workflow-shell .request-owner-compact-target .owner-request-queue-table td:nth-child(6) {
    width: 56px !important;
}

@media (max-width: 1280px) {
    html[data-theme] body.request-workflow-shell .request-compact-target .request-cockpit,
    body.request-workflow-shell .request-compact-target .request-cockpit {
        grid-template-columns: minmax(0, 1fr) minmax(420px, 0.84fr) !important;
    }

    html[data-theme] body.request-workflow-shell .request-owner-compact-target .request-add-row,
    html[data-theme] body.request-workflow-shell .request-owner-compact-target .ops-entry-grid.outbound-entry-grid.request-owner-entry-grid.request-add-row,
    body.request-workflow-shell .request-owner-compact-target .request-add-row,
    body.request-workflow-shell .request-owner-compact-target .ops-entry-grid.outbound-entry-grid.request-owner-entry-grid.request-add-row {
        grid-template-columns: minmax(0, 1fr) 88px 88px minmax(110px, 0.56fr) 88px !important;
    }
}

/* ==================================================
Request Owner Controlled Two-Row Layout
Owner has more fields than gudang, so do not force 1 row
=================================================== */

html[data-theme] body.request-workflow-shell .request-compact-target .request-cockpit,
html[data-theme] body.request-workflow-shell .request-compact-v3 .request-cockpit,
body.request-workflow-shell .request-compact-target .request-cockpit,
body.request-workflow-shell .request-compact-v3 .request-cockpit {
    display: grid !important;
    grid-template-columns: minmax(0, 1.12fr) minmax(360px, 0.88fr) !important;
    gap: 14px !important;
    align-items: start !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
}

html[data-theme] body.request-workflow-shell .request-compact-target .request-form-panel,
html[data-theme] body.request-workflow-shell .request-compact-v3 .request-form-panel,
html[data-theme] body.request-workflow-shell .request-compact-target .request-queue-panel,
html[data-theme] body.request-workflow-shell .request-compact-v3 .request-queue-panel,
body.request-workflow-shell .request-compact-target .request-form-panel,
body.request-workflow-shell .request-compact-v3 .request-form-panel,
body.request-workflow-shell .request-compact-target .request-queue-panel,
body.request-workflow-shell .request-compact-v3 .request-queue-panel {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    align-self: start !important;
}

html[data-theme] body.request-workflow-shell .request-compact-target .request-queue-panel,
html[data-theme] body.request-workflow-shell .request-compact-v3 .request-queue-panel,
body.request-workflow-shell .request-compact-target .request-queue-panel,
body.request-workflow-shell .request-compact-v3 .request-queue-panel {
    position: relative !important;
    z-index: 1 !important;
}

html[data-theme] body.request-workflow-shell .request-compact-target .request-form-panel,
html[data-theme] body.request-workflow-shell .request-compact-v3 .request-form-panel,
body.request-workflow-shell .request-compact-target .request-form-panel,
body.request-workflow-shell .request-compact-v3 .request-form-panel {
    position: relative !important;
    z-index: 1 !important;
}

html[data-theme] body.request-workflow-shell .request-owner-compact-target .request-add-card,
html[data-theme] body.request-workflow-shell .request-owner-compact-v3 .request-add-card,
body.request-workflow-shell .request-owner-compact-target .request-add-card,
body.request-workflow-shell .request-owner-compact-v3 .request-add-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    padding: 12px 14px !important;
}

html[data-theme] body.request-workflow-shell .request-owner-compact-target .request-add-card *,
html[data-theme] body.request-workflow-shell .request-owner-compact-v3 .request-add-card *,
body.request-workflow-shell .request-owner-compact-target .request-add-card *,
body.request-workflow-shell .request-owner-compact-v3 .request-add-card * {
    box-sizing: border-box !important;
}

html[data-theme] body.request-workflow-shell .request-owner-compact-target .request-owner-add-row,
html[data-theme] body.request-workflow-shell .request-owner-compact-v3 .request-owner-add-row,
html[data-theme] body.request-workflow-shell .request-owner-compact-target .request-add-row,
html[data-theme] body.request-workflow-shell .request-owner-compact-v3 .request-add-row,
body.request-workflow-shell .request-owner-compact-target .request-owner-add-row,
body.request-workflow-shell .request-owner-compact-v3 .request-owner-add-row,
body.request-workflow-shell .request-owner-compact-target .request-add-row,
body.request-workflow-shell .request-owner-compact-v3 .request-add-row {
    display: grid !important;
    grid-template-columns: minmax(260px, 1fr) 96px 96px !important;
    gap: 8px 10px !important;
    align-items: start !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
}

html[data-theme] body.request-workflow-shell .request-owner-compact-target .request-item-field,
html[data-theme] body.request-workflow-shell .request-owner-compact-v3 .request-item-field,
body.request-workflow-shell .request-owner-compact-target .request-item-field,
body.request-workflow-shell .request-owner-compact-v3 .request-item-field {
    min-width: 0 !important;
}

html[data-theme] body.request-workflow-shell .request-owner-compact-target .request-picker-line,
html[data-theme] body.request-workflow-shell .request-owner-compact-v3 .request-picker-line,
body.request-workflow-shell .request-owner-compact-target .request-picker-line,
body.request-workflow-shell .request-owner-compact-v3 .request-picker-line {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 42px !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    height: var(--req-input-h, 36px) !important;
}

html[data-theme] body.request-workflow-shell .request-owner-compact-target .request-picker-line input,
html[data-theme] body.request-workflow-shell .request-owner-compact-v3 .request-picker-line input,
body.request-workflow-shell .request-owner-compact-target .request-picker-line input,
body.request-workflow-shell .request-owner-compact-v3 .request-picker-line input {
    min-width: 0 !important;
    width: 100% !important;
}

html[data-theme] body.request-workflow-shell .request-owner-compact-target .request-picker-button,
html[data-theme] body.request-workflow-shell .request-owner-compact-v3 .request-picker-button,
body.request-workflow-shell .request-owner-compact-target .request-picker-button,
body.request-workflow-shell .request-owner-compact-v3 .request-picker-button {
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    height: var(--req-input-h, 36px) !important;
}

html[data-theme] body.request-workflow-shell .request-owner-compact-target .request-note-field,
html[data-theme] body.request-workflow-shell .request-owner-compact-v3 .request-note-field,
body.request-workflow-shell .request-owner-compact-target .request-note-field,
body.request-workflow-shell .request-owner-compact-v3 .request-note-field {
    grid-column: 1 / 3 !important;
    min-width: 0 !important;
}

html[data-theme] body.request-workflow-shell .request-owner-compact-target .request-action-field,
html[data-theme] body.request-workflow-shell .request-owner-compact-v3 .request-action-field,
body.request-workflow-shell .request-owner-compact-target .request-action-field,
body.request-workflow-shell .request-owner-compact-v3 .request-action-field {
    grid-column: 3 / 4 !important;
    padding-top: calc(var(--req-label-h, 16px) + 4px) !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

html[data-theme] body.request-workflow-shell .request-owner-compact-target .request-add-button,
html[data-theme] body.request-workflow-shell .request-owner-compact-v3 .request-add-button,
body.request-workflow-shell .request-owner-compact-target .request-add-button,
body.request-workflow-shell .request-owner-compact-v3 .request-add-button {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: var(--req-input-h, 36px) !important;
    min-height: var(--req-input-h, 36px) !important;
    max-height: var(--req-input-h, 36px) !important;
    padding: 0 10px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

html[data-theme] body.request-workflow-shell .request-gudang-compact-target .request-add-row,
html[data-theme] body.request-workflow-shell .request-gudang-compact-v3 .request-add-row,
html[data-theme] body.request-workflow-shell .request-gudang-compact-target .request-gudang-add-row,
html[data-theme] body.request-workflow-shell .request-gudang-compact-v3 .request-gudang-add-row,
body.request-workflow-shell .request-gudang-compact-target .request-add-row,
body.request-workflow-shell .request-gudang-compact-v3 .request-add-row,
body.request-workflow-shell .request-gudang-compact-target .request-gudang-add-row,
body.request-workflow-shell .request-gudang-compact-v3 .request-gudang-add-row {
    display: grid !important;
    grid-template-columns: minmax(260px, 1fr) 112px 104px 104px !important;
    gap: 10px !important;
    align-items: start !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
}

html[data-theme] body.request-workflow-shell .request-compact-target .request-field,
html[data-theme] body.request-workflow-shell .request-compact-v3 .request-field,
body.request-workflow-shell .request-compact-target .request-field,
body.request-workflow-shell .request-compact-v3 .request-field {
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

html[data-theme] body.request-workflow-shell .request-compact-target .request-field input,
html[data-theme] body.request-workflow-shell .request-compact-v3 .request-field input,
html[data-theme] body.request-workflow-shell .request-compact-target .request-field select,
html[data-theme] body.request-workflow-shell .request-compact-v3 .request-field select,
body.request-workflow-shell .request-compact-target .request-field input,
body.request-workflow-shell .request-compact-v3 .request-field input,
body.request-workflow-shell .request-compact-target .request-field select,
body.request-workflow-shell .request-compact-v3 .request-field select {
    height: var(--req-input-h, 36px) !important;
    min-height: var(--req-input-h, 36px) !important;
    max-height: var(--req-input-h, 36px) !important;
}

html[data-theme] body.request-workflow-shell .request-compact-target .request-helper,
html[data-theme] body.request-workflow-shell .request-compact-v3 .request-helper,
body.request-workflow-shell .request-compact-target .request-helper,
body.request-workflow-shell .request-compact-v3 .request-helper {
    height: var(--req-helper-h, 28px) !important;
    max-height: var(--req-helper-h, 28px) !important;
    overflow: hidden !important;
    line-height: 14px !important;
    margin: 0 !important;
}

@media (max-width: 1100px) {
    html[data-theme] body.request-workflow-shell .request-owner-compact-target .request-add-row,
    html[data-theme] body.request-workflow-shell .request-owner-compact-v3 .request-add-row,
    body.request-workflow-shell .request-owner-compact-target .request-add-row,
    body.request-workflow-shell .request-owner-compact-v3 .request-add-row {
        grid-template-columns: 1fr 90px 90px !important;
    }

    html[data-theme] body.request-workflow-shell .request-owner-compact-target .request-note-field,
    html[data-theme] body.request-workflow-shell .request-owner-compact-v3 .request-note-field,
    body.request-workflow-shell .request-owner-compact-target .request-note-field,
    body.request-workflow-shell .request-owner-compact-v3 .request-note-field {
        grid-column: 1 / 3 !important;
    }

    html[data-theme] body.request-workflow-shell .request-owner-compact-target .request-action-field,
    html[data-theme] body.request-workflow-shell .request-owner-compact-v3 .request-action-field,
    body.request-workflow-shell .request-owner-compact-target .request-action-field,
    body.request-workflow-shell .request-owner-compact-v3 .request-action-field {
        grid-column: 3 / 4 !important;
    }
}

@media (max-width: 720px) {
    html[data-theme] body.request-workflow-shell .request-owner-compact-target .request-add-row,
    html[data-theme] body.request-workflow-shell .request-owner-compact-v3 .request-add-row,
    html[data-theme] body.request-workflow-shell .request-gudang-compact-target .request-add-row,
    html[data-theme] body.request-workflow-shell .request-gudang-compact-v3 .request-add-row,
    body.request-workflow-shell .request-owner-compact-target .request-add-row,
    body.request-workflow-shell .request-owner-compact-v3 .request-add-row,
    body.request-workflow-shell .request-gudang-compact-target .request-add-row,
    body.request-workflow-shell .request-gudang-compact-v3 .request-add-row {
        grid-template-columns: 1fr !important;
    }

    html[data-theme] body.request-workflow-shell .request-owner-compact-target .request-note-field,
    html[data-theme] body.request-workflow-shell .request-owner-compact-v3 .request-note-field,
    html[data-theme] body.request-workflow-shell .request-owner-compact-target .request-action-field,
    html[data-theme] body.request-workflow-shell .request-owner-compact-v3 .request-action-field,
    body.request-workflow-shell .request-owner-compact-target .request-note-field,
    body.request-workflow-shell .request-owner-compact-v3 .request-note-field,
    body.request-workflow-shell .request-owner-compact-target .request-action-field,
    body.request-workflow-shell .request-owner-compact-v3 .request-action-field {
        grid-column: auto !important;
    }

    html[data-theme] body.request-workflow-shell .request-compact-target .request-action-field,
    html[data-theme] body.request-workflow-shell .request-compact-v3 .request-action-field,
    body.request-workflow-shell .request-compact-target .request-action-field,
    body.request-workflow-shell .request-compact-v3 .request-action-field {
        padding-top: 0 !important;
    }

    html[data-theme] body.request-workflow-shell .request-compact-target .request-add-button,
    html[data-theme] body.request-workflow-shell .request-compact-v3 .request-add-button,
    body.request-workflow-shell .request-compact-target .request-add-button,
    body.request-workflow-shell .request-compact-v3 .request-add-button {
        width: 100% !important;
    }
}

/* Flow cockpit final grid lock: override older WMS entry spans */
html[data-theme] body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .wms-compact-cockpit,
body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .wms-compact-cockpit {
    grid-template-columns: minmax(0, 1fr) minmax(318px, 360px) !important;
}

html[data-theme] body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .ops-entry-grid > *,
body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .ops-entry-grid > * {
    grid-column: auto !important;
    grid-row: auto !important;
}

html[data-theme] body.wms-transfer-page-shell .wms-compact-flow .transfer-entry-grid .item-field,
body.wms-transfer-page-shell .wms-compact-flow .transfer-entry-grid .item-field {
    grid-column: 1 / 2 !important;
}

html[data-theme] body.wms-transfer-page-shell .wms-compact-flow .transfer-entry-grid .picker-field,
body.wms-transfer-page-shell .wms-compact-flow .transfer-entry-grid .picker-field {
    grid-column: 2 / 3 !important;
}

html[data-theme] body.wms-transfer-page-shell .wms-compact-flow .transfer-entry-grid .barcode-field,
body.wms-transfer-page-shell .wms-compact-flow .transfer-entry-grid .barcode-field {
    grid-column: 3 / 4 !important;
}

html[data-theme] body.wms-transfer-page-shell .wms-compact-flow .transfer-entry-grid .stock-field,
body.wms-transfer-page-shell .wms-compact-flow .transfer-entry-grid .stock-field {
    grid-column: 4 / 5 !important;
}

html[data-theme] body.wms-transfer-page-shell .wms-compact-flow .transfer-entry-grid .qty-field,
body.wms-transfer-page-shell .wms-compact-flow .transfer-entry-grid .qty-field {
    grid-column: 5 / 6 !important;
}

html[data-theme] body.wms-transfer-page-shell .wms-compact-flow .transfer-entry-grid .action-field,
body.wms-transfer-page-shell .wms-compact-flow .transfer-entry-grid .action-field {
    grid-column: 6 / 7 !important;
}

html[data-theme] body.wms-outbound-page-shell .wms-compact-flow .outbound-entry-grid .item-field,
body.wms-outbound-page-shell .wms-compact-flow .outbound-entry-grid .item-field {
    grid-column: 1 / 2 !important;
}

html[data-theme] body.wms-outbound-page-shell .wms-compact-flow .outbound-entry-grid .picker-field,
body.wms-outbound-page-shell .wms-compact-flow .outbound-entry-grid .picker-field {
    grid-column: 2 / 3 !important;
}

html[data-theme] body.wms-outbound-page-shell .wms-compact-flow .outbound-entry-grid .barcode-field,
body.wms-outbound-page-shell .wms-compact-flow .outbound-entry-grid .barcode-field {
    grid-column: 3 / 4 !important;
}

html[data-theme] body.wms-outbound-page-shell .wms-compact-flow .outbound-entry-grid .stock-field,
body.wms-outbound-page-shell .wms-compact-flow .outbound-entry-grid .stock-field {
    grid-column: 4 / 5 !important;
}

html[data-theme] body.wms-outbound-page-shell .wms-compact-flow .outbound-entry-grid .qty-field,
body.wms-outbound-page-shell .wms-compact-flow .outbound-entry-grid .qty-field {
    grid-column: 5 / 6 !important;
}

html[data-theme] body.wms-outbound-page-shell .wms-compact-flow .outbound-entry-grid .note-field,
body.wms-outbound-page-shell .wms-compact-flow .outbound-entry-grid .note-field {
    grid-column: 6 / 7 !important;
}

html[data-theme] body.wms-outbound-page-shell .wms-compact-flow .outbound-entry-grid .action-field,
body.wms-outbound-page-shell .wms-compact-flow .outbound-entry-grid .action-field {
    grid-column: 7 / 8 !important;
}

html[data-theme] body.wms-inbound-page-shell .wms-compact-flow .inbound-entry-grid .item-field,
body.wms-inbound-page-shell .wms-compact-flow .inbound-entry-grid .item-field {
    grid-column: 1 / 2 !important;
}

html[data-theme] body.wms-inbound-page-shell .wms-compact-flow .inbound-entry-grid .picker-field,
body.wms-inbound-page-shell .wms-compact-flow .inbound-entry-grid .picker-field {
    grid-column: 2 / 3 !important;
}

html[data-theme] body.wms-inbound-page-shell .wms-compact-flow .inbound-entry-grid .barcode-field,
body.wms-inbound-page-shell .wms-compact-flow .inbound-entry-grid .barcode-field {
    grid-column: 3 / 4 !important;
}

html[data-theme] body.wms-inbound-page-shell .wms-compact-flow .inbound-entry-grid .stock-field,
body.wms-inbound-page-shell .wms-compact-flow .inbound-entry-grid .stock-field {
    grid-column: 4 / 5 !important;
}

html[data-theme] body.wms-inbound-page-shell .wms-compact-flow .inbound-entry-grid .qty-field,
body.wms-inbound-page-shell .wms-compact-flow .inbound-entry-grid .qty-field {
    grid-column: 5 / 6 !important;
}

html[data-theme] body.wms-inbound-page-shell .wms-compact-flow .inbound-entry-grid .cost-field,
body.wms-inbound-page-shell .wms-compact-flow .inbound-entry-grid .cost-field {
    grid-column: 1 / 2 !important;
}

html[data-theme] body.wms-inbound-page-shell .wms-compact-flow .inbound-entry-grid .expiry-field,
body.wms-inbound-page-shell .wms-compact-flow .inbound-entry-grid .expiry-field {
    grid-column: 2 / 3 !important;
}

html[data-theme] body.wms-inbound-page-shell .wms-compact-flow .inbound-entry-grid .date-field,
body.wms-inbound-page-shell .wms-compact-flow .inbound-entry-grid .date-field {
    grid-column: 3 / 4 !important;
}

html[data-theme] body.wms-inbound-page-shell .wms-compact-flow .inbound-entry-grid .note-field,
body.wms-inbound-page-shell .wms-compact-flow .inbound-entry-grid .note-field {
    grid-column: 4 / 5 !important;
}

html[data-theme] body.wms-inbound-page-shell .wms-compact-flow .inbound-entry-grid .action-field,
body.wms-inbound-page-shell .wms-compact-flow .inbound-entry-grid .action-field {
    grid-column: 5 / 6 !important;
}

@media (max-width: 1180px) {
    html[data-theme] body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .wms-compact-cockpit,
    body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .wms-compact-cockpit {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 720px) {
    html[data-theme] body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .ops-entry-grid > *,
    body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .ops-entry-grid > * {
        grid-column: auto !important;
    }
}

/* ==================================================
WMS Desktop Workspace Full Width
Keep the WMS sidebar anchored to the left work area on large screens.
=================================================== */

html[data-theme] body.wms-module-shell.wms-refactor-shell .clean-module-layout,
body.wms-module-shell.wms-refactor-shell .clean-module-layout {
    display: grid !important;
    grid-template-columns: 260px minmax(0, 1fr) !important;
    gap: 18px !important;
    align-items: start !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 16px clamp(12px, 1.2vw, 24px) 28px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

html[data-theme] body.wms-module-shell.wms-refactor-shell .clean-module-layout > .clean-module-sidebar,
body.wms-module-shell.wms-refactor-shell .clean-module-layout > .clean-module-sidebar,
html[data-theme] body.wms-module-shell.wms-refactor-shell .clean-module-layout > .internal-module-nav,
body.wms-module-shell.wms-refactor-shell .clean-module-layout > .internal-module-nav,
html[data-theme] body.wms-module-shell.wms-refactor-shell .clean-module-layout > :is(.information-module-nav, .info-sidebar),
body.wms-module-shell.wms-refactor-shell .clean-module-layout > :is(.information-module-nav, .info-sidebar) {
    grid-column: 1 !important;
    width: 260px !important;
    min-width: 260px !important;
    max-width: 260px !important;
    margin: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    align-self: start !important;
    justify-self: start !important;
    box-sizing: border-box !important;
}

html[data-theme] body.wms-module-shell.wms-refactor-shell .clean-module-layout > .clean-module-sidebar :is(.information-sidebar-card, .hris-module-disclosure, .sidebar-menu),
body.wms-module-shell.wms-refactor-shell .clean-module-layout > .clean-module-sidebar :is(.information-sidebar-card, .hris-module-disclosure, .sidebar-menu) {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

html[data-theme] body.wms-module-shell.wms-refactor-shell .clean-module-layout > .clean-content-panel,
body.wms-module-shell.wms-refactor-shell .clean-module-layout > .clean-content-panel,
html[data-theme] body.wms-module-shell.wms-refactor-shell .clean-module-layout > :is(.internal-module-panel, .information-panel, .content-panel),
body.wms-module-shell.wms-refactor-shell .clean-module-layout > :is(.internal-module-panel, .information-panel, .content-panel) {
    grid-column: 2 !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    align-self: stretch !important;
    box-sizing: border-box !important;
}

html[data-theme] body.wms-module-shell.wms-refactor-shell .clean-content-panel > :is(.page-hero, .flash-stack, .page-content, .page-content-bleed),
body.wms-module-shell.wms-refactor-shell .clean-content-panel > :is(.page-hero, .flash-stack, .page-content, .page-content-bleed) {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
}

html[data-theme] body.wms-module-shell.wms-refactor-shell .request-compact-target,
html[data-theme] body.wms-module-shell.wms-refactor-shell .request-compact-v3,
body.wms-module-shell.wms-refactor-shell .request-compact-target,
body.wms-module-shell.wms-refactor-shell .request-compact-v3 {
    width: 100% !important;
    max-width: 1280px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

html[data-theme] body.wms-module-shell.wms-refactor-shell :is(.stock-opname-page, .stock-opname-shell, .so-compact-shell),
body.wms-module-shell.wms-refactor-shell :is(.stock-opname-page, .stock-opname-shell, .so-compact-shell) {
    min-width: 0 !important;
    width: 100% !important;
    max-width: none !important;
}

html[data-theme] body.wms-module-shell.wms-refactor-shell :is(.stock-opname-table-box, .so-table-shell, .stock-table-viewport),
body.wms-module-shell.wms-refactor-shell :is(.stock-opname-table-box, .so-table-shell, .stock-table-viewport) {
    max-width: 100% !important;
    overflow-x: auto !important;
}

html[data-theme] body.wms-module-shell.wms-refactor-shell :is(.stock-opname-confirm-backdrop, .request-picker-backdrop, .modal-backdrop, [role="dialog"]),
body.wms-module-shell.wms-refactor-shell :is(.stock-opname-confirm-backdrop, .request-picker-backdrop, .modal-backdrop, [role="dialog"]) {
    z-index: 1200;
}

@media (max-width: 1366px) {
    html[data-theme] body.wms-module-shell.wms-refactor-shell .clean-module-layout,
    body.wms-module-shell.wms-refactor-shell .clean-module-layout {
        grid-template-columns: 240px minmax(0, 1fr) !important;
        gap: 16px !important;
        padding-inline: 14px !important;
    }

    html[data-theme] body.wms-module-shell.wms-refactor-shell .clean-module-layout > .clean-module-sidebar,
    body.wms-module-shell.wms-refactor-shell .clean-module-layout > .clean-module-sidebar,
    html[data-theme] body.wms-module-shell.wms-refactor-shell .clean-module-layout > .internal-module-nav,
    body.wms-module-shell.wms-refactor-shell .clean-module-layout > .internal-module-nav,
    html[data-theme] body.wms-module-shell.wms-refactor-shell .clean-module-layout > :is(.information-module-nav, .info-sidebar),
    body.wms-module-shell.wms-refactor-shell .clean-module-layout > :is(.information-module-nav, .info-sidebar) {
        width: 240px !important;
        min-width: 240px !important;
        max-width: 240px !important;
    }
}

@media (max-width: 900px) {
    html[data-theme] body.wms-module-shell.wms-refactor-shell .clean-module-layout,
    body.wms-module-shell.wms-refactor-shell .clean-module-layout {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 14px !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 12px !important;
    }

    html[data-theme] body.wms-module-shell.wms-refactor-shell .clean-module-layout > .clean-module-sidebar,
    body.wms-module-shell.wms-refactor-shell .clean-module-layout > .clean-module-sidebar,
    html[data-theme] body.wms-module-shell.wms-refactor-shell .clean-module-layout > .internal-module-nav,
    body.wms-module-shell.wms-refactor-shell .clean-module-layout > .internal-module-nav,
    html[data-theme] body.wms-module-shell.wms-refactor-shell .clean-module-layout > :is(.information-module-nav, .info-sidebar),
    body.wms-module-shell.wms-refactor-shell .clean-module-layout > :is(.information-module-nav, .info-sidebar),
    html[data-theme] body.wms-module-shell.wms-refactor-shell .clean-module-layout > .clean-content-panel,
    body.wms-module-shell.wms-refactor-shell .clean-module-layout > .clean-content-panel,
    html[data-theme] body.wms-module-shell.wms-refactor-shell .clean-module-layout > :is(.internal-module-panel, .information-panel, .content-panel),
    body.wms-module-shell.wms-refactor-shell .clean-module-layout > :is(.internal-module-panel, .information-panel, .content-panel) {
        grid-column: 1 !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        position: static !important;
    }
}

/* ==================================================
Request / WMS Shell And Modal Validation Guard
Keep shell full-width and dialog layers above sticky chrome
=================================================== */

:root {
    --wms-z-sidebar: 100;
    --wms-z-topbar: 200;
    --wms-z-dropdown: 1000;
    --wms-z-modal-backdrop: 9000;
    --wms-z-modal: 9010;
    --wms-z-toast: 9500;
}

html[data-theme] body.wms-module-shell.wms-refactor-shell .page-content.page-content-bleed,
html[data-theme] body.wms-module-shell.wms-refactor-shell .page-content.hris-clean-shell,
body.wms-module-shell.wms-refactor-shell .page-content.page-content-bleed,
body.wms-module-shell.wms-refactor-shell .page-content.hris-clean-shell {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 20px clamp(12px, 1.2vw, 24px) 34px !important;
    box-sizing: border-box !important;
}

html[data-theme] body.wms-module-shell.wms-refactor-shell .clean-module-layout,
body.wms-module-shell.wms-refactor-shell .clean-module-layout {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

html[data-theme] body.wms-module-shell.wms-refactor-shell :is(.internal-module-nav, .clean-module-sidebar, .info-sidebar),
body.wms-module-shell.wms-refactor-shell :is(.internal-module-nav, .clean-module-sidebar, .info-sidebar) {
    z-index: var(--wms-z-sidebar) !important;
}

html[data-theme] body.wms-module-shell.wms-refactor-shell :is(.module-header, .internal-app-topbar.internal-shell-header, [data-internal-base-header]),
body.wms-module-shell.wms-refactor-shell :is(.module-header, .internal-app-topbar.internal-shell-header, [data-internal-base-header]) {
    z-index: var(--wms-z-topbar) !important;
}

html[data-theme] body.wms-module-shell.wms-refactor-shell .topbar-dropdown,
body.wms-module-shell.wms-refactor-shell .topbar-dropdown {
    z-index: var(--wms-z-dropdown) !important;
}

html[data-theme] body.request-workflow-shell .picker-modal,
body.request-workflow-shell .picker-modal {
    position: fixed !important;
    inset: 0 !important;
    z-index: calc(var(--wms-z-modal-backdrop) - 10) !important;
    display: block !important;
    pointer-events: none !important;
}

html[data-theme] body.request-workflow-shell .picker-modal-backdrop,
body.request-workflow-shell .picker-modal-backdrop {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: var(--wms-z-modal-backdrop) !important;
    background: rgba(7, 17, 31, 0.72) !important;
    pointer-events: auto !important;
}

html[data-theme] body.request-workflow-shell .picker-modal-panel,
body.request-workflow-shell .picker-modal-panel {
    position: fixed !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: min(1120px, calc(100vw - 48px)) !important;
    max-width: calc(100vw - 48px) !important;
    max-height: calc(100vh - 72px) !important;
    overflow: hidden !important;
    z-index: var(--wms-z-modal) !important;
    pointer-events: auto !important;
}

html[data-theme] body.request-workflow-shell .picker-modal .picker-results-box,
body.request-workflow-shell .picker-modal .picker-results-box {
    max-height: calc(100vh - 240px) !important;
    overflow: auto !important;
}

html[data-theme] body.request-workflow-shell.modal-open,
body.request-workflow-shell.modal-open {
    overflow: hidden !important;
}

html[data-theme] body.request-workflow-shell .information-toast,
body.request-workflow-shell .information-toast {
    z-index: var(--wms-z-toast) !important;
}

@media (max-width: 900px) {
    html[data-theme] body.wms-module-shell.wms-refactor-shell .page-content.page-content-bleed,
    html[data-theme] body.wms-module-shell.wms-refactor-shell .page-content.hris-clean-shell,
    body.wms-module-shell.wms-refactor-shell .page-content.page-content-bleed,
    body.wms-module-shell.wms-refactor-shell .page-content.hris-clean-shell {
        padding: 12px !important;
    }
}

/* ==================================================
Request Authenticated QA Safety Guard
Keep WMS shell stable and ensure picker modal fully owns the viewport
=================================================== */

html[data-theme] body.wms-module-shell.wms-refactor-shell .clean-module-layout,
body.wms-module-shell.wms-refactor-shell .clean-module-layout {
    justify-content: stretch !important;
    place-content: start stretch !important;
}

html[data-theme] body.wms-module-shell.wms-refactor-shell .clean-module-layout > :is(.internal-module-nav, .information-module-nav, .clean-module-sidebar, .info-sidebar),
body.wms-module-shell.wms-refactor-shell .clean-module-layout > :is(.internal-module-nav, .information-module-nav, .clean-module-sidebar, .info-sidebar) {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: sticky !important;
    top: 146px !important;
}

html[data-theme] body.wms-module-shell.wms-refactor-shell .clean-module-layout > :is(.clean-content-panel, .internal-module-panel, .information-panel, .content-panel),
body.wms-module-shell.wms-refactor-shell .clean-module-layout > :is(.clean-content-panel, .internal-module-panel, .information-panel, .content-panel) {
    overflow: visible !important;
}

html[data-theme] body.request-workflow-shell .picker-modal[hidden],
body.request-workflow-shell .picker-modal[hidden] {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

html[data-theme] body.request-workflow-shell .picker-modal:not([hidden]),
body.request-workflow-shell .picker-modal:not([hidden]) {
    display: block !important;
    visibility: visible !important;
}

html[data-theme] body.request-workflow-shell .picker-modal,
body.request-workflow-shell .picker-modal {
    isolation: isolate !important;
}

html[data-theme] body.request-workflow-shell.modal-open :is(.internal-module-nav, .information-module-nav, .clean-module-sidebar, .info-sidebar, .module-header, .internal-app-topbar.internal-shell-header, [data-internal-base-header], .topbar-dropdown),
body.request-workflow-shell.modal-open :is(.internal-module-nav, .information-module-nav, .clean-module-sidebar, .info-sidebar, .module-header, .internal-app-topbar.internal-shell-header, [data-internal-base-header], .topbar-dropdown) {
    pointer-events: none !important;
}

html[data-theme] body.request-workflow-shell.modal-open .picker-modal,
html[data-theme] body.request-workflow-shell.modal-open .picker-modal-backdrop,
html[data-theme] body.request-workflow-shell.modal-open .picker-modal-panel,
body.request-workflow-shell.modal-open .picker-modal,
body.request-workflow-shell.modal-open .picker-modal-backdrop,
body.request-workflow-shell.modal-open .picker-modal-panel {
    pointer-events: auto !important;
}

html[data-theme] body.internal-clean-page-shell.wms-module-shell.wms-refactor-shell:not(.ai-assistant-shell):not(.pos-clean-shell):not(.bjas-document-shell) .clean-module-layout:not(.clean-module-layout--no-sidebar),
body.internal-clean-page-shell.wms-module-shell.wms-refactor-shell:not(.ai-assistant-shell):not(.pos-clean-shell):not(.bjas-document-shell) .clean-module-layout:not(.clean-module-layout--no-sidebar) {
    display: grid !important;
    grid-template-columns: 260px minmax(0, 1fr) !important;
    gap: 18px !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: start !important;
    justify-content: stretch !important;
    place-content: start stretch !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

html[data-theme] body.internal-clean-page-shell.wms-module-shell.wms-refactor-shell:not(.ai-assistant-shell):not(.pos-clean-shell):not(.bjas-document-shell) .clean-module-layout:not(.clean-module-layout--no-sidebar) > :is(.internal-module-nav, .information-module-nav, .clean-module-sidebar, .info-sidebar),
body.internal-clean-page-shell.wms-module-shell.wms-refactor-shell:not(.ai-assistant-shell):not(.pos-clean-shell):not(.bjas-document-shell) .clean-module-layout:not(.clean-module-layout--no-sidebar) > :is(.internal-module-nav, .information-module-nav, .clean-module-sidebar, .info-sidebar) {
    width: 260px !important;
    min-width: 260px !important;
    max-width: 260px !important;
    margin: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    align-self: start !important;
    justify-self: start !important;
    z-index: var(--wms-z-sidebar) !important;
}

html[data-theme] body.internal-clean-page-shell.wms-module-shell.wms-refactor-shell:not(.ai-assistant-shell):not(.pos-clean-shell):not(.bjas-document-shell) .clean-module-layout:not(.clean-module-layout--no-sidebar) > :is(.clean-content-panel, .internal-module-panel, .information-panel, .content-panel),
body.internal-clean-page-shell.wms-module-shell.wms-refactor-shell:not(.ai-assistant-shell):not(.pos-clean-shell):not(.bjas-document-shell) .clean-module-layout:not(.clean-module-layout--no-sidebar) > :is(.clean-content-panel, .internal-module-panel, .information-panel, .content-panel) {
    min-width: 0 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    overflow: visible !important;
    box-sizing: border-box !important;
}

@media (max-width: 1366px) {
    html[data-theme] body.internal-clean-page-shell.wms-module-shell.wms-refactor-shell:not(.ai-assistant-shell):not(.pos-clean-shell):not(.bjas-document-shell) .clean-module-layout:not(.clean-module-layout--no-sidebar),
    body.internal-clean-page-shell.wms-module-shell.wms-refactor-shell:not(.ai-assistant-shell):not(.pos-clean-shell):not(.bjas-document-shell) .clean-module-layout:not(.clean-module-layout--no-sidebar) {
        grid-template-columns: 240px minmax(0, 1fr) !important;
        gap: 16px !important;
    }

    html[data-theme] body.internal-clean-page-shell.wms-module-shell.wms-refactor-shell:not(.ai-assistant-shell):not(.pos-clean-shell):not(.bjas-document-shell) .clean-module-layout:not(.clean-module-layout--no-sidebar) > :is(.internal-module-nav, .information-module-nav, .clean-module-sidebar, .info-sidebar),
    body.internal-clean-page-shell.wms-module-shell.wms-refactor-shell:not(.ai-assistant-shell):not(.pos-clean-shell):not(.bjas-document-shell) .clean-module-layout:not(.clean-module-layout--no-sidebar) > :is(.internal-module-nav, .information-module-nav, .clean-module-sidebar, .info-sidebar) {
        width: 240px !important;
        min-width: 240px !important;
        max-width: 240px !important;
    }
}

@media (max-width: 900px) {
    html[data-theme] body.internal-clean-page-shell.wms-module-shell.wms-refactor-shell:not(.ai-assistant-shell):not(.pos-clean-shell):not(.bjas-document-shell) .clean-module-layout:not(.clean-module-layout--no-sidebar),
    body.internal-clean-page-shell.wms-module-shell.wms-refactor-shell:not(.ai-assistant-shell):not(.pos-clean-shell):not(.bjas-document-shell) .clean-module-layout:not(.clean-module-layout--no-sidebar) {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 14px !important;
    }

    html[data-theme] body.internal-clean-page-shell.wms-module-shell.wms-refactor-shell:not(.ai-assistant-shell):not(.pos-clean-shell):not(.bjas-document-shell) .clean-module-layout:not(.clean-module-layout--no-sidebar) > :is(.internal-module-nav, .information-module-nav, .clean-module-sidebar, .info-sidebar),
    body.internal-clean-page-shell.wms-module-shell.wms-refactor-shell:not(.ai-assistant-shell):not(.pos-clean-shell):not(.bjas-document-shell) .clean-module-layout:not(.clean-module-layout--no-sidebar) > :is(.internal-module-nav, .information-module-nav, .clean-module-sidebar, .info-sidebar),
    html[data-theme] body.internal-clean-page-shell.wms-module-shell.wms-refactor-shell:not(.ai-assistant-shell):not(.pos-clean-shell):not(.bjas-document-shell) .clean-module-layout:not(.clean-module-layout--no-sidebar) > :is(.clean-content-panel, .internal-module-panel, .information-panel, .content-panel),
    body.internal-clean-page-shell.wms-module-shell.wms-refactor-shell:not(.ai-assistant-shell):not(.pos-clean-shell):not(.bjas-document-shell) .clean-module-layout:not(.clean-module-layout--no-sidebar) > :is(.clean-content-panel, .internal-module-panel, .information-panel, .content-panel) {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }
}

/* ==================================================
Disable table resizer handles globally
User requested no row/column resize UI on all pages
================================================== */
html[data-theme] body :is(.table-col-resizer, .table-row-resizer),
body :is(.table-col-resizer, .table-row-resizer) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    min-height: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* ==================================================
Stock Opname desktop no-resize compact table
Keep long product names visible without horizontal drag
================================================== */
html[data-theme] body.stock-opname-page-shell :is(.table-col-resizer, .table-row-resizer),
body.stock-opname-page-shell :is(.table-col-resizer, .table-row-resizer) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

html[data-theme] body.stock-opname-page-shell .so-table-wrap,
body.stock-opname-page-shell .so-table-wrap {
    overflow: visible !important;
}

html[data-theme] body.stock-opname-page-shell .stock-opname-table.so-table,
body.stock-opname-page-shell .stock-opname-table.so-table {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    table-layout: fixed !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

html[data-theme] body.stock-opname-page-shell .stock-opname-table.so-table th,
html[data-theme] body.stock-opname-page-shell .stock-opname-table.so-table td,
body.stock-opname-page-shell .stock-opname-table.so-table th,
body.stock-opname-page-shell .stock-opname-table.so-table td {
    min-width: 0 !important;
    padding: 6px 8px !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    vertical-align: top !important;
}

html[data-theme] body.stock-opname-page-shell .stock-opname-table.so-table thead th,
body.stock-opname-page-shell .stock-opname-table.so-table thead th {
    height: auto !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    font-size: 11px !important;
    line-height: 1.15 !important;
    white-space: normal !important;
    word-break: break-word !important;
}

html[data-theme] body.stock-opname-page-shell .stock-opname-table.so-table tbody tr,
body.stock-opname-page-shell .stock-opname-table.so-table tbody tr {
    height: auto !important;
}

html[data-theme] body.stock-opname-page-shell .stock-opname-table.so-table tbody td:nth-child(1),
html[data-theme] body.stock-opname-page-shell .stock-opname-table.so-table thead th:nth-child(1),
body.stock-opname-page-shell .stock-opname-table.so-table tbody td:nth-child(1),
body.stock-opname-page-shell .stock-opname-table.so-table thead th:nth-child(1) {
    width: 9% !important;
}

html[data-theme] body.stock-opname-page-shell .stock-opname-table.so-table tbody td:nth-child(2),
html[data-theme] body.stock-opname-page-shell .stock-opname-table.so-table thead th:nth-child(2),
body.stock-opname-page-shell .stock-opname-table.so-table tbody td:nth-child(2),
body.stock-opname-page-shell .stock-opname-table.so-table thead th:nth-child(2) {
    width: 26% !important;
}

html[data-theme] body.stock-opname-page-shell .stock-opname-table.so-table tbody td:nth-child(3),
html[data-theme] body.stock-opname-page-shell .stock-opname-table.so-table thead th:nth-child(3),
body.stock-opname-page-shell .stock-opname-table.so-table tbody td:nth-child(3),
body.stock-opname-page-shell .stock-opname-table.so-table thead th:nth-child(3) {
    width: 10% !important;
}

html[data-theme] body.stock-opname-page-shell .stock-opname-table.so-table[data-dual-area="0"] tbody td:nth-child(4),
html[data-theme] body.stock-opname-page-shell .stock-opname-table.so-table[data-dual-area="0"] thead th:nth-child(4),
body.stock-opname-page-shell .stock-opname-table.so-table[data-dual-area="0"] tbody td:nth-child(4),
body.stock-opname-page-shell .stock-opname-table.so-table[data-dual-area="0"] thead th:nth-child(4) {
    width: 13% !important;
}

html[data-theme] body.stock-opname-page-shell .stock-opname-table.so-table[data-dual-area="0"] tbody td:nth-child(5),
html[data-theme] body.stock-opname-page-shell .stock-opname-table.so-table[data-dual-area="0"] thead th:nth-child(5),
body.stock-opname-page-shell .stock-opname-table.so-table[data-dual-area="0"] tbody td:nth-child(5),
body.stock-opname-page-shell .stock-opname-table.so-table[data-dual-area="0"] thead th:nth-child(5) {
    width: 24% !important;
}

html[data-theme] body.stock-opname-page-shell .stock-opname-table.so-table[data-dual-area="0"] tbody td:nth-child(6),
html[data-theme] body.stock-opname-page-shell .stock-opname-table.so-table[data-dual-area="0"] thead th:nth-child(6),
body.stock-opname-page-shell .stock-opname-table.so-table[data-dual-area="0"] tbody td:nth-child(6),
body.stock-opname-page-shell .stock-opname-table.so-table[data-dual-area="0"] thead th:nth-child(6) {
    width: 18% !important;
}

html[data-theme] body.stock-opname-page-shell .stock-opname-table.so-table[data-dual-area="1"] tbody td:nth-child(4),
html[data-theme] body.stock-opname-page-shell .stock-opname-table.so-table[data-dual-area="1"] thead th:nth-child(4),
body.stock-opname-page-shell .stock-opname-table.so-table[data-dual-area="1"] tbody td:nth-child(4),
body.stock-opname-page-shell .stock-opname-table.so-table[data-dual-area="1"] thead th:nth-child(4) {
    width: 8% !important;
}

html[data-theme] body.stock-opname-page-shell .stock-opname-table.so-table[data-dual-area="1"] tbody td:nth-child(5),
html[data-theme] body.stock-opname-page-shell .stock-opname-table.so-table[data-dual-area="1"] thead th:nth-child(5),
body.stock-opname-page-shell .stock-opname-table.so-table[data-dual-area="1"] tbody td:nth-child(5),
body.stock-opname-page-shell .stock-opname-table.so-table[data-dual-area="1"] thead th:nth-child(5) {
    width: 12% !important;
}

html[data-theme] body.stock-opname-page-shell .stock-opname-table.so-table[data-dual-area="1"] tbody td:nth-child(6),
html[data-theme] body.stock-opname-page-shell .stock-opname-table.so-table[data-dual-area="1"] thead th:nth-child(6),
body.stock-opname-page-shell .stock-opname-table.so-table[data-dual-area="1"] tbody td:nth-child(6),
body.stock-opname-page-shell .stock-opname-table.so-table[data-dual-area="1"] thead th:nth-child(6) {
    width: 7% !important;
}

html[data-theme] body.stock-opname-page-shell .stock-opname-table.so-table[data-dual-area="1"] tbody td:nth-child(7),
html[data-theme] body.stock-opname-page-shell .stock-opname-table.so-table[data-dual-area="1"] thead th:nth-child(7),
body.stock-opname-page-shell .stock-opname-table.so-table[data-dual-area="1"] tbody td:nth-child(7),
body.stock-opname-page-shell .stock-opname-table.so-table[data-dual-area="1"] thead th:nth-child(7) {
    width: 8% !important;
}

html[data-theme] body.stock-opname-page-shell .stock-opname-table.so-table[data-dual-area="1"] tbody td:nth-child(8),
html[data-theme] body.stock-opname-page-shell .stock-opname-table.so-table[data-dual-area="1"] thead th:nth-child(8),
body.stock-opname-page-shell .stock-opname-table.so-table[data-dual-area="1"] tbody td:nth-child(8),
body.stock-opname-page-shell .stock-opname-table.so-table[data-dual-area="1"] thead th:nth-child(8) {
    width: 12% !important;
}

html[data-theme] body.stock-opname-page-shell .stock-opname-table.so-table[data-dual-area="1"] tbody td:nth-child(9),
html[data-theme] body.stock-opname-page-shell .stock-opname-table.so-table[data-dual-area="1"] thead th:nth-child(9),
body.stock-opname-page-shell .stock-opname-table.so-table[data-dual-area="1"] tbody td:nth-child(9),
body.stock-opname-page-shell .stock-opname-table.so-table[data-dual-area="1"] thead th:nth-child(9) {
    width: 8% !important;
}

html[data-theme] body.stock-opname-page-shell .stock-opname-table.so-table .stock-opname-product-cell,
body.stock-opname-page-shell .stock-opname-table.so-table .stock-opname-product-cell {
    min-width: 0 !important;
}

html[data-theme] body.stock-opname-page-shell .stock-opname-table.so-table .stock-opname-product-cell strong,
body.stock-opname-page-shell .stock-opname-table.so-table .stock-opname-product-cell strong {
    display: block !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    font-size: 13px !important;
    line-height: 1.22 !important;
}

html[data-theme] body.stock-opname-page-shell .stock-opname-table.so-table .stock-opname-product-cell strong.is-name-long,
body.stock-opname-page-shell .stock-opname-table.so-table .stock-opname-product-cell strong.is-name-long {
    font-size: 12px !important;
}

html[data-theme] body.stock-opname-page-shell .stock-opname-table.so-table .stock-opname-product-cell strong.is-name-very-long,
body.stock-opname-page-shell .stock-opname-table.so-table .stock-opname-product-cell strong.is-name-very-long {
    font-size: 11px !important;
    line-height: 1.18 !important;
}

html[data-theme] body.stock-opname-page-shell .stock-opname-table.so-table .stock-opname-product-cell small,
body.stock-opname-page-shell .stock-opname-table.so-table .stock-opname-product-cell small {
    display: block !important;
    margin-top: 4px !important;
    font-size: 10px !important;
    line-height: 1.25 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
}

html[data-theme] body.stock-opname-page-shell .stock-opname-table.so-table td:nth-child(3),
body.stock-opname-page-shell .stock-opname-table.so-table td:nth-child(3) {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
}

html[data-theme] body.stock-opname-page-shell .stock-opname-table.so-table .stock-opname-input-cell,
body.stock-opname-page-shell .stock-opname-table.so-table .stock-opname-input-cell {
    width: 100% !important;
}

html[data-theme] body.stock-opname-page-shell .stock-opname-table.so-table .stock-opname-input-cell input,
body.stock-opname-page-shell .stock-opname-table.so-table .stock-opname-input-cell input {
    width: 100% !important;
    min-width: 0 !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 6px 8px !important;
    font-size: 13px !important;
}

/* ==================================================
Adaptive person-name handling across internal modules
Keep long people/customer names readable without hard clipping
================================================== */
html[data-theme] body:is(.internal-module-shell, .internal-clean-page-shell, .attendance-page-shell, .crm-page-shell, .pos-page-wide)
    :is(.adaptive-name-text, .hris-overtime-staff-name, .biometric-recap-name-cell, .schedule-profile-head strong, .attendance-overview-head h2, .attendance-identity-grid strong, .crm-page-shell tbody td:first-child strong, .pos-page-wide tbody td:first-child strong),
body:is(.internal-module-shell, .internal-clean-page-shell, .attendance-page-shell, .crm-page-shell, .pos-page-wide)
    :is(.adaptive-name-text, .hris-overtime-staff-name, .biometric-recap-name-cell, .schedule-profile-head strong, .attendance-overview-head h2, .attendance-identity-grid strong, .crm-page-shell tbody td:first-child strong, .pos-page-wide tbody td:first-child strong) {
    display: block !important;
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    line-height: 1.2 !important;
}

html[data-theme] body:is(.internal-module-shell, .internal-clean-page-shell, .attendance-page-shell, .crm-page-shell, .pos-page-wide)
    :is(.adaptive-name-text, .hris-overtime-staff-name, .biometric-recap-name-cell, .schedule-profile-head strong, .attendance-overview-head h2, .attendance-identity-grid strong, .crm-page-shell tbody td:first-child strong, .pos-page-wide tbody td:first-child strong).is-name-long,
body:is(.internal-module-shell, .internal-clean-page-shell, .attendance-page-shell, .crm-page-shell, .pos-page-wide)
    :is(.adaptive-name-text, .hris-overtime-staff-name, .biometric-recap-name-cell, .schedule-profile-head strong, .attendance-overview-head h2, .attendance-identity-grid strong, .crm-page-shell tbody td:first-child strong, .pos-page-wide tbody td:first-child strong).is-name-long {
    font-size: 0.94em !important;
}

html[data-theme] body:is(.internal-module-shell, .internal-clean-page-shell, .attendance-page-shell, .crm-page-shell, .pos-page-wide)
    :is(.adaptive-name-text, .hris-overtime-staff-name, .biometric-recap-name-cell, .schedule-profile-head strong, .attendance-overview-head h2, .attendance-identity-grid strong, .crm-page-shell tbody td:first-child strong, .pos-page-wide tbody td:first-child strong).is-name-very-long,
body:is(.internal-module-shell, .internal-clean-page-shell, .attendance-page-shell, .crm-page-shell, .pos-page-wide)
    :is(.adaptive-name-text, .hris-overtime-staff-name, .biometric-recap-name-cell, .schedule-profile-head strong, .attendance-overview-head h2, .attendance-identity-grid strong, .crm-page-shell tbody td:first-child strong, .pos-page-wide tbody td:first-child strong).is-name-very-long {
    font-size: 0.88em !important;
    line-height: 1.14 !important;
}

@media (min-width: 901px) {
    html[data-theme] body.stock-opname-page-shell .so-work-area,
    body.stock-opname-page-shell .so-work-area {
        min-height: clamp(420px, calc(100dvh - 320px), 780px) !important;
    }

    html[data-theme] body.stock-opname-page-shell .so-table-wrap,
    body.stock-opname-page-shell .so-table-wrap {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        max-height: clamp(320px, calc(100dvh - 370px), 680px) !important;
        overflow-x: auto !important;
        overflow-y: auto !important;
        box-sizing: border-box !important;
        padding-bottom: clamp(84px, 9vh, 116px) !important;
        scroll-padding-bottom: clamp(84px, 9vh, 116px) !important;
        overscroll-behavior: contain !important;
        scrollbar-gutter: stable !important;
        -webkit-overflow-scrolling: touch !important;
    }

    html[data-theme] body.stock-opname-page-shell .stock-opname-table.so-table thead th,
    body.stock-opname-page-shell .stock-opname-table.so-table thead th {
        position: sticky !important;
        top: 0 !important;
        z-index: 4 !important;
        background: #f7fbff !important;
        box-shadow: inset 0 -1px 0 rgba(205, 218, 232, 0.92) !important;
    }
}

@media (min-width: 901px) and (max-height: 760px) {
    html[data-theme] body.stock-opname-page-shell .so-work-area,
    body.stock-opname-page-shell .so-work-area {
        min-height: 0 !important;
    }

    html[data-theme] body.stock-opname-page-shell .so-table-wrap,
    body.stock-opname-page-shell .so-table-wrap {
        max-height: clamp(220px, calc(100dvh - 300px), 420px) !important;
        padding-bottom: 0 !important;
        scroll-padding-bottom: 0 !important;
    }

    html[data-theme] body.stock-opname-page-shell .so-save-bar.so-action-bar,
    body.stock-opname-page-shell .so-save-bar.so-action-bar {
        position: relative !important;
        bottom: auto !important;
        margin-top: 12px !important;
    }
}

html[data-theme] body.internal-module-shell .hris-clean-shell .biometric-recap-table td.biometric-recap-name-cell,
body.internal-module-shell .hris-clean-shell .biometric-recap-table td.biometric-recap-name-cell,
html[data-theme] body.internal-clean-page-shell .hris-clean-shell .biometric-recap-table td.biometric-recap-name-cell,
body.internal-clean-page-shell .hris-clean-shell .biometric-recap-table td.biometric-recap-name-cell {
    display: table-cell !important;
    min-width: 136px !important;
    max-width: 190px !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
    line-height: 1.28 !important;
}

/* ==================================================
BJAS WMS Dashboard Compact Final
Loaded after the module shell CSS; scoped to WMS dashboard only.
================================================== */

html[data-theme] body.internal-wms-module-shell.internal-module-root-shell,
body.internal-wms-module-shell.internal-module-root-shell {
    min-height: 100vh !important;
    overflow-y: auto !important;
}

html[data-theme] body.internal-wms-module-shell.internal-module-root-shell .layout,
body.internal-wms-module-shell.internal-module-root-shell .layout,
html[data-theme] body.internal-wms-module-shell.internal-module-root-shell .main,
body.internal-wms-module-shell.internal-module-root-shell .main {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
}

html[data-theme] body.internal-wms-module-shell.internal-module-root-shell .internal-module-layout,
body.internal-wms-module-shell.internal-module-root-shell .internal-module-layout {
    height: auto !important;
    min-height: 0 !important;
    align-items: start !important;
    overflow: visible !important;
}

html[data-theme] body.internal-wms-module-shell.internal-module-root-shell .info-sidebar,
body.internal-wms-module-shell.internal-module-root-shell .info-sidebar,
html[data-theme] body.internal-wms-module-shell.internal-module-root-shell .information-sidebar-card,
body.internal-wms-module-shell.internal-module-root-shell .information-sidebar-card,
html[data-theme] body.internal-wms-module-shell.internal-module-root-shell .sidebar-menu,
body.internal-wms-module-shell.internal-module-root-shell .sidebar-menu {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    overflow-y: visible !important;
}

html[data-theme] body.internal-module-shell.internal-module-root-shell.internal-module-root-with-sidebar-shell.internal-wms-module-shell .page-content.hris-clean-shell .internal-module-layout > .info-sidebar,
body.internal-module-shell.internal-module-root-shell.internal-module-root-with-sidebar-shell.internal-wms-module-shell .page-content.hris-clean-shell .internal-module-layout > .info-sidebar,
html[data-theme] body.internal-module-shell.internal-module-root-shell.internal-module-root-with-sidebar-shell.internal-wms-module-shell .page-content.hris-clean-shell .info-sidebar .information-sidebar-card,
body.internal-module-shell.internal-module-root-shell.internal-module-root-with-sidebar-shell.internal-wms-module-shell .page-content.hris-clean-shell .info-sidebar .information-sidebar-card,
html[data-theme] body.internal-module-shell.internal-module-root-shell.internal-module-root-with-sidebar-shell.internal-wms-module-shell .page-content.hris-clean-shell .info-sidebar .sidebar-menu,
body.internal-module-shell.internal-module-root-shell.internal-module-root-with-sidebar-shell.internal-wms-module-shell .page-content.hris-clean-shell .info-sidebar .sidebar-menu {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    overflow-y: visible !important;
}

html[data-theme] body.internal-clean-page-shell.wms-module-shell.wms-dashboard-page-shell .clean-module-layout,
body.internal-clean-page-shell.wms-module-shell.wms-dashboard-page-shell .clean-module-layout {
    height: auto !important;
    min-height: 0 !important;
    align-items: start !important;
    overflow: visible !important;
}

html[data-theme] body.internal-clean-page-shell.wms-module-shell.wms-dashboard-page-shell .clean-module-layout > .clean-module-sidebar,
body.internal-clean-page-shell.wms-module-shell.wms-dashboard-page-shell .clean-module-layout > .clean-module-sidebar,
html[data-theme] body.internal-clean-page-shell.wms-module-shell.wms-dashboard-page-shell .clean-module-sidebar .information-sidebar-card,
body.internal-clean-page-shell.wms-module-shell.wms-dashboard-page-shell .clean-module-sidebar .information-sidebar-card,
html[data-theme] body.internal-clean-page-shell.wms-module-shell.wms-dashboard-page-shell .clean-module-sidebar .sidebar-menu,
body.internal-clean-page-shell.wms-module-shell.wms-dashboard-page-shell .clean-module-sidebar .sidebar-menu {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    overflow-y: visible !important;
}

html[data-theme] body.internal-clean-page-shell.wms-module-shell.wms-dashboard-page-shell .clean-module-layout > .clean-content-panel,
body.internal-clean-page-shell.wms-module-shell.wms-dashboard-page-shell .clean-module-layout > .clean-content-panel {
    height: auto !important;
    min-height: 0 !important;
    align-self: start !important;
    overflow: visible !important;
}

html[data-theme] body.internal-clean-page-shell.wms-module-shell.wms-refactor-shell.wms-dashboard-page-shell:not(.ai-assistant-shell):not(.pos-clean-shell):not(.bjas-document-shell) .clean-module-layout:not(.clean-module-layout--no-sidebar),
body.internal-clean-page-shell.wms-module-shell.wms-refactor-shell.wms-dashboard-page-shell:not(.ai-assistant-shell):not(.pos-clean-shell):not(.bjas-document-shell) .clean-module-layout:not(.clean-module-layout--no-sidebar) {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    align-items: start !important;
    overflow: visible !important;
}

html[data-theme] body.internal-clean-page-shell.wms-module-shell.wms-refactor-shell.wms-dashboard-page-shell:not(.ai-assistant-shell):not(.pos-clean-shell):not(.bjas-document-shell) .clean-module-layout:not(.clean-module-layout--no-sidebar) > .clean-module-sidebar,
body.internal-clean-page-shell.wms-module-shell.wms-refactor-shell.wms-dashboard-page-shell:not(.ai-assistant-shell):not(.pos-clean-shell):not(.bjas-document-shell) .clean-module-layout:not(.clean-module-layout--no-sidebar) > .clean-module-sidebar,
html[data-theme] body.internal-clean-page-shell.wms-module-shell.wms-refactor-shell.wms-dashboard-page-shell:not(.ai-assistant-shell):not(.pos-clean-shell):not(.bjas-document-shell) .clean-module-layout:not(.clean-module-layout--no-sidebar) > .clean-module-sidebar .information-sidebar-card,
body.internal-clean-page-shell.wms-module-shell.wms-refactor-shell.wms-dashboard-page-shell:not(.ai-assistant-shell):not(.pos-clean-shell):not(.bjas-document-shell) .clean-module-layout:not(.clean-module-layout--no-sidebar) > .clean-module-sidebar .information-sidebar-card,
html[data-theme] body.internal-clean-page-shell.wms-module-shell.wms-refactor-shell.wms-dashboard-page-shell:not(.ai-assistant-shell):not(.pos-clean-shell):not(.bjas-document-shell) .clean-module-layout:not(.clean-module-layout--no-sidebar) > .clean-module-sidebar .sidebar-menu,
body.internal-clean-page-shell.wms-module-shell.wms-refactor-shell.wms-dashboard-page-shell:not(.ai-assistant-shell):not(.pos-clean-shell):not(.bjas-document-shell) .clean-module-layout:not(.clean-module-layout--no-sidebar) > .clean-module-sidebar .sidebar-menu {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    overflow-y: visible !important;
}

html[data-theme] body.internal-clean-page-shell.wms-module-shell.wms-refactor-shell.wms-dashboard-page-shell:not(.ai-assistant-shell):not(.pos-clean-shell):not(.bjas-document-shell) .clean-module-layout:not(.clean-module-layout--no-sidebar) > .clean-content-panel,
body.internal-clean-page-shell.wms-module-shell.wms-refactor-shell.wms-dashboard-page-shell:not(.ai-assistant-shell):not(.pos-clean-shell):not(.bjas-document-shell) .clean-module-layout:not(.clean-module-layout--no-sidebar) > .clean-content-panel {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    align-self: start !important;
    overflow: visible !important;
}

html[data-theme] body.internal-wms-module-shell.internal-module-root-shell .sidebar-link,
body.internal-wms-module-shell.internal-module-root-shell .sidebar-link {
    min-height: 40px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

html[data-theme] body.internal-wms-module-shell.internal-module-root-shell .internal-module-panel,
body.internal-wms-module-shell.internal-module-root-shell .internal-module-panel {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    align-self: start !important;
    padding: 22px 24px 28px !important;
    overflow: visible !important;
}

html[data-theme] body.internal-wms-module-shell.internal-module-root-shell .information-panel-head,
body.internal-wms-module-shell.internal-module-root-shell .information-panel-head {
    display: block !important;
    max-width: 620px !important;
    margin: 0 0 20px !important;
    padding-bottom: 16px !important;
    border-bottom: 1px solid #dbe6f4 !important;
}

html[data-theme] body.internal-wms-module-shell.internal-module-root-shell .information-panel-head p,
body.internal-wms-module-shell.internal-module-root-shell .information-panel-head p {
    margin: 0 0 10px !important;
    font-size: 12px !important;
    line-height: 1.1 !important;
    letter-spacing: .18em !important;
}

html[data-theme] body.internal-wms-module-shell.internal-module-root-shell .information-panel-head h1,
body.internal-wms-module-shell.internal-module-root-shell .information-panel-head h1 {
    margin: 0 0 8px !important;
    font-size: clamp(34px, 3vw, 44px) !important;
    line-height: 1.04 !important;
    letter-spacing: 0 !important;
}

html[data-theme] body.internal-wms-module-shell.internal-module-root-shell .information-panel-head span,
body.internal-wms-module-shell.internal-module-root-shell .information-panel-head span {
    display: block !important;
    max-width: 520px !important;
    margin: 0 !important;
    text-align: left !important;
    font-size: 15px !important;
    line-height: 1.45 !important;
}

html[data-theme] body:is(.wms-module-shell.wms-dashboard-page-shell, .internal-wms-module-shell) .wms-dashboard-quick,
body:is(.wms-module-shell.wms-dashboard-page-shell, .internal-wms-module-shell) .wms-dashboard-quick {
    max-width: 1180px !important;
    min-height: 0 !important;
    height: auto !important;
}

html[data-theme] body:is(.wms-module-shell.wms-dashboard-page-shell, .internal-wms-module-shell) .wms-dashboard-quick-grid,
body:is(.wms-module-shell.wms-dashboard-page-shell, .internal-wms-module-shell) .wms-dashboard-quick-grid {
    gap: 18px !important;
    align-items: stretch !important;
}

html[data-theme] body:is(.wms-module-shell.wms-dashboard-page-shell, .internal-wms-module-shell) .wms-dashboard-quick-card,
body:is(.wms-module-shell.wms-dashboard-page-shell, .internal-wms-module-shell) .wms-dashboard-quick-card {
    min-height: 128px !important;
    padding: 16px 18px !important;
    grid-template-rows: auto auto auto !important;
    box-shadow: 0 10px 24px rgba(8, 31, 63, .06) !important;
}

html[data-theme] body:is(.wms-module-shell.wms-dashboard-page-shell, .internal-wms-module-shell) .wms-dashboard-quick-icon,
body:is(.wms-module-shell.wms-dashboard-page-shell, .internal-wms-module-shell) .wms-dashboard-quick-icon {
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
}

html[data-theme] body:is(.wms-module-shell.wms-dashboard-page-shell, .internal-wms-module-shell) .wms-dashboard-quick-icon img,
body:is(.wms-module-shell.wms-dashboard-page-shell, .internal-wms-module-shell) .wms-dashboard-quick-icon img {
    width: 26px !important;
    height: 26px !important;
}

html[data-theme] body:is(.wms-module-shell.wms-dashboard-page-shell, .internal-wms-module-shell) .wms-dashboard-quick-badge[hidden],
body:is(.wms-module-shell.wms-dashboard-page-shell, .internal-wms-module-shell) .wms-dashboard-quick-badge[hidden],
html[data-theme] body:is(.wms-module-shell.wms-dashboard-page-shell, .internal-wms-module-shell) .wms-dashboard-quick-badge.is-default,
body:is(.wms-module-shell.wms-dashboard-page-shell, .internal-wms-module-shell) .wms-dashboard-quick-badge.is-default {
    display: none !important;
}

html[data-theme] body:is(.wms-module-shell.wms-dashboard-page-shell, .internal-wms-module-shell) .wms-dashboard-quick-card strong,
body:is(.wms-module-shell.wms-dashboard-page-shell, .internal-wms-module-shell) .wms-dashboard-quick-card strong {
    margin-top: 10px !important;
    font-size: 18px !important;
    line-height: 1.15 !important;
}

html[data-theme] body:is(.wms-module-shell.wms-dashboard-page-shell, .internal-wms-module-shell) .wms-dashboard-quick-card small,
body:is(.wms-module-shell.wms-dashboard-page-shell, .internal-wms-module-shell) .wms-dashboard-quick-card small {
    margin-top: 6px !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
}

html[data-theme] body:is(.wms-module-shell.wms-dashboard-page-shell, .internal-wms-module-shell) .wms-dashboard-quick-arrow,
body:is(.wms-module-shell.wms-dashboard-page-shell, .internal-wms-module-shell) .wms-dashboard-quick-arrow {
    right: 18px !important;
    bottom: 14px !important;
    font-size: 20px !important;
}

@media (max-width: 1200px) {
    html[data-theme] body:is(.wms-module-shell.wms-dashboard-page-shell, .internal-wms-module-shell) .wms-dashboard-quick-grid,
    body:is(.wms-module-shell.wms-dashboard-page-shell, .internal-wms-module-shell) .wms-dashboard-quick-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 720px) {
    html[data-theme] body:is(.wms-module-shell.wms-dashboard-page-shell, .internal-wms-module-shell) .wms-dashboard-quick-card,
    body:is(.wms-module-shell.wms-dashboard-page-shell, .internal-wms-module-shell) .wms-dashboard-quick-card {
        min-height: 128px !important;
        padding: 18px !important;
    }
}

/* BJAS WMS Dashboard Compact Card Width Lock */
html[data-theme] body.internal-wms-module-shell.internal-module-root-shell .internal-module-panel:has(.wms-dashboard-quick),
body.internal-wms-module-shell.internal-module-root-shell .internal-module-panel:has(.wms-dashboard-quick),
html[data-theme] body.internal-clean-page-shell.wms-module-shell.wms-dashboard-page-shell .clean-content-panel:has(.wms-dashboard-quick),
body.internal-clean-page-shell.wms-module-shell.wms-dashboard-page-shell .clean-content-panel:has(.wms-dashboard-quick) {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    align-self: start !important;
    padding-bottom: 24px !important;
}

html[data-theme] body.internal-wms-module-shell.internal-module-root-shell .internal-module-panel:has(.wms-dashboard-quick) .information-panel-head,
body.internal-wms-module-shell.internal-module-root-shell .internal-module-panel:has(.wms-dashboard-quick) .information-panel-head {
    margin-bottom: 18px !important;
}

html[data-theme] body:is(.wms-module-shell.wms-dashboard-page-shell, .internal-wms-module-shell) .wms-dashboard-quick,
body:is(.wms-module-shell.wms-dashboard-page-shell, .internal-wms-module-shell) .wms-dashboard-quick {
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
}

html[data-theme] body:is(.wms-module-shell.wms-dashboard-page-shell, .internal-wms-module-shell) .wms-dashboard-quick-grid,
body:is(.wms-module-shell.wms-dashboard-page-shell, .internal-wms-module-shell) .wms-dashboard-quick-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 238px) !important;
    justify-content: start !important;
    align-items: stretch !important;
    gap: 14px !important;
    width: max-content !important;
    max-width: 100% !important;
}

html[data-theme] body:is(.wms-module-shell.wms-dashboard-page-shell, .internal-wms-module-shell) .wms-dashboard-quick-card,
body:is(.wms-module-shell.wms-dashboard-page-shell, .internal-wms-module-shell) .wms-dashboard-quick-card {
    width: 238px !important;
    min-width: 0 !important;
    max-width: 238px !important;
    min-height: 118px !important;
    padding: 14px 16px !important;
}

html[data-theme] body:is(.wms-module-shell.wms-dashboard-page-shell, .internal-wms-module-shell) .wms-dashboard-quick-icon,
body:is(.wms-module-shell.wms-dashboard-page-shell, .internal-wms-module-shell) .wms-dashboard-quick-icon {
    width: 40px !important;
    height: 40px !important;
}

html[data-theme] body:is(.wms-module-shell.wms-dashboard-page-shell, .internal-wms-module-shell) .wms-dashboard-quick-icon img,
body:is(.wms-module-shell.wms-dashboard-page-shell, .internal-wms-module-shell) .wms-dashboard-quick-icon img {
    width: 23px !important;
    height: 23px !important;
}

html[data-theme] body:is(.wms-module-shell.wms-dashboard-page-shell, .internal-wms-module-shell) .wms-dashboard-quick-card strong,
body:is(.wms-module-shell.wms-dashboard-page-shell, .internal-wms-module-shell) .wms-dashboard-quick-card strong {
    margin-top: 8px !important;
    font-size: 16px !important;
    line-height: 1.12 !important;
}

html[data-theme] body:is(.wms-module-shell.wms-dashboard-page-shell, .internal-wms-module-shell) .wms-dashboard-quick-card small,
body:is(.wms-module-shell.wms-dashboard-page-shell, .internal-wms-module-shell) .wms-dashboard-quick-card small {
    margin-top: 5px !important;
    font-size: 11px !important;
    line-height: 1.25 !important;
}

html[data-theme] body:is(.wms-module-shell.wms-dashboard-page-shell, .internal-wms-module-shell) .wms-dashboard-quick-arrow,
body:is(.wms-module-shell.wms-dashboard-page-shell, .internal-wms-module-shell) .wms-dashboard-quick-arrow {
    right: 14px !important;
    bottom: 12px !important;
}

@media (max-width: 1320px) {
    html[data-theme] body:is(.wms-module-shell.wms-dashboard-page-shell, .internal-wms-module-shell) .wms-dashboard-quick-grid,
    body:is(.wms-module-shell.wms-dashboard-page-shell, .internal-wms-module-shell) .wms-dashboard-quick-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        width: 100% !important;
    }

    html[data-theme] body:is(.wms-module-shell.wms-dashboard-page-shell, .internal-wms-module-shell) .wms-dashboard-quick-card,
    body:is(.wms-module-shell.wms-dashboard-page-shell, .internal-wms-module-shell) .wms-dashboard-quick-card {
        width: auto !important;
        max-width: none !important;
    }
}

/* ==================================================
Stock Opname Desktop Viewport Lock
Keep the header/sidebar from sliding under the global topbar.
Only the SO table should scroll on desktop.
================================================== */
@media (min-width: 901px) {
    html:has(body.stock-opname-page-shell),
    html[data-theme]:has(body.stock-opname-page-shell),
    body.stock-opname-page-shell {
        min-height: 100dvh !important;
        max-height: 100dvh !important;
        overflow: hidden !important;
    }

    html[data-theme] body.stock-opname-page-shell :is(.layout, .main, .page-content.page-content-bleed),
    body.stock-opname-page-shell :is(.layout, .main, .page-content.page-content-bleed) {
        min-height: 0 !important;
        max-height: 100dvh !important;
        overflow: hidden !important;
    }

    html[data-theme] body.stock-opname-page-shell .clean-module-layout,
    body.stock-opname-page-shell .clean-module-layout {
        height: calc(100dvh - 129px) !important;
        min-height: 0 !important;
        max-height: calc(100dvh - 129px) !important;
        align-items: start !important;
        overflow: hidden !important;
    }

    html[data-theme] body.stock-opname-page-shell .clean-module-sidebar,
    body.stock-opname-page-shell .clean-module-sidebar,
    html[data-theme] body.stock-opname-page-shell .clean-module-sidebar .information-sidebar-card,
    body.stock-opname-page-shell .clean-module-sidebar .information-sidebar-card,
    html[data-theme] body.stock-opname-page-shell .clean-module-sidebar .sidebar-menu,
    body.stock-opname-page-shell .clean-module-sidebar .sidebar-menu {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        overflow-y: visible !important;
    }

    html[data-theme] body.stock-opname-page-shell .clean-content-panel,
    body.stock-opname-page-shell .clean-content-panel {
        height: 100% !important;
        min-height: 0 !important;
        max-height: 100% !important;
        align-self: stretch !important;
        overflow: hidden !important;
    }

    html[data-theme] body.stock-opname-page-shell .wms-page-stack.stock-opname-shell.so-cockpit-page,
    body.stock-opname-page-shell .wms-page-stack.stock-opname-shell.so-cockpit-page {
        height: 100% !important;
        min-height: 0 !important;
        max-height: 100% !important;
        overflow: hidden !important;
    }

    html[data-theme] body.stock-opname-page-shell .so-work-area,
    body.stock-opname-page-shell .so-work-area {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        max-height: none !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }

    html[data-theme] body.stock-opname-page-shell .so-table-wrap,
    body.stock-opname-page-shell .so-table-wrap {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow-x: auto !important;
        overflow-y: auto !important;
        padding-bottom: 0 !important;
        scroll-padding-bottom: 0 !important;
    }

    html[data-theme] body.stock-opname-page-shell .so-save-bar.so-action-bar,
    body.stock-opname-page-shell .so-save-bar.so-action-bar {
        flex: 0 0 auto !important;
        position: relative !important;
        bottom: auto !important;
        margin-top: 8px !important;
    }
}

/* Spreadsheet Center */
html[data-theme] body.wms-module-shell.spreadsheet-center-page-shell .spreadsheet-center-page,
body.wms-module-shell.spreadsheet-center-page-shell .spreadsheet-center-page {
    display: grid;
    gap: 18px;
    width: 100%;
    min-width: 0;
}

html[data-theme] body.wms-module-shell.spreadsheet-center-page-shell .spreadsheet-center-meta,
body.wms-module-shell.spreadsheet-center-page-shell .spreadsheet-center-meta {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

html[data-theme] body.wms-module-shell.spreadsheet-center-page-shell .spreadsheet-center-filterband,
body.wms-module-shell.spreadsheet-center-page-shell .spreadsheet-center-filterband {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

html[data-theme] body.wms-module-shell.spreadsheet-center-page-shell .spreadsheet-filter-chip,
body.wms-module-shell.spreadsheet-center-page-shell .spreadsheet-filter-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.32);
    background: rgba(255, 255, 255, 0.82);
    color: #1e293b;
    font-weight: 600;
    text-decoration: none;
    box-sizing: border-box;
    transition: border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

html[data-theme] body.wms-module-shell.spreadsheet-center-page-shell .spreadsheet-filter-chip:hover,
body.wms-module-shell.spreadsheet-center-page-shell .spreadsheet-filter-chip:hover {
    border-color: rgba(37, 99, 235, 0.4);
    background: rgba(239, 246, 255, 0.92);
}

html[data-theme] body.wms-module-shell.spreadsheet-center-page-shell .spreadsheet-filter-chip.is-active,
body.wms-module-shell.spreadsheet-center-page-shell .spreadsheet-filter-chip.is-active {
    border-color: rgba(37, 99, 235, 0.5);
    background: #dbeafe;
    color: #1d4ed8;
    box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.18);
}

html[data-theme] body.wms-module-shell.spreadsheet-center-page-shell .spreadsheet-center-shell,
body.wms-module-shell.spreadsheet-center-page-shell .spreadsheet-center-shell {
    display: grid;
    grid-template-columns: minmax(320px, 420px) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
    width: 100%;
    min-width: 0;
}

html[data-theme] body.wms-module-shell.spreadsheet-center-page-shell .spreadsheet-list-panel,
html[data-theme] body.wms-module-shell.spreadsheet-center-page-shell .spreadsheet-preview-panel,
body.wms-module-shell.spreadsheet-center-page-shell .spreadsheet-list-panel,
body.wms-module-shell.spreadsheet-center-page-shell .spreadsheet-preview-panel {
    min-width: 0;
    width: 100%;
    margin: 0;
    box-sizing: border-box;
}

html[data-theme] body.wms-module-shell.spreadsheet-center-page-shell .spreadsheet-section-head,
body.wms-module-shell.spreadsheet-center-page-shell .spreadsheet-section-head {
    align-items: flex-start;
    gap: 16px;
}

html[data-theme] body.wms-module-shell.spreadsheet-center-page-shell .spreadsheet-list,
body.wms-module-shell.spreadsheet-center-page-shell .spreadsheet-list {
    display: grid;
    gap: 12px;
}

html[data-theme] body.wms-module-shell.spreadsheet-center-page-shell .spreadsheet-card,
body.wms-module-shell.spreadsheet-center-page-shell .spreadsheet-card {
    display: grid;
    gap: 12px;
    padding: 16px;
    border: 1px solid rgba(203, 213, 225, 0.78);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.94);
    box-sizing: border-box;
}

html[data-theme] body.wms-module-shell.spreadsheet-center-page-shell .spreadsheet-card.is-active,
body.wms-module-shell.spreadsheet-center-page-shell .spreadsheet-card.is-active {
    border-color: rgba(59, 130, 246, 0.46);
    box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.16);
}

html[data-theme] body.wms-module-shell.spreadsheet-center-page-shell .spreadsheet-card-head,
body.wms-module-shell.spreadsheet-center-page-shell .spreadsheet-card-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
}

html[data-theme] body.wms-module-shell.spreadsheet-center-page-shell .spreadsheet-card-head h3,
body.wms-module-shell.spreadsheet-center-page-shell .spreadsheet-card-head h3 {
    margin: 0;
    font-size: 20px;
    line-height: 1.2;
    color: #0f172a;
}

html[data-theme] body.wms-module-shell.spreadsheet-center-page-shell .spreadsheet-category-badge,
body.wms-module-shell.spreadsheet-center-page-shell .spreadsheet-category-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 8px;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(226, 232, 240, 0.82);
    color: #475569;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0;
    box-sizing: border-box;
}

html[data-theme] body.wms-module-shell.spreadsheet-center-page-shell .spreadsheet-card-copy,
body.wms-module-shell.spreadsheet-center-page-shell .spreadsheet-card-copy {
    margin: 0;
    color: #475569;
    line-height: 1.5;
}

html[data-theme] body.wms-module-shell.spreadsheet-center-page-shell .spreadsheet-link-row,
html[data-theme] body.wms-module-shell.spreadsheet-center-page-shell .spreadsheet-preview-meta,
body.wms-module-shell.spreadsheet-center-page-shell .spreadsheet-link-row,
body.wms-module-shell.spreadsheet-center-page-shell .spreadsheet-preview-meta {
    display: grid;
    gap: 4px;
}

html[data-theme] body.wms-module-shell.spreadsheet-center-page-shell .spreadsheet-link-label,
body.wms-module-shell.spreadsheet-center-page-shell .spreadsheet-link-label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    color: #64748b;
}

html[data-theme] body.wms-module-shell.spreadsheet-center-page-shell .spreadsheet-link-value,
html[data-theme] body.wms-module-shell.spreadsheet-center-page-shell .spreadsheet-preview-link-text,
body.wms-module-shell.spreadsheet-center-page-shell .spreadsheet-link-value,
body.wms-module-shell.spreadsheet-center-page-shell .spreadsheet-preview-link-text {
    display: block;
    min-width: 0;
    overflow-wrap: anywhere;
    color: #0f172a;
    font-size: 14px;
}

html[data-theme] body.wms-module-shell.spreadsheet-center-page-shell .spreadsheet-link-value.is-empty,
html[data-theme] body.wms-module-shell.spreadsheet-center-page-shell .spreadsheet-preview-link-text.is-empty,
body.wms-module-shell.spreadsheet-center-page-shell .spreadsheet-link-value.is-empty,
body.wms-module-shell.spreadsheet-center-page-shell .spreadsheet-preview-link-text.is-empty {
    color: #94a3b8;
}

html[data-theme] body.wms-module-shell.spreadsheet-center-page-shell .spreadsheet-card-actions,
html[data-theme] body.wms-module-shell.spreadsheet-center-page-shell .spreadsheet-preview-toolbar,
body.wms-module-shell.spreadsheet-center-page-shell .spreadsheet-card-actions,
body.wms-module-shell.spreadsheet-center-page-shell .spreadsheet-preview-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
}

html[data-theme] body.wms-module-shell.spreadsheet-center-page-shell .spreadsheet-card-actions > a,
html[data-theme] body.wms-module-shell.spreadsheet-center-page-shell .spreadsheet-card-actions > span,
html[data-theme] body.wms-module-shell.spreadsheet-center-page-shell .spreadsheet-preview-actions > a,
html[data-theme] body.wms-module-shell.spreadsheet-center-page-shell .spreadsheet-preview-actions > span,
body.wms-module-shell.spreadsheet-center-page-shell .spreadsheet-card-actions > a,
body.wms-module-shell.spreadsheet-center-page-shell .spreadsheet-card-actions > span,
body.wms-module-shell.spreadsheet-center-page-shell .spreadsheet-preview-actions > a,
body.wms-module-shell.spreadsheet-center-page-shell .spreadsheet-preview-actions > span {
    min-height: 40px;
}

html[data-theme] body.wms-module-shell.spreadsheet-center-page-shell .spreadsheet-card-actions .is-disabled,
html[data-theme] body.wms-module-shell.spreadsheet-center-page-shell .spreadsheet-preview-actions .is-disabled,
body.wms-module-shell.spreadsheet-center-page-shell .spreadsheet-card-actions .is-disabled,
body.wms-module-shell.spreadsheet-center-page-shell .spreadsheet-preview-actions .is-disabled {
    opacity: 0.58;
    cursor: not-allowed;
    pointer-events: none;
}

html[data-theme] body.wms-module-shell.spreadsheet-center-page-shell .spreadsheet-preview-panel,
body.wms-module-shell.spreadsheet-center-page-shell .spreadsheet-preview-panel {
    display: grid;
    gap: 16px;
}

html[data-theme] body.wms-module-shell.spreadsheet-center-page-shell .spreadsheet-preview,
body.wms-module-shell.spreadsheet-center-page-shell .spreadsheet-preview {
    width: 100%;
    min-width: 0;
    min-height: 720px;
    border: 1px solid rgba(203, 213, 225, 0.82);
    border-radius: 8px;
    overflow: hidden;
    background: #f8fafc;
    box-sizing: border-box;
}

html[data-theme] body.wms-module-shell.spreadsheet-center-page-shell .spreadsheet-embed-frame,
body.wms-module-shell.spreadsheet-center-page-shell .spreadsheet-embed-frame {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 720px;
    border: 0;
    background: #ffffff;
}

html[data-theme] body.wms-module-shell.spreadsheet-center-page-shell .spreadsheet-preview-empty,
body.wms-module-shell.spreadsheet-center-page-shell .spreadsheet-preview-empty {
    display: grid;
    place-items: center;
    padding: 28px;
}

html[data-theme] body.wms-module-shell.spreadsheet-center-page-shell .spreadsheet-preview-empty-copy,
body.wms-module-shell.spreadsheet-center-page-shell .spreadsheet-preview-empty-copy {
    display: grid;
    gap: 10px;
    max-width: 520px;
    text-align: left;
}

html[data-theme] body.wms-module-shell.spreadsheet-center-page-shell .spreadsheet-preview-empty-copy h3,
body.wms-module-shell.spreadsheet-center-page-shell .spreadsheet-preview-empty-copy h3 {
    margin: 0;
    font-size: 22px;
    line-height: 1.25;
    color: #0f172a;
}

html[data-theme] body.wms-module-shell.spreadsheet-center-page-shell .spreadsheet-preview-empty-copy p,
html[data-theme] body.wms-module-shell.spreadsheet-center-page-shell .spreadsheet-preview-footnote,
body.wms-module-shell.spreadsheet-center-page-shell .spreadsheet-preview-empty-copy p,
body.wms-module-shell.spreadsheet-center-page-shell .spreadsheet-preview-footnote {
    margin: 0;
    color: #475569;
    line-height: 1.55;
}

@media (max-width: 1180px) {
    html[data-theme] body.wms-module-shell.spreadsheet-center-page-shell .spreadsheet-center-meta,
    body.wms-module-shell.spreadsheet-center-page-shell .spreadsheet-center-meta {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    html[data-theme] body.wms-module-shell.spreadsheet-center-page-shell .spreadsheet-center-shell,
    body.wms-module-shell.spreadsheet-center-page-shell .spreadsheet-center-shell {
        grid-template-columns: minmax(0, 1fr);
    }

    html[data-theme] body.wms-module-shell.spreadsheet-center-page-shell .spreadsheet-preview,
    html[data-theme] body.wms-module-shell.spreadsheet-center-page-shell .spreadsheet-embed-frame,
    body.wms-module-shell.spreadsheet-center-page-shell .spreadsheet-preview,
    body.wms-module-shell.spreadsheet-center-page-shell .spreadsheet-embed-frame {
        min-height: 600px;
    }
}

@media (max-width: 720px) {
    html[data-theme] body.wms-module-shell.spreadsheet-center-page-shell .spreadsheet-center-meta,
    body.wms-module-shell.spreadsheet-center-page-shell .spreadsheet-center-meta {
        grid-template-columns: minmax(0, 1fr);
    }

    html[data-theme] body.wms-module-shell.spreadsheet-center-page-shell .spreadsheet-card,
    html[data-theme] body.wms-module-shell.spreadsheet-center-page-shell .spreadsheet-preview-panel,
    body.wms-module-shell.spreadsheet-center-page-shell .spreadsheet-card,
    body.wms-module-shell.spreadsheet-center-page-shell .spreadsheet-preview-panel {
        padding: 14px;
    }

    html[data-theme] body.wms-module-shell.spreadsheet-center-page-shell .spreadsheet-card-head,
    html[data-theme] body.wms-module-shell.spreadsheet-center-page-shell .spreadsheet-card-actions,
    html[data-theme] body.wms-module-shell.spreadsheet-center-page-shell .spreadsheet-preview-toolbar,
    body.wms-module-shell.spreadsheet-center-page-shell .spreadsheet-card-head,
    body.wms-module-shell.spreadsheet-center-page-shell .spreadsheet-card-actions,
    body.wms-module-shell.spreadsheet-center-page-shell .spreadsheet-preview-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    html[data-theme] body.wms-module-shell.spreadsheet-center-page-shell .spreadsheet-preview,
    html[data-theme] body.wms-module-shell.spreadsheet-center-page-shell .spreadsheet-embed-frame,
    body.wms-module-shell.spreadsheet-center-page-shell .spreadsheet-preview,
    body.wms-module-shell.spreadsheet-center-page-shell .spreadsheet-embed-frame {
        min-height: 420px;
    }
}

/* ==================================================
Stock Opname Desktop Viewport Lock - final override
Must stay after broad module/page rules.
================================================== */
@media (min-width: 901px) {
    html:has(body.internal-clean-page-shell.wms-refactor-shell.stock-opname-page-shell.wms-module-shell),
    html[data-theme]:has(body.internal-clean-page-shell.wms-refactor-shell.stock-opname-page-shell.wms-module-shell),
    body.internal-clean-page-shell.wms-refactor-shell.stock-opname-page-shell.wms-module-shell {
        min-height: 100dvh !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        overflow: hidden !important;
        overflow-y: hidden !important;
    }

    html[data-theme] body.internal-clean-page-shell.wms-refactor-shell.stock-opname-page-shell.wms-module-shell :is(.layout, .main),
    body.internal-clean-page-shell.wms-refactor-shell.stock-opname-page-shell.wms-module-shell :is(.layout, .main) {
        height: 100dvh !important;
        min-height: 0 !important;
        max-height: 100dvh !important;
        overflow: hidden !important;
        overflow-y: hidden !important;
    }

    html[data-theme] body.internal-clean-page-shell.wms-refactor-shell.stock-opname-page-shell.wms-module-shell .clean-module-layout:not(.clean-module-layout--no-sidebar),
    body.internal-clean-page-shell.wms-refactor-shell.stock-opname-page-shell.wms-module-shell .clean-module-layout:not(.clean-module-layout--no-sidebar) {
        height: calc(100dvh - 129px) !important;
        min-height: 0 !important;
        max-height: calc(100dvh - 129px) !important;
        align-items: start !important;
        overflow: hidden !important;
        overflow-y: hidden !important;
    }

    html[data-theme] body.internal-clean-page-shell.wms-refactor-shell.stock-opname-page-shell.wms-module-shell .clean-module-layout:not(.clean-module-layout--no-sidebar) > .clean-module-sidebar,
    body.internal-clean-page-shell.wms-refactor-shell.stock-opname-page-shell.wms-module-shell .clean-module-layout:not(.clean-module-layout--no-sidebar) > .clean-module-sidebar,
    html[data-theme] body.internal-clean-page-shell.wms-refactor-shell.stock-opname-page-shell.wms-module-shell .clean-module-layout:not(.clean-module-layout--no-sidebar) > .clean-module-sidebar .information-sidebar-card,
    body.internal-clean-page-shell.wms-refactor-shell.stock-opname-page-shell.wms-module-shell .clean-module-layout:not(.clean-module-layout--no-sidebar) > .clean-module-sidebar .information-sidebar-card,
    html[data-theme] body.internal-clean-page-shell.wms-refactor-shell.stock-opname-page-shell.wms-module-shell .clean-module-layout:not(.clean-module-layout--no-sidebar) > .clean-module-sidebar .sidebar-menu,
    body.internal-clean-page-shell.wms-refactor-shell.stock-opname-page-shell.wms-module-shell .clean-module-layout:not(.clean-module-layout--no-sidebar) > .clean-module-sidebar .sidebar-menu {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        overflow-y: visible !important;
    }

    html[data-theme] body.internal-clean-page-shell.wms-refactor-shell.stock-opname-page-shell.wms-module-shell .clean-module-layout:not(.clean-module-layout--no-sidebar) > .clean-content-panel,
    body.internal-clean-page-shell.wms-refactor-shell.stock-opname-page-shell.wms-module-shell .clean-module-layout:not(.clean-module-layout--no-sidebar) > .clean-content-panel {
        height: 100% !important;
        min-height: 0 !important;
        max-height: 100% !important;
        align-self: stretch !important;
        overflow: hidden !important;
        overflow-y: hidden !important;
    }

    html[data-theme] body.internal-clean-page-shell.wms-refactor-shell.stock-opname-page-shell.wms-module-shell .clean-content-panel > .page-content.page-content-bleed,
    body.internal-clean-page-shell.wms-refactor-shell.stock-opname-page-shell.wms-module-shell .clean-content-panel > .page-content.page-content-bleed {
        height: 100% !important;
        min-height: 0 !important;
        max-height: 100% !important;
        overflow: hidden !important;
        overflow-y: hidden !important;
    }

    html[data-theme] body.internal-clean-page-shell.wms-refactor-shell.stock-opname-page-shell.wms-module-shell .wms-page-stack.stock-opname-shell.so-cockpit-page,
    body.internal-clean-page-shell.wms-refactor-shell.stock-opname-page-shell.wms-module-shell .wms-page-stack.stock-opname-shell.so-cockpit-page {
        height: 100% !important;
        min-height: 0 !important;
        max-height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        overflow-y: hidden !important;
    }

    html[data-theme] body.internal-clean-page-shell.wms-refactor-shell.stock-opname-page-shell.wms-module-shell .so-work-area,
    body.internal-clean-page-shell.wms-refactor-shell.stock-opname-page-shell.wms-module-shell .so-work-area {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        max-height: none !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }

    html[data-theme] body.internal-clean-page-shell.wms-refactor-shell.stock-opname-page-shell.wms-module-shell .so-table-wrap,
    body.internal-clean-page-shell.wms-refactor-shell.stock-opname-page-shell.wms-module-shell .so-table-wrap {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow-x: auto !important;
        overflow-y: auto !important;
        padding-bottom: 0 !important;
        scroll-padding-bottom: 0 !important;
    }

    html[data-theme] body.internal-clean-page-shell.wms-refactor-shell.stock-opname-page-shell.wms-module-shell .so-save-bar.so-action-bar,
    body.internal-clean-page-shell.wms-refactor-shell.stock-opname-page-shell.wms-module-shell .so-save-bar.so-action-bar {
        flex: 0 0 auto !important;
        position: relative !important;
        bottom: auto !important;
        margin-top: 8px !important;
    }
}

/* ==================================================
Stock Opname Desktop Header Flow Fix
The SO page is long by design; avoid sticky global bars covering content.
================================================== */
@media (min-width: 901px) {
    html:has(body.internal-clean-page-shell.wms-refactor-shell.stock-opname-page-shell.wms-module-shell),
    html[data-theme]:has(body.internal-clean-page-shell.wms-refactor-shell.stock-opname-page-shell.wms-module-shell),
    body.internal-clean-page-shell.wms-refactor-shell.stock-opname-page-shell.wms-module-shell {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        overflow-y: auto !important;
    }

    html[data-theme] body.internal-clean-page-shell.wms-refactor-shell.stock-opname-page-shell.wms-module-shell :is(.internal-app-topbar, .internal-shell-header, .internal-shell-breadcrumb, .internal-breadcrumb),
    body.internal-clean-page-shell.wms-refactor-shell.stock-opname-page-shell.wms-module-shell :is(.internal-app-topbar, .internal-shell-header, .internal-shell-breadcrumb, .internal-breadcrumb) {
        position: relative !important;
        top: auto !important;
        inset-block-start: auto !important;
        transform: none !important;
    }

    html[data-theme] body.internal-clean-page-shell.wms-refactor-shell.stock-opname-page-shell.wms-module-shell :is(.layout, .main),
    body.internal-clean-page-shell.wms-refactor-shell.stock-opname-page-shell.wms-module-shell :is(.layout, .main),
    html[data-theme] body.internal-clean-page-shell.wms-refactor-shell.stock-opname-page-shell.wms-module-shell .clean-module-layout:not(.clean-module-layout--no-sidebar),
    body.internal-clean-page-shell.wms-refactor-shell.stock-opname-page-shell.wms-module-shell .clean-module-layout:not(.clean-module-layout--no-sidebar),
    html[data-theme] body.internal-clean-page-shell.wms-refactor-shell.stock-opname-page-shell.wms-module-shell .clean-module-layout:not(.clean-module-layout--no-sidebar) > .clean-content-panel,
    body.internal-clean-page-shell.wms-refactor-shell.stock-opname-page-shell.wms-module-shell .clean-module-layout:not(.clean-module-layout--no-sidebar) > .clean-content-panel,
    html[data-theme] body.internal-clean-page-shell.wms-refactor-shell.stock-opname-page-shell.wms-module-shell .clean-content-panel > .page-content.page-content-bleed,
    body.internal-clean-page-shell.wms-refactor-shell.stock-opname-page-shell.wms-module-shell .clean-content-panel > .page-content.page-content-bleed,
    html[data-theme] body.internal-clean-page-shell.wms-refactor-shell.stock-opname-page-shell.wms-module-shell .wms-page-stack.stock-opname-shell.so-cockpit-page,
    body.internal-clean-page-shell.wms-refactor-shell.stock-opname-page-shell.wms-module-shell .wms-page-stack.stock-opname-shell.so-cockpit-page {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        overflow-y: visible !important;
    }

    html[data-theme] body.internal-clean-page-shell.wms-refactor-shell.stock-opname-page-shell.wms-module-shell .clean-module-layout:not(.clean-module-layout--no-sidebar) {
        align-items: start !important;
    }

    html[data-theme] body.internal-clean-page-shell.wms-refactor-shell.stock-opname-page-shell.wms-module-shell .clean-module-layout:not(.clean-module-layout--no-sidebar) > .clean-module-sidebar,
    body.internal-clean-page-shell.wms-refactor-shell.stock-opname-page-shell.wms-module-shell .clean-module-layout:not(.clean-module-layout--no-sidebar) > .clean-module-sidebar,
    html[data-theme] body.internal-clean-page-shell.wms-refactor-shell.stock-opname-page-shell.wms-module-shell .clean-module-layout:not(.clean-module-layout--no-sidebar) > .clean-module-sidebar .information-sidebar-card,
    body.internal-clean-page-shell.wms-refactor-shell.stock-opname-page-shell.wms-module-shell .clean-module-layout:not(.clean-module-layout--no-sidebar) > .clean-module-sidebar .information-sidebar-card,
    html[data-theme] body.internal-clean-page-shell.wms-refactor-shell.stock-opname-page-shell.wms-module-shell .clean-module-layout:not(.clean-module-layout--no-sidebar) > .clean-module-sidebar .sidebar-menu,
    body.internal-clean-page-shell.wms-refactor-shell.stock-opname-page-shell.wms-module-shell .clean-module-layout:not(.clean-module-layout--no-sidebar) > .clean-module-sidebar .sidebar-menu {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        overflow-y: visible !important;
    }

    html[data-theme] body.internal-clean-page-shell.wms-refactor-shell.stock-opname-page-shell.wms-module-shell .so-work-area,
    body.internal-clean-page-shell.wms-refactor-shell.stock-opname-page-shell.wms-module-shell .so-work-area {
        min-height: 420px !important;
        max-height: none !important;
        overflow: hidden !important;
    }

    html[data-theme] body.internal-clean-page-shell.wms-refactor-shell.stock-opname-page-shell.wms-module-shell .so-table-wrap,
    body.internal-clean-page-shell.wms-refactor-shell.stock-opname-page-shell.wms-module-shell .so-table-wrap {
        min-height: 260px !important;
        max-height: clamp(300px, calc(100dvh - 380px), 620px) !important;
        overflow-x: auto !important;
        overflow-y: auto !important;
    }
}
/* ==================================================
Workspace Gateway Symmetry V2
Scoped only for the internal portal landing page
================================================== */
html[data-theme] body.internal-portal-shell .workspace-gateway.internal-portal-home,
body.internal-portal-shell .workspace-gateway.internal-portal-home {
    --portal-home-max: 1240px;
    --portal-home-gap: 12px;
    width: min(var(--portal-home-max), calc(100vw - clamp(28px, 6vw, 88px))) !important;
    max-width: var(--portal-home-max) !important;
    min-width: 0 !important;
    margin-inline: auto !important;
    padding: clamp(22px, 2.4vw, 34px) 0 clamp(32px, 4vw, 54px) !important;
    display: grid !important;
    gap: clamp(18px, 2.4vw, 28px) !important;
    overflow: visible !important;
}

html[data-theme] body.internal-portal-shell .workspace-gateway .internal-hero-section,
body.internal-portal-shell .workspace-gateway .internal-hero-section {
    width: 100% !important;
    max-width: var(--portal-home-max) !important;
    margin-inline: auto !important;
    display: grid !important;
    justify-items: center !important;
    gap: 12px !important;
    text-align: center !important;
}

html[data-theme] body.internal-portal-shell .workspace-gateway .internal-search-wrap,
body.internal-portal-shell .workspace-gateway .internal-search-wrap {
    width: min(560px, 100%) !important;
    max-width: 100% !important;
    margin-inline: auto !important;
}

html[data-theme] body.internal-portal-shell .workspace-gateway .internal-welcome-copy,
body.internal-portal-shell .workspace-gateway .internal-welcome-copy {
    width: min(720px, 100%) !important;
    margin-inline: auto !important;
    text-align: center !important;
}

html[data-theme] body.internal-portal-shell .workspace-gateway .internal-status-grid,
body.internal-portal-shell .workspace-gateway .internal-status-grid {
    width: 100% !important;
    max-width: var(--portal-home-max) !important;
    margin: 6px auto 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: stretch !important;
    gap: var(--portal-home-gap) !important;
    overflow: visible !important;
}

html[data-theme] body.internal-portal-shell .workspace-gateway .internal-status-card,
body.internal-portal-shell .workspace-gateway .internal-status-card {
    flex: 0 1 calc((100% - (var(--portal-home-gap) * 3)) / 4) !important;
    width: auto !important;
    min-width: min(100%, 230px) !important;
    max-width: calc((100% - (var(--portal-home-gap) * 3)) / 4) !important;
    min-height: 64px !important;
    height: auto !important;
    padding: 11px 14px !important;
}

html[data-theme] body.internal-portal-shell .workspace-gateway .internal-apps-section,
body.internal-portal-shell .workspace-gateway .internal-apps-section {
    width: 100% !important;
    max-width: var(--portal-home-max) !important;
    margin-inline: auto !important;
}

html[data-theme] body.internal-portal-shell .workspace-gateway .internal-apps-heading,
body.internal-portal-shell .workspace-gateway .internal-apps-heading {
    width: 100% !important;
    display: flex !important;
    align-items: end !important;
    justify-content: space-between !important;
    gap: 14px !important;
}

html[data-theme] body.internal-portal-shell .workspace-gateway .internal-app-grid,
body.internal-portal-shell .workspace-gateway .internal-app-grid {
    width: 100% !important;
    max-width: var(--portal-home-max) !important;
    margin-inline: auto !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: stretch !important;
    gap: var(--portal-home-gap) !important;
    overflow: visible !important;
}

html[data-theme] body.internal-portal-shell .workspace-gateway .internal-app-card,
body.internal-portal-shell .workspace-gateway .internal-app-card {
    flex: 0 1 calc((100% - (var(--portal-home-gap) * 4)) / 5) !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: calc((100% - (var(--portal-home-gap) * 4)) / 5) !important;
    min-height: 144px !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
}

html[data-theme] body.internal-portal-shell .workspace-gateway .internal-app-card[hidden],
body.internal-portal-shell .workspace-gateway .internal-app-card[hidden] {
    display: none !important;
}

html[data-theme] body.internal-portal-shell .workspace-gateway .card-topline,
body.internal-portal-shell .workspace-gateway .card-topline,
html[data-theme] body.internal-portal-shell .workspace-gateway .internal-app-copy,
body.internal-portal-shell .workspace-gateway .internal-app-copy {
    min-width: 0 !important;
}

html[data-theme] body.internal-portal-shell .workspace-gateway .internal-app-copy h3,
body.internal-portal-shell .workspace-gateway .internal-app-copy h3,
html[data-theme] body.internal-portal-shell .workspace-gateway .internal-app-copy p,
body.internal-portal-shell .workspace-gateway .internal-app-copy p {
    overflow-wrap: anywhere !important;
}

@media (max-width: 1180px) {
    html[data-theme] body.internal-portal-shell .workspace-gateway .internal-app-card,
    body.internal-portal-shell .workspace-gateway .internal-app-card {
        flex-basis: calc((100% - (var(--portal-home-gap) * 3)) / 4) !important;
        max-width: calc((100% - (var(--portal-home-gap) * 3)) / 4) !important;
    }
}

@media (max-width: 1040px) {
    html[data-theme] body.internal-portal-shell .workspace-gateway .internal-status-card,
    body.internal-portal-shell .workspace-gateway .internal-status-card {
        flex-basis: calc((100% - var(--portal-home-gap)) / 2) !important;
        max-width: calc((100% - var(--portal-home-gap)) / 2) !important;
    }

    html[data-theme] body.internal-portal-shell .workspace-gateway .internal-app-card,
    body.internal-portal-shell .workspace-gateway .internal-app-card {
        flex-basis: calc((100% - (var(--portal-home-gap) * 2)) / 3) !important;
        max-width: calc((100% - (var(--portal-home-gap) * 2)) / 3) !important;
    }
}

@media (max-width: 760px) {
    html[data-theme] body.internal-portal-shell .workspace-gateway.internal-portal-home,
    body.internal-portal-shell .workspace-gateway.internal-portal-home {
        width: min(100% - 24px, 560px) !important;
        padding-top: 16px !important;
        gap: 16px !important;
    }

    html[data-theme] body.internal-portal-shell .workspace-gateway .internal-welcome-copy,
    body.internal-portal-shell .workspace-gateway .internal-welcome-copy {
        text-align: center !important;
    }

    html[data-theme] body.internal-portal-shell .workspace-gateway .internal-status-grid,
    body.internal-portal-shell .workspace-gateway .internal-status-grid {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        overflow: visible !important;
    }

    html[data-theme] body.internal-portal-shell .workspace-gateway .internal-status-card,
    body.internal-portal-shell .workspace-gateway .internal-status-card,
    html[data-theme] body.internal-portal-shell .workspace-gateway .internal-app-card,
    body.internal-portal-shell .workspace-gateway .internal-app-card {
        flex-basis: calc((100% - var(--portal-home-gap)) / 2) !important;
        max-width: calc((100% - var(--portal-home-gap)) / 2) !important;
        min-width: 0 !important;
    }

    html[data-theme] body.internal-portal-shell .workspace-gateway .internal-apps-heading,
    body.internal-portal-shell .workspace-gateway .internal-apps-heading {
        align-items: center !important;
    }
}

@media (max-width: 460px) {
    html[data-theme] body.internal-portal-shell .workspace-gateway .internal-status-card,
    body.internal-portal-shell .workspace-gateway .internal-status-card,
    html[data-theme] body.internal-portal-shell .workspace-gateway .internal-app-card,
    body.internal-portal-shell .workspace-gateway .internal-app-card {
        flex-basis: 100% !important;
        max-width: 100% !important;
    }

    html[data-theme] body.internal-portal-shell .workspace-gateway .internal-apps-heading,
    body.internal-portal-shell .workspace-gateway .internal-apps-heading {
        align-items: start !important;
        flex-direction: column !important;
    }
}

/* ==================================================
WMS Daily Flow Compact Cockpit
Scoped only for Transfer, Outbound, Inbound, and request flow wrappers
================================================== */

html[data-theme] body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow,
body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow {
    --flow-page-max: 1280px;
    --flow-gap: 8px;
    --flow-card-radius: 12px;
    --flow-input-h: 34px;
    --flow-label-h: 15px;
    --flow-helper-h: 24px;
    --flow-border: #d8e4f2;
    --flow-blue: #071f3f;
    --flow-muted: #64748b;
    width: 100% !important;
    max-width: var(--flow-page-max) !important;
    min-width: 0 !important;
    margin: 0 auto !important;
    padding: 12px 16px 16px !important;
    display: grid !important;
    gap: var(--flow-gap) !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

html[data-theme] body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow *,
body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow * {
    box-sizing: border-box !important;
}

html[data-theme] body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .wms-step-grid,
body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .wms-step-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin: 0 !important;
}

html[data-theme] body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .wms-step-card,
body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .wms-step-card {
    min-height: 46px !important;
    max-height: 52px !important;
    padding: 7px 10px !important;
    border-radius: 10px !important;
    gap: 2px !important;
    overflow: hidden !important;
}

html[data-theme] body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .wms-step-card span,
body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .wms-step-card span {
    font-size: 10px !important;
    line-height: 1 !important;
}

html[data-theme] body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .wms-step-card strong,
body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .wms-step-card strong {
    font-size: 12px !important;
    line-height: 1.15 !important;
}

html[data-theme] body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .wms-step-card p,
body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .wms-step-card p {
    display: none !important;
}

html[data-theme] body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .wms-kpi-grid,
body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .wms-kpi-grid {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 0 !important;
    margin: 0 !important;
    min-height: 54px !important;
    max-height: 58px !important;
    border-radius: 12px !important;
    overflow: hidden !important;
}

html[data-theme] body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .wms-kpi-card,
body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .wms-kpi-card {
    min-height: 54px !important;
    max-height: 58px !important;
    padding: 7px 10px !important;
    border-radius: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 3px !important;
    overflow: hidden !important;
}

html[data-theme] body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .wms-kpi-card span,
body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .wms-kpi-card span {
    font-size: 10.5px !important;
    line-height: 1 !important;
    letter-spacing: .07em !important;
    white-space: nowrap !important;
}

html[data-theme] body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .wms-kpi-card strong,
body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .wms-kpi-card strong {
    font-size: 13px !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

html[data-theme] body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .wms-kpi-card small,
body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .wms-kpi-card small {
    display: none !important;
}

html[data-theme] body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .ops-batch-box,
body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .ops-batch-box {
    min-height: 0 !important;
    height: auto !important;
    padding: 10px 12px !important;
    border-radius: var(--flow-card-radius) !important;
    overflow: visible !important;
}

html[data-theme] body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .ops-batch-box > .section-title,
body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .ops-batch-box > .section-title {
    margin: 0 0 8px !important;
    padding: 0 !important;
}

html[data-theme] body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .section-title h2,
body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .section-title h2 {
    font-size: 17px !important;
    line-height: 1.15 !important;
    margin: 0 !important;
}

html[data-theme] body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .section-title h3,
body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .section-title h3,
html[data-theme] body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .wms-compact-queue-title,
body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .wms-compact-queue-title {
    font-size: 15px !important;
    line-height: 1.15 !important;
    margin: 0 0 8px !important;
}

html[data-theme] body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .section-title p,
body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .section-title p {
    display: none !important;
}

html[data-theme] body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-cockpit,
body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-cockpit {
    display: grid !important;
    grid-template-columns: minmax(0, 1.15fr) minmax(340px, .85fr) !important;
    gap: 10px !important;
    align-items: start !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

html[data-theme] body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-form-panel,
html[data-theme] body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-queue-panel,
body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-form-panel,
body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-queue-panel {
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    align-self: start !important;
}

html[data-theme] body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-queue-panel,
body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-queue-panel {
    padding: 10px !important;
    border: 1px solid var(--flow-border) !important;
    border-radius: var(--flow-card-radius) !important;
    background: #fff !important;
    overflow: hidden !important;
}

html[data-theme] body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .ops-config-grid,
body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .ops-config-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin: 0 0 8px !important;
    align-items: start !important;
}

html[data-theme] body.wms-transfer-page-shell .wms-compact-flow .ops-config-grid,
body.wms-transfer-page-shell .wms-compact-flow .ops-config-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(138px, .56fr) !important;
}

html[data-theme] body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .ops-config-card,
body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .ops-config-card {
    min-height: var(--flow-input-h) !important;
    padding: 6px 9px !important;
    border-radius: 9px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
}

html[data-theme] body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .ops-config-card strong,
body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .ops-config-card strong {
    font-size: 12px !important;
    white-space: nowrap !important;
}

html[data-theme] body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .ops-config-card .helper-text,
body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .ops-config-card .helper-text {
    display: none !important;
}

html[data-theme] body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .ops-entry-box,
body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .ops-entry-box {
    min-height: 0 !important;
    padding: 10px 12px !important;
    border-radius: var(--flow-card-radius) !important;
    overflow: hidden !important;
}

html[data-theme] body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .ops-entry-grid,
body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .ops-entry-grid {
    display: grid !important;
    gap: 7px 8px !important;
    align-items: start !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

html[data-theme] body.wms-transfer-page-shell .wms-compact-flow .transfer-entry-grid,
body.wms-transfer-page-shell .wms-compact-flow .transfer-entry-grid {
    grid-template-columns: minmax(180px, 1fr) 38px minmax(118px, .58fr) 82px 82px 84px !important;
}

html[data-theme] body.wms-outbound-page-shell .wms-compact-flow .outbound-entry-grid,
body.wms-outbound-page-shell .wms-compact-flow .outbound-entry-grid {
    grid-template-columns: minmax(170px, 1fr) 38px minmax(108px, .55fr) 74px 76px minmax(86px, .44fr) 76px !important;
}

html[data-theme] body.wms-inbound-page-shell .wms-compact-flow .inbound-entry-grid,
body.wms-inbound-page-shell .wms-compact-flow .inbound-entry-grid {
    grid-template-columns: minmax(176px, 1fr) 38px minmax(116px, .56fr) 82px 82px !important;
}

html[data-theme] body.wms-inbound-page-shell .wms-compact-flow .cost-field,
body.wms-inbound-page-shell .wms-compact-flow .cost-field {
    grid-column: 1 / 2 !important;
}

html[data-theme] body.wms-inbound-page-shell .wms-compact-flow .expiry-field,
body.wms-inbound-page-shell .wms-compact-flow .expiry-field {
    grid-column: 2 / 3 !important;
}

html[data-theme] body.wms-inbound-page-shell .wms-compact-flow .date-field,
body.wms-inbound-page-shell .wms-compact-flow .date-field {
    grid-column: 3 / 4 !important;
}

html[data-theme] body.wms-inbound-page-shell .wms-compact-flow .note-field,
body.wms-inbound-page-shell .wms-compact-flow .note-field {
    grid-column: 4 / 5 !important;
}

html[data-theme] body.wms-inbound-page-shell .wms-compact-flow .action-field,
body.wms-inbound-page-shell .wms-compact-flow .action-field {
    grid-column: 5 / 6 !important;
}

html[data-theme] body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .form-field,
body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .form-field {
    min-width: 0 !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
}

html[data-theme] body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow label,
body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow label {
    min-height: var(--flow-label-h) !important;
    margin: 0 !important;
    font-size: 11px !important;
    line-height: var(--flow-label-h) !important;
    font-weight: 800 !important;
}

html[data-theme] body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow :is(input, select),
body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow :is(input, select) {
    width: 100% !important;
    height: var(--flow-input-h) !important;
    min-height: var(--flow-input-h) !important;
    max-height: var(--flow-input-h) !important;
    padding: 0 10px !important;
    border-radius: 8px !important;
    font-size: 12px !important;
}

html[data-theme] body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .money-input,
body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .money-input {
    height: var(--flow-input-h) !important;
    min-height: var(--flow-input-h) !important;
    max-height: var(--flow-input-h) !important;
    border-radius: 8px !important;
    overflow: hidden !important;
}

html[data-theme] body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .money-input input,
body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .money-input input {
    border: 0 !important;
    height: 100% !important;
}

html[data-theme] body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .helper-text,
body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .helper-text {
    min-height: 0 !important;
    max-height: var(--flow-helper-h) !important;
    margin: 0 !important;
    font-size: 10.5px !important;
    line-height: 12px !important;
    overflow: hidden !important;
}

html[data-theme] body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .ops-picker-button,
body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .ops-picker-button {
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    height: var(--flow-input-h) !important;
    min-height: var(--flow-input-h) !important;
    max-height: var(--flow-input-h) !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important;
}

html[data-theme] body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .ops-stock-card,
body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .ops-stock-card {
    height: var(--flow-input-h) !important;
    min-height: var(--flow-input-h) !important;
    max-height: var(--flow-input-h) !important;
    padding: 0 10px !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    background: #fff !important;
    box-shadow: none !important;
}

html[data-theme] body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .ops-stock-value,
body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .ops-stock-value {
    font-size: 13px !important;
    line-height: 1 !important;
}

html[data-theme] body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .action-field,
body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .action-field {
    padding-top: calc(var(--flow-label-h) + 3px) !important;
    min-width: 0 !important;
}

html[data-theme] body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .action-field button,
body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .action-field button {
    width: 100% !important;
    min-width: 0 !important;
    height: var(--flow-input-h) !important;
    min-height: var(--flow-input-h) !important;
    max-height: var(--flow-input-h) !important;
    padding: 0 9px !important;
    border-radius: 8px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
}

html[data-theme] body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .ops-mobile-hint,
body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .ops-mobile-hint {
    display: none !important;
}

html[data-theme] body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .ops-queue-box,
body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .ops-queue-box {
    min-height: 0 !important;
    height: auto !important;
    max-height: 220px !important;
    overflow: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 10px !important;
}

html[data-theme] body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .ops-queue-table,
body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .ops-queue-table {
    width: 100% !important;
    min-width: 0 !important;
    table-layout: fixed !important;
    border-collapse: collapse !important;
}

html[data-theme] body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .ops-queue-table :is(th, td),
body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .ops-queue-table :is(th, td) {
    padding: 6px 7px !important;
    font-size: 11.5px !important;
    line-height: 1.2 !important;
    vertical-align: middle !important;
}

html[data-theme] body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .ops-queue-table th:first-child,
html[data-theme] body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .ops-queue-table td:first-child,
body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .ops-queue-table th:first-child,
body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .ops-queue-table td:first-child {
    width: 38px !important;
}

html[data-theme] body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .ops-queue-table th:last-child,
html[data-theme] body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .ops-queue-table td:last-child,
body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .ops-queue-table th:last-child,
body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .ops-queue-table td:last-child {
    width: 48px !important;
    text-align: center !important;
}

html[data-theme] body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .ops-queue-table td strong,
body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .ops-queue-table td strong {
    display: block !important;
    font-size: 12px !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

html[data-theme] body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .ops-queue-table td small,
body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .ops-queue-table td small {
    display: block !important;
    max-height: 26px !important;
    white-space: normal !important;
    overflow: hidden !important;
}

html[data-theme] body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .request-empty-cell,
body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .request-empty-cell {
    height: 76px !important;
    min-height: 64px !important;
    max-height: 84px !important;
    padding: 8px !important;
    vertical-align: middle !important;
}

html[data-theme] body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .request-empty-compact,
body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .request-empty-compact {
    min-height: 0 !important;
    height: 58px !important;
    padding: 0 !important;
    gap: 4px !important;
}

html[data-theme] body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .request-empty-compact strong,
body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .request-empty-compact strong {
    font-size: 12px !important;
}

html[data-theme] body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .split-actions.form-actions,
body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .split-actions.form-actions {
    margin-top: 8px !important;
    padding: 0 !important;
    min-height: 34px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
}

html[data-theme] body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .split-actions.form-actions .helper-text,
body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .split-actions.form-actions .helper-text {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

html[data-theme] body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .split-actions.form-actions button,
body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .split-actions.form-actions button {
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    min-width: 132px !important;
    padding: 0 14px !important;
    border-radius: 8px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
}

html[data-theme] body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .ops-remove-button,
body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .ops-remove-button {
    width: 28px !important;
    min-width: 28px !important;
    max-width: 28px !important;
    height: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

@media (max-width: 1180px) {
    html[data-theme] body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-cockpit,
    body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-cockpit {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    html[data-theme] body.wms-transfer-page-shell .wms-compact-flow .transfer-entry-grid,
    body.wms-transfer-page-shell .wms-compact-flow .transfer-entry-grid,
    html[data-theme] body.wms-outbound-page-shell .wms-compact-flow .outbound-entry-grid,
    body.wms-outbound-page-shell .wms-compact-flow .outbound-entry-grid,
    html[data-theme] body.wms-inbound-page-shell .wms-compact-flow .inbound-entry-grid,
    body.wms-inbound-page-shell .wms-compact-flow .inbound-entry-grid {
        grid-template-columns: minmax(220px, 1fr) 38px minmax(140px, .7fr) 96px 96px !important;
    }

    html[data-theme] body.wms-outbound-page-shell .wms-compact-flow .note-field,
    body.wms-outbound-page-shell .wms-compact-flow .note-field {
        grid-column: 1 / 5 !important;
    }

    html[data-theme] body.wms-outbound-page-shell .wms-compact-flow .action-field,
    body.wms-outbound-page-shell .wms-compact-flow .action-field {
        grid-column: 5 / 6 !important;
    }

    html[data-theme] body.wms-inbound-page-shell .wms-compact-flow .cost-field,
    html[data-theme] body.wms-inbound-page-shell .wms-compact-flow .expiry-field,
    html[data-theme] body.wms-inbound-page-shell .wms-compact-flow .date-field,
    html[data-theme] body.wms-inbound-page-shell .wms-compact-flow .note-field,
    html[data-theme] body.wms-inbound-page-shell .wms-compact-flow .action-field,
    body.wms-inbound-page-shell .wms-compact-flow .cost-field,
    body.wms-inbound-page-shell .wms-compact-flow .expiry-field,
    body.wms-inbound-page-shell .wms-compact-flow .date-field,
    body.wms-inbound-page-shell .wms-compact-flow .note-field,
    body.wms-inbound-page-shell .wms-compact-flow .action-field {
        grid-column: auto !important;
    }
}

@media (max-width: 900px) {
    html[data-theme] body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow,
    body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow {
        padding: 10px 12px 14px !important;
    }

    html[data-theme] body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .wms-step-grid,
    body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .wms-step-grid,
    html[data-theme] body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .wms-kpi-grid,
    body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .wms-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        max-height: none !important;
    }

    html[data-theme] body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .wms-kpi-card,
    body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .wms-kpi-card {
        border-radius: 0 !important;
    }
}

@media (max-width: 720px) {
    html[data-theme] body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .ops-config-grid,
    body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .ops-config-grid,
    html[data-theme] body.wms-transfer-page-shell .wms-compact-flow .transfer-entry-grid,
    body.wms-transfer-page-shell .wms-compact-flow .transfer-entry-grid,
    html[data-theme] body.wms-outbound-page-shell .wms-compact-flow .outbound-entry-grid,
    body.wms-outbound-page-shell .wms-compact-flow .outbound-entry-grid,
    html[data-theme] body.wms-inbound-page-shell .wms-compact-flow .inbound-entry-grid,
    body.wms-inbound-page-shell .wms-compact-flow .inbound-entry-grid {
        grid-template-columns: 1fr !important;
    }

    html[data-theme] body.wms-outbound-page-shell .wms-compact-flow .note-field,
    html[data-theme] body.wms-outbound-page-shell .wms-compact-flow .action-field,
    body.wms-outbound-page-shell .wms-compact-flow .note-field,
    body.wms-outbound-page-shell .wms-compact-flow .action-field {
        grid-column: auto !important;
    }

    html[data-theme] body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .action-field,
    body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .action-field {
        padding-top: 0 !important;
    }

    html[data-theme] body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .split-actions.form-actions,
    body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .split-actions.form-actions {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    html[data-theme] body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .split-actions.form-actions button,
    body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .split-actions.form-actions button {
        width: 100% !important;
    }
}

/* ==================================================
WMS Daily Flow Final Compact Lock
Transfer / Outbound / Inbound only
================================================== */
html[data-theme] body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .wms-compact-cockpit,
body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .wms-compact-cockpit {
    grid-template-columns: minmax(0, 1fr) minmax(292px, 316px) !important;
    gap: 10px !important;
}

html[data-theme] body.wms-transfer-page-shell .wms-compact-flow .transfer-entry-grid,
body.wms-transfer-page-shell .wms-compact-flow .transfer-entry-grid {
    grid-template-columns: minmax(132px, 1fr) 32px minmax(82px, .45fr) 58px 58px 64px !important;
    gap: 6px !important;
    overflow: visible !important;
}

html[data-theme] body.wms-outbound-page-shell .wms-compact-flow .outbound-entry-grid,
body.wms-outbound-page-shell .wms-compact-flow .outbound-entry-grid {
    grid-template-columns: minmax(124px, 1fr) 32px minmax(78px, .42fr) 54px 54px minmax(58px, .32fr) 60px !important;
    gap: 6px !important;
    overflow: visible !important;
}

html[data-theme] body.wms-inbound-page-shell .wms-compact-flow .inbound-entry-grid,
body.wms-inbound-page-shell .wms-compact-flow .inbound-entry-grid {
    grid-template-columns: minmax(140px, 1fr) 32px minmax(82px, .42fr) 58px 58px !important;
    gap: 6px 8px !important;
    overflow: visible !important;
}

html[data-theme] body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .picker-field button,
body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .picker-field button {
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    padding: 0 !important;
}

html[data-theme] body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .action-field button,
body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .action-field button {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 5px !important;
    font-size: 11px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

html[data-theme] body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .form-field input,
html[data-theme] body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .form-field select,
body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .form-field input,
body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .form-field select {
    padding-left: 9px !important;
    padding-right: 9px !important;
}

html[data-theme] body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .ops-queue-table :is(th, td),
body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .ops-queue-table :is(th, td) {
    padding: 6px 5px !important;
    font-size: 10.5px !important;
}

html[data-theme] body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .ops-queue-table th:first-child,
html[data-theme] body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .ops-queue-table td:first-child,
body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .ops-queue-table th:first-child,
body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .ops-queue-table td:first-child {
    width: 30px !important;
}

html[data-theme] body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .ops-queue-table th:last-child,
html[data-theme] body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .ops-queue-table td:last-child,
body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .ops-queue-table th:last-child,
body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .ops-queue-table td:last-child {
    width: 38px !important;
}

@media (max-width: 1180px) {
    html[data-theme] body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .wms-compact-cockpit,
    body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .wms-compact-cockpit {
        grid-template-columns: 1fr !important;
    }

    html[data-theme] body.wms-transfer-page-shell .wms-compact-flow .transfer-entry-grid,
    body.wms-transfer-page-shell .wms-compact-flow .transfer-entry-grid,
    html[data-theme] body.wms-outbound-page-shell .wms-compact-flow .outbound-entry-grid,
    body.wms-outbound-page-shell .wms-compact-flow .outbound-entry-grid {
        grid-template-columns: minmax(180px, 1fr) 36px minmax(110px, .65fr) 78px 78px !important;
        gap: 8px !important;
    }

    html[data-theme] body.wms-transfer-page-shell .wms-compact-flow .transfer-entry-grid .action-field,
    body.wms-transfer-page-shell .wms-compact-flow .transfer-entry-grid .action-field {
        grid-column: 5 / 6 !important;
    }

    html[data-theme] body.wms-outbound-page-shell .wms-compact-flow .outbound-entry-grid .note-field,
    body.wms-outbound-page-shell .wms-compact-flow .outbound-entry-grid .note-field {
        grid-column: 1 / 5 !important;
    }

    html[data-theme] body.wms-outbound-page-shell .wms-compact-flow .outbound-entry-grid .action-field,
    body.wms-outbound-page-shell .wms-compact-flow .outbound-entry-grid .action-field {
        grid-column: 5 / 6 !important;
    }
}

@media (max-width: 720px) {
    html[data-theme] body.wms-transfer-page-shell .wms-compact-flow .transfer-entry-grid,
    html[data-theme] body.wms-outbound-page-shell .wms-compact-flow .outbound-entry-grid,
    html[data-theme] body.wms-inbound-page-shell .wms-compact-flow .inbound-entry-grid,
    body.wms-transfer-page-shell .wms-compact-flow .transfer-entry-grid,
    body.wms-outbound-page-shell .wms-compact-flow .outbound-entry-grid,
    body.wms-inbound-page-shell .wms-compact-flow .inbound-entry-grid {
        grid-template-columns: 1fr !important;
    }

    html[data-theme] body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .form-field,
    body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .form-field {
        grid-column: auto !important;
    }
}

/* Final width tune after cockpit lock */
html[data-theme] body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .wms-compact-cockpit,
body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .wms-compact-cockpit {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 300px) !important;
}

html[data-theme] body.wms-transfer-page-shell .wms-compact-flow .transfer-entry-grid,
body.wms-transfer-page-shell .wms-compact-flow .transfer-entry-grid {
    grid-template-columns: minmax(150px, 1fr) 32px minmax(92px, .48fr) 62px 62px 68px !important;
}

html[data-theme] body.wms-outbound-page-shell .wms-compact-flow .outbound-entry-grid,
body.wms-outbound-page-shell .wms-compact-flow .outbound-entry-grid {
    grid-template-columns: minmax(162px, 1fr) 32px minmax(96px, .48fr) 60px 60px minmax(72px, .36fr) 68px !important;
}

html[data-theme] body.wms-inbound-page-shell .wms-compact-flow .inbound-entry-grid,
body.wms-inbound-page-shell .wms-compact-flow .inbound-entry-grid {
    grid-template-columns: minmax(160px, 1fr) 32px minmax(96px, .48fr) 62px 62px !important;
}

/* Request Gudang final add-row containment */
html[data-theme] body.request-workflow-shell .request-gudang-compact-v3 .request-add-row,
html[data-theme] body.request-workflow-shell .request-gudang-compact-target .request-add-row,
body.request-workflow-shell .request-gudang-compact-v3 .request-add-row,
body.request-workflow-shell .request-gudang-compact-target .request-add-row {
    grid-template-columns: minmax(170px, 1fr) 96px 90px 76px !important;
    gap: 8px !important;
    overflow: visible !important;
}

html[data-theme] body.request-workflow-shell .request-gudang-compact-v3 .request-add-button,
html[data-theme] body.request-workflow-shell .request-gudang-compact-target .request-add-button,
body.request-workflow-shell .request-gudang-compact-v3 .request-add-button,
body.request-workflow-shell .request-gudang-compact-target .request-add-button {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 0 6px !important;
    font-size: 12px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Request Gudang add button anti-clip */
html[data-theme] body.request-workflow-shell .request-gudang-compact-v3 .request-gudang-add-row,
html[data-theme] body.request-workflow-shell .request-gudang-compact-v3 .request-add-row,
html[data-theme] body.request-workflow-shell .request-gudang-compact-target .request-gudang-add-row,
html[data-theme] body.request-workflow-shell .request-gudang-compact-target .request-add-row,
body.request-workflow-shell .request-gudang-compact-v3 .request-gudang-add-row,
body.request-workflow-shell .request-gudang-compact-v3 .request-add-row,
body.request-workflow-shell .request-gudang-compact-target .request-gudang-add-row,
body.request-workflow-shell .request-gudang-compact-target .request-add-row {
    grid-template-columns: minmax(160px, 1fr) 84px 78px 68px !important;
    gap: 6px !important;
}

html[data-theme] body.request-workflow-shell .request-gudang-compact-v3 .request-add-row > *,
html[data-theme] body.request-workflow-shell .request-gudang-compact-target .request-add-row > *,
body.request-workflow-shell .request-gudang-compact-v3 .request-add-row > *,
body.request-workflow-shell .request-gudang-compact-target .request-add-row > * {
    min-width: 0 !important;
    max-width: 100% !important;
}

html[data-theme] body.request-workflow-shell .request-gudang-compact-v3 .request-picker-line,
html[data-theme] body.request-workflow-shell .request-gudang-compact-target .request-picker-line,
body.request-workflow-shell .request-gudang-compact-v3 .request-picker-line,
body.request-workflow-shell .request-gudang-compact-target .request-picker-line {
    grid-template-columns: minmax(0, 1fr) 34px !important;
    gap: 6px !important;
    min-width: 0 !important;
}

html[data-theme] body.request-workflow-shell .request-gudang-compact-v3 .request-picker-button,
html[data-theme] body.request-workflow-shell .request-gudang-compact-target .request-picker-button,
body.request-workflow-shell .request-gudang-compact-v3 .request-picker-button,
body.request-workflow-shell .request-gudang-compact-target .request-picker-button {
    width: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
}

html[data-theme] body.request-workflow-shell .request-gudang-compact-v3 .request-field input,
html[data-theme] body.request-workflow-shell .request-gudang-compact-target .request-field input,
body.request-workflow-shell .request-gudang-compact-v3 .request-field input,
body.request-workflow-shell .request-gudang-compact-target .request-field input {
    min-width: 0 !important;
    max-width: 100% !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
}

html[data-theme] body.request-workflow-shell .request-gudang-compact-v3 .request-action-field,
html[data-theme] body.request-workflow-shell .request-gudang-compact-target .request-action-field,
body.request-workflow-shell .request-gudang-compact-v3 .request-action-field,
body.request-workflow-shell .request-gudang-compact-target .request-action-field {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
}

/* Request Gudang hard fit for narrow WMS content */
html[data-theme] body.request-workflow-shell .request-gudang-compact-v3 .request-add-row,
html[data-theme] body.request-workflow-shell .request-gudang-compact-target .request-add-row,
body.request-workflow-shell .request-gudang-compact-v3 .request-add-row,
body.request-workflow-shell .request-gudang-compact-target .request-add-row {
    grid-template-columns: minmax(150px, 1fr) 74px 70px 54px !important;
}

html[data-theme] body.request-workflow-shell .request-gudang-compact-v3 .request-add-button,
html[data-theme] body.request-workflow-shell .request-gudang-compact-target .request-add-button,
body.request-workflow-shell .request-gudang-compact-v3 .request-add-button,
body.request-workflow-shell .request-gudang-compact-target .request-add-button {
    width: 54px !important;
    max-width: 54px !important;
    padding: 0 4px !important;
    font-size: 10.5px !important;
}

/* Request Gudang exact legacy selector override */
html[data-theme] body.request-workflow-shell .request-gudang-compact-target .ops-entry-grid.request-entry-grid.request-gudang-entry-grid.request-add-row,
html[data-theme] body.request-workflow-shell .request-gudang-compact-v3 .ops-entry-grid.request-entry-grid.request-gudang-entry-grid.request-add-row,
body.request-workflow-shell .request-gudang-compact-target .ops-entry-grid.request-entry-grid.request-gudang-entry-grid.request-add-row,
body.request-workflow-shell .request-gudang-compact-v3 .ops-entry-grid.request-entry-grid.request-gudang-entry-grid.request-add-row {
    grid-template-columns: minmax(150px, 1fr) 74px 70px 54px !important;
    gap: 6px !important;
}

html[data-theme] body.request-workflow-shell .request-gudang-compact-target .ops-entry-grid.request-entry-grid.request-gudang-entry-grid.request-add-row .request-add-button,
html[data-theme] body.request-workflow-shell .request-gudang-compact-v3 .ops-entry-grid.request-entry-grid.request-gudang-entry-grid.request-add-row .request-add-button,
body.request-workflow-shell .request-gudang-compact-target .ops-entry-grid.request-entry-grid.request-gudang-entry-grid.request-add-row .request-add-button,
body.request-workflow-shell .request-gudang-compact-v3 .ops-entry-grid.request-entry-grid.request-gudang-entry-grid.request-add-row .request-add-button {
    width: 54px !important;
    min-width: 0 !important;
    max-width: 54px !important;
}

/* Final mobile safety after all desktop locks */
@media (max-width: 1180px) {
    html[data-theme] body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .wms-compact-cockpit,
    body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .wms-compact-cockpit {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 720px) {
    html[data-theme] body.wms-transfer-page-shell .wms-compact-flow .transfer-entry-grid,
    html[data-theme] body.wms-outbound-page-shell .wms-compact-flow .outbound-entry-grid,
    html[data-theme] body.wms-inbound-page-shell .wms-compact-flow .inbound-entry-grid,
    body.wms-transfer-page-shell .wms-compact-flow .transfer-entry-grid,
    body.wms-outbound-page-shell .wms-compact-flow .outbound-entry-grid,
    body.wms-inbound-page-shell .wms-compact-flow .inbound-entry-grid {
        grid-template-columns: 1fr !important;
    }

    html[data-theme] body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .form-field,
    body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .form-field {
        grid-column: auto !important;
    }

    html[data-theme] body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .action-field,
    body.wms-module-shell:is(.wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell) .wms-compact-flow .action-field {
        padding-top: 0 !important;
    }
}

/* Request compact mobile safety */
@media (max-width: 720px) {
    html[data-theme] body.request-workflow-shell .request-compact-v3,
    html[data-theme] body.request-workflow-shell .request-compact-target,
    body.request-workflow-shell .request-compact-v3,
    body.request-workflow-shell .request-compact-target {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding: 10px 12px 14px !important;
        overflow: hidden !important;
    }

    html[data-theme] body.request-workflow-shell .request-compact-header,
    body.request-workflow-shell .request-compact-header {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
        min-height: 0 !important;
        max-height: none !important;
    }

    html[data-theme] body.request-workflow-shell .request-compact-title,
    html[data-theme] body.request-workflow-shell .request-compact-header h1,
    body.request-workflow-shell .request-compact-title,
    body.request-workflow-shell .request-compact-header h1 {
        max-width: 100% !important;
        font-size: 22px !important;
        line-height: 1.1 !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }

    html[data-theme] body.request-workflow-shell .request-compact-meta,
    body.request-workflow-shell .request-compact-meta {
        width: 100% !important;
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    html[data-theme] body.request-workflow-shell .request-compact-v3 .wms-kpi-grid,
    html[data-theme] body.request-workflow-shell .request-compact-target .wms-kpi-grid,
    body.request-workflow-shell .request-compact-v3 .wms-kpi-grid,
    body.request-workflow-shell .request-compact-target .wms-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    html[data-theme] body.request-workflow-shell .request-compact-v3 .request-cockpit,
    html[data-theme] body.request-workflow-shell .request-compact-target .request-cockpit,
    body.request-workflow-shell .request-compact-v3 .request-cockpit,
    body.request-workflow-shell .request-compact-target .request-cockpit {
        grid-template-columns: 1fr !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible !important;
    }

    html[data-theme] body.request-workflow-shell .request-compact-v3 :is(.request-form-panel, .request-queue-panel, .request-add-card),
    html[data-theme] body.request-workflow-shell .request-compact-target :is(.request-form-panel, .request-queue-panel, .request-add-card),
    body.request-workflow-shell .request-compact-v3 :is(.request-form-panel, .request-queue-panel, .request-add-card),
    body.request-workflow-shell .request-compact-target :is(.request-form-panel, .request-queue-panel, .request-add-card) {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }

    html[data-theme] body.request-workflow-shell .request-compact-v3 .request-add-row,
    html[data-theme] body.request-workflow-shell .request-compact-target .request-add-row,
    body.request-workflow-shell .request-compact-v3 .request-add-row,
    body.request-workflow-shell .request-compact-target .request-add-row {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    html[data-theme] body.request-workflow-shell .request-compact-v3 .request-action-field,
    html[data-theme] body.request-workflow-shell .request-compact-target .request-action-field,
    body.request-workflow-shell .request-compact-v3 .request-action-field,
    body.request-workflow-shell .request-compact-target .request-action-field {
        grid-column: auto !important;
        padding-top: 0 !important;
    }

    html[data-theme] body.request-workflow-shell .request-compact-v3 .request-add-button,
    html[data-theme] body.request-workflow-shell .request-compact-target .request-add-button,
    body.request-workflow-shell .request-compact-v3 .request-add-button,
    body.request-workflow-shell .request-compact-target .request-add-button {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        font-size: 12px !important;
    }

    html[data-theme] body.request-workflow-shell .request-compact-v3 .ops-queue-box,
    html[data-theme] body.request-workflow-shell .request-compact-target .ops-queue-box,
    body.request-workflow-shell .request-compact-v3 .ops-queue-box,
    body.request-workflow-shell .request-compact-target .ops-queue-box {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        overflow-y: auto !important;
    }

    html[data-theme] body.request-workflow-shell .request-compact-v3 .ops-queue-table,
    html[data-theme] body.request-workflow-shell .request-compact-target .ops-queue-table,
    body.request-workflow-shell .request-compact-v3 .ops-queue-table,
    body.request-workflow-shell .request-compact-target .ops-queue-table {
        width: 100% !important;
        min-width: 0 !important;
        table-layout: fixed !important;
    }

    html[data-theme] body.request-workflow-shell .request-compact-v3 .ops-queue-table :is(th, td),
    html[data-theme] body.request-workflow-shell .request-compact-target .ops-queue-table :is(th, td),
    body.request-workflow-shell .request-compact-v3 .ops-queue-table :is(th, td),
    body.request-workflow-shell .request-compact-target .ops-queue-table :is(th, td) {
        padding: 6px 5px !important;
        font-size: 10px !important;
    }
}

/* Request compact exact mobile hard-stop */
@media (max-width: 720px) {
    html[data-theme] body.request-workflow-shell .request-compact-v3 .request-compact-lead,
    html[data-theme] body.request-workflow-shell .request-compact-target .request-compact-lead,
    body.request-workflow-shell .request-compact-v3 .request-compact-lead,
    body.request-workflow-shell .request-compact-target .request-compact-lead {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        align-items: flex-start !important;
    }

    html[data-theme] body.request-workflow-shell .request-compact-v3 .request-compact-copy,
    html[data-theme] body.request-workflow-shell .request-compact-target .request-compact-copy,
    body.request-workflow-shell .request-compact-v3 .request-compact-copy,
    body.request-workflow-shell .request-compact-target .request-compact-copy {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    html[data-theme] body.request-workflow-shell .request-compact-v3 .request-compact-title,
    html[data-theme] body.request-workflow-shell .request-compact-target .request-compact-title,
    body.request-workflow-shell .request-compact-v3 .request-compact-title,
    body.request-workflow-shell .request-compact-target .request-compact-title {
        display: block !important;
        max-width: 100% !important;
        font-size: 20px !important;
        line-height: 1.12 !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }

    html[data-theme] body.request-workflow-shell .request-compact-v3 .request-route-grid,
    html[data-theme] body.request-workflow-shell .request-compact-target .request-route-grid,
    body.request-workflow-shell .request-compact-v3 .request-route-grid,
    body.request-workflow-shell .request-compact-target .request-route-grid {
        grid-template-columns: 1fr !important;
    }

    html[data-theme] body.request-workflow-shell .request-gudang-compact-target .ops-entry-grid.request-entry-grid.request-gudang-entry-grid.request-add-row,
    html[data-theme] body.request-workflow-shell .request-gudang-compact-v3 .ops-entry-grid.request-entry-grid.request-gudang-entry-grid.request-add-row,
    html[data-theme] body.request-workflow-shell .request-owner-compact-target .ops-entry-grid.outbound-entry-grid.request-owner-entry-grid.request-add-row,
    html[data-theme] body.request-workflow-shell .request-owner-compact-v3 .ops-entry-grid.outbound-entry-grid.request-owner-entry-grid.request-add-row,
    body.request-workflow-shell .request-gudang-compact-target .ops-entry-grid.request-entry-grid.request-gudang-entry-grid.request-add-row,
    body.request-workflow-shell .request-gudang-compact-v3 .ops-entry-grid.request-entry-grid.request-gudang-entry-grid.request-add-row,
    body.request-workflow-shell .request-owner-compact-target .ops-entry-grid.outbound-entry-grid.request-owner-entry-grid.request-add-row,
    body.request-workflow-shell .request-owner-compact-v3 .ops-entry-grid.outbound-entry-grid.request-owner-entry-grid.request-add-row {
        grid-template-columns: 1fr !important;
    }

    html[data-theme] body.request-workflow-shell .request-gudang-compact-target .ops-entry-grid.request-entry-grid.request-gudang-entry-grid.request-add-row .request-add-button,
    html[data-theme] body.request-workflow-shell .request-gudang-compact-v3 .ops-entry-grid.request-entry-grid.request-gudang-entry-grid.request-add-row .request-add-button,
    body.request-workflow-shell .request-gudang-compact-target .ops-entry-grid.request-entry-grid.request-gudang-entry-grid.request-add-row .request-add-button,
    body.request-workflow-shell .request-gudang-compact-v3 .ops-entry-grid.request-entry-grid.request-gudang-entry-grid.request-add-row .request-add-button {
        width: 100% !important;
        max-width: 100% !important;
        font-size: 12px !important;
    }
}
/* ==================================================
Attendance / HRIS Schedule Separation
Scoped self-service schedule and HRIS schedule board
================================================== */

body.schedule-self-page-shell .schedule-self-content,
body.schedule-self-page-shell .schedule-self-shell {
    width: 100% !important;
    max-width: 1120px !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
}

body.schedule-self-page-shell .schedule-self-shell,
body.schedule-self-page-shell .schedule-self-shell * {
    box-sizing: border-box !important;
}

body.schedule-self-page-shell .schedule-self-filter {
    display: grid !important;
    grid-template-columns: minmax(180px, 1fr) 150px 132px !important;
    gap: 10px !important;
    align-items: end !important;
    padding: 12px !important;
    margin: 0 0 12px !important;
    border: 1px solid #d9e4f2 !important;
    border-radius: 14px !important;
    background: #ffffff !important;
}

body.schedule-self-page-shell .schedule-self-filter label {
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
    margin: 0 !important;
    min-width: 0 !important;
}

body.schedule-self-page-shell .schedule-self-filter span,
body.schedule-self-page-shell .schedule-self-card span {
    color: #64748b !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: .08em !important;
    line-height: 1.1 !important;
    text-transform: uppercase !important;
}

body.schedule-self-page-shell .schedule-self-filter input,
body.schedule-self-page-shell .schedule-self-filter select,
body.schedule-self-page-shell .schedule-self-filter button {
    width: 100% !important;
    height: 40px !important;
    min-height: 40px !important;
    border-radius: 10px !important;
    font-size: 14px !important;
}

body.schedule-self-page-shell .schedule-self-summary {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
    gap: 10px !important;
    margin-bottom: 12px !important;
}

body.schedule-self-page-shell .schedule-self-card,
body.schedule-self-page-shell .schedule-self-day {
    min-width: 0 !important;
    border: 1px solid #d9e4f2 !important;
    border-radius: 14px !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

body.schedule-self-page-shell .schedule-self-card {
    min-height: 86px !important;
    padding: 13px 14px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 6px !important;
}

body.schedule-self-page-shell .schedule-self-card strong {
    color: #071f3f !important;
    font-size: 18px !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

body.schedule-self-page-shell .schedule-self-card small,
body.schedule-self-page-shell .schedule-self-day small {
    color: #64748b !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
}

body.schedule-self-page-shell .schedule-self-list {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
}

body.schedule-self-page-shell .schedule-self-day {
    display: grid !important;
    grid-template-columns: 92px minmax(0, 1fr) !important;
    gap: 12px !important;
    align-items: center !important;
    min-height: 88px !important;
    padding: 12px !important;
}

body.schedule-self-page-shell .schedule-self-day.is-today {
    border-color: #2d7ee8 !important;
    background: #f8fbff !important;
}

body.schedule-self-page-shell .schedule-self-date,
body.schedule-self-page-shell .schedule-self-shift {
    min-width: 0 !important;
}

body.schedule-self-page-shell .schedule-self-date {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
}

body.schedule-self-page-shell .schedule-self-date > span {
    color: #d6a935 !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
}

body.schedule-self-page-shell .schedule-self-date strong {
    color: #071f3f !important;
    font-size: 20px !important;
    line-height: 1 !important;
}

body.schedule-self-page-shell .schedule-self-shift {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

body.schedule-self-page-shell .schedule-self-shift > div {
    min-width: 0 !important;
}

body.schedule-self-page-shell .schedule-self-shift strong {
    display: block !important;
    color: #071f3f !important;
    font-size: 15px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

body.schedule-self-page-shell .schedule-self-off {
    width: 42px !important;
    height: 30px !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #64748b !important;
    background: #f1f5f9 !important;
    font-weight: 900 !important;
    flex: 0 0 auto !important;
}

body.schedule-self-page-shell .schedule-self-note {
    grid-column: 1 / -1 !important;
    margin: 0 !important;
    padding-top: 8px !important;
    border-top: 1px solid #edf2f7 !important;
    color: #64748b !important;
    font-size: 12px !important;
}

body.schedule-self-page-shell .schedule-self-live-list {
    grid-column: 1 / -1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 7px !important;
    min-width: 0 !important;
    margin-top: 2px !important;
    padding-top: 9px !important;
    border-top: 1px solid #edf2f7 !important;
}

body.schedule-self-page-shell .schedule-self-live-list > span {
    color: #64748b !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    letter-spacing: .08em !important;
    line-height: 1.1 !important;
    text-transform: uppercase !important;
}

body.schedule-self-page-shell .schedule-self-live-item {
    display: grid !important;
    grid-template-columns: 116px minmax(0, 1fr) auto !important;
    gap: 8px !important;
    align-items: center !important;
    min-width: 0 !important;
    min-height: 42px !important;
    padding: 8px 10px !important;
    border: 1px solid var(--schedule-live-cell-border-light, #d9e4f2) !important;
    border-radius: 12px !important;
    background: var(--schedule-live-cell-bg-light, #f8fbff) !important;
    color: var(--schedule-live-person-color-light, #071f3f) !important;
}

body.schedule-self-page-shell .schedule-self-live-item strong,
body.schedule-self-page-shell .schedule-self-live-item span,
body.schedule-self-page-shell .schedule-self-live-item small,
body.schedule-self-page-shell .schedule-self-live-item em {
    min-width: 0 !important;
}

body.schedule-self-page-shell .schedule-self-live-item strong {
    color: inherit !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
}

body.schedule-self-page-shell .schedule-self-live-item div {
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}

body.schedule-self-page-shell .schedule-self-live-item span {
    color: inherit !important;
    display: block !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

body.schedule-self-page-shell .schedule-self-live-item small {
    color: inherit !important;
    display: block !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    opacity: .78 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

body.schedule-self-page-shell .schedule-self-live-item em {
    justify-self: end !important;
    padding: 5px 8px !important;
    border-radius: 999px !important;
    background: rgba(18, 125, 70, .12) !important;
    color: #127d46 !important;
    font-size: 10px !important;
    font-style: normal !important;
    font-weight: 900 !important;
    line-height: 1 !important;
}

body.schedule-self-page-shell .schedule-self-live-rundown {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 0 12px !important;
    padding: 14px !important;
    border: 1px solid #d9e4f2 !important;
    border-radius: 14px !important;
    background: #ffffff !important;
}

body.schedule-self-page-shell .schedule-self-rundown-head {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin-bottom: 12px !important;
    min-width: 0 !important;
}

body.schedule-self-page-shell .schedule-self-rundown-head > div {
    min-width: 0 !important;
}

body.schedule-self-page-shell .schedule-self-rundown-head span {
    color: #d6a935 !important;
    display: block !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    letter-spacing: .1em !important;
    line-height: 1.1 !important;
    margin-bottom: 4px !important;
    text-transform: uppercase !important;
}

body.schedule-self-page-shell .schedule-self-rundown-head h2 {
    color: #071f3f !important;
    font-size: 20px !important;
    line-height: 1.15 !important;
    margin: 0 !important;
}

body.schedule-self-page-shell .schedule-self-rundown-head p {
    color: #64748b !important;
    font-size: 13px !important;
    line-height: 1.3 !important;
    margin: 5px 0 0 !important;
}

body.schedule-self-page-shell .schedule-self-rundown-head > strong {
    flex: 0 0 auto !important;
    padding: 7px 10px !important;
    border-radius: 999px !important;
    background: #eef6ff !important;
    color: #071f3f !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

body.schedule-self-page-shell .schedule-self-rundown-days {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
    gap: 10px !important;
    min-width: 0 !important;
}

body.schedule-self-page-shell .schedule-self-rundown-day {
    min-width: 0 !important;
    padding: 11px !important;
    border: 1px solid #edf2f7 !important;
    border-radius: 12px !important;
    background: #f8fbff !important;
}

body.schedule-self-page-shell .schedule-self-rundown-day.is-today {
    border-color: #2d7ee8 !important;
    background: #f4f9ff !important;
}

body.schedule-self-page-shell .schedule-self-rundown-day header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    margin-bottom: 9px !important;
    min-width: 0 !important;
}

body.schedule-self-page-shell .schedule-self-rundown-day header div {
    min-width: 0 !important;
}

body.schedule-self-page-shell .schedule-self-rundown-day header span {
    color: #64748b !important;
    display: block !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    letter-spacing: .08em !important;
    line-height: 1.1 !important;
    text-transform: uppercase !important;
}

body.schedule-self-page-shell .schedule-self-rundown-day header strong {
    color: #071f3f !important;
    display: block !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    line-height: 1.2 !important;
    margin-top: 3px !important;
}

body.schedule-self-page-shell .schedule-self-rundown-day header em,
body.schedule-self-page-shell .schedule-self-rundown-list li > em {
    flex: 0 0 auto !important;
    padding: 5px 8px !important;
    border-radius: 999px !important;
    background: rgba(18, 125, 70, .12) !important;
    color: #127d46 !important;
    font-size: 10px !important;
    font-style: normal !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

body.schedule-self-page-shell .schedule-self-rundown-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 7px !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.schedule-self-page-shell .schedule-self-rundown-list li {
    display: grid !important;
    grid-template-columns: 28px 108px minmax(0, 1fr) auto !important;
    gap: 8px !important;
    align-items: center !important;
    min-width: 0 !important;
    min-height: 44px !important;
    padding: 8px 10px !important;
    border: 1px solid var(--schedule-live-cell-border-light, #d9e4f2) !important;
    border-radius: 12px !important;
    background: var(--schedule-live-cell-bg-light, #ffffff) !important;
    color: var(--schedule-live-person-color-light, #071f3f) !important;
}

body.schedule-self-page-shell .schedule-self-rundown-list li.is-mine {
    outline: 2px solid rgba(45, 126, 232, .2) !important;
    box-shadow: inset 4px 0 0 #2d7ee8 !important;
}

body.schedule-self-page-shell .schedule-self-rundown-no {
    width: 24px !important;
    height: 24px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    background: #071f3f !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
}

body.schedule-self-page-shell .schedule-self-rundown-list li > strong {
    color: inherit !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
}

body.schedule-self-page-shell .schedule-self-rundown-list li > div {
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}

body.schedule-self-page-shell .schedule-self-rundown-list li > div span {
    color: inherit !important;
    display: block !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    line-height: 1.15 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

body.schedule-self-page-shell .schedule-self-rundown-list li > div small {
    color: inherit !important;
    display: block !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    opacity: .76 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

body.schedule-self-page-shell .schedule-self-empty {
    min-height: 120px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}

body.hris-schedule-page-shell .hris-schedule-content {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 24px 32px !important;
    box-sizing: border-box !important;
}

body.hris-schedule-page-shell .schedule-hris-layout {
    width: 100% !important;
    max-width: none !important;
    display: grid !important;
    grid-template-columns: 260px minmax(0, 1fr) !important;
    gap: 16px !important;
    align-items: start !important;
}

body.hris-schedule-page-shell .schedule-hris-layout > *,
body.hris-schedule-page-shell .hris-schedule-panel {
    min-width: 0 !important;
}

body.hris-schedule-page-shell .hris-schedule-panel {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

body.hris-schedule-page-shell .hris-schedule-panel > .summary {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin: 0 !important;
}

body.hris-schedule-page-shell .hris-schedule-panel > .summary .card-mini,
body.hris-schedule-page-shell .hris-schedule-panel > .meta-grid .meta-card {
    min-height: 70px !important;
    padding: 12px 14px !important;
    border-radius: 12px !important;
}

body.hris-schedule-page-shell .hris-schedule-panel > .meta-grid,
body.hris-schedule-page-shell .schedule-filter-bar {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin: 0 !important;
}

body.hris-schedule-page-shell .schedule-filter-bar input,
body.hris-schedule-page-shell .schedule-filter-bar select,
body.hris-schedule-page-shell .schedule-filter-bar button {
    min-width: 0 !important;
    height: 40px !important;
    min-height: 40px !important;
    border-radius: 10px !important;
    font-size: 13px !important;
}

body.hris-schedule-page-shell .schedule-control-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
}

body.hris-schedule-page-shell .schedule-board-shell,
body.hris-schedule-page-shell .schedule-live-shell {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
}

body.hris-schedule-page-shell .schedule-matrix-wrap,
body.hris-schedule-page-shell .schedule-live-wrap {
    max-width: 100% !important;
    overflow: auto !important;
}

body.hris-schedule-page-shell .schedule-matrix,
body.hris-schedule-page-shell .schedule-live-table {
    width: max-content !important;
    min-width: 100% !important;
}

@media (max-width: 1100px) {
    body.schedule-self-page-shell .schedule-self-summary,
    body.schedule-self-page-shell .schedule-self-list {
        grid-template-columns: 1fr 1fr !important;
    }

    body.hris-schedule-page-shell .schedule-hris-layout {
        grid-template-columns: 1fr !important;
    }

    body.hris-schedule-page-shell .schedule-hris-layout > .internal-module-nav {
        position: static !important;
        width: 100% !important;
    }
}

@media (max-width: 720px) {
    body.schedule-self-page-shell .schedule-self-content,
    body.schedule-self-page-shell .schedule-self-shell {
        max-width: none !important;
    }

    body.schedule-self-page-shell .schedule-self-filter,
    body.schedule-self-page-shell .schedule-self-summary,
    body.schedule-self-page-shell .schedule-self-list,
    body.schedule-self-page-shell .schedule-self-day {
        grid-template-columns: 1fr !important;
    }

    body.schedule-self-page-shell .schedule-self-filter {
        padding: 10px !important;
    }

    body.schedule-self-page-shell .schedule-self-day {
        gap: 10px !important;
    }

    body.schedule-self-page-shell .schedule-self-live-item {
        grid-template-columns: 1fr !important;
        gap: 5px !important;
    }

    body.schedule-self-page-shell .schedule-self-live-item em {
        justify-self: start !important;
    }

    body.schedule-self-page-shell .schedule-self-rundown-head {
        flex-direction: column !important;
    }

    body.schedule-self-page-shell .schedule-self-rundown-days {
        grid-template-columns: 1fr !important;
    }

    body.schedule-self-page-shell .schedule-self-rundown-list li {
        grid-template-columns: 28px minmax(0, 1fr) !important;
    }

    body.schedule-self-page-shell .schedule-self-rundown-list li > strong,
    body.schedule-self-page-shell .schedule-self-rundown-list li > div,
    body.schedule-self-page-shell .schedule-self-rundown-list li > em {
        grid-column: 2 / 3 !important;
    }

    body.schedule-self-page-shell .schedule-self-rundown-list li > em {
        justify-self: start !important;
    }

    body.hris-schedule-page-shell .hris-schedule-content {
        padding: 0 12px 24px !important;
    }

    body.hris-schedule-page-shell .hris-schedule-panel > .summary,
    body.hris-schedule-page-shell .hris-schedule-panel > .meta-grid,
    body.hris-schedule-page-shell .schedule-filter-bar,
    body.hris-schedule-page-shell .schedule-control-grid {
        grid-template-columns: 1fr !important;
    }
}

/* HRIS > Jadwal Tim compact daily + matrix UI */
html[data-theme] body.hris-schedule-page-shell,
body.hris-schedule-page-shell {
    overflow-x: hidden !important;
    background: #f8fafc !important;
}

html[data-theme] body.hris-schedule-page-shell .hris-schedule-content,
body.hris-schedule-page-shell .hris-schedule-content,
html[data-theme] body.hris-schedule-page-shell .schedule-hris-layout,
body.hris-schedule-page-shell .schedule-hris-layout,
html[data-theme] body.hris-schedule-page-shell .hris-schedule-panel,
body.hris-schedule-page-shell .hris-schedule-panel {
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
}

html[data-theme] body.hris-schedule-page-shell .schedule-hris-layout,
body.hris-schedule-page-shell .schedule-hris-layout {
    grid-template-columns: minmax(168px, 220px) minmax(0, 1fr) !important;
    gap: 14px !important;
}

body.hris-schedule-page-shell .team-schedule-compact-header {
    order: 1 !important;
}

body.hris-schedule-page-shell .team-schedule-toolbar {
    order: 2 !important;
}

body.hris-schedule-page-shell .team-schedule-helper {
    order: 3 !important;
}

body.hris-schedule-page-shell .team-schedule-daily-section {
    order: 4 !important;
}

body.hris-schedule-page-shell .schedule-board-shell {
    order: 5 !important;
}

body.hris-schedule-page-shell .schedule-live-shell {
    order: 6 !important;
}

body.hris-schedule-page-shell .schedule-legend-box,
body.hris-schedule-page-shell .schedule-control-grid,
body.hris-schedule-page-shell .hris-schedule-panel > .schedule-panel-disclosure {
    order: 7 !important;
}

body.hris-schedule-page-shell :is(.team-schedule-compact-header, .team-schedule-toolbar, .team-schedule-daily-section, .team-schedule-board-card) {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

body.hris-schedule-page-shell .team-schedule-compact-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 12px !important;
    align-items: center !important;
    padding: 12px 14px !important;
    border: 1px solid #dbe3ee !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    box-shadow: 0 8px 22px rgba(15, 23, 42, .04) !important;
}

body.hris-schedule-page-shell .team-schedule-title-block,
body.hris-schedule-page-shell .team-schedule-title-block * {
    min-width: 0 !important;
}

body.hris-schedule-page-shell .team-schedule-eyebrow {
    margin: 0 0 3px !important;
    color: #64748b !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0 !important;
}

body.hris-schedule-page-shell .team-schedule-compact-header h2,
body.hris-schedule-page-shell .team-schedule-daily-head h2 {
    margin: 0 !important;
    color: #0f2745 !important;
    font-size: 20px !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
}

body.hris-schedule-page-shell .team-schedule-compact-header p,
body.hris-schedule-page-shell .team-schedule-daily-head p {
    margin: 4px 0 0 !important;
    color: #475569 !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
}

body.hris-schedule-page-shell .team-schedule-context-chips,
body.hris-schedule-page-shell .team-schedule-counts {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
    gap: 6px !important;
}

body.hris-schedule-page-shell .team-schedule-context-chips span,
body.hris-schedule-page-shell .team-schedule-counts span {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 28px !important;
    padding: 4px 9px !important;
    border: 1px solid #d8e2ee !important;
    border-radius: 999px !important;
    background: #f8fafc !important;
    color: #0f2745 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
}

body.hris-schedule-page-shell .team-schedule-counts b {
    margin-right: 4px !important;
    color: #0f2745 !important;
}

body.hris-schedule-page-shell .team-schedule-toolbar {
    display: grid !important;
    grid-template-columns: auto minmax(136px, .72fr) 118px minmax(148px, .76fr) minmax(160px, 1fr) minmax(138px, .72fr) auto auto !important;
    gap: 8px !important;
    align-items: end !important;
    padding: 10px !important;
    border: 1px solid #dbe3ee !important;
    border-radius: 10px !important;
    background: #ffffff !important;
}

body.hris-schedule-page-shell .team-schedule-toolbar label {
    display: grid !important;
    gap: 4px !important;
    min-width: 0 !important;
    margin: 0 !important;
}

body.hris-schedule-page-shell .team-schedule-toolbar label > span {
    color: #475569 !important;
    font-size: 11px !important;
    font-weight: 800 !important;
}

body.hris-schedule-page-shell .team-schedule-toolbar :is(input, select, button) {
    width: 100% !important;
    min-width: 0 !important;
    height: 36px !important;
    min-height: 36px !important;
    border-radius: 8px !important;
    font-size: 12px !important;
    letter-spacing: 0 !important;
}

body.hris-schedule-page-shell .team-schedule-toolbar :is(input, select) {
    border: 1px solid #cfd8e5 !important;
    background: #ffffff !important;
    color: #0f2745 !important;
}

body.hris-schedule-page-shell .team-schedule-toolbar button {
    border: 1px solid #0f2745 !important;
    background: #0f2745 !important;
    color: #ffffff !important;
    font-weight: 800 !important;
}

body.hris-schedule-page-shell .team-schedule-view-toggle {
    display: inline-grid !important;
    grid-template-columns: repeat(2, minmax(72px, 1fr)) !important;
    gap: 3px !important;
    padding: 3px !important;
    border: 1px solid #d7e0ec !important;
    border-radius: 9px !important;
    background: #f1f5f9 !important;
}

body.hris-schedule-page-shell .team-schedule-view-toggle button {
    height: 30px !important;
    min-height: 30px !important;
    border: 0 !important;
    background: transparent !important;
    color: #334155 !important;
    padding: 0 9px !important;
}

body.hris-schedule-page-shell .team-schedule-view-toggle button.is-active {
    background: #0f2745 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 10px rgba(15, 39, 69, .18) !important;
}

body.hris-schedule-page-shell .team-schedule-override-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    height: 36px !important;
    padding: 0 10px !important;
    border: 1px solid #d7e0ec !important;
    border-radius: 8px !important;
    background: #f8fafc !important;
}

body.hris-schedule-page-shell .team-schedule-override-toggle input {
    width: 15px !important;
    height: 15px !important;
    min-height: 15px !important;
}

body.hris-schedule-page-shell .team-schedule-helper {
    margin: -4px 0 0 !important;
    color: #64748b !important;
    font-size: 12px !important;
}

body.hris-schedule-page-shell [data-team-view-panel][hidden],
body.hris-schedule-page-shell [data-team-day-panel][hidden],
body.hris-schedule-page-shell [data-team-card][hidden],
body.hris-schedule-page-shell [data-team-group][hidden],
body.hris-schedule-page-shell [data-team-matrix-cell][hidden],
body.hris-schedule-page-shell [data-team-staff-header][hidden] {
    display: none !important;
}

body.hris-schedule-page-shell .team-schedule-daily-section {
    display: none !important;
    padding: 12px !important;
    border: 1px solid #dbe3ee !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    box-shadow: 0 8px 22px rgba(15, 23, 42, .04) !important;
}

body.hris-schedule-page-shell .team-schedule-daily-section.is-active {
    display: grid !important;
    gap: 12px !important;
}

body.hris-schedule-page-shell .team-schedule-daily-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 10px !important;
    align-items: end !important;
}

body.hris-schedule-page-shell .team-schedule-day-controls {
    display: grid !important;
    grid-template-columns: 34px minmax(190px, 1fr) auto 34px !important;
    gap: 6px !important;
    align-items: center !important;
}

body.hris-schedule-page-shell .team-schedule-day-controls :is(button, select) {
    height: 34px !important;
    min-height: 34px !important;
    border-radius: 8px !important;
    border: 1px solid #cfd8e5 !important;
    background: #ffffff !important;
    color: #0f2745 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
}

body.hris-schedule-page-shell .team-schedule-day-controls button {
    background: #f8fafc !important;
}

body.hris-schedule-page-shell .team-schedule-day-panel {
    display: none !important;
}

body.hris-schedule-page-shell .team-schedule-day-panel.is-active {
    display: grid !important;
    gap: 12px !important;
}

body.hris-schedule-page-shell .team-schedule-day-summary {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 10px !important;
    align-items: center !important;
    padding: 10px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 9px !important;
    background: #f8fafc !important;
}

body.hris-schedule-page-shell .team-schedule-day-summary > div:first-child {
    min-width: 0 !important;
}

body.hris-schedule-page-shell .team-schedule-day-summary span {
    display: block !important;
    color: #64748b !important;
    font-size: 11px !important;
    font-weight: 800 !important;
}

body.hris-schedule-page-shell .team-schedule-day-summary strong {
    display: inline-block !important;
    margin-top: 2px !important;
    color: #0f2745 !important;
    font-size: 18px !important;
    line-height: 1.2 !important;
}

body.hris-schedule-page-shell .team-schedule-day-summary em {
    display: inline-flex !important;
    margin-left: 6px !important;
    padding: 3px 7px !important;
    border-radius: 999px !important;
    background: #e7f8ef !important;
    color: #166534 !important;
    font-size: 10px !important;
    font-style: normal !important;
    font-weight: 900 !important;
}

body.hris-schedule-page-shell .team-schedule-day-summary small {
    display: block !important;
    margin-top: 4px !important;
    color: #64748b !important;
    font-size: 11px !important;
}

body.hris-schedule-page-shell .team-schedule-groups {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
}

body.hris-schedule-page-shell .team-schedule-group {
    min-width: 0 !important;
    padding: 10px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    background: #ffffff !important;
}

body.hris-schedule-page-shell .team-schedule-group-head {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    margin-bottom: 8px !important;
    min-width: 0 !important;
}

body.hris-schedule-page-shell .team-schedule-group-head strong {
    min-width: 0 !important;
    color: #0f2745 !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

body.hris-schedule-page-shell .team-schedule-group-head small {
    margin-left: auto !important;
    color: #64748b !important;
    font-size: 11px !important;
    white-space: nowrap !important;
}

body.hris-schedule-page-shell .team-schedule-staff-list {
    display: grid !important;
    gap: 6px !important;
}

body.hris-schedule-page-shell .team-schedule-staff-card {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(150px, .8fr) auto !important;
    gap: 8px !important;
    align-items: center !important;
    min-height: 48px !important;
    padding: 7px 8px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    background: #f8fafc !important;
}

body.hris-schedule-page-shell .team-schedule-staff-main,
body.hris-schedule-page-shell .team-schedule-shift-line {
    min-width: 0 !important;
}

body.hris-schedule-page-shell .team-schedule-staff-main strong {
    display: block !important;
    color: #0f2745 !important;
    font-size: 13px !important;
    line-height: 1.18 !important;
    font-weight: 900 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

body.hris-schedule-page-shell .team-schedule-staff-main small,
body.hris-schedule-page-shell .team-schedule-shift-line small {
    display: block !important;
    margin-top: 2px !important;
    color: #64748b !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

body.hris-schedule-page-shell .team-schedule-shift-line {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    gap: 5px !important;
    align-items: center !important;
}

body.hris-schedule-page-shell .team-schedule-shift-line span:not(.team-shift-badge) {
    color: #1f2937 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

body.hris-schedule-page-shell .team-schedule-shift-line small {
    grid-column: 2 / 3 !important;
}

body.hris-schedule-page-shell .team-schedule-card-meta {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 5px !important;
}

body.hris-schedule-page-shell .team-schedule-card-meta em,
body.hris-schedule-page-shell .team-schedule-card-meta span {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 22px !important;
    padding: 3px 7px !important;
    border-radius: 999px !important;
    background: #eef2f7 !important;
    color: #334155 !important;
    font-size: 10px !important;
    font-style: normal !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
}

body.hris-schedule-page-shell .team-schedule-card-action {
    height: 28px !important;
    min-height: 28px !important;
    padding: 0 10px !important;
    border: 1px solid #0f2745 !important;
    border-radius: 7px !important;
    background: #0f2745 !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 900 !important;
}

body.hris-schedule-page-shell .team-schedule-filter-empty {
    padding: 12px !important;
    border: 1px dashed #cbd5e1 !important;
    border-radius: 9px !important;
    color: #64748b !important;
    text-align: center !important;
    font-size: 12px !important;
}

body.hris-schedule-page-shell .team-shift-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 34px !important;
    min-height: 24px !important;
    padding: 3px 8px !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 999px !important;
    background: #f8fafc !important;
    color: #0f2745 !important;
    font-size: 11px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
}

body.hris-schedule-page-shell .team-shift-badge.is-pagi,
body.hris-schedule-page-shell .team-schedule-card-meta em.is-pagi {
    background: #e7f8ef !important;
    border-color: #bbefd0 !important;
    color: #166534 !important;
}

body.hris-schedule-page-shell .team-shift-badge.is-siang,
body.hris-schedule-page-shell .team-schedule-card-meta em.is-siang {
    background: #fff4d6 !important;
    border-color: #fde5a7 !important;
    color: #92400e !important;
}

body.hris-schedule-page-shell .team-shift-badge.is-malam,
body.hris-schedule-page-shell .team-schedule-card-meta em.is-malam {
    background: #eef2ff !important;
    border-color: #d7defe !important;
    color: #3730a3 !important;
}

body.hris-schedule-page-shell .team-shift-badge.is-off,
body.hris-schedule-page-shell .team-schedule-card-meta em.is-off {
    background: #ffecec !important;
    border-color: #fecaca !important;
    color: #991b1b !important;
}

body.hris-schedule-page-shell .team-shift-badge.is-override,
body.hris-schedule-page-shell .team-schedule-card-meta em.is-override {
    background: #fff7ed !important;
    border-color: #fed7aa !important;
    color: #9a3412 !important;
}

body.hris-schedule-page-shell .team-shift-badge.is-lainnya,
body.hris-schedule-page-shell .team-schedule-card-meta em.is-lainnya {
    background: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
    color: #334155 !important;
}

body.hris-schedule-page-shell .team-schedule-board-card {
    display: none !important;
    padding: 12px !important;
    border-radius: 10px !important;
    border: 1px solid #dbe3ee !important;
    background: #ffffff !important;
}

body.hris-schedule-page-shell .team-schedule-board-card.is-active {
    display: block !important;
}

body.hris-schedule-page-shell .team-schedule-board-scroll {
    width: min(100%, var(--team-schedule-table-width, 100%)) !important;
    max-width: 100% !important;
    max-height: 66vh !important;
    overflow: auto !important;
    border: 1px solid #dbe3ee !important;
    border-radius: 10px !important;
    background: #ffffff !important;
}

body.hris-schedule-page-shell .team-schedule-matrix {
    display: inline-table !important;
    width: var(--team-schedule-table-width, auto) !important;
    min-width: var(--team-schedule-table-width, 0) !important;
    table-layout: fixed !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

body.hris-schedule-page-shell .team-schedule-matrix th,
body.hris-schedule-page-shell .team-schedule-matrix td {
    box-sizing: border-box !important;
    border-bottom: 1px solid #e2e8f0 !important;
    border-right: 1px solid #edf2f7 !important;
}

body.hris-schedule-page-shell .team-schedule-date-col {
    position: sticky !important;
    left: 0 !important;
    z-index: 5 !important;
    width: 180px !important;
    min-width: 180px !important;
    max-width: 180px !important;
    background: #f8fafc !important;
}

body.hris-schedule-page-shell .team-schedule-matrix thead .team-schedule-date-col {
    z-index: 8 !important;
}

body.hris-schedule-page-shell .team-schedule-staff-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 6 !important;
    width: 128px !important;
    min-width: 128px !important;
    max-width: 128px !important;
    height: 52px !important;
    padding: 7px 8px !important;
    background: #f8fafc !important;
    vertical-align: middle !important;
}

body.hris-schedule-page-shell .team-staff-name,
body.hris-schedule-page-shell .team-schedule-staff-header small {
    display: block !important;
    min-width: 0 !important;
    max-width: 112px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

body.hris-schedule-page-shell .team-staff-name {
    color: #0f2745 !important;
    font-size: 12px !important;
    line-height: 1.15 !important;
    font-weight: 900 !important;
}

body.hris-schedule-page-shell .team-schedule-staff-header small {
    margin-top: 3px !important;
    color: #64748b !important;
    font-size: 10px !important;
    line-height: 1.1 !important;
    text-transform: uppercase !important;
}

body.hris-schedule-page-shell .team-schedule-cell {
    width: 128px !important;
    min-width: 128px !important;
    max-width: 128px !important;
    height: 58px !important;
    padding: 7px 8px !important;
    text-align: center !important;
    background: #ffffff !important;
    cursor: pointer !important;
}

body.hris-schedule-page-shell .team-schedule-cell:hover {
    background: #f8fafc !important;
}

body.hris-schedule-page-shell .team-schedule-cell.is-auto {
    background: #fffaf2 !important;
}

body.hris-schedule-page-shell .team-schedule-cell .schedule-matrix-pill {
    min-width: 34px !important;
    min-height: 24px !important;
    padding: 3px 8px !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    font-weight: 900 !important;
}

body.hris-schedule-page-shell .team-schedule-cell .schedule-matrix-cell-label {
    display: block !important;
    margin-top: 3px !important;
    color: #475569 !important;
    font-size: 10.5px !important;
    line-height: 1.15 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

body.hris-schedule-page-shell .team-schedule-date-col .schedule-matrix-date-day,
body.hris-schedule-page-shell .team-schedule-date-col .schedule-matrix-date-value {
    font-size: 12px !important;
    line-height: 1.15 !important;
}

body.hris-schedule-page-shell .team-schedule-editor-drawer {
    position: fixed !important;
    top: 74px !important;
    right: 16px !important;
    z-index: 2200 !important;
    width: min(480px, calc(100vw - 32px)) !important;
    max-height: calc(100vh - 92px) !important;
    overflow: auto !important;
    transform: translateX(calc(100% + 36px)) !important;
    visibility: hidden !important;
    pointer-events: none !important;
    border: 1px solid #cfd8e5 !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    box-shadow: 0 24px 70px rgba(15, 23, 42, .22) !important;
    transition: transform .18s ease, visibility .18s ease !important;
}

body.hris-schedule-page-shell .team-schedule-editor-drawer[open] {
    transform: translateX(0) !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

body.hris-schedule-page-shell.team-schedule-editor-open::before {
    content: "" !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 2190 !important;
    background: rgba(15, 23, 42, .34) !important;
}

body.hris-schedule-page-shell .team-schedule-editor-drawer .schedule-panel-summary {
    position: sticky !important;
    top: 0 !important;
    z-index: 1 !important;
    background: #ffffff !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

body.hris-schedule-page-shell .team-schedule-editor-drawer .schedule-panel-content {
    padding: 12px !important;
}

body.hris-schedule-page-shell .team-schedule-editor-drawer .form-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
}

@media (max-width: 1180px) {
    body.hris-schedule-page-shell .schedule-hris-layout {
        grid-template-columns: 1fr !important;
    }

    body.hris-schedule-page-shell .team-schedule-toolbar {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }

    body.hris-schedule-page-shell .team-schedule-view-toggle,
    body.hris-schedule-page-shell .team-schedule-toolbar > button {
        grid-column: span 2 !important;
    }

    body.hris-schedule-page-shell .team-schedule-groups {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 760px) {
    body.hris-schedule-page-shell .hris-schedule-content {
        padding: 0 10px 22px !important;
    }

    body.hris-schedule-page-shell .team-schedule-compact-header,
    body.hris-schedule-page-shell .team-schedule-daily-head,
    body.hris-schedule-page-shell .team-schedule-day-summary {
        grid-template-columns: 1fr !important;
        align-items: stretch !important;
    }

    body.hris-schedule-page-shell .team-schedule-context-chips,
    body.hris-schedule-page-shell .team-schedule-counts {
        justify-content: flex-start !important;
    }

    body.hris-schedule-page-shell .team-schedule-toolbar {
        grid-template-columns: 1fr 1fr !important;
    }

    body.hris-schedule-page-shell .team-schedule-view-toggle,
    body.hris-schedule-page-shell .team-schedule-toolbar label,
    body.hris-schedule-page-shell .team-schedule-override-toggle,
    body.hris-schedule-page-shell .team-schedule-toolbar > button {
        grid-column: 1 / -1 !important;
    }

    body.hris-schedule-page-shell .team-schedule-day-controls {
        grid-template-columns: 34px minmax(0, 1fr) 82px 34px !important;
    }

    body.hris-schedule-page-shell .team-schedule-staff-card {
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: start !important;
    }

    body.hris-schedule-page-shell .team-schedule-shift-line {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
    }

    body.hris-schedule-page-shell .team-schedule-card-meta {
        grid-column: 2 / 3 !important;
        grid-row: 1 / span 2 !important;
        flex-direction: column !important;
        align-items: flex-end !important;
    }

    body.hris-schedule-page-shell .team-schedule-board-scroll {
        max-height: 58vh !important;
    }

    body.hris-schedule-page-shell .team-schedule-date-col {
        width: 142px !important;
        min-width: 142px !important;
        max-width: 142px !important;
    }

    body.hris-schedule-page-shell .team-schedule-staff-header,
    body.hris-schedule-page-shell .team-schedule-cell {
        width: 112px !important;
        min-width: 112px !important;
        max-width: 112px !important;
    }

    body.hris-schedule-page-shell .team-schedule-editor-drawer {
        inset: auto 0 0 0 !important;
        width: 100% !important;
        max-height: 88vh !important;
        border-radius: 16px 16px 0 0 !important;
        transform: translateY(110%) !important;
    }

    body.hris-schedule-page-shell .team-schedule-editor-drawer[open] {
        transform: translateY(0) !important;
    }
}

/* Final scoped overrides for Attendance > Jadwal Saya refresh */
body.schedule-self-page-shell .attendance-schedule-page .attendance-schedule-filter {
    grid-template-columns: minmax(190px, 1fr) minmax(150px, .75fr) minmax(150px, .75fr) auto !important;
    border-radius: 8px !important;
}

body.schedule-self-page-shell .attendance-schedule-page .attendance-schedule-summary {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

body.schedule-self-page-shell .attendance-schedule-page .attendance-week-list {
    display: grid !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    gap: 10px !important;
    overflow-x: visible !important;
}

body.schedule-self-page-shell .attendance-schedule-page .attendance-week-card {
    display: flex !important;
    grid-template-columns: none !important;
    min-height: 132px !important;
    flex-direction: column !important;
    align-items: stretch !important;
    border-radius: 8px !important;
}

body.schedule-self-page-shell .attendance-schedule-page .attendance-live-row {
    grid-template-columns: 34px minmax(112px, .55fr) minmax(0, 1fr) auto !important;
}

body.schedule-self-page-shell .attendance-schedule-page .attendance-rundown-details {
    margin: 0 !important;
    border-radius: 8px !important;
}

@media (max-width: 1180px) {
    body.schedule-self-page-shell .attendance-schedule-page .attendance-schedule-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    body.schedule-self-page-shell .attendance-schedule-page .attendance-week-list {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 760px) {
    body.schedule-self-page-shell .attendance-schedule-page .attendance-schedule-filter {
        grid-template-columns: 1fr !important;
    }

    body.schedule-self-page-shell .attendance-schedule-page .attendance-schedule-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    body.schedule-self-page-shell .attendance-schedule-page .attendance-week-list {
        display: flex !important;
        overflow-x: auto !important;
    }

    body.schedule-self-page-shell .attendance-schedule-page .attendance-week-card {
        flex: 0 0 84px !important;
        min-height: 110px !important;
    }

    body.schedule-self-page-shell .attendance-schedule-page .attendance-live-row {
        grid-template-columns: 28px minmax(80px, .75fr) minmax(0, 1fr) !important;
    }
}

/* Attendance > Jadwal Tim Leader operational dashboard */
body.schedule-team-page-shell,
body.schedule-team-page-shell .page-content-bleed {
    overflow-x: hidden !important;
}

body.schedule-team-page-shell .page-hero {
    max-width: 1180px !important;
    margin: 0 auto 12px !important;
    padding: 0 !important;
    min-height: auto !important;
}

body.schedule-team-page-shell .page-hero h1 {
    font-size: 28px !important;
    line-height: 1.1 !important;
    letter-spacing: 0 !important;
    margin: 0 0 4px !important;
}

body.schedule-team-page-shell .page-hero p {
    font-size: 13px !important;
    line-height: 1.35 !important;
    margin: 0 !important;
}

body.schedule-team-page-shell .attendance-team-page,
body.schedule-team-page-shell .attendance-team-page * {
    box-sizing: border-box !important;
}

body.schedule-team-page-shell .attendance-team-page {
    width: 100% !important;
    max-width: 1180px !important;
    margin: 0 auto !important;
    display: grid !important;
    gap: 12px !important;
    color: #061a44 !important;
}

body.schedule-team-page-shell .attendance-team-filter {
    display: grid !important;
    grid-template-columns: minmax(160px, 1fr) 150px minmax(180px, 1fr) 132px auto !important;
    gap: 10px !important;
    align-items: end !important;
    padding: 12px !important;
    border: 1px solid #dbe5f2 !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    box-shadow: 0 10px 28px rgba(15, 23, 42, .04) !important;
}

body.schedule-team-page-shell .attendance-team-filter label {
    min-width: 0 !important;
    display: grid !important;
    gap: 5px !important;
    margin: 0 !important;
}

body.schedule-team-page-shell .attendance-team-filter label > span {
    color: #39506f !important;
    font-size: 11px !important;
    font-weight: 800 !important;
}

body.schedule-team-page-shell .attendance-team-filter input,
body.schedule-team-page-shell .attendance-team-filter select,
body.schedule-team-page-shell .attendance-team-filter button {
    width: 100% !important;
    height: 36px !important;
    min-height: 36px !important;
    border-radius: 7px !important;
    font-size: 13px !important;
}

body.schedule-team-page-shell .attendance-team-filter button {
    border: 0 !important;
    color: #ffffff !important;
    background: #061a44 !important;
    font-weight: 800 !important;
}

body.schedule-team-page-shell .attendance-team-filter-badges {
    display: grid !important;
    grid-template-columns: repeat(2, max-content) !important;
    gap: 8px !important;
    align-items: center !important;
}

body.schedule-team-page-shell .attendance-team-filter-badges span,
body.schedule-team-page-shell .attendance-team-badge {
    min-height: 28px !important;
    padding: 6px 10px !important;
    border-radius: 7px !important;
    background: #f3f7ff !important;
    color: #061a44 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
}

body.schedule-team-page-shell .attendance-team-summary {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 10px !important;
}

body.schedule-team-page-shell .attendance-summary-card,
body.schedule-team-page-shell .attendance-team-panel {
    min-width: 0 !important;
    border: 1px solid #dbe5f2 !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    box-shadow: 0 10px 28px rgba(15, 23, 42, .04) !important;
}

body.schedule-team-page-shell .attendance-summary-card {
    min-height: 96px !important;
    padding: 13px !important;
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) !important;
    gap: 10px !important;
    align-items: center !important;
}

body.schedule-team-page-shell .attendance-summary-icon {
    width: 42px !important;
    height: 42px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 11px !important;
    font-weight: 900 !important;
}

body.schedule-team-page-shell .accent-green .attendance-summary-icon { background: #dcfce7 !important; color: #047857 !important; }
body.schedule-team-page-shell .accent-orange .attendance-summary-icon { background: #ffedd5 !important; color: #d97706 !important; }
body.schedule-team-page-shell .accent-purple .attendance-summary-icon { background: #ede9fe !important; color: #6d28d9 !important; }
body.schedule-team-page-shell .accent-blue .attendance-summary-icon { background: #dbeafe !important; color: #2563eb !important; }
body.schedule-team-page-shell .accent-violet .attendance-summary-icon { background: #eee7ff !important; color: #5b21b6 !important; }

body.schedule-team-page-shell .attendance-summary-card p,
body.schedule-team-page-shell .attendance-summary-card small {
    margin: 0 !important;
    color: #53657f !important;
    font-size: 11px !important;
    line-height: 1.25 !important;
}

body.schedule-team-page-shell .attendance-summary-card strong {
    display: block !important;
    color: #061a44 !important;
    font-size: 20px !important;
    line-height: 1.15 !important;
    margin: 3px 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

body.schedule-team-page-shell .attendance-summary-card a,
body.schedule-team-page-shell .attendance-summary-card em {
    display: inline-flex !important;
    width: max-content !important;
    margin-top: 5px !important;
    padding: 4px 8px !important;
    border-radius: 7px !important;
    background: #fff7ed !important;
    color: #ea580c !important;
    font-size: 11px !important;
    font-style: normal !important;
    font-weight: 800 !important;
    text-decoration: none !important;
}

body.schedule-team-page-shell .attendance-summary-card em {
    background: #eaf2ff !important;
    color: #2563eb !important;
}

body.schedule-team-page-shell .attendance-team-primary-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) !important;
    gap: 12px !important;
    align-items: start !important;
}

body.schedule-team-page-shell .attendance-team-panel {
    padding: 13px !important;
}

body.schedule-team-page-shell .attendance-team-section-head {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 10px !important;
    margin-bottom: 10px !important;
}

body.schedule-team-page-shell .attendance-team-section-head h2 {
    margin: 0 0 4px !important;
    color: #061a44 !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
}

body.schedule-team-page-shell .attendance-team-section-head p {
    margin: 0 !important;
    color: #53657f !important;
    font-size: 12px !important;
}

body.schedule-team-page-shell .attendance-live-table,
body.schedule-team-page-shell .attendance-team-today-table {
    display: grid !important;
    gap: 0 !important;
}

body.schedule-team-page-shell .attendance-live-table-head,
body.schedule-team-page-shell .attendance-live-row {
    display: grid !important;
    grid-template-columns: 58px minmax(102px, .55fr) minmax(120px, 1fr) 108px minmax(90px, .8fr) !important;
    gap: 8px !important;
    align-items: center !important;
}

body.schedule-team-page-shell .attendance-team-today-head,
body.schedule-team-page-shell .attendance-team-today-row {
    display: grid !important;
    grid-template-columns: minmax(140px, 1fr) minmax(104px, .75fr) 72px 104px !important;
    gap: 8px !important;
    align-items: center !important;
}

body.schedule-team-page-shell .attendance-live-table-head,
body.schedule-team-page-shell .attendance-team-today-head {
    min-height: 30px !important;
    color: #53657f !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
}

body.schedule-team-page-shell .attendance-live-row,
body.schedule-team-page-shell .attendance-team-today-row {
    min-height: 42px !important;
    padding: 7px 0 !important;
    border-top: 1px solid #edf2f7 !important;
    color: #061a44 !important;
    font-size: 12px !important;
}

body.schedule-team-page-shell .attendance-live-row.is-current,
body.schedule-team-page-shell .attendance-team-today-row.is-live {
    padding-left: 8px !important;
    padding-right: 8px !important;
    border-radius: 7px !important;
    background: #eff6ff !important;
}

body.schedule-team-page-shell .attendance-live-row.is-next {
    padding-left: 8px !important;
    padding-right: 8px !important;
    border-radius: 7px !important;
    background: #fff7ed !important;
}

body.schedule-team-page-shell .attendance-live-seq {
    width: 24px !important;
    height: 24px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #061a44 !important;
    color: #ffffff !important;
    font-weight: 900 !important;
}

body.schedule-team-page-shell .attendance-live-row em,
body.schedule-team-page-shell .attendance-team-today-row em,
body.schedule-team-page-shell .attendance-presence {
    width: max-content !important;
    max-width: 100% !important;
    padding: 4px 8px !important;
    border-radius: 7px !important;
    background: #f1f5f9 !important;
    color: #475569 !important;
    font-size: 11px !important;
    font-style: normal !important;
    font-weight: 800 !important;
}

body.schedule-team-page-shell .attendance-live-row.is-current em,
body.schedule-team-page-shell .attendance-team-today-row.is-live em { background: #dbeafe !important; color: #2563eb !important; }
body.schedule-team-page-shell .attendance-live-row.is-next em { background: #ffedd5 !important; color: #ea580c !important; }
body.schedule-team-page-shell .attendance-live-row.is-done em,
body.schedule-team-page-shell .attendance-presence.is-present { background: #dcfce7 !important; color: #059669 !important; }
body.schedule-team-page-shell .attendance-presence.is-pending { background: #fff7ed !important; color: #d97706 !important; }

body.schedule-team-page-shell .attendance-team-today-row strong,
body.schedule-team-page-shell .attendance-team-today-row span,
body.schedule-team-page-shell .attendance-team-today-row small,
body.schedule-team-page-shell .attendance-live-row strong,
body.schedule-team-page-shell .attendance-live-row span,
body.schedule-team-page-shell .attendance-live-row small {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

body.schedule-team-page-shell .attendance-team-today-row small,
body.schedule-team-page-shell .attendance-live-row small {
    display: block !important;
    color: #53657f !important;
    font-size: 11px !important;
}

body.schedule-team-page-shell .attendance-week-matrix-wrap {
    width: 100% !important;
    overflow-x: auto !important;
    overscroll-behavior-x: contain !important;
}

body.schedule-team-page-shell .attendance-week-matrix {
    width: 100% !important;
    min-width: 760px !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    table-layout: fixed !important;
}

body.schedule-team-page-shell .attendance-week-matrix th,
body.schedule-team-page-shell .attendance-week-matrix td {
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    padding: 5px 8px !important;
    border: 1px solid #edf2f7 !important;
    color: #061a44 !important;
    font-size: 11px !important;
    line-height: 1.18 !important;
    vertical-align: middle !important;
    overflow: hidden !important;
}

body.schedule-team-page-shell .attendance-week-matrix thead th {
    background: #f8fbff !important;
    color: #53657f !important;
    font-size: 11px !important;
    font-weight: 900 !important;
}

body.schedule-team-page-shell .attendance-week-matrix th:first-child {
    width: 124px !important;
    position: sticky !important;
    left: 0 !important;
    z-index: 2 !important;
    background: #ffffff !important;
}

body.schedule-team-page-shell .attendance-week-matrix td strong,
body.schedule-team-page-shell .attendance-week-matrix td small,
body.schedule-team-page-shell .attendance-week-matrix th strong,
body.schedule-team-page-shell .attendance-week-matrix th small {
    display: block !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

body.schedule-team-page-shell .attendance-week-matrix th strong {
    font-size: 11px !important;
    letter-spacing: .03em !important;
    text-transform: uppercase !important;
}

body.schedule-team-page-shell .attendance-week-matrix th small {
    max-width: 100% !important;
    color: #64748b !important;
    font-size: 10px !important;
    line-height: 1.1 !important;
}

body.schedule-team-page-shell .attendance-week-matrix td strong {
    font-size: 11px !important;
    line-height: 1.15 !important;
    color: #047857 !important;
}

body.schedule-team-page-shell .attendance-week-matrix td small {
    margin-top: 3px !important;
    color: #64748b !important;
    font-size: 10px !important;
    line-height: 1.1 !important;
}

body.schedule-team-page-shell .attendance-week-matrix td.is-live strong { color: #5b21b6 !important; }
body.schedule-team-page-shell .attendance-week-matrix td.is-off strong { color: #d97706 !important; }
body.schedule-team-page-shell .attendance-week-matrix td.is-empty strong { color: #64748b !important; }
body.schedule-team-page-shell .attendance-week-matrix .is-focus {
    border-color: #2563eb !important;
    box-shadow: inset 0 0 0 1px #2563eb !important;
}

body.schedule-team-page-shell .attendance-week-legend {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    align-items: center !important;
    color: #061a44 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
}

body.schedule-team-page-shell .attendance-week-legend span {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

body.schedule-team-page-shell .attendance-week-legend i {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
}

body.schedule-team-page-shell .attendance-week-legend .is-work { background: #059669 !important; }
body.schedule-team-page-shell .attendance-week-legend .is-live { background: #5b21b6 !important; }
body.schedule-team-page-shell .attendance-week-legend .is-off { background: #f59e0b !important; }
body.schedule-team-page-shell .attendance-week-legend .is-empty { background: #94a3b8 !important; }

body.schedule-team-page-shell .attendance-week-mobile {
    display: none !important;
}

body.schedule-team-page-shell .attendance-week-mobile summary,
body.schedule-team-page-shell .attendance-rundown-panel summary {
    min-height: 42px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    cursor: pointer !important;
    color: #061a44 !important;
    font-size: 13px !important;
    font-weight: 900 !important;
}

body.schedule-team-page-shell .attendance-week-mobile summary strong,
body.schedule-team-page-shell .attendance-rundown-panel summary strong {
    padding: 5px 9px !important;
    border-radius: 7px !important;
    background: #f3f7ff !important;
    font-size: 12px !important;
}

body.schedule-team-page-shell .attendance-week-mobile-days,
body.schedule-team-page-shell .attendance-rundown-days {
    display: grid !important;
    gap: 10px !important;
    padding-top: 10px !important;
    border-top: 1px solid #edf2f7 !important;
}

body.schedule-team-page-shell .attendance-week-mobile-days section,
body.schedule-team-page-shell .attendance-rundown-days section {
    display: grid !important;
    gap: 7px !important;
}

body.schedule-team-page-shell .attendance-week-mobile-days h3,
body.schedule-team-page-shell .attendance-rundown-days h3 {
    margin: 0 !important;
    color: #061a44 !important;
    font-size: 13px !important;
}

body.schedule-team-page-shell .attendance-week-mobile-days p,
body.schedule-team-page-shell .attendance-rundown-days p {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto !important;
    gap: 8px !important;
    align-items: center !important;
    min-height: 32px !important;
    margin: 0 !important;
    padding: 7px 0 !important;
    border-top: 1px solid #edf2f7 !important;
    color: #061a44 !important;
    font-size: 12px !important;
}

@media (max-width: 1180px) {
    body.schedule-team-page-shell .attendance-team-filter {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    body.schedule-team-page-shell .attendance-team-filter-badges {
        grid-column: 1 / -1 !important;
    }

    body.schedule-team-page-shell .attendance-team-summary {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    body.schedule-team-page-shell .attendance-team-primary-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 760px) {
    body.schedule-team-page-shell .page-hero {
        margin-bottom: 10px !important;
    }

    body.schedule-team-page-shell .page-hero h1 {
        font-size: 24px !important;
    }

    body.schedule-team-page-shell .attendance-team-page {
        gap: 10px !important;
    }

    body.schedule-team-page-shell .attendance-team-filter {
        grid-template-columns: 1fr !important;
        padding: 10px !important;
    }

    body.schedule-team-page-shell .attendance-team-filter-badges {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    body.schedule-team-page-shell .attendance-team-filter-badges span {
        white-space: normal !important;
        text-align: center !important;
    }

    body.schedule-team-page-shell .attendance-team-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    body.schedule-team-page-shell .attendance-summary-card {
        min-height: 92px !important;
        padding: 11px !important;
        grid-template-columns: 34px minmax(0, 1fr) !important;
    }

    body.schedule-team-page-shell .attendance-summary-icon {
        width: 34px !important;
        height: 34px !important;
        font-size: 10px !important;
    }

    body.schedule-team-page-shell .attendance-summary-card strong {
        font-size: 17px !important;
    }

    body.schedule-team-page-shell .attendance-team-panel {
        padding: 11px !important;
    }

    body.schedule-team-page-shell .attendance-live-table-head,
    body.schedule-team-page-shell .attendance-team-today-head {
        display: none !important;
    }

    body.schedule-team-page-shell .attendance-live-row {
        grid-template-columns: 28px minmax(88px, .8fr) minmax(0, 1fr) !important;
        gap: 7px !important;
    }

    body.schedule-team-page-shell .attendance-live-row small {
        display: none !important;
    }

    body.schedule-team-page-shell .attendance-live-row em {
        justify-self: start !important;
        grid-column: 3 !important;
    }

    body.schedule-team-page-shell .attendance-team-today-row {
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 7px !important;
    }

    body.schedule-team-page-shell .attendance-team-today-row > div:nth-child(2),
    body.schedule-team-page-shell .attendance-presence {
        grid-column: 1 / -1 !important;
    }

    body.schedule-team-page-shell .attendance-week-matrix-section {
        display: none !important;
    }

    body.schedule-team-page-shell .attendance-week-mobile {
        display: block !important;
    }

    body.schedule-team-page-shell .attendance-week-mobile-days p,
    body.schedule-team-page-shell .attendance-rundown-days p {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

/* Final guard for Request Barang/Owner custom composer clipping. */
html[data-theme] body.request-workflow-shell :is(.request-custom-item-panel, .request-custom-item-body, .request-add-card),
body.request-workflow-shell :is(.request-custom-item-panel, .request-custom-item-body, .request-add-card) {
    overflow: visible !important;
}

html[data-theme] body.request-workflow-shell .request-custom-entry-grid,
body.request-workflow-shell .request-custom-entry-grid {
    display: grid !important;
    grid-template-columns: minmax(170px, 1.15fr) minmax(82px, .48fr) minmax(150px, 1fr) minmax(140px, .9fr) max-content !important;
    align-items: end !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
}

html[data-theme] body.request-workflow-shell .request-custom-entry-grid > *,
body.request-workflow-shell .request-custom-entry-grid > * {
    min-width: 0 !important;
}

html[data-theme] body.request-workflow-shell .request-custom-entry-grid :is(input, button),
body.request-workflow-shell .request-custom-entry-grid :is(input, button) {
    max-width: 100% !important;
}

html[data-theme] body.request-workflow-shell .request-custom-entry-grid .ops-entry-actions,
body.request-workflow-shell .request-custom-entry-grid .ops-entry-actions {
    align-self: end !important;
    justify-self: end !important;
}

html[data-theme] body.request-workflow-shell .request-custom-entry-grid .ops-entry-actions button,
body.request-workflow-shell .request-custom-entry-grid .ops-entry-actions button {
    min-width: 108px !important;
    white-space: nowrap !important;
}

@media (max-width: 1180px) {
    html[data-theme] body.request-workflow-shell .request-custom-entry-grid,
    body.request-workflow-shell .request-custom-entry-grid {
        grid-template-columns: minmax(0, 1fr) minmax(86px, .45fr) !important;
    }

    html[data-theme] body.request-workflow-shell .request-custom-entry-grid .ops-entry-actions,
    body.request-workflow-shell .request-custom-entry-grid .ops-entry-actions {
        justify-self: stretch !important;
    }

    html[data-theme] body.request-workflow-shell .request-custom-entry-grid .ops-entry-actions button,
    body.request-workflow-shell .request-custom-entry-grid .ops-entry-actions button {
        width: 100% !important;
    }
}

@media (max-width: 760px) {
    html[data-theme] body.request-workflow-shell .request-custom-entry-grid,
    body.request-workflow-shell .request-custom-entry-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Final guard: Jadwal Saya compact personal schedule with real summary SVG icons. */
html[data-theme] body.schedule-self-page-shell,
body.schedule-self-page-shell {
    overflow-x: hidden !important;
}

html[data-theme] body.schedule-self-page-shell :is(.main, .clean-content-panel, .page-content, .page-content-bleed),
body.schedule-self-page-shell :is(.main, .clean-content-panel, .page-content, .page-content-bleed) {
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: clip !important;
}

html[data-theme] body.schedule-self-page-shell .page-hero,
body.schedule-self-page-shell .page-hero {
    margin-bottom: 14px !important;
}

html[data-theme] body.schedule-self-page-shell .page-hero h1,
body.schedule-self-page-shell .page-hero h1 {
    font-size: 32px !important;
    line-height: 1.08 !important;
    letter-spacing: 0 !important;
}

html[data-theme] body.schedule-self-page-shell .attendance-schedule-content,
html[data-theme] body.schedule-self-page-shell .attendance-schedule-page,
body.schedule-self-page-shell .attendance-schedule-content,
body.schedule-self-page-shell .attendance-schedule-page {
    width: 100% !important;
    max-width: 1200px !important;
    min-width: 0 !important;
    margin-inline: auto !important;
    overflow-x: clip !important;
}

html[data-theme] body.schedule-self-page-shell .attendance-schedule-page,
body.schedule-self-page-shell .attendance-schedule-page {
    display: grid !important;
    gap: 14px !important;
}

html[data-theme] body.schedule-self-page-shell .attendance-schedule-filter,
body.schedule-self-page-shell .attendance-schedule-filter {
    display: grid !important;
    grid-template-columns: minmax(180px, 1fr) minmax(150px, .75fr) minmax(160px, .75fr) max-content !important;
    gap: 10px !important;
    align-items: end !important;
    margin: 0 !important;
    padding: 12px 14px !important;
    border-radius: 8px !important;
}

html[data-theme] body.schedule-self-page-shell .attendance-schedule-filter :is(input, select, button),
body.schedule-self-page-shell .attendance-schedule-filter :is(input, select, button) {
    height: 36px !important;
    min-height: 36px !important;
    border-radius: 7px !important;
    font-size: 13px !important;
}

html[data-theme] body.schedule-self-page-shell .attendance-schedule-count,
body.schedule-self-page-shell .attendance-schedule-count {
    min-height: 36px !important;
    padding-inline: 14px !important;
    border-radius: 7px !important;
    font-size: 12px !important;
}

html[data-theme] body.schedule-self-page-shell .attendance-schedule-summary,
body.schedule-self-page-shell .attendance-schedule-summary {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 12px !important;
    margin: 0 !important;
}

html[data-theme] body.schedule-self-page-shell .attendance-summary-card,
body.schedule-self-page-shell .attendance-summary-card {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 12px !important;
    min-width: 0 !important;
    min-height: 94px !important;
    padding: 12px 14px !important;
    border-radius: 8px !important;
}

html[data-theme] body.schedule-self-page-shell .attendance-summary-card::before,
body.schedule-self-page-shell .attendance-summary-card::before {
    display: none !important;
    content: none !important;
}

html[data-theme] body.schedule-self-page-shell .attendance-summary-icon,
body.schedule-self-page-shell .attendance-summary-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    border-radius: 999px !important;
    color: #2563eb !important;
    background: #eef5ff !important;
    line-height: 1 !important;
}

html[data-theme] body.schedule-self-page-shell .attendance-summary-icon svg,
body.schedule-self-page-shell .attendance-summary-icon svg {
    display: block !important;
    width: 21px !important;
    height: 21px !important;
    stroke: currentColor !important;
    stroke-width: 2 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    fill: none !important;
}

html[data-theme] body.schedule-self-page-shell .attendance-summary-icon--calendar,
body.schedule-self-page-shell .attendance-summary-icon--calendar {
    color: #059669 !important;
    background: #eafaf2 !important;
}

html[data-theme] body.schedule-self-page-shell .attendance-summary-icon--homebase,
body.schedule-self-page-shell .attendance-summary-icon--homebase {
    color: #7c3aed !important;
    background: #f3ecff !important;
}

html[data-theme] body.schedule-self-page-shell .attendance-summary-icon--live,
body.schedule-self-page-shell .attendance-summary-icon--live {
    color: #f97316 !important;
    background: #fff4e5 !important;
}

html[data-theme] body.schedule-self-page-shell .attendance-summary-copy,
body.schedule-self-page-shell .attendance-summary-copy {
    min-width: 0 !important;
}

html[data-theme] body.schedule-self-page-shell .attendance-summary-copy > span,
body.schedule-self-page-shell .attendance-summary-copy > span {
    display: block !important;
    color: #64748b !important;
    font-size: 10.5px !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
    line-height: 1.15 !important;
    text-transform: uppercase !important;
}

html[data-theme] body.schedule-self-page-shell .attendance-summary-card strong,
body.schedule-self-page-shell .attendance-summary-card strong {
    display: block !important;
    margin-top: 5px !important;
    color: #061b49 !important;
    font-size: 15px !important;
    line-height: 1.18 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
}

html[data-theme] body.schedule-self-page-shell .attendance-summary-card small,
body.schedule-self-page-shell .attendance-summary-card small {
    display: block !important;
    margin-top: 4px !important;
    color: #52627c !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
    overflow-wrap: anywhere !important;
}

html[data-theme] body.schedule-self-page-shell .attendance-schedule-link,
body.schedule-self-page-shell .attendance-schedule-link {
    margin-top: 8px !important;
    padding: 5px 9px !important;
    border-radius: 7px !important;
    font-size: 11px !important;
}

html[data-theme] body.schedule-self-page-shell .attendance-week-list,
body.schedule-self-page-shell .attendance-week-list {
    display: grid !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    gap: 10px !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: thin !important;
}

html[data-theme] body.schedule-self-page-shell .attendance-week-card,
body.schedule-self-page-shell .attendance-week-card {
    min-width: 0 !important;
    min-height: 128px !important;
    padding: 12px !important;
    border-radius: 8px !important;
}

html[data-theme] body.schedule-self-page-shell .attendance-live-row,
body.schedule-self-page-shell .attendance-live-row {
    grid-template-columns: 32px minmax(92px, .52fr) minmax(0, 1fr) auto !important;
    min-width: 0 !important;
}

html[data-theme] body.schedule-self-page-shell .attendance-rundown-details:not([open]) .attendance-rundown-days,
body.schedule-self-page-shell .attendance-rundown-details:not([open]) .attendance-rundown-days {
    display: none !important;
}

@media (max-width: 900px) {
    html[data-theme] body.schedule-self-page-shell .attendance-schedule-summary,
    body.schedule-self-page-shell .attendance-schedule-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    html[data-theme] body.schedule-self-page-shell .attendance-schedule-filter,
    body.schedule-self-page-shell .attendance-schedule-filter {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    html[data-theme] body.schedule-self-page-shell .attendance-schedule-count,
    body.schedule-self-page-shell .attendance-schedule-count {
        width: 100% !important;
    }
}

@media (max-width: 640px) {
    html[data-theme] body.schedule-self-page-shell .page-hero h1,
    body.schedule-self-page-shell .page-hero h1 {
        font-size: 25px !important;
    }

    html[data-theme] body.schedule-self-page-shell .attendance-schedule-page,
    body.schedule-self-page-shell .attendance-schedule-page {
        gap: 11px !important;
    }

    html[data-theme] body.schedule-self-page-shell .attendance-schedule-filter,
    body.schedule-self-page-shell .attendance-schedule-filter {
        grid-template-columns: 1fr !important;
        gap: 9px !important;
        padding: 11px !important;
    }

    html[data-theme] body.schedule-self-page-shell .attendance-schedule-summary,
    body.schedule-self-page-shell .attendance-schedule-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    html[data-theme] body.schedule-self-page-shell .attendance-summary-card,
    body.schedule-self-page-shell .attendance-summary-card {
        grid-template-columns: 36px minmax(0, 1fr) !important;
        gap: 8px !important;
        min-height: 88px !important;
        padding: 10px !important;
    }

    html[data-theme] body.schedule-self-page-shell .attendance-summary-icon,
    body.schedule-self-page-shell .attendance-summary-icon {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
    }

    html[data-theme] body.schedule-self-page-shell .attendance-summary-icon svg,
    body.schedule-self-page-shell .attendance-summary-icon svg {
        width: 18px !important;
        height: 18px !important;
    }

    html[data-theme] body.schedule-self-page-shell .attendance-summary-card strong,
    body.schedule-self-page-shell .attendance-summary-card strong {
        font-size: 13.5px !important;
    }

    html[data-theme] body.schedule-self-page-shell .attendance-summary-card small,
    body.schedule-self-page-shell .attendance-summary-card small {
        font-size: 10.5px !important;
    }

    html[data-theme] body.schedule-self-page-shell .attendance-week-list,
    body.schedule-self-page-shell .attendance-week-list {
        grid-auto-flow: column !important;
        grid-auto-columns: minmax(118px, 38vw) !important;
        grid-template-columns: none !important;
        overflow-x: auto !important;
        padding-bottom: 2px !important;
    }

    html[data-theme] body.schedule-self-page-shell .attendance-week-card,
    body.schedule-self-page-shell .attendance-week-card {
        min-height: 112px !important;
        padding: 10px !important;
    }

    html[data-theme] body.schedule-self-page-shell .attendance-section-head,
    body.schedule-self-page-shell .attendance-section-head {
        align-items: flex-start !important;
        flex-direction: column !important;
        gap: 8px !important;
    }

    html[data-theme] body.schedule-self-page-shell .attendance-status-legend,
    body.schedule-self-page-shell .attendance-status-legend {
        flex-wrap: wrap !important;
        gap: 8px 12px !important;
    }

    html[data-theme] body.schedule-self-page-shell .attendance-live-row,
    body.schedule-self-page-shell .attendance-live-row {
        grid-template-columns: 28px minmax(78px, .6fr) minmax(0, 1fr) !important;
        gap: 7px !important;
    }

    html[data-theme] body.schedule-self-page-shell .attendance-live-row > em,
    body.schedule-self-page-shell .attendance-live-row > em {
        grid-column: 2 / -1 !important;
        justify-self: start !important;
    }
}

/* Final guard: compact WMS request owner/gudang composers after all legacy overrides. */
html[data-theme] body.request-workflow-shell,
body.request-workflow-shell {
    overflow-x: hidden !important;
}

html[data-theme] body.request-workflow-shell :is(.main, .clean-content-panel, .page-content, .page-content-bleed, .wms-module-page),
body.request-workflow-shell :is(.main, .clean-content-panel, .page-content, .page-content-bleed, .wms-module-page) {
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: clip !important;
}

html[data-theme] body.request-workflow-shell :is(.request-cockpit, .request-form-panel, .request-queue-panel, .request-add-card, .request-custom-item-panel, .request-custom-item-body),
body.request-workflow-shell :is(.request-cockpit, .request-form-panel, .request-queue-panel, .request-add-card, .request-custom-item-panel, .request-custom-item-body) {
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

html[data-theme] body.request-workflow-shell .request-cockpit,
body.request-workflow-shell .request-cockpit {
    display: grid !important;
    grid-template-columns: minmax(0, 1.16fr) minmax(340px, .84fr) !important;
    gap: 16px !important;
    align-items: start !important;
}

html[data-theme] body.request-workflow-shell .request-owner-entry-grid,
body.request-workflow-shell .request-owner-entry-grid {
    display: grid !important;
    grid-template-columns: minmax(220px, 1fr) minmax(82px, .36fr) minmax(170px, .78fr) max-content !important;
    gap: 10px !important;
    align-items: start !important;
}

html[data-theme] body.request-workflow-shell .request-gudang-entry-grid,
body.request-workflow-shell .request-gudang-entry-grid {
    display: grid !important;
    grid-template-columns: minmax(220px, 1fr) minmax(86px, .34fr) minmax(82px, .34fr) max-content !important;
    gap: 10px !important;
    align-items: start !important;
}

html[data-theme] body.request-workflow-shell .request-owner-custom-entry-grid,
body.request-workflow-shell .request-owner-custom-entry-grid {
    display: grid !important;
    grid-template-columns: minmax(210px, 1fr) minmax(150px, .78fr) minmax(150px, .78fr) max-content !important;
    gap: 10px !important;
    align-items: start !important;
}

html[data-theme] body.request-workflow-shell .request-gudang-compact-v3 .request-custom-entry-grid,
body.request-workflow-shell .request-gudang-compact-v3 .request-custom-entry-grid {
    display: grid !important;
    grid-template-columns: minmax(190px, 1fr) minmax(82px, .34fr) minmax(145px, .76fr) minmax(145px, .76fr) max-content !important;
    gap: 10px !important;
    align-items: start !important;
}

html[data-theme] body.request-workflow-shell :is(.request-owner-entry-grid, .request-gudang-entry-grid, .request-custom-entry-grid) > *,
body.request-workflow-shell :is(.request-owner-entry-grid, .request-gudang-entry-grid, .request-custom-entry-grid) > * {
    min-width: 0 !important;
}

html[data-theme] body.request-workflow-shell :is(.request-owner-entry-grid, .request-gudang-entry-grid, .request-custom-entry-grid) :is(input, select, button),
body.request-workflow-shell :is(.request-owner-entry-grid, .request-gudang-entry-grid, .request-custom-entry-grid) :is(input, select, button) {
    max-width: 100% !important;
    min-height: 38px !important;
    white-space: normal !important;
}

html[data-theme] body.request-workflow-shell .request-picker-line,
body.request-workflow-shell .request-picker-line {
    min-width: 0 !important;
    grid-template-columns: minmax(0, 1fr) 40px !important;
}

html[data-theme] body.request-workflow-shell :is(.request-owner-action-bar, .request-action-bar),
body.request-workflow-shell :is(.request-owner-action-bar, .request-action-bar) {
    position: static !important;
    margin-top: 10px !important;
    padding-top: 0 !important;
}

html[data-theme] body.request-workflow-shell :is(.request-owner-empty-cell, .request-empty-cell),
body.request-workflow-shell :is(.request-owner-empty-cell, .request-empty-cell) {
    padding: 12px !important;
}

html[data-theme] body.request-workflow-shell :is(.request-owner-empty-compact, .request-empty-compact),
body.request-workflow-shell :is(.request-owner-empty-compact, .request-empty-compact) {
    min-height: 62px !important;
    padding: 10px !important;
}

html[data-theme] body.request-workflow-shell .request-queue-table-wrap,
body.request-workflow-shell .request-queue-table-wrap {
    max-width: 100% !important;
    overflow-x: auto !important;
}

html[data-theme] body.request-workflow-shell .request-owner-custom-entry-grid .ops-entry-actions button,
body.request-workflow-shell .request-owner-custom-entry-grid .ops-entry-actions button,
html[data-theme] body.request-workflow-shell .request-gudang-compact-v3 .request-custom-entry-grid .ops-entry-actions button,
body.request-workflow-shell .request-gudang-compact-v3 .request-custom-entry-grid .ops-entry-actions button {
    width: auto !important;
    min-width: 118px !important;
}

@media (max-width: 980px) {
    html[data-theme] body.request-workflow-shell .request-cockpit,
    body.request-workflow-shell .request-cockpit {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 760px) {
    html[data-theme] body.request-workflow-shell :is(.request-owner-entry-grid, .request-gudang-entry-grid, .request-owner-custom-entry-grid),
    html[data-theme] body.request-workflow-shell .request-gudang-compact-v3 .request-custom-entry-grid,
    body.request-workflow-shell :is(.request-owner-entry-grid, .request-gudang-entry-grid, .request-owner-custom-entry-grid),
    body.request-workflow-shell .request-gudang-compact-v3 .request-custom-entry-grid {
        grid-template-columns: 1fr !important;
    }

    html[data-theme] body.request-workflow-shell :is(.request-owner-entry-grid, .request-gudang-entry-grid, .request-custom-entry-grid) .ops-entry-actions,
    body.request-workflow-shell :is(.request-owner-entry-grid, .request-gudang-entry-grid, .request-custom-entry-grid) .ops-entry-actions {
        justify-content: stretch !important;
    }

    html[data-theme] body.request-workflow-shell :is(.request-owner-entry-grid, .request-gudang-entry-grid, .request-custom-entry-grid) .ops-entry-actions button,
    body.request-workflow-shell :is(.request-owner-entry-grid, .request-gudang-entry-grid, .request-custom-entry-grid) .ops-entry-actions button {
        width: 100% !important;
        min-width: 0 !important;
    }
}

/* POS menu final override: transparent click-away layer, not a gray modal backdrop. */
html[data-theme] body.pos-page-wide.pos-ipos-menu-open,
body.pos-page-wide.pos-ipos-menu-open {
    overflow: auto !important;
}

html[data-theme] body.pos-page-wide .pos-terminal-clean.pos-ipos-refactor [data-pos-header-menu-close].pos-ipos-menu-backdrop,
body.pos-page-wide .pos-terminal-clean.pos-ipos-refactor [data-pos-header-menu-close].pos-ipos-menu-backdrop {
    z-index: 350 !important;
    background: transparent !important;
    box-shadow: none !important;
    opacity: 1 !important;
}

/* Final Stock & Produk inventory guard: placed last so older WMS/global shell
   rules cannot re-open body scrolling or push pagination below the viewport. */
@media (min-width: 1024px) {
    html:has(body.wms-stock-reference-shell.wms-stock-inventory-shell),
    html[data-theme]:has(body.wms-stock-reference-shell.wms-stock-inventory-shell) {
        height: 100dvh !important;
        min-height: 100dvh !important;
        max-height: 100dvh !important;
        overflow: hidden !important;
    }

    html[data-theme] body.internal-clean-page-shell.wms-refactor-shell.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell,
    body.internal-clean-page-shell.wms-refactor-shell.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell {
        height: 100dvh !important;
        min-height: 100dvh !important;
        max-height: 100dvh !important;
        overflow: hidden !important;
    }

    html[data-theme] body.wms-stock-reference-shell.wms-stock-inventory-shell :is(.layout, .main),
    body.wms-stock-reference-shell.wms-stock-inventory-shell :is(.layout, .main) {
        height: calc(100dvh - 86px) !important;
        min-height: 0 !important;
        max-height: calc(100dvh - 86px) !important;
        overflow: hidden !important;
    }

    html[data-theme] body.wms-stock-reference-shell.wms-stock-inventory-shell :is(.internal-module-layout, .internal-module-panel, .page-content.page-content-bleed),
    body.wms-stock-reference-shell.wms-stock-inventory-shell :is(.internal-module-layout, .internal-module-panel, .page-content.page-content-bleed) {
        min-height: 0 !important;
        height: 100% !important;
        max-height: 100% !important;
        overflow: hidden !important;
    }

    html[data-theme] body.wms-stock-reference-shell.wms-stock-inventory-shell .internal-module-panel,
    body.wms-stock-reference-shell.wms-stock-inventory-shell .internal-module-panel {
        display: flex !important;
        flex-direction: column !important;
    }

    html[data-theme] body.wms-stock-reference-shell.wms-stock-inventory-shell .page-content.page-content-bleed,
    body.wms-stock-reference-shell.wms-stock-inventory-shell .page-content.page-content-bleed {
        flex: 1 1 auto !important;
        display: flex !important;
        flex-direction: column !important;
    }

    html[data-theme] body.wms-stock-reference-shell.wms-stock-inventory-shell .wms-zip-stock-page:not(.is-hidden),
    body.wms-stock-reference-shell.wms-stock-inventory-shell .wms-zip-stock-page:not(.is-hidden) {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        height: 100% !important;
        max-height: 100% !important;
        overflow: hidden !important;
        display: grid !important;
        grid-template-rows: auto auto minmax(0, 1fr) !important;
        gap: 8px !important;
    }

    html[data-theme] body.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .wms-stock-table-card,
    body.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .wms-stock-table-card {
        min-height: 0 !important;
        height: 100% !important;
        max-height: 100% !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
    }

    html[data-theme] body.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .stock-desktop-table,
    body.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .stock-desktop-table {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
    }

    html[data-theme] body.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 :is(.stock-table-viewport, .wms-stock-table-wrap),
    body.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 :is(.stock-table-viewport, .wms-stock-table-wrap) {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
        overflow: auto !important;
        overscroll-behavior: contain !important;
    }

    html[data-theme] body.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .stock-pagination-strip,
    body.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .stock-pagination-strip {
        flex: 0 0 auto !important;
        overflow: hidden !important;
    }
}

@media (min-width: 1024px) {
    html[data-theme] body.wms-stock-reference-shell.wms-stock-inventory-shell .internal-module-layout,
    body.wms-stock-reference-shell.wms-stock-inventory-shell .internal-module-layout,
    html[data-theme] body.wms-stock-reference-shell.wms-stock-inventory-shell .clean-module-layout,
    body.wms-stock-reference-shell.wms-stock-inventory-shell .clean-module-layout {
        height: 100% !important;
        min-height: 0 !important;
        max-height: 100% !important;
        overflow: hidden !important;
        align-items: stretch !important;
    }

    html[data-theme] body.wms-stock-reference-shell.wms-stock-inventory-shell .internal-module-panel,
    body.wms-stock-reference-shell.wms-stock-inventory-shell .internal-module-panel,
    html[data-theme] body.wms-stock-reference-shell.wms-stock-inventory-shell .clean-content-panel,
    body.wms-stock-reference-shell.wms-stock-inventory-shell .clean-content-panel {
        height: 100% !important;
        min-height: 0 !important;
        max-height: 100% !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
    }

    html[data-theme] body.wms-stock-reference-shell.wms-stock-inventory-shell .page-content.page-content-bleed,
    body.wms-stock-reference-shell.wms-stock-inventory-shell .page-content.page-content-bleed {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: hidden !important;
        flex: 1 1 auto !important;
    }
}

/* Stock & Produk hard viewport lock. Keep this last: generic WMS refactor
   guards above reopen clean-module wrappers for other pages. */
@media (min-width: 1024px) {
    html:has(body.wms-stock-reference-shell.wms-stock-inventory-shell),
    html[data-theme]:has(body.wms-stock-reference-shell.wms-stock-inventory-shell) {
        width: 100% !important;
        height: 100dvh !important;
        min-height: 100dvh !important;
        max-height: 100dvh !important;
        overflow: hidden !important;
    }

    html[data-theme] body.browser-mode.internal-clean-page-shell.wms-refactor-shell.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell,
    body.browser-mode.internal-clean-page-shell.wms-refactor-shell.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell {
        --stock-inventory-shell-offset: 124px;
        width: 100% !important;
        height: 100dvh !important;
        min-height: 100dvh !important;
        max-height: 100dvh !important;
        overflow: hidden !important;
        overflow-y: hidden !important;
    }

    html[data-theme] body.browser-mode.internal-clean-page-shell.wms-refactor-shell.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell > .layout,
    body.browser-mode.internal-clean-page-shell.wms-refactor-shell.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell > .layout,
    html[data-theme] body.browser-mode.internal-clean-page-shell.wms-refactor-shell.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .main,
    body.browser-mode.internal-clean-page-shell.wms-refactor-shell.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .main {
        height: calc(100dvh - var(--stock-inventory-shell-offset)) !important;
        min-height: 0 !important;
        max-height: calc(100dvh - var(--stock-inventory-shell-offset)) !important;
        overflow: hidden !important;
        overflow-y: hidden !important;
        padding-bottom: 0 !important;
    }

    html[data-theme] body.browser-mode.internal-clean-page-shell.wms-refactor-shell.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .clean-module-layout.internal-module-layout.module-layout:not(.clean-module-layout--no-sidebar),
    body.browser-mode.internal-clean-page-shell.wms-refactor-shell.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .clean-module-layout.internal-module-layout.module-layout:not(.clean-module-layout--no-sidebar) {
        display: grid !important;
        grid-template-columns: minmax(224px, 240px) minmax(0, 1fr) !important;
        height: calc(100dvh - var(--stock-inventory-shell-offset)) !important;
        min-height: 0 !important;
        max-height: calc(100dvh - var(--stock-inventory-shell-offset)) !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        overflow-y: hidden !important;
        align-items: stretch !important;
    }

    html[data-theme] body.browser-mode.internal-clean-page-shell.wms-refactor-shell.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .clean-module-sidebar,
    body.browser-mode.internal-clean-page-shell.wms-refactor-shell.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .clean-module-sidebar {
        min-height: 0 !important;
        max-height: calc(100dvh - var(--stock-inventory-shell-offset)) !important;
        overflow: hidden !important;
    }

    html[data-theme] body.browser-mode.internal-clean-page-shell.wms-refactor-shell.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .clean-content-panel.internal-module-panel.content-panel,
    body.browser-mode.internal-clean-page-shell.wms-refactor-shell.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .clean-content-panel.internal-module-panel.content-panel {
        height: calc(100dvh - var(--stock-inventory-shell-offset)) !important;
        min-height: 0 !important;
        max-height: calc(100dvh - var(--stock-inventory-shell-offset)) !important;
        padding: 10px 12px 8px !important;
        gap: 6px !important;
        overflow: hidden !important;
        overflow-y: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        align-self: stretch !important;
    }

    html[data-theme] body.browser-mode.internal-clean-page-shell.wms-refactor-shell.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .wms-reference-header,
    body.browser-mode.internal-clean-page-shell.wms-refactor-shell.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .wms-reference-header {
        flex: 0 0 auto !important;
        min-height: 0 !important;
        margin: 0 0 6px !important;
    }

    html[data-theme] body.browser-mode.internal-clean-page-shell.wms-refactor-shell.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .page-content.page-content-bleed,
    body.browser-mode.internal-clean-page-shell.wms-refactor-shell.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .page-content.page-content-bleed {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
        padding: 0 !important;
        overflow: hidden !important;
        overflow-y: hidden !important;
        display: flex !important;
        flex-direction: column !important;
    }

    html[data-theme] body.browser-mode.internal-clean-page-shell.wms-refactor-shell.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .wms-zip-stock-page:not(.is-hidden),
    body.browser-mode.internal-clean-page-shell.wms-refactor-shell.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .wms-zip-stock-page:not(.is-hidden) {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        height: 100% !important;
        max-height: 100% !important;
        overflow: hidden !important;
        display: grid !important;
        grid-template-rows: auto auto minmax(0, 1fr) !important;
        gap: 7px !important;
    }

    html[data-theme] body.browser-mode.internal-clean-page-shell.wms-refactor-shell.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .wms-stock-filter,
    body.browser-mode.internal-clean-page-shell.wms-refactor-shell.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .wms-stock-filter {
        padding: 7px 8px !important;
        overflow: hidden !important;
    }

    html[data-theme] body.browser-mode.internal-clean-page-shell.wms-refactor-shell.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .wms-stock-filter-grid,
    body.browser-mode.internal-clean-page-shell.wms-refactor-shell.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .wms-stock-filter-grid {
        display: grid !important;
        grid-template-columns: minmax(280px, 1fr) minmax(142px, 0.34fr) auto minmax(272px, 0.75fr) !important;
        gap: 6px 8px !important;
        align-items: end !important;
    }

    html[data-theme] body.browser-mode.internal-clean-page-shell.wms-refactor-shell.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-filter-chips,
    body.browser-mode.internal-clean-page-shell.wms-refactor-shell.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-filter-chips {
        grid-column: auto !important;
        min-height: 32px !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scrollbar-width: none !important;
    }

    html[data-theme] body.browser-mode.internal-clean-page-shell.wms-refactor-shell.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-filter-chips::-webkit-scrollbar,
    body.browser-mode.internal-clean-page-shell.wms-refactor-shell.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-filter-chips::-webkit-scrollbar {
        display: none !important;
    }

    html[data-theme] body.browser-mode.internal-clean-page-shell.wms-refactor-shell.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .wms-stock-table-card,
    body.browser-mode.internal-clean-page-shell.wms-refactor-shell.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .wms-stock-table-card {
        min-height: 0 !important;
        height: 100% !important;
        max-height: 100% !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
    }

    html[data-theme] body.browser-mode.internal-clean-page-shell.wms-refactor-shell.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-desktop-table,
    body.browser-mode.internal-clean-page-shell.wms-refactor-shell.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-desktop-table {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
    }

    html[data-theme] body.browser-mode.internal-clean-page-shell.wms-refactor-shell.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell :is(.stock-table-viewport, .wms-stock-table-wrap),
    body.browser-mode.internal-clean-page-shell.wms-refactor-shell.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell :is(.stock-table-viewport, .wms-stock-table-wrap) {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow: auto !important;
        overscroll-behavior: contain !important;
    }

    html[data-theme] body.browser-mode.internal-clean-page-shell.wms-refactor-shell.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-pagination-strip,
    body.browser-mode.internal-clean-page-shell.wms-refactor-shell.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-pagination-strip {
        flex: 0 0 auto !important;
        margin: 5px 0 0 !important;
        padding: 5px 0 0 !important;
        overflow: hidden !important;
    }
}

/* Mandor finish: Stock & Produk must stay compact, with only the data area
   scrolling. This is intentionally last so the older WMS stock rules cannot
   reopen browser scroll or enlarge the filter/KPI rows again. */
@media (min-width: 1024px) {
    html[data-theme] body.browser-mode.internal-clean-page-shell.wms-refactor-shell.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .wms-zip-stock-page:not(.is-hidden),
    body.browser-mode.internal-clean-page-shell.wms-refactor-shell.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .wms-zip-stock-page:not(.is-hidden) {
        gap: 6px !important;
    }

    html[data-theme] body.browser-mode.internal-clean-page-shell.wms-refactor-shell.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .wms-stock-filter,
    body.browser-mode.internal-clean-page-shell.wms-refactor-shell.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .wms-stock-filter {
        padding: 4px 8px !important;
    }

    html[data-theme] body.browser-mode.internal-clean-page-shell.wms-refactor-shell.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .wms-stock-filter-grid,
    body.browser-mode.internal-clean-page-shell.wms-refactor-shell.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .wms-stock-filter-grid {
        grid-template-columns: minmax(280px, 1fr) minmax(138px, 0.32fr) auto minmax(260px, 0.72fr) !important;
        gap: 4px 7px !important;
    }

    html[data-theme] body.browser-mode.internal-clean-page-shell.wms-refactor-shell.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .wms-stock-filter-field > span,
    body.browser-mode.internal-clean-page-shell.wms-refactor-shell.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .wms-stock-filter-field > span {
        margin: 0 0 2px !important;
        font-size: 10px !important;
        line-height: 1 !important;
    }

    html[data-theme] body.browser-mode.internal-clean-page-shell.wms-refactor-shell.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .wms-stock-filter :is(input, select),
    body.browser-mode.internal-clean-page-shell.wms-refactor-shell.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .wms-stock-filter :is(input, select) {
        height: 30px !important;
        min-height: 30px !important;
        padding: 4px 9px !important;
        font-size: 12px !important;
        line-height: 1.1 !important;
    }

    html[data-theme] body.browser-mode.internal-clean-page-shell.wms-refactor-shell.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .wms-stock-filter :is(button, a.button-secondary),
    body.browser-mode.internal-clean-page-shell.wms-refactor-shell.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .wms-stock-filter :is(button, a.button-secondary) {
        height: 30px !important;
        min-height: 30px !important;
        padding: 0 10px !important;
        font-size: 12px !important;
        line-height: 1 !important;
    }

    html[data-theme] body.browser-mode.internal-clean-page-shell.wms-refactor-shell.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .stock-filter-chips,
    body.browser-mode.internal-clean-page-shell.wms-refactor-shell.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .stock-filter-chips {
        min-height: 28px !important;
        gap: 5px !important;
        padding-bottom: 0 !important;
    }

    html[data-theme] body.browser-mode.internal-clean-page-shell.wms-refactor-shell.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .stock-filter-chip,
    body.browser-mode.internal-clean-page-shell.wms-refactor-shell.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .stock-filter-chip {
        height: 26px !important;
        min-height: 26px !important;
        padding: 0 9px !important;
        font-size: 11px !important;
    }

    html[data-theme] body.browser-mode.internal-clean-page-shell.wms-refactor-shell.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .wms-stock-stats,
    body.browser-mode.internal-clean-page-shell.wms-refactor-shell.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .wms-stock-stats {
        gap: 6px !important;
    }

    html[data-theme] body.browser-mode.internal-clean-page-shell.wms-refactor-shell.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .wms-stock-stat,
    body.browser-mode.internal-clean-page-shell.wms-refactor-shell.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .wms-stock-stat {
        height: 58px !important;
        min-height: 58px !important;
        padding: 7px 10px !important;
    }

    html[data-theme] body.browser-mode.internal-clean-page-shell.wms-refactor-shell.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .wms-stock-table-toolbar,
    body.browser-mode.internal-clean-page-shell.wms-refactor-shell.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .wms-stock-table-toolbar {
        min-height: 34px !important;
        padding-bottom: 4px !important;
    }
}

@media (max-width: 1023px) {
    html:has(body.wms-stock-reference-shell.wms-stock-inventory-shell),
    html[data-theme]:has(body.wms-stock-reference-shell.wms-stock-inventory-shell),
    html[data-theme] body.wms-stock-reference-shell.wms-stock-inventory-shell,
    body.wms-stock-reference-shell.wms-stock-inventory-shell {
        width: 100% !important;
        max-width: 100% !important;
        height: 100dvh !important;
        min-height: 100dvh !important;
        max-height: 100dvh !important;
        overflow: hidden !important;
        overflow-x: hidden !important;
    }

    html[data-theme] body.wms-stock-reference-shell.wms-stock-inventory-shell :is(.layout, .main),
    body.wms-stock-reference-shell.wms-stock-inventory-shell :is(.layout, .main) {
        min-height: 0 !important;
        height: calc(100dvh - 86px) !important;
        max-height: calc(100dvh - 86px) !important;
        overflow: hidden !important;
        overflow-x: hidden !important;
    }

    html[data-theme] body.wms-stock-reference-shell.wms-stock-inventory-shell :is(.internal-module-layout, .clean-module-layout, .internal-module-panel, .clean-content-panel, .page-content.page-content-bleed),
    body.wms-stock-reference-shell.wms-stock-inventory-shell :is(.internal-module-layout, .clean-module-layout, .internal-module-panel, .clean-content-panel, .page-content.page-content-bleed) {
        min-width: 0 !important;
        min-height: 0 !important;
        height: 100% !important;
        max-height: 100% !important;
        overflow: hidden !important;
        overflow-x: hidden !important;
    }

    html[data-theme] body.wms-stock-reference-shell.wms-stock-inventory-shell .internal-module-panel,
    body.wms-stock-reference-shell.wms-stock-inventory-shell .internal-module-panel,
    html[data-theme] body.wms-stock-reference-shell.wms-stock-inventory-shell .clean-content-panel,
    body.wms-stock-reference-shell.wms-stock-inventory-shell .clean-content-panel,
    html[data-theme] body.wms-stock-reference-shell.wms-stock-inventory-shell .page-content.page-content-bleed,
    body.wms-stock-reference-shell.wms-stock-inventory-shell .page-content.page-content-bleed {
        display: flex !important;
        flex-direction: column !important;
    }

    html[data-theme] body.wms-stock-reference-shell.wms-stock-inventory-shell .clean-content-panel.internal-module-panel.content-panel,
    body.wms-stock-reference-shell.wms-stock-inventory-shell .clean-content-panel.internal-module-panel.content-panel {
        padding: 8px !important;
        gap: 6px !important;
    }

    html[data-theme] body.wms-stock-reference-shell.wms-stock-inventory-shell .wms-reference-header,
    body.wms-stock-reference-shell.wms-stock-inventory-shell .wms-reference-header {
        flex: 0 0 auto !important;
        margin: 0 0 6px !important;
    }

    html[data-theme] body.wms-stock-reference-shell.wms-stock-inventory-shell .wms-zip-stock-page:not(.is-hidden),
    body.wms-stock-reference-shell.wms-stock-inventory-shell .wms-zip-stock-page:not(.is-hidden) {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        height: 100% !important;
        max-height: 100% !important;
        overflow: hidden !important;
        display: grid !important;
        grid-template-rows: auto auto minmax(0, 1fr) !important;
        gap: 7px !important;
    }

    html[data-theme] body.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .wms-stock-filter,
    body.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .wms-stock-filter {
        padding: 7px !important;
        overflow: hidden !important;
    }

    html[data-theme] body.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .wms-stock-filter-grid,
    body.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .wms-stock-filter-grid {
        gap: 6px !important;
    }

    html[data-theme] body.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .wms-stock-filter :is(input, select),
    html[data-theme] body.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .wms-stock-filter :is(button, a.button-secondary),
    body.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .wms-stock-filter :is(input, select),
    body.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .wms-stock-filter :is(button, a.button-secondary) {
        height: 34px !important;
        min-height: 34px !important;
        font-size: 12px !important;
    }

    html[data-theme] body.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .stock-filter-chips,
    body.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .stock-filter-chips {
        min-height: 28px !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
    }

    html[data-theme] body.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .wms-stock-stats,
    body.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .wms-stock-stats {
        gap: 6px !important;
    }

    html[data-theme] body.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .wms-stock-stat,
    body.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .wms-stock-stat {
        min-height: 54px !important;
        height: 54px !important;
        padding: 7px 8px !important;
    }

    html[data-theme] body.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .wms-stock-table-card,
    body.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .wms-stock-table-card {
        min-height: 0 !important;
        height: 100% !important;
        max-height: 100% !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        padding: 0 !important;
    }

    html[data-theme] body.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .wms-stock-table-toolbar,
    body.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .wms-stock-table-toolbar,
    html[data-theme] body.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .stock-pagination-mobile,
    body.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .stock-pagination-mobile {
        flex: 0 0 auto !important;
    }

    html[data-theme] body.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .stock-mobile-list,
    html[data-theme] body.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .stock-mobile-empty-state,
    body.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .stock-mobile-list,
    body.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .stock-mobile-empty-state {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: auto !important;
        overscroll-behavior: contain !important;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    html[data-theme] body.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .wms-stock-filter-grid,
    body.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .wms-stock-filter-grid {
        grid-template-columns: minmax(0, 1fr) minmax(130px, 0.32fr) auto !important;
        align-items: end !important;
    }

    html[data-theme] body.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .stock-filter-chips,
    body.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .stock-filter-chips {
        grid-column: 1 / -1 !important;
    }

    html[data-theme] body.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .wms-stock-stats,
    body.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .wms-stock-stats {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 767px) {
    html[data-theme] body.wms-stock-reference-shell.wms-stock-inventory-shell :is(.layout, .main),
    body.wms-stock-reference-shell.wms-stock-inventory-shell :is(.layout, .main) {
        height: calc(100dvh - 70px) !important;
        max-height: calc(100dvh - 70px) !important;
    }

    html[data-theme] body.wms-stock-reference-shell.wms-stock-inventory-shell .wms-stock-header h2,
    body.wms-stock-reference-shell.wms-stock-inventory-shell .wms-stock-header h2 {
        font-size: 20px !important;
        line-height: 1.1 !important;
    }

    html[data-theme] body.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .wms-stock-filter-grid,
    body.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .wms-stock-filter-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    html[data-theme] body.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .wms-stock-stats,
    body.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .wms-stock-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* Tablet/mobile final lock for Stock & Produk. Match the full shell selector so
   older responsive WMS rules with high specificity cannot keep the sidebar/list
   as tall page content. */
@media (max-width: 1023px) {
    html:has(body.browser-mode.internal-clean-page-shell.wms-refactor-shell.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell),
    html[data-theme]:has(body.browser-mode.internal-clean-page-shell.wms-refactor-shell.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell),
    html[data-theme] body.browser-mode.internal-clean-page-shell.wms-refactor-shell.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell,
    body.browser-mode.internal-clean-page-shell.wms-refactor-shell.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell {
        width: 100% !important;
        max-width: 100% !important;
        height: 100dvh !important;
        min-height: 100dvh !important;
        max-height: 100dvh !important;
        overflow: hidden !important;
        overflow-x: hidden !important;
    }

    html[data-theme] body.browser-mode.internal-clean-page-shell.wms-refactor-shell.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell > .layout,
    body.browser-mode.internal-clean-page-shell.wms-refactor-shell.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell > .layout,
    html[data-theme] body.browser-mode.internal-clean-page-shell.wms-refactor-shell.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .main,
    body.browser-mode.internal-clean-page-shell.wms-refactor-shell.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .main {
        height: calc(100dvh - 86px) !important;
        min-height: 0 !important;
        max-height: calc(100dvh - 86px) !important;
        overflow: hidden !important;
        overflow-x: hidden !important;
    }

    html[data-theme] body.browser-mode.internal-clean-page-shell.wms-refactor-shell.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell :is(.clean-module-sidebar, .internal-module-nav, .information-sidebar-card),
    body.browser-mode.internal-clean-page-shell.wms-refactor-shell.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell :is(.clean-module-sidebar, .internal-module-nav, .information-sidebar-card) {
        display: none !important;
    }

    html[data-theme] body.browser-mode.internal-clean-page-shell.wms-refactor-shell.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .clean-module-layout.internal-module-layout.module-layout,
    body.browser-mode.internal-clean-page-shell.wms-refactor-shell.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .clean-module-layout.internal-module-layout.module-layout {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: minmax(0, 1fr) !important;
        width: 100% !important;
        height: calc(100dvh - 86px) !important;
        min-height: 0 !important;
        max-height: calc(100dvh - 86px) !important;
        margin: 0 !important;
        padding: 0 !important;
        gap: 0 !important;
        overflow: hidden !important;
        overflow-x: hidden !important;
    }

    html[data-theme] body.browser-mode.internal-clean-page-shell.wms-refactor-shell.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .clean-content-panel.internal-module-panel.content-panel,
    body.browser-mode.internal-clean-page-shell.wms-refactor-shell.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .clean-content-panel.internal-module-panel.content-panel {
        width: 100% !important;
        height: calc(100dvh - 86px) !important;
        min-height: 0 !important;
        max-height: calc(100dvh - 86px) !important;
        padding: 8px !important;
        gap: 6px !important;
        overflow: hidden !important;
        overflow-x: hidden !important;
        display: flex !important;
        flex-direction: column !important;
    }

    html[data-theme] body.browser-mode.internal-clean-page-shell.wms-refactor-shell.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .page-content.page-content-bleed,
    body.browser-mode.internal-clean-page-shell.wms-refactor-shell.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .page-content.page-content-bleed {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
    }

    html[data-theme] body.browser-mode.internal-clean-page-shell.wms-refactor-shell.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .wms-reference-header,
    body.browser-mode.internal-clean-page-shell.wms-refactor-shell.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .wms-reference-header {
        flex: 0 0 auto !important;
        margin: 0 0 6px !important;
    }

    html[data-theme] body.browser-mode.internal-clean-page-shell.wms-refactor-shell.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .wms-zip-stock-page:not(.is-hidden),
    body.browser-mode.internal-clean-page-shell.wms-refactor-shell.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .wms-zip-stock-page:not(.is-hidden) {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        height: 100% !important;
        max-height: 100% !important;
        overflow: hidden !important;
        display: grid !important;
        grid-template-rows: auto auto minmax(0, 1fr) !important;
        gap: 6px !important;
    }

    html[data-theme] body.browser-mode.internal-clean-page-shell.wms-refactor-shell.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .wms-stock-filter,
    body.browser-mode.internal-clean-page-shell.wms-refactor-shell.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .wms-stock-filter {
        padding: 6px !important;
        overflow: hidden !important;
    }

    html[data-theme] body.browser-mode.internal-clean-page-shell.wms-refactor-shell.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .wms-stock-filter :is(input, select),
    html[data-theme] body.browser-mode.internal-clean-page-shell.wms-refactor-shell.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .wms-stock-filter :is(button, a.button-secondary),
    body.browser-mode.internal-clean-page-shell.wms-refactor-shell.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .wms-stock-filter :is(input, select),
    body.browser-mode.internal-clean-page-shell.wms-refactor-shell.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .wms-stock-filter :is(button, a.button-secondary) {
        height: 32px !important;
        min-height: 32px !important;
        padding: 4px 9px !important;
        font-size: 12px !important;
    }

    html[data-theme] body.browser-mode.internal-clean-page-shell.wms-refactor-shell.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .wms-stock-stats,
    body.browser-mode.internal-clean-page-shell.wms-refactor-shell.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .wms-stock-stats {
        gap: 6px !important;
        overflow: hidden !important;
    }

    html[data-theme] body.browser-mode.internal-clean-page-shell.wms-refactor-shell.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .wms-stock-stat,
    html[data-theme] body.browser-mode.internal-clean-page-shell.wms-refactor-shell.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .summary-card.wms-stock-stat,
    body.browser-mode.internal-clean-page-shell.wms-refactor-shell.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .wms-stock-stat,
    body.browser-mode.internal-clean-page-shell.wms-refactor-shell.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .summary-card.wms-stock-stat {
        height: 52px !important;
        min-height: 52px !important;
        max-height: 52px !important;
        padding: 6px 8px !important;
        overflow: hidden !important;
    }

    html[data-theme] body.browser-mode.internal-clean-page-shell.wms-refactor-shell.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .wms-stock-stat-value,
    body.browser-mode.internal-clean-page-shell.wms-refactor-shell.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .wms-stock-stat-value {
        font-size: 16px !important;
        line-height: 1.05 !important;
    }

    html[data-theme] body.browser-mode.internal-clean-page-shell.wms-refactor-shell.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .wms-stock-table-card,
    body.browser-mode.internal-clean-page-shell.wms-refactor-shell.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .wms-stock-table-card {
        min-height: 0 !important;
        height: 100% !important;
        max-height: 100% !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        padding: 0 !important;
    }

    html[data-theme] body.browser-mode.internal-clean-page-shell.wms-refactor-shell.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .wms-stock-table-toolbar,
    body.browser-mode.internal-clean-page-shell.wms-refactor-shell.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .wms-stock-table-toolbar {
        flex: 0 0 auto !important;
        min-height: 0 !important;
        padding: 8px !important;
        gap: 6px !important;
    }

    html[data-theme] body.browser-mode.internal-clean-page-shell.wms-refactor-shell.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .stock-mobile-list,
    html[data-theme] body.browser-mode.internal-clean-page-shell.wms-refactor-shell.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .stock-mobile-empty-state,
    body.browser-mode.internal-clean-page-shell.wms-refactor-shell.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .stock-mobile-list,
    body.browser-mode.internal-clean-page-shell.wms-refactor-shell.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .stock-mobile-empty-state {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
        overflow: auto !important;
        overscroll-behavior: contain !important;
    }

    html[data-theme] body.browser-mode.internal-clean-page-shell.wms-refactor-shell.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .stock-pagination-mobile,
    body.browser-mode.internal-clean-page-shell.wms-refactor-shell.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .stock-pagination-mobile {
        flex: 0 0 auto !important;
        padding: 0 8px 8px !important;
        margin: 0 !important;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    html[data-theme] body.browser-mode.internal-clean-page-shell.wms-refactor-shell.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .wms-stock-filter-grid,
    body.browser-mode.internal-clean-page-shell.wms-refactor-shell.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .wms-stock-filter-grid {
        grid-template-columns: minmax(0, 1fr) minmax(128px, 0.32fr) auto !important;
        align-items: end !important;
        gap: 5px !important;
    }

    html[data-theme] body.browser-mode.internal-clean-page-shell.wms-refactor-shell.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .stock-filter-chips,
    body.browser-mode.internal-clean-page-shell.wms-refactor-shell.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .stock-filter-chips {
        grid-column: 1 / -1 !important;
        min-height: 28px !important;
    }

    html[data-theme] body.browser-mode.internal-clean-page-shell.wms-refactor-shell.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .wms-stock-stats,
    body.browser-mode.internal-clean-page-shell.wms-refactor-shell.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .wms-stock-stats {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 767px) {
    html[data-theme] body.browser-mode.internal-clean-page-shell.wms-refactor-shell.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell > .layout,
    body.browser-mode.internal-clean-page-shell.wms-refactor-shell.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell > .layout,
    html[data-theme] body.browser-mode.internal-clean-page-shell.wms-refactor-shell.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .main,
    body.browser-mode.internal-clean-page-shell.wms-refactor-shell.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .main,
    html[data-theme] body.browser-mode.internal-clean-page-shell.wms-refactor-shell.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .clean-module-layout.internal-module-layout.module-layout,
    body.browser-mode.internal-clean-page-shell.wms-refactor-shell.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .clean-module-layout.internal-module-layout.module-layout,
    html[data-theme] body.browser-mode.internal-clean-page-shell.wms-refactor-shell.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .clean-content-panel.internal-module-panel.content-panel,
    body.browser-mode.internal-clean-page-shell.wms-refactor-shell.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .clean-content-panel.internal-module-panel.content-panel {
        height: calc(100dvh - 70px) !important;
        max-height: calc(100dvh - 70px) !important;
    }

    html[data-theme] body.browser-mode.internal-clean-page-shell.wms-refactor-shell.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .wms-stock-filter-grid,
    body.browser-mode.internal-clean-page-shell.wms-refactor-shell.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .wms-stock-filter-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 5px !important;
    }

    html[data-theme] body.browser-mode.internal-clean-page-shell.wms-refactor-shell.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .wms-stock-stats,
    body.browser-mode.internal-clean-page-shell.wms-refactor-shell.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .wms-stock-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* Phones need reachable content more than a locked cockpit. Keep horizontal
   overflow blocked, but allow vertical page scroll so the card list is usable. */
@media (max-width: 767px) {
    html:has(body.browser-mode.internal-clean-page-shell.wms-refactor-shell.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell),
    html[data-theme]:has(body.browser-mode.internal-clean-page-shell.wms-refactor-shell.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell),
    html[data-theme] body.browser-mode.internal-clean-page-shell.wms-refactor-shell.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell,
    body.browser-mode.internal-clean-page-shell.wms-refactor-shell.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell {
        height: auto !important;
        min-height: 100dvh !important;
        max-height: none !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    html[data-theme] body.browser-mode.internal-clean-page-shell.wms-refactor-shell.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell > .layout,
    body.browser-mode.internal-clean-page-shell.wms-refactor-shell.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell > .layout,
    html[data-theme] body.browser-mode.internal-clean-page-shell.wms-refactor-shell.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .main,
    body.browser-mode.internal-clean-page-shell.wms-refactor-shell.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .main,
    html[data-theme] body.browser-mode.internal-clean-page-shell.wms-refactor-shell.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .clean-module-layout.internal-module-layout.module-layout,
    body.browser-mode.internal-clean-page-shell.wms-refactor-shell.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .clean-module-layout.internal-module-layout.module-layout,
    html[data-theme] body.browser-mode.internal-clean-page-shell.wms-refactor-shell.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .clean-content-panel.internal-module-panel.content-panel,
    body.browser-mode.internal-clean-page-shell.wms-refactor-shell.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .clean-content-panel.internal-module-panel.content-panel,
    html[data-theme] body.browser-mode.internal-clean-page-shell.wms-refactor-shell.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .page-content.page-content-bleed,
    body.browser-mode.internal-clean-page-shell.wms-refactor-shell.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .page-content.page-content-bleed,
    html[data-theme] body.browser-mode.internal-clean-page-shell.wms-refactor-shell.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .wms-zip-stock-page:not(.is-hidden),
    body.browser-mode.internal-clean-page-shell.wms-refactor-shell.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .wms-zip-stock-page:not(.is-hidden),
    html[data-theme] body.browser-mode.internal-clean-page-shell.wms-refactor-shell.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .wms-stock-table-card,
    body.browser-mode.internal-clean-page-shell.wms-refactor-shell.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .wms-stock-table-card {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow-x: hidden !important;
        overflow-y: visible !important;
    }

    html[data-theme] body.browser-mode.internal-clean-page-shell.wms-refactor-shell.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .stock-mobile-list,
    html[data-theme] body.browser-mode.internal-clean-page-shell.wms-refactor-shell.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .stock-mobile-empty-state,
    body.browser-mode.internal-clean-page-shell.wms-refactor-shell.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .stock-mobile-list,
    body.browser-mode.internal-clean-page-shell.wms-refactor-shell.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .stock-mobile-empty-state {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }
}

/* Mandor color finish: semantic colors for Stock & Produk only. Keep this
   scoped so WMS request, POS, Attendance, HRIS, and other modules stay intact. */
html[data-theme] body.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2,
body.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 {
    --stock-action-navy: #0b2545;
    --stock-action-navy-hover: #071a32;
    --stock-action-border: #cbd5e1;
    --stock-chip-all-bg: #eef4ff;
    --stock-chip-all-text: #1d4ed8;
    --stock-chip-all-border: #bfdbfe;
    --stock-chip-safe-bg: #dcfce7;
    --stock-chip-safe-text: #047857;
    --stock-chip-safe-border: #86efac;
    --stock-chip-low-bg: #fef3c7;
    --stock-chip-low-text: #b45309;
    --stock-chip-low-border: #fcd34d;
    --stock-chip-minus-bg: #fee2e2;
    --stock-chip-minus-text: #b91c1c;
    --stock-chip-minus-border: #fca5a5;
    --stock-chip-empty-bg: #e2e8f0;
    --stock-chip-empty-text: #334155;
    --stock-chip-empty-border: #cbd5e1;
    --stock-danger: #dc2626;
    --stock-danger-hover: #b91c1c;
}

html[data-theme] body.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .stock-filter-chip,
body.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .stock-filter-chip {
    border: 1px solid transparent !important;
    border-radius: 999px !important;
    box-shadow: none !important;
    font-weight: 800 !important;
}

html[data-theme] body.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 [data-stock-filter-chip="all"],
body.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 [data-stock-filter-chip="all"] {
    background: var(--stock-chip-all-bg) !important;
    color: var(--stock-chip-all-text) !important;
    border-color: var(--stock-chip-all-border) !important;
}

html[data-theme] body.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 [data-stock-filter-chip="ready"],
body.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 [data-stock-filter-chip="ready"] {
    background: var(--stock-chip-safe-bg) !important;
    color: var(--stock-chip-safe-text) !important;
    border-color: var(--stock-chip-safe-border) !important;
}

html[data-theme] body.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 [data-stock-filter-chip="low"],
body.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 [data-stock-filter-chip="low"] {
    background: var(--stock-chip-low-bg) !important;
    color: var(--stock-chip-low-text) !important;
    border-color: var(--stock-chip-low-border) !important;
}

html[data-theme] body.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 [data-stock-filter-chip="minus"],
body.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 [data-stock-filter-chip="minus"] {
    background: var(--stock-chip-minus-bg) !important;
    color: var(--stock-chip-minus-text) !important;
    border-color: var(--stock-chip-minus-border) !important;
}

html[data-theme] body.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 [data-stock-filter-chip="zero"],
body.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 [data-stock-filter-chip="zero"] {
    background: var(--stock-chip-empty-bg) !important;
    color: var(--stock-chip-empty-text) !important;
    border-color: var(--stock-chip-empty-border) !important;
}

html[data-theme] body.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .stock-filter-chip.is-active,
body.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .stock-filter-chip.is-active {
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.1), 0 4px 10px rgba(15, 23, 42, 0.08) !important;
    filter: saturate(1.08) !important;
}

html[data-theme] body.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 :is(.stock-badge--safe, .stock-status-badge.is-safe),
body.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 :is(.stock-badge--safe, .stock-status-badge.is-safe) {
    background: #dcfce7 !important;
    color: #047857 !important;
    border: 1px solid #bbf7d0 !important;
}

html[data-theme] body.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 :is(.stock-badge--warning, .stock-status-badge.is-warning),
body.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 :is(.stock-badge--warning, .stock-status-badge.is-warning) {
    background: #fef3c7 !important;
    color: #b45309 !important;
    border: 1px solid #fde68a !important;
}

html[data-theme] body.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 :is(.stock-badge--danger, .stock-status-badge.is-danger),
body.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 :is(.stock-badge--danger, .stock-status-badge.is-danger) {
    background: #fee2e2 !important;
    color: #b91c1c !important;
    border: 1px solid #fecaca !important;
}

html[data-theme] body.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 :is(.stock-badge--empty, .stock-status-badge.is-empty),
body.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 :is(.stock-badge--empty, .stock-status-badge.is-empty) {
    background: #e2e8f0 !important;
    color: #334155 !important;
    border: 1px solid #cbd5e1 !important;
}

html[data-theme] body.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell :is(.stock-primary-action, .stock-page-v2 .zip-filter-submit, .stock-page-v2 .wms-stock-table-actions [data-ipos4-import-open], .stock-page-v2 .wms-stock-table-actions [data-stock-search-replace-open]),
body.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell :is(.stock-primary-action, .stock-page-v2 .zip-filter-submit, .stock-page-v2 .wms-stock-table-actions [data-ipos4-import-open], .stock-page-v2 .wms-stock-table-actions [data-stock-search-replace-open]) {
    background: var(--stock-action-navy) !important;
    color: #ffffff !important;
    border-color: var(--stock-action-navy) !important;
}

html[data-theme] body.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell :is(.stock-primary-action, .stock-page-v2 .zip-filter-submit, .stock-page-v2 .wms-stock-table-actions [data-ipos4-import-open], .stock-page-v2 .wms-stock-table-actions [data-stock-search-replace-open]):hover,
body.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell :is(.stock-primary-action, .stock-page-v2 .zip-filter-submit, .stock-page-v2 .wms-stock-table-actions [data-ipos4-import-open], .stock-page-v2 .wms-stock-table-actions [data-stock-search-replace-open]):hover {
    background: var(--stock-action-navy-hover) !important;
    border-color: var(--stock-action-navy-hover) !important;
}

html[data-theme] body.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 :is(#stockExportLink, #stockExportLinkMobile, .stock-detail-button),
body.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 :is(#stockExportLink, #stockExportLinkMobile, .stock-detail-button) {
    background: #ffffff !important;
    color: var(--stock-action-navy) !important;
    border-color: var(--stock-action-border) !important;
}

html[data-theme] body.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .stock-action-button:not(.stock-detail-button),
body.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .stock-action-button:not(.stock-detail-button) {
    background: var(--stock-action-navy) !important;
    color: #ffffff !important;
    border-color: var(--stock-action-navy) !important;
}

html[data-theme] body.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 [data-product-bulk-delete]:not([aria-disabled="false"]),
body.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 [data-product-bulk-delete]:not([aria-disabled="false"]) {
    background: #e2e8f0 !important;
    color: #94a3b8 !important;
    border-color: #cbd5e1 !important;
    cursor: not-allowed !important;
    opacity: 1 !important;
}

html[data-theme] body.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 [data-product-bulk-delete][aria-disabled="false"],
body.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 [data-product-bulk-delete][aria-disabled="false"] {
    background: var(--stock-danger) !important;
    color: #ffffff !important;
    border-color: var(--stock-danger) !important;
    cursor: pointer !important;
    opacity: 1 !important;
}

html[data-theme] body.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 [data-product-bulk-delete][aria-disabled="false"]:hover,
body.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 [data-product-bulk-delete][aria-disabled="false"]:hover {
    background: var(--stock-danger-hover) !important;
    border-color: var(--stock-danger-hover) !important;
}

html[data-theme] body.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .stock-product-delete-button,
body.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .stock-product-delete-button {
    background: #ffffff !important;
    color: #b91c1c !important;
    border: 1px solid #fecaca !important;
}

html[data-theme] body.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .stock-product-delete-button:hover,
body.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .stock-product-delete-button:hover {
    background: #fee2e2 !important;
    color: #991b1b !important;
    border-color: #fca5a5 !important;
}

html[data-theme] body.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .stock-row-menu-button,
body.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 .stock-row-menu-button {
    background: #f8fafc !important;
    color: #475569 !important;
    border-color: #cbd5e1 !important;
}

/* Mandor shell guard: keep internal pages from stacking header/sidebar/modal in
   random layers. Scoped to internal shells so public pages stay untouched. */
:root {
    --bjas-z-content: 1;
    --bjas-z-sidebar: 80;
    --bjas-z-header: 90;
    --bjas-z-dropdown: 120;
    --bjas-z-toast: 800;
    --bjas-z-modal-overlay: 1000;
    --bjas-z-modal-dialog: 1010;
    --bjas-shell-header-height: 78px;
}

html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell, .wms-module-shell),
body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell, .wms-module-shell) {
    max-width: 100% !important;
    overflow-x: clip !important;
}

html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell, .wms-module-shell) :is(.layout, .main, .internal-page, .clean-module-layout, .internal-module-layout, .clean-content-panel, .internal-module-panel, .content-panel, .page-content, .page-content-bleed),
body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell, .wms-module-shell) :is(.layout, .main, .internal-page, .clean-module-layout, .internal-module-layout, .clean-content-panel, .internal-module-panel, .content-panel, .page-content, .page-content-bleed) {
    min-width: 0 !important;
    max-width: 100% !important;
}

html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell, .wms-module-shell) :is(.internal-app-topbar, .internal-shell-header, [data-internal-base-header]),
body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell, .wms-module-shell) :is(.internal-app-topbar, .internal-shell-header, [data-internal-base-header]) {
    z-index: var(--bjas-z-header) !important;
    min-height: 70px !important;
    isolation: isolate !important;
}

html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell, .wms-module-shell) :is(.clean-module-sidebar, .info-sidebar, .internal-module-nav, .information-module-nav),
body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell, .wms-module-shell) :is(.clean-module-sidebar, .info-sidebar, .internal-module-nav, .information-module-nav) {
    z-index: var(--bjas-z-sidebar) !important;
}

html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell, .wms-module-shell) .topbar-menu-shell,
body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell, .wms-module-shell) .topbar-menu-shell {
    position: relative !important;
    z-index: calc(var(--bjas-z-header) + 1) !important;
}

html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell, .wms-module-shell) .topbar-dropdown,
body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell, .wms-module-shell) .topbar-dropdown {
    z-index: var(--bjas-z-dropdown) !important;
}

html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell, .wms-module-shell) .header-center-logo,
body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell, .wms-module-shell) .header-center-logo {
    min-width: 148px !important;
}

html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell, .wms-module-shell) .header-center-logo img,
body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell, .wms-module-shell) .header-center-logo img {
    display: block !important;
    width: auto !important;
    height: 32px !important;
    max-height: 34px !important;
    object-fit: contain !important;
}

html[data-theme] body.hris-modal-open,
body.hris-modal-open {
    overflow: hidden !important;
}

body > :is(.biometric-photo-modal, .biometric-edit-modal) {
    z-index: var(--bjas-z-modal-overlay) !important;
}

body > :is(.biometric-photo-modal, .biometric-edit-modal) :is(.biometric-photo-modal-dialog, .biometric-edit-modal-dialog) {
    z-index: var(--bjas-z-modal-dialog) !important;
}

@media (max-width: 760px) {
    html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell, .wms-module-shell) .header-center-logo,
    body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell, .wms-module-shell) .header-center-logo {
        min-width: 108px !important;
    }

    html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell, .wms-module-shell) .header-center-logo img,
    body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell, .wms-module-shell) .header-center-logo img {
        height: 26px !important;
        max-height: 28px !important;
    }
}

html[data-theme] body.internal-module-shell :is(.internal-app-topbar.internal-shell-header, .module-header.internal-shell-header, [data-internal-base-header]),
body.internal-module-shell :is(.internal-app-topbar.internal-shell-header, .module-header.internal-shell-header, [data-internal-base-header]),
html[data-theme] body.internal-clean-page-shell :is(.internal-app-topbar.internal-shell-header, .module-header.internal-shell-header, [data-internal-base-header]),
body.internal-clean-page-shell :is(.internal-app-topbar.internal-shell-header, .module-header.internal-shell-header, [data-internal-base-header]),
html[data-theme] body.wms-module-shell :is(.internal-app-topbar.internal-shell-header, .module-header.internal-shell-header, [data-internal-base-header]),
body.wms-module-shell :is(.internal-app-topbar.internal-shell-header, .module-header.internal-shell-header, [data-internal-base-header]) {
    z-index: var(--bjas-z-header) !important;
}

html[data-theme] body.internal-module-shell :is(.clean-module-sidebar, .info-sidebar, .internal-module-nav, .information-module-nav),
body.internal-module-shell :is(.clean-module-sidebar, .info-sidebar, .internal-module-nav, .information-module-nav),
html[data-theme] body.internal-clean-page-shell :is(.clean-module-sidebar, .info-sidebar, .internal-module-nav, .information-module-nav),
body.internal-clean-page-shell :is(.clean-module-sidebar, .info-sidebar, .internal-module-nav, .information-module-nav),
html[data-theme] body.wms-module-shell :is(.clean-module-sidebar, .info-sidebar, .internal-module-nav, .information-module-nav),
body.wms-module-shell :is(.clean-module-sidebar, .info-sidebar, .internal-module-nav, .information-module-nav) {
    z-index: var(--bjas-z-sidebar) !important;
}

:root {
    --wms-z-sidebar: var(--bjas-z-sidebar);
    --wms-z-topbar: var(--bjas-z-header);
    --wms-z-dropdown: var(--bjas-z-dropdown);
    --wms-z-modal-backdrop: var(--bjas-z-modal-overlay);
    --wms-z-modal: var(--bjas-z-modal-dialog);
}

html[data-theme] body.browser-mode.internal-module-shell :is(.internal-app-topbar.internal-shell-header, .module-header.internal-shell-header, [data-internal-base-header]),
body.browser-mode.internal-module-shell :is(.internal-app-topbar.internal-shell-header, .module-header.internal-shell-header, [data-internal-base-header]),
html[data-theme] body.browser-mode.internal-clean-page-shell.wms-refactor-shell.wms-module-shell :is(.internal-app-topbar.internal-shell-header, .module-header.internal-shell-header, [data-internal-base-header]),
body.browser-mode.internal-clean-page-shell.wms-refactor-shell.wms-module-shell :is(.internal-app-topbar.internal-shell-header, .module-header.internal-shell-header, [data-internal-base-header]) {
    z-index: var(--bjas-z-header) !important;
}

html[data-theme] body.browser-mode.internal-module-shell :is(.clean-module-sidebar, .info-sidebar, .internal-module-nav, .information-module-nav),
body.browser-mode.internal-module-shell :is(.clean-module-sidebar, .info-sidebar, .internal-module-nav, .information-module-nav),
html[data-theme] body.browser-mode.internal-clean-page-shell.wms-refactor-shell.wms-module-shell :is(.clean-module-sidebar, .info-sidebar, .internal-module-nav, .information-module-nav),
body.browser-mode.internal-clean-page-shell.wms-refactor-shell.wms-module-shell :is(.clean-module-sidebar, .info-sidebar, .internal-module-nav, .information-module-nav) {
    z-index: var(--bjas-z-sidebar) !important;
}

html[data-theme] body.internal-module-shell .hris-clean-shell .biometric-recap-summary-row > td,
body.internal-module-shell .hris-clean-shell .biometric-recap-summary-row > td,
html[data-theme] body .hris-clean-shell .biometric-recap-summary-row > td,
body .hris-clean-shell .biometric-recap-summary-row > td {
    height: 58px !important;
    max-height: 58px !important;
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}

@media (min-width: 761px) {
    html[data-theme] body .hris-clean-shell .biometric-summary-date-cell .biometric-summary-muted,
    body .hris-clean-shell .biometric-summary-date-cell .biometric-summary-muted,
    html[data-theme] body .hris-clean-shell .biometric-recap-warehouse-cell small,
    body .hris-clean-shell .biometric-recap-warehouse-cell small,
    html[data-theme] body .hris-clean-shell .biometric-recap-status-cell small,
    body .hris-clean-shell .biometric-recap-status-cell small,
    html[data-theme] body .hris-clean-shell .biometric-recap-break-cell small,
    body .hris-clean-shell .biometric-recap-break-cell small {
        display: none !important;
    }

    html[data-theme] body .hris-clean-shell .biometric-summary-pair,
    body .hris-clean-shell .biometric-summary-pair,
    html[data-theme] body .hris-clean-shell .biometric-proof-stack,
    body .hris-clean-shell .biometric-proof-stack {
        display: flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        gap: 5px !important;
    }

    html[data-theme] body .hris-clean-shell .biometric-summary-pair span,
    body .hris-clean-shell .biometric-summary-pair span,
    html[data-theme] body .hris-clean-shell .biometric-proof-stack > span:first-child,
    body .hris-clean-shell .biometric-proof-stack > span:first-child {
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }

    html[data-theme] body .hris-clean-shell .biometric-proof-stack .biometric-photo-history-button,
    body .hris-clean-shell .biometric-proof-stack .biometric-photo-history-button {
        width: auto !important;
        min-width: 42px !important;
        min-height: 24px !important;
        height: 24px !important;
        padding: 0 8px !important;
    }

    html[data-theme] body .hris-clean-shell .biometric-proof-stack .biometric-photo-count,
    body .hris-clean-shell .biometric-proof-stack .biometric-photo-count {
        flex: 0 0 auto !important;
        min-height: 18px !important;
        padding-inline: 6px !important;
    }
}

/* HRIS attendance detail compact final guard.
   Scoped to the geotag recap table so Foto/Atur logic and other HRIS panels stay intact. */
html[data-theme] body .hris-clean-shell .attendance-detail-card,
body .hris-clean-shell .attendance-detail-card {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
}

html[data-theme] body .hris-clean-shell .attendance-detail-card .biometric-section-title,
body .hris-clean-shell .attendance-detail-card .biometric-section-title {
    min-height: 0 !important;
    padding: 12px 14px !important;
    gap: 10px !important;
}

html[data-theme] body .hris-clean-shell .attendance-detail-card .biometric-section-title h2,
body .hris-clean-shell .attendance-detail-card .biometric-section-title h2 {
    margin: 0 !important;
    color: #0b1f3a !important;
    font-size: 19px !important;
    line-height: 1.18 !important;
    letter-spacing: 0 !important;
}

html[data-theme] body .hris-clean-shell .attendance-detail-card .biometric-section-title p,
body .hris-clean-shell .attendance-detail-card .biometric-section-title p {
    margin: 3px 0 0 !important;
    max-width: 900px !important;
    color: #64748b !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
}

html[data-theme] body .hris-clean-shell .attendance-detail-table-wrap,
body .hris-clean-shell .attendance-detail-table-wrap {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    scrollbar-width: thin !important;
    -webkit-overflow-scrolling: touch !important;
}

html[data-theme] body .hris-clean-shell .attendance-detail-table,
body .hris-clean-shell .attendance-detail-table {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    table-layout: fixed !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

html[data-theme] body .hris-clean-shell .attendance-detail-table th,
body .hris-clean-shell .attendance-detail-table th {
    height: 34px !important;
    padding: 7px 9px !important;
    background: #f8fafc !important;
    border-bottom: 1px solid #dbe3ee !important;
    color: #64748b !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    letter-spacing: 0.04em !important;
    line-height: 1.15 !important;
    text-transform: uppercase !important;
}

html[data-theme] body .hris-clean-shell .attendance-detail-table td,
body .hris-clean-shell .attendance-detail-table td {
    height: 58px !important;
    max-height: none !important;
    padding: 7px 9px !important;
    border-bottom: 1px solid #edf2f7 !important;
    background: #ffffff !important;
    color: #0f172a !important;
    font-size: 12px !important;
    line-height: 1.24 !important;
    vertical-align: middle !important;
    overflow: visible !important;
}

html[data-theme] body .hris-clean-shell .attendance-detail-table tbody tr:nth-child(even) td,
body .hris-clean-shell .attendance-detail-table tbody tr:nth-child(even) td {
    background: #fbfdff !important;
}

html[data-theme] body .hris-clean-shell .attendance-detail-table th:nth-child(1),
body .hris-clean-shell .attendance-detail-table th:nth-child(1) { width: 8% !important; }
html[data-theme] body .hris-clean-shell .attendance-detail-table th:nth-child(2),
body .hris-clean-shell .attendance-detail-table th:nth-child(2) { width: 16% !important; }
html[data-theme] body .hris-clean-shell .attendance-detail-table th:nth-child(3),
body .hris-clean-shell .attendance-detail-table th:nth-child(3) { width: 13% !important; }
html[data-theme] body .hris-clean-shell .attendance-detail-table th:nth-child(4),
body .hris-clean-shell .attendance-detail-table th:nth-child(4) { width: 16% !important; }
html[data-theme] body .hris-clean-shell .attendance-detail-table th:nth-child(5),
body .hris-clean-shell .attendance-detail-table th:nth-child(5) { width: 12% !important; }
html[data-theme] body .hris-clean-shell .attendance-detail-table th:nth-child(6),
body .hris-clean-shell .attendance-detail-table th:nth-child(6) { width: 12% !important; }
html[data-theme] body .hris-clean-shell .attendance-detail-table th:nth-child(7),
body .hris-clean-shell .attendance-detail-table th:nth-child(7) { width: 10% !important; }
html[data-theme] body .hris-clean-shell .attendance-detail-table th:nth-child(8),
body .hris-clean-shell .attendance-detail-table th:nth-child(8) { width: 6% !important; }
html[data-theme] body .hris-clean-shell .attendance-detail-table th:nth-child(9),
body .hris-clean-shell .attendance-detail-table th:nth-child(9) { width: 7% !important; }

html[data-theme] body .hris-clean-shell .attendance-date-main,
body .hris-clean-shell .attendance-date-main {
    display: block !important;
    color: #0b1f3a !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
}

html[data-theme] body .hris-clean-shell .attendance-staff-name,
body .hris-clean-shell .attendance-staff-name,
html[data-theme] body .hris-clean-shell .attendance-detail-table [data-biometric-shift-summary],
body .hris-clean-shell .attendance-detail-table [data-biometric-shift-summary] {
    display: -webkit-box !important;
    max-width: 100% !important;
    overflow: hidden !important;
    color: #0b1f3a !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    line-height: 1.15 !important;
    white-space: normal !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
}

html[data-theme] body .hris-clean-shell .attendance-staff-code,
body .hris-clean-shell .attendance-staff-code,
html[data-theme] body .hris-clean-shell .attendance-detail-table small,
body .hris-clean-shell .attendance-detail-table small,
html[data-theme] body .hris-clean-shell .attendance-detail-table .biometric-summary-muted,
body .hris-clean-shell .attendance-detail-table .biometric-summary-muted {
    margin-top: 2px !important;
    color: #64748b !important;
    font-size: 10.5px !important;
    font-weight: 750 !important;
    line-height: 1.18 !important;
}

html[data-theme] body .hris-clean-shell .attendance-detail-table .badge,
body .hris-clean-shell .attendance-detail-table .badge {
    min-height: 22px !important;
    padding: 3px 8px !important;
    border-radius: 999px !important;
    font-size: 10.5px !important;
    font-weight: 900 !important;
    letter-spacing: 0.04em !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
}

html[data-theme] body .hris-clean-shell .attendance-detail-table .biometric-summary-pair,
body .hris-clean-shell .attendance-detail-table .biometric-summary-pair {
    display: grid !important;
    gap: 2px !important;
    min-width: 0 !important;
}

html[data-theme] body .hris-clean-shell .attendance-time-row,
body .hris-clean-shell .attendance-time-row {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    min-width: 0 !important;
    color: #0f172a !important;
    font-size: 11.5px !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
}

html[data-theme] body .hris-clean-shell .attendance-time-label,
body .hris-clean-shell .attendance-time-label {
    min-width: 42px !important;
    color: #64748b !important;
    font-style: normal !important;
    font-weight: 750 !important;
}

html[data-theme] body .hris-clean-shell .attendance-time-value,
body .hris-clean-shell .attendance-time-value {
    color: #0b1f3a !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    line-height: 1.15 !important;
}

html[data-theme] body .hris-clean-shell .biometric-recap-break-cell,
body .hris-clean-shell .biometric-recap-break-cell {
    display: table-cell !important;
}

html[data-theme] body .hris-clean-shell .attendance-detail-table .biometric-break-duration,
body .hris-clean-shell .attendance-detail-table .biometric-break-duration {
    display: block !important;
    margin-top: 3px !important;
    color: #0b1f3a !important;
    font-size: 17px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

html[data-theme] body .hris-clean-shell .attendance-detail-table .biometric-proof-stack,
body .hris-clean-shell .attendance-detail-table .biometric-proof-stack {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 4px !important;
    min-width: 0 !important;
}

html[data-theme] body .hris-clean-shell .attendance-detail-table .biometric-proof-stack > span:first-child,
body .hris-clean-shell .attendance-detail-table .biometric-proof-stack > span:first-child {
    color: #64748b !important;
    font-size: 11px !important;
    font-weight: 750 !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

html[data-theme] body .hris-clean-shell .attendance-detail-table .biometric-photo-count,
body .hris-clean-shell .attendance-detail-table .biometric-photo-count {
    width: max-content !important;
    max-width: 100% !important;
    min-height: 18px !important;
    padding: 0 6px !important;
    font-size: 10px !important;
}

html[data-theme] body .hris-clean-shell .attendance-detail-table .biometric-photo-history-button,
body .hris-clean-shell .attendance-detail-table .biometric-photo-history-button,
html[data-theme] body .hris-clean-shell .attendance-detail-table .biometric-attendance-edit-button,
body .hris-clean-shell .attendance-detail-table .biometric-attendance-edit-button {
    width: auto !important;
    min-width: 0 !important;
    min-height: 30px !important;
    height: 30px !important;
    padding: 0 9px !important;
    border: 1px solid #d7e1ef !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    color: #0f2747 !important;
    box-shadow: none !important;
    font-size: 11.5px !important;
    font-weight: 850 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

html[data-theme] body .hris-clean-shell .attendance-detail-table .biometric-photo-history-button:hover,
body .hris-clean-shell .attendance-detail-table .biometric-photo-history-button:hover,
html[data-theme] body .hris-clean-shell .attendance-detail-table .biometric-attendance-edit-button:hover,
body .hris-clean-shell .attendance-detail-table .biometric-attendance-edit-button:hover {
    background: #f1f5f9 !important;
}

html[data-theme] body .hris-clean-shell .attendance-detail-table .biometric-recap-action-cell,
body .hris-clean-shell .attendance-detail-table .biometric-recap-action-cell {
    text-align: right !important;
}

@media (min-width: 761px) {
    html[data-theme] body .hris-clean-shell .attendance-detail-table .biometric-recap-warehouse-cell small,
    body .hris-clean-shell .attendance-detail-table .biometric-recap-warehouse-cell small,
    html[data-theme] body .hris-clean-shell .attendance-detail-table .biometric-recap-status-cell small,
    body .hris-clean-shell .attendance-detail-table .biometric-recap-status-cell small,
    html[data-theme] body .hris-clean-shell .attendance-detail-table .biometric-recap-break-cell small,
    body .hris-clean-shell .attendance-detail-table .biometric-recap-break-cell small {
        display: none !important;
    }
}

@media (max-width: 760px) {
    html[data-theme] body .hris-clean-shell .attendance-detail-table-wrap,
    body .hris-clean-shell .attendance-detail-table-wrap {
        overflow-x: hidden !important;
    }

    html[data-theme] body .hris-clean-shell .attendance-detail-table,
    body .hris-clean-shell .attendance-detail-table {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    html[data-theme] body .hris-clean-shell .attendance-detail-table thead,
    body .hris-clean-shell .attendance-detail-table thead {
        display: none !important;
    }

    html[data-theme] body .hris-clean-shell .attendance-detail-table tbody,
    body .hris-clean-shell .attendance-detail-table tbody {
        display: grid !important;
        gap: 10px !important;
    }

    html[data-theme] body .hris-clean-shell .attendance-detail-table tr,
    body .hris-clean-shell .attendance-detail-table tr {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 0 !important;
        border: 1px solid #dbe3ee !important;
        border-radius: 12px !important;
        background: #ffffff !important;
        overflow: hidden !important;
    }

    html[data-theme] body .hris-clean-shell .attendance-detail-table td,
    body .hris-clean-shell .attendance-detail-table td {
        display: grid !important;
        grid-template-columns: 94px minmax(0, 1fr) !important;
        gap: 8px !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 8px 10px !important;
        border-bottom: 1px solid #edf2f7 !important;
        align-items: start !important;
    }

    html[data-theme] body .hris-clean-shell .attendance-detail-table td::before,
    body .hris-clean-shell .attendance-detail-table td::before {
        content: attr(data-label) !important;
        color: #64748b !important;
        font-size: 10.5px !important;
        font-weight: 900 !important;
        letter-spacing: 0.04em !important;
        line-height: 1.25 !important;
        text-transform: uppercase !important;
    }

    html[data-theme] body .hris-clean-shell .attendance-detail-table td:last-child,
    body .hris-clean-shell .attendance-detail-table td:last-child {
        border-bottom: 0 !important;
    }

    html[data-theme] body .hris-clean-shell .attendance-detail-table .biometric-recap-proof-cell,
    html[data-theme] body .hris-clean-shell .attendance-detail-table .biometric-recap-action-cell,
    body .hris-clean-shell .attendance-detail-table .biometric-recap-proof-cell,
    body .hris-clean-shell .attendance-detail-table .biometric-recap-action-cell {
        align-items: center !important;
    }

    html[data-theme] body .hris-clean-shell .attendance-detail-table .biometric-proof-stack,
    body .hris-clean-shell .attendance-detail-table .biometric-proof-stack {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        align-items: center !important;
    }

    html[data-theme] body .hris-clean-shell .attendance-detail-table .biometric-proof-stack > span:first-child,
    body .hris-clean-shell .attendance-detail-table .biometric-proof-stack > span:first-child {
        grid-column: 1 / -1 !important;
    }

    html[data-theme] body .hris-clean-shell .attendance-detail-table .biometric-photo-history-button,
    html[data-theme] body .hris-clean-shell .attendance-detail-table .biometric-attendance-edit-button,
    body .hris-clean-shell .attendance-detail-table .biometric-photo-history-button,
    body .hris-clean-shell .attendance-detail-table .biometric-attendance-edit-button {
        width: 100% !important;
    }
}

/* HRIS photo modal compact guard: preview must not take over the whole screen. */
html[data-theme] body .hris-clean-shell .biometric-photo-modal,
body .hris-clean-shell .biometric-photo-modal,
html[data-theme] body > .biometric-photo-modal,
body > .biometric-photo-modal {
    padding: 14px !important;
    background: rgba(7, 16, 32, 0.52) !important;
    overflow: auto !important;
}

html[data-theme] body .hris-clean-shell .biometric-photo-modal-dialog,
body .hris-clean-shell .biometric-photo-modal-dialog,
html[data-theme] body > .biometric-photo-modal .biometric-photo-modal-dialog,
body > .biometric-photo-modal .biometric-photo-modal-dialog {
    width: min(780px, calc(100vw - 32px)) !important;
    max-height: calc(100dvh - 32px) !important;
    border-radius: 14px !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

html[data-theme] body .hris-clean-shell .biometric-photo-modal-head,
body .hris-clean-shell .biometric-photo-modal-head {
    flex: 0 0 auto !important;
    padding: 10px 12px 0 !important;
}

html[data-theme] body .hris-clean-shell .biometric-photo-modal-meta,
body .hris-clean-shell .biometric-photo-modal-meta {
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 12px 8px !important;
    font-size: 11.5px !important;
    line-height: 1.3 !important;
}

html[data-theme] body .hris-clean-shell .biometric-photo-modal-content,
body .hris-clean-shell .biometric-photo-modal-content {
    grid-template-columns: minmax(280px, 0.95fr) minmax(220px, 0.75fr) !important;
    gap: 10px !important;
    min-height: 0 !important;
    padding: 4px 12px 12px !important;
    overflow: hidden !important;
}

html[data-theme] body .hris-clean-shell .biometric-photo-preview,
body .hris-clean-shell .biometric-photo-preview {
    padding: 8px !important;
}

html[data-theme] body .hris-clean-shell .biometric-photo-preview-image,
body .hris-clean-shell .biometric-photo-preview-image {
    width: 100% !important;
    height: clamp(190px, 36vh, 320px) !important;
    max-height: 320px !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    background: #f8fafc !important;
}

html[data-theme] body .hris-clean-shell .biometric-photo-preview-meta,
body .hris-clean-shell .biometric-photo-preview-meta {
    max-height: 92px !important;
    overflow: auto !important;
    font-size: 11px !important;
    line-height: 1.28 !important;
}

html[data-theme] body .hris-clean-shell .biometric-photo-events-grid,
body .hris-clean-shell .biometric-photo-events-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 6px !important;
    max-height: min(52vh, 390px) !important;
    overflow-y: auto !important;
}

html[data-theme] body .hris-clean-shell .biometric-photo-event-card,
body .hris-clean-shell .biometric-photo-event-card {
    display: grid !important;
    grid-template-columns: 72px minmax(0, 1fr) !important;
    gap: 7px !important;
    align-items: start !important;
    padding: 6px !important;
}

html[data-theme] body .hris-clean-shell .biometric-photo-event-thumb,
body .hris-clean-shell .biometric-photo-event-thumb {
    height: 64px !important;
}

html[data-theme] body .hris-clean-shell .biometric-photo-event-placeholder,
body .hris-clean-shell .biometric-photo-event-placeholder {
    min-height: 64px !important;
}

html[data-theme] body .hris-clean-shell .biometric-photo-event-meta,
body .hris-clean-shell .biometric-photo-event-meta {
    gap: 2px !important;
    max-height: 76px !important;
    overflow: auto !important;
    font-size: 10.5px !important;
    line-height: 1.22 !important;
}

@media (max-width: 900px) {
    html[data-theme] body .hris-clean-shell .biometric-photo-modal-content,
    body .hris-clean-shell .biometric-photo-modal-content {
        grid-template-columns: minmax(0, 1fr) !important;
        overflow: auto !important;
    }

    html[data-theme] body .hris-clean-shell .biometric-photo-event-thumb,
    body .hris-clean-shell .biometric-photo-event-thumb {
        height: 64px !important;
    }
}

@media (max-width: 560px) {
    html[data-theme] body .hris-clean-shell .biometric-photo-modal,
    body .hris-clean-shell .biometric-photo-modal,
    html[data-theme] body > .biometric-photo-modal,
    body > .biometric-photo-modal {
        padding: 8px !important;
    }

    html[data-theme] body .hris-clean-shell .biometric-photo-modal-dialog,
    body .hris-clean-shell .biometric-photo-modal-dialog,
    html[data-theme] body > .biometric-photo-modal .biometric-photo-modal-dialog,
    body > .biometric-photo-modal .biometric-photo-modal-dialog {
        width: calc(100vw - 16px) !important;
        max-height: calc(100dvh - 16px) !important;
    }

    html[data-theme] body .hris-clean-shell .biometric-photo-preview-image,
    body .hris-clean-shell .biometric-photo-preview-image {
        height: min(220px, 32vh) !important;
        max-height: 220px !important;
    }

    html[data-theme] body .hris-clean-shell .biometric-photo-events-grid,
    body .hris-clean-shell .biometric-photo-events-grid {
        max-height: 34vh !important;
    }

    html[data-theme] body .hris-clean-shell .biometric-photo-event-card,
    body .hris-clean-shell .biometric-photo-event-card {
        grid-template-columns: 62px minmax(0, 1fr) !important;
    }

    html[data-theme] body .hris-clean-shell .biometric-photo-event-thumb,
    body .hris-clean-shell .biometric-photo-event-thumb {
        height: 58px !important;
    }
}

/* HRIS photo audit modal final layout: preview + timeline, not stacked giant photos. */
html[data-theme] body > .biometric-photo-modal.attendance-photo-backdrop,
body > .biometric-photo-modal.attendance-photo-backdrop,
html[data-theme] body .hris-clean-shell .biometric-photo-modal.attendance-photo-backdrop,
body .hris-clean-shell .biometric-photo-modal.attendance-photo-backdrop {
    position: fixed !important;
    inset: 0 !important;
    z-index: 5000 !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100vw !important;
    height: 100dvh !important;
    padding: 24px !important;
    background: rgba(15, 23, 42, 0.58) !important;
    opacity: 0 !important;
    overflow: hidden !important;
}

html[data-theme] body > .biometric-photo-modal.attendance-photo-backdrop.is-open,
body > .biometric-photo-modal.attendance-photo-backdrop.is-open,
html[data-theme] body .hris-clean-shell .biometric-photo-modal.attendance-photo-backdrop.is-open,
body .hris-clean-shell .biometric-photo-modal.attendance-photo-backdrop.is-open {
    display: flex !important;
}

html[data-theme] body > .biometric-photo-modal.attendance-photo-backdrop.is-visible,
body > .biometric-photo-modal.attendance-photo-backdrop.is-visible,
html[data-theme] body .hris-clean-shell .biometric-photo-modal.attendance-photo-backdrop.is-visible,
body .hris-clean-shell .biometric-photo-modal.attendance-photo-backdrop.is-visible {
    opacity: 1 !important;
}

html[data-theme] body > .biometric-photo-modal .attendance-photo-modal,
body > .biometric-photo-modal .attendance-photo-modal,
html[data-theme] body .hris-clean-shell .biometric-photo-modal .attendance-photo-modal,
body .hris-clean-shell .biometric-photo-modal .attendance-photo-modal {
    position: relative !important;
    z-index: 1 !important;
    width: min(1080px, calc(100vw - 48px)) !important;
    max-height: calc(100dvh - 48px) !important;
    background: #ffffff !important;
    border: 1px solid #dbe3ef !important;
    border-radius: 16px !important;
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.28) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}

html[data-theme] body > .biometric-photo-modal .attendance-photo-modal-header,
body > .biometric-photo-modal .attendance-photo-modal-header,
html[data-theme] body .hris-clean-shell .biometric-photo-modal .attendance-photo-modal-header,
body .hris-clean-shell .biometric-photo-modal .attendance-photo-modal-header {
    flex: 0 0 auto !important;
    min-height: 64px !important;
    padding: 14px 18px !important;
    border-bottom: 1px solid #e2e8f0 !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 12px !important;
    background: #ffffff !important;
}

html[data-theme] body > .biometric-photo-modal .attendance-photo-modal-title,
body > .biometric-photo-modal .attendance-photo-modal-title,
html[data-theme] body .hris-clean-shell .biometric-photo-modal .attendance-photo-modal-title,
body .hris-clean-shell .biometric-photo-modal .attendance-photo-modal-title {
    margin: 0 !important;
    color: #0f172a !important;
    font-size: 18px !important;
    font-weight: 900 !important;
    line-height: 1.2 !important;
}

html[data-theme] body > .biometric-photo-modal .attendance-photo-modal-subtitle,
body > .biometric-photo-modal .attendance-photo-modal-subtitle,
html[data-theme] body .hris-clean-shell .biometric-photo-modal .attendance-photo-modal-subtitle,
body .hris-clean-shell .biometric-photo-modal .attendance-photo-modal-subtitle {
    margin: 0 !important;
    padding: 0 !important;
    color: #64748b !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
}

html[data-theme] body > .biometric-photo-modal .attendance-photo-close,
body > .biometric-photo-modal .attendance-photo-close,
html[data-theme] body .hris-clean-shell .biometric-photo-modal .attendance-photo-close,
body .hris-clean-shell .biometric-photo-modal .attendance-photo-close {
    flex: 0 0 auto !important;
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 !important;
    border: 1px solid #dbe3ef !important;
    border-radius: 9px !important;
    background: #ffffff !important;
    color: #0f172a !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 18px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    box-shadow: none !important;
}

html[data-theme] body > .biometric-photo-modal .attendance-photo-modal-body,
body > .biometric-photo-modal .attendance-photo-modal-body,
html[data-theme] body .hris-clean-shell .biometric-photo-modal .attendance-photo-modal-body,
body .hris-clean-shell .biometric-photo-modal .attendance-photo-modal-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    padding: 14px 18px 18px !important;
    overflow: auto !important;
}

html[data-theme] body > .biometric-photo-modal .attendance-photo-layout,
body > .biometric-photo-modal .attendance-photo-layout,
html[data-theme] body .hris-clean-shell .biometric-photo-modal .attendance-photo-layout,
body .hris-clean-shell .biometric-photo-modal .attendance-photo-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr) !important;
    gap: 14px !important;
    align-items: start !important;
    min-width: 0 !important;
}

html[data-theme] body > .biometric-photo-modal .attendance-photo-preview,
body > .biometric-photo-modal .attendance-photo-preview,
html[data-theme] body .hris-clean-shell .biometric-photo-modal .attendance-photo-preview,
body .hris-clean-shell .biometric-photo-modal .attendance-photo-preview {
    border: 1px solid #dbe3ef !important;
    border-radius: 14px !important;
    background: #f8fafc !important;
    overflow: hidden !important;
    padding: 0 !important;
}

html[data-theme] body > .biometric-photo-modal .attendance-photo-preview-image,
body > .biometric-photo-modal .attendance-photo-preview-image,
html[data-theme] body .hris-clean-shell .biometric-photo-modal .attendance-photo-preview-image,
body .hris-clean-shell .biometric-photo-modal .attendance-photo-preview-image {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: 420px !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    background: #0f172a !important;
    border: 0 !important;
    border-radius: 0 !important;
}

html[data-theme] body > .biometric-photo-modal .attendance-photo-preview-meta,
body > .biometric-photo-modal .attendance-photo-preview-meta,
html[data-theme] body .hris-clean-shell .biometric-photo-modal .attendance-photo-preview-meta,
body .hris-clean-shell .biometric-photo-modal .attendance-photo-preview-meta {
    padding: 10px 12px !important;
    display: grid !important;
    gap: 4px !important;
    max-height: 104px !important;
    overflow: auto !important;
    color: #475569 !important;
    font-size: 12px !important;
    line-height: 1.32 !important;
}

html[data-theme] body > .biometric-photo-modal #biometric-photo-preview-link,
body > .biometric-photo-modal #biometric-photo-preview-link,
html[data-theme] body .hris-clean-shell .biometric-photo-modal #biometric-photo-preview-link,
body .hris-clean-shell .biometric-photo-modal #biometric-photo-preview-link {
    width: 100% !important;
    min-height: 34px !important;
    padding: 0 12px !important;
    border-top: 1px solid #e2e8f0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    background: #ffffff !important;
    color: #0f2747 !important;
    font-size: 12px !important;
    font-weight: 900 !important;
}

html[data-theme] body > .biometric-photo-modal .attendance-photo-event-list,
body > .biometric-photo-modal .attendance-photo-event-list,
html[data-theme] body .hris-clean-shell .biometric-photo-modal .attendance-photo-event-list,
body .hris-clean-shell .biometric-photo-modal .attendance-photo-event-list {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    max-height: 520px !important;
    overflow: auto !important;
    padding-right: 4px !important;
}

html[data-theme] body > .biometric-photo-modal .attendance-photo-event-card,
body > .biometric-photo-modal .attendance-photo-event-card,
html[data-theme] body .hris-clean-shell .biometric-photo-modal .attendance-photo-event-card,
body .hris-clean-shell .biometric-photo-modal .attendance-photo-event-card {
    display: grid !important;
    grid-template-columns: 86px minmax(0, 1fr) !important;
    gap: 9px !important;
    align-items: start !important;
    padding: 8px !important;
    border: 1px solid #dbe3ef !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    cursor: pointer !important;
}

html[data-theme] body > .biometric-photo-modal .attendance-photo-event-card.is-active,
body > .biometric-photo-modal .attendance-photo-event-card.is-active,
html[data-theme] body .hris-clean-shell .biometric-photo-modal .attendance-photo-event-card.is-active,
body .hris-clean-shell .biometric-photo-modal .attendance-photo-event-card.is-active {
    border-color: #d6ad3b !important;
    box-shadow: 0 0 0 2px rgba(214, 173, 59, 0.16) !important;
}

html[data-theme] body > .biometric-photo-modal .attendance-photo-event-thumb,
body > .biometric-photo-modal .attendance-photo-event-thumb,
html[data-theme] body .hris-clean-shell .biometric-photo-modal .attendance-photo-event-thumb,
body .hris-clean-shell .biometric-photo-modal .attendance-photo-event-thumb {
    width: 86px !important;
    height: 64px !important;
    border-radius: 9px !important;
    object-fit: cover !important;
    background: #f1f5f9 !important;
}

html[data-theme] body > .biometric-photo-modal .attendance-photo-event-placeholder,
body > .biometric-photo-modal .attendance-photo-event-placeholder,
html[data-theme] body .hris-clean-shell .biometric-photo-modal .attendance-photo-event-placeholder,
body .hris-clean-shell .biometric-photo-modal .attendance-photo-event-placeholder {
    width: 86px !important;
    min-height: 64px !important;
    border-radius: 9px !important;
    font-size: 10.5px !important;
}

html[data-theme] body > .biometric-photo-modal .attendance-photo-event-title,
body > .biometric-photo-modal .attendance-photo-event-title,
html[data-theme] body .hris-clean-shell .biometric-photo-modal .attendance-photo-event-title,
body .hris-clean-shell .biometric-photo-modal .attendance-photo-event-title {
    display: block !important;
    color: #0f172a !important;
    font-size: 12.5px !important;
    font-weight: 900 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

html[data-theme] body > .biometric-photo-modal .attendance-photo-event-meta,
body > .biometric-photo-modal .attendance-photo-event-meta,
html[data-theme] body .hris-clean-shell .biometric-photo-modal .attendance-photo-event-meta,
body .hris-clean-shell .biometric-photo-modal .attendance-photo-event-meta {
    margin-top: 3px !important;
    display: grid !important;
    gap: 2px !important;
    max-height: none !important;
    overflow: hidden !important;
    color: #64748b !important;
    font-size: 11px !important;
    line-height: 1.24 !important;
}

html[data-theme] body > .biometric-photo-modal .attendance-photo-event-meta-row,
body > .biometric-photo-modal .attendance-photo-event-meta-row,
html[data-theme] body .hris-clean-shell .biometric-photo-modal .attendance-photo-event-meta-row,
body .hris-clean-shell .biometric-photo-modal .attendance-photo-event-meta-row {
    min-width: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

html[data-theme] body > .biometric-photo-modal .attendance-photo-event-meta-key,
body > .biometric-photo-modal .attendance-photo-event-meta-key,
html[data-theme] body .hris-clean-shell .biometric-photo-modal .attendance-photo-event-meta-key,
body .hris-clean-shell .biometric-photo-modal .attendance-photo-event-meta-key {
    color: #475569 !important;
    font-weight: 850 !important;
}

html[data-theme] body > .biometric-photo-modal .attendance-photo-modal-footer,
body > .biometric-photo-modal .attendance-photo-modal-footer,
html[data-theme] body .hris-clean-shell .biometric-photo-modal .attendance-photo-modal-footer,
body .hris-clean-shell .biometric-photo-modal .attendance-photo-modal-footer {
    flex: 0 0 auto !important;
    padding: 12px 18px 14px !important;
    border-top: 1px solid #e2e8f0 !important;
    display: flex !important;
    justify-content: flex-end !important;
    background: #ffffff !important;
}

html[data-theme] body > .biometric-photo-modal .attendance-photo-footer-close,
body > .biometric-photo-modal .attendance-photo-footer-close,
html[data-theme] body .hris-clean-shell .biometric-photo-modal .attendance-photo-footer-close,
body .hris-clean-shell .biometric-photo-modal .attendance-photo-footer-close {
    min-height: 34px !important;
    padding: 0 14px !important;
    border: 1px solid #dbe3ef !important;
    border-radius: 9px !important;
    background: #ffffff !important;
    color: #0f2747 !important;
    font-size: 12.5px !important;
    font-weight: 900 !important;
}

@media (max-width: 768px) {
    html[data-theme] body > .biometric-photo-modal.attendance-photo-backdrop,
    body > .biometric-photo-modal.attendance-photo-backdrop,
    html[data-theme] body .hris-clean-shell .biometric-photo-modal.attendance-photo-backdrop,
    body .hris-clean-shell .biometric-photo-modal.attendance-photo-backdrop {
        padding: 0 !important;
    }

    html[data-theme] body > .biometric-photo-modal .attendance-photo-modal,
    body > .biometric-photo-modal .attendance-photo-modal,
    html[data-theme] body .hris-clean-shell .biometric-photo-modal .attendance-photo-modal,
    body .hris-clean-shell .biometric-photo-modal .attendance-photo-modal {
        width: 100vw !important;
        height: 100dvh !important;
        max-height: none !important;
        border-radius: 0 !important;
    }

    html[data-theme] body > .biometric-photo-modal .attendance-photo-modal-header,
    body > .biometric-photo-modal .attendance-photo-modal-header,
    html[data-theme] body .hris-clean-shell .biometric-photo-modal .attendance-photo-modal-header,
    body .hris-clean-shell .biometric-photo-modal .attendance-photo-modal-header {
        position: sticky !important;
        top: 0 !important;
        z-index: 2 !important;
    }

    html[data-theme] body > .biometric-photo-modal .attendance-photo-layout,
    body > .biometric-photo-modal .attendance-photo-layout,
    html[data-theme] body .hris-clean-shell .biometric-photo-modal .attendance-photo-layout,
    body .hris-clean-shell .biometric-photo-modal .attendance-photo-layout {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    html[data-theme] body > .biometric-photo-modal .attendance-photo-preview-image,
    body > .biometric-photo-modal .attendance-photo-preview-image,
    html[data-theme] body .hris-clean-shell .biometric-photo-modal .attendance-photo-preview-image,
    body .hris-clean-shell .biometric-photo-modal .attendance-photo-preview-image {
        max-height: 48dvh !important;
    }

    html[data-theme] body > .biometric-photo-modal .attendance-photo-event-list,
    body > .biometric-photo-modal .attendance-photo-event-list,
    html[data-theme] body .hris-clean-shell .biometric-photo-modal .attendance-photo-event-list,
    body .hris-clean-shell .biometric-photo-modal .attendance-photo-event-list {
        max-height: none !important;
    }

    html[data-theme] body > .biometric-photo-modal .attendance-photo-event-card,
    body > .biometric-photo-modal .attendance-photo-event-card,
    html[data-theme] body .hris-clean-shell .biometric-photo-modal .attendance-photo-event-card,
    body .hris-clean-shell .biometric-photo-modal .attendance-photo-event-card {
        grid-template-columns: 72px minmax(0, 1fr) !important;
    }

    html[data-theme] body > .biometric-photo-modal .attendance-photo-event-thumb,
    body > .biometric-photo-modal .attendance-photo-event-thumb,
    html[data-theme] body .hris-clean-shell .biometric-photo-modal .attendance-photo-event-thumb,
    body .hris-clean-shell .biometric-photo-modal .attendance-photo-event-thumb,
    html[data-theme] body > .biometric-photo-modal .attendance-photo-event-placeholder,
    body > .biometric-photo-modal .attendance-photo-event-placeholder,
    html[data-theme] body .hris-clean-shell .biometric-photo-modal .attendance-photo-event-placeholder,
    body .hris-clean-shell .biometric-photo-modal .attendance-photo-event-placeholder {
        width: 72px !important;
        height: 58px !important;
        min-height: 58px !important;
    }
}

/* POS checkout success final guard: success is a neutral overlay above the active POS screen. */
html[data-theme]:has(body.pos-checkout-success-open),
html:has(body.pos-checkout-success-open),
html[data-theme] body.pos-checkout-success-open,
body.pos-checkout-success-open,
html[data-theme] body.pos-page-wide.pos-checkout-success-open,
body.pos-page-wide.pos-checkout-success-open,
html[data-theme] body.modal-open.pos-checkout-success-open,
body.modal-open.pos-checkout-success-open {
    background: #f7fafc !important;
    background-image: none !important;
    overflow: hidden !important;
}

body.pos-checkout-success-open::before,
body.pos-checkout-success-open::after,
body.pos-page-wide.pos-checkout-success-open::before,
body.pos-page-wide.pos-checkout-success-open::after,
body.pos-checkout-success-open .pos-checkout-success-modal::before,
body.pos-checkout-success-open .pos-checkout-success-modal::after,
body.pos-checkout-success-open .pos-checkout-success-backdrop::before,
body.pos-checkout-success-open .pos-checkout-success-backdrop::after,
body.pos-checkout-success-open .pos-payment-modal::before,
body.pos-checkout-success-open .pos-payment-modal::after,
body.pos-checkout-success-open .pos-payment-modal-backdrop::before,
body.pos-checkout-success-open .pos-payment-modal-backdrop::after {
    content: none !important;
    display: none !important;
    background: none !important;
    background-image: none !important;
}

html[data-theme] body.pos-checkout-success-open .pos-payment-modal,
body.pos-checkout-success-open .pos-payment-modal {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    background: transparent !important;
    background-image: none !important;
}

html[data-theme] body.pos-page-wide.pos-checkout-success-open .pos-checkout-success-modal,
body.pos-page-wide.pos-checkout-success-open .pos-checkout-success-modal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 6400 !important;
    display: grid !important;
    place-items: center !important;
    padding: 20px !important;
    background: transparent !important;
    background-image: none !important;
    isolation: isolate !important;
}

html[data-theme] body.pos-page-wide.pos-checkout-success-open .pos-checkout-success-backdrop,
body.pos-page-wide.pos-checkout-success-open .pos-checkout-success-backdrop,
html[data-theme] body.internal-clean-page-shell.pos-page-wide.pos-checkout-success-open button.pos-checkout-success-backdrop,
body.internal-clean-page-shell.pos-page-wide.pos-checkout-success-open button.pos-checkout-success-backdrop {
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    display: block !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: rgba(15, 23, 42, 0.42) !important;
    background-image: none !important;
    box-shadow: none !important;
    backdrop-filter: blur(2px) !important;
    -webkit-backdrop-filter: blur(2px) !important;
}

html[data-theme] body.pos-page-wide.pos-checkout-success-open .pos-checkout-success-window,
body.pos-page-wide.pos-checkout-success-open .pos-checkout-success-window {
    position: relative !important;
    z-index: 1 !important;
    width: min(580px, calc(100vw - 32px)) !important;
    max-height: calc(100dvh - 32px) !important;
    overflow: auto !important;
    border: 1px solid #dbe3ef !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    background-image: none !important;
    color: #0b1f3a !important;
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.22) !important;
}

html[data-theme] body.internal-clean-page-shell.pos-page-wide.pos-checkout-success-open :is(.pos-checkout-success-close, .pos-terminal-hiddentools button, .internal-shell-compat-markers > button),
body.internal-clean-page-shell.pos-page-wide.pos-checkout-success-open :is(.pos-checkout-success-close, .pos-terminal-hiddentools button, .internal-shell-compat-markers > button) {
    background: #f1f5f9 !important;
    background-image: none !important;
    border-color: #dbe3ef !important;
    color: #0f172a !important;
    box-shadow: none !important;
}

html[data-theme] body.pos-page-wide.pos-checkout-success-open :is(.layout, .main, .page-content, #posCheckoutRoot, .pos-terminal-clean.pos-ipos-refactor, .pos-ipos-window, .pos-vintage-window),
body.pos-page-wide.pos-checkout-success-open :is(.layout, .main, .page-content, #posCheckoutRoot, .pos-terminal-clean.pos-ipos-refactor, .pos-ipos-window, .pos-vintage-window) {
    background: #f7fafc !important;
    background-image: none !important;
}