:root {
                --page-bg: var(--bg-page);
                --surface: var(--bg-surface);
                --slate-900: var(--text-primary);
                --slate-800: var(--text-primary);
                --slate-700: var(--text-secondary);
                --slate-600: var(--text-secondary);
                --slate-500: var(--text-muted);
                --slate-300: var(--border-strong);
                --slate-200: var(--border-default);
                --indigo-900: var(--bg-header-end);
                --indigo-800: var(--bg-header-start);
                --indigo-700: #4338ca;
                --indigo-200: #c7d2fe;
                /*
                 * Shared overlay stack for the Nestiko shell.
                 * Goal: right drawers / filter panels / portaled popups must always sit above page header/content.
                 */
                --nk-z-header: 10065;
                --nk-z-overlay-backdrop: 10120;
                --nk-z-overlay-controls: 10125;
                --nk-z-overlay-panel: 10130;
                --nk-z-overlay-portaled: 10131;
                --nk-z-global-search: 10132;
                --nk-z-modal-backdrop: 10139;
                --nk-z-modal: 10140;
                --nk-z-datepicker: 10160;
            }

            * {
                box-sizing: border-box;
            }

            body.app-body {
                margin: 0;
                font-family: Figtree, sans-serif;
                background: var(--page-bg);
                color: var(--slate-900);
                -webkit-font-smoothing: antialiased;
                -moz-osx-font-smoothing: grayscale;
            }

            /**
             * Shell: row (sidebar | resizer | main). The purple header sits only above
             * the main column so the sidebar spans full viewport height.
             */
            .app-shell {
                min-height: 100vh;
                display: flex;
                flex-direction: column;
            }

            .app-shell-body {
                display: flex;
                flex-direction: row;
                flex: 1 1 auto;
                min-height: 0;
                min-width: 0;
            }

            .app-sidebar-column {
                flex: 0 0 var(--app-sidebar-width, 296px);
                width: var(--app-sidebar-width, 296px);
                min-width: var(--app-sidebar-width, 296px);
                max-width: var(--app-sidebar-width, 296px);
                min-height: 0;
                align-self: stretch;
                position: relative;
                z-index: 30;
                overflow: visible;
                transition: min-width 0.2s ease, max-width 0.2s ease, width 0.2s ease, flex-basis 0.2s ease;
            }

            .app-sidebar-column.is-mini {
                overflow: visible;
            }

            /* Mini rail flyout must stack above the resizer line (resizer z-index: 35). */
            .app-sidebar-column.is-mini:hover {
                z-index: 45;
            }

            .app-shell.is-resizing-sidebar .app-sidebar-column {
                transition: none;
            }

            .app-shell.is-resizing-sidebar {
                cursor: col-resize;
                user-select: none;
            }

            .app-sidebar-resizer {
                flex: 0 0 6px;
                width: 6px;
                margin: 0 -3px;
                cursor: col-resize;
                align-self: stretch;
                min-height: 0;
                background: transparent;
                z-index: 35;
                position: relative;
                touch-action: none;
            }

            .app-sidebar-resizer:hover,
            .app-sidebar-resizer:focus-visible {
                background: rgba(131, 81, 236, 0.18);
            }

            .app-sidebar-resizer::after {
                content: "";
                position: absolute;
                top: 0;
                bottom: 0;
                left: 50%;
                width: 2px;
                transform: translateX(-50%);
                background: #e2e8f0;
                border-radius: 1px;
                pointer-events: none;
            }

            .app-sidebar-resizer:hover::after,
            .app-sidebar-resizer:focus-visible::after {
                background: #8351ec;
            }

            .app-main {
                min-height: 0;
                width: 100%;
                min-width: 0;
                flex: 1;
                display: flex;
                flex-direction: column;
            }

            .app-mobile-sidebar-backdrop {
                display: none;
            }

            @media (max-width: 767.98px) {
                .app-sidebar-resizer {
                    display: none !important;
                }

                /* Drawer navigation: sidebar slides in from the left */
                .app-sidebar-column {
                    position: fixed;
                    top: 0;
                    left: 0;
                    bottom: 0;
                    width: min(18.75rem, 90vw) !important;
                    max-width: min(18.75rem, 90vw) !important;
                    min-width: 0 !important;
                    flex: none !important;
                    z-index: 240;
                    transform: translateX(-100%);
                    transition: transform 0.28s ease;
                    display: flex !important;
                    flex-direction: column;
                    box-shadow: 6px 0 28px rgba(0, 0, 0, 0.22);
                    background: var(--bg-surface, #fff);
                }

                .app-shell.is-mobile-sidebar-open .app-sidebar-column {
                    transform: translateX(0);
                }

                .app-mobile-sidebar-backdrop {
                    display: block;
                    position: fixed;
                    inset: 0;
                    z-index: 235;
                    background: rgba(15, 23, 42, 0.48);
                    opacity: 0;
                    visibility: hidden;
                    transition: opacity 0.22s ease, visibility 0.22s ease;
                    pointer-events: none;
                    border: 0;
                    padding: 0;
                    margin: 0;
                    cursor: pointer;
                    -webkit-tap-highlight-color: transparent;
                }

                .app-shell.is-mobile-sidebar-open .app-mobile-sidebar-backdrop {
                    opacity: 1;
                    visibility: visible;
                    pointer-events: auto;
                }

                .app-sidebar-column .pos-nk-sidebar.nk-sidebar {
                    display: flex !important;
                    flex-direction: column;
                    flex: 1 1 0%;
                    min-height: 0 !important;
                    height: 100%;
                    max-height: none;
                }

                .app-sidebar-column .nk-sidebar-scroll {
                    max-height: calc(100vh - 8rem);
                    overflow-y: auto;
                    -webkit-overflow-scrolling: touch;
                }

                /* One top bar on small screens: use the in-main mobile topbar */
                .app-header {
                    display: none !important;
                }

                body.app-mobile-sidebar-open {
                    overflow: hidden;
                }

                .hdr-mobile-nav-toggle {
                    display: inline-flex !important;
                }
            }

            @media (min-width: 768px) {
                .hdr-mobile-nav-toggle {
                    display: none !important;
                }
            }

            .app-header {
                --hdr-control-size: 2.25rem;
                --hdr-surface: #f8fafc;
                --hdr-surface-hover: #f1f5f9;
                --hdr-border: #d7dde5;
                position: relative;
                flex-shrink: 0;
                /* Above sticky list filters / drawers (~10050); global search dropdown must receive clicks over the table */
                z-index: var(--nk-z-header);
                border-bottom: 1px solid #d7dde5;
                background: #ffffff;
                box-shadow: none;
            }

            .app-header-inner {
                padding: 0.65rem 1rem;
                display: flex;
                align-items: center;
                gap: 0.75rem 1rem;
                min-width: 0;
            }

            .hdr-toolbar-wrap {
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                align-content: center;
                gap: 0.65rem 1.25rem;
                width: 100%;
                min-width: 0;
            }

            .hdr-toolbar--actions {
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                gap: 0.4rem;
                flex: 0 0 auto;
                margin-left: auto;
                justify-content: flex-end;
                align-self: center;
            }

            .hdr-search {
                display: flex;
                align-items: center;
                gap: 0.45rem;
                border: 1px solid var(--hdr-border);
                background: var(--hdr-surface);
                border-radius: 8px;
                padding: 0 0.85rem 0 0.75rem;
                margin: 0;
                min-height: var(--hdr-control-size);
                height: var(--hdr-control-size);
                max-height: var(--hdr-control-size);
                min-width: 12rem;
                max-width: min(44rem, 100%);
                flex: 1 1 18rem;
                align-self: center;
            }

            .hdr-search--global {
                position: relative;
                z-index: 120;
            }

            .hdr-search__form {
                display: flex;
                align-items: center;
                gap: 0.45rem;
                flex: 1 1 auto;
                min-width: 0;
                margin: 0;
                padding: 0;
                border: none;
                background: transparent;
            }

            .hdr-global-search-dropdown {
                position: absolute;
                left: 0;
                right: 0;
                top: calc(100% + 6px);
                max-height: min(70vh, 26rem);
                overflow-y: auto;
                -webkit-overflow-scrolling: touch;
                border-radius: 10px;
                border: 1px solid var(--border-default, #e2e8f0);
                background: var(--bg-surface, #ffffff);
                box-shadow: 0 14px 44px rgba(15, 23, 42, 0.14);
                z-index: 130;
            }

            /* Portaled to body: always above list tables / filter stack; below modals (10070) */
            .hdr-global-search-dropdown.hdr-global-search-dropdown--portaled {
                position: fixed !important;
                left: 0;
                top: 0;
                right: auto;
                width: min(44rem, calc(100vw - 16px));
                max-height: min(70vh, 26rem);
                z-index: var(--nk-z-global-search);
                margin: 0;
            }

            .hdr-global-search-dropdown--mobile.hdr-global-search-dropdown--portaled {
                max-height: min(50vh, 18rem);
            }

            .hdr-global-search-group-label {
                position: sticky;
                top: 0;
                z-index: 1;
                display: flex;
                align-items: center;
                gap: 0.55rem;
                font-size: 0.64rem;
                font-weight: 700;
                text-transform: uppercase;
                letter-spacing: 0.08em;
                color: var(--text-muted, #64748b);
                padding: 0.55rem 0.85rem 0.38rem;
                background: linear-gradient(180deg, rgba(248, 250, 252, 0.98), rgba(248, 250, 252, 0.92));
                border-top: 1px solid rgba(226, 232, 240, 0.9);
                border-bottom: 1px solid rgba(226, 232, 240, 0.7);
                backdrop-filter: blur(6px);
            }

            .hdr-global-search-group-label::before,
            .hdr-global-search-group-label::after {
                content: '';
                display: block;
                height: 1px;
                background: rgba(148, 163, 184, 0.35);
                flex: 1 1 auto;
            }

            .hdr-global-search-group-label:first-child {
                border-top: 0;
                padding-top: 0.48rem;
            }

            .hdr-global-search-item {
                display: block;
                padding: 0.5rem 0.85rem;
                text-decoration: none;
                color: var(--text-primary, #0f172a);
                border: 0;
                width: 100%;
                text-align: left;
                background: transparent;
                cursor: pointer;
                font: inherit;
                line-height: 1.35;
            }

            .hdr-global-search-item:hover,
            .hdr-global-search-item:focus-visible,
            .hdr-global-search-item.is-active {
                background: var(--bg-surface-soft, #f1f5f9);
                outline: none;
            }

            .hdr-global-search-item__label {
                display: block;
            }

            .hdr-global-search-item__meta {
                display: block;
                font-size: 0.78rem;
                color: var(--text-muted, #64748b);
                margin-top: 0.12rem;
            }

            .hdr-global-search-empty {
                padding: 0.75rem 0.85rem;
                font-size: 0.8125rem;
                color: var(--text-muted, #64748b);
                line-height: 1.45;
            }

            :root[data-theme='dark'] .hdr-global-search-dropdown {
                background: var(--bg-surface, #1e293b);
                border-color: var(--border-strong, #334155);
                box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
            }

            :root[data-theme='dark'] .hdr-global-search-group-label {
                color: #94a3b8;
                background: linear-gradient(180deg, rgba(30, 41, 59, 0.98), rgba(30, 41, 59, 0.94));
                border-top-color: rgba(51, 65, 85, 0.9);
                border-bottom-color: rgba(51, 65, 85, 0.82);
            }

            :root[data-theme='dark'] .hdr-global-search-group-label::before,
            :root[data-theme='dark'] .hdr-global-search-group-label::after {
                background: rgba(100, 116, 139, 0.42);
            }

            :root[data-theme='dark'] .hdr-global-search-item {
                color: var(--text-primary, #f1f5f9);
            }

            :root[data-theme='dark'] .hdr-global-search-item:hover,
            :root[data-theme='dark'] .hdr-global-search-item:focus-visible,
            :root[data-theme='dark'] .hdr-global-search-item.is-active {
                background: rgba(51, 65, 85, 0.55);
            }

            .hdr-search-icon {
                color: #6b7280;
                font-size: 1.05rem;
                flex-shrink: 0;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                line-height: 1;
            }

            .hdr-search-icon .ti {
                line-height: 1;
            }

            .hdr-search-input {
                border: none;
                background: transparent;
                color: #111827;
                font-size: 0.875rem;
                width: 100%;
                min-width: 0;
                flex: 1 1 auto;
                outline: none;
                padding: 0;
                line-height: 1.25;
                min-height: 0 !important;
                height: auto !important;
                max-height: 100%;
                -webkit-appearance: none;
                appearance: none;
                box-shadow: none;
            }

            /* @tailwindcss/forms adds focus rings, borders, and a white bg on [type=search] — strip for pill search */
            .app-header .hdr-search-input:focus,
            .app-header .hdr-search-input:focus-visible {
                outline: none !important;
                border: none !important;
                background-color: transparent !important;
                box-shadow: none !important;
                --tw-ring-width: 0 !important;
                --tw-ring-offset-width: 0 !important;
                --tw-ring-offset-shadow: 0 0 #0000 !important;
                --tw-ring-shadow: 0 0 #0000 !important;
                --tw-shadow: 0 0 #0000 !important;
            }

            .app-header .hdr-search:focus-within {
                outline: none;
                border-color: #b9c3d0;
                background: #ffffff;
            }

            .hdr-search-input::-webkit-search-decoration,
            .hdr-search-input::-webkit-search-cancel-button,
            .hdr-search-input::-webkit-search-results-button,
            .hdr-search-input::-webkit-search-results-decoration {
                -webkit-appearance: none;
                appearance: none;
                display: none;
            }

            .hdr-search-input::placeholder {
                color: #9aa3b2;
            }

            .hdr-icon-btn {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                border: 1px solid var(--hdr-border);
                border-radius: 8px;
                background: #ffffff;
                color: #1f2937;
                width: var(--hdr-control-size);
                height: var(--hdr-control-size);
                min-width: var(--hdr-control-size);
                min-height: var(--hdr-control-size);
                padding: 0;
                cursor: pointer;
                list-style: none;
                flex-shrink: 0;
                box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
            }

            .hdr-icon-btn:hover {
                background: #f3f4f6;
                border-color: #c2cbd8;
            }

            .hdr-icon-btn .ti {
                font-size: 1.05rem;
            }

            .hdr-dd summary.hdr-icon-btn::-webkit-details-marker {
                display: none;
            }

            .hdr-pill {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                gap: 0.35rem;
                border: 1px solid var(--hdr-border);
                border-radius: 8px;
                background: #ffffff;
                color: #1f2937;
                font-size: 0.78rem;
                font-weight: 600;
                min-height: var(--hdr-control-size);
                padding: 0 0.75rem;
                cursor: pointer;
                font-family: inherit;
                flex-shrink: 0;
            }

            .hdr-pill:hover {
                background: #f3f4f6;
                border-color: #c2cbd8;
            }

            .hdr-pill .ti {
                font-size: 0.95rem;
            }

            .hdr-checkin-icon-out.hdr-hidden {
                display: none;
            }

            .hdr-checkin-btn.is-checked-in {
                background: #e8f5eb;
                border-color: #9fd4ad;
                color: #1f5131;
            }

            .hdr-pos-link {
                display: inline-flex;
                align-items: center;
                gap: 0.35rem;
                border-radius: 8px;
                border: 1px solid var(--hdr-border);
                background: #ffffff;
                color: #1f2937;
                text-decoration: none;
                min-height: var(--hdr-control-size);
                padding: 0 0.75rem;
                font-size: 0.78rem;
                font-weight: 700;
                flex-shrink: 0;
            }

            .hdr-pos-link:hover {
                background: #f3f4f6;
                border-color: #c2cbd8;
                color: #111827;
            }

            .hdr-datetime {
                display: inline-flex;
                align-items: center;
                gap: 0.4rem;
                border: 1px solid var(--hdr-border);
                border-radius: 8px;
                background: #ffffff;
                padding: 0 0.65rem 0 0.55rem;
                min-height: var(--hdr-control-size);
                color: #1f2937;
                flex-shrink: 0;
                max-width: min(100%, 20rem);
            }

            .hdr-datetime-icon {
                font-size: 0.95rem;
                opacity: 0.9;
                flex-shrink: 0;
            }

            .hdr-datetime-line {
                font-size: 0.72rem;
                font-weight: 600;
                font-variant-numeric: tabular-nums;
                line-height: 1.2;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                min-width: 0;
            }

            .hdr-dd {
                position: relative;
                flex-shrink: 0;
            }

            .hdr-dd > summary {
                list-style: none;
            }

            .hdr-dd-menu {
                position: absolute;
                top: calc(100% + 0.35rem);
                right: 0;
                min-width: 12rem;
                background: #fff;
                border-radius: 0.55rem;
                box-shadow: 0 12px 40px rgba(15, 23, 42, 0.18);
                border: 1px solid #e2e8f0;
                padding: 0.35rem;
                z-index: 100;
            }

            .hdr-dd-menu--sm {
                min-width: 11rem;
            }

            .hdr-dd-menu--md {
                min-width: 15rem;
            }

            .hdr-dd-menu--right {
                right: 0;
                left: auto;
            }

            .hdr-dd-header {
                font-size: 0.72rem;
                font-weight: 700;
                text-transform: uppercase;
                letter-spacing: 0.04em;
                color: #64748b;
                padding: 0.35rem 0.5rem 0.25rem;
            }

            .hdr-dd-item {
                display: flex;
                align-items: center;
                gap: 0.5rem;
                padding: 0.45rem 0.55rem;
                border-radius: 0.4rem;
                font-size: 0.8rem;
                color: #0f172a;
                text-decoration: none;
                border: none;
                background: transparent;
                width: 100%;
                text-align: left;
                cursor: pointer;
                font-family: inherit;
            }

            .hdr-dd-item:hover {
                background: #f1f5f9;
            }

            .hdr-dd-item .ti {
                font-size: 1rem;
                color: #64748b;
            }

            .hdr-dd-item--btn {
                color: #b91c1c;
            }

            .hdr-dd-item--btn:hover {
                background: #fef2f2;
            }

            .hdr-dd-divider {
                height: 1px;
                background: #e2e8f0;
                margin: 0.25rem 0;
            }

            .hdr-notif-empty {
                margin: 0;
                padding: 0.85rem 0.5rem;
                font-size: 0.8rem;
                color: #64748b;
                text-align: center;
            }

            .hdr-profile-summary {
                list-style: none;
                cursor: pointer;
                border-radius: 8px;
                border: 1px solid var(--hdr-border);
                padding: 0;
                background: #ffffff;
                width: var(--hdr-control-size);
                height: var(--hdr-control-size);
                min-width: var(--hdr-control-size);
                min-height: var(--hdr-control-size);
                display: flex;
                align-items: center;
                justify-content: center;
                box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
            }

            .hdr-profile-summary:hover {
                background: #f3f4f6;
                border-color: #c2cbd8;
            }

            .hdr-profile-summary::-webkit-details-marker {
                display: none;
            }

            .hdr-avatar {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                width: 1.5rem;
                height: 1.5rem;
                border-radius: 999px;
                background: #4b5563;
                font-size: 0.85rem;
                font-weight: 800;
                color: #fff;
            }

            .hdr-profile-meta {
                padding: 0.5rem 0.55rem 0.35rem;
            }

            .hdr-profile-name {
                display: block;
                font-size: 0.85rem;
                font-weight: 700;
                color: #0f172a;
            }

            .hdr-profile-email {
                display: block;
                font-size: 0.72rem;
                color: #64748b;
                word-break: break-all;
            }

            .hdr-profile-logout {
                margin: 0;
            }

            .hdr-calc-dialog {
                border: none;
                border-radius: 0.85rem;
                padding: 0;
                box-shadow: 0 24px 60px rgba(15, 23, 42, 0.25);
                width: min(94vw, 30rem);
                max-width: 30rem;
            }

            .hdr-calc-dialog::backdrop {
                background: rgba(15, 23, 42, 0.45);
            }

            .hdr-calc-inner {
                padding: 0;
                border: 0;
                margin: 0;
                min-width: 24rem;
                width: 100%;
            }

            .hdr-calc-head {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 0.5rem;
                padding: 0.8rem 1rem;
                background: linear-gradient(135deg, #6366f1 0%, #7c3aed 55%, #5b21b6 100%);
                color: #fff;
                font-weight: 600;
                font-size: 1.05rem;
            }

            .hdr-calc-head-tools {
                display: flex;
                align-items: center;
                gap: 0.35rem;
            }

            .hdr-calc-history-btn {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                border: none;
                background: rgba(255, 255, 255, 0.2);
                color: #fff;
                width: 2.1rem;
                height: 2.1rem;
                border-radius: 0.4rem;
                cursor: pointer;
                font-size: 1.05rem;
                line-height: 1;
            }

            .hdr-calc-history-btn:hover,
            .hdr-calc-history-btn:focus-visible {
                background: rgba(255, 255, 255, 0.32);
                outline: none;
            }

            .hdr-calc-history-btn.is-active {
                background: rgba(255, 255, 255, 0.38);
                box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.45);
            }

            .hdr-calc-close {
                border: none;
                background: rgba(255, 255, 255, 0.2);
                color: #fff;
                width: 2.1rem;
                height: 2.1rem;
                border-radius: 0.4rem;
                cursor: pointer;
                font-size: 1.2rem;
                line-height: 1;
            }

            .hdr-calc-close:hover {
                background: rgba(255, 255, 255, 0.3);
            }

            .hdr-calc-history-panel {
                display: none;
                flex-direction: column;
                max-height: 12rem;
                overflow: hidden;
                border-bottom: 1px solid #e2e8f0;
                background: #fff;
            }

            .hdr-calc-history-panel.is-open {
                display: flex;
            }

            .hdr-calc-history-toolbar {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 0.45rem 0.85rem;
                font-size: 0.68rem;
                font-weight: 700;
                text-transform: uppercase;
                letter-spacing: 0.06em;
                color: #64748b;
                border-bottom: 1px solid #e2e8f0;
                background: #f8fafc;
                flex-shrink: 0;
            }

            .hdr-calc-history-clear {
                border: none;
                background: transparent;
                color: #dc2626;
                font-size: 0.7rem;
                font-weight: 700;
                cursor: pointer;
                padding: 0.2rem 0.4rem;
                border-radius: 0.3rem;
                text-transform: none;
                letter-spacing: 0;
            }

            .hdr-calc-history-clear:hover {
                background: #fee2e2;
            }

            .hdr-calc-history-list {
                list-style: none;
                margin: 0;
                padding: 0.25rem 0;
                overflow-y: auto;
                flex: 1;
                min-height: 0;
            }

            .hdr-calc-history-row {
                margin: 0;
            }

            .hdr-calc-history-item {
                width: 100%;
                text-align: left;
                border: none;
                background: transparent;
                padding: 0.5rem 0.85rem;
                cursor: pointer;
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                gap: 0.2rem;
                border-bottom: 1px solid #f1f5f9;
            }

            .hdr-calc-history-item:hover {
                background: #eff6ff;
            }

            .hdr-calc-history-item-label {
                font-size: 0.8rem;
                font-weight: 600;
                color: #0f172a;
                word-break: break-word;
                line-height: 1.35;
            }

            .hdr-calc-history-item-time {
                font-size: 0.62rem;
                color: #94a3b8;
                font-weight: 500;
            }

            .hdr-calc-history-empty {
                margin: 0;
                padding: 0.85rem;
                font-size: 0.78rem;
                color: #94a3b8;
                text-align: center;
            }

            .hdr-calc-history-empty[hidden] {
                display: none !important;
            }

            .hdr-calc-display-stack {
                display: flex;
                flex-direction: column;
                justify-content: flex-end;
                gap: 0.35rem;
                width: 100%;
                box-sizing: border-box;
                padding: 0.65rem 1rem 0.75rem;
                border-bottom: 1px solid #e2e8f0;
                background: linear-gradient(180deg, #f1f5f9 0%, #e2e8f0 100%);
                min-height: 0;
            }

            .hdr-calc-subline {
                font-size: 0.74rem;
                font-weight: 500;
                text-align: right;
                line-height: 1.35;
                color: #475569;
                word-break: break-word;
                min-height: 0;
            }

            .hdr-calc-subline:empty {
                display: none;
            }

            .hdr-calc-display {
                display: block;
                width: 100%;
                box-sizing: border-box;
                margin: 0;
                max-height: 6.5rem;
                overflow: auto;
                padding: 0.15rem 0 0;
                font-size: 1.45rem;
                font-weight: 700;
                text-align: right;
                border: none;
                font-variant-numeric: tabular-nums;
                background: transparent;
                color: #0f172a;
                white-space: normal;
                word-break: break-all;
                overflow-wrap: anywhere;
                line-height: 1.35;
            }

            .hdr-calc-tax-bar {
                padding: 0.55rem 1rem 0.65rem;
                background: #fff;
                border-bottom: 1px solid #e2e8f0;
            }

            .hdr-calc-tax-title {
                display: block;
                font-size: 0.65rem;
                font-weight: 700;
                text-transform: uppercase;
                letter-spacing: 0.06em;
                color: #64748b;
                margin-bottom: 0.4rem;
            }

            .hdr-calc-tax-rates {
                display: flex;
                flex-wrap: wrap;
                gap: 0.35rem;
                margin-bottom: 0.45rem;
            }

            .hdr-calc-rate {
                border: 1px solid #cbd5e1;
                background: #f8fafc;
                color: #334155;
                font-size: 0.72rem;
                font-weight: 700;
                padding: 0.28rem 0.5rem;
                border-radius: 0.35rem;
                cursor: pointer;
                line-height: 1;
            }

            .hdr-calc-rate:hover {
                background: #e0e7ff;
                border-color: #a5b4fc;
                color: #3730a3;
            }

            .hdr-calc-rate.is-selected {
                background: linear-gradient(135deg, #22c55e, #16a34a);
                border-color: #15803d;
                color: #fff;
            }

            .hdr-calc-tax-actions {
                display: flex;
                gap: 0.4rem;
            }

            .hdr-calc-tax-btn {
                flex: 1;
                border: none;
                border-radius: 0.4rem;
                padding: 0.45rem 0.5rem;
                font-size: 0.78rem;
                font-weight: 700;
                cursor: pointer;
                color: #fff;
            }

            .hdr-calc-tax-add {
                background: linear-gradient(135deg, #0ea5e9, #0284c7);
            }

            .hdr-calc-tax-add:hover {
                filter: brightness(1.06);
            }

            .hdr-calc-tax-strip {
                background: linear-gradient(135deg, #f97316, #ea580c);
            }

            .hdr-calc-tax-strip:hover {
                filter: brightness(1.06);
            }

            .hdr-calc-keys {
                display: grid;
                grid-template-columns: repeat(4, 1fr);
                gap: 0.45rem;
                padding: 0.85rem 1rem 1rem;
                background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
            }

            .hdr-calc-keys button {
                padding: 0.78rem 0.5rem;
                font-size: 1.05rem;
                font-weight: 700;
                border-radius: 0.45rem;
                cursor: pointer;
                min-height: 2.7rem;
                border-width: 1px;
                border-style: solid;
            }

            .hdr-calc-keys .hdr-calc-num {
                background: linear-gradient(180deg, #ffffff, #eff6ff);
                border-color: #bfdbfe;
                color: #1e3a8a;
            }

            .hdr-calc-keys .hdr-calc-num:hover {
                background: linear-gradient(180deg, #dbeafe, #bfdbfe);
            }

            .hdr-calc-keys .hdr-calc-op {
                background: linear-gradient(180deg, #fff7ed, #ffedd5);
                border-color: #fdba74;
                color: #9a3412;
            }

            .hdr-calc-keys .hdr-calc-op:hover {
                background: linear-gradient(180deg, #fed7aa, #fdba74);
            }

            .hdr-calc-keys .hdr-calc-clear {
                background: linear-gradient(180deg, #fef2f2, #fee2e2);
                border-color: #fca5a5;
                color: #b91c1c;
            }

            .hdr-calc-keys .hdr-calc-clear:hover {
                background: linear-gradient(180deg, #fecaca, #fca5a5);
            }

            .hdr-calc-keys .hdr-calc-pct {
                background: linear-gradient(180deg, #ecfdf5, #d1fae5);
                border-color: #6ee7b7;
                color: #047857;
            }

            .hdr-calc-keys .hdr-calc-pct:hover {
                background: linear-gradient(180deg, #a7f3d0, #6ee7b7);
            }

            .hdr-calc-keys .hdr-calc-bsp {
                background: linear-gradient(180deg, #f5f3ff, #ede9fe);
                border-color: #c4b5fd;
                color: #5b21b6;
            }

            .hdr-calc-keys .hdr-calc-bsp:hover {
                background: linear-gradient(180deg, #ddd6fe, #c4b5fd);
            }

            .hdr-calc-keys .hdr-calc-eq {
                grid-column: span 2;
                background: linear-gradient(135deg, #6366f1, #4f46e5);
                color: #fff;
                border-color: #4338ca;
            }

            .hdr-calc-keys .hdr-calc-eq:hover {
                background: linear-gradient(135deg, #4f46e5, #4338ca);
            }

            :root[data-theme='dark'] .hdr-dd-menu {
                background: var(--bg-surface);
                border-color: var(--border-default);
                box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
            }

            :root[data-theme='dark'] .hdr-dd-header {
                color: var(--text-muted);
            }

            :root[data-theme='dark'] .hdr-dd-item {
                color: var(--text-primary);
            }

            :root[data-theme='dark'] .hdr-dd-item:hover {
                background: var(--bg-surface-soft);
            }

            :root[data-theme='dark'] .hdr-profile-name {
                color: var(--text-primary);
            }

            :root[data-theme='dark'] .hdr-profile-email {
                color: var(--text-muted);
            }

            :root[data-theme='dark'] .hdr-dd-divider {
                background: var(--border-default);
            }

            :root[data-theme='dark'] .hdr-calc-display-stack {
                background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
                border-color: var(--border-default);
            }

            :root[data-theme='dark'] .hdr-calc-subline {
                color: #94a3b8;
            }

            :root[data-theme='dark'] .hdr-calc-display {
                color: #f8fafc;
            }

            :root[data-theme='dark'] .hdr-calc-history-panel {
                background: #0f172a;
                border-color: var(--border-default);
            }

            :root[data-theme='dark'] .hdr-calc-history-toolbar {
                background: #1e293b;
                border-color: var(--border-default);
                color: #94a3b8;
            }

            :root[data-theme='dark'] .hdr-calc-history-clear {
                color: #f87171;
            }

            :root[data-theme='dark'] .hdr-calc-history-clear:hover {
                background: rgba(248, 113, 113, 0.12);
            }

            :root[data-theme='dark'] .hdr-calc-history-item {
                border-color: #1e293b;
            }

            :root[data-theme='dark'] .hdr-calc-history-item:hover {
                background: #1e3a5f;
            }

            :root[data-theme='dark'] .hdr-calc-history-item-label {
                color: #f1f5f9;
            }

            :root[data-theme='dark'] .hdr-calc-history-item-time {
                color: #64748b;
            }

            :root[data-theme='dark'] .hdr-calc-history-empty {
                color: #64748b;
            }

            :root[data-theme='dark'] .hdr-calc-tax-bar {
                background: #0f172a;
                border-color: var(--border-default);
            }

            :root[data-theme='dark'] .hdr-calc-tax-title {
                color: #94a3b8;
            }

            :root[data-theme='dark'] .hdr-calc-rate {
                background: #1e293b;
                border-color: #334155;
                color: #e2e8f0;
            }

            :root[data-theme='dark'] .hdr-calc-rate:hover {
                background: #312e81;
                border-color: #6366f1;
                color: #e0e7ff;
            }

            :root[data-theme='dark'] .hdr-calc-keys {
                background: linear-gradient(180deg, #0f172a 0%, #020617 100%);
            }

            :root[data-theme='dark'] .hdr-calc-keys .hdr-calc-num {
                background: linear-gradient(180deg, #1e3a5f, #172554);
                border-color: #3b82f6;
                color: #dbeafe;
            }

            :root[data-theme='dark'] .hdr-calc-keys .hdr-calc-num:hover {
                background: linear-gradient(180deg, #1d4ed8, #1e40af);
            }

            :root[data-theme='dark'] .hdr-calc-keys .hdr-calc-op {
                background: linear-gradient(180deg, #7c2d12, #9a3412);
                border-color: #ea580c;
                color: #ffedd5;
            }

            :root[data-theme='dark'] .hdr-calc-keys .hdr-calc-op:hover {
                background: linear-gradient(180deg, #c2410c, #9a3412);
            }

            :root[data-theme='dark'] .hdr-calc-keys .hdr-calc-clear {
                background: linear-gradient(180deg, #7f1d1d, #991b1b);
                border-color: #ef4444;
                color: #fecaca;
            }

            :root[data-theme='dark'] .hdr-calc-keys .hdr-calc-clear:hover {
                background: linear-gradient(180deg, #b91c1c, #991b1b);
            }

            :root[data-theme='dark'] .hdr-calc-keys .hdr-calc-pct {
                background: linear-gradient(180deg, #064e3b, #065f46);
                border-color: #10b981;
                color: #d1fae5;
            }

            :root[data-theme='dark'] .hdr-calc-keys .hdr-calc-pct:hover {
                background: linear-gradient(180deg, #047857, #065f46);
            }

            :root[data-theme='dark'] .hdr-calc-keys .hdr-calc-bsp {
                background: linear-gradient(180deg, #4c1d95, #5b21b6);
                border-color: #a78bfa;
                color: #ede9fe;
            }

            :root[data-theme='dark'] .hdr-calc-keys .hdr-calc-bsp:hover {
                background: linear-gradient(180deg, #6d28d9, #5b21b6);
            }

            :root[data-theme='dark'] .hdr-calc-keys .hdr-calc-eq {
                background: linear-gradient(135deg, #7c3aed, #5b21b6);
                border-color: #6d28d9;
                color: #fff;
            }

            :root[data-theme='dark'] .hdr-calc-keys .hdr-calc-eq:hover {
                background: linear-gradient(135deg, #6d28d9, #5b21b6);
            }

            .header-link {
                display: inline-flex;
                align-items: center;
                gap: 0.45rem;
                border-radius: 0.62rem;
                border: 1px solid rgba(255, 255, 255, 0.28);
                background: rgba(255, 255, 255, 0.14);
                color: #fff;
                text-decoration: none;
                padding: 0.45rem 0.78rem;
                font-size: 0.9rem;
                line-height: 1;
                font-weight: 500;
            }

            .header-link:hover {
                background: rgba(255, 255, 255, 0.24);
            }

            .mobile-topbar {
                --hdr-control-size: 2.25rem;
                --hdr-surface: rgba(15, 23, 42, 0.06);
                --hdr-surface-hover: rgba(15, 23, 42, 0.1);
                --hdr-border: rgba(15, 23, 42, 0.14);
                position: relative;
                z-index: var(--nk-z-header);
                background: var(--bg-elevated);
                color: var(--text-primary);
                padding: 0.75rem 1rem;
                border-bottom: 1px solid var(--border-default);
            }

            .mobile-topbar .hdr-toolbar :is(.hdr-icon-btn, .hdr-pill, .hdr-pos-link, .theme-toggle-btn, .hdr-profile-summary) {
                color: var(--text-primary);
            }

            .mobile-topbar .hdr-icon-btn {
                border: 1px solid rgba(15, 23, 42, 0.2);
                background: #ffffff;
                color: #0f172a;
                box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
            }

            .mobile-topbar .hdr-icon-btn:hover {
                background: #f1f5f9;
                border-color: rgba(15, 23, 42, 0.32);
                color: #020617;
            }

            :root[data-theme='dark'] .mobile-topbar .hdr-icon-btn {
                border-color: rgba(148, 163, 184, 0.35);
                background: rgba(255, 255, 255, 0.08);
                color: #f8fafc;
                box-shadow: none;
            }

            :root[data-theme='dark'] .mobile-topbar .hdr-icon-btn:hover {
                background: rgba(255, 255, 255, 0.14);
                border-color: rgba(148, 163, 184, 0.5);
            }

            .mobile-topbar .hdr-pos-link {
                border: 1px solid rgba(15, 23, 42, 0.2);
                background: #ffffff;
                color: #0f172a;
                padding: 0;
                width: var(--hdr-control-size, 2.25rem);
                min-width: var(--hdr-control-size, 2.25rem);
                height: var(--hdr-control-size, 2.25rem);
                justify-content: center;
                border-radius: 50%;
                box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
            }

            .mobile-topbar .hdr-pos-link:hover {
                background: #f1f5f9;
                border-color: rgba(15, 23, 42, 0.32);
                color: #020617;
            }

            .mobile-topbar .hdr-pos-text {
                display: none;
            }

            :root[data-theme='dark'] .mobile-topbar .hdr-pos-link {
                border-color: rgba(148, 163, 184, 0.35);
                background: rgba(255, 255, 255, 0.08);
                color: #f8fafc;
                box-shadow: none;
            }

            :root[data-theme='dark'] .mobile-topbar .hdr-pos-link:hover {
                background: rgba(255, 255, 255, 0.14);
                border-color: rgba(148, 163, 184, 0.5);
                color: #f8fafc;
            }

            .mobile-topbar .theme-toggle-btn {
                border: 1px solid rgba(15, 23, 42, 0.2);
                background: #ffffff;
                color: #0f172a;
                box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
            }

            .mobile-topbar .theme-toggle-btn:hover {
                background: #f1f5f9;
                border-color: rgba(15, 23, 42, 0.32);
                color: #020617;
            }

            :root[data-theme='dark'] .mobile-topbar .theme-toggle-btn {
                border-color: rgba(148, 163, 184, 0.35);
                background: rgba(255, 255, 255, 0.08);
                color: #f8fafc;
                box-shadow: none;
            }

            :root[data-theme='dark'] .mobile-topbar .theme-toggle-btn:hover {
                background: rgba(255, 255, 255, 0.14);
                border-color: rgba(148, 163, 184, 0.5);
            }

            .mobile-topbar .hdr-profile-summary {
                border: 1px solid rgba(15, 23, 42, 0.2);
                background: #ffffff;
                box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
            }

            .mobile-topbar .hdr-profile-summary:hover {
                background: #f1f5f9;
                border-color: rgba(15, 23, 42, 0.32);
            }

            :root[data-theme='dark'] .mobile-topbar .hdr-profile-summary {
                border-color: rgba(148, 163, 184, 0.35);
                background: rgba(255, 255, 255, 0.08);
                box-shadow: none;
            }

            :root[data-theme='dark'] .mobile-topbar .hdr-profile-summary:hover {
                background: rgba(255, 255, 255, 0.14);
                border-color: rgba(148, 163, 184, 0.5);
            }

            .mobile-topbar .hdr-profile-summary--compact {
                width: auto !important;
                height: auto !important;
                min-width: 0;
                min-height: 2.1rem;
                max-width: min(11.5rem, 46vw);
                padding: 0.1rem 0.4rem 0.1rem 0.1rem;
                gap: 0.3rem;
                border-radius: 999px;
                display: inline-flex;
                align-items: center;
                justify-content: flex-start;
            }

            .mobile-topbar .hdr-profile-summary--compact .hdr-avatar {
                width: 1.6rem;
                height: 1.6rem;
                min-width: 1.6rem;
                border-radius: 50%;
                background: linear-gradient(145deg, #6366f1, #4338ca);
                color: #fff !important;
                font-size: 0.68rem;
                font-weight: 800;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                flex-shrink: 0;
            }

            .mobile-topbar .hdr-profile-inline-name {
                font-size: 0.65rem;
                font-weight: 700;
                color: var(--text-primary, #0f172a);
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                min-width: 0;
                line-height: 1.15;
            }

            :root[data-theme='dark'] .mobile-topbar .hdr-profile-inline-name {
                color: var(--text-primary, #f1f5f9);
            }

            .mobile-topbar .hdr-toolbar .hdr-avatar {
                color: var(--text-primary);
            }

            .mobile-topbar .hdr-search-input {
                color: var(--text-primary);
                -webkit-appearance: none;
                appearance: none;
                box-shadow: none;
            }

            .mobile-topbar .hdr-search-input:focus,
            .mobile-topbar .hdr-search-input:focus-visible {
                outline: none !important;
                border: none !important;
                background-color: transparent !important;
                box-shadow: none !important;
                --tw-ring-width: 0 !important;
                --tw-ring-offset-width: 0 !important;
                --tw-ring-offset-shadow: 0 0 #0000 !important;
                --tw-ring-shadow: 0 0 #0000 !important;
                --tw-shadow: 0 0 #0000 !important;
            }

            .mobile-topbar .hdr-search-input::placeholder {
                color: var(--text-muted);
            }

            .mobile-topbar .hdr-search-icon {
                color: var(--text-muted);
            }

            .mobile-topbar .hdr-search:focus-within {
                border-color: var(--border-strong);
                background: var(--hdr-surface-hover);
            }

            .mobile-topbar .hdr-checkin-btn.is-checked-in {
                color: #fff;
            }

            .mobile-topbar-inner {
                display: flex;
                align-items: center;
                gap: 0.35rem;
                min-width: 0;
            }

            .mobile-topbar-inner > .hdr-mobile-nav-toggle {
                flex-shrink: 0;
            }

            /* Middle: search + action icons grow and push toward the profile column */
            .mobile-topbar-mid {
                flex: 1 1 0%;
                min-width: 0;
                display: flex;
                align-items: center;
                gap: 0.35rem;
            }

            .mobile-topbar-actions {
                flex: 1 1 auto;
                min-width: 0;
                display: flex;
                justify-content: flex-end;
                align-items: center;
                overflow-x: auto;
                overflow-y: hidden;
                -webkit-overflow-scrolling: touch;
                scrollbar-width: thin;
                padding-bottom: 2px;
            }

            .mobile-topbar-profile-aside {
                flex: 0 0 auto;
                min-width: 0;
                display: flex;
                align-items: center;
            }

            /* Collapsed: icon-only search; expanded: full-width field, tools hidden */
            .mobile-topbar-search-trigger {
                flex-shrink: 0;
                width: var(--hdr-control-size, 2.25rem);
                height: var(--hdr-control-size, 2.25rem);
                min-width: var(--hdr-control-size, 2.25rem);
                min-height: var(--hdr-control-size, 2.25rem);
                display: inline-flex;
                align-items: center;
                justify-content: center;
                border: 1px solid rgba(15, 23, 42, 0.2);
                border-radius: 50%;
                background: #ffffff;
                color: #0f172a;
                box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
                padding: 0;
                cursor: pointer;
                -webkit-tap-highlight-color: transparent;
            }

            .mobile-topbar-search-trigger .ti {
                font-size: 1.1rem;
            }

            .mobile-topbar-search-trigger:hover,
            .mobile-topbar-search-trigger:focus-visible {
                background: #f1f5f9;
                border-color: rgba(15, 23, 42, 0.32);
                color: #020617;
            }

            .mobile-topbar-search-trigger:focus-visible {
                outline: 2px solid rgba(99, 102, 241, 0.45);
                outline-offset: 2px;
            }

            :root[data-theme='dark'] .mobile-topbar-search-trigger {
                border-color: rgba(148, 163, 184, 0.35);
                background: rgba(255, 255, 255, 0.08);
                color: #f8fafc;
                box-shadow: none;
            }

            :root[data-theme='dark'] .mobile-topbar-search-trigger:hover,
            :root[data-theme='dark'] .mobile-topbar-search-trigger:focus-visible {
                background: rgba(255, 255, 255, 0.14);
                border-color: rgba(148, 163, 184, 0.5);
            }

            .mobile-topbar-search {
                display: none;
                align-items: center;
                gap: 0.35rem;
                flex: 1 1 0%;
                min-width: 0;
                border: 1px solid var(--border-default, #e2e8f0);
                border-radius: 999px;
                background: var(--bg-surface, #ffffff);
                padding: 0 0.65rem 0 0.45rem;
                min-height: 2.4rem;
                box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
            }

            .mobile-topbar-search--global {
                flex-wrap: wrap;
                position: relative;
            }

            .mobile-topbar-search__form {
                flex: 1 1 auto;
                min-width: 0;
                display: flex;
                margin: 0;
                padding: 0;
                border: none;
                background: transparent;
            }

            .hdr-global-search-dropdown--mobile {
                flex: 1 0 100%;
                position: relative;
                left: auto;
                right: auto;
                top: auto;
                margin: 0.25rem -0.2rem 0;
                max-height: min(50vh, 18rem);
                border-radius: 12px;
            }

            .mobile-topbar.is-search-open .mobile-topbar-search-trigger {
                display: none;
            }

            .mobile-topbar.is-search-open .mobile-topbar-search {
                display: flex;
            }

            .mobile-topbar.is-search-open .mobile-topbar-actions,
            .mobile-topbar.is-search-open .mobile-topbar-profile-aside {
                display: none !important;
            }

            .mobile-topbar.is-search-open .mobile-topbar-mid {
                flex: 1 1 0%;
            }

            .mobile-topbar-search-dismiss {
                flex-shrink: 0;
                width: 2rem;
                height: 2rem;
                min-width: 2rem;
                min-height: 2rem;
                padding: 0;
                margin-right: 0.1rem;
                border: 0;
                border-radius: 50%;
                background: transparent;
                color: var(--text-muted, #64748b);
                display: inline-flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                -webkit-tap-highlight-color: transparent;
            }

            .mobile-topbar-search-dismiss .ti {
                font-size: 1.15rem;
            }

            .mobile-topbar-search-dismiss:hover,
            .mobile-topbar-search-dismiss:focus-visible {
                background: var(--bg-surface-soft, #f1f5f9);
                color: var(--text-primary, #0f172a);
            }

            .mobile-topbar-search-dismiss:focus-visible {
                outline: 2px solid rgba(99, 102, 241, 0.35);
                outline-offset: 1px;
            }

            .mobile-topbar-search:focus-within {
                border-color: var(--border-strong, #cbd5e1);
                box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
            }

            .mobile-topbar-search-icon {
                color: var(--text-muted, #64748b);
                font-size: 1rem;
                flex-shrink: 0;
                display: inline-flex;
            }

            .mobile-topbar-search-input {
                border: none;
                background: transparent;
                color: var(--text-primary, #0f172a);
                font-size: 0.86rem;
                width: 100%;
                min-width: 0;
                flex: 1 1 auto;
                outline: none;
                padding: 0.35rem 0;
                line-height: 1.25;
                -webkit-appearance: none;
                appearance: none;
            }

            .mobile-topbar-search-input::placeholder {
                color: var(--text-muted, #94a3b8);
            }

            .mobile-topbar-actions .hdr-toolbar-wrap--mobile-actions {
                flex: 1 1 auto;
                min-width: 0;
                display: flex;
                flex-wrap: nowrap;
                justify-content: flex-end;
                align-items: center;
                width: 100%;
                max-width: none;
            }

            .mobile-topbar-actions .hdr-toolbar-wrap--mobile-actions .hdr-toolbar--actions {
                flex-wrap: nowrap;
                margin-left: 0;
                flex-shrink: 0;
                justify-content: flex-end;
            }

            .mobile-topbar-profile-aside .hdr-toolbar-wrap--mobile-profile {
                flex: 0 0 auto;
                display: flex;
                justify-content: flex-end;
                align-items: center;
                width: auto;
            }

            .mobile-topbar-profile-aside .hdr-toolbar-wrap--mobile-profile .hdr-toolbar--actions {
                flex-wrap: nowrap;
                margin-left: 0;
                justify-content: flex-end;
            }

            .hdr-mobile-nav-toggle {
                display: none;
                flex-shrink: 0;
            }

            .mobile-topbar .hdr-mobile-nav-toggle {
                border: 1px solid rgba(15, 23, 42, 0.2);
                background: #ffffff;
                color: #0f172a;
                box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
            }

            .mobile-topbar .hdr-mobile-nav-toggle:hover,
            .mobile-topbar .hdr-mobile-nav-toggle:focus-visible {
                background: #f1f5f9;
                border-color: rgba(15, 23, 42, 0.32);
                color: #020617;
            }

            .mobile-topbar .hdr-mobile-nav-toggle .ti {
                font-size: 1.2rem;
                font-weight: 600;
                color: inherit;
                opacity: 1;
            }

            :root[data-theme='dark'] .mobile-topbar .hdr-mobile-nav-toggle {
                border-color: rgba(148, 163, 184, 0.35);
                background: rgba(255, 255, 255, 0.08);
                color: #f8fafc;
                box-shadow: none;
            }

            :root[data-theme='dark'] .mobile-topbar .hdr-mobile-nav-toggle:hover,
            :root[data-theme='dark'] .mobile-topbar .hdr-mobile-nav-toggle:focus-visible {
                background: rgba(255, 255, 255, 0.14);
                border-color: rgba(148, 163, 184, 0.5);
            }

            :root[data-theme='dark'] .mobile-topbar-search {
                background: var(--bg-surface-soft, #1e293b);
                border-color: var(--border-default, #334155);
            }

            :root[data-theme='dark'] .mobile-topbar-search-input {
                color: var(--text-primary, #f1f5f9);
            }

            .app-mobile-bottom-nav {
                display: none;
            }

            @media (max-width: 767.98px) {
                /**
                 * Space reserved above the fixed tab bar (icons + labels + padding + safe area + buffer).
                 * Reuse for scrollable sheets/modals that span the full viewport height.
                 */
                :root {
                    --app-mobile-bottom-nav-gutter: calc(5.5rem + env(safe-area-inset-bottom, 0px));
                }

                .app-main > main {
                    padding-bottom: var(--app-mobile-bottom-nav-gutter);
                }

                /* POS uses footer_pos, not the global mobile tab bar — avoid empty bottom gutter */
                body.pos-stickydrop-ui .app-main > main {
                    padding-bottom: env(safe-area-inset-bottom, 0px);
                }

                /* POS: edge-to-edge on small screens */
                .content-wrap:has(.pos-shell, .pos-sd-shell) {
                    padding-left: 0;
                    padding-right: 0;
                    padding-top: 0.2rem;
                }

                main:has(.content-wrap:has(.pos-shell, .pos-sd-shell)) .mobile-topbar {
                    padding-left: 0.45rem;
                    padding-right: 0.45rem;
                }

                .app-mobile-bottom-nav {
                    display: flex;
                    position: fixed;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    z-index: 220;
                    justify-content: space-around;
                    align-items: stretch;
                    gap: 0;
                    min-height: calc(3.35rem + env(safe-area-inset-bottom, 0px));
                    padding: 0.35rem 0.25rem calc(0.35rem + env(safe-area-inset-bottom, 0px));
                    background: var(--bg-elevated, #ffffff);
                    border-top: 1px solid var(--border-default, #e2e8f0);
                    box-shadow: 0 -4px 24px rgba(15, 23, 42, 0.08);
                }

                .app-mobile-bottom-nav__item {
                    flex: 1 1 0%;
                    min-width: 0;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    gap: 0.12rem;
                    padding: 0.2rem 0.15rem;
                    text-decoration: none;
                    color: var(--text-muted, #64748b);
                    font-size: 0.58rem;
                    font-weight: 600;
                    line-height: 1.1;
                    border-radius: 0.45rem;
                    -webkit-tap-highlight-color: transparent;
                }

                .app-mobile-bottom-nav__item:active {
                    background: var(--bg-surface-soft, #f1f5f9);
                }

                .app-mobile-bottom-nav__icon {
                    font-size: 1.2rem;
                    line-height: 1;
                    opacity: 0.85;
                }

                .app-mobile-bottom-nav__label {
                    max-width: 100%;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    text-align: center;
                }

                .app-mobile-bottom-nav__item.is-active {
                    color: var(--link-primary, #4f46e5);
                }

                .app-mobile-bottom-nav__item.is-active .app-mobile-bottom-nav__icon {
                    opacity: 1;
                }
            }

            :root[data-theme='dark'] .app-mobile-bottom-nav {
                background: var(--bg-surface, #0f172a);
                border-top-color: var(--border-default, #334155);
                box-shadow: 0 -4px 28px rgba(0, 0, 0, 0.35);
            }

            :root[data-theme='dark'] .app-mobile-bottom-nav__item {
                color: var(--text-muted, #94a3b8);
            }

            :root[data-theme='dark'] .app-mobile-bottom-nav__item:active {
                background: rgba(255, 255, 255, 0.06);
            }

            :root[data-theme='dark'] .app-mobile-bottom-nav__item.is-active {
                color: var(--link-primary, #93c5fd);
            }

            .mobile-logout-btn {
                border: 0;
                border-radius: 0.4rem;
                background: #1e293b;
                color: #f1f5f9;
                padding: 0.4rem 0.75rem;
                font-size: 0.85rem;
                cursor: pointer;
            }

            .theme-toggle-btn {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                border: 1px solid var(--hdr-border);
                border-radius: 8px;
                background: #ffffff;
                color: #1f2937;
                width: var(--hdr-control-size);
                height: var(--hdr-control-size);
                min-width: var(--hdr-control-size);
                min-height: var(--hdr-control-size);
                padding: 0;
                font-size: 0.95rem;
                line-height: 1;
                cursor: pointer;
                box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
            }

            .theme-toggle-btn:hover {
                background: #f3f4f6;
                border-color: #c2cbd8;
            }

            :root[data-theme='dark'] :is(.hdr-icon-btn, .hdr-pill, .hdr-pos-link, .hdr-datetime, .theme-toggle-btn, .hdr-profile-summary) {
                background: rgba(255, 255, 255, 0.1);
                color: #e5e7eb;
                border-color: rgba(148, 163, 184, 0.45);
                box-shadow: none;
            }

            :root[data-theme='dark'] :is(.hdr-icon-btn, .hdr-pill, .hdr-pos-link, .hdr-datetime, .theme-toggle-btn, .hdr-profile-summary):hover {
                background: rgba(255, 255, 255, 0.16);
                border-color: rgba(148, 163, 184, 0.6);
            }

            :root[data-theme='dark'] .hdr-avatar {
                background: rgba(255, 255, 255, 0.2);
                color: #f8fafc;
            }

            .theme-toggle-btn .ti {
                font-size: 1.05rem;
            }

            :root[data-theme='dark'] .mobile-logout-btn {
                border: 1px solid var(--border-default);
                background: var(--bg-surface-soft);
                color: var(--text-primary);
            }

            :root[data-theme='dark'] .app-header {
                --hdr-surface: rgba(255, 255, 255, 0.1);
                --hdr-surface-hover: rgba(255, 255, 255, 0.18);
                --hdr-border: rgba(148, 163, 184, 0.45);
                background: #0f172a;
                border-bottom-color: #1f2b44;
                box-shadow: none;
            }

            :root[data-theme='dark'] .app-header .hdr-search {
                background: rgba(255, 255, 255, 0.08);
                border-color: rgba(148, 163, 184, 0.42);
            }

            :root[data-theme='dark'] .app-header .hdr-search:focus-within {
                background: rgba(255, 255, 255, 0.12);
                border-color: rgba(148, 163, 184, 0.62);
            }

            :root[data-theme='dark'] .app-header .hdr-search-icon {
                color: #cbd5e1;
            }

            :root[data-theme='dark'] .app-header .hdr-search-input {
                color: #f8fafc;
            }

            :root[data-theme='dark'] .app-header .hdr-search-input::placeholder {
                color: #9ca3af;
            }

            :root[data-theme='dark'] .mobile-topbar {
                --hdr-surface: rgba(255, 255, 255, 0.08);
                --hdr-surface-hover: rgba(255, 255, 255, 0.14);
                --hdr-border: rgba(148, 163, 184, 0.35);
            }

            :root[data-theme='dark'] .header-link {
                border-color: rgba(148, 163, 184, 0.55);
                background: rgba(15, 23, 42, 0.7);
                color: #e2e8f0;
            }

            :root[data-theme='dark'] .header-date-wrap {
                border-color: rgba(148, 163, 184, 0.55);
                background: rgba(15, 23, 42, 0.65);
            }

            :root[data-theme='dark'] .app-sidebar-resizer::after {
                background: var(--border-default);
            }

            :root[data-theme='dark'] .app-sidebar-resizer:hover::after,
            :root[data-theme='dark'] .app-sidebar-resizer:focus-visible::after {
                background: var(--link-primary);
            }

            /* Main content inset — tight top / L&R across the whole app shell */
            .content-wrap {
                padding: 0.45rem 0.4rem 0.85rem;
            }

            body.app-body .content-wrap > section.content-header {
                padding: 0.25rem 0 0.35rem;
                margin: 0;
            }

            body.app-body .content-wrap > section.content-header > h1,
            body.app-body .content-wrap > section.content-header > .tw-text-xl {
                margin-top: 0;
            }

            body.app-body .content-wrap > section.content {
                padding: 0.35rem 0.35rem 0.9rem;
            }

            /* Superadmin top nav (Modules) — reduce outer margin vs default tw-m-[16px] */
            body.app-body .content-wrap > nav.navbar-default {
                margin: 0.45rem 0.35rem 0.5rem !important;
            }

            .mobile-topbar .hdr-toolbar-wrap:not(.hdr-toolbar-wrap--mobile-profile) {
                display: flex;
                flex: 1;
                justify-content: flex-end;
                align-items: center;
                min-width: 0;
            }

            .hdr-toolbar-wrap--compact .hdr-toolbar--actions {
                gap: 0.28rem 0.35rem;
                margin-left: 0;
                flex: 0 1 auto;
            }

            .hdr-toolbar-wrap--compact .hdr-checkin-btn span[data-hdr-checkin-label] {
                display: none;
            }

            .hdr-toolbar-wrap--compact .hdr-pill {
                min-width: var(--hdr-control-size);
                padding: 0 0.5rem;
            }

            .hdr-toolbar-wrap--compact .hdr-datetime-line {
                font-size: 0.68rem;
            }

            @media (max-width: 1023.98px) and (min-width: 768px) {
                .app-header-inner {
                    flex-wrap: wrap;
                    row-gap: 0.5rem;
                }

                .hdr-toolbar-wrap {
                    flex-wrap: wrap;
                }

                .hdr-search {
                    flex: 1 1 14rem;
                    min-width: min(100%, 10rem);
                    max-width: 100%;
                }

                .hdr-toolbar--actions {
                    flex: 1 1 auto;
                    justify-content: flex-end;
                    max-width: 100%;
                }

                .hdr-datetime {
                    max-width: min(100%, 14rem);
                }

                .hdr-datetime-line {
                    font-size: 0.68rem;
                }
            }

            @media (max-width: 420px) {
                .mobile-topbar-actions .hdr-datetime {
                    display: none;
                }
            }

            @media (min-width: 768px) {
                /**
                 * Viewport-locked shell: sidebar menu scrolls inside .nk-sidebar-scroll;
                 * main content scrolls inside .app-main > main. Prevents the whole page
                 * (including sidebar) from moving when content is long.
                 */
                html {
                    height: 100%;
                }

                body.app-body {
                    height: 100%;
                    overflow: hidden;
                }

                .app-shell {
                    display: flex;
                    flex-direction: column;
                    height: 100%;
                    min-height: 0;
                    max-height: 100%;
                    overflow: hidden;
                }

                .app-shell-body {
                    flex: 1 1 0%;
                    min-height: 0;
                    max-height: 100%;
                    overflow: hidden;
                }

                .app-sidebar-column {
                    display: flex;
                    flex-direction: column;
                    align-self: stretch;
                    min-height: 0;
                    height: auto;
                }

                .app-sidebar-column .pos-nk-sidebar.nk-sidebar {
                    flex: 1 1 0%;
                    min-height: 0 !important;
                    height: 100%;
                    max-height: 100%;
                }

                .app-sidebar-resizer {
                    min-height: 0;
                }

                .app-main {
                    min-height: 0;
                    flex: 1 1 0%;
                    display: flex;
                    flex-direction: column;
                    overflow: hidden;
                }

                .app-main > main {
                    flex: 1 1 0%;
                    min-height: 0;
                    overflow-y: auto;
                    overflow-x: hidden;
                    -webkit-overflow-scrolling: touch;
                }

                .mobile-topbar {
                    display: none;
                }

                .content-wrap {
                    padding: 0.65rem 0.55rem 1rem;
                }

                body.app-body .content-wrap > section.content {
                    padding: 0.35rem 0.45rem 0.95rem;
                }
            }

            @media print {
                .app-mobile-bottom-nav {
                    display: none !important;
                }

                .app-mobile-sidebar-backdrop {
                    display: none !important;
                }

                html,
                body.app-body {
                    height: auto !important;
                    overflow: visible !important;
                }

                .app-shell {
                    display: block !important;
                    height: auto !important;
                    max-height: none !important;
                    min-height: 0 !important;
                    overflow: visible !important;
                }

                .app-shell-body {
                    display: block !important;
                    overflow: visible !important;
                }

                .app-main > main {
                    overflow: visible !important;
                }

                .app-sidebar-column .pos-nk-sidebar.nk-sidebar {
                    min-height: 0 !important;
                    max-height: none !important;
                    height: auto !important;
                }
            }

            @media (min-width: 1024px) {
                .content-wrap {
                    padding: 0.75rem 0.65rem 1.15rem;
                }

                body.app-body .content-wrap > section.content {
                    padding: 0.4rem 0.55rem 1rem;
                }
            }