:root {
    --mobile-page-padding: 12px;
    --tablet-page-padding: 16px;
    --desktop-page-padding: 18px;
    --mobile-card-radius: 14px;
    --mobile-input-height: 40px;
    --mobile-button-height: 40px;
    --tablet-sidebar-width: 240px;
    --desktop-sidebar-width: 280px;
}

html:has(body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell, .wms-module-shell, .hris-module-page-shell, .pos-sales-log-page, .career-public-body, .career-public-shell, .recruitment-shell)),
html[data-theme]:has(body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell, .wms-module-shell, .hris-module-page-shell, .pos-sales-log-page, .career-public-body, .career-public-shell, .recruitment-shell)) {
    max-width: 100%;
    overflow-x: hidden;
}

body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell, .wms-module-shell, .hris-module-page-shell, .pos-sales-log-page, .career-public-body, .career-public-shell, .recruitment-shell),
body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell, .wms-module-shell, .hris-module-page-shell, .pos-sales-log-page, .career-public-body, .career-public-shell, .recruitment-shell) :is(.layout, .main, .page-content, .internal-page, .module-shell, .internal-module-layout, .clean-module-layout, .content-panel, .internal-module-panel, .module-main, .workspace-gateway, .sales-log-page-shell, .career-candidate-shell, .career-shell) {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

body.pos-shell :is(.internal-app-topbar, .internal-shell-header, .site-header, .module-header, .internal-sidebar, .app-sidebar, .module-sidebar, .internal-base-footer, .internal-module-footer, [data-internal-base-header]) {
    display: none !important;
}

@media (min-width: 641px) and (max-width: 1024px) {
    body:is(.internal-module-shell, .internal-clean-page-shell, .wms-module-shell):not(.pos-shell) :is(.module-shell, .internal-module-layout, .clean-module-layout):not(.clean-module-layout--no-sidebar) {
        grid-template-columns: minmax(210px, var(--tablet-sidebar-width)) minmax(0, 1fr) !important;
        gap: 16px !important;
        padding-inline: var(--tablet-page-padding) !important;
    }

    body:is(.internal-module-shell, .internal-clean-page-shell, .wms-module-shell):not(.pos-shell) :is(.module-sidebar, .internal-module-nav, .information-module-nav, .info-sidebar, .clean-module-sidebar) {
        width: var(--tablet-sidebar-width) !important;
        min-width: 0 !important;
        max-width: var(--tablet-sidebar-width) !important;
    }
}

@media (max-width: 640px) {
    body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell, .wms-module-shell, .hris-module-page-shell):not(.pos-shell) {
        overflow-x: hidden !important;
    }

    body:is(.internal-module-shell, .internal-clean-page-shell, .wms-module-shell, .hris-module-page-shell):not(.pos-shell) :is(.main, .page-content) {
        width: 100% !important;
        padding-inline: 0 !important;
    }

    body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell, .wms-module-shell, .hris-module-page-shell):not(.pos-shell) :is(.internal-app-topbar.internal-shell-header, .site-header.internal-app-topbar.internal-shell-header, .module-header.internal-shell-header, [data-internal-base-header]) {
        min-height: 58px !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 8px !important;
        padding: 8px 10px !important;
    }

    body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell, .wms-module-shell, .hris-module-page-shell):not(.pos-shell) :is(.header-center-logo, .internal-header-center, .internal-shell-logo) {
        display: none !important;
    }

    body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell, .wms-module-shell, .hris-module-page-shell):not(.pos-shell) .internal-shell-brand {
        min-width: 0 !important;
        gap: 6px !important;
        overflow: hidden !important;
    }

    body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell, .wms-module-shell, .hris-module-page-shell):not(.pos-shell) :is(.internal-brand-chip, .internal-homebase-chip, .internal-ai-button, .notification-button.internal-icon-button, .profile-button.internal-user-pill) {
        min-height: var(--mobile-button-height) !important;
        height: var(--mobile-button-height) !important;
        border-radius: 13px !important;
        font-size: 12px !important;
    }

    body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell, .wms-module-shell, .hris-module-page-shell):not(.pos-shell) .internal-brand-chip {
        max-width: 84px !important;
        padding-inline: 11px !important;
    }

    body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell, .wms-module-shell, .hris-module-page-shell):not(.pos-shell) .internal-homebase-chip {
        max-width: 98px !important;
        padding-inline: 11px !important;
    }

    body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell, .wms-module-shell, .hris-module-page-shell):not(.pos-shell) .internal-shell-header-actions {
        flex: 0 0 auto !important;
        max-width: 140px !important;
        gap: 6px !important;
    }

    body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell, .wms-module-shell, .hris-module-page-shell):not(.pos-shell) .internal-ai-button .full-label,
    body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell, .wms-module-shell, .hris-module-page-shell):not(.pos-shell) .internal-homebase-chip .full-label,
    body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell, .wms-module-shell, .hris-module-page-shell):not(.pos-shell) .profile-button.internal-user-pill :is(.profile-name, .user-name, .dropdown-icon) {
        display: none !important;
    }

    body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell, .wms-module-shell, .hris-module-page-shell):not(.pos-shell) .internal-ai-button .short-label,
    body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell, .wms-module-shell, .hris-module-page-shell):not(.pos-shell) .internal-homebase-chip .short-label {
        display: inline !important;
    }

    body:is(.internal-module-shell, .internal-clean-page-shell, .wms-module-shell, .hris-module-page-shell):not(.pos-shell) :is(.module-shell, .shell-with-sidebar, .internal-module-layout, .clean-module-layout):not(.clean-module-layout--no-sidebar) {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        width: 100% !important;
        padding: var(--mobile-page-padding) !important;
        margin-inline: 0 !important;
    }

    body:is(.internal-module-shell, .internal-clean-page-shell, .wms-module-shell, .hris-module-page-shell):not(.pos-shell) :is(.module-sidebar, .internal-sidebar, .app-sidebar, .clean-module-sidebar, .internal-module-nav, .information-module-nav, .info-sidebar) {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        max-height: 310px !important;
        margin: 0 !important;
        border-radius: var(--mobile-card-radius) !important;
        overflow: hidden auto !important;
    }

    body:is(.internal-module-shell, .internal-clean-page-shell, .wms-module-shell, .hris-module-page-shell):not(.pos-shell) :is(.module-sidebar-nav, .sidebar-menu, .hris-module-grid) {
        display: flex !important;
        gap: 8px !important;
        max-height: none !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        padding: 10px !important;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
    }

    body:is(.internal-module-shell, .internal-clean-page-shell, .wms-module-shell, .hris-module-page-shell):not(.pos-shell) :is(.module-sidebar-link, .sidebar-link, .hris-module-card) {
        flex: 0 0 auto !important;
        min-height: 40px !important;
        min-width: max-content !important;
        max-width: 220px !important;
        padding: 8px 12px !important;
        white-space: nowrap !important;
        scroll-snap-align: start;
    }

    body:is(.internal-module-shell, .internal-clean-page-shell, .wms-module-shell, .hris-module-page-shell):not(.pos-shell) :is(.module-main, .module-content-card, .module-landing-card, .content-panel, .internal-module-panel, .information-panel, .clean-content-panel) {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 14px !important;
        border-radius: var(--mobile-card-radius) !important;
    }

    body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell, .wms-module-shell):not(.pos-shell) :is(.internal-base-footer, .internal-module-footer) {
        position: static !important;
        min-height: 32px !important;
        padding: 8px 12px !important;
        text-align: center !important;
        white-space: normal !important;
    }
}

@media (max-width: 640px) {
    body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell, .wms-module-shell, .hris-module-page-shell, .pos-sales-log-page, .career-public-shell, .recruitment-shell) :is(.filter-grid, .page-filter-grid, .sales-log-filter-grid, .wms-filter-grid, .form-grid, .field-grid, .input-grid, .toolbar-grid, .stock-toolbar-grid, .attendance-filter-grid) {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell, .wms-module-shell, .hris-module-page-shell, .pos-sales-log-page, .career-public-shell, .recruitment-shell) :is(.filter-actions, .page-filter-actions, .sales-log-filter-actions, .form-actions, .toolbar-actions, .action-row, .button-row) {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        width: 100% !important;
    }

    body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell, .wms-module-shell, .hris-module-page-shell, .pos-sales-log-page, .career-public-shell, .recruitment-shell) :is(input, select, textarea, .pill-select, .filter-input, .filter-select, .sales-log-filter-input, .sales-log-filter-select, .form-control) {
        min-height: var(--mobile-input-height) !important;
        max-width: 100% !important;
        width: 100% !important;
        font-size: 14px !important;
        box-sizing: border-box !important;
    }

    body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell, .wms-module-shell, .hris-module-page-shell, .pos-sales-log-page, .career-public-shell, .recruitment-shell) :is(button, .button, .btn, .ghost-button, .primary-button, .secondary-button, .sales-log-filter-submit, .sales-log-reset-btn, .filter-button) {
        min-height: 38px;
        max-width: 100%;
        white-space: normal;
    }

    body:is(.internal-module-shell, .internal-clean-page-shell, .wms-module-shell, .hris-module-page-shell, .pos-sales-log-page) :is(.table-scroll, .table-responsive, .table-box, .sales-log-table-wrap, .stock-table-wrap, .audit-table-wrap, .approval-table-wrap, .schedule-table-wrap, .table-container) {
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-inline: contain;
    }

    body:is(.internal-module-shell, .internal-clean-page-shell, .wms-module-shell, .hris-module-page-shell, .pos-sales-log-page) :is(.table-scroll, .table-responsive, .sales-log-table-wrap, .stock-table-wrap, .audit-table-wrap, .approval-table-wrap, .schedule-table-wrap)::before {
        content: "Geser tabel bila perlu";
        display: inline-flex;
        margin: 0 0 8px;
        padding: 5px 9px;
        border: 1px solid #dbe3ef;
        border-radius: 999px;
        background: #f8fafc;
        color: #64748b;
        font-size: 11px;
        font-weight: 800;
    }

    body:is(.internal-module-shell, .internal-clean-page-shell, .wms-module-shell, .hris-module-page-shell, .pos-sales-log-page) :is(table) {
        width: 100% !important;
        max-width: 100% !important;
    }

    body:is(.pos-sales-log-page, .hris-module-page-shell, .wms-module-shell, .internal-clean-page-shell) :is(.sales-log-table, .approval-queue-table, .audit-log-table, .ops-queue-table, .stock-opname-table) thead {
        display: none !important;
    }

    body:is(.pos-sales-log-page, .hris-module-page-shell, .wms-module-shell, .internal-clean-page-shell) :is(.sales-log-table, .approval-queue-table, .audit-log-table, .ops-queue-table, .stock-opname-table),
    body:is(.pos-sales-log-page, .hris-module-page-shell, .wms-module-shell, .internal-clean-page-shell) :is(.sales-log-table, .approval-queue-table, .audit-log-table, .ops-queue-table, .stock-opname-table) tbody,
    body:is(.pos-sales-log-page, .hris-module-page-shell, .wms-module-shell, .internal-clean-page-shell) :is(.sales-log-table, .approval-queue-table, .audit-log-table, .ops-queue-table, .stock-opname-table) tr,
    body:is(.pos-sales-log-page, .hris-module-page-shell, .wms-module-shell, .internal-clean-page-shell) :is(.sales-log-table, .approval-queue-table, .audit-log-table, .ops-queue-table, .stock-opname-table) td {
        display: block !important;
        width: 100% !important;
    }

    body:is(.pos-sales-log-page, .hris-module-page-shell, .wms-module-shell, .internal-clean-page-shell) :is(.sales-log-table, .approval-queue-table, .audit-log-table, .ops-queue-table, .stock-opname-table) tr {
        margin: 0 0 10px !important;
        padding: 12px !important;
        border: 1px solid #dbe3ef !important;
        border-radius: 12px !important;
        background: #ffffff !important;
        box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05) !important;
    }

    body:is(.pos-sales-log-page, .hris-module-page-shell, .wms-module-shell, .internal-clean-page-shell) :is(.sales-log-table, .approval-queue-table, .audit-log-table, .ops-queue-table, .stock-opname-table) td {
        min-height: 0 !important;
        padding: 8px 0 !important;
        border: 0 !important;
        text-align: left !important;
        white-space: normal !important;
    }

    body:is(.pos-sales-log-page, .hris-module-page-shell, .wms-module-shell, .internal-clean-page-shell) :is(.sales-log-table, .approval-queue-table, .audit-log-table, .ops-queue-table, .stock-opname-table) td[data-label]::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 3px;
        color: #64748b;
        font-size: 11px;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }
}

@media (min-width: 641px) and (max-width: 1024px) {
    body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell, .wms-module-shell, .hris-module-page-shell, .pos-sales-log-page, .career-public-shell, .recruitment-shell) :is(.filter-grid, .page-filter-grid, .sales-log-filter-grid, .wms-filter-grid, .form-grid, .field-grid, .input-grid, .toolbar-grid) {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }

    body:is(.internal-module-shell, .internal-clean-page-shell, .wms-module-shell, .hris-module-page-shell, .pos-sales-log-page) :is(.table-scroll, .table-responsive, .table-box, .sales-log-table-wrap, .stock-table-wrap, .audit-table-wrap, .approval-table-wrap, .schedule-table-wrap, .table-container) {
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 640px) {
    body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell, .wms-module-shell, .hris-module-page-shell, .pos-sales-log-page, .career-public-shell, .recruitment-shell) :is(.app-modal, .modal-dialog, .shell-modal, .app-modal-dialog, .modal-window, .drawer-panel) {
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }

    body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell, .wms-module-shell, .hris-module-page-shell, .pos-sales-log-page, .career-public-shell, .recruitment-shell) :is(.modal-header, .app-modal-header, .drawer-header) {
        position: sticky !important;
        top: 0 !important;
        z-index: 2 !important;
        background: #ffffff !important;
    }

    body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell, .wms-module-shell, .hris-module-page-shell, .pos-sales-log-page, .career-public-shell, .recruitment-shell) :is(.modal-footer, .app-modal-footer, .drawer-footer) {
        position: sticky !important;
        bottom: 0 !important;
        z-index: 2 !important;
        background: #ffffff !important;
    }

    body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell, .wms-module-shell, .hris-module-page-shell, .pos-sales-log-page, .career-public-shell, .recruitment-shell) :is(.tab-strip, .module-tab-strip, .mobile-tab-strip, .tabs, .nav-tabs, .career-profile-section-nav, .category-brand-tabs, .notification-tabs) {
        display: flex !important;
        gap: 6px !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        padding-bottom: 5px !important;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
    }

    body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell, .wms-module-shell, .hris-module-page-shell, .pos-sales-log-page, .career-public-shell, .recruitment-shell) :is(.tab-strip > *, .module-tab-strip > *, .mobile-tab-strip > *, .tabs > *, .nav-tabs > *, .career-profile-section-nav > *, .category-brand-tabs > *, .notification-tabs > *) {
        flex: 0 0 auto !important;
        min-height: 34px !important;
        white-space: nowrap !important;
        scroll-snap-align: start;
    }
}

@media (max-width: 640px) {
    body.internal-portal-shell .workspace-gateway.internal-portal-home {
        width: 100% !important;
        padding: 14px var(--mobile-page-padding) 22px !important;
    }

    body.internal-portal-shell .internal-hero-section {
        min-height: 0 !important;
        padding: 14px 0 8px !important;
        gap: 12px !important;
    }

    body.internal-portal-shell .internal-welcome-copy h1 {
        font-size: clamp(30px, 11vw, 42px) !important;
        line-height: 1.04 !important;
    }

    body.internal-portal-shell .internal-search-wrap {
        min-height: 42px !important;
        margin-bottom: 4px !important;
    }

    body.internal-portal-shell :is(.internal-status-grid, .internal-app-grid, .summary-grid, .app-grid) {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    body.internal-portal-shell :is(.internal-status-card, .internal-app-card, .summary-card, .app-card) {
        min-height: 0 !important;
        padding: 14px !important;
        border-radius: var(--mobile-card-radius) !important;
    }

    body.hris-module-page-shell .module-page-header {
        display: grid !important;
        gap: 10px !important;
    }

    body.hris-module-page-shell .module-page-title {
        font-size: clamp(26px, 9vw, 34px) !important;
    }

    body.hris-module-page-shell :is(.attendance-photo-modal, .biometric-photo-modal, .hris-photo-modal) {
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        border-radius: 0 !important;
    }

    body.pos-sales-log-page .sales-log-page-shell {
        padding: 10px !important;
    }

    body.pos-sales-log-page .sales-log-header,
    body.pos-sales-log-page .sales-log-table-header {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    body.pos-sales-log-page .sales-log-kpi-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    body.pos-sales-log-page .sales-log-kpi-value,
    body.pos-sales-log-page .sales-log-money {
        word-break: keep-all !important;
        white-space: nowrap !important;
        font-size: clamp(14px, 4vw, 18px) !important;
    }
}

@media (max-width: 640px) {
    body.pos-shell .pos-page {
        min-width: 0 !important;
        width: 100% !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        overflow: hidden !important;
    }

    body.pos-shell :is(.pos-ipos-topbar, .pos-topbar) {
        min-height: 42px !important;
        gap: 6px !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
    }

    body.pos-shell :is(.pos-customer-panel, .pos-customer-row, .pos-scan-row, .pos-total-row, .pos-payment-grid) {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    body.pos-shell :is(.cart-panel, .pos-cart-panel, .pos-transaction-info) {
        min-width: 0 !important;
        max-width: 100% !important;
        overflow: hidden auto !important;
    }

    body.pos-shell :is(.cart-table-wrap, .pos-cart-table-wrap) {
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    body.pos-shell :is(.pos-action-bar, .pos-ipos-action-bar) {
        display: flex !important;
        gap: 6px !important;
        overflow-x: auto !important;
        padding: 6px 8px !important;
        -webkit-overflow-scrolling: touch;
    }

    body.pos-shell :is(.pos-action-bar, .pos-ipos-action-bar) > * {
        flex: 0 0 auto !important;
        min-height: 40px !important;
    }
}

@media (min-width: 641px) and (max-width: 1024px) {
    body.internal-portal-shell .workspace-gateway.internal-portal-home {
        width: 100% !important;
        padding-inline: var(--tablet-page-padding) !important;
    }

    body.internal-portal-shell :is(.internal-status-grid, .summary-grid) {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    body.internal-portal-shell :is(.internal-app-grid, .app-grid) {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (min-width: 641px) and (max-width: 1024px) {
    html[data-theme] body:is(.internal-module-shell, .internal-clean-page-shell, .wms-module-shell, .hris-module-page-shell):not(.pos-shell) :is(.internal-module-layout.module-shell, .module-layout.module-shell, .clean-module-layout):not(.clean-module-layout--no-sidebar):not(.internal-module-layout--hub),
    body:is(.internal-module-shell, .internal-clean-page-shell, .wms-module-shell, .hris-module-page-shell):not(.pos-shell) :is(.internal-module-layout.module-shell, .module-layout.module-shell, .clean-module-layout):not(.clean-module-layout--no-sidebar):not(.internal-module-layout--hub) {
        display: grid !important;
        grid-template-columns: minmax(220px, var(--tablet-sidebar-width)) minmax(0, 1fr) !important;
        align-items: start !important;
        gap: 16px !important;
        width: 100% !important;
        max-width: 100% !important;
        padding-inline: var(--tablet-page-padding) !important;
    }

    html[data-theme] body:is(.internal-module-shell, .internal-clean-page-shell, .wms-module-shell, .hris-module-page-shell):not(.pos-shell) :is(.module-sidebar, .internal-sidebar, .app-sidebar, .clean-module-sidebar, .internal-module-nav, .information-module-nav, .info-sidebar),
    body:is(.internal-module-shell, .internal-clean-page-shell, .wms-module-shell, .hris-module-page-shell):not(.pos-shell) :is(.module-sidebar, .internal-sidebar, .app-sidebar, .clean-module-sidebar, .internal-module-nav, .information-module-nav, .info-sidebar) {
        width: var(--tablet-sidebar-width) !important;
        min-width: 0 !important;
        max-width: var(--tablet-sidebar-width) !important;
        margin-inline: 0 !important;
    }

    html[data-theme] body:is(.internal-module-shell, .internal-clean-page-shell, .wms-module-shell, .hris-module-page-shell):not(.pos-shell) :is(.module-main, .module-content-card, .module-landing-card, .content-panel, .internal-module-panel, .information-panel, .clean-content-panel),
    body:is(.internal-module-shell, .internal-clean-page-shell, .wms-module-shell, .hris-module-page-shell):not(.pos-shell) :is(.module-main, .module-content-card, .module-landing-card, .content-panel, .internal-module-panel, .information-panel, .clean-content-panel) {
        min-width: 0 !important;
        max-width: 100% !important;
    }
}

@media (max-width: 1024px) {
    body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell, .wms-module-shell, .hris-module-page-shell, .pos-sales-log-page, .career-public-shell, .recruitment-shell, .pos-shell) :is(button, .button, .btn, .ghost-button, .primary-button, .secondary-button, .sales-log-filter-submit, .sales-log-reset-btn, .filter-button, a[role="button"]) {
        min-height: 38px !important;
        max-width: 100% !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        white-space: normal !important;
    }

    body.pos-shell :is(.pos-ipos-close, .pos-vintage-mini),
    body.wms-input-item-shell :is(.taxonomy-quick-create-btn.add-master-btn, .ghost-button.taxonomy-quick-create-btn),
    body.stock-opname-page-shell :is(button.ghost-button, .so-save-btn) {
        min-height: 38px !important;
        height: auto !important;
        padding-top: 8px !important;
        padding-bottom: 8px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}

@media (min-width: 641px) and (max-width: 1024px) {
    html[data-theme] body.app-tablet-surface.internal-module-shell.internal-module-shell:not(.pos-shell) .internal-module-layout.module-layout.module-shell,
    body.app-tablet-surface.internal-module-shell.internal-module-shell:not(.pos-shell) .internal-module-layout.module-layout.module-shell,
    html[data-theme] body.app-tablet-surface.internal-clean-page-shell.wms-module-shell.wms-module-shell:not(.pos-shell) .internal-module-layout.module-layout.clean-module-layout,
    body.app-tablet-surface.internal-clean-page-shell.wms-module-shell.wms-module-shell:not(.pos-shell) .internal-module-layout.module-layout.clean-module-layout,
    html[data-theme] body.app-tablet-surface.hris-module-page-shell.hris-module-page-shell:not(.pos-shell) .internal-module-layout.module-layout.hris-module-shell.module-shell,
    body.app-tablet-surface.hris-module-page-shell.hris-module-page-shell:not(.pos-shell) .internal-module-layout.module-layout.hris-module-shell.module-shell {
        display: grid !important;
        grid-template-columns: var(--tablet-sidebar-width) minmax(0, 1fr) !important;
        gap: 16px !important;
        align-items: start !important;
        max-width: 100% !important;
    }

    html[data-theme] body.app-tablet-surface:is(.internal-module-shell, .internal-clean-page-shell, .wms-module-shell, .hris-module-page-shell):not(.pos-shell) aside:is(.module-sidebar, .internal-module-nav, .information-module-nav, .info-sidebar, .clean-module-sidebar),
    body.app-tablet-surface:is(.internal-module-shell, .internal-clean-page-shell, .wms-module-shell, .hris-module-page-shell):not(.pos-shell) aside:is(.module-sidebar, .internal-module-nav, .information-module-nav, .info-sidebar, .clean-module-sidebar) {
        width: var(--tablet-sidebar-width) !important;
        min-width: var(--tablet-sidebar-width) !important;
        max-width: var(--tablet-sidebar-width) !important;
        flex: 0 0 var(--tablet-sidebar-width) !important;
    }
}
/* Final scoped tablet guard: HRIS content must not create body horizontal scroll. */
@media (min-width: 641px) and (max-width: 1024px) {
    body.hris-module-page-shell .page-content.hris-clean-shell,
    body.hris-module-page-shell .hris-module-page {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
        padding-inline: 0 !important;
    }

    body.hris-module-page-shell :is(
        .internal-module-layout.hris-module-shell,
        .internal-module-layout.schedule-hris-layout
    ) {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        grid-template-columns: var(--tablet-sidebar-width) minmax(0, 1fr) !important;
        gap: 16px !important;
        padding-inline: var(--tablet-page-padding) !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }

    body.hris-module-page-shell :is(
        .internal-module-nav,
        .information-module-nav,
        .module-sidebar
    ) {
        width: var(--tablet-sidebar-width) !important;
        min-width: 0 !important;
        max-width: var(--tablet-sidebar-width) !important;
        box-sizing: border-box !important;
    }

    body.hris-module-page-shell :is(
        .internal-module-panel,
        .information-panel,
        .content-panel,
        .module-main,
        .module-content-card,
        .module-page-header,
        .table-box,
        .cards,
        .metrics-grid,
        .hris-grid
    ) {
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    body.hris-module-page-shell .module-sidebar :is(
        .information-sidebar-card,
        .hris-module-disclosure,
        .hris-module-summary,
        .hris-module-summary-body,
        .sidebar-menu,
        .hris-module-grid
    ) {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }

    body.hris-module-page-shell .module-sidebar .hris-module-grid.sidebar-menu {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-auto-flow: row !important;
        grid-auto-columns: minmax(0, 1fr) !important;
        gap: 6px !important;
    }

    html[data-theme] body.internal-module-shell.hris-module-page-shell .page-content.hris-clean-shell .info-sidebar.module-sidebar .hris-module-grid.sidebar-menu,
    body.internal-module-shell.hris-module-page-shell .page-content.hris-clean-shell .info-sidebar.module-sidebar .hris-module-grid.sidebar-menu {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-auto-flow: row !important;
        grid-auto-columns: minmax(0, 1fr) !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow-x: hidden !important;
    }

    body.hris-module-page-shell .module-sidebar :is(.hris-module-card, .sidebar-link) {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    body.hris-module-page-shell .module-content-card :is(
        input:not([type="checkbox"]):not([type="radio"]),
        select,
        textarea,
        button,
        .button,
        .btn,
        .ghost-button
    ) {
        min-height: 40px !important;
    }

    html[data-theme] body.internal-module-shell.hris-module-page-shell .module-content-card :is(
        input:not([type="checkbox"]):not([type="radio"]),
        select,
        textarea
    ),
    body.internal-module-shell.hris-module-page-shell .module-content-card :is(
        input:not([type="checkbox"]):not([type="radio"]),
        select,
        textarea
    ) {
        height: 40px !important;
        min-height: 40px !important;
    }

    body.hris-module-page-shell .hris-dashboard-schedule-wrap {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        contain: paint !important;
    }

    body.hris-module-page-shell table.hris-dashboard-schedule {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        table-layout: fixed !important;
    }

    body.hris-module-page-shell table.hris-dashboard-schedule :is(th, td) {
        min-width: 0 !important;
        max-width: 12ch !important;
        overflow-wrap: anywhere !important;
        white-space: normal !important;
    }

    body.hris-module-page-shell .schedule-filter-bar {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    html[data-theme] body.internal-module-shell.hris-module-page-shell .module-content-card form.top-bar.schedule-filter-bar,
    body.internal-module-shell.hris-module-page-shell .module-content-card form.top-bar.schedule-filter-bar {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    body.hris-module-page-shell .schedule-filter-bar > * {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    html[data-theme] body.internal-module-shell.hris-module-page-shell .module-content-card form.top-bar.schedule-filter-bar > *,
    body.internal-module-shell.hris-module-page-shell .module-content-card form.top-bar.schedule-filter-bar > * {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
}

/* Final scoped tap-target guard for compact operational controls. */
@media (max-width: 1024px) {
    html[data-theme] body:is(
        .internal-portal-shell,
        .internal-module-shell,
        .internal-clean-page-shell,
        .wms-module-shell,
        .hris-module-page-shell,
        .pos-sales-log-page,
        .career-public-shell,
        .recruitment-shell
    ):not(.pos-shell) main :is(
        input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
        select,
        textarea
    ),
    body:is(
        .internal-portal-shell,
        .internal-module-shell,
        .internal-clean-page-shell,
        .wms-module-shell,
        .hris-module-page-shell,
        .pos-sales-log-page,
        .career-public-shell,
        .recruitment-shell
    ):not(.pos-shell) main :is(
        input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
        select,
        textarea
    ) {
        height: 38px !important;
        min-height: 38px !important;
        box-sizing: border-box !important;
    }

    html[data-theme] body:is(
        .internal-portal-shell,
        .internal-module-shell,
        .internal-clean-page-shell,
        .wms-module-shell,
        .hris-module-page-shell,
        .pos-sales-log-page,
        .career-public-shell,
        .recruitment-shell
    ):not(.pos-shell) main :is(
        button,
        a.btn-link,
        .button,
        .btn,
        .ghost-button,
        [role="button"]
    ),
    body:is(
        .internal-portal-shell,
        .internal-module-shell,
        .internal-clean-page-shell,
        .wms-module-shell,
        .hris-module-page-shell,
        .pos-sales-log-page,
        .career-public-shell,
        .recruitment-shell
    ):not(.pos-shell) main :is(
        button,
        a.btn-link,
        .button,
        .btn,
        .ghost-button,
        [role="button"]
    ) {
        min-width: 38px !important;
        min-height: 38px !important;
        height: auto !important;
        box-sizing: border-box !important;
    }

    body.browser-mode.internal-clean-page-shell.pos-clean-shell.pos-shell.pos-page-wide :is(
        button.pos-ipos-close,
        button.pos-vintage-mini,
        button.pos-ipos-quickbar-action
    ),
    body.wms-input-item-shell.wms-input-item-shell :is(
        button.taxonomy-quick-create-btn.add-master-btn,
        button.ghost-button.taxonomy-quick-create-btn.add-master-btn,
        .wms-taxonomy-combobox-toggle,
        input:not([type="checkbox"]):not([type="radio"]),
        select,
        textarea,
        .wms-currency-field
    ),
    body.stock-opname-page-shell.stock-opname-page-shell :is(
        button.ghost-button,
        button.so-save-btn,
        a.btn-link,
        select,
        input:not([type="checkbox"]):not([type="radio"])
    ) {
        min-height: 38px !important;
        height: 38px !important;
        padding-top: 8px !important;
        padding-bottom: 8px !important;
        line-height: 1.1 !important;
        touch-action: manipulation !important;
    }

    html[data-theme] body.pos-page-wide.pos-shell #posCheckoutRoot .pos-terminal-clean.pos-ipos-refactor :is(
        .pos-ipos-close,
        .pos-vintage-mini,
        .pos-ipos-quickbar-action
    ),
    body.pos-page-wide.pos-shell #posCheckoutRoot .pos-terminal-clean.pos-ipos-refactor :is(
        .pos-ipos-close,
        .pos-vintage-mini,
        .pos-ipos-quickbar-action
    ) {
        height: 38px !important;
        min-height: 38px !important;
        padding-top: 8px !important;
        padding-bottom: 8px !important;
        line-height: 1.1 !important;
        box-sizing: border-box !important;
    }

    html[data-theme] body.pos-page-wide.pos-shell #posCheckoutRoot :is(
        .pos-ipos-close,
        .pos-vintage-mini,
        .pos-ipos-quickbar-action
    ),
    body.pos-page-wide.pos-shell #posCheckoutRoot :is(
        .pos-ipos-close,
        .pos-vintage-mini,
        .pos-ipos-quickbar-action
    ) {
        height: 38px !important;
        min-height: 38px !important;
        padding-top: 8px !important;
        padding-bottom: 8px !important;
        line-height: 1.1 !important;
        box-sizing: border-box !important;
    }

    html[data-theme] body.pos-page-wide.pos-shell #posCheckoutRoot :is(
        input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
        select,
        textarea,
        .pos-meta-pill-value
    ),
    body.pos-page-wide.pos-shell #posCheckoutRoot :is(
        input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
        select,
        textarea,
        .pos-meta-pill-value
    ) {
        height: 38px !important;
        min-height: 38px !important;
        padding-top: 7px !important;
        padding-bottom: 7px !important;
        line-height: 1.1 !important;
        box-sizing: border-box !important;
    }

    body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell, .wms-module-shell, .pos-sales-log-page):not(.pos-shell) .internal-app-topbar :is(
        .internal-icon-button,
        .notification-button,
        .profile-button,
        .internal-user-pill,
        .internal-ai-button
    ) {
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;
    }

    html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell, .wms-module-shell, .pos-sales-log-page):not(.pos-shell) .internal-app-topbar :is(
        .notification-button.internal-icon-button,
        .profile-button.internal-user-pill
    ),
    body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell, .wms-module-shell, .pos-sales-log-page):not(.pos-shell) .internal-app-topbar :is(
        .notification-button.internal-icon-button,
        .profile-button.internal-user-pill
    ) {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;
    }

    html[data-theme] body:is(.internal-portal-shell, .internal-module-shell, .internal-clean-page-shell, .wms-module-shell, .pos-sales-log-page):not(.ai-assistant-shell):not(.pos-clean-shell):not(.pos-shell) [data-internal-base-header].internal-app-topbar.internal-shell-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, .wms-module-shell, .pos-sales-log-page):not(.ai-assistant-shell):not(.pos-clean-shell):not(.pos-shell) [data-internal-base-header].internal-app-topbar.internal-shell-header :is(
        .internal-ai-button,
        .notification-button.internal-icon-button,
        .profile-button.internal-user-pill
    ) {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;
        padding: 3px !important;
        box-sizing: border-box !important;
    }

    html[data-theme] body.internal-clean-page-shell.pos-clean-shell.pos-sales-log-page:not(.pos-shell) [data-internal-base-header].internal-app-topbar.internal-shell-header :is(
        .internal-ai-button,
        .notification-button.internal-icon-button,
        .profile-button.internal-user-pill
    ),
    body.internal-clean-page-shell.pos-clean-shell.pos-sales-log-page:not(.pos-shell) [data-internal-base-header].internal-app-topbar.internal-shell-header :is(
        .internal-ai-button,
        .notification-button.internal-icon-button,
        .profile-button.internal-user-pill
    ) {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;
        padding: 3px !important;
        box-sizing: border-box !important;
    }

    body.wms-input-item-shell .wms-taxonomy-combobox-input {
        min-width: 120px !important;
    }

    html[data-theme] body.wms-input-item-shell.wms-module-shell .wms-taxonomy-combobox .wms-taxonomy-combobox-input,
    body.wms-input-item-shell.wms-module-shell .wms-taxonomy-combobox .wms-taxonomy-combobox-input {
        width: calc(100% - 42px) !important;
        min-width: 120px !important;
        flex: 1 1 120px !important;
    }

    html[data-theme] body.wms-stock-dashboard-shell.wms-module-shell :is(
        input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
        select,
        button.zip-filter-submit,
        button.stock-filter-chip
    ),
    body.wms-stock-dashboard-shell.wms-module-shell :is(
        input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
        select,
        button.zip-filter-submit,
        button.stock-filter-chip
    ) {
        height: 38px !important;
        min-height: 38px !important;
        box-sizing: border-box !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:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
        select,
        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:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
        select,
        button,
        a.button-secondary
    ),
    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 :is(
        button.stock-filter-chip,
        button.zip-filter-submit
    ),
    body.browser-mode.internal-clean-page-shell.wms-refactor-shell.wms-module-shell.wms-stock-reference-shell.wms-stock-inventory-shell .stock-page-v2 :is(
        button.stock-filter-chip,
        button.zip-filter-submit
    ) {
        height: 38px !important;
        min-height: 38px !important;
        padding-top: 7px !important;
        padding-bottom: 7px !important;
        box-sizing: border-box !important;
    }

    body.wms-module-shell :is(.ops-picker-button.request-picker-button, .request-picker-button) {
        min-width: 96px !important;
    }

    body.stock-opname-page-shell.stock-opname-page-shell :is(button.ghost-button, button.so-save-btn) {
        min-width: 38px !important;
    }

    body.pos-shell.pos-shell .pos-meta-pill-value {
        min-height: 32px !important;
    }

    body.stock-opname-page-shell.stock-opname-page-shell input.physical_area {
        min-width: 56px !important;
        text-align: center !important;
    }
}