: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;
                --nk-table-inset-x: 1.25rem;
                /* SweetAlert / swal confirm — above header and modals */
                --nk-z-swal-overlay: 10180;
            }

            * {
                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: hidden;
            }

            .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;
                }

                /* Mini rail: widen column on hover so main + header shift right (no overlay). */
                .app-shell:has(.app-sidebar-column.is-mini:hover) {
                    --app-sidebar-width: 296px !important;
                }

                .app-sidebar-column.is-mini:hover {
                    --app-sidebar-width: 296px !important;
                    flex: 0 0 296px !important;
                    width: 296px !important;
                    min-width: 296px !important;
                    max-width: 296px !important;
                }

                .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;
                }

                /* POS checkout: shared horizontal gutter on scroll pane; section stays full-width inside it */
                body.pos-stickydrop-ui #scrollable-container.content-wrap:has(#sd_pos_checkout_split_row) {
                    padding-bottom: 0 !important;
                    padding-left: var(--sd-pos-checkout-gutter, 0.65rem) !important;
                    padding-right: var(--sd-pos-checkout-gutter, 0.65rem) !important;
                    box-sizing: border-box;
                }

                body.pos-stickydrop-ui #scrollable-container:has(#sd_pos_checkout_split_row) > section.content {
                    padding-bottom: 0 !important;
                    padding-left: 0 !important;
                    padding-right: 0 !important;
                }
            }

/**
 * CRUD forms (non-POS): one scroll pane + room for Save/Submit above shell footer.
 * Fixes #scrollable-container tw-h-screen fighting .app-main > main overflow, and
 * footer tw-mt-auto leaving a dead zone above the copyright footer.
 */
@media (min-width: 768px) {
    body.app-body:not(.pos-stickydrop-ui) .app-main > main {
        display: flex;
        flex-direction: column;
        min-height: 0;
        overflow: hidden;
    }

    body.app-body:not(.pos-stickydrop-ui) #scrollable-container.content-wrap {
        flex: 1 1 auto;
        min-height: 0;
        height: auto !important;
        max-height: none !important;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: max(1.35rem, env(safe-area-inset-bottom, 0px));
    }
}

@media (max-width: 767.98px) {
    body.app-body:not(.pos-stickydrop-ui) .app-main > main {
        display: flex;
        flex-direction: column;
        min-height: 0;
        overflow: hidden;
    }

    body.app-body:not(.pos-stickydrop-ui) #scrollable-container.content-wrap {
        flex: 1 1 auto;
        min-height: 0;
        height: auto !important;
        max-height: none !important;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: var(--app-mobile-bottom-nav-gutter, calc(5.5rem + env(safe-area-inset-bottom, 0px)));
    }
}

body.app-body:not(.pos-stickydrop-ui) #scrollable-container.content-wrap > .tw-mt-auto {
    margin-top: 1.25rem !important;
    flex-shrink: 0;
}

/**
 * Business locations org tree: fill shell column; scroll inside tree body only.
 * Body class set from business_location/index.blade.php (reliable vs :has alone).
 */
@media (min-width: 768px) {
    body.app-body.app-body--bl-tree-view:not(.pos-stickydrop-ui) .app-main > main {
        display: flex;
        flex-direction: column;
        min-height: 0;
        overflow: hidden;
    }

    body.app-body.app-body--bl-tree-view:not(.pos-stickydrop-ui) #scrollable-container.content-wrap {
        display: flex !important;
        flex-direction: column !important;
        flex: 1 1 auto !important;
        min-height: 0 !important;
        height: 100% !important;
        max-height: none !important;
        overflow: hidden !important;
        padding-bottom: 0 !important;
    }

    body.app-body.app-body--bl-tree-view:not(.pos-stickydrop-ui) #scrollable-container.content-wrap.tw-h-screen {
        min-height: 0 !important;
    }

    body.app-body.app-body--bl-tree-view:not(.pos-stickydrop-ui) #scrollable-container.content-wrap > #app {
        flex: 0 0 auto;
    }

    body.app-body.app-body--bl-tree-view:not(.pos-stickydrop-ui) #scrollable-container.content-wrap > section.content {
        display: flex !important;
        flex-direction: column !important;
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow: hidden !important;
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }

    body.app-body.app-body--bl-tree-view:not(.pos-stickydrop-ui)
        #scrollable-container.content-wrap
        > section.content.business-locations-section {
        width: 100% !important;
        max-width: none !important;
        align-self: stretch !important;
    }

    body.app-body.app-body--bl-tree-view:not(.pos-stickydrop-ui)
        #scrollable-container.content-wrap
        > section.content.business-locations-section
        > .business-locations-page.business-locations-view--tree {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        width: 100% !important;
        max-width: none !important;
        overflow: hidden !important;
    }

    body.app-body.app-body--bl-tree-view:not(.pos-stickydrop-ui)
        #scrollable-container.content-wrap
        > section.content.business-locations-section
        > .business-locations-page.business-locations-view--tree
        > .business-locations-org-tree-wrap {
        width: 100% !important;
        max-width: none !important;
        align-self: stretch !important;
    }

    body.app-body.app-body--bl-tree-view:not(.pos-stickydrop-ui) #scrollable-container.content-wrap > .tw-mt-auto {
        flex: 0 0 auto !important;
        margin-top: 0 !important;
        padding-top: 0.35rem;
    }
}

@media (max-width: 767.98px) {
    body.app-body.app-body--bl-tree-view:not(.pos-stickydrop-ui) .app-main > main {
        display: flex;
        flex-direction: column;
        min-height: 0;
        overflow: hidden;
    }

    body.app-body.app-body--bl-tree-view:not(.pos-stickydrop-ui) #scrollable-container.content-wrap {
        display: flex !important;
        flex-direction: column !important;
        flex: 1 1 auto !important;
        min-height: 0 !important;
        height: 100% !important;
        max-height: none !important;
        overflow: hidden !important;
        padding-bottom: 0 !important;
    }

    body.app-body.app-body--bl-tree-view:not(.pos-stickydrop-ui) #scrollable-container.content-wrap > section.content {
        display: flex !important;
        flex-direction: column !important;
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow: hidden !important;
        padding-bottom: 0 !important;
    }

    body.app-body.app-body--bl-tree-view:not(.pos-stickydrop-ui)
        #scrollable-container.content-wrap
        > section.content.business-locations-section {
        width: 100% !important;
        max-width: none !important;
        align-self: stretch !important;
    }

    body.app-body.app-body--bl-tree-view:not(.pos-stickydrop-ui)
        #scrollable-container.content-wrap
        > section.content.business-locations-section
        > .business-locations-page.business-locations-view--tree {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        width: 100% !important;
        max-width: none !important;
        overflow: hidden !important;
    }

    body.app-body.app-body--bl-tree-view:not(.pos-stickydrop-ui)
        #scrollable-container.content-wrap
        > section.content.business-locations-section
        > .business-locations-page.business-locations-view--tree
        > .business-locations-org-tree-wrap {
        width: 100% !important;
        max-width: none !important;
        align-self: stretch !important;
    }

    body.app-body.app-body--bl-tree-view:not(.pos-stickydrop-ui) #scrollable-container.content-wrap > .tw-mt-auto {
        margin-top: 0 !important;
        flex-shrink: 0;
    }
}

body.app-body:not(.pos-stickydrop-ui) .content-wrap > section.content {
    padding-bottom: 2.25rem;
}

body.app-body:not(.pos-stickydrop-ui) .content-wrap > section.content .box-footer,
body.app-body:not(.pos-stickydrop-ui) .content-wrap > section.content .form-group-buttons,
body.app-body:not(.pos-stickydrop-ui) .content-wrap > section.content [type='submit'],
body.app-body:not(.pos-stickydrop-ui) .content-wrap > section.content .btn-primary {
    visibility: visible;
    opacity: 1;
}

/* Impersonation / “back to admin” strip — full-width banner above shell */
.app-shell--impersonating > .nestiko-impersonation-strip,
.nestiko-impersonation-strip {
    display: block !important;
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    background: linear-gradient(90deg, #4338ca 0%, #4f46e5 42%, #6366f1 100%);
    color: #f8fafc;
    border-bottom: 1px solid rgba(15, 23, 42, 0.18);
    box-shadow: 0 2px 8px rgba(67, 56, 202, 0.22);
    z-index: 1210;
}

.nestiko-impersonation-strip__inner {
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.65rem 1rem;
    width: 100%;
    max-width: 100%;
    min-height: 2.125rem;
    padding: 0.35rem 1rem;
    margin: 0;
    box-sizing: border-box;
}

.nestiko-impersonation-strip__lead {
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    gap: 0.55rem;
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
}

.nestiko-impersonation-strip__icon-wrap {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.65rem;
    height: 1.65rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.28);
}

.nestiko-impersonation-strip__icon-wrap .ti {
    font-size: 0.95rem;
    line-height: 1;
    color: #fff;
}

.nestiko-impersonation-strip__copy {
    display: inline-flex !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    gap: 0.35rem;
    min-width: 0;
    font-size: 0.8125rem;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nestiko-impersonation-strip__kicker {
    flex-shrink: 0;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.nestiko-impersonation-strip__sep {
    flex-shrink: 0;
    opacity: 0.65;
    font-weight: 700;
}

.nestiko-impersonation-strip__label {
    flex-shrink: 0;
    color: rgba(255, 255, 255, 0.82);
    font-weight: 500;
}

.nestiko-impersonation-strip__subject {
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 700;
    color: #fff;
}

.nestiko-impersonation-strip__action {
    display: inline-flex !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    gap: 0.4rem;
    flex-shrink: 0;
    padding: 0.32rem 0.8rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.45);
    background: #ffffff;
    color: #312e81;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none !important;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.nestiko-impersonation-strip__action:hover,
.nestiko-impersonation-strip__action:focus {
    background: #f8fafc;
    border-color: #fff;
    color: #4338ca;
    text-decoration: none !important;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.16);
    transform: translateY(-1px);
}

.nestiko-impersonation-strip__action-text {
    display: inline-flex !important;
    flex-flow: row nowrap !important;
    align-items: baseline !important;
    gap: 0.28rem;
    min-width: 0;
}

.nestiko-impersonation-strip__action-label {
    font-weight: 600;
    color: #64748b;
}

.nestiko-impersonation-strip__action-user {
    font-weight: 800;
    color: #4338ca;
    max-width: 12rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nestiko-impersonation-strip__action .ti {
    font-size: 0.95rem;
    line-height: 1;
    color: #4f46e5;
    flex-shrink: 0;
}

@media (max-width: 639px) {
    .nestiko-impersonation-strip__inner {
        padding-left: 0.65rem;
        padding-right: 0.65rem;
    }

    .nestiko-impersonation-strip__label {
        display: none;
    }

    .nestiko-impersonation-strip__sep {
        display: none;
    }

    .nestiko-impersonation-strip__action-label {
        display: none;
    }

    .nestiko-impersonation-strip__action-user {
        max-width: 8rem;
    }
}

:root[data-theme='dark'] .nestiko-impersonation-strip {
    background: linear-gradient(90deg, #312e81 0%, #3730a3 45%, #4338ca 100%);
    border-bottom-color: rgba(0, 0, 0, 0.35);
    box-shadow: 0 2px 10px rgba(2, 6, 23, 0.45);
}

:root[data-theme='dark'] .nestiko-impersonation-strip__action {
    background: #f8fafc;
    border-color: rgba(255, 255, 255, 0.35);
    color: #312e81;
}

:root[data-theme='dark'] .nestiko-impersonation-strip__action:hover,
:root[data-theme='dark'] .nestiko-impersonation-strip__action:focus {
    background: #fff;
    color: #4338ca;
}

/* Browser fullscreen: hide sidebar rail (mini or expanded) — main uses full width */
.app-shell:is(:fullscreen, :-webkit-full-screen, :-moz-full-screen, :-ms-fullscreen),
.app-shell.is-browser-fullscreen,
body.is-browser-fullscreen .app-shell {
    width: 100%;
    height: 100%;
    max-height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: var(--page-bg, #f1f5f9);
    --app-sidebar-width: 0px;
}

.app-shell:is(:fullscreen, :-webkit-full-screen, :-moz-full-screen, :-ms-fullscreen) .app-shell-body,
.app-shell.is-browser-fullscreen .app-shell-body,
body.is-browser-fullscreen .app-shell .app-shell-body {
    flex: 1 1 0%;
    min-height: 0;
    display: flex;
    flex-direction: row;
    overflow: hidden;
}

.app-shell:is(:fullscreen, :-webkit-full-screen, :-moz-full-screen, :-ms-fullscreen) .app-sidebar-column,
.app-shell.is-browser-fullscreen .app-sidebar-column,
body.is-browser-fullscreen .app-shell .app-sidebar-column {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    flex: 0 0 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    position: absolute !important;
    left: -9999px !important;
    opacity: 0 !important;
}

.app-shell:is(:fullscreen, :-webkit-full-screen, :-moz-full-screen, :-ms-fullscreen) .app-sidebar-resizer,
.app-shell.is-browser-fullscreen .app-sidebar-resizer,
body.is-browser-fullscreen .app-shell .app-sidebar-resizer {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    flex: 0 0 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

.app-shell:is(:fullscreen, :-webkit-full-screen, :-moz-full-screen, :-ms-fullscreen) .app-main,
.app-shell.is-browser-fullscreen .app-main,
body.is-browser-fullscreen .app-shell .app-main {
    flex: 1 1 0% !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

/* SweetAlert (swal) must cover Nestiko header (10065) and Bootstrap drawers (10140+) */
body.app-body .swal-overlay {
    z-index: var(--nk-z-swal-overlay, 10180) !important;
}