/*
|--------------------------------------------------------------------------
| VPOS Enterprise UI Foundation
|--------------------------------------------------------------------------
| Central visual layer for the VPOS redesign.
|
| This file intentionally works as a compatibility layer over Bootstrap,
| AdminLTE, DataTables, Select2, iCheck, datepickers, and existing POS JS.
| Keep business logic, field names, IDs, and JS-dependent classes untouched.
|--------------------------------------------------------------------------
*/

:root {
    --vpos-font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    --vpos-font-size: 12px;
    --vpos-line-height: 1.35;

    --vpos-bg: #f4f6f8;
    --vpos-bg-subtle: #f8fafc;
    --vpos-surface: #ffffff;
    --vpos-surface-raised: #ffffff;
    --vpos-surface-muted: #f1f5f9;
    --vpos-border: #d8e0e8;
    --vpos-border-strong: #c4ced9;

    --vpos-text: #1f2937;
    --vpos-text-strong: #111827;
    --vpos-text-muted: #64748b;
    --vpos-text-soft: #94a3b8;

    --vpos-primary: #2563eb;
    --vpos-primary-hover: #1d4ed8;
    --vpos-primary-active: #1e40af;
    --vpos-primary-soft: #eff6ff;
    --vpos-primary-ring: rgba(37, 99, 235, 0.18);

    --vpos-success: #16834f;
    --vpos-success-soft: #e7f6ee;
    --vpos-warning: #b7791f;
    --vpos-warning-soft: #fff7ed;
    --vpos-danger: #b91c1c;
    --vpos-danger-soft: #fef2f2;
    --vpos-info: #0369a1;
    --vpos-info-soft: #eff6ff;

    --vpos-space-1: 4px;
    --vpos-space-2: 8px;
    --vpos-space-3: 12px;
    --vpos-space-4: 16px;
    --vpos-space-5: 20px;

    --vpos-radius-xs: 3px;
    --vpos-radius-sm: 5px;
    --vpos-radius: 7px;
    --vpos-radius-lg: 10px;

    --vpos-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.08);
    --vpos-shadow: 0 6px 16px rgba(15, 23, 42, 0.1);
    --vpos-shadow-lg: 0 14px 34px rgba(15, 23, 42, 0.16);

    --vpos-header-height: 44px;
    --vpos-sidebar-width: 230px;
    --vpos-sidebar-collapsed-width: 50px;
    --vpos-footer-height: 34px;
    --vpos-control-height: 30px;
    --vpos-table-row-height: 32px;
    --vpos-table-font-size: 11.5px;
}

body.skin-blue,
body.skin-blue-light {
    --vpos-primary: #2563eb;
    --vpos-primary-hover: #1d4ed8;
    --vpos-primary-active: #1e40af;
    --vpos-primary-soft: #eff6ff;
    --vpos-primary-ring: rgba(37, 99, 235, 0.18);
}

body.skin-black,
body.skin-black-light {
    --vpos-primary: #475569;
    --vpos-primary-hover: #334155;
    --vpos-primary-active: #1f2937;
    --vpos-primary-soft: #f1f5f9;
    --vpos-primary-ring: rgba(71, 85, 105, 0.18);
}

body.skin-purple,
body.skin-purple-light {
    --vpos-primary: #6d5bd0;
    --vpos-primary-hover: #5948b8;
    --vpos-primary-active: #453795;
    --vpos-primary-soft: #f3f1ff;
    --vpos-primary-ring: rgba(109, 91, 208, 0.18);
}

body.skin-green,
body.skin-green-light {
    --vpos-primary: #16834f;
    --vpos-primary-hover: #126b41;
    --vpos-primary-active: #0f5736;
    --vpos-primary-soft: #e7f6ee;
    --vpos-primary-ring: rgba(22, 131, 79, 0.18);
}

body.skin-red,
body.skin-red-light {
    --vpos-primary: #c2410c;
    --vpos-primary-hover: #9a3412;
    --vpos-primary-active: #7c2d12;
    --vpos-primary-soft: #fff1ec;
    --vpos-primary-ring: rgba(194, 65, 12, 0.18);
}

body.skin-yellow,
body.skin-yellow-light {
    --vpos-primary: #b7791f;
    --vpos-primary-hover: #975a16;
    --vpos-primary-active: #7c4a12;
    --vpos-primary-soft: #fff8e7;
    --vpos-primary-ring: rgba(183, 121, 31, 0.2);
}

body.vpos-font-s {
    --vpos-font-size: 11px;
    --vpos-table-font-size: 10.8px;
    --vpos-control-height: 28px;
}

body.vpos-font-l {
    --vpos-font-size: 13px;
    --vpos-table-font-size: 12.2px;
    --vpos-control-height: 32px;
}

body.vpos-font-xl {
    --vpos-font-size: 14px;
    --vpos-table-font-size: 13px;
    --vpos-control-height: 34px;
}

html,
body {
    min-height: 100%;
}

body.vpos-app,
body.vpos-app .wrapper {
    background: var(--vpos-bg);
    color: var(--vpos-text);
    font-family: var(--vpos-font-family);
    font-size: var(--vpos-font-size);
    line-height: var(--vpos-line-height);
}

body.vpos-app a {
    color: var(--vpos-primary);
}

body.vpos-app a:hover,
body.vpos-app a:focus {
    color: var(--vpos-primary-hover);
}

.vpos-content-wrapper,
.content-wrapper {
    background: var(--vpos-bg);
}

.vpos-main-content {
    min-height: calc(100vh - var(--vpos-header-height) - var(--vpos-footer-height));
}

.vpos-compact-ui .content {
    padding: 10px;
}

.vpos-compact-ui .content-header {
    padding: 9px 10px 4px;
}

.vpos-compact-ui .content-header > h1 {
    margin: 0;
    color: var(--vpos-text-strong);
    font-size: 18px;
    line-height: 1.2;
    font-weight: 700;
}

.vpos-compact-ui .content-header > h1 small {
    color: var(--vpos-text-muted);
    font-size: 11.5px;
    font-weight: 500;
}

.vpos-compact-ui .breadcrumb {
    padding: 2px 0;
    margin-bottom: 0;
    background: transparent;
    font-size: 11.5px;
}

.vpos-shell {
    min-height: 100vh;
    background: var(--vpos-bg);
}

.vpos-commandbar {
    min-height: 42px;
    margin-bottom: var(--vpos-space-2);
    padding: 6px 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--vpos-space-2);
    border: 1px solid var(--vpos-border);
    border-radius: var(--vpos-radius);
    background: var(--vpos-surface);
    box-shadow: var(--vpos-shadow-sm);
}

.vpos-commandbar-left,
.vpos-commandbar-right,
.vpos-toolbar-group {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.vpos-commandbar-right {
    justify-content: flex-end;
    margin-left: auto;
}

.vpos-card,
.vpos-panel,
.vpos-filter-panel,
.vpos-kpi,
.vpos-pos-workspace {
    border: 1px solid var(--vpos-border);
    border-radius: var(--vpos-radius);
    background: var(--vpos-surface);
    box-shadow: var(--vpos-shadow-sm);
}

.vpos-card,
.vpos-panel {
    margin-bottom: 10px;
}

.vpos-card-header,
.vpos-panel-header,
.vpos-filter-header {
    min-height: 36px;
    padding: 7px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--vpos-space-2);
    border-bottom: 1px solid var(--vpos-border);
}

.vpos-card-title,
.vpos-panel-title,
.vpos-filter-title {
    margin: 0;
    color: var(--vpos-text-strong);
    font-size: 13px;
    font-weight: 700;
}

.vpos-card-body,
.vpos-panel-body,
.vpos-filter-body {
    padding: 10px;
}

.vpos-kpi {
    min-height: 72px;
    padding: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.vpos-kpi-icon {
    width: 34px;
    height: 34px;
    border-radius: var(--vpos-radius);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--vpos-primary-soft);
    color: var(--vpos-primary);
    font-size: 16px;
}

.vpos-kpi-label {
    color: var(--vpos-text-muted);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.vpos-kpi-value {
    margin-top: 3px;
    color: var(--vpos-text-strong);
    font-size: 18px;
    font-weight: 750;
}

.vpos-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px 12px;
}

.vpos-form-grid .form-group {
    margin-bottom: 0;
}

.vpos-table-shell,
.table-responsive {
    border-radius: var(--vpos-radius);
}

.vpos-table {
    width: 100%;
}

.vpos-compact-ui .box,
.vpos-compact-ui .info-box,
.vpos-compact-ui .small-box {
    border-radius: var(--vpos-radius);
    border: 1px solid var(--vpos-border);
    box-shadow: var(--vpos-shadow-sm);
    background: var(--vpos-surface);
}

.vpos-compact-ui .box {
    margin-bottom: 10px;
}

.vpos-compact-ui .box-header {
    padding: 8px 10px;
    border-bottom-color: var(--vpos-border);
}

.vpos-compact-ui .box-title {
    color: var(--vpos-text-strong);
    font-size: 13px;
    font-weight: 700;
}

.vpos-compact-ui .box-body {
    padding: 10px;
}

.vpos-compact-ui .box-footer {
    padding: 8px 10px;
    border-top-color: var(--vpos-border);
    background: var(--vpos-bg-subtle);
}

.vpos-compact-ui .btn {
    border-radius: var(--vpos-radius-sm);
    font-weight: 650;
}

.vpos-compact-ui .btn-sm,
.vpos-compact-ui .btn-group-sm > .btn {
    height: 28px;
    padding: 4px 8px;
    font-size: 11.5px;
}

.vpos-compact-ui .btn-flat {
    border-radius: var(--vpos-radius-sm);
}

.vpos-compact-ui .btn-primary,
.vpos-compact-ui .bg-blue,
.vpos-compact-ui .bg-light-blue {
    border-color: var(--vpos-primary);
    background-color: var(--vpos-primary) !important;
}

.vpos-compact-ui .btn-primary:hover,
.vpos-compact-ui .btn-primary:focus {
    border-color: var(--vpos-primary-hover);
    background-color: var(--vpos-primary-hover) !important;
}

.vpos-compact-ui .form-control {
    min-height: var(--vpos-control-height);
    height: var(--vpos-control-height);
    padding: 5px 8px;
    border-color: var(--vpos-border-strong);
    border-radius: var(--vpos-radius-sm);
    box-shadow: none;
    color: var(--vpos-text);
    font-size: 12px;
}

.vpos-compact-ui textarea.form-control {
    height: auto;
    min-height: 72px;
}

.vpos-compact-ui .form-control:focus {
    border-color: var(--vpos-primary);
    box-shadow: 0 0 0 2px var(--vpos-primary-ring);
}

.vpos-compact-ui label {
    margin-bottom: 4px;
    color: var(--vpos-text);
    font-size: 11.5px;
    font-weight: 650;
}

.vpos-compact-ui .form-group {
    margin-bottom: 10px;
}

.vpos-compact-ui .input-group-addon {
    padding: 5px 8px;
    border-color: var(--vpos-border-strong);
    background: var(--vpos-surface-muted);
    color: var(--vpos-text-muted);
    border-radius: var(--vpos-radius-sm);
    font-size: 12px;
}

.vpos-compact-ui .select2-container .select2-selection--single,
.vpos-compact-ui .select2-container--default .select2-selection--single {
    height: var(--vpos-control-height);
    border-color: var(--vpos-border-strong);
    border-radius: var(--vpos-radius-sm);
}

.vpos-compact-ui .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: calc(var(--vpos-control-height) - 2px);
    color: var(--vpos-text);
    font-size: 12px;
}

.vpos-compact-ui .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: calc(var(--vpos-control-height) - 2px);
}

.vpos-compact-ui .select2-dropdown {
    border-color: var(--vpos-border-strong);
    border-radius: var(--vpos-radius-sm);
    box-shadow: var(--vpos-shadow);
    font-size: 12px;
}

.vpos-compact-ui table.table {
    margin-bottom: 0;
    color: var(--vpos-text);
    font-size: var(--vpos-table-font-size);
}

.vpos-compact-ui .table > thead > tr > th {
    height: 30px;
    padding: 6px 8px;
    border-bottom: 1px solid var(--vpos-border-strong);
    background: var(--vpos-surface-muted);
    color: var(--vpos-text-strong);
    font-size: 11px;
    font-weight: 750;
    letter-spacing: 0.02em;
    vertical-align: middle;
}

.vpos-compact-ui .table > tbody > tr > td,
.vpos-compact-ui .table > tfoot > tr > td {
    min-height: var(--vpos-table-row-height);
    padding: 6px 8px;
    border-top-color: var(--vpos-border);
    vertical-align: middle;
}

.vpos-compact-ui .table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #fbfdff;
}

.vpos-compact-ui .table-hover > tbody > tr:hover,
.vpos-compact-ui table.dataTable tbody tr:hover {
    background-color: var(--vpos-primary-soft);
}

.vpos-compact-ui .dataTables_wrapper {
    color: var(--vpos-text);
    font-size: 11.5px;
}

.vpos-compact-ui .dataTables_length,
.vpos-compact-ui .dataTables_filter,
.vpos-compact-ui .dt-buttons {
    margin-bottom: 7px;
}

.vpos-compact-ui .dataTables_filter input {
    height: 28px;
    margin-left: 5px;
    border: 1px solid var(--vpos-border-strong);
    border-radius: var(--vpos-radius-sm);
}

.vpos-compact-ui .dt-buttons .btn {
    height: 28px;
    padding: 4px 7px;
    font-size: 11px;
}

.vpos-compact-ui .pagination > li > a,
.vpos-compact-ui .pagination > li > span {
    padding: 4px 8px;
    color: var(--vpos-primary);
    border-color: var(--vpos-border);
    font-size: 11.5px;
}

.vpos-compact-ui .pagination > .active > a,
.vpos-compact-ui .pagination > .active > span {
    border-color: var(--vpos-primary);
    background: var(--vpos-primary);
}

.vpos-compact-ui .modal-content {
    border: 1px solid var(--vpos-border);
    border-radius: var(--vpos-radius-lg);
    box-shadow: var(--vpos-shadow-lg);
}

.vpos-compact-ui .modal-header {
    padding: 9px 12px;
    border-bottom-color: var(--vpos-border);
}

.vpos-compact-ui .modal-title {
    color: var(--vpos-text-strong);
    font-size: 14px;
    font-weight: 750;
}

.vpos-compact-ui .modal-body {
    padding: 12px;
}

.vpos-compact-ui .modal-footer {
    padding: 9px 12px;
    border-top-color: var(--vpos-border);
    background: var(--vpos-bg-subtle);
    border-radius: 0 0 var(--vpos-radius-lg) var(--vpos-radius-lg);
}

.vpos-header.main-header {
    border-bottom: 1px solid rgba(15, 23, 42, 0.1);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.14);
}

.vpos-header .logo,
.vpos-header .navbar {
    min-height: var(--vpos-header-height);
}

.vpos-header .logo {
    height: var(--vpos-header-height);
    line-height: var(--vpos-header-height);
    padding: 0 10px;
    font-size: 14px;
    font-weight: 750;
}

.vpos-brand-full {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 0;
}

.vpos-brand-name {
    display: inline-block;
    max-width: 172px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vpos-online-indicator {
    flex: 0 0 auto;
    font-size: 8px;
}

.vpos-sidebar-toggle {
    height: var(--vpos-header-height);
    line-height: var(--vpos-header-height);
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.vpos-navbar-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-height: var(--vpos-header-height);
    gap: 5px;
    padding-right: 8px;
}

.vpos-header-action,
.vpos-user-nav,
.vpos-user-menu {
    flex: 0 0 auto;
}

.vpos-header-btn {
    min-width: 28px;
    height: 28px;
    padding: 4px 8px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border-radius: var(--vpos-radius-sm) !important;
    box-shadow: none !important;
    line-height: 1 !important;
}

.vpos-header-btn span {
    max-width: 124px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vpos-icon-btn {
    width: 28px;
    padding-right: 0 !important;
    padding-left: 0 !important;
}

.vpos-header-date {
    height: 28px;
    padding: 0 8px;
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: var(--vpos-radius-sm);
    color: rgba(255, 255, 255, 0.9);
    font-size: 11.5px;
}

.vpos-user-toggle {
    min-height: var(--vpos-header-height);
    display: flex !important;
    align-items: center;
    gap: 6px;
}

.vpos-user-avatar,
.vpos-user-header-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-weight: 750;
}

.vpos-user-avatar {
    width: 24px;
    height: 24px;
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    font-size: 11px;
}

.vpos-user-header-avatar {
    width: 60px;
    height: 60px;
    margin: 0 auto 8px;
    background: var(--vpos-primary-soft);
    color: var(--vpos-primary);
    font-size: 22px;
}

.vpos-user-name {
    max-width: 132px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vpos-sidebar.main-sidebar {
    width: var(--vpos-sidebar-width);
    box-shadow: 1px 0 4px rgba(15, 23, 42, 0.16);
}

.vpos-sidebar-inner {
    padding-bottom: 8px;
}

.vpos-sidebar-brand {
    padding: 10px 10px 8px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.22);
}

.vpos-sidebar-brand-link {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.vpos-sidebar-logo-wrap,
.vpos-sidebar-logo-placeholder {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--vpos-radius);
    background: var(--vpos-primary-soft);
    color: var(--vpos-primary);
    font-weight: 800;
}

.vpos-sidebar-logo {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.vpos-sidebar-brand-text,
.vpos-sidebar-user-meta {
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.vpos-sidebar-brand-text strong,
.vpos-sidebar-user-meta strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vpos-sidebar-brand-text small,
.vpos-sidebar-user-meta small {
    color: inherit;
    opacity: 0.72;
    font-size: 10.5px;
}

.vpos-sidebar-user {
    margin: 8px 8px 6px;
    padding: 7px;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: var(--vpos-radius);
    background: rgba(148, 163, 184, 0.08);
}

.vpos-sidebar-user-avatar {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--vpos-primary);
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
}

.vpos-sidebar-menu-wrap {
    padding: 4px 6px 8px;
}

.vpos-sidebar .sidebar-menu > li {
    margin: 1px 0;
}

.vpos-sidebar .sidebar-menu > li > a {
    margin: 0;
    padding: 8px 9px 8px 10px;
    overflow: hidden;
    border-left: 3px solid transparent;
    border-radius: var(--vpos-radius-sm);
    font-size: 12px;
    font-weight: 600;
    text-overflow: ellipsis;
}

.vpos-sidebar .sidebar-menu > li.active > a,
.vpos-sidebar .sidebar-menu > li.menu-open > a {
    border-left-color: var(--vpos-primary);
}

.vpos-sidebar .sidebar-menu li > a > .pull-right-container {
    right: 8px;
}

.vpos-sidebar .treeview-menu {
    margin: 1px 0 4px 12px;
    padding: 2px 0 3px 6px;
    border-left: 1px solid rgba(148, 163, 184, 0.28);
}

.vpos-sidebar .treeview-menu > li > a {
    padding: 6px 8px 6px 14px;
    overflow: hidden;
    border-radius: var(--vpos-radius-sm);
    font-size: 11.5px;
    text-overflow: ellipsis;
}

.sidebar-mini.sidebar-collapse .vpos-sidebar-brand,
.sidebar-mini.sidebar-collapse .vpos-sidebar-user {
    display: none;
}

.sidebar-mini.sidebar-collapse .vpos-sidebar-menu-wrap {
    padding-right: 0;
    padding-left: 0;
}

.vpos-footer.main-footer {
    min-height: var(--vpos-footer-height);
    padding: 6px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border-top: 1px solid var(--vpos-border);
    background: var(--vpos-surface);
    color: var(--vpos-text-muted);
    font-size: 11.5px;
}

.vpos-footer-left,
.vpos-footer-right {
    min-width: 0;
    display: flex;
    align-items: center;
}

.vpos-footer-left small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vpos-font-tools {
    display: inline-flex;
    gap: 2px;
}

.vpos-font-tools .btn {
    min-width: 25px;
    height: 24px;
    padding: 2px 5px;
    border-radius: var(--vpos-radius-xs) !important;
    line-height: 1;
}

.vpos-compact-ui .label,
.vpos-compact-ui .badge {
    border-radius: 999px;
    padding: 3px 6px;
    font-size: 10.5px;
    font-weight: 700;
}

.vpos-compact-ui .alert {
    padding: 8px 10px;
    border-radius: var(--vpos-radius);
    font-size: 12px;
}

.vpos-filter-panel .form-control,
.vpos-commandbar .form-control {
    height: 28px;
}

.vpos-pos-layout .content {
    padding-bottom: 0 !important;
}

.vpos-pos-workspace {
    min-height: calc(100vh - var(--vpos-header-height));
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 10px;
    padding: 10px;
}

.vpos-pos-products,
.vpos-pos-cart {
    min-width: 0;
}

body.vpos-auth-page {
    min-height: 100vh;
    background: var(--vpos-bg);
    color: var(--vpos-text);
    font-family: var(--vpos-font-family);
    font-size: var(--vpos-font-size);
    line-height: var(--vpos-line-height);
}

.vpos-auth-shell {
    min-height: 100vh;
    padding: 0;
    background:
        linear-gradient(90deg, rgba(15, 23, 42, 0.05), rgba(15, 23, 42, 0)),
        var(--vpos-bg);
}

.vpos-auth-row {
    min-height: 100vh;
    display: flex;
    margin-right: 0;
    margin-left: 0;
}

.vpos-auth-row > .vpos-auth-left,
.vpos-auth-row > .vpos-auth-right {
    padding-right: 0;
    padding-left: 0;
}

.vpos-auth-row > .vpos-auth-right {
    display: block;
}

.vpos-auth-left,
.vpos-auth-right {
    min-height: 100vh;
}

.vpos-auth-left {
    overflow: hidden;
    padding: 0;
    background: var(--vpos-primary-active);
    color: #ffffff;
}

.vpos-auth-left-content {
    min-height: 100vh;
    padding: 26px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.vpos-auth-brand,
.vpos-auth-brand:hover,
.vpos-auth-brand:focus {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #ffffff;
    text-decoration: none;
}

.vpos-auth-brand-logo-wrap,
.vpos-auth-brand-fallback {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: var(--vpos-radius);
    background: rgba(255, 255, 255, 0.14);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

.vpos-auth-brand-logo {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.vpos-auth-brand-fallback {
    font-size: 18px;
    font-weight: 800;
}

.vpos-auth-brand-text {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.vpos-auth-brand-text strong,
.vpos-auth-brand-text small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vpos-auth-brand-text strong {
    font-size: 16px;
    letter-spacing: 0;
}

.vpos-auth-brand-text small {
    max-width: 250px;
    color: rgba(255, 255, 255, 0.74);
    font-size: 11px;
}

.vpos-auth-left-copy {
    max-width: 360px;
}

.vpos-auth-left-copy h2 {
    margin: 0 0 10px;
    color: #ffffff;
    font-size: 25px;
    line-height: 1.2;
    font-weight: 750;
}

.vpos-auth-left-copy p {
    margin: 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: 13px;
    line-height: 1.6;
}

.vpos-auth-right {
    min-width: 0;
    padding: 0;
    background: var(--vpos-bg);
}

.vpos-auth-right label {
    color: var(--vpos-text);
}

.vpos-auth-right a {
    color: var(--vpos-primary);
    font-size: inherit;
}

.vpos-auth-right a:hover,
.vpos-auth-right a:focus {
    color: var(--vpos-primary-hover);
}

.vpos-auth-topbar {
    min-height: var(--vpos-header-height);
    padding: 8px 18px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    border-bottom: 1px solid var(--vpos-border);
    background: var(--vpos-surface);
}

.vpos-auth-language .form-control {
    min-width: 150px;
}

.vpos-auth-links {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11.5px;
}

.vpos-auth-muted {
    color: var(--vpos-text-muted);
}

.vpos-auth-link {
    color: var(--vpos-primary);
    font-weight: 650;
}

.vpos-auth-register-btn.btn {
    height: 28px;
    padding: 4px 9px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border-radius: var(--vpos-radius-sm) !important;
    background: var(--vpos-primary) !important;
    border-color: var(--vpos-primary) !important;
    color: #ffffff !important;
    font-size: 11.5px;
}

.vpos-auth-content {
    min-height: calc(100vh - var(--vpos-header-height));
    padding: 28px 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vpos-auth-logo,
.vpos-login-card,
.vpos-register-card {
    font-family: var(--vpos-font-family);
}

.vpos-login-panel {
    max-width: 460px;
    padding: 0;
}

.vpos-login-card,
.vpos-register-card {
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    padding: 18px;
    border: 1px solid var(--vpos-border);
    border-radius: var(--vpos-radius-lg);
    background: var(--vpos-surface);
    box-shadow: var(--vpos-shadow);
}

.vpos-login-header {
    margin-bottom: 15px;
}

.vpos-login-title,
.vpos-register-title {
    margin: 0 0 4px;
    color: var(--vpos-text-strong) !important;
    font-size: 20px;
    line-height: 1.2;
    font-weight: 750;
}

.vpos-login-subtitle {
    display: block;
    color: var(--vpos-text-muted);
    font-size: 11.5px;
}

.vpos-login-form .form-group {
    margin-bottom: 12px;
}

.vpos-login-label {
    margin-bottom: 4px;
    color: var(--vpos-text);
    font-size: 11.5px;
    font-weight: 700;
}

.vpos-login-control.form-control {
    height: 34px;
    border-radius: var(--vpos-radius-sm);
}

.has-feedback .vpos-login-control.form-control {
    padding-right: 34px;
}

.vpos-login-feedback.form-control-feedback {
    top: 22px;
    width: 32px;
    height: 34px;
    line-height: 34px;
    color: var(--vpos-text-soft);
}

.vpos-login-options {
    margin: 2px 0 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: var(--vpos-text-muted);
    font-size: 11.5px;
}

.vpos-login-remember {
    margin: 0;
}

.vpos-login-remember label {
    min-height: 18px;
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
}

.vpos-login-forgot {
    color: var(--vpos-primary);
    font-weight: 650;
    white-space: nowrap;
}

.vpos-login-submit-wrap {
    margin-bottom: 0 !important;
}

.vpos-login-submit.btn {
    width: 100%;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border-radius: var(--vpos-radius-sm) !important;
    font-weight: 750;
}

.vpos-demo-login-wrap {
    margin-top: 14px;
}

.vpos-demo-login-box {
    border-radius: var(--vpos-radius);
}

.vpos-demo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
    gap: 8px;
}

.vpos-demo-grid .btn-app {
    width: auto;
    min-width: 0;
    height: 68px;
    margin: 0;
    padding: 9px 6px;
    border-radius: var(--vpos-radius-sm);
    font-size: 11px;
}

.vpos-demo-section-title {
    margin: 12px 0 8px;
    color: var(--vpos-text-muted);
    font-size: 11.5px;
    font-weight: 700;
}

.vpos-col-number,
.vpos-col-money,
.vpos-col-qty,
.vpos-text-right {
    text-align: right;
    white-space: nowrap;
}

.vpos-nowrap {
    white-space: nowrap !important;
}

.vpos-ellipsis {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.patt-wrap {
    z-index: 10;
}

.patt-circ.dir {
    background-image: url("../img/pattern-directionicon-arrow.png");
    background-position: center;
    background-repeat: no-repeat;
}

@media (max-width: 991px) {
    .vpos-navbar-actions {
        max-width: calc(100vw - 52px);
        overflow-x: auto;
        scrollbar-width: none;
    }

    .vpos-navbar-actions::-webkit-scrollbar {
        display: none;
    }

    .vpos-header-btn span,
    .vpos-user-name {
        max-width: 96px;
    }

    .vpos-footer.main-footer {
        align-items: flex-start;
        flex-direction: column;
    }

    .vpos-auth-topbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .vpos-auth-links {
        flex-wrap: wrap;
    }

    .vpos-auth-content {
        padding: 22px 14px;
    }

    .vpos-pos-workspace {
        grid-template-columns: 1fr;
    }

    .vpos-commandbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .vpos-commandbar-right {
        width: 100%;
        justify-content: flex-start;
        margin-left: 0;
    }
}

@media (max-width: 767px) {
    .vpos-compact-ui .content {
        padding: 8px;
    }

    .vpos-navbar-actions {
        gap: 3px;
        padding-right: 4px;
    }

    .vpos-user-name,
    .vpos-header-date,
    .vpos-pos-btn span {
        display: none;
    }

    .vpos-footer-left small {
        white-space: normal;
    }

    .vpos-auth-row,
    .vpos-auth-right {
        min-height: 100vh;
    }

    .vpos-auth-topbar {
        padding: 8px 10px;
    }

    .vpos-auth-language,
    .vpos-auth-language .form-control {
        width: 100%;
    }

    .vpos-auth-content {
        min-height: calc(100vh - var(--vpos-header-height));
        padding: 16px 10px;
    }

    .vpos-login-card,
    .vpos-register-card {
        padding: 15px;
    }

    .vpos-login-options {
        align-items: flex-start;
        flex-direction: column;
    }

    .vpos-demo-grid {
        grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
    }

    .vpos-list-toolbar,
    .vpos-commandbar-left,
    .vpos-commandbar-right {
        align-items: stretch;
        flex-direction: column;
    }

    .vpos-commandbar .btn,
    .vpos-commandbar .form-control,
    .vpos-commandbar .select2-container {
        width: 100% !important;
    }

    .vpos-compact-ui .dataTables_filter {
        text-align: left;
    }

    .vpos-compact-ui .dataTables_filter input {
        width: 100% !important;
        margin-top: 4px;
        margin-left: 0;
    }

    .vpos-kpi {
        min-height: 64px;
    }
}

/* ============================================================
   VPOS Phase 1 Enterprise Foundation Refresh
   Full CSS replacement-safe layer
   Goal: modern shades + compact enterprise density + AdminLTE safety.
   This section intentionally preserves all existing Blade/JS hooks.
   ============================================================ */

:root {
    --vpos-font-family: "Aptos", "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    --vpos-font-size: 12px;
    --vpos-line-height: 1.34;

    --vpos-bg: #f5f7fb;
    --vpos-bg-subtle: #f8fafc;
    --vpos-surface: #ffffff;
    --vpos-surface-raised: #ffffff;
    --vpos-surface-muted: #eef3f8;
    --vpos-surface-tint: #f8fbff;
    --vpos-border: #dbe3ed;
    --vpos-border-strong: #c6d1de;

    --vpos-text: #253346;
    --vpos-text-strong: #111827;
    --vpos-text-muted: #64748b;
    --vpos-text-soft: #94a3b8;

    --vpos-primary: #2563eb;
    --vpos-primary-hover: #1d4ed8;
    --vpos-primary-active: #1e3a8a;
    --vpos-primary-soft: #eff6ff;
    --vpos-primary-ring: rgba(37, 99, 235, 0.18);

    --vpos-success: #15803d;
    --vpos-success-soft: #ecfdf3;
    --vpos-warning: #b45309;
    --vpos-warning-soft: #fffbeb;
    --vpos-danger: #b91c1c;
    --vpos-danger-soft: #fef2f2;
    --vpos-info: #0369a1;
    --vpos-info-soft: #eff6ff;

    --vpos-space-1: 3px;
    --vpos-space-2: 7px;
    --vpos-space-3: 10px;
    --vpos-space-4: 14px;
    --vpos-space-5: 18px;

    --vpos-radius-xs: 3px;
    --vpos-radius-sm: 5px;
    --vpos-radius: 8px;
    --vpos-radius-lg: 11px;

    --vpos-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
    --vpos-shadow: 0 8px 20px rgba(15, 23, 42, 0.09);
    --vpos-shadow-lg: 0 18px 42px rgba(15, 23, 42, 0.16);

    --vpos-header-height: 44px;
    --vpos-sidebar-width: 230px;
    --vpos-sidebar-collapsed-width: 50px;
    --vpos-footer-height: 32px;
    --vpos-control-height: 29px;
    --vpos-table-row-height: 30px;
    --vpos-table-font-size: 11.5px;
}

body.skin-blue,
body.skin-blue-light {
    --vpos-primary: #2563eb;
    --vpos-primary-hover: #1d4ed8;
    --vpos-primary-active: #1e3a8a;
    --vpos-primary-soft: #eff6ff;
    --vpos-primary-ring: rgba(37, 99, 235, 0.18);
}

body.skin-black,
body.skin-black-light {
    --vpos-primary: #334155;
    --vpos-primary-hover: #1f2937;
    --vpos-primary-active: #111827;
    --vpos-primary-soft: #f1f5f9;
    --vpos-primary-ring: rgba(51, 65, 85, 0.18);
}

body.skin-purple,
body.skin-purple-light {
    --vpos-primary: #6d5bd0;
    --vpos-primary-hover: #5948b8;
    --vpos-primary-active: #44318d;
    --vpos-primary-soft: #f4f1ff;
    --vpos-primary-ring: rgba(109, 91, 208, 0.2);
}

body.skin-green,
body.skin-green-light {
    --vpos-primary: #16834f;
    --vpos-primary-hover: #126b41;
    --vpos-primary-active: #0f5132;
    --vpos-primary-soft: #ecfdf3;
    --vpos-primary-ring: rgba(22, 131, 79, 0.18);
}

body.skin-red,
body.skin-red-light {
    --vpos-primary: #c2410c;
    --vpos-primary-hover: #9a3412;
    --vpos-primary-active: #7c2d12;
    --vpos-primary-soft: #fff7ed;
    --vpos-primary-ring: rgba(194, 65, 12, 0.18);
}

body.skin-yellow,
body.skin-yellow-light {
    --vpos-primary: #ca8a04;
    --vpos-primary-hover: #a16207;
    --vpos-primary-active: #854d0e;
    --vpos-primary-soft: #fefce8;
    --vpos-primary-ring: rgba(202, 138, 4, 0.2);
}

html,
body,
body.vpos-app,
body.vpos-app .wrapper {
    font-family: var(--vpos-font-family);
}

body.vpos-app {
    color: var(--vpos-text);
    background: var(--vpos-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body.vpos-app .wrapper,
.vpos-content-wrapper,
.content-wrapper {
    background: var(--vpos-bg);
}

body.vpos-app .wrapper {
    position: relative;
    overflow-x: hidden;
}

body.vpos-app .main-header {
    z-index: 1030;
}

body.vpos-app .main-sidebar,
body.vpos-app .left-side,
body.vpos-app .vpos-sidebar.main-sidebar {
    z-index: 1020;
    pointer-events: auto;
}

body.vpos-app .content-wrapper,
body.vpos-app .right-side,
body.vpos-app .main-footer {
    position: relative;
    z-index: 1;
}

@media (min-width: 768px) {
    body.vpos-app:not(.sidebar-collapse) .main-header .logo {
        width: var(--vpos-sidebar-width);
    }

    body.vpos-app:not(.sidebar-collapse) .main-header .navbar {
        margin-left: var(--vpos-sidebar-width);
    }

    body.vpos-app:not(.sidebar-collapse) .content-wrapper,
    body.vpos-app:not(.sidebar-collapse) .right-side,
    body.vpos-app:not(.sidebar-collapse) .main-footer {
        margin-left: var(--vpos-sidebar-width);
    }

    body.vpos-app.sidebar-collapse .main-header .logo {
        width: var(--vpos-sidebar-collapsed-width);
    }

    body.vpos-app.sidebar-collapse .main-header .navbar,
    body.vpos-app.sidebar-collapse .content-wrapper,
    body.vpos-app.sidebar-collapse .right-side,
    body.vpos-app.sidebar-collapse .main-footer {
        margin-left: var(--vpos-sidebar-collapsed-width);
    }
}

body.vpos-app .main-header .logo,
body.vpos-app .main-header .navbar,
body.vpos-app .main-header .sidebar-toggle {
    background-color: var(--vpos-primary-active) !important;
    color: #ffffff !important;
}

body.vpos-app .main-header .logo:hover,
body.vpos-app .main-header .navbar .sidebar-toggle:hover,
body.vpos-app .main-header .navbar .nav > li > a:hover,
body.vpos-app .main-header .navbar .nav > li > a:focus,
body.vpos-app .main-header .navbar .nav .open > a,
body.vpos-app .main-header .navbar .nav .open > a:hover,
body.vpos-app .main-header .navbar .nav .open > a:focus {
    background-color: var(--vpos-primary-hover) !important;
    color: #ffffff !important;
}

body.vpos-app .main-sidebar,
body.vpos-app .left-side {
    background: #111827 !important;
}

body.vpos-app .vpos-sidebar .sidebar-menu,
body.vpos-app .vpos-sidebar .sidebar-menu li,
body.vpos-app .vpos-sidebar .sidebar-menu li > a,
body.vpos-app .vpos-sidebar .treeview-menu,
body.vpos-app .vpos-sidebar .treeview-menu li,
body.vpos-app .vpos-sidebar .treeview-menu li > a {
    position: relative;
    pointer-events: auto;
}

body.vpos-app .vpos-sidebar .sidebar-menu > li.header {
    padding: 8px 10px 5px;
    color: rgba(226, 232, 240, 0.62);
    background: transparent;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.045em;
    text-transform: uppercase;
}

body.vpos-app .vpos-sidebar .sidebar-menu li > a {
    display: flex;
    align-items: center;
    min-width: 0;
    cursor: pointer;
}

body.vpos-app .vpos-sidebar .sidebar-menu li > a > i:first-child {
    width: 18px;
    flex: 0 0 18px;
    margin-right: 6px;
    text-align: center;
}

body.vpos-app .vpos-sidebar .sidebar-menu li > a > span {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.vpos-app .vpos-sidebar .sidebar-menu li > a > .pull-right-container {
    position: static;
    flex: 0 0 auto;
    margin-left: 6px;
    pointer-events: none;
}

body.vpos-app .vpos-sidebar .sidebar-menu > li > a,
body.vpos-app .vpos-sidebar .treeview-menu > li > a {
    color: rgba(241, 245, 249, 0.88);
}

body.vpos-app .vpos-sidebar .sidebar-menu > li:hover > a,
body.vpos-app .vpos-sidebar .sidebar-menu > li.active > a,
body.vpos-app .vpos-sidebar .sidebar-menu > li.menu-open > a {
    background: rgba(37, 99, 235, 0.18) !important;
    color: #ffffff !important;
}

body.vpos-app .vpos-sidebar .treeview-menu {
    background: rgba(15, 23, 42, 0.42) !important;
}

body.vpos-app .vpos-sidebar .treeview-menu > li > a {
    display: flex;
    align-items: center;
    min-height: 27px;
}

body.vpos-app .vpos-sidebar .treeview-menu > li > a > i:first-child {
    width: 14px;
    flex: 0 0 14px;
    margin-right: 6px;
    text-align: center;
}

body.vpos-app .vpos-sidebar .treeview-menu > li.active > a,
body.vpos-app .vpos-sidebar .treeview-menu > li > a:hover {
    background: rgba(148, 163, 184, 0.14) !important;
    color: #ffffff !important;
}

body.vpos-app .vpos-sidebar-brand,
body.vpos-app .vpos-sidebar-user {
    color: rgba(248, 250, 252, 0.95);
}

body.vpos-app .vpos-sidebar-brand-link,
body.vpos-app .vpos-sidebar-brand-link:hover,
body.vpos-app .vpos-sidebar-brand-link:focus {
    color: rgba(248, 250, 252, 0.96);
    text-decoration: none;
}

body.vpos-app .vpos-sidebar-logo-wrap,
body.vpos-app .vpos-sidebar-logo-placeholder {
    background: rgba(37, 99, 235, 0.18);
    color: #bfdbfe;
    box-shadow: inset 0 0 0 1px rgba(191, 219, 254, 0.14);
}

body.vpos-app .vpos-sidebar-user {
    background: rgba(15, 23, 42, 0.42);
    border-color: rgba(148, 163, 184, 0.18);
}

body.vpos-app .vpos-compact-ui .content {
    padding: 9px;
}

body.vpos-app .vpos-compact-ui .content-header {
    padding: 8px 10px 4px;
}

body.vpos-app .vpos-compact-ui .content-header > h1 {
    font-size: 17px;
    font-weight: 760;
}

body.vpos-app .box,
body.vpos-app .vpos-card,
body.vpos-app .vpos-panel,
body.vpos-app .vpos-filter-panel,
body.vpos-app .vpos-kpi,
body.vpos-app .vpos-pos-workspace {
    border-color: var(--vpos-border);
    box-shadow: var(--vpos-shadow-sm);
}

body.vpos-app .box-header,
body.vpos-app .vpos-card-header,
body.vpos-app .vpos-panel-header,
body.vpos-app .vpos-filter-header {
    min-height: 34px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

body.vpos-app .vpos-compact-ui .box-header {
    padding: 7px 10px;
}

body.vpos-app .vpos-compact-ui .box-body,
body.vpos-app .vpos-card-body,
body.vpos-app .vpos-panel-body,
body.vpos-app .vpos-filter-body {
    padding: 9px;
}

body.vpos-app .vpos-commandbar {
    min-height: 38px;
    padding: 5px 7px;
    border-color: var(--vpos-border);
    background: var(--vpos-surface);
}

body.vpos-app .vpos-kpi {
    min-height: 66px;
    padding: 9px;
}

body.vpos-app .vpos-kpi-icon {
    width: 32px;
    height: 32px;
}

body.vpos-app .vpos-kpi-value {
    font-size: 17px;
}

body.vpos-app .vpos-compact-ui .form-control {
    min-height: var(--vpos-control-height);
    height: var(--vpos-control-height);
    padding: 4px 7px;
    border-color: var(--vpos-border-strong);
    font-size: 11.8px;
}

body.vpos-app .vpos-compact-ui textarea.form-control {
    height: auto;
    min-height: 68px;
}

body.vpos-app .vpos-compact-ui .form-control:focus,
body.vpos-app .vpos-compact-ui .select2-container--default.select2-container--focus .select2-selection--single,
body.vpos-app .vpos-compact-ui .select2-container--default .select2-search--dropdown .select2-search__field:focus {
    border-color: var(--vpos-primary);
    box-shadow: 0 0 0 2px var(--vpos-primary-ring);
    outline: none;
}

body.vpos-app .vpos-compact-ui label {
    margin-bottom: 3px;
    font-size: 11.3px;
    font-weight: 680;
}

body.vpos-app .vpos-compact-ui .form-group {
    margin-bottom: 8px;
}

body.vpos-app .vpos-compact-ui .input-group-addon {
    padding: 4px 7px;
    border-color: var(--vpos-border-strong);
    background: var(--vpos-surface-muted);
}

body.vpos-app .vpos-compact-ui .select2-container .select2-selection--single,
body.vpos-app .vpos-compact-ui .select2-container--default .select2-selection--single {
    height: var(--vpos-control-height);
    border-color: var(--vpos-border-strong);
}

body.vpos-app .vpos-compact-ui .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: calc(var(--vpos-control-height) - 2px);
    font-size: 11.8px;
}

body.vpos-app .vpos-compact-ui .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: calc(var(--vpos-control-height) - 2px);
}

body.vpos-app .vpos-compact-ui .select2-dropdown {
    border-color: var(--vpos-border-strong);
    box-shadow: var(--vpos-shadow);
    font-size: 11.8px;
}

body.vpos-app .vpos-compact-ui .btn {
    border-radius: var(--vpos-radius-sm);
    font-weight: 680;
}

body.vpos-app .vpos-compact-ui .btn-sm,
body.vpos-app .vpos-compact-ui .btn-group-sm > .btn,
body.vpos-app .vpos-compact-ui .btn-xs {
    min-height: 24px;
    height: auto;
    padding: 3px 7px;
    font-size: 11px;
    line-height: 1.25;
}

body.vpos-app .vpos-compact-ui .btn-primary,
body.vpos-app .vpos-compact-ui .bg-blue,
body.vpos-app .vpos-compact-ui .bg-light-blue {
    border-color: var(--vpos-primary) !important;
    background-color: var(--vpos-primary) !important;
    color: #ffffff !important;
}

body.vpos-app .vpos-compact-ui .btn-primary:hover,
body.vpos-app .vpos-compact-ui .btn-primary:focus {
    border-color: var(--vpos-primary-hover) !important;
    background-color: var(--vpos-primary-hover) !important;
}

body.vpos-app .vpos-compact-ui table.table {
    font-size: var(--vpos-table-font-size);
}

body.vpos-app .vpos-compact-ui .table > thead > tr > th {
    height: 28px;
    padding: 5px 7px;
    background: #eef3f8;
    color: #1e293b;
    font-size: 10.8px;
}

body.vpos-app .vpos-compact-ui .table > tbody > tr > td,
body.vpos-app .vpos-compact-ui .table > tfoot > tr > td {
    min-height: var(--vpos-table-row-height);
    padding: 5px 7px;
}

body.vpos-app .vpos-compact-ui table.table th,
body.vpos-app .vpos-compact-ui table.table td {
    max-width: 280px;
}

body.vpos-app .vpos-compact-ui .table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #fbfdff;
}

body.vpos-app .vpos-compact-ui .table-hover > tbody > tr:hover,
body.vpos-app .vpos-compact-ui table.dataTable tbody tr:hover {
    background-color: var(--vpos-primary-soft);
}

body.vpos-app .vpos-compact-ui table.table .btn,
body.vpos-app .vpos-compact-ui .vpos-table .btn {
    margin: 1px;
    vertical-align: middle;
}

body.vpos-app .vpos-compact-ui table.table th.vpos-col-action,
body.vpos-app .vpos-compact-ui table.table td.vpos-col-action,
body.vpos-app .vpos-compact-ui table.table th.vpos-col-status,
body.vpos-app .vpos-compact-ui table.table td.vpos-col-status {
    width: 1%;
    text-align: center;
    white-space: nowrap;
}

body.vpos-app .vpos-compact-ui .dataTables_wrapper {
    font-size: 11.3px;
}

body.vpos-app .vpos-compact-ui .dataTables_length,
body.vpos-app .vpos-compact-ui .dataTables_filter,
body.vpos-app .vpos-compact-ui .dt-buttons {
    margin-bottom: 6px;
}

body.vpos-app .vpos-compact-ui .dataTables_filter input,
body.vpos-app .vpos-compact-ui .dataTables_length select {
    height: 27px;
    border: 1px solid var(--vpos-border-strong);
    border-radius: var(--vpos-radius-sm);
}

body.vpos-app .vpos-compact-ui .dt-buttons .btn {
    min-height: 25px;
    height: auto;
    padding: 3px 7px;
    font-size: 10.8px;
}

body.vpos-app .vpos-compact-ui .pagination > li > a,
body.vpos-app .vpos-compact-ui .pagination > li > span {
    padding: 3px 7px;
    font-size: 11.2px;
}

body.vpos-app .vpos-compact-ui .modal-header {
    padding: 8px 11px;
}

body.vpos-app .vpos-compact-ui .modal-title {
    font-size: 13.5px;
}

body.vpos-app .vpos-compact-ui .modal-body {
    padding: 10px;
}

body.vpos-app .vpos-compact-ui .modal-footer {
    padding: 8px 11px;
}

body.vpos-app .vpos-footer.main-footer {
    min-height: var(--vpos-footer-height);
    padding: 5px 10px;
}

body.vpos-app .vpos-header-btn:focus,
body.vpos-app .btn:focus,
body.vpos-app .vpos-sidebar .sidebar-menu li > a:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--vpos-primary-ring);
}

@media (min-width: 768px) {
    body.vpos-app.sidebar-mini.sidebar-collapse .main-sidebar:hover {
        z-index: 1040;
    }

    body.vpos-app.sidebar-mini.sidebar-collapse .main-sidebar:hover .sidebar-menu > li > a > span,
    body.vpos-app.sidebar-mini.sidebar-collapse .main-sidebar:hover .sidebar-menu > li > .treeview-menu,
    body.vpos-app.sidebar-mini.sidebar-collapse .main-sidebar:hover .sidebar-menu > li > a > .pull-right-container {
        pointer-events: auto;
    }
}

@media (max-width: 767px) {
    body.vpos-app .main-sidebar,
    body.vpos-app .left-side,
    body.vpos-app .vpos-sidebar.main-sidebar {
        z-index: 1040;
    }

    body.vpos-app.sidebar-open .content-wrapper,
    body.vpos-app.sidebar-open .right-side,
    body.vpos-app.sidebar-open .main-footer {
        transform: none;
    }

    body.vpos-app .vpos-compact-ui .content {
        padding: 7px;
    }
}
/* ============================================================
   VPOS Sidebar + Dashboard Polish
   Safe CSS-only visual refresh
   Does not change Blade, routes, menu logic, permissions, or JS hooks
   ============================================================ */

:root {
    --vpos-shell-navy: #0f172a;
    --vpos-shell-navy-2: #111c33;
    --vpos-shell-navy-3: #162440;
    --vpos-shell-blue: #2563eb;
    --vpos-shell-blue-2: #1d4ed8;
    --vpos-sidebar-text: #dbe7ff;
    --vpos-sidebar-muted: #91a4c4;
    --vpos-sidebar-hover: rgba(59, 130, 246, 0.13);
    --vpos-sidebar-active: rgba(37, 99, 235, 0.28);
}

/* Main shell */
body.vpos-app {
    background: #eef3f9;
}

body.vpos-app .wrapper {
    background: #eef3f9;
}

/* Header polish */
body.vpos-app .main-header.vpos-header {
    background: linear-gradient(90deg, #1e3a8a 0%, #2563eb 42%, #172554 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 1px 8px rgba(15, 23, 42, 0.22);
}

body.vpos-app .vpos-header .logo {
    background: #1e3a8a !important;
    color: #ffffff !important;
    border-right: 1px solid rgba(255, 255, 255, 0.12);
}

body.vpos-app .vpos-header .navbar {
    background: transparent !important;
}

body.vpos-app .vpos-sidebar-toggle {
    color: rgba(255, 255, 255, 0.92) !important;
}

body.vpos-app .vpos-sidebar-toggle:hover,
body.vpos-app .vpos-sidebar-toggle:focus {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
}

body.vpos-app .vpos-header-btn,
body.vpos-app .vpos-user-toggle {
    border-radius: 7px !important;
}

/* Sidebar base */
body.vpos-app .main-sidebar.vpos-sidebar {
    background: var(--vpos-shell-navy) !important;
    border-right: 1px solid rgba(148, 163, 184, 0.16);
    box-shadow: 2px 0 14px rgba(15, 23, 42, 0.22);
}

body.vpos-app .vpos-sidebar .sidebar {
    background: transparent !important;
}

/* Sidebar brand/user blocks */
body.vpos-app .vpos-sidebar-brand {
    margin: 10px 9px 8px;
    padding: 8px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 9px;
    background: rgba(15, 23, 42, 0.52);
}

body.vpos-app .vpos-sidebar-brand-link,
body.vpos-app .vpos-sidebar-brand-link:hover,
body.vpos-app .vpos-sidebar-brand-link:focus {
    color: #ffffff;
    text-decoration: none;
}

body.vpos-app .vpos-sidebar-logo-wrap,
body.vpos-app .vpos-sidebar-logo-placeholder {
    width: 31px;
    height: 31px;
    flex-basis: 31px;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.95), rgba(14, 165, 233, 0.7));
    color: #ffffff;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}

body.vpos-app .vpos-sidebar-brand-text strong {
    color: #ffffff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.01em;
}

body.vpos-app .vpos-sidebar-brand-text small {
    color: var(--vpos-sidebar-muted);
    font-size: 10px;
}

body.vpos-app .vpos-sidebar-user {
    margin: 7px 9px 10px;
    padding: 7px 8px;
    border-color: rgba(148, 163, 184, 0.16);
    border-radius: 9px;
    background: rgba(15, 23, 42, 0.48);
}

body.vpos-app .vpos-sidebar-user-avatar {
    width: 28px;
    height: 28px;
    flex-basis: 28px;
    background: #2563eb;
    color: #ffffff;
    font-size: 11px;
}

body.vpos-app .vpos-sidebar-user-meta strong {
    color: #ffffff;
    font-size: 11.5px;
}

body.vpos-app .vpos-sidebar-user-meta small {
    color: var(--vpos-sidebar-muted);
}

/* Sidebar menu wrapper */
body.vpos-app .vpos-sidebar-menu-wrap {
    padding: 2px 7px 12px;
}

body.vpos-app .vpos-sidebar .sidebar-menu {
    background: transparent !important;
}

body.vpos-app .vpos-sidebar .sidebar-menu > li {
    margin: 2px 0;
}

/* Menu row */
body.vpos-app .vpos-sidebar .sidebar-menu > li > a {
    min-height: 31px;
    padding: 6px 8px 6px 9px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-left: 3px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--vpos-sidebar-text);
    font-size: 11.5px;
    font-weight: 650;
    line-height: 1.2;
    transition:
        background-color 0.14s ease,
        color 0.14s ease,
        border-color 0.14s ease,
        transform 0.14s ease;
}

/* Icon alignment */
body.vpos-app .vpos-sidebar .sidebar-menu > li > a > i:first-child {
    width: 18px;
    min-width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 0;
    color: #b8c7e6;
    font-size: 12px;
    line-height: 18px;
    text-align: center;
    opacity: 0.98;
}

body.vpos-app .vpos-sidebar .sidebar-menu > li > a > span {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    color: inherit;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Arrow alignment */
body.vpos-app .vpos-sidebar .sidebar-menu li > a > .pull-right-container {
    position: static;
    flex: 0 0 auto;
    margin-left: auto;
    color: #8ea2c7;
}

body.vpos-app .vpos-sidebar .sidebar-menu li > a > .pull-right-container .fa {
    font-size: 10px;
}

/* Hover and active */
body.vpos-app .vpos-sidebar .sidebar-menu > li:hover > a {
    background: var(--vpos-sidebar-hover);
    color: #ffffff;
}

body.vpos-app .vpos-sidebar .sidebar-menu > li:hover > a > i:first-child {
    color: #ffffff;
}

body.vpos-app .vpos-sidebar .sidebar-menu > li.active > a,
body.vpos-app .vpos-sidebar .sidebar-menu > li.menu-open > a {
    border-left-color: #38bdf8;
    background: linear-gradient(90deg, rgba(37, 99, 235, 0.42), rgba(37, 99, 235, 0.16));
    color: #ffffff;
    box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.1);
}

body.vpos-app .vpos-sidebar .sidebar-menu > li.active > a > i:first-child,
body.vpos-app .vpos-sidebar .sidebar-menu > li.menu-open > a > i:first-child {
    color: #ffffff;
}

/* Submenu */
body.vpos-app .vpos-sidebar .treeview-menu {
    margin: 3px 0 5px 16px;
    padding: 2px 0 2px 7px;
    border-left: 1px solid rgba(148, 163, 184, 0.22);
    background: transparent !important;
}

body.vpos-app .vpos-sidebar .treeview-menu > li {
    margin: 1px 0;
}

body.vpos-app .vpos-sidebar .treeview-menu > li > a {
    min-height: 27px;
    padding: 5px 7px 5px 9px;
    display: flex;
    align-items: center;
    gap: 7px;
    border-radius: 7px;
    color: #b8c7e6;
    font-size: 11.2px;
    font-weight: 550;
    line-height: 1.2;
}

body.vpos-app .vpos-sidebar .treeview-menu > li > a > i:first-child {
    width: 14px;
    min-width: 14px;
    margin-right: 0;
    color: #7f94b8;
    font-size: 9.5px;
    text-align: center;
}

body.vpos-app .vpos-sidebar .treeview-menu > li:hover > a,
body.vpos-app .vpos-sidebar .treeview-menu > li.active > a {
    background: rgba(59, 130, 246, 0.13);
    color: #ffffff;
}

body.vpos-app .vpos-sidebar .treeview-menu > li:hover > a > i:first-child,
body.vpos-app .vpos-sidebar .treeview-menu > li.active > a > i:first-child {
    color: #93c5fd;
}

/* Dashboard/card polish */
body.vpos-app .content-wrapper {
    background: #eef3f9;
}

body.vpos-app .content-header > h1 {
    color: #ffffff;
    font-weight: 750;
    letter-spacing: -0.02em;
}

body.vpos-app .small-box,
body.vpos-app .info-box,
body.vpos-app .box {
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 8px;
    box-shadow: 0 5px 14px rgba(15, 23, 42, 0.08);
}

body.vpos-app .info-box {
    min-height: 74px;
}

body.vpos-app .info-box-icon {
    width: 64px;
    height: 74px;
    line-height: 74px;
    border-radius: 8px 0 0 8px;
}

body.vpos-app .info-box-content {
    padding: 11px 12px;
}

body.vpos-app .info-box-text {
    color: #8392a9;
    font-size: 11px;
    font-weight: 750;
    letter-spacing: 0.02em;
}

body.vpos-app .info-box-number {
    margin-top: 4px;
    color: #1f2937;
    font-size: 18px;
    font-weight: 800;
}

/* Chart/box sections */
body.vpos-app .box {
    overflow: hidden;
    background: #ffffff;
}

body.vpos-app .box-header {
    background: #fbfdff;
    border-bottom: 1px solid rgba(148, 163, 184, 0.2);
}

body.vpos-app .box-title {
    font-size: 12.5px;
    font-weight: 800;
}

/* Collapsed sidebar compatibility */
@media (min-width: 768px) {
    body.vpos-app.sidebar-mini.sidebar-collapse .main-sidebar.vpos-sidebar .sidebar-menu > li > a {
        justify-content: center;
        padding-right: 0;
        padding-left: 0;
    }

    body.vpos-app.sidebar-mini.sidebar-collapse .main-sidebar.vpos-sidebar .sidebar-menu > li > a > i:first-child {
        width: 100%;
        min-width: 100%;
        font-size: 13px;
    }

    body.vpos-app.sidebar-mini.sidebar-collapse .main-sidebar.vpos-sidebar:hover .sidebar-menu > li > a {
        justify-content: flex-start;
        padding: 6px 8px 6px 9px;
    }

    body.vpos-app.sidebar-mini.sidebar-collapse .main-sidebar.vpos-sidebar:hover .sidebar-menu > li > a > i:first-child {
        width: 18px;
        min-width: 18px;
    }
}

/* Mobile */
@media (max-width: 767px) {
    body.vpos-app .vpos-sidebar-brand,
    body.vpos-app .vpos-sidebar-user {
        margin-right: 8px;
        margin-left: 8px;
    }

    body.vpos-app .vpos-sidebar .sidebar-menu > li > a {
        min-height: 34px;
    }
}
/* ============================================================
   VPOS Dashboard KPI Icon Simplification
   CSS-only: removes loud colored icon blocks and makes KPI cards
   compact, clean, enterprise-style.
   ============================================================ */

body.vpos-app .info-box {
    min-height: 72px;
    display: flex;
    align-items: center;
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 3px 10px rgba(15, 23, 42, 0.06);
    overflow: hidden;
}

/* Remove the heavy colored square/circle icon background */
body.vpos-app .info-box-icon {
    width: 52px;
    min-width: 52px;
    height: 72px;
    line-height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    float: none;
    border-radius: 0;
    background: transparent !important;
    color: #64748b !important;
    box-shadow: none !important;
}

/* Simple monochrome icon */
body.vpos-app .info-box-icon > i,
body.vpos-app .info-box-icon > .fa,
body.vpos-app .info-box-icon > .fas,
body.vpos-app .info-box-icon > .fa-solid,
body.vpos-app .info-box-icon > .ion {
    color: #64748b !important;
    font-size: 21px;
    line-height: 1;
}

/* Remove old bg color classes only inside KPI icon blocks */
body.vpos-app .info-box-icon.bg-aqua,
body.vpos-app .info-box-icon.bg-green,
body.vpos-app .info-box-icon.bg-yellow,
body.vpos-app .info-box-icon.bg-red,
body.vpos-app .info-box-icon.bg-blue,
body.vpos-app .info-box-icon.bg-purple,
body.vpos-app .info-box-icon.bg-maroon,
body.vpos-app .info-box-icon.bg-orange,
body.vpos-app .info-box-icon.bg-teal,
body.vpos-app .info-box-icon.bg-olive {
    background: transparent !important;
    color: #64748b !important;
}

/* Compact KPI text area */
body.vpos-app .info-box-content {
    flex: 1 1 auto;
    min-width: 0;
    padding: 10px 12px 10px 2px;
    margin-left: 0;
}

body.vpos-app .info-box-text {
    margin-bottom: 3px;
    color: #7c8da5;
    font-size: 10.8px;
    font-weight: 750;
    letter-spacing: 0.025em;
    text-transform: uppercase;
    white-space: nowrap;
}

body.vpos-app .info-box-number {
    margin-top: 0;
    color: #1f2937;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.15;
}

/* Small helper text under totals */
body.vpos-app .info-box-content small,
body.vpos-app .info-box-content .text-muted {
    color: #7c8da5;
    font-size: 9.8px;
    line-height: 1.25;
}

/* Optional subtle left accent instead of colored icon block */
body.vpos-app .info-box::before {
    content: "";
    width: 3px;
    align-self: stretch;
    background: #cbd5e1;
}

/* Slight hover polish */
body.vpos-app .info-box:hover {
    border-color: rgba(100, 116, 139, 0.32);
    box-shadow: 0 5px 14px rgba(15, 23, 42, 0.08);
}

/* Keep KPI cards compact on dashboard rows */
body.vpos-app .row .col-md-3 .info-box,
body.vpos-app .row .col-sm-6 .info-box,
body.vpos-app .row .col-xs-12 .info-box {
    margin-bottom: 12px;
}
/* ============================================================
   VPOS Dashboard KPI Compact Sizing
   CSS-only: reduces KPI card height, icon footprint, spacing,
   and text scale without touching dashboard Blade/data logic.
   ============================================================ */

body.vpos-app .info-box {
    min-height: 58px;
    height: auto;
    margin-bottom: 10px;
    border-radius: 7px;
}

/* Smaller icon area */
body.vpos-app .info-box-icon {
    width: 42px;
    min-width: 42px;
    height: 58px;
    line-height: 58px;
}

body.vpos-app .info-box-icon > i,
body.vpos-app .info-box-icon > .fa,
body.vpos-app .info-box-icon > .fas,
body.vpos-app .info-box-icon > .fa-solid,
body.vpos-app .info-box-icon > .ion {
    font-size: 16px;
}

/* Tighter text area */
body.vpos-app .info-box-content {
    padding: 8px 9px 7px 0;
}

body.vpos-app .info-box-text {
    margin-bottom: 2px;
    font-size: 9.8px;
    line-height: 1.1;
}

body.vpos-app .info-box-number {
    font-size: 15px;
    line-height: 1.1;
}

/* Reduce tiny subtext under return cards */
body.vpos-app .info-box-content small,
body.vpos-app .info-box-content .text-muted {
    font-size: 9px;
    line-height: 1.15;
}

/* Slimmer left accent */
body.vpos-app .info-box::before {
    width: 2px;
}

/* Reduce dashboard card row spacing */
body.vpos-app .row .col-md-3 .info-box,
body.vpos-app .row .col-sm-6 .info-box,
body.vpos-app .row .col-xs-12 .info-box {
    margin-bottom: 10px;
}

/* Make dashboard columns visually tighter without breaking Bootstrap */
body.vpos-app .content .row {
    margin-right: -6px;
    margin-left: -6px;
}

body.vpos-app .content .row > [class*="col-"] {
    padding-right: 6px;
    padding-left: 6px;
}

/* Chart box moves closer after compact KPIs */
body.vpos-app .box {
    margin-bottom: 10px;
}

body.vpos-app .box-header {
    padding: 7px 10px;
}

body.vpos-app .box-body {
    padding: 9px 10px;
}

/* Mobile: keep tap area reasonable */
@media (max-width: 767px) {
    body.vpos-app .info-box {
        min-height: 62px;
    }

    body.vpos-app .info-box-icon {
        width: 46px;
        min-width: 46px;
        height: 62px;
        line-height: 62px;
    }
}
/* ============================================================
   VPOS Dashboard Home Polish
   Pair this with the updated resources/views/home/index.blade.php
   CSS-only: compact KPI grid, clean chart panels, and dense tables.
   ============================================================ */

body.vpos-app .vpos-dashboard {
    padding-top: 10px;
}

body.vpos-app .vpos-dashboard-header {
    padding-bottom: 2px;
}

body.vpos-app .vpos-dashboard-title h1 {
    margin-bottom: 0;
    font-size: 28px;
    font-weight: 750;
    letter-spacing: -0.035em;
}

body.vpos-app .vpos-dashboard-toolbar {
    margin: 0 0 10px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

body.vpos-app .vpos-dashboard-location {
    min-width: 220px;
}

body.vpos-app .vpos-toolbar-btn {
    height: 29px;
    padding: 4px 9px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 7px !important;
    font-size: 11.5px;
}

body.vpos-app .vpos-dashboard-kpi-grid {
    margin-right: -6px;
    margin-left: -6px;
}

body.vpos-app .vpos-dashboard-kpi-grid > [class*="col-"] {
    padding-right: 6px;
    padding-left: 6px;
}

body.vpos-app .vpos-kpi-card.info-box {
    min-height: 56px;
    margin-bottom: 10px;
    display: flex;
    align-items: stretch;
    border-radius: 8px;
    border-color: rgba(148, 163, 184, 0.24);
    background: #ffffff;
    box-shadow: 0 3px 10px rgba(15, 23, 42, 0.055);
    overflow: hidden;
}

body.vpos-app .vpos-kpi-card.info-box::before {
    width: 2px;
    background: #cbd5e1;
}

body.vpos-app .vpos-kpi-card .vpos-kpi-card-icon {
    width: 40px;
    min-width: 40px;
    height: 56px;
    line-height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    float: none;
    border-radius: 0;
    background: transparent !important;
    color: #64748b !important;
    box-shadow: none !important;
}

body.vpos-app .vpos-kpi-card .vpos-kpi-card-icon i {
    color: #64748b !important;
    font-size: 15px;
    line-height: 1;
}

body.vpos-app .vpos-kpi-card .info-box-content {
    min-width: 0;
    flex: 1 1 auto;
    padding: 7px 9px 6px 0;
    margin-left: 0;
}

body.vpos-app .vpos-kpi-card .info-box-text {
    margin-bottom: 2px;
    color: #7c8da5;
    font-size: 9.7px;
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: 0.025em;
    text-transform: uppercase;
}

body.vpos-app .vpos-kpi-card .info-box-number {
    color: #1f2937;
    font-size: 14.8px;
    line-height: 1.1;
    font-weight: 800;
}

body.vpos-app .vpos-kpi-note {
    margin-top: 3px;
    display: block;
    color: #7c8da5;
    font-size: 8.8px;
    line-height: 1.15;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.vpos-app .vpos-kpi-separator {
    margin: 0 4px;
    color: #cbd5e1;
}

body.vpos-app .vpos-dashboard-widget-row {
    margin-right: -6px;
    margin-left: -6px;
}

body.vpos-app .vpos-dashboard-widget-row > [class*="col-"] {
    padding-right: 6px;
    padding-left: 6px;
}

body.vpos-app .vpos-dashboard .box {
    margin-bottom: 12px;
    border-radius: 8px;
    border-color: rgba(148, 163, 184, 0.24);
    box-shadow: 0 3px 10px rgba(15, 23, 42, 0.055);
}

body.vpos-app .vpos-dashboard .box-header {
    min-height: 34px;
    padding: 7px 10px;
    background: #fbfdff;
    border-bottom-color: rgba(148, 163, 184, 0.2);
}

body.vpos-app .vpos-dashboard .box-title {
    font-size: 12.3px;
    font-weight: 800;
}

body.vpos-app .vpos-dashboard .box-body {
    padding: 9px 10px;
}

body.vpos-app .vpos-dashboard-table {
    font-size: 11px;
}

body.vpos-app .vpos-dashboard-table > thead > tr > th {
    height: 28px;
    padding: 5px 7px;
    white-space: nowrap;
}

body.vpos-app .vpos-dashboard-table > tbody > tr > td {
    padding: 5px 7px;
}

@media (max-width: 767px) {
    body.vpos-app .vpos-dashboard-title h1 {
        font-size: 22px;
    }

    body.vpos-app .vpos-dashboard-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    body.vpos-app .vpos-dashboard-location,
    body.vpos-app .vpos-dashboard-date,
    body.vpos-app .vpos-dashboard-date .btn {
        width: 100%;
    }

    body.vpos-app .vpos-kpi-card.info-box {
        min-height: 60px;
    }

    body.vpos-app .vpos-kpi-card .vpos-kpi-card-icon {
        height: 60px;
        min-width: 44px;
        width: 44px;
    }
}
/* ============================================================
   VPOS Enterprise Font Refinement
   CSS-only: modern compact enterprise typography.
   ============================================================ */

:root {
    --vpos-font-family:
        "Aptos",
        "Segoe UI Variable",
        "Segoe UI",
        "Inter",
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Helvetica Neue",
        Arial,
        sans-serif;

    --vpos-font-size: 12px;
    --vpos-line-height: 1.32;
    --vpos-table-font-size: 11.35px;
    --vpos-control-font-size: 11.75px;
    --vpos-heading-font-family:
        "Aptos Display",
        "Aptos",
        "Segoe UI Variable Display",
        "Segoe UI",
        system-ui,
        sans-serif;
}

/* Apply modern enterprise font globally */
body.vpos-app,
body.vpos-app .wrapper,
body.vpos-app input,
body.vpos-app button,
body.vpos-app select,
body.vpos-app textarea,
body.vpos-app .form-control,
body.vpos-app .select2-container,
body.vpos-app .popover,
body.vpos-app .modal,
body.vpos-app .dropdown-menu {
    font-family: var(--vpos-font-family);
}

/* Better headings without becoming oversized */
body.vpos-app h1,
body.vpos-app h2,
body.vpos-app h3,
body.vpos-app h4,
body.vpos-app h5,
body.vpos-app h6,
body.vpos-app .content-header > h1,
body.vpos-app .box-title,
body.vpos-app .modal-title,
body.vpos-app .vpos-card-title,
body.vpos-app .vpos-panel-title {
    font-family: var(--vpos-heading-font-family);
    letter-spacing: -0.015em;
}

/* Compact but readable table typography */
body.vpos-app table,
body.vpos-app .table,
body.vpos-app .dataTables_wrapper {
    font-size: var(--vpos-table-font-size);
    font-variant-numeric: tabular-nums;
}

/* Clearer numbers in money/quantity/accounting areas */
body.vpos-app .info-box-number,
body.vpos-app .vpos-col-money,
body.vpos-app .vpos-col-number,
body.vpos-app .vpos-col-qty,
body.vpos-app .display_currency,
body.vpos-app .total_purchase,
body.vpos-app .purchase_due,
body.vpos-app .total_sell,
body.vpos-app .invoice_due,
body.vpos-app .total_expense,
body.vpos-app .total_purchase_return,
body.vpos-app .total_sell_return,
body.vpos-app .total_sr,
body.vpos-app .total_srp,
body.vpos-app .total_pr,
body.vpos-app .total_prp,
body.vpos-app .net {
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

/* Form controls remain dense and legible */
body.vpos-app .form-control,
body.vpos-app .select2-container--default .select2-selection--single .select2-selection__rendered,
body.vpos-app .btn,
body.vpos-app label {
    font-size: var(--vpos-control-font-size);
}

/* Sidebar text becomes cleaner and less bulky */
body.vpos-app .vpos-sidebar .sidebar-menu > li > a {
    font-size: 11.65px;
    font-weight: 620;
    letter-spacing: 0;
}

body.vpos-app .vpos-sidebar .treeview-menu > li > a {
    font-size: 11.2px;
    font-weight: 520;
}

/* Dashboard KPI hierarchy */
body.vpos-app .info-box-text {
    font-size: 9.7px;
    font-weight: 760;
    letter-spacing: 0.035em;
}

body.vpos-app .info-box-number {
    font-size: 15.5px;
    font-weight: 780;
}

/* DataTables controls */
body.vpos-app .dataTables_length,
body.vpos-app .dataTables_filter,
body.vpos-app .dataTables_info,
body.vpos-app .pagination {
    font-size: 11.2px;
}
/* ============================================================
   VPOS Products Page Polish
   CSS-only companion for resources/views/product/index.blade.php
   Compact enterprise list/filter/table treatment.
   ============================================================ */

body.vpos-app .vpos-module-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

body.vpos-app .vpos-page-kicker {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 3px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 10.2px;
    font-weight: 780;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

body.vpos-app .vpos-page-kicker i {
    font-size: 11px;
}

body.vpos-app .vpos-page-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
    padding-top: 1px;
}

body.vpos-app .vpos-page-actions .btn {
    min-height: 27px;
    padding: 4px 9px;
    border-radius: 7px;
    font-size: 11.3px;
    font-weight: 720;
}

body.vpos-app .vpos-btn-soft {
    border-color: rgba(148, 163, 184, 0.45);
    background: rgba(255, 255, 255, 0.92);
    color: #334155;
}

body.vpos-app .vpos-btn-soft:hover,
body.vpos-app .vpos-btn-soft:focus {
    border-color: rgba(37, 99, 235, 0.35);
    background: #ffffff;
    color: #1d4ed8;
}

body.vpos-app .vpos-products-page .box,
body.vpos-app .vpos-products-page .nav-tabs-custom {
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 9px;
    box-shadow: 0 5px 14px rgba(15, 23, 42, 0.06);
}

body.vpos-app .vpos-products-page .box-header {
    padding: 7px 10px;
}

body.vpos-app .vpos-filter-intro {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: -2px 0 8px;
    padding: 6px 8px;
    border: 1px solid rgba(148, 163, 184, 0.20);
    border-radius: 7px;
    background: #f8fafc;
}

body.vpos-app .vpos-filter-intro strong {
    display: block;
    color: #334155;
    font-size: 11.2px;
    font-weight: 800;
    line-height: 1.1;
}

body.vpos-app .vpos-filter-intro span {
    display: block;
    margin-top: 1px;
    color: #64748b;
    font-size: 10.2px;
    line-height: 1.15;
}

body.vpos-app .vpos-filter-actions {
    flex: 0 0 auto;
}

body.vpos-app .vpos-product-filter-grid {
    margin-right: -5px;
    margin-left: -5px;
}

body.vpos-app .vpos-product-filter-grid > [class*="col-"] {
    padding-right: 5px;
    padding-left: 5px;
}

body.vpos-app .vpos-product-filter-grid .form-group {
    margin-bottom: 7px;
}

body.vpos-app .vpos-product-filter-grid label {
    margin-bottom: 2px;
    color: #475569;
    font-size: 10.6px;
    font-weight: 760;
}

body.vpos-app .vpos-filter-check {
    min-height: 28px;
    display: flex;
    align-items: center;
    padding-top: 17px;
}

body.vpos-app .vpos-filter-check label {
    margin-bottom: 0;
    color: #334155;
    font-size: 11px;
    font-weight: 680;
}

body.vpos-app .vpos-products-tabs {
    overflow: hidden;
    background: #ffffff;
}

body.vpos-app .vpos-tabs-header {
    padding: 7px 8px 0;
    border-bottom: 1px solid rgba(148, 163, 184, 0.20);
    background: #fbfdff;
}

body.vpos-app .vpos-products-tabs .nav-tabs {
    border-bottom: 0;
}

body.vpos-app .vpos-products-tabs .nav-tabs > li {
    margin-bottom: 0;
}

body.vpos-app .vpos-products-tabs .nav-tabs > li > a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 30px;
    margin-right: 4px;
    padding: 6px 10px;
    border: 1px solid transparent;
    border-radius: 8px 8px 0 0;
    color: #64748b;
    font-size: 11.5px;
    font-weight: 760;
}

body.vpos-app .vpos-products-tabs .nav-tabs > li.active > a,
body.vpos-app .vpos-products-tabs .nav-tabs > li.active > a:hover,
body.vpos-app .vpos-products-tabs .nav-tabs > li.active > a:focus {
    border-color: rgba(148, 163, 184, 0.24);
    border-bottom-color: #ffffff;
    background: #ffffff;
    color: #1d4ed8;
}

body.vpos-app .vpos-products-tabs .nav-tabs > li > a:hover {
    background: rgba(37, 99, 235, 0.06);
    color: #1d4ed8;
}

body.vpos-app .vpos-tab-content {
    padding: 9px;
}

body.vpos-app .vpos-products-commandbar {
    min-height: 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 7px;
    padding: 6px 8px;
    border: 1px solid rgba(148, 163, 184, 0.20);
    border-radius: 8px;
    background: #f8fafc;
}

body.vpos-app .vpos-list-toolbar-left {
    min-width: 0;
}

body.vpos-app .vpos-list-caption {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #334155;
    font-size: 11.8px;
    font-weight: 820;
    line-height: 1.1;
}

body.vpos-app .vpos-list-caption i {
    color: #64748b;
    font-size: 12px;
}

body.vpos-app .vpos-list-subcaption {
    display: block;
    margin-top: 2px;
    color: #7c8da5;
    font-size: 10px;
    line-height: 1.1;
}

body.vpos-app .vpos-list-toolbar-right {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
}

body.vpos-app .vpos-products-commandbar .btn,
body.vpos-app .vpos-filter-actions .btn {
    min-height: 24px;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 10.8px;
    font-weight: 720;
}

body.vpos-app .vpos-products-table-shell,
body.vpos-app .vpos-stock-report-table-shell {
    border: 1px solid rgba(148, 163, 184, 0.20);
    border-radius: 8px;
    background: #ffffff;
    overflow: hidden;
}

body.vpos-app .vpos-products-table-shell .table,
body.vpos-app .vpos-stock-report-table-shell .table {
    margin-bottom: 0;
}

body.vpos-app table#product_table th,
body.vpos-app table#product_table td,
body.vpos-app table#stock_report_table th,
body.vpos-app table#stock_report_table td {
    padding-top: 5px;
    padding-bottom: 5px;
    vertical-align: middle;
}

body.vpos-app table#product_table .vpos-col-select,
body.vpos-app table#product_table .vpos-col-image,
body.vpos-app table#product_table .vpos-col-actions {
    width: 1%;
    white-space: nowrap;
}

body.vpos-app table#product_table .vpos-col-actions .btn,
body.vpos-app table#stock_report_table .vpos-col-actions .btn {
    margin: 1px;
    padding: 2px 6px;
    border-radius: 5px;
    font-size: 10.5px;
}

body.vpos-app .vpos-product-row td {
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.vpos-app .vpos-product-row td .dropdown-menu {
    white-space: normal;
}

body.vpos-app .rack-details {
    color: #2563eb !important;
    font-size: 11px;
}

@media (max-width: 767px) {
    body.vpos-app .vpos-module-header {
        display: block;
    }

    body.vpos-app .vpos-page-actions {
        justify-content: flex-start;
        margin-top: 7px;
    }

    body.vpos-app .vpos-products-commandbar,
    body.vpos-app .vpos-filter-intro {
        align-items: flex-start;
        flex-direction: column;
    }

    body.vpos-app .vpos-list-toolbar-right,
    body.vpos-app .vpos-filter-actions {
        width: 100%;
        justify-content: flex-start;
    }
}

/* ============================================================
   VPOS Product Screens Final Consolidated Polish
   Consolidated replacement for all previous product-create patches.
   Safe layer: preserves field names, IDs, Select2, iCheck, DataTables,
   fileinput, POS/product JS hooks and Bootstrap/AdminLTE behavior.
   ============================================================ */

/* -----------------------------
   Product listing action polish
   ----------------------------- */
body.vpos-app .vpos-products-page .btn,
body.vpos-app .vpos-products-page .dt-buttons .btn,
body.vpos-app .vpos-products-page .dataTables_wrapper .btn,
body.vpos-app .vpos-products-page .product_bulk_actions .btn,
body.vpos-app .vpos-products-page .bulk_product_action .btn {
    min-height: 25px;
    padding: 4px 8px;
    border-radius: 6px !important;
    font-size: 10.8px;
    font-weight: 750;
    line-height: 1.15;
    box-shadow: none !important;
}

body.vpos-app .vpos-products-page .btn-danger,
body.vpos-app .vpos-products-page .bg-red,
body.vpos-app .vpos-products-page .delete_selected_button,
body.vpos-app .vpos-products-page #delete-selected {
    border-color: #fecaca !important;
    background: #fef2f2 !important;
    color: #b91c1c !important;
}

body.vpos-app .vpos-products-page .btn-success,
body.vpos-app .vpos-products-page .bg-green,
body.vpos-app .vpos-products-page .add_to_location {
    border-color: #bbf7d0 !important;
    background: #f0fdf4 !important;
    color: #15803d !important;
}

body.vpos-app .vpos-products-page .btn-warning,
body.vpos-app .vpos-products-page .bg-orange,
body.vpos-app .vpos-products-page .deactivate-selected {
    border-color: #fed7aa !important;
    background: #fff7ed !important;
    color: #c2410c !important;
}

body.vpos-app .vpos-products-page .btn-info,
body.vpos-app .vpos-products-page .bg-aqua,
body.vpos-app .vpos-products-page .remove_from_location {
    border-color: #bfdbfe !important;
    background: #eff6ff !important;
    color: #1d4ed8 !important;
}

body.vpos-app .vpos-products-page .dt-buttons {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

body.vpos-app .vpos-products-page .dataTables_length,
body.vpos-app .vpos-products-page .dataTables_filter,
body.vpos-app .vpos-products-page .dt-buttons {
    margin-bottom: 7px;
}

body.vpos-app .vpos-products-page .dataTables_filter input,
body.vpos-app .vpos-products-page .dataTables_length select {
    height: 28px;
    border-radius: 6px;
    border-color: #cbd5e1;
    font-size: 11px;
}

body.vpos-app table#product_table {
    min-width: 1120px;
}

body.vpos-app table#product_table th,
body.vpos-app table#product_table td {
    padding: 5px 7px !important;
    font-size: 11px;
    vertical-align: middle !important;
}

body.vpos-app table#product_table th:nth-child(1),
body.vpos-app table#product_table td:nth-child(1) {
    width: 28px;
    text-align: center;
}

body.vpos-app table#product_table th:nth-child(2),
body.vpos-app table#product_table td:nth-child(2) {
    width: 74px;
    text-align: center;
    white-space: nowrap;
}

body.vpos-app table#product_table th:nth-child(4),
body.vpos-app table#product_table td:nth-child(4),
body.vpos-app table#product_table th:nth-child(5),
body.vpos-app table#product_table td:nth-child(5),
body.vpos-app table#product_table th:nth-child(6),
body.vpos-app table#product_table td:nth-child(6) {
    text-align: right;
    white-space: nowrap;
}

/* -----------------------------
   Product create/edit page shell
   ----------------------------- */
body.vpos-app .vpos-product-form-page {
    padding: 7px 9px 10px;
}

body.vpos-app .vpos-product-form-header {
    padding: 7px 9px 5px;
    background: transparent !important;
}

body.vpos-app .vpos-product-create-heading,
body.vpos-app .vpos-module-heading.vpos-product-create-heading {
    min-height: 0;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
}

body.vpos-app .vpos-product-create-heading .vpos-module-kicker {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 1px;
    color: #64748b;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.045em;
    text-transform: uppercase;
}

body.vpos-app .vpos-product-create-heading .vpos-page-title {
    margin: 0;
    color: #172033 !important;
    font-size: 20px;
    font-weight: 850;
    line-height: 1.08;
    letter-spacing: -0.035em;
}

body.vpos-app .vpos-product-create-heading .vpos-page-subtitle {
    max-width: 680px;
    margin: 2px 0 0;
    color: #64748b;
    font-size: 10.8px;
    line-height: 1.25;
}

body.vpos-app .vpos-product-create-heading .vpos-page-subtitle:empty {
    display: none;
}

body.vpos-app .vpos-product-create-heading .vpos-module-heading-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
}

body.vpos-app .vpos-product-form-page .vpos-btn-subtle,
body.vpos-app .vpos-product-form-header .btn {
    height: 28px;
    padding: 4px 9px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 1px solid #cbd5e1;
    border-radius: 7px !important;
    background: #ffffff !important;
    color: #1d4ed8 !important;
    font-size: 11px;
    font-weight: 780;
    line-height: 1;
}

/* -----------------------------
   Product form section cards
   ----------------------------- */
body.vpos-app .vpos-product-form .box.vpos-form-section,
body.vpos-app .vpos-product-form .vpos-form-section.box {
    margin-bottom: 8px;
    border: 1px solid #dbe3ed;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.045);
    overflow: hidden;
}

body.vpos-app .vpos-product-form .vpos-form-section > .box-header,
body.vpos-app .vpos-product-form .vpos-form-section .box-header {
    min-height: 30px;
    padding: 6px 9px;
    border-bottom: 1px solid #dbe3ed;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

body.vpos-app .vpos-product-form .vpos-form-section .box-title {
    color: #172033;
    font-size: 11.8px;
    font-weight: 850;
    letter-spacing: -0.01em;
    text-transform: none;
}

body.vpos-app .vpos-product-form .vpos-form-section .box-title i,
body.vpos-app .vpos-product-form .vpos-form-section .box-header i {
    margin-right: 5px;
    color: #475569;
    font-size: 11px;
}

body.vpos-app .vpos-product-form .vpos-form-section > .box-body,
body.vpos-app .vpos-product-form .vpos-form-section .box-body {
    padding: 9px 10px;
}

/* -----------------------------
   Dense form grid
   ----------------------------- */
body.vpos-app .vpos-product-form .vpos-form-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px 10px;
    align-items: start;
    margin-right: 0 !important;
    margin-left: 0 !important;
}

body.vpos-app .vpos-product-form .vpos-form-grid::before,
body.vpos-app .vpos-product-form .vpos-form-grid::after {
    display: none !important;
    content: none !important;
}

body.vpos-app .vpos-product-form .vpos-form-grid > [class*="col-"],
body.vpos-app .vpos-product-form .vpos-form-grid > .form-group,
body.vpos-app .vpos-product-form .vpos-form-grid > div {
    float: none !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
}

body.vpos-app .vpos-product-form .vpos-form-grid > .hide {
    display: none !important;
}

body.vpos-app .vpos-product-form .vpos-form-grid > .vpos-grid-full,
body.vpos-app .vpos-product-form .vpos-form-grid > .vpos-product-form-part,
body.vpos-app .vpos-product-form .vpos-form-grid > #product_form_part,
body.vpos-app .vpos-product-form .vpos-form-grid > .clearfix {
    grid-column: 1 / -1 !important;
}

body.vpos-app .vpos-product-form .vpos-form-grid > .vpos-product-description-field,
body.vpos-app .vpos-product-form .vpos-form-grid > .col-md-8 {
    grid-column: span 2;
}

body.vpos-app .vpos-product-form .vpos-form-grid > .vpos-product-image-field,
body.vpos-app .vpos-product-form .vpos-form-grid > .vpos-product-brochure-field {
    grid-column: span 1;
}

/* -----------------------------
   Dense controls
   ----------------------------- */
body.vpos-app .vpos-product-form .form-group {
    margin-bottom: 0 !important;
}

body.vpos-app .vpos-product-form label,
body.vpos-app .vpos-product-form .control-label {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 2px;
    color: #0f172a;
    font-size: 10.8px;
    font-weight: 800;
    line-height: 1.16;
}

body.vpos-app .vpos-product-form .form-control,
body.vpos-app .vpos-product-form select.form-control {
    width: 100%;
    height: 28px;
    min-height: 28px;
    padding: 4px 8px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background: #ffffff;
    color: #111827;
    font-size: 11.5px;
    line-height: 1.25;
    box-shadow: none;
}

body.vpos-app .vpos-product-form .form-control:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.11);
    outline: none;
}

body.vpos-app .vpos-product-form textarea#product_description,
body.vpos-app .vpos-product-form textarea.form-control.vpos-product-description-textarea,
body.vpos-app .vpos-product-form .vpos-textarea {
    display: block !important;
    visibility: visible !important;
    width: 100% !important;
    height: 58px !important;
    min-height: 58px !important;
    max-height: 140px;
    padding: 6px 8px;
    resize: vertical;
    line-height: 1.32;
}

/* Hide broken TinyMCE shell if an old JS cache initializes it. */
body.vpos-app .vpos-product-form .tox-tinymce,
body.vpos-app .vpos-product-form .mce-tinymce,
body.vpos-app .vpos-product-form .mce-panel {
    display: none !important;
}

body.vpos-app .vpos-product-form .select2-container {
    width: 100% !important;
}

body.vpos-app .vpos-product-form .select2-container .select2-selection--single,
body.vpos-app .vpos-product-form .select2-container--default .select2-selection--single,
body.vpos-app .vpos-product-form .select2-container .select2-selection--multiple,
body.vpos-app .vpos-product-form .select2-container--default .select2-selection--multiple {
    min-height: 28px;
    border-color: #cbd5e1;
    border-radius: 6px;
}

body.vpos-app .vpos-product-form .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding-right: 24px;
    padding-left: 8px;
    color: #111827;
    font-size: 11.5px;
    line-height: 26px;
}

body.vpos-app .vpos-product-form .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 26px;
}

body.vpos-app .vpos-product-form .select2-container--default .select2-selection--multiple {
    height: auto;
    padding: 2px 4px;
}

body.vpos-app .vpos-product-form .select2-container--default .select2-selection--multiple .select2-selection__choice {
    margin: 1px 3px 1px 0;
    padding: 2px 6px;
    border: 0;
    border-radius: 999px;
    background: #e2e8f0;
    color: #1e293b;
    font-size: 10.3px;
    line-height: 1.15;
}

body.vpos-app .vpos-product-form .input-group.vpos-input-group,
body.vpos-app .vpos-product-form .input-group {
    display: flex;
    width: 100%;
    align-items: stretch;
}

body.vpos-app .vpos-product-form .input-group > .form-control,
body.vpos-app .vpos-product-form .input-group > .select2-container {
    flex: 1 1 auto;
    min-width: 0;
}

body.vpos-app .vpos-product-form .input-group-btn {
    width: 32px;
    flex: 0 0 32px;
}

body.vpos-app .vpos-product-form .input-group-btn .btn,
body.vpos-app .vpos-product-form .vpos-input-group-btn,
body.vpos-app .vpos-product-form .input-group-addon {
    width: 32px;
    height: 28px;
    min-height: 28px;
    padding: 0;
    border-color: #cbd5e1;
    border-radius: 0 6px 6px 0 !important;
    background: #f8fafc !important;
    color: #2563eb !important;
    font-size: 11px;
    line-height: 26px;
    text-align: center;
}

body.vpos-app .vpos-product-form .help-block {
    margin: 3px 0 0;
    color: #64748b;
    font-size: 9.8px;
    line-height: 1.22;
}

body.vpos-app .vpos-product-form .text-info,
body.vpos-app .vpos-product-form .fa-info-circle {
    font-size: 10px;
}

/* -----------------------------
   Compact checkbox cards
   ----------------------------- */
body.vpos-app .vpos-product-form .vpos-check-group,
body.vpos-app .vpos-product-form .vpos-check-card,
body.vpos-app .vpos-product-form .checkbox,
body.vpos-app .vpos-product-form .radio {
    min-height: 44px;
    margin: 0 !important;
    padding: 7px 8px;
    border: 1px solid #e2e8f0;
    border-radius: 7px;
    background: #f8fafc;
}

body.vpos-app .vpos-product-form .vpos-check-group label,
body.vpos-app .vpos-product-form .vpos-check-card label,
body.vpos-app .vpos-product-form .checkbox label,
body.vpos-app .vpos-product-form .radio label {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 0;
    color: #111827;
    font-size: 10.8px;
    font-weight: 800;
    line-height: 1.18;
}

body.vpos-app .vpos-product-form .vpos-check-group .help-block,
body.vpos-app .vpos-product-form .vpos-check-card .help-block,
body.vpos-app .vpos-product-form .checkbox .help-block,
body.vpos-app .vpos-product-form .radio .help-block {
    margin-left: 22px;
}

body.vpos-app .vpos-product-form .icheckbox_square-blue,
body.vpos-app .vpos-product-form .iradio_square-blue {
    transform: scale(0.86);
    transform-origin: center;
}

/* -----------------------------
   File input cleanup
   ----------------------------- */
body.vpos-app .vpos-product-form input[type="file"] {
    max-width: 100%;
    height: 28px;
    font-size: 10.8px;
    line-height: 1.2;
}

body.vpos-app .vpos-product-form .file-input,
body.vpos-app .vpos-product-form .file-preview,
body.vpos-app .vpos-product-form .file-caption-main {
    max-width: 100%;
}

body.vpos-app .vpos-product-form .file-preview {
    margin-bottom: 4px;
    padding: 4px;
    border-color: #e2e8f0;
    border-radius: 7px;
}

body.vpos-app .vpos-product-form .file-caption,
body.vpos-app .vpos-product-form .file-caption-name {
    height: 28px;
    min-height: 28px;
    padding: 4px 8px;
    font-size: 10.8px;
}

body.vpos-app .vpos-product-form .btn-file,
body.vpos-app .vpos-product-form .fileinput-remove-button {
    height: 28px;
    padding: 4px 9px;
    border-radius: 6px;
    font-size: 10.8px;
}

/* -----------------------------
   Price table / product form part
   ----------------------------- */
body.vpos-app .vpos-product-form .vpos-price-table-shell,
body.vpos-app .vpos-product-form #product_form_part {
    min-width: 0;
}

body.vpos-app .vpos-product-form .vpos-price-table-shell {
    margin-top: 1px;
    overflow-x: auto;
}

body.vpos-app .vpos-product-form .vpos-price-table,
body.vpos-app .vpos-product-form .add-product-price-table,
body.vpos-app .vpos-product-form #product_form_part table {
    min-width: 760px;
    margin-bottom: 0;
    border: 1px solid #e2e8f0;
    border-radius: 7px;
    overflow: hidden;
}

body.vpos-app .vpos-product-form .vpos-price-table > thead > tr > th,
body.vpos-app .vpos-product-form .add-product-price-table > thead > tr > th,
body.vpos-app .vpos-product-form #product_form_part table > thead > tr > th {
    padding: 5px 7px;
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #334155;
    font-size: 10.4px;
    font-weight: 850;
    white-space: nowrap;
}

body.vpos-app .vpos-product-form .vpos-price-table > tbody > tr > td,
body.vpos-app .vpos-product-form .add-product-price-table > tbody > tr > td,
body.vpos-app .vpos-product-form #product_form_part table > tbody > tr > td {
    padding: 6px 7px;
    border-color: #edf2f7;
    vertical-align: top;
}

body.vpos-app .vpos-product-form .vpos-col-money {
    width: 31%;
}

body.vpos-app .vpos-product-form .vpos-col-number {
    width: 16%;
}

body.vpos-app .vpos-product-form .vpos-col-image-upload {
    width: 23%;
}

body.vpos-app .vpos-product-form .vpos-section-subtitle {
    margin: 1px 0 -1px;
    padding: 5px 7px;
    border-radius: 6px;
    background: #f1f5f9;
    color: #334155;
    font-size: 10.8px;
}

body.vpos-app .vpos-product-form .vpos-inline-fields {
    margin-right: -4px !important;
    margin-left: -4px !important;
}

body.vpos-app .vpos-product-form .vpos-inline-fields > [class*="col-"] {
    padding-right: 4px !important;
    padding-left: 4px !important;
}

/* -----------------------------
   Sticky action bar
   ----------------------------- */
body.vpos-app .vpos-product-form-page .vpos-form-actions {
    position: sticky;
    bottom: 0;
    z-index: 20;
    display: flex;
    justify-content: flex-end;
    margin: 8px -9px -10px;
    padding: 8px 11px;
    border-top: 1px solid rgba(148, 163, 184, 0.24);
    background: rgba(248, 250, 252, 0.96);
    backdrop-filter: blur(6px);
}

body.vpos-app .vpos-product-form-page .vpos-submit-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

body.vpos-app .vpos-product-form-page .vpos-submit-group > .btn {
    float: none;
    margin: 0;
}

body.vpos-app .vpos-product-form-page .vpos-form-action-btn {
    min-height: 28px;
    padding: 5px 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 7px !important;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.1;
    box-shadow: none;
}

body.vpos-app .vpos-product-form-page .vpos-form-action-secondary {
    border-color: #cbd5e1;
    background: #ffffff !important;
    color: #334155 !important;
}

body.vpos-app .vpos-product-form-page .vpos-form-action-primary {
    border-color: #1d4ed8;
    background: #2563eb !important;
    color: #ffffff !important;
}

body.vpos-app .vpos-product-form-page .vpos-form-action-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.08) !important;
}

/* -----------------------------
   Product create/edit responsive
   ----------------------------- */
@media (max-width: 1199px) {
    body.vpos-app .vpos-product-form .vpos-form-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 991px) {
    body.vpos-app .vpos-product-form .vpos-form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.vpos-app .vpos-product-form .vpos-form-grid > .vpos-product-description-field,
    body.vpos-app .vpos-product-form .vpos-form-grid > .col-md-8 {
        grid-column: 1 / -1;
    }
}

@media (max-width: 767px) {
    body.vpos-app .vpos-product-create-heading,
    body.vpos-app .vpos-module-heading.vpos-product-create-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    body.vpos-app .vpos-product-form .vpos-form-grid {
        grid-template-columns: 1fr;
    }

    body.vpos-app .vpos-product-form .vpos-form-grid > * {
        grid-column: 1 / -1 !important;
    }

    body.vpos-app .vpos-product-form-page .vpos-form-actions {
        position: static;
        margin: 8px 0 0;
    }

    body.vpos-app .vpos-product-form-page .vpos-submit-group,
    body.vpos-app .vpos-product-form-page .vpos-submit-group > .btn {
        width: 100%;
    }

    body.vpos-app .vpos-product-form-page .vpos-submit-group > .btn {
        justify-content: center;
    }
}
/* ============================================================
   VPOS Product List Bulk Action Toolbar
   Companion CSS for resources/views/product/partials/product_list.blade.php
   ============================================================ */

body.vpos-app .vpos-product-list-wrap {
    min-width: 0;
}

body.vpos-app .vpos-product-bulk-toolbar {
    min-height: 34px;
    margin-bottom: 7px;
    padding: 6px 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 8px;
    background: #f8fafc;
}

body.vpos-app .vpos-product-bulk-title {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #334155;
}

body.vpos-app .vpos-product-bulk-title strong {
    display: block;
    color: #1e293b;
    font-size: 11.4px;
    font-weight: 850;
    line-height: 1.1;
}

body.vpos-app .vpos-product-bulk-title small {
    display: block;
    margin-top: 1px;
    color: #64748b;
    font-size: 9.8px;
    line-height: 1.1;
}

body.vpos-app .vpos-product-bulk-icon {
    width: 24px;
    height: 24px;
    min-width: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #dbe3ed;
    border-radius: 7px;
    background: #ffffff;
    color: #64748b;
    font-size: 11px;
}

body.vpos-app .vpos-product-bulk-actions,
body.vpos-app .vpos-bulk-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    flex-wrap: wrap;
}

body.vpos-app .vpos-inline-form,
body.vpos-app .vpos-bulk-form {
    display: inline-flex;
    margin: 0;
}

body.vpos-app .vpos-bulk-btn.btn {
    min-height: 25px;
    height: 25px;
    padding: 3px 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border: 1px solid #cbd5e1;
    border-radius: 6px !important;
    background: #ffffff !important;
    color: #334155 !important;
    font-size: 10.8px;
    font-weight: 760;
    line-height: 1;
    box-shadow: none !important;
}

body.vpos-app .vpos-bulk-btn.btn i {
    color: #64748b !important;
    font-size: 10.8px;
    line-height: 1;
}

body.vpos-app .vpos-bulk-btn.btn:hover,
body.vpos-app .vpos-bulk-btn.btn:focus {
    border-color: #94a3b8;
    background: #f8fafc !important;
    color: #0f172a !important;
}

body.vpos-app .vpos-bulk-btn-danger.btn:hover,
body.vpos-app .vpos-bulk-btn-danger.btn:focus {
    border-color: rgba(185, 28, 28, 0.35);
    background: #fef2f2 !important;
    color: #991b1b !important;
}

body.vpos-app .vpos-bulk-btn-danger.btn:hover i,
body.vpos-app .vpos-bulk-btn-danger.btn:focus i {
    color: #b91c1c !important;
}

body.vpos-app .vpos-bulk-btn-primary.btn:hover,
body.vpos-app .vpos-bulk-btn-primary.btn:focus {
    border-color: rgba(37, 99, 235, 0.35);
    background: #eff6ff !important;
    color: #1d4ed8 !important;
}

body.vpos-app .vpos-bulk-btn-primary.btn:hover i,
body.vpos-app .vpos-bulk-btn-primary.btn:focus i {
    color: #2563eb !important;
}

body.vpos-app .vpos-bulk-btn-success.btn:hover,
body.vpos-app .vpos-bulk-btn-success.btn:focus {
    border-color: rgba(21, 128, 61, 0.35);
    background: #ecfdf3 !important;
    color: #166534 !important;
}

body.vpos-app .vpos-bulk-btn-success.btn:hover i,
body.vpos-app .vpos-bulk-btn-success.btn:focus i {
    color: #15803d !important;
}

body.vpos-app .vpos-bulk-btn-warning.btn:hover,
body.vpos-app .vpos-bulk-btn-warning.btn:focus {
    border-color: rgba(180, 83, 9, 0.35);
    background: #fffbeb !important;
    color: #92400e !important;
}

body.vpos-app .vpos-bulk-btn-warning.btn:hover i,
body.vpos-app .vpos-bulk-btn-warning.btn:focus i {
    color: #b45309 !important;
}

body.vpos-app .vpos-bulk-btn-muted.btn:hover,
body.vpos-app .vpos-bulk-btn-muted.btn:focus {
    border-color: rgba(71, 85, 105, 0.35);
    background: #f1f5f9 !important;
    color: #334155 !important;
}

body.vpos-app .vpos-bulk-tooltip {
    display: inline-flex;
    align-items: center;
    min-height: 25px;
    color: #64748b;
}

body.vpos-app .vpos-product-table-shell {
    overflow-x: auto;
}

body.vpos-app table#product_table {
    width: 100% !important;
    margin-bottom: 0 !important;
    font-size: 11.15px;
}

body.vpos-app table#product_table thead > tr > th {
    padding: 5px 7px;
    white-space: nowrap;
    vertical-align: middle;
}

body.vpos-app table#product_table tbody > tr > td {
    padding: 5px 7px;
    vertical-align: middle;
}

body.vpos-app table#product_table .vpos-col-select {
    width: 30px !important;
    min-width: 30px;
    max-width: 30px;
    text-align: center;
}

body.vpos-app table#product_table .vpos-col-image {
    width: 42px !important;
    min-width: 42px;
    max-width: 42px;
    text-align: center;
}

body.vpos-app table#product_table .vpos-col-actions {
    width: 74px !important;
    min-width: 74px;
    max-width: 92px;
    text-align: center;
}

body.vpos-app table#product_table .vpos-col-product {
    min-width: 190px;
}

body.vpos-app table#product_table .vpos-col-location {
    min-width: 130px;
}

body.vpos-app table#product_table .vpos-col-money,
body.vpos-app table#product_table .vpos-col-stock {
    min-width: 90px;
    text-align: right;
}

body.vpos-app table#product_table .vpos-col-type,
body.vpos-app table#product_table .vpos-col-tax {
    width: 82px;
    text-align: center;
}

body.vpos-app table#product_table .vpos-col-sku {
    min-width: 95px;
}

body.vpos-app table#product_table .vpos-col-custom {
    min-width: 85px;
}

body.vpos-app table#product_table td {
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.vpos-app table#product_table td .dropdown-menu,
body.vpos-app table#product_table td .btn-group,
body.vpos-app table#product_table td .btn {
    white-space: normal;
}

body.vpos-app .vpos-text-center {
    text-align: center !important;
}

body.vpos-app .vpos-text-right {
    text-align: right !important;
}

@media (max-width: 991px) {
    body.vpos-app .vpos-product-bulk-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }

    body.vpos-app .vpos-product-bulk-actions {
        width: 100%;
        justify-content: flex-start;
    }
}

@media (max-width: 767px) {
    body.vpos-app .vpos-product-bulk-actions,
    body.vpos-app .vpos-bulk-form,
    body.vpos-app .vpos-bulk-btn.btn {
        width: 100%;
    }
}
/* ============================================================
   VPOS Edit Single Product Variation Image Polish
   Companion for product/partials/edit_single_product_form_part.blade.php
   ============================================================ */

body.vpos-app .vpos-product-form .vpos-edit-price-table-shell {
    margin-top: 2px;
}

body.vpos-app .vpos-product-form .vpos-variation-media-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 7px;
}

body.vpos-app .vpos-product-form .vpos-variation-media-item {
    position: relative;
    width: 48px;
    height: 48px;
    margin: 0;
    padding: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-color: #dbe3ed;
    border-radius: 6px;
    background: #ffffff;
}

body.vpos-app .vpos-product-form .vpos-variation-media-item img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

body.vpos-app .vpos-product-form .vpos-delete-media {
    position: absolute;
    top: -4px;
    right: -4px;
    z-index: 2;
    width: 18px;
    height: 18px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    cursor: pointer;
    font-size: 10px;
    line-height: 18px;
}

body.vpos-app .vpos-product-form .vpos-variation-image-upload .help-block {
    margin-top: 4px;
}
/* ============================================================
   VPOS Variable Product Form Part
   Compact enterprise treatment for variable product/variation panel.
   Safe CSS-only support for variable_product_form_part.blade.php.
   ============================================================ */

body.vpos-app .vpos-product-form .vpos-grid-full,
body.vpos-app .vpos-product-form .vpos-variation-section {
    grid-column: 1 / -1;
    min-width: 0;
}

body.vpos-app .vpos-product-form .vpos-variation-panel {
    border: 1px solid #dbe3ed;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.045);
    overflow: hidden;
}

body.vpos-app .vpos-product-form .vpos-variation-toolbar {
    min-height: 42px;
    padding: 8px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border-bottom: 1px solid #e2e8f0;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

body.vpos-app .vpos-product-form .vpos-variation-title {
    min-width: 0;
}

body.vpos-app .vpos-product-form .vpos-section-kicker {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 2px;
    color: #64748b;
    font-size: 9.8px;
    font-weight: 850;
    letter-spacing: 0.045em;
    line-height: 1.1;
    text-transform: uppercase;
}

body.vpos-app .vpos-product-form .vpos-variation-title h4 {
    margin: 0;
    color: #0f172a;
    font-size: 12.4px;
    font-weight: 850;
    line-height: 1.15;
}

body.vpos-app .vpos-product-form .vpos-variation-title p {
    max-width: 760px;
    margin: 3px 0 0;
    color: #64748b;
    font-size: 10.4px;
    line-height: 1.25;
}

body.vpos-app .vpos-product-form .vpos-variation-actions {
    flex: 0 0 auto;
}

body.vpos-app .vpos-product-form .vpos-variation-add-btn {
    min-height: 27px;
    padding: 4px 9px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 6px !important;
    font-size: 10.8px;
    font-weight: 780;
    line-height: 1.1;
}

body.vpos-app .vpos-product-form .vpos-variation-helper {
    padding: 6px 10px;
    border-bottom: 1px solid #e8eef5;
    background: #f8fafc;
    color: #64748b;
    font-size: 10.4px;
    line-height: 1.25;
}

body.vpos-app .vpos-product-form .vpos-variation-helper span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

body.vpos-app .vpos-product-form .vpos-variation-table-shell {
    border: 0;
    border-radius: 0;
    overflow-x: auto;
}

body.vpos-app .vpos-product-form table.vpos-variation-table {
    min-width: 940px;
    margin-bottom: 0;
    border: 0;
    font-size: 11px;
}

body.vpos-app .vpos-product-form table.vpos-variation-table > thead > tr > th {
    padding: 6px 8px;
    border-top: 0;
    border-bottom: 1px solid #dbe3ed;
    background: #eef3f8;
    color: #1e293b;
    font-size: 10.6px;
    font-weight: 850;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

body.vpos-app .vpos-product-form table.vpos-variation-table > tbody > tr > td {
    padding: 8px;
    vertical-align: top;
    border-color: #e8eef5;
}

body.vpos-app .vpos-product-form table.vpos-variation-table .vpos-col-variation,
body.vpos-app .vpos-product-form table.vpos-variation-table > tbody > tr > td:first-child {
    width: 30%;
    min-width: 260px;
}

body.vpos-app .vpos-product-form table.vpos-variation-table .vpos-col-variation-values,
body.vpos-app .vpos-product-form table.vpos-variation-table > tbody > tr > td:nth-child(2) {
    width: 70%;
    min-width: 620px;
}

/* Nested variation value tables rendered by product_variation_row/edit_product_variation_row. */
body.vpos-app .vpos-product-form table.variation_value_table {
    width: 100%;
    min-width: 720px;
    margin: 5px 0 0;
    border: 1px solid #e2e8f0;
    border-radius: 7px;
    background: #ffffff;
    overflow: hidden;
}

body.vpos-app .vpos-product-form table.variation_value_table > thead > tr > th,
body.vpos-app .vpos-product-form table.variation_value_table > tbody > tr > td {
    padding: 5px 6px;
    vertical-align: top;
    border-color: #edf2f7;
    font-size: 10.7px;
}

body.vpos-app .vpos-product-form table.variation_value_table > thead > tr > th {
    background: #f8fafc;
    color: #334155;
    font-weight: 820;
    white-space: nowrap;
}

body.vpos-app .vpos-product-form .variation_row .form-group,
body.vpos-app .vpos-product-form .variation_value_row .form-group {
    margin-bottom: 5px;
}

body.vpos-app .vpos-product-form .variation_row label,
body.vpos-app .vpos-product-form .variation_value_row label {
    margin-bottom: 2px;
    font-size: 10.5px;
}

body.vpos-app .vpos-product-form .variation_row .form-control,
body.vpos-app .vpos-product-form .variation_value_row .form-control,
body.vpos-app .vpos-product-form .variation_row .select2-container .select2-selection--single,
body.vpos-app .vpos-product-form .variation_value_row .select2-container .select2-selection--single {
    min-height: 28px;
    height: 28px;
    font-size: 11px;
}

body.vpos-app .vpos-product-form .variation_row .btn,
body.vpos-app .vpos-product-form .variation_value_row .btn,
body.vpos-app .vpos-product-form .add_variation_value_row,
body.vpos-app .vpos-product-form .remove_variation_value_row {
    min-height: 24px;
    padding: 3px 7px;
    border-radius: 5px;
    font-size: 10.5px;
    line-height: 1.2;
}

body.vpos-app .vpos-product-form .variation_template_values_div {
    margin-top: 5px;
}

body.vpos-app .vpos-product-form .variation_row .help-block,
body.vpos-app .vpos-product-form .variation_value_row .help-block {
    margin-top: 2px;
    font-size: 9.8px;
}

@media (max-width: 767px) {
    body.vpos-app .vpos-product-form .vpos-variation-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }

    body.vpos-app .vpos-product-form .vpos-variation-actions,
    body.vpos-app .vpos-product-form .vpos-variation-add-btn {
        width: 100%;
    }

    body.vpos-app .vpos-product-form .vpos-variation-add-btn {
        justify-content: center;
    }
}
/* ============================================================
   VPOS Product Variation Rows
   Compact styling for product_variation_row + variation_value_row.
   Safe: preserves all variation JS hooks/classes.
   ============================================================ */

body.vpos-app .vpos-product-form .vpos-variation-row > td {
    padding: 9px 8px !important;
    vertical-align: top !important;
    background: #ffffff;
}

body.vpos-app .vpos-product-form .vpos-variation-template-cell {
    width: 250px;
    min-width: 230px;
    max-width: 280px;
}

body.vpos-app .vpos-product-form .vpos-variation-values-cell {
    min-width: 0;
}

body.vpos-app .vpos-product-form .vpos-variation-template-card {
    min-height: 100%;
    padding: 8px;
    border: 1px solid #dbe3ed;
    border-radius: 8px;
    background: #f8fafc;
}

body.vpos-app .vpos-product-form .vpos-variation-card-title {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 7px;
    color: #1e293b;
    font-size: 11px;
    font-weight: 850;
    line-height: 1.1;
}

body.vpos-app .vpos-product-form .vpos-variation-card-title i {
    color: #475569;
    font-size: 11px;
}

body.vpos-app .vpos-product-form .vpos-mini-label {
    margin-bottom: 3px;
    color: #475569;
    font-size: 10.5px;
    font-weight: 800;
}

body.vpos-app .vpos-product-form .vpos-variation-template-card .form-group {
    margin-bottom: 7px;
}

body.vpos-app .vpos-product-form .vpos-variation-card-note {
    margin-top: 4px;
    color: #64748b;
    font-size: 10px;
    line-height: 1.25;
}

body.vpos-app .vpos-product-form .vpos-variation-value-table-shell {
    width: 100%;
    overflow-x: auto;
    border: 1px solid #dbe3ed;
    border-radius: 8px;
    background: #ffffff;
}

body.vpos-app .vpos-product-form .vpos-variation-value-table {
    min-width: 980px;
    margin-bottom: 0;
    table-layout: fixed;
}

body.vpos-app .vpos-product-form .vpos-variation-value-table > thead > tr > th {
    padding: 6px 7px;
    background: #eef3f8;
    color: #1e293b;
    font-size: 10.4px;
    font-weight: 850;
    line-height: 1.15;
    vertical-align: middle;
    white-space: nowrap;
}

body.vpos-app .vpos-product-form .vpos-variation-value-table > tbody > tr > td {
    padding: 6px 7px;
    vertical-align: top;
}

body.vpos-app .vpos-product-form .vpos-variation-value-table .vpos-col-sku {
    width: 130px;
}

body.vpos-app .vpos-product-form .vpos-variation-value-table .vpos-col-variation-value {
    width: 145px;
}

body.vpos-app .vpos-product-form .vpos-variation-value-table .vpos-col-purchase-price {
    width: 235px;
}

body.vpos-app .vpos-product-form .vpos-variation-value-table .vpos-col-profit {
    width: 135px;
}

body.vpos-app .vpos-product-form .vpos-variation-value-table .vpos-col-selling-price {
    width: 170px;
}

body.vpos-app .vpos-product-form .vpos-variation-value-table .vpos-col-image-upload {
    width: 150px;
}

body.vpos-app .vpos-product-form .vpos-variation-value-table .vpos-col-actions {
    width: 42px;
    text-align: center;
}

body.vpos-app .vpos-product-form .vpos-split-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin-top: 2px;
    color: #64748b;
    font-size: 9.5px;
    line-height: 1.1;
    text-transform: none;
    white-space: nowrap;
}

body.vpos-app .vpos-product-form .vpos-price-pair {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 5px;
}

body.vpos-app .vpos-product-form .vpos-price-stack {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 5px;
}

body.vpos-app .vpos-product-form .vpos-variation-value-table .form-control,
body.vpos-app .vpos-product-form .vpos-variation-value-table .select2-container .select2-selection--single,
body.vpos-app .vpos-product-form .vpos-variation-value-table .select2-container .select2-selection--multiple {
    height: 27px;
    min-height: 27px;
    padding: 3px 6px;
    border-radius: 5px;
    font-size: 11px;
}

body.vpos-app .vpos-product-form .vpos-variation-value-table .vpos-apply-all-group {
    display: flex;
    width: 100%;
}

body.vpos-app .vpos-product-form .vpos-variation-value-table .vpos-apply-all-group .form-control {
    flex: 1 1 auto;
    min-width: 0;
}

body.vpos-app .vpos-product-form .vpos-variation-value-table .vpos-apply-all-group .input-group-btn {
    width: 29px;
    flex: 0 0 29px;
}

body.vpos-app .vpos-product-form .vpos-apply-all-btn {
    width: 28px;
    height: 27px;
    min-height: 27px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-color: #cbd5e1;
    border-radius: 0 5px 5px 0;
    background: #f8fafc !important;
    color: #2563eb !important;
    font-size: 10px;
}

body.vpos-app .vpos-product-form .vpos-variation-action-cell {
    text-align: center;
    white-space: nowrap;
}

body.vpos-app .vpos-product-form .vpos-variation-action-btn {
    width: 25px;
    height: 25px;
    min-height: 25px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px !important;
    font-size: 10px;
    line-height: 1;
}

body.vpos-app .vpos-product-form .vpos-variation-add-value-btn {
    background: #16834f !important;
    border-color: #16834f !important;
    color: #ffffff !important;
}

body.vpos-app .vpos-product-form .vpos-variation-remove-value-btn {
    background: #b91c1c !important;
    border-color: #b91c1c !important;
    color: #ffffff !important;
}

body.vpos-app .vpos-product-form .vpos-variation-image-input,
body.vpos-app .vpos-product-form .variation_images {
    max-width: 100%;
    font-size: 10.5px;
}

body.vpos-app .vpos-product-form .vpos-variation-sku-input,
body.vpos-app .vpos-product-form .vpos-variation-value-input,
body.vpos-app .vpos-product-form .vpos-money-input,
body.vpos-app .vpos-product-form .vpos-percent-input {
    width: 100%;
}

body.vpos-app .vpos-product-form .vpos-money-input,
body.vpos-app .vpos-product-form .vpos-percent-input {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 991px) {
    body.vpos-app .vpos-product-form .vpos-variation-row,
    body.vpos-app .vpos-product-form .vpos-variation-row > td {
        display: block;
        width: 100% !important;
        max-width: none;
    }

    body.vpos-app .vpos-product-form .vpos-variation-template-cell {
        margin-bottom: 8px;
    }
}
/* ============================================================
   VPOS Edit Variable Product Form Part
   Compact enterprise styling for edit variable product rows.
   Safe CSS-only: preserves all product.js hooks/classes.
   ============================================================ */

body.vpos-app .vpos-edit-variable-toolbar-wrap,
body.vpos-app .vpos-edit-variable-table-wrap {
    padding-right: 0 !important;
    padding-left: 0 !important;
}

body.vpos-app .vpos-edit-variable-toolbar {
    min-height: 36px;
    margin-bottom: 8px;
    padding: 7px 9px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 8px;
    background: #f8fafc;
}

body.vpos-app .vpos-edit-variable-title {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #1e293b;
}

body.vpos-app .vpos-edit-variable-title > i {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: #eff6ff;
    color: #2563eb;
    font-size: 11px;
}

body.vpos-app .vpos-edit-variable-title strong {
    display: block;
    color: #1e293b;
    font-size: 11.8px;
    font-weight: 850;
    line-height: 1.1;
}

body.vpos-app .vpos-edit-variable-title span {
    display: block;
    margin-top: 1px;
    color: #64748b;
    font-size: 10.2px;
    line-height: 1.15;
}

body.vpos-app .vpos-add-variation-btn {
    min-height: 27px;
    padding: 4px 9px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 7px !important;
    font-size: 11px;
    font-weight: 780;
    white-space: nowrap;
}

body.vpos-app .vpos-variable-edit-table-shell {
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 8px;
    background: #ffffff;
    overflow-x: auto;
}

body.vpos-app .vpos-variable-edit-table {
    min-width: 880px;
    margin-bottom: 0;
}

body.vpos-app .vpos-variable-edit-table > thead > tr > th {
    height: 29px;
    padding: 6px 8px;
    background: #eef3f8;
    color: #1e293b;
    font-size: 10.6px;
    font-weight: 850;
    white-space: nowrap;
    vertical-align: middle;
}

body.vpos-app .vpos-variable-edit-table > tbody > tr > td {
    padding: 8px;
    vertical-align: top;
}

body.vpos-app .vpos-variable-edit-table .vpos-col-variation-name {
    width: 220px;
}

body.vpos-app .vpos-variable-edit-table .vpos-col-variation-values {
    min-width: 620px;
}

body.vpos-app .vpos-edit-variation-row > .vpos-edit-variation-name-cell {
    width: 220px;
    min-width: 220px;
    max-width: 220px;
    background: #fbfdff;
}

body.vpos-app .vpos-edit-variation-row .vpos-variation-template-card {
    padding: 8px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #ffffff;
}

body.vpos-app .vpos-edit-variation-row .vpos-variation-card-title {
    margin-bottom: 7px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #334155;
    font-size: 11px;
    font-weight: 850;
}

body.vpos-app .vpos-edit-variation-row .vpos-variation-card-title i {
    color: #64748b;
    font-size: 11px;
}

body.vpos-app .vpos-edit-variation-row .vpos-mini-label {
    margin-bottom: 3px;
    color: #475569;
    font-size: 10.5px;
    font-weight: 800;
}

body.vpos-app .vpos-edit-variation-row .vpos-variation-card-note {
    margin-top: 5px;
    color: #64748b;
    font-size: 10px;
    line-height: 1.2;
}

body.vpos-app .vpos-edit-variation-value-table {
    min-width: 620px;
    margin-bottom: 0;
    border-color: #e2e8f0;
}

body.vpos-app .vpos-edit-variation-value-table > thead > tr > th {
    padding: 5px 7px;
    background: #f8fafc;
    color: #334155;
    font-size: 10.5px;
    font-weight: 850;
    white-space: nowrap;
    vertical-align: middle;
}

body.vpos-app .vpos-edit-variation-value-table > tbody > tr > td {
    padding: 6px 7px;
    vertical-align: top;
    border-color: #edf2f7;
}

body.vpos-app .vpos-edit-variation-value-table .vpos-col-variation-value {
    width: 26%;
}

body.vpos-app .vpos-edit-variation-value-table .vpos-col-purchase-price {
    width: 22%;
}

body.vpos-app .vpos-edit-variation-value-table .vpos-col-selling-price {
    width: 28%;
}

body.vpos-app .vpos-edit-variation-value-table .vpos-col-actions {
    width: 44px;
    text-align: center;
}

body.vpos-app .vpos-edit-variation-value-table .form-control,
body.vpos-app .vpos-edit-variation-value-table input.form-control {
    height: 28px;
    min-height: 28px;
    padding: 4px 7px;
    border-radius: 6px;
    font-size: 11.3px;
}

body.vpos-app .vpos-edit-variation-value-table .vpos-price-stack {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
}

body.vpos-app .vpos-edit-variation-value-table .vpos-variation-action-cell {
    text-align: center;
    white-space: nowrap;
}

body.vpos-app .vpos-edit-variation-value-table .vpos-variation-action-btn {
    width: 24px;
    min-width: 24px;
    height: 24px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px !important;
    font-size: 10px;
    line-height: 1;
}

body.vpos-app .vpos-edit-variation-value-table .vpos-inline-help {
    width: 20px;
    height: 20px;
    min-height: 20px;
    padding: 0;
    margin-left: 3px;
    color: #64748b;
    vertical-align: middle;
}

body.vpos-app .vpos-edit-variation-value-table .vpos-inline-help:hover,
body.vpos-app .vpos-edit-variation-value-table .vpos-inline-help:focus {
    color: #2563eb;
    text-decoration: none;
    box-shadow: none;
}

@media (max-width: 991px) {
    body.vpos-app .vpos-edit-variable-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }

    body.vpos-app .vpos-add-variation-btn {
        width: 100%;
        justify-content: center;
    }
}
/* ============================================================
   VPOS Edit Product Variation Row Polish
   Companion for product/partials/edit_product_variation_row.blade.php
   ============================================================ */

body.vpos-app .vpos-edit-product-variation-row > td {
    vertical-align: top;
}

body.vpos-app .vpos-edit-product-variation-row .vpos-variation-template-card {
    min-width: 180px;
    padding: 8px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #f8fafc;
}

body.vpos-app .vpos-edit-product-variation-row .vpos-variation-card-title {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    color: #334155;
    font-size: 10.8px;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

body.vpos-app .vpos-edit-product-variation-row .vpos-variation-card-title i {
    color: #2563eb;
    font-size: 11px;
}

body.vpos-app .vpos-edit-product-variation-row .vpos-mini-label {
    margin-bottom: 3px;
    color: #64748b;
    font-size: 10.3px;
    font-weight: 800;
}

body.vpos-app .vpos-edit-product-variation-row .vpos-variation-card-note {
    margin-top: 5px;
    color: #64748b;
    font-size: 10px;
    line-height: 1.2;
}

body.vpos-app .vpos-edit-product-variation-row .vpos-edit-variation-value-table-shell {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow-x: auto;
    background: #ffffff;
}

body.vpos-app .vpos-edit-product-variation-row .vpos-edit-variation-value-table {
    min-width: 980px;
    margin-bottom: 0;
}

body.vpos-app .vpos-edit-product-variation-row .vpos-edit-variation-value-table > thead > tr > th {
    padding: 6px 7px;
    background: #f1f5f9;
    color: #334155;
    font-size: 10.5px;
    font-weight: 850;
    white-space: nowrap;
    vertical-align: middle;
}

body.vpos-app .vpos-edit-product-variation-row .vpos-edit-variation-value-table > tbody > tr > td {
    padding: 6px 7px;
    vertical-align: top;
}

body.vpos-app .vpos-edit-product-variation-row .vpos-col-sku {
    width: 150px;
}

body.vpos-app .vpos-edit-product-variation-row .vpos-col-variation-value {
    width: 160px;
}

body.vpos-app .vpos-edit-product-variation-row .vpos-col-purchase-price,
body.vpos-app .vpos-edit-product-variation-row .vpos-col-selling-price {
    width: 210px;
}

body.vpos-app .vpos-edit-product-variation-row .vpos-col-profit {
    width: 100px;
}

body.vpos-app .vpos-edit-product-variation-row .vpos-col-image-upload {
    width: 210px;
}

body.vpos-app .vpos-edit-product-variation-row .vpos-col-actions {
    width: 44px;
    text-align: center;
}

body.vpos-app .vpos-edit-product-variation-row .vpos-split-label {
    display: flex;
    justify-content: space-between;
    gap: 6px;
    margin-top: 2px;
    color: #64748b;
    font-size: 9.5px;
    font-weight: 600;
}

body.vpos-app .vpos-edit-product-variation-row .vpos-price-pair,
body.vpos-app .vpos-edit-product-variation-row .vpos-price-stack {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
}

body.vpos-app .vpos-edit-product-variation-row .vpos-price-stack {
    grid-template-columns: 1fr;
}

body.vpos-app .vpos-edit-product-variation-row .form-control,
body.vpos-app .vpos-edit-product-variation-row .input-sm {
    height: 28px;
    min-height: 28px;
    padding: 4px 7px;
    border-radius: 5px;
    font-size: 11px;
}

body.vpos-app .vpos-edit-product-variation-row .vpos-variation-action-btn {
    min-width: 25px;
    height: 25px;
    padding: 2px 6px;
    border-radius: 5px;
    font-size: 10px;
    line-height: 1;
}

body.vpos-app .vpos-edit-product-variation-row .vpos-variation-media-list {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 5px;
}

body.vpos-app .vpos-edit-product-variation-row .vpos-variation-media {
    position: relative;
    width: 42px;
    height: 42px;
    padding: 2px;
    overflow: hidden;
    border-color: #e2e8f0;
    border-radius: 6px;
    background: #ffffff;
}

body.vpos-app .vpos-edit-product-variation-row .vpos-variation-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

body.vpos-app .vpos-edit-product-variation-row .vpos-delete-media {
    position: absolute;
    top: -5px;
    right: -5px;
    z-index: 2;
    cursor: pointer;
    border-radius: 999px;
    font-size: 9px;
}

body.vpos-app .vpos-edit-product-variation-row input[type="file"].variation_images {
    max-width: 100%;
    font-size: 10.5px;
}

body.vpos-app .vpos-edit-product-variation-row .vpos-empty-variation-row {
    padding: 10px !important;
    font-size: 11px;
}
/* ============================================================
   VPOS Combo Product Form Part
   Compact enterprise treatment for combo product composition.
   ============================================================ */

body.vpos-app .vpos-product-form .vpos-combo-product-form-part {
    grid-column: 1 / -1;
    padding: 0 !important;
}

body.vpos-app .vpos-product-form .vpos-combo-builder {
    display: grid;
    gap: 9px;
    min-width: 0;
}

body.vpos-app .vpos-product-form .vpos-combo-search-panel {
    display: grid;
    grid-template-columns: minmax(220px, 0.75fr) minmax(320px, 1.25fr);
    gap: 10px;
    align-items: end;
    padding: 8px 9px;
    border: 1px solid #dbe3ed;
    border-radius: 8px;
    background: #f8fafc;
}

body.vpos-app .vpos-product-form .vpos-combo-search-copy strong {
    display: block;
    color: #1e293b;
    font-size: 11.8px;
    font-weight: 850;
    line-height: 1.15;
}

body.vpos-app .vpos-product-form .vpos-combo-search-copy span {
    display: block;
    margin-top: 2px;
    color: #64748b;
    font-size: 10.4px;
    line-height: 1.2;
}

body.vpos-app .vpos-product-form .vpos-combo-search-control .form-group {
    margin-bottom: 0;
}

body.vpos-app .vpos-product-form .vpos-combo-search-group .input-group-addon {
    width: 31px;
    min-width: 31px;
    padding: 0;
    text-align: center;
    color: #64748b;
}

body.vpos-app .vpos-product-form .vpos-combo-search-group .form-control {
    height: 30px;
}

body.vpos-app .vpos-product-form .vpos-combo-table-shell {
    border: 1px solid #dbe3ed;
    border-radius: 8px;
    background: #ffffff;
    overflow-x: auto;
}

body.vpos-app .vpos-product-form .vpos-combo-product-table {
    min-width: 760px;
    margin-bottom: 0;
    border: 0;
    font-size: 11.2px;
}

body.vpos-app .vpos-product-form .vpos-combo-product-table > thead > tr > th {
    height: 29px;
    padding: 5px 7px;
    border-bottom: 1px solid #dbe3ed;
    background: #eef3f8;
    color: #1e293b;
    font-size: 10.7px;
    font-weight: 850;
    letter-spacing: 0.02em;
    vertical-align: middle;
    white-space: nowrap;
}

body.vpos-app .vpos-product-form .vpos-combo-product-table > tbody > tr > td,
body.vpos-app .vpos-product-form .vpos-combo-product-table > tfoot > tr > td {
    padding: 6px 7px;
    border-color: #e5edf5;
    vertical-align: middle;
}

body.vpos-app .vpos-product-form .vpos-combo-col-product {
    width: 42%;
}

body.vpos-app .vpos-product-form .vpos-combo-col-qty {
    width: 150px;
}

body.vpos-app .vpos-product-form .vpos-combo-col-money {
    width: 170px;
}

body.vpos-app .vpos-product-form .vpos-combo-col-action {
    width: 44px;
}

body.vpos-app .vpos-product-form .vpos-combo-product-cell {
    min-width: 0;
}

body.vpos-app .vpos-product-form .vpos-combo-product-name {
    color: #111827;
    font-size: 11.6px;
    font-weight: 800;
    line-height: 1.2;
}

body.vpos-app .vpos-product-form .vpos-combo-product-name span {
    color: #475569;
    font-weight: 700;
}

body.vpos-app .vpos-product-form .vpos-combo-product-meta {
    margin-top: 2px;
    color: #64748b;
    font-size: 10.3px;
    line-height: 1.1;
}

body.vpos-app .vpos-product-form .vpos-combo-qty-wrap {
    display: inline-grid;
    grid-template-columns: 70px minmax(56px, auto);
    gap: 5px;
    align-items: center;
    justify-content: center;
}

body.vpos-app .vpos-product-form .vpos-combo-qty-input,
body.vpos-app .vpos-product-form .vpos-combo-unit-select {
    width: 100% !important;
    height: 27px;
    min-height: 27px;
    padding: 3px 6px;
    font-size: 11px;
}

body.vpos-app .vpos-product-form .vpos-combo-unit-label {
    min-height: 27px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 7px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background: #f8fafc;
    color: #475569;
    font-size: 10.6px;
    font-weight: 750;
}

body.vpos-app .vpos-product-form .vpos-combo-money-cell,
body.vpos-app .vpos-product-form .vpos-combo-total-value {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

body.vpos-app .vpos-product-form .vpos-combo-total-label {
    color: #334155;
    font-size: 11px;
}

body.vpos-app .vpos-product-form .vpos-combo-total-value {
    color: #111827;
    font-size: 11.8px;
    font-weight: 850;
}

body.vpos-app .vpos-product-form .vpos-combo-remove-btn {
    width: 24px;
    height: 24px;
    min-height: 24px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-color: #fecaca;
    border-radius: 6px;
    background: #fff5f5 !important;
    color: #b91c1c !important;
}

body.vpos-app .vpos-product-form .vpos-combo-remove-btn:hover,
body.vpos-app .vpos-product-form .vpos-combo-remove-btn:focus {
    border-color: #fca5a5;
    background: #fee2e2 !important;
    color: #991b1b !important;
}

body.vpos-app .vpos-product-form .vpos-combo-pricing-panel {
    display: grid;
    grid-template-columns: repeat(2, minmax(180px, 240px));
    justify-content: end;
    gap: 10px;
    padding: 8px 9px;
    border: 1px solid #dbe3ed;
    border-radius: 8px;
    background: #f8fafc;
}

body.vpos-app .vpos-product-form .vpos-combo-pricing-field .form-group {
    margin-bottom: 0;
}

body.vpos-app .vpos-product-form .vpos-combo-pricing-field label {
    margin-bottom: 3px;
    color: #334155;
    font-size: 10.8px;
    font-weight: 850;
}

body.vpos-app .vpos-product-form .vpos-combo-pricing-field .form-control {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

body.vpos-app .ui-autocomplete {
    z-index: 1060;
    max-height: 280px;
    overflow-y: auto;
    border: 1px solid #cbd5e1;
    border-radius: 7px;
    background: #ffffff;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.16);
    font-size: 11.5px;
}

body.vpos-app .ui-autocomplete .ui-menu-item-wrapper,
body.vpos-app .ui-autocomplete .ui-menu-item > div {
    padding: 6px 8px;
    color: #1e293b;
}

body.vpos-app .ui-autocomplete .ui-state-active,
body.vpos-app .ui-autocomplete .ui-menu-item-wrapper.ui-state-active {
    border: 0;
    background: #eff6ff;
    color: #1d4ed8;
}

@media (max-width: 991px) {
    body.vpos-app .vpos-product-form .vpos-combo-search-panel {
        grid-template-columns: 1fr;
    }

    body.vpos-app .vpos-product-form .vpos-combo-pricing-panel {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        justify-content: stretch;
    }
}

@media (max-width: 767px) {
    body.vpos-app .vpos-product-form .vpos-combo-pricing-panel {
        grid-template-columns: 1fr;
    }
}
/* ============================================================
   VPOS Quick Add Product Modal
   Compact enterprise treatment for product quick-add forms.
   Safe: keeps IDs, names, Select2, iCheck, and JS hooks intact.
   ============================================================ */

body.vpos-app .vpos-quick-add-product-dialog {
    width: min(980px, calc(100vw - 24px));
}

body.vpos-app .vpos-quick-add-product-modal {
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: 10px;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.18);
}

body.vpos-app .vpos-quick-product-header {
    min-height: 52px;
    padding: 9px 12px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.22);
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

body.vpos-app .vpos-quick-product-header .close {
    margin-top: 2px;
    color: #64748b;
    opacity: 0.85;
}

body.vpos-app .vpos-modal-heading {
    min-width: 0;
}

body.vpos-app .vpos-modal-kicker {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 1px;
    color: #64748b;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.045em;
    line-height: 1.1;
    text-transform: uppercase;
}

body.vpos-app .vpos-quick-product-header .modal-title {
    margin: 0;
    color: #111827;
    font-size: 15px;
    line-height: 1.15;
    font-weight: 850;
    letter-spacing: -0.02em;
}

body.vpos-app .vpos-quick-product-header small {
    display: block;
    margin-top: 2px;
    color: #64748b;
    font-size: 10.8px;
    line-height: 1.2;
}

body.vpos-app .vpos-quick-product-body {
    max-height: calc(100vh - 170px);
    padding: 10px;
    overflow-y: auto;
    background: #eef3f9;
}

body.vpos-app .vpos-quick-section {
    margin-bottom: 9px;
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 2px 7px rgba(15, 23, 42, 0.045);
    overflow: hidden;
}

body.vpos-app .vpos-quick-section:last-child {
    margin-bottom: 0;
}

body.vpos-app .vpos-quick-section-header {
    min-height: 30px;
    padding: 7px 9px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
    background: #f8fafc;
}

body.vpos-app .vpos-quick-section-header span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #1e293b;
    font-size: 11.2px;
    font-weight: 850;
    line-height: 1.1;
}

body.vpos-app .vpos-quick-section-header i {
    color: #64748b;
    font-size: 11px;
}

body.vpos-app .vpos-quick-form-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 9px 11px;
    margin: 0;
    padding: 10px;
}

body.vpos-app .vpos-quick-form-grid > [class*="col-"] {
    float: none !important;
    width: auto !important;
    max-width: none !important;
    min-height: 0 !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
}

body.vpos-app .vpos-quick-description-field {
    grid-column: span 2;
}

body.vpos-app .vpos-quick-product-form .form-group {
    margin-bottom: 0;
}

body.vpos-app .vpos-quick-product-form label,
body.vpos-app .vpos-quick-product-form .control-label {
    margin-bottom: 3px;
    color: #0f172a;
    font-size: 10.8px;
    font-weight: 800;
    line-height: 1.15;
}

body.vpos-app .vpos-quick-product-form .form-control,
body.vpos-app .vpos-quick-product-form select.form-control,
body.vpos-app .vpos-quick-product-form .select2-container .select2-selection--single {
    height: 29px;
    min-height: 29px;
    padding: 4px 8px;
    border-color: #cbd5e1;
    border-radius: 6px;
    color: #111827;
    font-size: 11.5px;
    box-shadow: none;
}

body.vpos-app .vpos-quick-product-form .select2-container {
    width: 100% !important;
}

body.vpos-app .vpos-quick-product-form .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 27px;
    padding-left: 8px;
    padding-right: 24px;
    color: #111827;
    font-size: 11.5px;
}

body.vpos-app .vpos-quick-product-form .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 27px;
}

body.vpos-app .vpos-quick-product-form .select2-container--default .select2-selection--multiple {
    min-height: 29px;
    padding: 2px 4px;
    border-color: #cbd5e1;
    border-radius: 6px;
}

body.vpos-app .vpos-quick-product-form textarea#product_description,
body.vpos-app .vpos-quick-product-form .vpos-product-description-textarea {
    display: block !important;
    visibility: visible !important;
    min-height: 66px;
    height: 66px;
    resize: vertical;
}

body.vpos-app .vpos-quick-check-card {
    min-height: 51px;
    padding: 7px 8px;
    border: 1px solid #e2e8f0;
    border-radius: 7px;
    background: #f8fafc;
}

body.vpos-app .vpos-quick-check-card label {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 2px;
}

body.vpos-app .vpos-quick-check-card label strong {
    font-size: 11px;
}

body.vpos-app .vpos-quick-product-form .help-block {
    margin: 3px 0 0;
    color: #64748b;
    font-size: 9.8px;
    line-height: 1.2;
}

body.vpos-app .vpos-quick-inline-fields {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 120px;
    gap: 6px;
}

body.vpos-app .vpos-quick-price-shell {
    padding: 10px;
}

body.vpos-app .vpos-quick-price-shell .vpos-price-table,
body.vpos-app .vpos-quick-price-shell table {
    margin-bottom: 0;
}

body.vpos-app .vpos-quick-opening-stock-section .row {
    margin-right: 0;
    margin-left: 0;
}

body.vpos-app .vpos-quick-opening-stock-section [class*="col-"] {
    padding-right: 5px;
    padding-left: 5px;
}

body.vpos-app .vpos-quick-product-footer {
    padding: 8px 11px;
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    border-top: 1px solid rgba(148, 163, 184, 0.22);
    background: #f8fafc;
}

body.vpos-app .vpos-quick-product-footer .btn {
    min-height: 28px;
    padding: 4px 10px;
    border-radius: 7px;
    font-size: 11.3px;
    font-weight: 760;
}

body.vpos-app .vpos-quick-product-footer .btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

@media (max-width: 1199px) {
    body.vpos-app .vpos-quick-form-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 991px) {
    body.vpos-app .vpos-quick-form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.vpos-app .vpos-quick-description-field {
        grid-column: 1 / -1;
    }
}

@media (max-width: 767px) {
    body.vpos-app .vpos-quick-add-product-dialog {
        width: auto;
        margin: 8px;
    }

    body.vpos-app .vpos-quick-product-body {
        max-height: calc(100vh - 148px);
        padding: 8px;
    }

    body.vpos-app .vpos-quick-form-grid {
        grid-template-columns: 1fr;
        padding: 8px;
    }

    body.vpos-app .vpos-quick-form-grid > * {
        grid-column: 1 / -1 !important;
    }

    body.vpos-app .vpos-quick-inline-fields {
        grid-template-columns: 1fr;
    }

    body.vpos-app .vpos-quick-product-footer {
        flex-direction: column-reverse;
    }

    body.vpos-app .vpos-quick-product-footer .btn {
        width: 100%;
    }
}
/* ============================================================
   VPOS Quick Product Opening Stock
   Compact table treatment for product quick-add opening stock.
   ============================================================ */

body.vpos-app .vpos-quick-opening-stock {
    margin-right: 0;
    margin-left: 0;
}

body.vpos-app .vpos-quick-opening-stock > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
}

body.vpos-app .vpos-quick-os-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
    padding: 7px 9px;
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 7px;
    background: #f8fafc;
}

body.vpos-app .vpos-quick-os-heading {
    min-width: 0;
}

body.vpos-app .vpos-quick-os-kicker {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 2px;
    color: #64748b;
    font-size: 9.8px;
    font-weight: 820;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

body.vpos-app .vpos-quick-os-header h4 {
    margin: 0;
    color: #1e293b;
    font-size: 12.5px;
    font-weight: 850;
    line-height: 1.15;
}

body.vpos-app .vpos-quick-os-header small {
    display: block;
    margin-top: 2px;
    color: #64748b;
    font-size: 10.4px;
    line-height: 1.25;
}

body.vpos-app .vpos-quick-os-count {
    flex: 0 0 auto;
    padding: 3px 7px;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    background: #ffffff;
    color: #334155;
    font-size: 10.2px;
    font-weight: 800;
    white-space: nowrap;
}

body.vpos-app .vpos-quick-os-table-shell {
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 7px;
    background: #ffffff;
    overflow-x: auto;
}

body.vpos-app table#quick_product_opening_stock_table.vpos-quick-os-table {
    min-width: 680px;
    margin-bottom: 0;
    font-size: 11.15px;
}

body.vpos-app table#quick_product_opening_stock_table.vpos-quick-os-table > thead > tr > th {
    height: 28px;
    padding: 5px 7px;
    border-bottom: 1px solid #dbe3ed;
    background: #eef3f8;
    color: #1e293b;
    font-size: 10.4px;
    font-weight: 850;
    letter-spacing: 0.02em;
    white-space: nowrap;
    vertical-align: middle;
}

body.vpos-app table#quick_product_opening_stock_table.vpos-quick-os-table > tbody > tr > td {
    padding: 5px 7px;
    border-top-color: #e5edf5;
    vertical-align: middle;
}

body.vpos-app table#quick_product_opening_stock_table.vpos-quick-os-table > tbody > tr:nth-child(odd) {
    background: #fbfdff;
}

body.vpos-app table#quick_product_opening_stock_table .vpos-os-col-location {
    min-width: 180px;
}

body.vpos-app table#quick_product_opening_stock_table .vpos-os-col-qty,
body.vpos-app table#quick_product_opening_stock_table .vpos-os-col-cost,
body.vpos-app table#quick_product_opening_stock_table .vpos-os-col-subtotal {
    width: 132px;
}

body.vpos-app table#quick_product_opening_stock_table .vpos-os-col-date,
body.vpos-app table#quick_product_opening_stock_table .vpos-os-col-lot {
    width: 132px;
}

body.vpos-app table#quick_product_opening_stock_table .vpos-os-location span {
    display: block;
    max-width: 240px;
    overflow: hidden;
    color: #334155;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 720;
}

body.vpos-app table#quick_product_opening_stock_table .vpos-os-input.form-control {
    width: 100%;
    height: 27px;
    min-height: 27px;
    padding: 3px 7px;
    border-color: #cbd5e1;
    border-radius: 5px;
    font-size: 11.2px;
}

body.vpos-app table#quick_product_opening_stock_table .vpos-os-subtotal {
    display: inline-block;
    min-width: 58px;
    color: #0f172a;
    font-variant-numeric: tabular-nums;
    font-weight: 850;
}

@media (max-width: 767px) {
    body.vpos-app .vpos-quick-os-header {
        align-items: flex-start;
        flex-direction: column;
    }

    body.vpos-app .vpos-quick-os-count {
        align-self: flex-start;
    }
}
/* ============================================================
   VPOS Add Selling Price Group Prices
   Compact enterprise styling for product/add-selling-prices.blade.php
   ============================================================ */

body.vpos-app .vpos-selling-price-header {
    padding: 10px 12px 8px;
    background: transparent;
}

body.vpos-app .vpos-selling-price-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
}

body.vpos-app .vpos-selling-price-heading .vpos-module-kicker {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 2px;
    color: #64748b;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

body.vpos-app .vpos-selling-price-heading .vpos-page-title {
    margin: 0;
    color: #1e293b;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.03em;
}

body.vpos-app .vpos-selling-price-heading .vpos-page-subtitle {
    margin: 3px 0 0;
    color: #64748b;
    font-size: 11.4px;
    line-height: 1.25;
}

body.vpos-app .vpos-selling-price-heading .vpos-muted-separator {
    margin: 0 5px;
    color: #cbd5e1;
}

body.vpos-app .vpos-selling-price-heading .vpos-product-code {
    color: #334155;
    font-weight: 800;
}

body.vpos-app .vpos-selling-price-page {
    padding-top: 8px;
}

body.vpos-app .vpos-selling-price-card {
    margin-bottom: 10px;
    border: 1px solid rgba(148, 163, 184, 0.26);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.055);
    overflow: hidden;
}

body.vpos-app .vpos-selling-price-card-header {
    min-height: 36px;
    padding: 8px 11px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.2);
    background: #f8fafc;
}

body.vpos-app .vpos-selling-price-card-header .vpos-card-title-wrap {
    min-width: 0;
}

body.vpos-app .vpos-selling-price-card-header .vpos-card-title {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #1e293b;
    font-size: 12.4px;
    font-weight: 850;
    letter-spacing: -0.01em;
}

body.vpos-app .vpos-selling-price-card-header .vpos-card-title i {
    color: #475569;
    font-size: 12px;
}

body.vpos-app .vpos-selling-price-card-header .vpos-card-subtitle {
    display: block;
    margin-top: 2px;
    color: #64748b;
    font-size: 10.7px;
    line-height: 1.2;
}

body.vpos-app .vpos-selling-price-summary {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

body.vpos-app .vpos-summary-pill {
    min-height: 24px;
    padding: 4px 8px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 1px solid #dbe3ed;
    border-radius: 999px;
    background: #ffffff;
    color: #64748b;
    font-size: 10.2px;
    font-weight: 720;
    white-space: nowrap;
}

body.vpos-app .vpos-summary-pill strong {
    color: #1e293b;
    font-size: 11px;
}

body.vpos-app .vpos-selling-price-card-body {
    padding: 10px 11px 9px;
}

body.vpos-app .vpos-selling-price-table-shell {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #ffffff;
    overflow-x: auto;
}

body.vpos-app .vpos-selling-price-table {
    min-width: 860px;
    margin-bottom: 0;
    table-layout: auto;
    font-size: 11.25px;
}

body.vpos-app .vpos-selling-price-table > thead > tr > th {
    height: 30px;
    padding: 6px 8px;
    border-bottom: 1px solid #dbe3ed;
    background: #eef3f8;
    color: #1e293b;
    font-size: 10.7px;
    font-weight: 850;
    line-height: 1.15;
    text-align: left;
    vertical-align: middle;
    white-space: nowrap;
}

body.vpos-app .vpos-selling-price-table > tbody > tr > td {
    padding: 6px 8px;
    border-color: #e5edf5;
    vertical-align: middle;
}

body.vpos-app .vpos-selling-price-table .vpos-col-money,
body.vpos-app .vpos-selling-price-table .vpos-default-price-cell {
    width: 150px;
    text-align: right;
    white-space: nowrap;
}

body.vpos-app .vpos-selling-price-table .vpos-col-variation {
    min-width: 220px;
    width: 28%;
}

body.vpos-app .vpos-selling-price-table .vpos-col-price-group {
    min-width: 180px;
}

body.vpos-app .vpos-selling-price-table .vpos-price-group-name {
    display: inline-block;
    max-width: 190px;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
    white-space: nowrap;
}

body.vpos-app .vpos-selling-price-table .vpos-variation-cell {
    min-width: 0;
    text-align: left;
}

body.vpos-app .vpos-selling-price-table .vpos-variation-cell strong {
    display: block;
    max-width: 260px;
    overflow: hidden;
    color: #1e293b;
    font-size: 11.3px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.vpos-app .vpos-selling-price-table .vpos-variation-cell span {
    display: block;
    margin-top: 2px;
    color: #64748b;
    font-size: 10.3px;
    line-height: 1.1;
}

body.vpos-app .vpos-selling-price-table .vpos-price-group-controls {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(82px, 1fr) 96px;
    gap: 5px;
    align-items: center;
}

body.vpos-app .vpos-selling-price-table .vpos-price-input,
body.vpos-app .vpos-selling-price-table .vpos-price-type-select {
    height: 27px;
    min-height: 27px;
    padding: 3px 7px;
    border-color: #cbd5e1;
    border-radius: 5px;
    font-size: 11px;
    box-shadow: none;
}

body.vpos-app .vpos-selling-price-table .vpos-price-input {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

body.vpos-app .vpos-selling-price-table .display_currency {
    color: #1e293b;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

body.vpos-app .vpos-selling-price-actions {
    position: sticky;
    bottom: 0;
    z-index: 20;
    display: flex;
    justify-content: flex-end;
    margin: 10px -10px -10px;
    padding: 9px 12px;
    border-top: 1px solid rgba(148, 163, 184, 0.24);
    background: rgba(248, 250, 252, 0.96);
    backdrop-filter: blur(6px);
}

body.vpos-app .vpos-selling-price-actions .vpos-submit-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

body.vpos-app .vpos-selling-price-actions .vpos-submit-group > .btn {
    float: none;
    margin: 0;
}

body.vpos-app .vpos-selling-price-actions .vpos-form-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 29px;
    padding: 5px 10px;
    border-radius: 7px !important;
    font-size: 11.3px;
    font-weight: 750;
    line-height: 1.1;
    box-shadow: none;
}

body.vpos-app .vpos-selling-price-actions .vpos-form-action-secondary {
    border-color: #cbd5e1;
    background: #ffffff !important;
    color: #334155 !important;
}

body.vpos-app .vpos-selling-price-actions .vpos-form-action-primary {
    border-color: #1d4ed8;
    background: #2563eb !important;
    color: #ffffff !important;
}

body.vpos-app .vpos-selling-price-actions .vpos-form-action-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.08);
}

@media (max-width: 767px) {
    body.vpos-app .vpos-selling-price-heading,
    body.vpos-app .vpos-selling-price-card-header {
        align-items: flex-start;
        flex-direction: column;
    }

    body.vpos-app .vpos-selling-price-summary {
        justify-content: flex-start;
    }

    body.vpos-app .vpos-selling-price-actions {
        position: static;
        margin: 10px 0 0;
    }

    body.vpos-app .vpos-selling-price-actions .vpos-submit-group,
    body.vpos-app .vpos-selling-price-actions .vpos-submit-group > .btn {
        width: 100%;
    }

    body.vpos-app .vpos-selling-price-actions .vpos-submit-group > .btn {
        justify-content: center;
    }
}
/* ============================================================
   VPOS Bulk Edit Products
   Compact enterprise layout for resources/views/product/bulk-edit.blade.php
   ============================================================ */

body.vpos-app .vpos-bulk-edit-header {
    padding: 10px 12px 8px;
    background: transparent;
}

body.vpos-app .vpos-bulk-edit-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
}

body.vpos-app .vpos-bulk-edit-heading .vpos-module-kicker {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 2px;
    color: #64748b;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

body.vpos-app .vpos-bulk-edit-heading .vpos-page-title {
    margin: 0;
    color: #1e293b;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.03em;
}

body.vpos-app .vpos-bulk-edit-heading .vpos-page-subtitle {
    max-width: 720px;
    margin: 3px 0 0;
    color: #64748b;
    font-size: 11.4px;
    line-height: 1.25;
}

body.vpos-app .vpos-bulk-edit-products-page {
    padding-top: 8px;
}

body.vpos-app .vpos-bulk-edit-products-page .vpos-form-section {
    margin-bottom: 10px;
    border: 1px solid rgba(148, 163, 184, 0.26);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.055);
    overflow: hidden;
}

body.vpos-app .vpos-bulk-edit-products-page .vpos-form-section > .box-header {
    min-height: 34px;
    padding: 8px 11px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.20);
    background: #f8fafc;
}

body.vpos-app .vpos-bulk-edit-products-page .vpos-form-section .box-title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #1e293b;
    font-size: 12.2px;
    font-weight: 850;
    letter-spacing: -0.01em;
}

body.vpos-app .vpos-bulk-edit-products-page .vpos-form-section .box-title i {
    color: #475569;
    font-size: 12px;
}

body.vpos-app .vpos-bulk-edit-products-page .box-body {
    padding: 10px 11px 9px;
}

body.vpos-app .vpos-bulk-edit-search-row {
    margin-right: -5px;
    margin-left: -5px;
}

body.vpos-app .vpos-bulk-edit-search-row > [class*="col-"] {
    padding-right: 5px;
    padding-left: 5px;
}

body.vpos-app .vpos-bulk-edit-search-group {
    margin-bottom: 0;
}

body.vpos-app .vpos-bulk-edit-search-group label {
    margin-bottom: 3px;
    color: #0f172a;
    font-size: 10.8px;
    font-weight: 800;
}

body.vpos-app .vpos-bulk-edit-search-input .input-group-addon {
    width: 32px;
    padding: 4px 8px;
    border-color: #cbd5e1;
    background: #f8fafc;
    color: #64748b;
    font-size: 11px;
}

body.vpos-app .vpos-bulk-edit-search-input .form-control {
    height: 29px;
    min-height: 29px;
    padding: 4px 8px;
    border-color: #cbd5e1;
    border-radius: 0 6px 6px 0;
    font-size: 11.6px;
}

body.vpos-app .vpos-bulk-edit-search-group .help-block {
    margin: 4px 0 0;
    color: #64748b;
    font-size: 10.3px;
    line-height: 1.25;
}

body.vpos-app .vpos-bulk-edit-table-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

body.vpos-app .vpos-bulk-edit-table-note {
    color: #64748b;
    font-size: 10.4px;
    line-height: 1.2;
}

body.vpos-app .vpos-bulk-edit-table-shell {
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 8px;
    background: #ffffff;
    overflow-x: auto;
}

body.vpos-app table#product_table.vpos-bulk-edit-table {
    min-width: 1180px;
    margin-bottom: 0;
    table-layout: fixed;
    font-size: 11px;
}

body.vpos-app table#product_table.vpos-bulk-edit-table > thead > tr > th {
    height: 29px;
    padding: 5px 7px;
    border-bottom: 1px solid #dbe3ed;
    background: #eef3f8;
    color: #1e293b;
    font-size: 10.6px;
    font-weight: 850;
    letter-spacing: 0.015em;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
}

body.vpos-app table#product_table.vpos-bulk-edit-table > tbody > tr > td,
body.vpos-app table#product_table.vpos-bulk-edit-table > tr > td {
    padding: 5px 7px;
    border-color: #e2e8f0;
    vertical-align: middle;
}

body.vpos-app table#product_table.vpos-bulk-edit-table .vpos-bulk-col-product {
    width: 20%;
}

body.vpos-app table#product_table.vpos-bulk-edit-table .vpos-bulk-col-category,
body.vpos-app table#product_table.vpos-bulk-edit-table .vpos-bulk-col-sub-category,
body.vpos-app table#product_table.vpos-bulk-edit-table .vpos-bulk-col-brand,
body.vpos-app table#product_table.vpos-bulk-edit-table .vpos-bulk-col-tax {
    width: 14%;
}

body.vpos-app table#product_table.vpos-bulk-edit-table .vpos-bulk-col-location {
    width: 24%;
}

body.vpos-app table#product_table.vpos-bulk-edit-table .form-control,
body.vpos-app table#product_table.vpos-bulk-edit-table select.form-control,
body.vpos-app table#product_table.vpos-bulk-edit-table input.form-control {
    height: 28px;
    min-height: 28px;
    padding: 4px 7px;
    border-color: #cbd5e1;
    border-radius: 5px;
    font-size: 11px;
}

body.vpos-app table#product_table.vpos-bulk-edit-table .select2-container {
    width: 100% !important;
    text-align: left;
}

body.vpos-app table#product_table.vpos-bulk-edit-table .select2-container .select2-selection--single,
body.vpos-app table#product_table.vpos-bulk-edit-table .select2-container .select2-selection--multiple {
    min-height: 28px;
    border-color: #cbd5e1;
    border-radius: 5px;
    font-size: 11px;
}

body.vpos-app table#product_table.vpos-bulk-edit-table .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 26px;
    padding-left: 7px;
    padding-right: 22px;
    font-size: 11px;
    text-align: left;
}

body.vpos-app table#product_table.vpos-bulk-edit-table .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 26px;
}

body.vpos-app table#product_table.vpos-bulk-edit-table .select2-container--default .select2-selection--multiple {
    height: auto;
    min-height: 28px;
    padding: 1px 4px;
}

body.vpos-app table#product_table.vpos-bulk-edit-table .select2-container--default .select2-selection--multiple .select2-selection__choice {
    margin: 2px 3px 1px 0;
    padding: 2px 6px;
    border: 0;
    border-radius: 999px;
    background: #e2e8f0;
    color: #1e293b;
    font-size: 10.3px;
    line-height: 1.2;
}

body.vpos-app table#product_table.vpos-bulk-edit-table .variation_row td {
    background: #fbfdff;
}

body.vpos-app table#product_table.vpos-bulk-edit-table .variation_row input {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

body.vpos-app .vpos-bulk-edit-actions {
    min-height: 42px;
    padding: 8px 11px;
    border-top: 1px solid rgba(148, 163, 184, 0.22);
    background: #f8fafc;
}

body.vpos-app .vpos-bulk-edit-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 29px;
    padding: 5px 10px;
    border-radius: 7px !important;
    font-size: 11.3px;
    font-weight: 750;
    line-height: 1.1;
}

body.vpos-app .ui-autocomplete {
    z-index: 1060;
    max-height: 260px;
    overflow-y: auto;
    overflow-x: hidden;
    border: 1px solid #cbd5e1;
    border-radius: 7px;
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.14);
    font-size: 11.5px;
}

body.vpos-app .ui-autocomplete .ui-menu-item,
body.vpos-app .ui-autocomplete li {
    padding: 5px 8px;
    cursor: pointer;
}

body.vpos-app .ui-autocomplete .ui-state-focus,
body.vpos-app .ui-autocomplete .ui-state-active {
    border: 0;
    background: #eff6ff;
    color: #1d4ed8;
}

@media (max-width: 767px) {
    body.vpos-app .vpos-bulk-edit-heading,
    body.vpos-app .vpos-bulk-edit-table-header {
        align-items: flex-start;
        flex-direction: column;
    }

    body.vpos-app .vpos-bulk-edit-table-note {
        width: 100%;
    }

    body.vpos-app .vpos-bulk-edit-actions .btn {
        width: 100%;
        justify-content: center;
    }
}
/* ============================================================
   VPOS Product View Modal
   Compact enterprise product details modal
   ============================================================ */

.vpos-product-view-dialog.modal-xl {
    width: min(1180px, calc(100vw - 32px));
}

.vpos-product-view-modal {
    border: 0;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 16px 44px rgba(15, 23, 42, 0.22);
}

.vpos-product-view-header {
    padding: 10px 14px;
    border-bottom: 1px solid var(--vpos-border, #d9e2ec);
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.vpos-product-view-header .close {
    margin-top: 0;
    line-height: 1;
    opacity: 0.65;
}

.vpos-product-view-title-wrap {
    min-width: 0;
    padding-right: 28px;
}

.vpos-product-view-kicker {
    display: block;
    margin-bottom: 2px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--vpos-muted, #64748b);
}

.vpos-product-view-title {
    margin: 0;
    font-size: 15px;
    font-weight: 800;
    color: var(--vpos-text, #0f172a);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vpos-product-view-body {
    padding: 12px 14px;
    background: #f8fafc;
}

.vpos-product-view-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 190px;
    gap: 12px;
    align-items: start;
}

.vpos-product-meta-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.vpos-info-card {
    min-width: 0;
    padding: 10px;
    border: 1px solid var(--vpos-border, #d9e2ec);
    border-radius: 9px;
    background: #ffffff;
}

.vpos-info-card-wide {
    grid-column: 1 / -1;
}

.vpos-info-card-title {
    margin: -10px -10px 8px;
    padding: 7px 10px;
    border-bottom: 1px solid var(--vpos-border, #d9e2ec);
    background: #f8fafc;
    color: var(--vpos-text, #0f172a);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.vpos-info-list,
.vpos-custom-field-grid {
    display: grid;
    gap: 5px;
}

.vpos-custom-field-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.vpos-info-row {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
    gap: 8px;
    align-items: start;
    min-height: 20px;
    font-size: 12px;
}

.vpos-info-row span {
    color: var(--vpos-muted, #64748b);
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vpos-info-row strong {
    min-width: 0;
    color: var(--vpos-text, #0f172a);
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vpos-location-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.vpos-location-tags span {
    display: inline-flex;
    max-width: 220px;
    padding: 3px 8px;
    border: 1px solid #bfdbfe;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 11px;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vpos-product-brochure {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    font-size: 12px;
}

.vpos-product-brochure > span {
    color: var(--vpos-muted, #64748b);
    font-weight: 800;
}

.vpos-product-brochure a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 320px;
    padding: 4px 8px;
    border-radius: 7px;
    background: #e0f2fe;
    color: #0369a1;
    font-size: 11px;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vpos-product-description {
    max-height: 120px;
    overflow: auto;
    color: var(--vpos-text, #0f172a);
    font-size: 12px;
    line-height: 1.45;
}

.vpos-product-description p:last-child {
    margin-bottom: 0;
}

.vpos-product-view-image-card {
    padding: 8px;
    border: 1px solid var(--vpos-border, #d9e2ec);
    border-radius: 9px;
    background: #ffffff;
}

.vpos-product-view-image-card img {
    display: block;
    width: 100%;
    max-height: 180px;
    object-fit: contain;
    border-radius: 6px;
    background: #f8fafc;
}

.vpos-product-section {
    margin-top: 12px;
    padding: 10px;
    border: 1px solid var(--vpos-border, #d9e2ec);
    border-radius: 9px;
    background: #ffffff;
}

.vpos-product-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: -10px -10px 8px;
    padding: 7px 10px;
    border-bottom: 1px solid var(--vpos-border, #d9e2ec);
    background: #f8fafc;
}

.vpos-product-section-header h5 {
    margin: 0;
    color: var(--vpos-text, #0f172a);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.vpos-product-table-shell {
    border: 1px solid var(--vpos-border, #d9e2ec);
    border-radius: 8px;
    overflow: auto;
}

.vpos-product-table-shell > table,
.vpos-product-type-details table,
.vpos-product-stock-section table {
    margin-bottom: 0 !important;
}

.vpos-compact-detail-table > thead > tr > th,
.vpos-product-type-details table > thead > tr > th,
.vpos-product-stock-section table > thead > tr > th {
    padding: 6px 8px !important;
    border-bottom: 1px solid var(--vpos-border, #d9e2ec) !important;
    background: #f1f5f9 !important;
    color: var(--vpos-muted, #64748b) !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    white-space: nowrap;
}

.vpos-compact-detail-table > tbody > tr > td,
.vpos-product-type-details table > tbody > tr > td,
.vpos-product-stock-section table > tbody > tr > td {
    padding: 6px 8px !important;
    color: var(--vpos-text, #0f172a) !important;
    font-size: 12px !important;
    vertical-align: middle !important;
    white-space: nowrap;
}

.vpos-product-type-details {
    padding: 0;
    border: 0;
    background: transparent;
}

.vpos-product-type-details .table-responsive,
.vpos-product-stock-section .table-responsive {
    border: 1px solid var(--vpos-border, #d9e2ec);
    border-radius: 8px;
    overflow: auto;
}

.vpos-product-view-footer {
    padding: 9px 14px;
    border-top: 1px solid var(--vpos-border, #d9e2ec);
    background: #ffffff;
}

.vpos-product-view-footer .btn {
    padding: 5px 10px;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 800;
}

@media (max-width: 991px) {
    .vpos-product-view-summary {
        grid-template-columns: 1fr;
    }

    .vpos-product-view-image-wrap {
        max-width: 240px;
    }

    .vpos-product-meta-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .vpos-product-view-dialog.modal-xl {
        width: calc(100vw - 14px);
        margin: 7px;
    }

    .vpos-product-meta-grid,
    .vpos-custom-field-grid {
        grid-template-columns: 1fr;
    }

    .vpos-info-row {
        grid-template-columns: 95px minmax(0, 1fr);
    }
}
/* ============================================================
   VPOS Product Detail Partials
   Compact modal tables for single / variable / combo / stock
   ============================================================ */

.vpos-product-detail-panel,
.vpos-product-stock-details-wrap {
    min-width: 0;
}

.vpos-product-detail-panel .vpos-product-section-header {
    margin: 0 0 8px;
    border: 1px solid var(--vpos-border, #d9e2ec);
    border-radius: 8px 8px 0 0;
}

.vpos-detail-count {
    display: inline-flex;
    align-items: center;
    max-width: 180px;
    padding: 2px 7px;
    border: 1px solid #bfdbfe;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 10px;
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
}

.vpos-product-detail-table {
    min-width: 920px;
    table-layout: fixed;
}

.vpos-product-variation-detail-table,
.vpos-combo-detail-table,
.vpos-product-stock-detail-table {
    min-width: 1080px;
}

.vpos-product-detail-table th,
.vpos-product-detail-table td {
    overflow: hidden;
    text-overflow: ellipsis;
}

.vpos-product-detail-table .vpos-name-col { width: 220px; }
.vpos-product-detail-table .vpos-sku-col { width: 118px; }
.vpos-product-detail-table .vpos-location-col { width: 150px; }
.vpos-product-detail-table .vpos-money-col { width: 126px; }
.vpos-product-detail-table .vpos-percent-col { width: 92px; }
.vpos-product-detail-table .vpos-qty-col { width: 110px; }
.vpos-product-detail-table .vpos-group-price-col { width: 190px; }
.vpos-product-detail-table .vpos-image-col { width: 112px; }

.vpos-product-detail-table .vpos-money-cell,
.vpos-product-detail-table .vpos-percent-cell,
.vpos-product-detail-table .vpos-qty-cell {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.vpos-product-detail-table .vpos-image-cell {
    text-align: center;
}

.vpos-name-cell strong,
.vpos-name-cell span,
.vpos-name-cell small {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vpos-name-cell strong {
    color: var(--vpos-text, #0f172a);
    font-weight: 800;
}

.vpos-name-cell span,
.vpos-name-cell small {
    color: var(--vpos-muted, #64748b);
    font-size: 11px;
    font-weight: 700;
}

.vpos-sku-cell {
    color: #334155;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.vpos-location-cell {
    color: #334155;
    font-weight: 700;
}

.vpos-group-price-list {
    display: grid;
    gap: 3px;
}

.vpos-group-price-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px;
    align-items: center;
    min-width: 0;
}

.vpos-group-price-item span:first-child {
    color: var(--vpos-muted, #64748b);
    font-size: 11px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vpos-group-price-item strong {
    color: var(--vpos-text, #0f172a);
    font-size: 11px;
    font-weight: 800;
    text-align: right;
    white-space: nowrap;
}

.vpos-variation-media-list {
    display: flex;
    justify-content: center;
    gap: 4px;
    min-height: 28px;
}

.vpos-variation-media-list .img-thumbnail,
.vpos-variation-media-list img {
    width: 34px !important;
    height: 34px !important;
    object-fit: cover;
    padding: 2px;
    border-radius: 6px;
}

.vpos-combo-summary-strip {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 8px;
    padding: 8px 10px;
    border: 1px solid #bbf7d0;
    border-radius: 8px;
    background: #f0fdf4;
}

.vpos-combo-summary-strip span {
    color: #166534;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.vpos-combo-summary-strip strong {
    color: #14532d;
    font-size: 14px;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}

.vpos-product-stock-detail-table .vpos-name-cell strong {
    max-width: 100%;
}

.vpos-product-stock-detail-table .vpos-qty-cell span:last-child {
    margin-left: 3px;
    color: var(--vpos-muted, #64748b);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}

@media (max-width: 767px) {
    .vpos-product-detail-table,
    .vpos-product-variation-detail-table,
    .vpos-combo-detail-table,
    .vpos-product-stock-detail-table {
        min-width: 980px;
    }
}
/* ============================================================
   VPOS Product Stock History + Group Prices
   Compact enterprise polish
   ============================================================ */

.vpos-stock-history-page-header .vpos-page-subtitle {
    display: block;
    margin-top: 0.15rem;
    color: var(--vpos-muted, #64748b);
    font-size: 12px;
    font-weight: 600;
}

.vpos-stock-history-page .box,
.vpos-stock-history-page .box-body {
    overflow: visible;
}

.vpos-stock-history-filters {
    display: grid;
    grid-template-columns: minmax(320px, 1.6fr) minmax(220px, 0.8fr) minmax(260px, 1fr);
    gap: 10px;
    align-items: end;
}

.vpos-stock-history-filters .form-group {
    margin-bottom: 0;
}

.vpos-stock-history-filters label {
    margin-bottom: 4px;
    color: var(--vpos-text-muted, #64748b);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.vpos-stock-history-filters .form-control,
.vpos-stock-history-filters .select2-container .select2-selection--single {
    min-height: 32px;
    height: 32px;
    border-radius: 7px;
    font-size: 12px;
}

.vpos-stock-history-shell {
    min-height: 120px;
}

.vpos-stock-history-details {
    display: block;
}

.vpos-stock-history-titlebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--vpos-border, #e2e8f0);
}

.vpos-section-kicker,
.vpos-modal-kicker {
    display: block;
    color: var(--vpos-text-muted, #64748b);
    font-size: 10px;
    font-weight: 800;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.vpos-stock-history-titlebar h4 {
    margin: 2px 0 0;
    color: var(--vpos-text, #0f172a);
    font-size: 15px;
    font-weight: 800;
}

.vpos-stock-current-card {
    min-width: 180px;
    padding: 7px 10px;
    border: 1px solid #bbf7d0;
    border-radius: 10px;
    background: #f0fdf4;
    text-align: right;
}

.vpos-stock-current-card span {
    display: block;
    color: #166534;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.vpos-stock-current-card strong {
    display: block;
    margin-top: 1px;
    color: #14532d;
    font-size: 14px;
    font-weight: 900;
}

.vpos-stock-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}

.vpos-stock-summary-card {
    border: 1px solid var(--vpos-border, #e2e8f0);
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
}

.vpos-stock-summary-card-header {
    padding: 7px 9px;
    border-bottom: 1px solid var(--vpos-border, #e2e8f0);
    background: #f8fafc;
}

.vpos-stock-summary-card-header span {
    color: var(--vpos-text, #0f172a);
    font-size: 11px;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.vpos-stock-summary-table {
    margin-bottom: 0;
}

.vpos-stock-summary-table th,
.vpos-stock-summary-table td {
    padding: 5px 8px !important;
    border-top: 1px solid #eef2f7 !important;
    font-size: 12px;
    line-height: 1.25;
    vertical-align: middle !important;
}

.vpos-stock-summary-table th {
    width: 58%;
    color: var(--vpos-text-muted, #64748b);
    font-weight: 700;
}

.vpos-stock-summary-table td {
    color: var(--vpos-text, #0f172a);
    font-weight: 800;
    text-align: right;
    white-space: nowrap;
}

.vpos-stock-summary-in .vpos-stock-summary-card-header {
    background: #f0fdf4;
}

.vpos-stock-summary-out .vpos-stock-summary-card-header {
    background: #fff7ed;
}

.vpos-stock-summary-total .vpos-stock-summary-card-header {
    background: #eff6ff;
}

.vpos-stock-history-table-shell {
    border: 1px solid var(--vpos-border, #e2e8f0);
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
}

.vpos-stock-history-table {
    min-width: 980px;
    margin-bottom: 0 !important;
}

.vpos-stock-history-table thead th {
    padding: 7px 8px !important;
    border-bottom: 1px solid var(--vpos-border, #e2e8f0) !important;
    background: #f8fafc;
    color: var(--vpos-text-muted, #475569);
    font-size: 10.5px;
    font-weight: 850;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.vpos-stock-history-table tbody td {
    padding: 6px 8px !important;
    border-top: 1px solid #eef2f7 !important;
    color: var(--vpos-text, #0f172a);
    font-size: 12px;
    line-height: 1.25;
    vertical-align: middle !important;
}

.vpos-stock-history-table .vpos-col-type { width: 145px; }
.vpos-stock-history-table .vpos-col-qty { width: 130px; }
.vpos-stock-history-table .vpos-col-qty-secondary { width: 165px; }
.vpos-stock-history-table .vpos-col-date { width: 145px; }
.vpos-stock-history-table .vpos-col-ref { width: 190px; }
.vpos-stock-history-table .vpos-col-contact { width: 230px; }

.vpos-stock-number {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.vpos-stock-type-badge {
    display: inline-flex;
    max-width: 132px;
    padding: 2px 7px;
    border: 1px solid #dbeafe;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vpos-nowrap,
.vpos-ref-no,
.vpos-contact-name {
    white-space: nowrap;
}

.vpos-ref-no,
.vpos-contact-name {
    display: block;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vpos-ref-note,
.vpos-contact-meta {
    display: block;
    margin-top: 2px;
    color: var(--vpos-text-muted, #64748b);
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vpos-product-group-prices-modal .modal-content {
    border-radius: 12px;
    overflow: hidden;
}

.vpos-modal-header-compact {
    padding: 10px 14px !important;
    border-bottom: 1px solid var(--vpos-border, #e2e8f0);
    background: #f8fafc;
}

.vpos-modal-header-compact .modal-title {
    margin: 1px 0 0;
    color: var(--vpos-text, #0f172a);
    font-size: 15px;
    font-weight: 850;
}

.vpos-product-group-prices-body {
    padding: 12px 14px !important;
}

.vpos-product-group-prices-table-shell {
    border: 1px solid var(--vpos-border, #e2e8f0);
    border-radius: 10px;
    overflow: hidden;
}

.vpos-product-group-prices-table {
    margin-bottom: 0 !important;
}

.vpos-product-group-prices-table thead th {
    padding: 7px 8px !important;
    border-bottom: 1px solid var(--vpos-border, #e2e8f0) !important;
    background: #f8fafc;
    color: var(--vpos-text-muted, #475569);
    font-size: 10.5px;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.vpos-product-group-prices-table tbody td {
    padding: 7px 8px !important;
    border-top: 1px solid #eef2f7 !important;
    font-size: 12px;
    vertical-align: top !important;
}

.vpos-product-group-prices-table .vpos-col-variation { width: 260px; }
.vpos-product-group-prices-table .vpos-col-price { width: 190px; }

.vpos-variation-name {
    display: block;
    color: var(--vpos-text, #0f172a);
    font-weight: 850;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vpos-money-cell {
    font-weight: 850;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.vpos-group-price-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 5px;
}

.vpos-group-price-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 4px 7px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #f8fafc;
}

.vpos-group-price-item span:first-child {
    color: var(--vpos-text-muted, #64748b);
    font-size: 11px;
    font-weight: 750;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vpos-group-price-item strong {
    color: var(--vpos-text, #0f172a);
    font-size: 12px;
    font-weight: 850;
    white-space: nowrap;
}

.vpos-modal-footer-compact {
    padding: 9px 14px !important;
    border-top: 1px solid var(--vpos-border, #e2e8f0);
    background: #f8fafc;
}

@media (max-width: 991px) {
    .vpos-stock-history-filters,
    .vpos-stock-summary-grid {
        grid-template-columns: 1fr;
    }

    .vpos-stock-history-titlebar {
        align-items: stretch;
        flex-direction: column;
    }

    .vpos-stock-current-card {
        width: 100%;
        text-align: left;
    }
}
/* ============================================================
   Product Import + Opening Stock screens
   Compact enterprise styling
   ============================================================ */

.vpos-import-products-page-header,
.vpos-opening-stock-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 8px;
}

.vpos-import-products-page-header .vpos-page-title-block h1,
.vpos-opening-stock-header .vpos-page-title-block h1 {
    margin: 0;
    font-size: 18px;
    font-weight: 800;
    color: #111827;
}

.vpos-import-products-page-header .vpos-page-title-block p,
.vpos-opening-stock-header .vpos-page-title-block p {
    margin: 3px 0 0;
    font-size: 12px;
    color: #6b7280;
}

.vpos-import-products-page-header .vpos-page-kicker,
.vpos-opening-stock-header .vpos-page-kicker,
.vpos-section-eyebrow {
    display: block;
    margin-bottom: 2px;
    font-size: 10px;
    font-weight: 800;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.vpos-import-upload-card .box-body,
.vpos-import-instructions-card .box-body {
    padding: 10px 12px !important;
}

.vpos-import-upload-grid {
    display: grid;
    grid-template-columns: minmax(170px, .75fr) minmax(260px, 1.2fr) auto;
    gap: 10px;
    align-items: center;
}

.vpos-import-upload-copy strong {
    display: block;
    font-size: 13px;
    color: #111827;
}

.vpos-import-upload-copy small {
    display: block;
    margin-top: 2px;
    color: #64748b;
    font-size: 11px;
}

.vpos-import-file-field .form-group {
    margin-bottom: 0;
}

.vpos-import-file-field input[type="file"] {
    display: block;
    width: 100%;
    min-height: 30px;
    padding: 5px 7px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #fff;
    font-size: 12px;
}

.vpos-import-upload-actions {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    white-space: nowrap;
}

.vpos-import-instructions-note {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    padding: 7px 9px;
    border: 1px solid #bfdbfe;
    border-radius: 7px;
    background: #eff6ff;
    color: #1e3a8a;
    font-size: 12px;
}

.vpos-import-instructions-note strong {
    white-space: nowrap;
}

.vpos-import-instructions-table-wrap {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: auto;
    background: #fff;
}

.vpos-import-instructions-table {
    margin-bottom: 0 !important;
    min-width: 920px;
}

.vpos-import-instructions-table > thead > tr > th,
.vpos-import-instructions-table > tbody > tr > td {
    padding: 6px 8px !important;
    font-size: 12px;
    vertical-align: top !important;
    border-color: #e5e7eb !important;
}

.vpos-import-instructions-table > thead > tr > th {
    background: #f8fafc;
    color: #334155;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .03em;
    white-space: nowrap;
}

.vpos-import-instructions-table .vpos-col-no,
.vpos-import-instructions-table tbody td:first-child {
    width: 64px;
    text-align: center;
    color: #64748b;
    font-weight: 800;
}

.vpos-import-instructions-table .vpos-col-name {
    width: 280px;
}

.vpos-import-instructions-table small {
    font-size: 10.5px;
}

.vpos-opening-stock-page .vpos-os-location-card {
    margin-bottom: 10px;
    border: 1px solid #dbeafe;
    border-radius: 8px;
    box-shadow: none;
    overflow: hidden;
}

.vpos-opening-stock-page .vpos-os-location-card > .box-header {
    padding: 7px 10px;
    border-bottom: 1px solid #dbeafe;
    background: linear-gradient(180deg, #f8fbff 0%, #eef6ff 100%);
}

.vpos-opening-stock-page .vpos-os-location-card > .box-header .box-title {
    font-size: 13px;
    font-weight: 800;
    color: #1f2937;
}

.vpos-opening-stock-page .vpos-os-location-card > .box-header .box-title i {
    margin-right: 5px;
    color: #2563eb;
}

.vpos-opening-stock-page .vpos-os-location-card > .box-body {
    padding: 0 !important;
}

.vpos-os-table-shell {
    overflow-x: auto;
}

.vpos-os-table {
    margin-bottom: 0 !important;
    min-width: 1040px;
    table-layout: fixed;
}

.vpos-os-table > thead > tr > th,
.vpos-os-table > tbody > tr > td,
.vpos-os-table > tfoot > tr > td {
    padding: 5px 6px !important;
    font-size: 11.5px;
    vertical-align: middle !important;
    border-color: #e5e7eb !important;
}

.vpos-os-table > thead > tr > th {
    background: #0f766e !important;
    color: #fff;
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .025em;
    white-space: nowrap;
}

.vpos-os-product-col { width: 230px; }
.vpos-os-qty-col { width: 155px; }
.vpos-os-money-col { width: 118px; }
.vpos-os-date-col { width: 132px; }
.vpos-os-lot-col { width: 120px; }
.vpos-os-note-col { width: 170px; }
.vpos-os-action-col { width: 44px; text-align: center; }

.vpos-os-product-cell strong {
    display: block;
    max-width: 205px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vpos-os-product-cell small {
    display: block;
    color: #64748b;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vpos-os-table .form-control.input-sm,
.vpos-os-table .input-group-sm > .form-control,
.vpos-os-table .input-group-sm > .input-group-addon {
    height: 28px;
    padding: 4px 6px;
    font-size: 11.5px;
    border-radius: 4px;
}

.vpos-os-table .input-group-addon {
    min-width: 42px;
    padding-left: 6px;
    padding-right: 6px;
    font-size: 10.5px;
    color: #475569;
    background: #f8fafc;
}

.vpos-os-money-cell,
.vpos-os-total-value {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.vpos-os-money-cell input,
.vpos-os-qty-cell input {
    text-align: right;
}

.vpos-os-second-unit {
    margin-top: 4px;
}

.vpos-os-second-unit span {
    display: block;
    margin-bottom: 2px;
    font-size: 10.5px;
    color: #64748b;
    white-space: nowrap;
}

.vpos-os-note-input {
    min-height: 28px !important;
    resize: vertical;
}

.vpos-os-action-cell {
    text-align: center;
}

.vpos-os-action-cell .btn-xs {
    padding: 2px 6px;
    line-height: 1.2;
}

.vpos-os-table > tfoot > tr > td {
    background: #f8fafc;
    font-weight: 800;
}

.vpos-os-total-label {
    color: #334155;
}

.vpos-opening-stock-actions {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    justify-content: center;
    margin: 10px 0 0;
    padding: 9px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: rgba(255,255,255,.95);
    box-shadow: 0 -6px 18px rgba(15, 23, 42, .08);
}

.vpos-opening-stock-modal .modal-content {
    border-radius: 9px;
    overflow: hidden;
}

.vpos-modal-header-compact {
    padding: 9px 12px;
    border-bottom: 1px solid #e5e7eb;
    background: #f8fafc;
}

.vpos-modal-header-compact .modal-title {
    font-size: 15px;
    font-weight: 800;
    color: #111827;
}

.vpos-modal-header-compact small {
    display: block;
    margin-top: 2px;
    color: #64748b;
    font-size: 11px;
}

.vpos-modal-footer-compact {
    padding: 8px 10px;
    border-top: 1px solid #e5e7eb;
    background: #f8fafc;
}

.vpos-empty-state {
    padding: 22px;
    border: 1px dashed #cbd5e1;
    border-radius: 9px;
    background: #f8fafc;
    text-align: center;
    color: #64748b;
}

.vpos-empty-state i {
    display: block;
    margin-bottom: 6px;
    font-size: 22px;
    color: #94a3b8;
}

.vpos-empty-state h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 800;
    color: #475569;
}

.vpos-segmented-control {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 0 0 10px;
    padding: 4px;
    border: 1px solid var(--vpos-border);
    border-radius: var(--vpos-radius-sm);
    background: var(--vpos-surface);
    box-shadow: var(--vpos-shadow-xs);
}

.vpos-segmented-control .vpos-segment {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 28px;
    padding: 4px 10px;
    border-radius: var(--vpos-radius-xs);
    color: var(--vpos-text-muted);
    font-size: 12px;
    font-weight: 750;
    text-decoration: none;
}

.vpos-segmented-control .vpos-segment:hover,
.vpos-segmented-control .vpos-segment.active {
    background: color-mix(in srgb, var(--vpos-primary) 12%, var(--vpos-surface));
    color: var(--vpos-primary);
    text-decoration: none;
}

.vpos-segmented-control .vpos-segment span {
    min-width: 20px;
    padding: 1px 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--vpos-text) 8%, transparent);
    text-align: center;
}

.vpos-compact-checklist {
    display: grid;
    gap: 6px;
    max-height: 280px;
    overflow: auto;
}

.vpos-compact-checklist-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 7px 9px;
    border: 1px solid var(--vpos-border);
    border-radius: var(--vpos-radius-sm);
    background: var(--vpos-surface-muted);
    font-size: 12px;
    font-weight: 650;
}

.vpos-compact-checklist-row span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 767px) {
    .vpos-import-products-page-header,
    .vpos-opening-stock-header {
        display: block;
    }

    .vpos-import-products-page-header .vpos-page-actions {
        margin-top: 8px;
    }

    .vpos-import-upload-grid {
        grid-template-columns: 1fr;
    }

    .vpos-import-upload-actions {
        justify-content: flex-start;
        flex-wrap: wrap;
    }
}
/* ============================================================
   Import Opening Stock Screen
   Compact enterprise styling
   Safe CSS-only polish for resources/views/import_opening_stock/index.blade.php
   ============================================================ */

.vpos-import-opening-stock-heading {
    padding-bottom: 4px;
}

.vpos-import-opening-stock-page .box,
.vpos-import-opening-stock-page .vpos-import-card,
.vpos-import-opening-stock-page .vpos-import-instructions-card {
    border-radius: 10px;
    border: 1px solid var(--vpos-border, #d8dee8);
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
}

.vpos-import-upload-panel {
    display: grid;
    grid-template-columns: minmax(220px, 0.9fr) minmax(260px, 1.3fr) auto;
    gap: 12px;
    align-items: end;
    padding: 4px 0;
}

.vpos-import-upload-copy h4 {
    margin: 6px 0 3px;
    font-size: 15px;
    font-weight: 800;
    color: var(--vpos-text, #111827);
}

.vpos-import-upload-copy p {
    margin: 0;
    font-size: 12px;
    color: var(--vpos-muted, #64748b);
    line-height: 1.35;
}

.vpos-import-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px;
    border-radius: 999px;
    background: #ecfdf5;
    color: #047857;
    border: 1px solid #bbf7d0;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.vpos-import-upload-control .form-group {
    margin-bottom: 0;
}

.vpos-import-upload-control label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 4px;
    font-size: 12px;
    font-weight: 800;
    color: var(--vpos-text, #111827);
}

.vpos-import-upload-control .help-block {
    margin: 4px 0 0;
    font-size: 11px;
    color: var(--vpos-muted, #64748b);
}

.vpos-file-input {
    height: 31px;
    padding: 4px 8px;
    font-size: 12px;
    border-radius: 7px;
}

.vpos-import-upload-action {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.vpos-import-upload-action .btn,
.vpos-import-opening-stock-heading .btn {
    border-radius: 7px;
    font-size: 12px;
    font-weight: 800;
    padding: 6px 10px;
}

.vpos-import-instruction-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    align-items: center;
    padding: 8px 10px;
    margin-bottom: 8px;
    border: 1px solid #dbeafe;
    background: #eff6ff;
    border-radius: 8px;
    font-size: 12px;
    color: #334155;
}

.vpos-import-instruction-summary strong {
    color: #1e3a8a;
}

.vpos-import-instructions-table-shell {
    margin: 0;
    border: 1px solid var(--vpos-border, #d8dee8);
    border-radius: 9px;
    overflow: hidden;
}

.vpos-import-instructions-table {
    margin-bottom: 0;
    table-layout: fixed;
}

.vpos-import-instructions-table > thead > tr > th,
.vpos-import-instructions-table > tbody > tr > td {
    padding: 7px 9px !important;
    vertical-align: middle !important;
    font-size: 12px;
    line-height: 1.3;
}

.vpos-import-instructions-table > thead > tr > th {
    background: #f8fafc;
    color: #334155;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-bottom: 1px solid var(--vpos-border, #d8dee8) !important;
}

.vpos-import-instructions-table .vpos-col-no {
    width: 62px;
    text-align: center;
}

.vpos-import-instructions-table .vpos-col-name {
    width: 255px;
}

.vpos-import-instructions-table small {
    display: inline-block;
    margin-left: 5px;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}

.vpos-inline-meta {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 2px;
}

.vpos-inline-meta span {
    display: inline-flex;
    align-items: center;
    padding: 2px 6px;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    background: #f8fafc;
    font-size: 11px;
    color: #475569;
}

.vpos-alert-compact {
    padding: 8px 32px 8px 10px;
    margin-bottom: 10px;
    border-radius: 8px;
    font-size: 12px;
}

@media (max-width: 767px) {
    .vpos-import-upload-panel {
        grid-template-columns: 1fr;
        gap: 9px;
    }

    .vpos-import-upload-action {
        justify-content: flex-start;
    }

    .vpos-import-instructions-table {
        min-width: 680px;
    }
}

/* ============================================================
   VPOS Phase 1 Enterprise Shell
   Visual-only shell refinement layered after earlier UI rules.
   Keep AdminLTE hooks, menu markup, routes, IDs, and plugin classes intact.
   ============================================================ */

:root {
    --vpos-shell-bg: #eef3f8;
    --vpos-shell-surface: #ffffff;
    --vpos-shell-surface-subtle: #f8fafc;
    --vpos-shell-border: #d8e1ea;
    --vpos-shell-divider: rgba(148, 163, 184, 0.22);
    --vpos-shell-topbar-start: #1d4ed8;
    --vpos-shell-topbar-mid: #2563eb;
    --vpos-shell-topbar-end: #12315f;
    --vpos-shell-sidebar: #101827;
    --vpos-shell-sidebar-2: #142036;
    --vpos-shell-sidebar-text: #dbeafe;
    --vpos-shell-sidebar-muted: #8ea4c7;
    --vpos-shell-sidebar-hover: rgba(59, 130, 246, 0.14);
    --vpos-shell-sidebar-active: rgba(37, 99, 235, 0.34);
    --vpos-shell-accent: #38bdf8;
    --vpos-shell-focus: rgba(56, 189, 248, 0.28);
}

body.skin-black,
body.skin-black-light {
    --vpos-shell-topbar-start: #334155;
    --vpos-shell-topbar-mid: #475569;
    --vpos-shell-topbar-end: #111827;
    --vpos-shell-accent: #94a3b8;
}

body.skin-purple,
body.skin-purple-light {
    --vpos-shell-topbar-start: #5b45c2;
    --vpos-shell-topbar-mid: #6d5bd0;
    --vpos-shell-topbar-end: #2f245f;
    --vpos-shell-accent: #c4b5fd;
}

body.skin-green,
body.skin-green-light {
    --vpos-shell-topbar-start: #13734b;
    --vpos-shell-topbar-mid: #16834f;
    --vpos-shell-topbar-end: #0f3d2d;
    --vpos-shell-accent: #6ee7b7;
}

body.skin-red,
body.skin-red-light {
    --vpos-shell-topbar-start: #b63a0b;
    --vpos-shell-topbar-mid: #c2410c;
    --vpos-shell-topbar-end: #622012;
    --vpos-shell-accent: #fed7aa;
}

body.skin-yellow,
body.skin-yellow-light {
    --vpos-shell-topbar-start: #a16207;
    --vpos-shell-topbar-mid: #ca8a04;
    --vpos-shell-topbar-end: #4a3412;
    --vpos-shell-accent: #fde68a;
}

body.vpos-admin-layout {
    background: var(--vpos-shell-bg);
}

body.vpos-admin-layout .wrapper,
body.vpos-admin-layout .content-wrapper,
body.vpos-admin-layout .right-side {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.64), rgba(255, 255, 255, 0) 190px),
        var(--vpos-shell-bg);
}

body.vpos-admin-layout .main-header.vpos-header {
    min-height: var(--vpos-header-height);
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    background: linear-gradient(
        90deg,
        var(--vpos-shell-topbar-start) 0%,
        var(--vpos-shell-topbar-mid) 46%,
        var(--vpos-shell-topbar-end) 100%
    );
    box-shadow: 0 1px 10px rgba(15, 23, 42, 0.2);
}

body.vpos-admin-layout .main-header .logo,
body.vpos-admin-layout .main-header .navbar,
body.vpos-admin-layout .main-header .sidebar-toggle {
    min-height: var(--vpos-header-height);
    background: transparent !important;
    color: #ffffff !important;
}

body.vpos-admin-layout .main-header .logo {
    height: var(--vpos-header-height);
    line-height: var(--vpos-header-height);
    border-right: 1px solid rgba(255, 255, 255, 0.14);
}

body.vpos-admin-layout .vpos-navbar {
    display: flex;
    align-items: center;
    min-height: var(--vpos-header-height);
}

body.vpos-admin-layout .vpos-sidebar-toggle {
    width: 42px;
    flex: 0 0 42px;
    padding-right: 0 !important;
    padding-left: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

body.vpos-admin-layout .vpos-sidebar-toggle:hover,
body.vpos-admin-layout .vpos-sidebar-toggle:focus {
    background: rgba(255, 255, 255, 0.12) !important;
}

body.vpos-admin-layout .navbar-custom-menu.vpos-navbar-actions {
    float: none;
    margin-left: auto;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
}

body.vpos-admin-layout .navbar-custom-menu.vpos-navbar-actions::-webkit-scrollbar {
    display: none;
}

body.vpos-admin-layout .vpos-header-btn,
body.vpos-admin-layout .vpos-user-toggle {
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    background: rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
}

body.vpos-admin-layout .vpos-header-btn:hover,
body.vpos-admin-layout .vpos-header-btn:focus,
body.vpos-admin-layout .vpos-user-toggle:hover,
body.vpos-admin-layout .vpos-user-toggle:focus,
body.vpos-admin-layout .vpos-user-menu.open .vpos-user-toggle {
    border-color: rgba(255, 255, 255, 0.26) !important;
    background: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
}

body.vpos-admin-layout .vpos-header-date {
    border-color: rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.1);
}

body.vpos-admin-layout .main-sidebar.vpos-sidebar {
    width: var(--vpos-sidebar-width);
    padding-top: var(--vpos-header-height);
    border-right: 1px solid rgba(148, 163, 184, 0.18);
    background:
        linear-gradient(180deg, var(--vpos-shell-sidebar-2) 0%, var(--vpos-shell-sidebar) 220px),
        var(--vpos-shell-sidebar) !important;
    box-shadow: 2px 0 14px rgba(15, 23, 42, 0.2);
}

body.vpos-admin-layout .vpos-sidebar-inner {
    height: calc(100vh - var(--vpos-header-height));
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-color: rgba(148, 163, 184, 0.34) transparent;
    scrollbar-width: thin;
}

body.vpos-admin-layout .vpos-sidebar-inner::-webkit-scrollbar {
    width: 7px;
}

body.vpos-admin-layout .vpos-sidebar-inner::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.32);
}

body.vpos-admin-layout .vpos-sidebar-brand,
body.vpos-admin-layout .vpos-sidebar-user {
    border-color: var(--vpos-shell-divider);
    background: rgba(15, 23, 42, 0.38);
    color: #ffffff;
}

body.vpos-admin-layout .vpos-sidebar-brand-text small,
body.vpos-admin-layout .vpos-sidebar-user-meta small {
    color: var(--vpos-shell-sidebar-muted);
    opacity: 1;
}

body.vpos-admin-layout .vpos-sidebar .sidebar-menu > li > a {
    min-height: 31px;
    color: var(--vpos-shell-sidebar-text);
}

body.vpos-admin-layout .vpos-sidebar .sidebar-menu > li > a > i:first-child {
    color: color-mix(in srgb, var(--vpos-shell-sidebar-text) 72%, transparent);
}

body.vpos-admin-layout .vpos-sidebar .sidebar-menu > li:hover > a {
    background: var(--vpos-shell-sidebar-hover) !important;
    color: #ffffff !important;
}

body.vpos-admin-layout .vpos-sidebar .sidebar-menu > li.active > a,
body.vpos-admin-layout .vpos-sidebar .sidebar-menu > li.menu-open > a {
    border-left-color: var(--vpos-shell-accent);
    background: var(--vpos-shell-sidebar-active) !important;
    color: #ffffff !important;
}

body.vpos-admin-layout .vpos-sidebar .treeview-menu {
    background: transparent !important;
}

body.vpos-admin-layout .vpos-sidebar .treeview-menu > li > a {
    color: color-mix(in srgb, var(--vpos-shell-sidebar-text) 78%, transparent);
}

body.vpos-admin-layout .vpos-sidebar .treeview-menu > li:hover > a,
body.vpos-admin-layout .vpos-sidebar .treeview-menu > li.active > a {
    background: rgba(148, 163, 184, 0.12) !important;
    color: #ffffff !important;
}

body.vpos-admin-layout .content-wrapper {
    min-height: calc(100vh - var(--vpos-footer-height));
}

body.vpos-admin-layout .content-header {
    padding-top: 10px;
    padding-bottom: 5px;
}

body.vpos-admin-layout .content-header > h1 {
    color: var(--vpos-text-strong);
    font-size: 17px;
    font-weight: 760;
    letter-spacing: 0;
}

body.vpos-admin-layout .content-header > .breadcrumb {
    color: var(--vpos-text-muted);
}

body.vpos-admin-layout .box,
body.vpos-admin-layout .vpos-card,
body.vpos-admin-layout .vpos-panel,
body.vpos-admin-layout .vpos-filter-panel,
body.vpos-admin-layout .modal-content,
body.vpos-admin-layout .dropdown-menu {
    border-color: var(--vpos-shell-border);
}

body.vpos-admin-layout .box-header,
body.vpos-admin-layout .vpos-card-header,
body.vpos-admin-layout .vpos-panel-header,
body.vpos-admin-layout .vpos-filter-header {
    background: linear-gradient(180deg, var(--vpos-shell-surface) 0%, var(--vpos-shell-surface-subtle) 100%);
}

body.vpos-admin-layout .vpos-footer.main-footer {
    min-height: var(--vpos-footer-height);
    border-top-color: var(--vpos-shell-border);
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: saturate(130%) blur(6px);
}

body.vpos-admin-layout .vpos-footer-separator {
    padding: 0 6px;
    color: var(--vpos-text-soft);
}

body.vpos-admin-layout .vpos-header-btn:focus,
body.vpos-admin-layout .vpos-user-toggle:focus,
body.vpos-admin-layout .vpos-sidebar .sidebar-menu li > a:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--vpos-shell-focus) !important;
}

@media (min-width: 768px) {
    body.vpos-admin-layout:not(.sidebar-collapse) .main-header .logo,
    body.vpos-admin-layout:not(.sidebar-collapse) .main-sidebar.vpos-sidebar {
        width: var(--vpos-sidebar-width);
    }

    body.vpos-admin-layout.sidebar-mini.sidebar-collapse .main-sidebar.vpos-sidebar {
        width: var(--vpos-sidebar-collapsed-width) !important;
    }

    body.vpos-admin-layout.sidebar-mini.sidebar-collapse .vpos-sidebar-inner {
        overflow: visible;
    }
}

@media (max-width: 991px) {
    body.vpos-admin-layout .vpos-header-date,
    body.vpos-admin-layout .vpos-user-name {
        display: none;
    }
}

@media (max-width: 767px) {
    body.vpos-admin-layout .main-header .logo {
        width: 100%;
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    }

    body.vpos-admin-layout .main-header .navbar {
        width: 100%;
        margin-left: 0;
    }

    body.vpos-admin-layout .main-sidebar.vpos-sidebar {
        padding-top: calc(var(--vpos-header-height) * 2);
    }

    body.vpos-admin-layout .vpos-sidebar-inner {
        height: calc(100vh - (var(--vpos-header-height) * 2));
    }

    body.vpos-admin-layout .navbar-custom-menu.vpos-navbar-actions {
        max-width: calc(100vw - 42px);
        padding-right: 6px;
    }

    body.vpos-admin-layout .vpos-footer.main-footer {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
    }
}

/* ============================================================
   VPOS Phase 2 Auth Screens
   Shared login/register/reset polish. UI-only; preserves auth routes,
   form names, validation hooks, Select2, iCheck, and login.js behavior.
   ============================================================ */

body.vpos-auth-page {
    background:
        linear-gradient(135deg, rgba(37, 99, 235, 0.08) 0%, rgba(37, 99, 235, 0) 34%),
        linear-gradient(180deg, #f8fbff 0%, var(--vpos-bg) 100%);
}

body.vpos-auth-page .vpos-auth-shell {
    background:
        linear-gradient(90deg, rgba(15, 23, 42, 0.04), rgba(15, 23, 42, 0) 42%),
        transparent;
}

body.vpos-auth-page .vpos-auth-left {
    background:
        linear-gradient(150deg, var(--vpos-shell-topbar-start, var(--vpos-primary-active)) 0%, var(--vpos-shell-topbar-end, #0f172a) 100%);
}

body.vpos-auth-page .vpos-auth-left-content {
    position: relative;
    overflow: hidden;
}

body.vpos-auth-page .vpos-auth-left-content::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px);
    background-size: 28px 28px;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0.18));
}

body.vpos-auth-page .vpos-auth-brand,
body.vpos-auth-page .vpos-auth-left-copy {
    position: relative;
    z-index: 1;
}

body.vpos-auth-page .vpos-auth-brand-logo-wrap,
body.vpos-auth-page .vpos-auth-brand-fallback {
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.15);
}

body.vpos-auth-page .vpos-auth-left-copy h2 {
    max-width: 390px;
    font-size: 27px;
    letter-spacing: 0;
}

body.vpos-auth-page .vpos-auth-left-copy p {
    max-width: 390px;
    color: rgba(255, 255, 255, 0.8);
}

body.vpos-auth-page .vpos-auth-topbar {
    border-bottom-color: rgba(216, 225, 234, 0.9);
    background: rgba(255, 255, 255, 0.86);
    backdrop-filter: saturate(130%) blur(8px);
}

body.vpos-auth-page .vpos-auth-register-btn.btn,
body.vpos-auth-page .vpos-auth-link {
    white-space: nowrap;
}

body.vpos-auth-page .vpos-auth-content {
    align-items: center;
}

body.vpos-auth-page .right-col-content,
body.vpos-auth-page .right-col-content-register {
    min-width: 0;
}

body.vpos-auth-page .vpos-login-panel {
    width: 100%;
}

body.vpos-auth-page .vpos-login-card,
body.vpos-auth-page .vpos-auth-card {
    border-color: rgba(216, 225, 234, 0.96);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 18px 38px rgba(15, 23, 42, 0.12);
}

body.vpos-auth-page .vpos-login-title,
body.vpos-auth-page .vpos-register-title {
    letter-spacing: 0;
}

body.vpos-auth-page .vpos-login-subtitle,
body.vpos-auth-page .vpos-register-subtitle {
    color: var(--vpos-text-muted);
    line-height: 1.45;
}

body.vpos-auth-page .vpos-login-control.form-control,
body.vpos-auth-page .vpos-register-card .form-control,
body.vpos-auth-page .vpos-register-card .select2-container--default .select2-selection--single {
    height: 32px;
    border-color: var(--vpos-border-strong);
    border-radius: var(--vpos-radius-sm);
    box-shadow: none;
    font-size: 12px;
}

body.vpos-auth-page .vpos-login-control.form-control:focus,
body.vpos-auth-page .vpos-register-card .form-control:focus {
    border-color: var(--vpos-primary);
    box-shadow: 0 0 0 2px var(--vpos-primary-ring);
}

body.vpos-auth-page .vpos-auth-alert {
    margin-bottom: 12px;
    padding: 8px 10px;
    border-radius: var(--vpos-radius);
    font-size: 12px;
}

body.vpos-auth-page .vpos-register-panel {
    width: 100%;
    max-width: 1020px;
    padding: 0;
}

body.vpos-auth-page .vpos-register-panel .vpos-register-card,
body.vpos-auth-page .vpos-legacy-register-card {
    width: 100%;
    max-width: none;
    padding: 0;
    overflow: hidden;
}

body.vpos-auth-page .vpos-register-header {
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid var(--vpos-border);
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

body.vpos-auth-page .vpos-register-header .vpos-register-title {
    margin: 0 0 3px;
    font-size: 18px;
}

body.vpos-auth-page .vpos-register-body {
    padding: 14px;
}

body.vpos-auth-page #business_register_form {
    margin: 0;
}

body.vpos-auth-page #business_register_form h3,
body.vpos-auth-page .vpos-legacy-register-card h3:not(.box-title) {
    margin: 6px 0 9px;
    color: var(--vpos-text-strong);
    font-size: 14px;
    font-weight: 780;
}

body.vpos-auth-page #business_register_form fieldset,
body.vpos-auth-page .vpos-legacy-register-card fieldset {
    margin: 0 0 12px;
    padding: 10px 8px 2px;
    border: 1px solid var(--vpos-border);
    border-radius: var(--vpos-radius);
    background: var(--vpos-surface);
}

body.vpos-auth-page #business_register_form legend,
body.vpos-auth-page .vpos-legacy-register-card legend {
    width: auto;
    margin: 0 0 6px;
    padding: 0 6px;
    border-bottom: 0;
    color: var(--vpos-primary);
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

body.vpos-auth-page .vpos-register-card label,
body.vpos-auth-page .vpos-legacy-register-card label {
    margin-bottom: 4px;
    color: var(--vpos-text);
    font-size: 11.5px;
    font-weight: 700;
}

body.vpos-auth-page .vpos-register-card .form-group,
body.vpos-auth-page .vpos-legacy-register-card .form-group {
    margin-bottom: 9px;
}

body.vpos-auth-page .vpos-register-card .input-group-addon,
body.vpos-auth-page .vpos-legacy-register-card .input-group-addon {
    min-width: 33px;
    padding: 5px 8px;
    border-color: var(--vpos-border-strong);
    border-radius: var(--vpos-radius-sm);
    background: var(--vpos-surface-muted);
    color: var(--vpos-text-muted);
}

body.vpos-auth-page .vpos-register-card .select2-container,
body.vpos-auth-page .vpos-legacy-register-card .select2-container {
    width: 100% !important;
}

body.vpos-auth-page .vpos-register-card input[type="file"] {
    display: block;
    width: 100%;
    min-height: 32px;
    padding: 5px 7px;
    border: 1px solid var(--vpos-border-strong);
    border-radius: var(--vpos-radius-sm);
    background: var(--vpos-surface);
    color: var(--vpos-text-muted);
    font-size: 11.5px;
}

body.vpos-auth-page .vpos-register-card .btn,
body.vpos-auth-page .vpos-legacy-register-card .btn {
    border-radius: var(--vpos-radius-sm) !important;
    font-weight: 750;
}

body.vpos-auth-page .vpos-legacy-register-wrap {
    width: 100%;
    margin-right: 0;
    margin-left: 0;
}

body.vpos-auth-page .vpos-legacy-register-card .box-header,
body.vpos-auth-page .vpos-legacy-register-card .box-footer {
    padding: 12px 14px;
}

body.vpos-auth-page .vpos-legacy-register-card .box-body {
    padding: 14px;
}

@media (min-width: 992px) {
    body.vpos-auth-page .right-col-content-register {
        max-height: calc(100vh - var(--vpos-header-height) - 42px);
        overflow-y: auto;
        padding-right: 4px;
        scrollbar-width: thin;
    }
}

@media (max-width: 991px) {
    body.vpos-auth-page .vpos-auth-content {
        align-items: flex-start;
    }

    body.vpos-auth-page .vpos-register-panel {
        max-width: 100%;
    }
}

@media (max-width: 767px) {
    body.vpos-auth-page .vpos-auth-topbar {
        background: #ffffff;
    }

    body.vpos-auth-page .vpos-auth-register-btn.btn,
    body.vpos-auth-page .vpos-auth-link,
    body.vpos-auth-page .vpos-auth-muted {
        white-space: normal;
    }

    body.vpos-auth-page .vpos-register-header,
    body.vpos-auth-page .vpos-register-body,
    body.vpos-auth-page .vpos-legacy-register-card .box-body {
        padding: 12px;
    }

    body.vpos-auth-page #business_register_form fieldset,
    body.vpos-auth-page .vpos-legacy-register-card fieldset {
        padding-right: 6px;
        padding-left: 6px;
    }
}

/* ============================================================
   VPOS Phase 3 Dashboard
   Modern enterprise dashboard polish. UI-only: preserves KPI classes,
   chart containers, DataTable IDs, filters, AJAX endpoints, and widgets.
   ============================================================ */

body.vpos-app .vpos-dashboard-header {
    padding: 10px 10px 4px;
}

body.vpos-app .vpos-dashboard-heading {
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

body.vpos-app .vpos-dashboard-title {
    min-width: 0;
}

body.vpos-app .vpos-dashboard-title .vpos-page-kicker {
    margin-bottom: 4px;
    color: var(--vpos-primary);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

body.vpos-app .vpos-dashboard-title h1 {
    margin: 0;
    color: var(--vpos-text-strong);
    font-size: 20px;
    line-height: 1.2;
    font-weight: 780;
    letter-spacing: 0;
}

body.vpos-app .vpos-dashboard {
    padding-top: 8px;
}

body.vpos-app .vpos-dashboard-commandbar {
    position: sticky;
    top: var(--vpos-header-height);
    z-index: 20;
    min-height: 40px;
    margin-bottom: 10px;
    border-color: rgba(216, 225, 234, 0.92);
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: saturate(130%) blur(7px);
}

body.vpos-app .vpos-dashboard-commandbar .vpos-commandbar-right {
    flex-wrap: nowrap;
}

body.vpos-app .vpos-dashboard-period-chip {
    height: 27px;
    padding: 0 8px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--vpos-border);
    border-radius: var(--vpos-radius-sm);
    background: var(--vpos-surface-muted);
    color: var(--vpos-text-muted);
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

body.vpos-app .vpos-dashboard-location {
    min-width: 230px;
}

body.vpos-app .vpos-dashboard-location .select2-container,
body.vpos-app .vpos-dashboard-location .form-control {
    width: 100% !important;
}

body.vpos-app .vpos-dashboard-date .vpos-toolbar-btn {
    height: 29px;
    min-width: 166px;
    justify-content: space-between;
    border-color: var(--vpos-primary) !important;
    background: var(--vpos-primary) !important;
    color: #ffffff !important;
}

body.vpos-app .vpos-dashboard-date .vpos-toolbar-btn:hover,
body.vpos-app .vpos-dashboard-date .vpos-toolbar-btn:focus {
    border-color: var(--vpos-primary-hover) !important;
    background: var(--vpos-primary-hover) !important;
}

body.vpos-app .vpos-dashboard-kpi-grid {
    display: flex;
    flex-wrap: wrap;
}

body.vpos-app .vpos-dashboard-kpi-grid > [class*="col-"] {
    float: none;
    display: flex;
}

body.vpos-app .vpos-kpi-card.info-box {
    width: 100%;
    min-height: 64px;
    border: 1px solid rgba(216, 225, 234, 0.96);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.98) 100%);
    transition: border-color 0.14s ease, box-shadow 0.14s ease, transform 0.14s ease;
}

body.vpos-app .vpos-kpi-card.info-box:hover {
    border-color: color-mix(in srgb, var(--vpos-primary) 32%, var(--vpos-border));
    box-shadow: 0 7px 18px rgba(15, 23, 42, 0.09);
    transform: translateY(-1px);
}

body.vpos-app .vpos-kpi-card.info-box::before {
    width: 3px;
    background: var(--vpos-primary);
}

body.vpos-app .vpos-kpi-card-sales.info-box::before,
body.vpos-app .vpos-kpi-card-net.info-box::before {
    background: var(--vpos-success);
}

body.vpos-app .vpos-kpi-card-due.info-box::before,
body.vpos-app .vpos-kpi-card-purchase-due.info-box::before {
    background: var(--vpos-warning);
}

body.vpos-app .vpos-kpi-card-return.info-box::before,
body.vpos-app .vpos-kpi-card-purchase-return.info-box::before {
    background: var(--vpos-info);
}

body.vpos-app .vpos-kpi-card-expense.info-box::before {
    background: var(--vpos-danger);
}

body.vpos-app .vpos-kpi-card .vpos-kpi-card-icon {
    width: 44px;
    min-width: 44px;
    height: auto;
    color: var(--vpos-text-muted) !important;
}

body.vpos-app .vpos-kpi-card .vpos-kpi-card-icon i {
    color: currentColor !important;
}

body.vpos-app .vpos-kpi-card .info-box-content {
    padding: 8px 10px 8px 0;
}

body.vpos-app .vpos-kpi-card .info-box-text {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.vpos-app .vpos-kpi-card .info-box-number {
    font-size: 15.5px;
    font-variant-numeric: tabular-nums;
}

body.vpos-app .vpos-kpi-note {
    max-width: 100%;
}

body.vpos-app .vpos-dashboard-panel.vpos-widget {
    overflow: hidden;
    border: 1px solid rgba(216, 225, 234, 0.96);
    border-radius: 9px;
    background: var(--vpos-surface);
    box-shadow: 0 5px 16px rgba(15, 23, 42, 0.065);
}

body.vpos-app .vpos-dashboard-panel .vpos-widget-header {
    min-height: 36px;
    padding: 8px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border-bottom: 1px solid var(--vpos-border);
    background:
        linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

body.vpos-app .vpos-dashboard-panel .vpos-widget-title-wrap {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

body.vpos-app .vpos-dashboard-panel .vpos-widget-icon {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--vpos-radius-sm);
    background: var(--vpos-primary-soft);
    color: var(--vpos-primary);
}

body.vpos-app .vpos-dashboard-panel .vpos-widget-title {
    min-width: 0;
    overflow: hidden;
    color: var(--vpos-text-strong);
    font-size: 12.5px;
    font-weight: 820;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.vpos-app .vpos-dashboard-panel .vpos-widget-body {
    padding: 9px;
}

body.vpos-app .vpos-dashboard-chart-panel .vpos-widget-body {
    min-height: 280px;
}

body.vpos-app .vpos-dashboard-chart-panel .vpos-widget-body > div {
    max-width: 100%;
}

body.vpos-app .vpos-dashboard-table-panel .vpos-widget-body {
    padding: 8px;
}

body.vpos-app .vpos-dashboard-table-panel .vpos-dashboard-widget-row {
    margin-right: -4px;
    margin-left: -4px;
}

body.vpos-app .vpos-dashboard-table-panel .vpos-dashboard-widget-row > [class*="col-"] {
    padding-right: 4px;
    padding-left: 4px;
}

body.vpos-app .vpos-dashboard-table-panel .select2-container,
body.vpos-app .vpos-dashboard-table-panel .form-control {
    width: 100% !important;
}

body.vpos-app .vpos-dashboard-table-panel .table-responsive {
    margin-bottom: 0;
    border: 1px solid var(--vpos-border);
    border-radius: var(--vpos-radius);
    background: var(--vpos-surface);
}

body.vpos-app .vpos-dashboard-table {
    min-width: 100%;
    margin-bottom: 0 !important;
}

body.vpos-app .vpos-dashboard-table > thead > tr > th {
    border-bottom: 1px solid var(--vpos-border-strong) !important;
    background: var(--vpos-surface-muted);
    color: var(--vpos-text);
    font-size: 10.7px;
    font-weight: 820;
    letter-spacing: 0.025em;
    text-transform: uppercase;
}

body.vpos-app .vpos-dashboard-table > tbody > tr > td {
    color: var(--vpos-text);
    font-size: 11.3px;
}

body.vpos-app .vpos-dashboard-table > tbody > tr > td:last-child,
body.vpos-app .vpos-dashboard-table > thead > tr > th:last-child {
    text-align: center;
    white-space: nowrap;
}

body.vpos-app #sales_payment_dues_table th:nth-child(3),
body.vpos-app #sales_payment_dues_table td:nth-child(3),
body.vpos-app #purchase_payment_dues_table th:nth-child(3),
body.vpos-app #purchase_payment_dues_table td:nth-child(3),
body.vpos-app #stock_alert_table th:nth-child(3),
body.vpos-app #stock_alert_table td:nth-child(3),
body.vpos-app #stock_expiry_alert_table th:nth-child(3),
body.vpos-app #stock_expiry_alert_table td:nth-child(3),
body.vpos-app #cash_flow_table th:nth-child(6),
body.vpos-app #cash_flow_table td:nth-child(6),
body.vpos-app #cash_flow_table th:nth-child(7),
body.vpos-app #cash_flow_table td:nth-child(7),
body.vpos-app #cash_flow_table th:nth-child(8),
body.vpos-app #cash_flow_table td:nth-child(8) {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

body.vpos-app .vpos-dashboard .dataTables_wrapper .dataTables_info,
body.vpos-app .vpos-dashboard .dataTables_wrapper .dataTables_paginate {
    padding-top: 6px;
}

body.vpos-app .vpos-dashboard-offset-row {
    margin-top: 8px;
}

@media (max-width: 991px) {
    body.vpos-app .vpos-dashboard-commandbar {
        position: static;
    }

    body.vpos-app .vpos-dashboard-commandbar .vpos-commandbar-right {
        width: 100%;
        flex-wrap: wrap;
    }
}

@media (max-width: 767px) {
    body.vpos-app .vpos-dashboard-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    body.vpos-app .vpos-dashboard-title h1 {
        font-size: 18px;
    }

    body.vpos-app .vpos-dashboard-commandbar .vpos-commandbar-left,
    body.vpos-app .vpos-dashboard-commandbar .vpos-commandbar-right,
    body.vpos-app .vpos-dashboard-location,
    body.vpos-app .vpos-dashboard-date,
    body.vpos-app .vpos-dashboard-date .vpos-toolbar-btn {
        width: 100%;
    }

    body.vpos-app .vpos-dashboard-period-chip {
        justify-content: center;
        width: 100%;
    }

    body.vpos-app .vpos-kpi-card.info-box {
        min-height: 62px;
    }

    body.vpos-app .vpos-dashboard-chart-panel .vpos-widget-body {
        min-height: 230px;
    }
}

/* ============================================================
   VPOS Theme System Final Tokens
   Central theme layer: green default, richer enterprise palettes, and
   theme-aware component colors. Keep this block near the end so it wins
   over earlier AdminLTE/VPOS compatibility rules.
   ============================================================ */

:root {
    --vpos-font-family: "Aptos", "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;

    --vpos-bg: #f3f8f6;
    --vpos-bg-subtle: #f8fbfa;
    --vpos-surface: #ffffff;
    --vpos-surface-raised: #ffffff;
    --vpos-surface-muted: #edf6f2;
    --vpos-surface-tint: #f4faf7;
    --vpos-border: #d6e4de;
    --vpos-border-strong: #b9ccc4;

    --vpos-text: #18312a;
    --vpos-text-strong: #0b1f1a;
    --vpos-text-muted: #5f756e;
    --vpos-text-soft: #8ba19a;

    --vpos-primary: #12845f;
    --vpos-primary-hover: #0d6f50;
    --vpos-primary-active: #075b42;
    --vpos-primary-soft: #e5f7ef;
    --vpos-primary-ring: rgba(18, 132, 95, 0.2);

    --vpos-accent: #2563eb;
    --vpos-accent-soft: #e8f0ff;
    --vpos-accent-2: #7c3aed;
    --vpos-accent-2-soft: #f1ebff;
    --vpos-accent-3: #0e7490;
    --vpos-accent-3-soft: #e7f8fb;

    --vpos-success: #14805a;
    --vpos-success-soft: #e4f8ee;
    --vpos-warning: #bd7a08;
    --vpos-warning-soft: #fff6db;
    --vpos-danger: #c9344a;
    --vpos-danger-soft: #fff0f3;
    --vpos-info: #1769aa;
    --vpos-info-soft: #eaf3ff;

    --vpos-shell-bg: #edf6f2;
    --vpos-shell-surface: #ffffff;
    --vpos-shell-surface-subtle: #f6faf8;
    --vpos-shell-border: #d4e2dc;
    --vpos-shell-divider: rgba(134, 160, 150, 0.28);
    --vpos-shell-topbar-start: #0e7a58;
    --vpos-shell-topbar-mid: #12845f;
    --vpos-shell-topbar-end: #0b3f34;
    --vpos-shell-sidebar: #0d201b;
    --vpos-shell-sidebar-2: #12352c;
    --vpos-shell-sidebar-text: #dff8ef;
    --vpos-shell-sidebar-muted: #91b8aa;
    --vpos-shell-sidebar-hover: rgba(20, 128, 90, 0.18);
    --vpos-shell-sidebar-active: rgba(18, 132, 95, 0.36);
    --vpos-shell-accent: #5eead4;
    --vpos-shell-focus: rgba(94, 234, 212, 0.28);
}

body.skin-green,
body.skin-green-light,
body.vpos-theme-green {
    --vpos-bg: #f3f8f6;
    --vpos-bg-subtle: #f8fbfa;
    --vpos-surface-muted: #edf6f2;
    --vpos-surface-tint: #f4faf7;
    --vpos-border: #d6e4de;
    --vpos-border-strong: #b9ccc4;
    --vpos-text: #18312a;
    --vpos-text-strong: #0b1f1a;
    --vpos-text-muted: #5f756e;
    --vpos-primary: #12845f;
    --vpos-primary-hover: #0d6f50;
    --vpos-primary-active: #075b42;
    --vpos-primary-soft: #e5f7ef;
    --vpos-primary-ring: rgba(18, 132, 95, 0.2);
    --vpos-shell-bg: #edf6f2;
    --vpos-shell-topbar-start: #0e7a58;
    --vpos-shell-topbar-mid: #12845f;
    --vpos-shell-topbar-end: #0b3f34;
    --vpos-shell-sidebar: #0d201b;
    --vpos-shell-sidebar-2: #12352c;
    --vpos-shell-sidebar-text: #dff8ef;
    --vpos-shell-sidebar-muted: #91b8aa;
    --vpos-shell-sidebar-hover: rgba(20, 128, 90, 0.18);
    --vpos-shell-sidebar-active: rgba(18, 132, 95, 0.36);
    --vpos-shell-accent: #5eead4;
    --vpos-shell-focus: rgba(94, 234, 212, 0.28);
}

body.skin-blue,
body.skin-blue-light,
body.vpos-theme-blue {
    --vpos-bg: #f4f7fd;
    --vpos-bg-subtle: #f8fbff;
    --vpos-surface-muted: #edf4ff;
    --vpos-surface-tint: #f5f9ff;
    --vpos-border: #d7e2f3;
    --vpos-border-strong: #b9c9e4;
    --vpos-text: #17233c;
    --vpos-text-strong: #0b1630;
    --vpos-text-muted: #5b6b86;
    --vpos-primary: #2563eb;
    --vpos-primary-hover: #1d4ed8;
    --vpos-primary-active: #1e3a8a;
    --vpos-primary-soft: #e8f0ff;
    --vpos-primary-ring: rgba(37, 99, 235, 0.2);
    --vpos-shell-bg: #eef4ff;
    --vpos-shell-topbar-start: #1d4ed8;
    --vpos-shell-topbar-mid: #2563eb;
    --vpos-shell-topbar-end: #162f68;
    --vpos-shell-sidebar: #101a2d;
    --vpos-shell-sidebar-2: #17264a;
    --vpos-shell-sidebar-text: #dbeafe;
    --vpos-shell-sidebar-muted: #91a8d4;
    --vpos-shell-sidebar-hover: rgba(37, 99, 235, 0.17);
    --vpos-shell-sidebar-active: rgba(37, 99, 235, 0.36);
    --vpos-shell-accent: #38bdf8;
    --vpos-shell-focus: rgba(56, 189, 248, 0.28);
}

body.skin-purple,
body.skin-purple-light,
body.vpos-theme-purple {
    --vpos-bg: #f7f4fb;
    --vpos-bg-subtle: #fbf9ff;
    --vpos-surface-muted: #f1ebff;
    --vpos-surface-tint: #faf7ff;
    --vpos-border: #ded4ee;
    --vpos-border-strong: #c5b4dd;
    --vpos-text: #2f2544;
    --vpos-text-strong: #1d1432;
    --vpos-text-muted: #716487;
    --vpos-primary: #7457d6;
    --vpos-primary-hover: #5f42c4;
    --vpos-primary-active: #49319b;
    --vpos-primary-soft: #f1ebff;
    --vpos-primary-ring: rgba(116, 87, 214, 0.22);
    --vpos-shell-bg: #f2ecfb;
    --vpos-shell-topbar-start: #674cc7;
    --vpos-shell-topbar-mid: #7457d6;
    --vpos-shell-topbar-end: #2f245f;
    --vpos-shell-sidebar: #1d1830;
    --vpos-shell-sidebar-2: #2b2452;
    --vpos-shell-sidebar-text: #ece6ff;
    --vpos-shell-sidebar-muted: #b2a5d7;
    --vpos-shell-sidebar-hover: rgba(116, 87, 214, 0.18);
    --vpos-shell-sidebar-active: rgba(116, 87, 214, 0.38);
    --vpos-shell-accent: #c4b5fd;
    --vpos-shell-focus: rgba(196, 181, 253, 0.32);
}

body.skin-black,
body.skin-black-light,
body.vpos-theme-slate {
    --vpos-bg: #f4f6f8;
    --vpos-bg-subtle: #f8fafc;
    --vpos-surface-muted: #eef2f6;
    --vpos-surface-tint: #f8fafc;
    --vpos-border: #d8e0e8;
    --vpos-border-strong: #c2ccd6;
    --vpos-text: #1f2937;
    --vpos-text-strong: #111827;
    --vpos-text-muted: #64748b;
    --vpos-primary: #475569;
    --vpos-primary-hover: #334155;
    --vpos-primary-active: #1f2937;
    --vpos-primary-soft: #f1f5f9;
    --vpos-primary-ring: rgba(71, 85, 105, 0.2);
    --vpos-shell-bg: #eef2f6;
    --vpos-shell-topbar-start: #475569;
    --vpos-shell-topbar-mid: #334155;
    --vpos-shell-topbar-end: #111827;
    --vpos-shell-sidebar: #111827;
    --vpos-shell-sidebar-2: #1f2937;
    --vpos-shell-sidebar-text: #e5e7eb;
    --vpos-shell-sidebar-muted: #9ca3af;
    --vpos-shell-sidebar-hover: rgba(148, 163, 184, 0.16);
    --vpos-shell-sidebar-active: rgba(148, 163, 184, 0.26);
    --vpos-shell-accent: #cbd5e1;
    --vpos-shell-focus: rgba(203, 213, 225, 0.3);
}

body.skin-red,
body.skin-red-light,
body.vpos-theme-red {
    --vpos-bg: #fbf5f4;
    --vpos-bg-subtle: #fffafa;
    --vpos-surface-muted: #fff0f3;
    --vpos-surface-tint: #fff7f8;
    --vpos-border: #ead1d6;
    --vpos-border-strong: #d8adb8;
    --vpos-text: #3b2227;
    --vpos-text-strong: #2c1218;
    --vpos-text-muted: #815f66;
    --vpos-primary: #c9344a;
    --vpos-primary-hover: #ad2438;
    --vpos-primary-active: #8f1d2f;
    --vpos-primary-soft: #fff0f3;
    --vpos-primary-ring: rgba(201, 52, 74, 0.2);
    --vpos-shell-bg: #faedf0;
    --vpos-shell-topbar-start: #b42339;
    --vpos-shell-topbar-mid: #c9344a;
    --vpos-shell-topbar-end: #5f1624;
    --vpos-shell-sidebar: #261419;
    --vpos-shell-sidebar-2: #3c1c25;
    --vpos-shell-sidebar-text: #ffe4e8;
    --vpos-shell-sidebar-muted: #d7a1ab;
    --vpos-shell-sidebar-hover: rgba(201, 52, 74, 0.16);
    --vpos-shell-sidebar-active: rgba(201, 52, 74, 0.34);
    --vpos-shell-accent: #fda4af;
    --vpos-shell-focus: rgba(253, 164, 175, 0.34);
}

body.skin-yellow,
body.skin-yellow-light,
body.vpos-theme-amber {
    --vpos-bg: #faf7ee;
    --vpos-bg-subtle: #fffdf7;
    --vpos-surface-muted: #fff6db;
    --vpos-surface-tint: #fffaf0;
    --vpos-border: #eadbb7;
    --vpos-border-strong: #d7bd7f;
    --vpos-text: #352814;
    --vpos-text-strong: #241a0b;
    --vpos-text-muted: #77643d;
    --vpos-primary: #bd7a08;
    --vpos-primary-hover: #9f6506;
    --vpos-primary-active: #7f4f05;
    --vpos-primary-soft: #fff6db;
    --vpos-primary-ring: rgba(189, 122, 8, 0.22);
    --vpos-shell-bg: #f8f0da;
    --vpos-shell-topbar-start: #a96306;
    --vpos-shell-topbar-mid: #bd7a08;
    --vpos-shell-topbar-end: #4b3411;
    --vpos-shell-sidebar: #241a0b;
    --vpos-shell-sidebar-2: #3b2a12;
    --vpos-shell-sidebar-text: #fff4d6;
    --vpos-shell-sidebar-muted: #d4b56d;
    --vpos-shell-sidebar-hover: rgba(189, 122, 8, 0.18);
    --vpos-shell-sidebar-active: rgba(189, 122, 8, 0.34);
    --vpos-shell-accent: #facc15;
    --vpos-shell-focus: rgba(250, 204, 21, 0.3);
}

body.vpos-app,
body.vpos-auth-page {
    color: var(--vpos-text);
    font-family: var(--vpos-font-family);
}

body.vpos-admin-layout .wrapper,
body.vpos-admin-layout .content-wrapper,
body.vpos-admin-layout .right-side {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 210px),
        radial-gradient(circle at 15% 0%, rgba(18, 132, 95, 0.08), rgba(18, 132, 95, 0) 280px),
        var(--vpos-shell-bg, var(--vpos-bg));
}

body.vpos-admin-layout .main-header.vpos-header,
body.vpos-auth-page .vpos-auth-left {
    background: linear-gradient(
        120deg,
        var(--vpos-shell-topbar-start) 0%,
        var(--vpos-shell-topbar-mid) 48%,
        var(--vpos-shell-topbar-end) 100%
    );
}

body.vpos-admin-layout .main-sidebar.vpos-sidebar {
    background:
        linear-gradient(180deg, var(--vpos-shell-sidebar-2) 0%, var(--vpos-shell-sidebar) 240px),
        var(--vpos-shell-sidebar) !important;
}

body.vpos-app .vpos-card,
body.vpos-app .vpos-panel,
body.vpos-app .vpos-filter-panel,
body.vpos-app .box,
body.vpos-app .nav-tabs-custom,
body.vpos-app .modal-content,
body.vpos-auth-page .vpos-login-card,
body.vpos-auth-page .vpos-auth-card {
    border-color: var(--vpos-border);
    background: var(--vpos-surface);
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.07);
}

body.vpos-app .box-header,
body.vpos-app .vpos-card-header,
body.vpos-app .vpos-panel-header,
body.vpos-app .vpos-widget-header,
body.vpos-auth-page .vpos-register-header {
    border-bottom-color: var(--vpos-border);
    background: linear-gradient(180deg, var(--vpos-surface) 0%, var(--vpos-surface-tint, var(--vpos-bg-subtle)) 100%);
}

body.vpos-app .btn-primary,
body.vpos-app .btn.bg-blue,
body.vpos-app .bg-blue.btn,
body.vpos-auth-page .btn-primary {
    border-color: var(--vpos-primary) !important;
    background-color: var(--vpos-primary) !important;
    color: #ffffff !important;
}

body.vpos-app .btn-primary:hover,
body.vpos-app .btn-primary:focus,
body.vpos-auth-page .btn-primary:hover,
body.vpos-auth-page .btn-primary:focus {
    border-color: var(--vpos-primary-hover) !important;
    background-color: var(--vpos-primary-hover) !important;
}

body.vpos-app .form-control:focus,
body.vpos-auth-page .form-control:focus,
body.vpos-app .select2-container--default.select2-container--focus .select2-selection--single,
body.vpos-app .select2-container--default.select2-container--focus .select2-selection--multiple,
body.vpos-auth-page .select2-container--default.select2-container--focus .select2-selection--single,
body.vpos-auth-page .select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: var(--vpos-primary) !important;
    box-shadow: 0 0 0 2px var(--vpos-primary-ring) !important;
}

body.vpos-app .label-success,
body.vpos-app .badge.bg-green,
body.vpos-app .text-bg-success {
    background-color: var(--vpos-success) !important;
}

body.vpos-app .label-warning,
body.vpos-app .badge.bg-yellow,
body.vpos-app .text-bg-warning {
    background-color: var(--vpos-warning) !important;
}

body.vpos-app .label-danger,
body.vpos-app .badge.bg-red,
body.vpos-app .text-bg-danger {
    background-color: var(--vpos-danger) !important;
}

body.vpos-app .label-info,
body.vpos-app .badge.bg-aqua,
body.vpos-app .text-bg-info {
    background-color: var(--vpos-info) !important;
}

body.vpos-app .vpos-bulk-btn.btn {
    border-color: var(--vpos-border-strong);
    background: var(--vpos-surface) !important;
    color: var(--vpos-text) !important;
}

body.vpos-app .vpos-bulk-btn.btn i {
    color: var(--vpos-text-muted) !important;
}

body.vpos-app .vpos-bulk-btn.btn:hover,
body.vpos-app .vpos-bulk-btn.btn:focus {
    border-color: var(--vpos-primary);
    background: var(--vpos-primary-soft) !important;
    color: var(--vpos-primary-active) !important;
}

body.vpos-app .vpos-bulk-btn-primary.btn:hover,
body.vpos-app .vpos-bulk-btn-primary.btn:focus {
    border-color: var(--vpos-primary);
    background: var(--vpos-primary-soft) !important;
    color: var(--vpos-primary-active) !important;
}

body.vpos-app .vpos-bulk-btn-success.btn:hover,
body.vpos-app .vpos-bulk-btn-success.btn:focus {
    border-color: var(--vpos-success);
    background: var(--vpos-success-soft) !important;
    color: var(--vpos-success) !important;
}

body.vpos-app .vpos-bulk-btn-warning.btn:hover,
body.vpos-app .vpos-bulk-btn-warning.btn:focus {
    border-color: var(--vpos-warning);
    background: var(--vpos-warning-soft) !important;
    color: var(--vpos-warning) !important;
}

body.vpos-app .vpos-bulk-btn-danger.btn:hover,
body.vpos-app .vpos-bulk-btn-danger.btn:focus {
    border-color: var(--vpos-danger);
    background: var(--vpos-danger-soft) !important;
    color: var(--vpos-danger) !important;
}

body.vpos-app .vpos-product-table-card {
    border: 1px solid var(--vpos-border);
    border-radius: var(--vpos-radius);
    background: var(--vpos-surface);
}

body.vpos-app table#product_table thead > tr > th {
    border-bottom-color: var(--vpos-border-strong) !important;
    background: var(--vpos-surface-muted);
    color: var(--vpos-text);
}

body.vpos-app table#product_table tbody > tr:hover > td {
    background: var(--vpos-primary-soft);
}

/* ============================================================
   VPOS Shell Blend Polish
   Header, sidebar, and footer should read as one theme-aware shell.
   Sidebar brand/user duplication is removed in Blade; these rules keep
   old markup hidden if cached/overridden views ever render it.
   ============================================================ */

body.vpos-admin-layout .main-header.vpos-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0) 34%),
        linear-gradient(120deg, var(--vpos-shell-topbar-start) 0%, var(--vpos-shell-topbar-mid) 48%, var(--vpos-shell-topbar-end) 100%) !important;
    box-shadow: 0 2px 14px rgba(15, 23, 42, 0.18);
}

body.vpos-admin-layout .main-header .logo {
    border-right: 1px solid rgba(255, 255, 255, 0.13);
    background: rgba(255, 255, 255, 0.03) !important;
}

body.vpos-admin-layout .main-header .logo:hover,
body.vpos-admin-layout .main-header .logo:focus {
    background: rgba(255, 255, 255, 0.09) !important;
}

body.vpos-admin-layout .vpos-brand-name {
    color: #ffffff;
    font-weight: 820;
    letter-spacing: 0;
    text-transform: none;
}

body.vpos-admin-layout .vpos-online-indicator {
    color: var(--vpos-shell-accent) !important;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
}

body.vpos-admin-layout .vpos-header-btn,
body.vpos-admin-layout .vpos-header-date,
body.vpos-admin-layout .vpos-user-toggle {
    border-color: rgba(255, 255, 255, 0.18) !important;
    background: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.11);
}

body.vpos-admin-layout .vpos-header-btn:hover,
body.vpos-admin-layout .vpos-header-btn:focus,
body.vpos-admin-layout .vpos-user-toggle:hover,
body.vpos-admin-layout .vpos-user-toggle:focus,
body.vpos-admin-layout .vpos-user-menu.open .vpos-user-toggle {
    border-color: rgba(255, 255, 255, 0.3) !important;
    background: rgba(255, 255, 255, 0.18) !important;
}

body.vpos-admin-layout .main-sidebar.vpos-sidebar {
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--vpos-shell-topbar-mid) 24%, var(--vpos-shell-sidebar-2)) 0%, var(--vpos-shell-sidebar-2) 120px, var(--vpos-shell-sidebar) 100%),
        var(--vpos-shell-sidebar) !important;
    box-shadow: 2px 0 18px rgba(15, 23, 42, 0.2);
}

body.vpos-admin-layout .vpos-sidebar-inner {
    padding: 8px 8px 12px;
    background: transparent !important;
}

body.vpos-admin-layout .vpos-sidebar-brand,
body.vpos-admin-layout .vpos-sidebar-user {
    display: none !important;
}

body.vpos-admin-layout .vpos-sidebar-menu-wrap {
    min-height: 100%;
}

body.vpos-admin-layout .vpos-sidebar .sidebar-menu {
    padding: 0;
}

body.vpos-admin-layout .vpos-sidebar .sidebar-menu > li {
    margin: 1px 0;
}

body.vpos-admin-layout .vpos-sidebar .sidebar-menu > li > a {
    min-height: 32px;
    padding: 8px 9px 8px 10px;
    display: flex;
    align-items: center;
    gap: 9px;
    border-left: 3px solid transparent;
    border-radius: 7px;
    color: var(--vpos-shell-sidebar-text) !important;
    font-size: 12px;
    font-weight: 720;
    opacity: 0.9;
}

body.vpos-admin-layout .vpos-sidebar .sidebar-menu > li > a > i:first-child {
    width: 17px;
    margin-right: 0;
    color: color-mix(in srgb, var(--vpos-shell-sidebar-text) 72%, transparent) !important;
    text-align: center;
}

body.vpos-admin-layout .vpos-sidebar .sidebar-menu > li:hover > a,
body.vpos-admin-layout .vpos-sidebar .sidebar-menu > li.active > a,
body.vpos-admin-layout .vpos-sidebar .sidebar-menu > li.menu-open > a {
    border-left-color: var(--vpos-shell-accent);
    background: var(--vpos-shell-sidebar-active) !important;
    color: #ffffff !important;
    opacity: 1;
}

body.vpos-admin-layout .vpos-sidebar .treeview-menu {
    margin: 3px 0 5px 14px;
    padding: 3px 0 3px 8px;
    border-left: 1px solid rgba(255, 255, 255, 0.11);
    background: transparent !important;
}

body.vpos-admin-layout .vpos-sidebar .treeview-menu > li > a {
    min-height: 28px;
    padding: 6px 8px;
    border-radius: 6px;
    color: color-mix(in srgb, var(--vpos-shell-sidebar-text) 76%, transparent) !important;
    font-size: 11.5px;
    font-weight: 680;
}

body.vpos-admin-layout .vpos-sidebar .treeview-menu > li:hover > a,
body.vpos-admin-layout .vpos-sidebar .treeview-menu > li.active > a {
    background: var(--vpos-shell-sidebar-hover) !important;
    color: #ffffff !important;
}

body.vpos-admin-layout .vpos-footer.main-footer {
    min-height: var(--vpos-footer-height);
    padding: 7px 11px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border-top: 1px solid var(--vpos-shell-border);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.82)),
        var(--vpos-shell-surface-subtle);
    color: var(--vpos-text-muted);
    backdrop-filter: saturate(140%) blur(8px);
}

body.vpos-admin-layout .vpos-footer-copy {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    color: var(--vpos-text-muted);
    font-size: 11.5px;
    line-height: 1.25;
}

body.vpos-admin-layout .vpos-footer-copy strong {
    color: var(--vpos-primary-active);
    font-weight: 850;
}

body.vpos-admin-layout .vpos-footer-separator {
    padding: 0;
    color: var(--vpos-text-soft);
}

body.vpos-admin-layout .vpos-font-tools .btn {
    border-color: var(--vpos-border-strong) !important;
    background: var(--vpos-surface) !important;
    color: var(--vpos-primary) !important;
}

body.vpos-admin-layout .vpos-font-tools .btn:hover,
body.vpos-admin-layout .vpos-font-tools .btn:focus {
    border-color: var(--vpos-primary) !important;
    background: var(--vpos-primary-soft) !important;
}

@media (max-width: 767px) {
    body.vpos-admin-layout .vpos-sidebar-inner {
        padding-top: 8px;
    }

    body.vpos-admin-layout .vpos-footer.main-footer {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* ============================================================
   VPOS Crest Enterprise Theme
   New default enterprise palette. Built as tokens so business theme
   changes keep flowing through shell, dashboards, modules, and POS.
   ============================================================ */

body.skin-enterprise,
body.skin-enterprise-light,
body.vpos-theme-enterprise,
body.vpos-auth-page {
    --vpos-bg: #eef6f4;
    --vpos-bg-subtle: #f7fbfa;
    --vpos-surface: #ffffff;
    --vpos-surface-raised: #ffffff;
    --vpos-surface-muted: #edf7f5;
    --vpos-surface-tint: #f3faf8;
    --vpos-border: #d4e5e1;
    --vpos-border-strong: #aac5bf;

    --vpos-text: #182c2a;
    --vpos-text-strong: #071f1d;
    --vpos-text-muted: #5b716d;
    --vpos-text-soft: #8aa09b;

    --vpos-primary: #0f7c6c;
    --vpos-primary-hover: #0b695c;
    --vpos-primary-active: #064f46;
    --vpos-primary-soft: #e3f6f1;
    --vpos-primary-ring: rgba(15, 124, 108, 0.22);

    --vpos-accent: #2563eb;
    --vpos-accent-soft: #e8f0ff;
    --vpos-accent-2: #7c3aed;
    --vpos-accent-2-soft: #f2ecff;
    --vpos-accent-3: #0891b2;
    --vpos-accent-3-soft: #e3f8fb;

    --vpos-success: #16845d;
    --vpos-success-soft: #e2f7ed;
    --vpos-warning: #b77906;
    --vpos-warning-soft: #fff4d5;
    --vpos-danger: #c7354a;
    --vpos-danger-soft: #fff0f3;
    --vpos-info: #1769aa;
    --vpos-info-soft: #e8f4ff;

    --vpos-shell-bg: #eaf5f2;
    --vpos-shell-surface: #ffffff;
    --vpos-shell-surface-subtle: #f6fbfa;
    --vpos-shell-border: #cde1dc;
    --vpos-shell-divider: rgba(132, 162, 155, 0.3);
    --vpos-shell-topbar-start: #0b675d;
    --vpos-shell-topbar-mid: #0f7c6c;
    --vpos-shell-topbar-end: #17335f;
    --vpos-shell-sidebar: #0b211f;
    --vpos-shell-sidebar-2: #103832;
    --vpos-shell-sidebar-text: #e1f8f3;
    --vpos-shell-sidebar-muted: #94bbb3;
    --vpos-shell-sidebar-hover: rgba(45, 212, 191, 0.12);
    --vpos-shell-sidebar-active: rgba(15, 124, 108, 0.42);
    --vpos-shell-accent: #5eead4;
    --vpos-shell-focus: rgba(94, 234, 212, 0.3);

    --vpos-chart-1: #0f7c6c;
    --vpos-chart-2: #2563eb;
    --vpos-chart-3: #7c3aed;
    --vpos-chart-4: #0891b2;
    --vpos-chart-5: #b77906;
    --vpos-chart-6: #c7354a;
}

/* ============================================================
   VPOS Enterprise Coverage Pass
   Broad UI polish for pages that still use AdminLTE boxes, filters,
   forms, DataTables, Select2, datepickers, and Bootstrap modals.
   ============================================================ */

body.vpos-app,
body.vpos-auth-page {
    background:
        radial-gradient(circle at 18% -10%, rgba(94, 234, 212, 0.14), transparent 28%),
        linear-gradient(180deg, var(--vpos-bg-subtle) 0%, var(--vpos-bg) 100%);
    color: var(--vpos-text);
    font-family: var(--vpos-font-family);
}

body.vpos-admin-layout .content-wrapper {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.48), rgba(255, 255, 255, 0) 160px),
        var(--vpos-shell-bg, var(--vpos-bg));
}

body.vpos-app .content,
body.vpos-app .content-custom {
    padding: 10px 12px 14px;
}

body.vpos-app .content-header,
body.vpos-app .content-header-custom {
    padding: 10px 12px 4px;
}

body.vpos-app .content-header > h1,
body.vpos-app .vpos-dashboard-title h1 {
    margin: 0;
    color: var(--vpos-text-strong);
    font-size: 18px;
    font-weight: 780;
    letter-spacing: 0;
}

body.vpos-app .box,
body.vpos-app .nav-tabs-custom,
body.vpos-app .vpos-card,
body.vpos-app .vpos-dashboard-panel {
    border: 1px solid var(--vpos-border);
    border-radius: var(--vpos-radius);
    background: var(--vpos-surface);
    box-shadow: var(--vpos-shadow-sm);
}

body.vpos-app .box {
    margin-bottom: 10px;
}

body.vpos-app .box.box-solid,
body.vpos-app .box.box-widget {
    border-top: 1px solid var(--vpos-border);
}

body.vpos-app .box-header,
body.vpos-app .nav-tabs-custom > .nav-tabs {
    min-height: 38px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--vpos-border);
    border-top-left-radius: var(--vpos-radius);
    border-top-right-radius: var(--vpos-radius);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.68)),
        var(--vpos-surface-muted);
}

body.vpos-app .box-header .box-title,
body.vpos-app .box-title,
body.vpos-app .vpos-panel-title {
    color: var(--vpos-text-strong);
    font-size: 13px;
    font-weight: 780;
}

body.vpos-app .box-body {
    padding: 10px;
}

body.vpos-app .box-footer {
    padding: 8px 10px;
    border-top: 1px solid var(--vpos-border);
    background: var(--vpos-surface-tint);
}

body.vpos-app .form-group {
    margin-bottom: 9px;
}

body.vpos-app label,
body.vpos-app .control-label {
    margin-bottom: 4px;
    color: var(--vpos-text-strong);
    font-size: 11.5px;
    font-weight: 760;
}

body.vpos-app .form-control,
body.vpos-app .input-sm,
body.vpos-app select.input-sm,
body.vpos-app .select2-container--default .select2-selection--single,
body.vpos-app .select2-container--default .select2-selection--multiple {
    min-height: 30px;
    border-color: var(--vpos-border-strong);
    border-radius: 6px;
    background-color: var(--vpos-surface);
    color: var(--vpos-text);
    font-size: 12px;
    box-shadow: none;
}

body.vpos-app .form-control {
    height: 30px;
    padding: 5px 8px;
}

body.vpos-app textarea.form-control {
    height: auto;
    min-height: 72px;
}

body.vpos-app .input-group-addon {
    min-width: 30px;
    border-color: var(--vpos-border-strong);
    border-radius: 6px;
    background: var(--vpos-surface-muted);
    color: var(--vpos-text-muted);
    font-size: 12px;
}

body.vpos-app .input-group .form-control:first-child,
body.vpos-app .input-group-addon:first-child,
body.vpos-app .input-group-btn:first-child > .btn {
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}

body.vpos-app .input-group .form-control:last-child,
body.vpos-app .input-group-addon:last-child,
body.vpos-app .input-group-btn:last-child > .btn {
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}

body.vpos-app .form-control:focus,
body.vpos-app .select2-container--default.select2-container--focus .select2-selection--single,
body.vpos-app .select2-container--default.select2-container--focus .select2-selection--multiple,
body.vpos-app .select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--vpos-primary) !important;
    box-shadow: 0 0 0 2px var(--vpos-primary-ring) !important;
}

body.vpos-app .select2-container .select2-selection--single .select2-selection__rendered {
    color: var(--vpos-text);
    line-height: 28px;
}

body.vpos-app .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 28px;
}

body.vpos-app .select2-dropdown {
    border-color: var(--vpos-border-strong);
    border-radius: 6px;
    box-shadow: var(--vpos-shadow-md);
}

body.vpos-app .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: var(--vpos-primary);
}

body.vpos-app .btn {
    border-radius: 6px;
    font-size: 12px;
    font-weight: 720;
}

body.vpos-app .btn.btn-flat {
    border-radius: 6px;
}

body.vpos-app .btn-primary,
body.vpos-app .bg-primary,
body.vpos-app .bg-green,
body.vpos-app .btn-success {
    border-color: var(--vpos-primary) !important;
    background: var(--vpos-primary) !important;
    color: #ffffff !important;
}

body.vpos-app .btn-primary:hover,
body.vpos-app .btn-primary:focus,
body.vpos-app .btn-success:hover,
body.vpos-app .btn-success:focus {
    border-color: var(--vpos-primary-hover) !important;
    background: var(--vpos-primary-hover) !important;
}

body.vpos-app .bg-navy,
body.vpos-app .btn.bg-navy {
    background: var(--vpos-accent) !important;
}

body.vpos-app .bg-purple,
body.vpos-app .btn.bg-purple {
    background: var(--vpos-accent-2) !important;
}

body.vpos-app .bg-aqua,
body.vpos-app .btn.bg-aqua {
    background: var(--vpos-accent-3) !important;
}

body.vpos-app .bg-yellow,
body.vpos-app .btn.bg-yellow {
    background: var(--vpos-warning) !important;
}

body.vpos-app .bg-red,
body.vpos-app .btn.bg-red,
body.vpos-app .btn-danger {
    background: var(--vpos-danger) !important;
    border-color: var(--vpos-danger) !important;
}

body.vpos-app .bg-info,
body.vpos-app .btn-info {
    background: var(--vpos-info) !important;
    border-color: var(--vpos-info) !important;
}

body.vpos-app .table-responsive,
body.vpos-app .vpos-table-shell,
body.vpos-app .dataTables_wrapper {
    border-radius: var(--vpos-radius);
}

body.vpos-app .table {
    margin-bottom: 0;
    color: var(--vpos-text);
    font-size: 11.5px;
}

body.vpos-app .table > thead > tr > th {
    padding: 7px 8px;
    border-bottom: 1px solid var(--vpos-border-strong);
    background: var(--vpos-surface-muted);
    color: var(--vpos-text-strong);
    font-size: 11px;
    font-weight: 800;
    vertical-align: middle;
}

body.vpos-app .table > tbody > tr > td,
body.vpos-app .table > tfoot > tr > td {
    padding: 6px 8px;
    border-color: var(--vpos-border);
    vertical-align: middle;
}

body.vpos-app .table-striped > tbody > tr:nth-of-type(odd) {
    background-color: rgba(15, 124, 108, 0.025);
}

body.vpos-app .table-hover > tbody > tr:hover > td,
body.vpos-app table.dataTable tbody tr:hover > td {
    background: var(--vpos-primary-soft);
}

body.vpos-app table.dataTable thead .sorting,
body.vpos-app table.dataTable thead .sorting_asc,
body.vpos-app table.dataTable thead .sorting_desc {
    background-color: var(--vpos-surface-muted);
}

body.vpos-app .dataTables_wrapper .dataTables_filter input,
body.vpos-app .dataTables_wrapper .dataTables_length select {
    height: 29px;
    border: 1px solid var(--vpos-border-strong);
    border-radius: 6px;
    background: var(--vpos-surface);
    color: var(--vpos-text);
    font-size: 12px;
}

body.vpos-app .dataTables_wrapper .dt-buttons .btn,
body.vpos-app .dataTables_wrapper .dataTables_paginate .paginate_button,
body.vpos-app .pagination > li > a,
body.vpos-app .pagination > li > span {
    border-color: var(--vpos-border);
    border-radius: 6px;
    background: var(--vpos-surface);
    color: var(--vpos-primary-active) !important;
    font-size: 11.5px;
}

body.vpos-app .dataTables_wrapper .dt-buttons .btn:hover,
body.vpos-app .pagination > li > a:hover,
body.vpos-app .pagination > li.active > a {
    border-color: var(--vpos-primary);
    background: var(--vpos-primary-soft) !important;
    color: var(--vpos-primary-active) !important;
}

body.vpos-app .modal-content {
    overflow: hidden;
    border: 1px solid var(--vpos-border);
    border-radius: var(--vpos-radius-lg);
    box-shadow: var(--vpos-shadow-lg);
}

body.vpos-app .modal-header {
    min-height: 42px;
    padding: 10px 12px;
    border-bottom-color: var(--vpos-border);
    background: var(--vpos-surface-muted);
}

body.vpos-app .modal-title {
    color: var(--vpos-text-strong);
    font-size: 14px;
    font-weight: 800;
}

body.vpos-app .modal-body {
    padding: 12px;
}

body.vpos-app .modal-footer {
    padding: 9px 12px;
    border-top-color: var(--vpos-border);
    background: var(--vpos-surface-tint);
}

body.vpos-app .datepicker,
body.vpos-app .daterangepicker,
body.vpos-app .bootstrap-datetimepicker-widget,
body.vpos-app .popover,
body.vpos-app .dropdown-menu {
    border-color: var(--vpos-border-strong);
    border-radius: 8px;
    box-shadow: var(--vpos-shadow-md);
}

body.vpos-app .label,
body.vpos-app .badge {
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 780;
}

/* ============================================================
   VPOS Dashboard Chart Upgrade
   Applies to existing generated Highcharts containers only.
   ============================================================ */

body.vpos-app .vpos-dashboard {
    display: block;
}

body.vpos-app .vpos-dashboard-kpi-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    margin-right: -5px;
    margin-bottom: 14px;
    margin-left: -5px;
    row-gap: 10px;
}

body.vpos-app .vpos-dashboard-kpi-grid::before,
body.vpos-app .vpos-dashboard-kpi-grid::after {
    display: none;
    content: none;
}

body.vpos-app .vpos-dashboard-kpi-grid > [class*="col-"] {
    float: none;
    display: flex;
    padding-right: 5px;
    padding-left: 5px;
}

body.vpos-app .vpos-dashboard-kpi-grid > [class*="col-"] > .info-box {
    width: 100%;
}

body.vpos-app .vpos-dashboard-widget-row {
    clear: both;
    margin-top: 10px;
}

body.vpos-app .vpos-dashboard-chart-panel {
    margin-top: 0;
}

body.vpos-app .vpos-kpi-card.info-box {
    min-height: 70px;
    border-color: color-mix(in srgb, var(--vpos-primary) 13%, var(--vpos-border));
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.72)),
        linear-gradient(135deg, var(--vpos-primary-soft), transparent 62%);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

body.vpos-app .vpos-kpi-card .info-box-icon {
    width: 44px;
    height: 44px;
    margin: 12px 8px 0 10px;
    border-radius: 10px;
    background: var(--vpos-primary-soft);
    color: var(--vpos-primary-active);
    line-height: 44px;
}

body.vpos-app .vpos-kpi-card .info-box-content {
    margin-left: 64px;
    padding: 10px 8px 8px 0;
}

body.vpos-app .vpos-kpi-card .info-box-text {
    color: var(--vpos-text-muted);
    font-size: 10.5px;
    font-weight: 820;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

body.vpos-app .vpos-kpi-card .info-box-number {
    margin-top: 2px;
    color: var(--vpos-text-strong);
    font-size: 17px;
    font-weight: 850;
}

body.vpos-app .vpos-dashboard-chart-panel .box-body,
body.vpos-app .vpos-dashboard-chart-panel .vpos-widget-body {
    min-height: 270px;
    padding: 10px 12px 12px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.96)),
        var(--vpos-surface);
}

body.vpos-app .vpos-dashboard-chart-panel .highcharts-container,
body.vpos-app .vpos-dashboard-chart-panel svg.highcharts-root {
    width: 100% !important;
    font-family: var(--vpos-font-family) !important;
}

body.vpos-app .highcharts-background {
    fill: transparent;
}

body.vpos-app .highcharts-title {
    fill: var(--vpos-text-strong) !important;
    color: var(--vpos-text-strong) !important;
    font-size: 14px !important;
    font-weight: 780 !important;
}

body.vpos-app .highcharts-axis-labels text,
body.vpos-app .highcharts-legend-item text {
    fill: var(--vpos-text-muted) !important;
    color: var(--vpos-text-muted) !important;
    font-size: 11px !important;
}

body.vpos-app .highcharts-grid-line,
body.vpos-app .highcharts-axis-line,
body.vpos-app .highcharts-tick {
    stroke: var(--vpos-border) !important;
}

body.vpos-app .highcharts-tooltip-box {
    fill: var(--vpos-surface);
    stroke: var(--vpos-border-strong);
    filter: drop-shadow(0 8px 18px rgba(15, 23, 42, 0.14));
}

/* ============================================================
   VPOS POS Workspace Upgrade
   CSS-only upgrade around existing POS IDs/classes used by JS.
   ============================================================ */

body.vpos-pos-layout {
    min-height: 100vh;
    overflow-x: hidden;
    background:
        radial-gradient(circle at 10% -8%, rgba(94, 234, 212, 0.18), transparent 26%),
        radial-gradient(circle at 82% -12%, rgba(37, 99, 235, 0.14), transparent 30%),
        linear-gradient(180deg, var(--vpos-bg-subtle) 0%, var(--vpos-bg) 100%);
}

body.vpos-pos-layout .wrapper {
    min-height: 100vh;
    overflow-x: hidden;
    background: transparent;
}

body.vpos-pos-layout .content.no-print {
    padding: 10px 12px 88px;
}

body.vpos-pos-layout .vpos-pos-header {
    position: sticky;
    top: 0;
    z-index: 1040;
    width: 100%;
    float: none;
    clear: both;
    padding: 8px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 36%),
        linear-gradient(120deg, var(--vpos-shell-topbar-start) 0%, var(--vpos-shell-topbar-mid) 48%, var(--vpos-shell-topbar-end) 100%);
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.18);
}

body.vpos-pos-layout .vpos-pos-header-inner {
    min-height: 36px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

body.vpos-pos-layout .vpos-pos-header-left,
body.vpos-pos-layout .vpos-pos-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

body.vpos-pos-layout .vpos-pos-location-wrap,
body.vpos-pos-layout .vpos-pos-time-wrap {
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    padding: 4px 8px;
    font-size: 12px;
    font-weight: 720;
}

body.vpos-pos-layout .vpos-pos-label {
    color: rgba(255, 255, 255, 0.78);
}

body.vpos-pos-layout .vpos-pos-location-select .form-control {
    width: 190px;
    height: 26px;
    min-height: 26px;
    border-color: rgba(255, 255, 255, 0.24);
    background: rgba(255, 255, 255, 0.94);
    color: var(--vpos-text);
}

body.vpos-pos-layout .vpos-pos-header-btn.btn {
    min-width: 30px;
    height: 30px;
    padding: 5px 8px;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
}

body.vpos-pos-layout .vpos-pos-header-btn.btn:hover,
body.vpos-pos-layout .vpos-pos-header-btn.btn:focus {
    background: rgba(255, 255, 255, 0.2) !important;
}

body.vpos-pos-layout #add_pos_sell_form > .row {
    margin-right: -6px;
    margin-left: -6px;
}

body.vpos-pos-layout #add_pos_sell_form > .row > [class*="col-"],
body.vpos-pos-layout #add_pos_sell_form .row > [class*="col-"] {
    padding-right: 6px;
    padding-left: 6px;
}

body.vpos-pos-layout #add_pos_sell_form .box.box-solid,
body.vpos-pos-layout #add_pos_sell_form .box.box-widget {
    border: 1px solid var(--vpos-border);
    border-radius: var(--vpos-radius-lg);
    background: rgba(255, 255, 255, 0.94);
    box-shadow: var(--vpos-shadow-sm);
}

body.vpos-pos-layout #add_pos_sell_form .box-body {
    padding: 10px;
}

body.vpos-pos-layout #customer_id + .select2-container .select2-selection--single,
body.vpos-pos-layout #search_product,
body.vpos-pos-layout #select_location_id {
    height: 34px;
    min-height: 34px;
    border-color: color-mix(in srgb, var(--vpos-primary) 26%, var(--vpos-border-strong));
    background: #ffffff;
    font-size: 12.5px;
}

body.vpos-pos-layout #search_product {
    font-weight: 720;
}

body.vpos-pos-layout #search_product::placeholder {
    color: var(--vpos-text-soft);
}

body.vpos-pos-layout .pos_product_div {
    margin-bottom: 8px;
    border: 1px solid var(--vpos-border);
    border-radius: var(--vpos-radius);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.96)),
        var(--vpos-surface);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.76);
}

body.vpos-pos-layout table#pos_table {
    border-collapse: separate !important;
    border-spacing: 0;
    background: transparent;
}

body.vpos-pos-layout table#pos_table > thead > tr > th {
    position: sticky;
    top: 0;
    z-index: 1;
    border-right: 1px solid var(--vpos-border);
    border-bottom: 1px solid var(--vpos-border-strong);
    background:
        linear-gradient(180deg, var(--vpos-surface-muted), color-mix(in srgb, var(--vpos-surface-muted) 78%, #ffffff));
    color: var(--vpos-text-strong);
    font-size: 11px;
    font-weight: 850;
}

body.vpos-pos-layout table#pos_table > tbody > tr.product_row > td {
    background: #ffffff;
}

body.vpos-pos-layout table#pos_table > tbody > tr.product_row:hover > td {
    background: var(--vpos-primary-soft);
}

body.vpos-pos-layout table#pos_table .form-control,
body.vpos-pos-layout table#pos_table .select2-container--default .select2-selection--single {
    height: 28px;
    min-height: 28px;
    padding: 4px 6px;
    font-size: 11.5px;
}

body.vpos-pos-layout .pos_form_totals {
    margin: 8px 0 10px;
    border: 1px solid var(--vpos-border);
    border-radius: var(--vpos-radius);
    background:
        linear-gradient(135deg, var(--vpos-primary-soft), rgba(255, 255, 255, 0.94) 44%),
        #ffffff;
}

body.vpos-pos-layout .pos_form_totals .table {
    width: 100%;
}

body.vpos-pos-layout .pos_form_totals .table > tbody > tr > td {
    padding: 7px 9px;
    border-color: rgba(15, 124, 108, 0.1);
    color: var(--vpos-text);
    font-size: 12px;
}

body.vpos-pos-layout .pos_form_totals b {
    color: var(--vpos-text-strong);
}

body.vpos-pos-layout .pos_form_totals .cursor-pointer {
    color: var(--vpos-primary);
}

body.vpos-pos-layout .pos-form-actions {
    right: 0;
    bottom: 0;
    left: 0;
    min-height: 58px;
    padding: 9px 12px;
    border-top: 1px solid var(--vpos-border);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.96)),
        var(--vpos-surface);
    box-shadow: 0 -8px 26px rgba(15, 23, 42, 0.12);
    backdrop-filter: saturate(150%) blur(10px);
}

body.vpos-pos-layout .vpos-pos-footer {
    position: fixed;
    bottom: 60px;
    left: 10px;
    z-index: 997;
    max-width: calc(100vw - 20px);
    color: var(--vpos-text-muted);
    pointer-events: none;
}

body.vpos-pos-layout .vpos-pos-footer small {
    min-height: 24px;
    padding: 4px 8px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
    border: 1px solid color-mix(in srgb, var(--vpos-border) 70%, transparent);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    color: var(--vpos-text-muted);
    font-size: 10.5px;
    line-height: 1.2;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
    backdrop-filter: saturate(150%) blur(8px);
}

body.vpos-pos-layout .vpos-pos-footer strong {
    color: var(--vpos-primary-active);
    font-weight: 850;
}

body.vpos-pos-layout .vpos-pos-footer .vpos-footer-separator {
    color: var(--vpos-text-soft);
}

body.vpos-pos-layout .pos-form-actions .col-md-12 {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

body.vpos-pos-layout .pos-form-actions .btn {
    height: 32px;
    margin: 0;
    padding: 6px 10px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-radius: 8px;
    line-height: 1;
    white-space: nowrap;
}

body.vpos-pos-layout .pos-total {
    min-height: 38px;
    margin-left: auto;
    margin-right: 0;
    padding: 5px 10px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 10px;
    background:
        linear-gradient(135deg, var(--vpos-primary-active), var(--vpos-accent)) !important;
    box-shadow: 0 8px 18px rgba(15, 124, 108, 0.18);
}

body.vpos-pos-layout .pos-total span.text {
    width: auto;
    color: rgba(255, 255, 255, 0.82);
    font-size: 10px;
    line-height: 1.1;
    text-transform: uppercase;
}

body.vpos-pos-layout .pos-total span.number {
    color: #ffffff;
    font-size: 20px;
    line-height: 1.1;
}

body.vpos-pos-layout #recent-transactions {
    margin-left: 0;
}

body.vpos-pos-layout .box-widget .box-header {
    min-height: 36px;
}

body.vpos-pos-layout #product_list_body {
    max-height: calc(100vh - 184px);
    padding: 4px;
    overflow-y: auto;
    overflow-x: hidden;
}

body.vpos-pos-layout .product_list {
    padding-right: 4px;
    padding-left: 4px;
}

body.vpos-pos-layout .product_box {
    min-height: 96px;
    margin-bottom: 8px;
    padding: 6px;
    border: 1px solid var(--vpos-border);
    border-radius: 10px;
    background:
        linear-gradient(180deg, #ffffff, var(--vpos-surface-tint));
    color: var(--vpos-text);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
    transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}

body.vpos-pos-layout .product_box:hover,
body.vpos-pos-layout .product_box:focus {
    border-color: var(--vpos-primary);
    box-shadow: 0 6px 16px rgba(15, 124, 108, 0.14);
    transform: translateY(-1px);
}

body.vpos-pos-layout .product_box .image-container {
    height: 48px;
    border-radius: 8px;
    background-color: #ffffff;
}

body.vpos-pos-layout .product_box .text_div {
    min-height: 34px;
    padding-top: 5px;
}

body.vpos-pos-layout .product_box .text {
    max-height: 28px;
    display: block;
    overflow: hidden;
    color: var(--vpos-text);
    font-size: 10.5px;
    font-weight: 760;
    line-height: 1.25;
}

body.vpos-pos-layout .nav-tabs-custom {
    overflow: hidden;
}

body.vpos-pos-layout .nav-tabs-custom > .nav-tabs > li > a {
    padding: 7px 10px;
    color: var(--vpos-text-muted);
    font-size: 11.5px;
    font-weight: 780;
}

body.vpos-pos-layout .nav-tabs-custom > .nav-tabs > li.active > a {
    border-top-color: var(--vpos-primary);
    color: var(--vpos-primary-active);
}

@media (max-width: 991px) {
    body.vpos-pos-layout .content.no-print {
        padding-bottom: 112px;
    }

    body.vpos-pos-layout .vpos-pos-header-inner,
    body.vpos-pos-layout .pos-form-actions .col-md-12 {
        align-items: stretch;
    }

    body.vpos-pos-layout .pos-form-actions .btn {
        flex: 1 1 calc(33.333% - 6px);
        justify-content: center;
    }

    body.vpos-pos-layout .pos-total {
        flex: 1 1 100%;
        justify-content: space-between;
        margin-left: 0;
    }
}

@media (max-width: 767px) {
    body.vpos-app .content,
    body.vpos-app .content-custom {
        padding-right: 8px;
        padding-left: 8px;
    }

    body.vpos-app .box-body {
        padding: 8px;
    }

    body.vpos-pos-layout .content.no-print {
        padding-bottom: 12px;
    }

    body.vpos-pos-layout .vpos-pos-header {
        position: static;
        padding: 8px;
    }

    body.vpos-pos-layout .vpos-pos-header-inner {
        flex-direction: column;
    }

    body.vpos-pos-layout .vpos-pos-header-left,
    body.vpos-pos-layout .vpos-pos-header-actions,
    body.vpos-pos-layout .vpos-pos-location-wrap,
    body.vpos-pos-layout .vpos-pos-time-wrap {
        width: 100%;
    }

    body.vpos-pos-layout .vpos-pos-header-actions {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    body.vpos-pos-layout .vpos-pos-header-btn.btn {
        justify-content: center;
        width: 100%;
    }

    body.vpos-pos-layout .vpos-pos-location-select .form-control {
        width: 100%;
    }

    body.vpos-pos-layout .pos-form-actions {
        position: sticky;
        padding: 8px;
    }

    body.vpos-pos-layout .vpos-pos-footer {
        position: static;
        margin: 4px 8px 8px;
    }

    body.vpos-pos-layout .vpos-pos-footer small {
        border-radius: 8px;
    }

    body.vpos-pos-layout .pos-form-actions .btn {
        flex: 1 1 calc(50% - 6px);
        min-width: 0;
        white-space: normal;
    }

    body.vpos-pos-layout #product_list_body {
        max-height: 54vh;
    }

    body.vpos-pos-layout .product_box {
        min-height: 88px;
    }
}

/* ============================================================
   VPOS POS Workspace V2
   Builds on the existing POS IDs/classes without changing JS hooks.
   ============================================================ */

body.vpos-pos-layout #add_pos_sell_form > .vpos-pos-stage {
    width: 100%;
    max-width: 1680px;
    margin: 0 auto 70px;
}

body.vpos-pos-layout #add_pos_sell_form > .vpos-pos-stage > .col-md-12 {
    float: none;
    width: 100%;
    padding-right: 0;
    padding-left: 0;
}

body.vpos-pos-layout #add_pos_sell_form .vpos-pos-grid {
    display: grid;
    width: 100%;
    grid-template-columns: minmax(620px, 1fr) minmax(320px, 410px);
    align-items: start;
    gap: 12px;
    margin-right: 0;
    margin-left: 0;
}

body.vpos-pos-layout #add_pos_sell_form .vpos-pos-grid-no-sidebar {
    grid-template-columns: minmax(0, 980px);
    justify-content: center;
}

body.vpos-pos-layout #add_pos_sell_form .vpos-pos-grid::before,
body.vpos-pos-layout #add_pos_sell_form .vpos-pos-grid::after,
body.vpos-pos-layout .vpos-pos-command-row::before,
body.vpos-pos-layout .vpos-pos-command-row::after,
body.vpos-pos-layout .vpos-pos-meta-row::before,
body.vpos-pos-layout .vpos-pos-meta-row::after,
body.vpos-pos-layout .vpos-pos-product-filter-row::before,
body.vpos-pos-layout .vpos-pos-product-filter-row::after,
body.vpos-pos-layout .vpos-pos-product-grid-row::before,
body.vpos-pos-layout .vpos-pos-product-grid-row::after {
    display: none;
    content: none;
}

body.vpos-pos-layout #add_pos_sell_form .vpos-pos-grid > [class*="col-"] {
    float: none;
    width: auto;
    min-width: 0;
    margin-right: 0;
    margin-left: 0;
    padding: 0;
}

body.vpos-pos-layout .vpos-pos-cart-shell.box {
    overflow: hidden;
    margin-bottom: 0 !important;
    border-color: color-mix(in srgb, var(--vpos-primary) 13%, var(--vpos-border));
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.9)),
        var(--vpos-surface);
}

body.vpos-pos-layout .vpos-pos-cart-body {
    padding: 10px !important;
}

body.vpos-pos-layout .vpos-pos-command-row {
    display: grid;
    grid-template-columns: minmax(250px, 0.74fr) minmax(340px, 1.26fr);
    gap: 8px;
    margin: 0 0 8px;
}

body.vpos-pos-layout .vpos-pos-command-row > [class*="col-"] {
    float: none;
    width: auto;
    min-width: 0;
    padding: 0;
}

body.vpos-pos-layout .vpos-pos-command-row .form-group,
body.vpos-pos-layout .vpos-pos-meta-row .form-group {
    margin-bottom: 0;
}

body.vpos-pos-layout .vpos-pos-input-group {
    border: 1px solid color-mix(in srgb, var(--vpos-primary) 20%, var(--vpos-border));
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}

body.vpos-pos-layout .vpos-pos-input-group .input-group-addon,
body.vpos-pos-layout .vpos-pos-input-group .input-group-btn > .btn {
    height: 34px;
    border-color: transparent;
    background: transparent;
    color: var(--vpos-primary-active);
}

body.vpos-pos-layout .vpos-pos-input-group .form-control,
body.vpos-pos-layout .vpos-pos-input-group .select2-container .select2-selection--single {
    border-color: transparent !important;
    box-shadow: none;
}

body.vpos-pos-layout .vpos-pos-tool-btn i {
    color: var(--vpos-primary-active) !important;
}

body.vpos-pos-layout .vpos-pos-meta-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 8px;
    margin: 0 0 8px;
}

body.vpos-pos-layout .vpos-pos-meta-row > [class*="col-"],
body.vpos-pos-layout .vpos-pos-meta-row > span > [class*="col-"] {
    float: none;
    width: auto;
    min-width: 0;
    padding: 0;
}

body.vpos-pos-layout .vpos-pos-cart-panel {
    max-height: calc(100vh - 352px);
    min-height: 210px;
    overflow: auto;
}

body.vpos-pos-layout .vpos-pos-cart-table {
    margin-bottom: 0;
}

body.vpos-pos-layout table#pos_table > thead > tr > th {
    top: 0;
    height: 32px;
    padding: 7px 8px;
    white-space: nowrap;
}

body.vpos-pos-layout table#pos_table > tbody > tr.product_row > td {
    padding: 7px 8px;
    vertical-align: middle;
    border-top-color: var(--vpos-border);
}

body.vpos-pos-layout table#pos_table .input-number .btn {
    min-width: 28px;
    height: 28px;
    padding: 4px 6px;
    border-radius: 7px;
}

body.vpos-pos-layout .vpos-pos-totals-panel {
    margin: 8px 0 0;
    padding: 8px;
}

body.vpos-pos-layout .vpos-pos-totals-table,
body.vpos-pos-layout .vpos-pos-totals-table tbody {
    display: block;
    margin-bottom: 0;
}

body.vpos-pos-layout .vpos-pos-totals-table tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
}

body.vpos-pos-layout .vpos-pos-totals-table tr + tr {
    grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
    margin-top: 7px;
}

body.vpos-pos-layout .vpos-pos-totals-table td {
    min-height: 34px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border: 1px solid color-mix(in srgb, var(--vpos-primary) 10%, var(--vpos-border));
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.72);
}

body.vpos-pos-layout .vpos-pos-totals-table td.hide {
    display: none !important;
}

body.vpos-pos-layout .vpos-pos-actionbar {
    position: fixed;
    z-index: 1035;
}

body.vpos-pos-layout .vpos-pos-actionbar-inner {
    justify-content: flex-start;
}

body.vpos-pos-layout .vpos-pos-actionbar .btn {
    border: 1px solid color-mix(in srgb, var(--vpos-primary) 14%, var(--vpos-border-strong)) !important;
    background: #ffffff !important;
    color: var(--vpos-text-strong) !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

body.vpos-pos-layout .vpos-pos-actionbar .btn:hover,
body.vpos-pos-layout .vpos-pos-actionbar .btn:focus {
    border-color: var(--vpos-primary) !important;
    background: var(--vpos-primary-soft) !important;
    color: var(--vpos-primary-active) !important;
}

body.vpos-pos-layout .vpos-pos-actionbar #pos-finalize,
body.vpos-pos-layout .vpos-pos-actionbar .pos-express-finalize[data-pay_method="cash"] {
    border-color: transparent !important;
    background: linear-gradient(135deg, var(--vpos-primary), var(--vpos-primary-active)) !important;
    color: #ffffff !important;
}

body.vpos-pos-layout .vpos-pos-actionbar .pos-express-finalize[data-pay_method="card"] {
    border-color: transparent !important;
    background: linear-gradient(135deg, #4f46e5, #1d4ed8) !important;
    color: #ffffff !important;
}

body.vpos-pos-layout .vpos-pos-actionbar .pos-express-finalize[data-pay_method="suspend"],
body.vpos-pos-layout .vpos-pos-actionbar #pos-cancel,
body.vpos-pos-layout .vpos-pos-actionbar #pos-delete {
    border-color: transparent !important;
    background: linear-gradient(135deg, #dc2626, #991b1b) !important;
    color: #ffffff !important;
}

body.vpos-pos-layout .vpos-pos-actionbar .pos-express-finalize[data-pay_method="credit_sale"] {
    border-color: transparent !important;
    background: linear-gradient(135deg, #7c3aed, #5b21b6) !important;
    color: #ffffff !important;
}

body.vpos-pos-layout .vpos-pos-actionbar #pos-draft,
body.vpos-pos-layout .vpos-pos-actionbar #pos-quotation,
body.vpos-pos-layout .vpos-pos-actionbar #recent-transactions {
    color: var(--vpos-primary-active) !important;
}

body.vpos-pos-layout .vpos-pos-sidebar-stack {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

body.vpos-pos-layout .vpos-pos-product-filter-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
    gap: 8px;
    margin: 0 0 8px;
}

body.vpos-pos-layout .vpos-pos-product-filter-row > [class*="col-"] {
    float: none;
    width: auto;
    min-width: 0;
    padding: 0;
}

body.vpos-pos-layout .vpos-pos-product-filter-row .select2-container {
    width: 100% !important;
}

body.vpos-pos-layout .vpos-pos-product-filter-row .btn {
    width: 100%;
    height: 30px;
    border-radius: 8px;
}

body.vpos-pos-layout .vpos-pos-product-grid-row {
    margin-right: 0;
    margin-left: 0;
}

body.vpos-pos-layout #product_list_body {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
    align-content: start;
    gap: 8px;
    max-height: calc(100vh - 198px);
    padding: 2px 2px 4px;
}

body.vpos-pos-layout #product_list_body::before,
body.vpos-pos-layout #product_list_body::after {
    display: none;
    content: none;
}

body.vpos-pos-layout #product_list_body .product_list {
    float: none;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 0;
}

body.vpos-pos-layout #product_list_body .product_box {
    min-height: 104px;
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
}

body.vpos-pos-layout #product_list_body .product_box .image-container {
    height: 54px;
    border: 1px solid color-mix(in srgb, var(--vpos-primary) 8%, var(--vpos-border));
}

body.vpos-pos-layout #product_list_body .product_box .text_div {
    min-height: 0;
    flex: 1;
}

body.vpos-pos-layout .vpos-pos-recent-card .nav-tabs-custom {
    margin-bottom: 0;
    box-shadow: none;
}

body.vpos-pos-layout .vpos-pos-payment-dialog {
    width: calc(100% - 28px);
    max-width: 1120px;
}

body.vpos-pos-layout .vpos-pos-payment-content {
    overflow: hidden;
    border: 1px solid var(--vpos-border);
    border-radius: 12px;
    box-shadow: var(--vpos-shadow-lg);
}

body.vpos-pos-layout .vpos-pos-payment-header,
body.vpos-pos-layout .vpos-pos-payment-footer {
    border-color: var(--vpos-border);
    background: var(--vpos-surface);
}

body.vpos-pos-layout .vpos-pos-payment-body {
    background: var(--vpos-bg-subtle);
}

body.vpos-pos-layout .vpos-pos-payment-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: 12px;
    margin-right: 0;
    margin-left: 0;
}

body.vpos-pos-layout .vpos-pos-payment-layout::before,
body.vpos-pos-layout .vpos-pos-payment-layout::after {
    display: none;
    content: none;
}

body.vpos-pos-layout .vpos-pos-payment-main,
body.vpos-pos-layout .vpos-pos-payment-side {
    float: none;
    width: auto;
    min-width: 0;
    padding: 0;
}

body.vpos-pos-layout .vpos-pos-payment-summary {
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--vpos-primary) 16%, var(--vpos-border));
    border-radius: 10px;
    background:
        linear-gradient(135deg, var(--vpos-primary-active), var(--vpos-accent)) !important;
    color: #ffffff;
    box-shadow: 0 12px 28px rgba(15, 124, 108, 0.18);
}

body.vpos-pos-layout .vpos-pos-payment-summary hr {
    border-top-color: rgba(255, 255, 255, 0.24);
}

body.vpos-pos-layout .vpos-pos-payment-summary .lead {
    font-size: 20px;
}

@media (max-width: 1199px) {
    body.vpos-pos-layout #add_pos_sell_form .vpos-pos-grid {
        grid-template-columns: minmax(560px, 1fr) minmax(300px, 360px);
    }

    body.vpos-pos-layout #product_list_body {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    }
}

@media (max-width: 991px) {
    body.vpos-pos-layout #add_pos_sell_form .vpos-pos-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    body.vpos-pos-layout .vpos-pos-command-row,
    body.vpos-pos-layout .vpos-pos-payment-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    body.vpos-pos-layout .vpos-pos-cart-panel {
        max-height: none;
    }

    body.vpos-pos-layout .vpos-pos-payment-dialog {
        width: calc(100% - 16px);
    }
}

@media (max-width: 767px) {
    body.vpos-pos-layout #add_pos_sell_form > .vpos-pos-stage {
        margin-bottom: 0;
    }

    body.vpos-pos-layout .vpos-pos-cart-body {
        padding: 8px !important;
    }

    body.vpos-pos-layout .vpos-pos-meta-row,
    body.vpos-pos-layout .vpos-pos-totals-table tr,
    body.vpos-pos-layout .vpos-pos-totals-table tr + tr {
        grid-template-columns: minmax(0, 1fr);
    }

    body.vpos-pos-layout .vpos-pos-actionbar {
        position: sticky;
        bottom: 0;
        z-index: 1020;
    }

    body.vpos-pos-layout #product_list_body {
        grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
        max-height: 55vh;
    }

body.vpos-pos-layout #product_list_body .product_box {
        min-height: 92px;
    }
}

/* ============================================================
   VPOS POS Final Polish + Overlay Layer
   UI-only rules. Existing POS IDs, names, and JS hooks remain.
   ============================================================ */

body.vpos-app,
body.vpos-restaurant-layout {
    --vpos-z-header: 3000;
    --vpos-z-dropdown: 3650;
    --vpos-z-modal-backdrop: 3400;
    --vpos-z-modal: 3410;
    --vpos-z-modal-dropdown: 3680;
    --vpos-z-alert: 3850;
    --vpos-z-toast: 3900;
}

body.vpos-app .main-header,
body.vpos-app .main-header .navbar,
body.vpos-app .navbar-custom-menu,
body.vpos-app .dropdown,
body.vpos-app .btn-group,
body.vpos-pos-layout .vpos-pos-header,
body.vpos-pos-layout .vpos-pos-header-actions {
    overflow: visible !important;
}

body.vpos-app .main-header,
body.vpos-pos-layout .vpos-pos-header {
    z-index: var(--vpos-z-header) !important;
}

body.vpos-app .dropdown-menu,
body.vpos-app .dt-button-collection,
body > .dropdown-menu.vpos-dropdown-portal,
body > .dropdown-menu.vpos-product-action-menu-portal {
    z-index: var(--vpos-z-dropdown) !important;
}

body.vpos-app .modal {
    z-index: var(--vpos-z-modal) !important;
}

body.vpos-app .modal-backdrop {
    z-index: var(--vpos-z-modal-backdrop) !important;
}

body.vpos-app .modal .dropdown-menu,
body.vpos-app .modal .dt-button-collection,
body.vpos-app .modal .datepicker,
body.vpos-app .modal .daterangepicker,
body.vpos-app .modal .bootstrap-datetimepicker-widget,
body.vpos-app .select2-container--open,
body.vpos-app .select2-dropdown,
body.vpos-app .ui-autocomplete {
    z-index: var(--vpos-z-modal-dropdown) !important;
}

body.vpos-app #toast-container {
    z-index: var(--vpos-z-toast) !important;
}

body.vpos-app .swal-overlay,
body.vpos-restaurant-layout .swal-overlay {
    z-index: var(--vpos-z-alert) !important;
    pointer-events: auto !important;
}

body.vpos-app .swal-modal,
body.vpos-app .swal-button,
body.vpos-restaurant-layout .swal-modal,
body.vpos-restaurant-layout .swal-button {
    pointer-events: auto !important;
}

body.vpos-app .popover {
    z-index: calc(var(--vpos-z-dropdown) + 10) !important;
}

body.vpos-app .popover #calculator {
    width: 184px;
    max-width: 184px;
}

body.vpos-app .popover #calculator .screen {
    height: 32px;
    margin-bottom: 6px;
}

body.vpos-app .popover #calculator .btn {
    width: 38px;
    height: 32px;
}

body.vpos-pos-layout .vpos-pos-payment-dialog {
    width: calc(100vw - 22px);
    max-width: 1180px;
    margin: 8px auto;
}

body.vpos-pos-layout .vpos-pos-payment-content {
    display: flex;
    max-height: calc(100vh - 16px);
    flex-direction: column;
}

body.vpos-pos-layout .vpos-pos-payment-header,
body.vpos-pos-layout .vpos-pos-payment-footer {
    flex: 0 0 auto;
    min-height: 44px;
    padding: 9px 12px;
}

body.vpos-pos-layout .vpos-pos-payment-header .modal-title {
    color: var(--vpos-text-strong);
    font-size: 15px;
    font-weight: 860;
}

body.vpos-pos-layout .vpos-pos-payment-body {
    flex: 1 1 auto;
    min-height: 0;
    padding: 10px;
    overflow: auto;
}

body.vpos-pos-layout .vpos-pos-payment-layout {
    grid-template-columns: minmax(0, 1fr) 258px;
    gap: 10px;
}

body.vpos-pos-layout .vpos-pos-payment-advance {
    grid-column: 1 / -1;
    float: none;
    width: auto;
    min-width: 0;
    margin-bottom: 0;
    padding: 7px 9px;
    border: 1px solid var(--vpos-border);
    border-radius: 8px;
    background: var(--vpos-surface);
    color: var(--vpos-text-muted);
    font-size: 11.5px;
}

body.vpos-pos-layout #payment_rows_div {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 8px;
}

body.vpos-pos-layout #payment_rows_div::before,
body.vpos-pos-layout #payment_rows_div::after,
body.vpos-pos-layout .vpos-payment-row-grid::before,
body.vpos-pos-layout .vpos-payment-row-grid::after {
    display: none;
    content: none;
}

body.vpos-pos-layout .vpos-payment-row-shell {
    float: none;
    width: auto;
    min-width: 0;
    padding: 0;
}

body.vpos-pos-layout .vpos-payment-row-card {
    margin-bottom: 0;
    border: 1px solid var(--vpos-border);
    border-radius: 10px;
    background: var(--vpos-surface) !important;
    box-shadow: var(--vpos-shadow-sm);
}

body.vpos-pos-layout .vpos-payment-row-card .box-header {
    min-height: 28px;
    padding: 3px 6px;
    border-bottom: 1px solid var(--vpos-border);
    background: var(--vpos-surface-muted);
}

body.vpos-pos-layout .vpos-payment-row-card .remove_payment_row {
    width: 24px;
    height: 24px;
    padding: 0;
    border-radius: 6px;
    color: var(--vpos-danger);
}

body.vpos-pos-layout .vpos-payment-row-card .remove_payment_row i {
    font-size: 14px;
}

body.vpos-pos-layout .vpos-payment-row-body {
    padding: 8px !important;
}

body.vpos-pos-layout .vpos-payment-row-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    margin-right: 0;
    margin-left: 0;
}

body.vpos-pos-layout .vpos-payment-row-grid > [class*="col-"],
body.vpos-pos-layout .vpos-payment-row-grid > .payment_details_div,
body.vpos-pos-layout .vpos-payment-row-grid > .cash_denomination_div {
    float: none;
    width: auto;
    min-width: 0;
    padding: 0;
}

body.vpos-pos-layout .vpos-payment-row-grid > .clearfix {
    display: none;
}

body.vpos-pos-layout .vpos-payment-row-grid label,
body.vpos-pos-layout .vpos-pos-payment-notes label {
    margin-bottom: 3px;
    color: var(--vpos-text-muted);
    font-size: 10.6px;
    font-weight: 800;
}

body.vpos-pos-layout .vpos-payment-row-grid .form-group,
body.vpos-pos-layout .vpos-pos-payment-notes .form-group {
    margin-bottom: 0;
}

body.vpos-pos-layout .vpos-payment-row-grid .form-control,
body.vpos-pos-layout .vpos-payment-row-grid .select2-container .select2-selection--single {
    min-height: 29px;
    height: 29px;
    font-size: 11.5px;
}

body.vpos-pos-layout .vpos-payment-row-grid .input-group-addon {
    min-width: 30px;
    padding: 4px 7px;
    color: var(--vpos-primary);
}

body.vpos-pos-layout .vpos-payment-row-grid > .payment_details_div,
body.vpos-pos-layout .vpos-payment-row-grid > .cash_denomination_div,
body.vpos-pos-layout .vpos-payment-note-col {
    grid-column: 1 / -1;
}

body.vpos-pos-layout .vpos-payment-row-grid > .payment_details_div:not(.hide) {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    padding-top: 2px;
}

body.vpos-pos-layout .vpos-payment-row-grid > .payment_details_div > [class*="col-"] {
    float: none;
    width: auto;
    min-width: 0;
    padding: 0;
}

body.vpos-pos-layout .vpos-payment-note-col textarea,
body.vpos-pos-layout .vpos-pos-payment-notes textarea {
    min-height: 56px;
    height: 56px;
    resize: vertical;
}

body.vpos-pos-layout .vpos-pos-payment-add-row {
    margin: 8px 0 0;
}

body.vpos-pos-layout .vpos-pos-payment-add-row > [class*="col-"] {
    float: none;
    width: auto;
    padding: 0;
}

body.vpos-pos-layout #add-payment-row {
    min-height: 30px;
    border-radius: 8px;
    font-size: 11.5px;
    font-weight: 820;
}

body.vpos-pos-layout .vpos-pos-payment-notes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 9px 0 0;
}

body.vpos-pos-layout .vpos-pos-payment-notes::before,
body.vpos-pos-layout .vpos-pos-payment-notes::after {
    display: none;
    content: none;
}

body.vpos-pos-layout .vpos-pos-payment-notes > [class*="col-"] {
    float: none;
    width: auto;
    min-width: 0;
    padding: 0;
}

body.vpos-pos-layout .vpos-pos-payment-summary {
    position: sticky;
    top: 0;
    margin-bottom: 0;
}

body.vpos-pos-layout .vpos-pos-payment-summary .box-body {
    display: grid;
    gap: 0;
    padding: 8px 10px !important;
}

body.vpos-pos-layout .vpos-pos-payment-summary .box-body > .col-md-12 {
    float: none;
    width: auto;
    min-width: 0;
    padding: 7px 0;
}

body.vpos-pos-layout .vpos-pos-payment-summary .box-body > .col-md-12 + .col-md-12 {
    border-top: 1px solid rgba(255, 255, 255, 0.22);
}

body.vpos-pos-layout .vpos-pos-payment-summary hr {
    display: none;
}

body.vpos-pos-layout .vpos-pos-payment-summary strong {
    display: block;
    margin-bottom: 2px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 10.2px;
    font-weight: 820;
    letter-spacing: 0;
    text-transform: uppercase;
}

body.vpos-pos-layout .vpos-pos-payment-summary .lead {
    margin: 0;
    color: #ffffff;
    font-size: 17px;
    line-height: 1.12;
}

body.vpos-pos-layout .vpos-pos-payment-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

body.vpos-pos-layout .vpos-pos-payment-footer::before,
body.vpos-pos-layout .vpos-pos-payment-footer::after {
    display: none;
    content: none;
}

body.vpos-pos-layout .vpos-pos-payment-footer .btn {
    min-height: 30px;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 11.5px;
    font-weight: 820;
}

@media (max-width: 991px) {
    body.vpos-pos-layout .vpos-pos-payment-layout,
    body.vpos-pos-layout .vpos-pos-payment-notes {
        grid-template-columns: minmax(0, 1fr);
    }

    body.vpos-pos-layout .vpos-pos-payment-summary {
        position: static;
    }
}

@media (max-width: 767px) {
    body.vpos-pos-layout .vpos-pos-payment-dialog {
        width: calc(100vw - 10px);
        margin: 5px auto;
    }

    body.vpos-pos-layout .vpos-pos-payment-content {
        max-height: calc(100vh - 10px);
    }

    body.vpos-pos-layout #payment_rows_div,
    body.vpos-pos-layout .vpos-payment-row-grid,
    body.vpos-pos-layout .vpos-payment-row-grid > .payment_details_div:not(.hide) {
        grid-template-columns: minmax(0, 1fr);
    }

    body.vpos-pos-layout .vpos-pos-payment-body {
        padding: 8px;
    }

    body.vpos-pos-layout .vpos-pos-payment-footer {
        justify-content: stretch;
    }

    body.vpos-pos-layout .vpos-pos-payment-footer .btn {
        flex: 1 1 0;
    }
}

/* ============================================================
   VPOS Sales Workspace
   Scoped UI layer for sales list/detail screens. Keeps existing
   routes, DataTables setup, modal hooks, and payment actions intact.
   ============================================================ */

body.vpos-app .vpos-sales-header h1 {
    margin: 0;
}

body.vpos-app .vpos-sales-page .vpos-filter-body {
    padding: 9px 10px 7px;
}

body.vpos-app .vpos-sales-filter-grid {
    margin-right: -5px;
    margin-left: -5px;
}

body.vpos-app .vpos-sales-filter-grid::before,
body.vpos-app .vpos-sales-filter-grid::after {
    display: none;
    content: none;
}

body.vpos-app .vpos-sales-filter-grid > [class*="col-"] {
    padding-right: 5px;
    padding-left: 5px;
}

body.vpos-app .vpos-sales-filter-grid .form-group {
    margin-bottom: 7px;
}

body.vpos-app .vpos-sales-filter-grid label {
    margin-bottom: 2px;
    color: var(--vpos-text-muted);
    font-size: 10.7px;
    font-weight: 780;
}

body.vpos-app .vpos-sales-page .form-control,
body.vpos-app .vpos-sales-page .select2-container .select2-selection--single {
    min-height: 28px;
    border-color: var(--vpos-border-strong);
    border-radius: 7px;
}

body.vpos-app .vpos-sales-page .vpos-filter-check {
    min-height: 48px;
    display: flex;
    align-items: center;
    padding-top: 14px;
}

body.vpos-app .vpos-sales-page .vpos-filter-check .checkbox,
body.vpos-app .vpos-sales-page .vpos-filter-check .form-group {
    margin: 0;
}

body.vpos-app .vpos-sales-list-card .vpos-widget-header {
    align-items: center;
}

body.vpos-app .vpos-sales-add-btn {
    min-width: 110px;
    box-shadow: none !important;
}

body.vpos-app .vpos-sales-table-shell {
    overflow: visible;
    border: 1px solid var(--vpos-border);
    border-radius: 9px;
    background: var(--vpos-surface);
}

body.vpos-app .vpos-sales-page .dataTables_wrapper,
body.vpos-app .vpos-sales-page .dataTables_scroll {
    overflow: visible !important;
}

body.vpos-app .vpos-sales-page .dataTables_scrollBody {
    overflow: auto !important;
    scrollbar-width: thin;
    min-height: 210px;
}

body.vpos-app .vpos-sales-page .dataTables_scrollBody.of-visible {
    overflow: visible !important;
}

body.vpos-app table#sell_table {
    min-width: 1260px;
    margin-bottom: 0 !important;
}

body.vpos-app table#sell_table th,
body.vpos-app table#sell_table td {
    padding: 5px 7px !important;
    font-size: 11px;
    vertical-align: middle !important;
}

body.vpos-app table#sell_table th:nth-child(1),
body.vpos-app table#sell_table td:nth-child(1),
body.vpos-app table#sell_table th:nth-child(7),
body.vpos-app table#sell_table td:nth-child(7),
body.vpos-app table#sell_table th:nth-child(8),
body.vpos-app table#sell_table td:nth-child(8),
body.vpos-app table#sell_table th:nth-child(12),
body.vpos-app table#sell_table td:nth-child(12),
body.vpos-app table#sell_table th:nth-child(13),
body.vpos-app table#sell_table td:nth-child(13) {
    text-align: center;
    white-space: nowrap;
}

body.vpos-app table#sell_table th:nth-child(9),
body.vpos-app table#sell_table td:nth-child(9),
body.vpos-app table#sell_table th:nth-child(10),
body.vpos-app table#sell_table td:nth-child(10),
body.vpos-app table#sell_table th:nth-child(11),
body.vpos-app table#sell_table td:nth-child(11),
body.vpos-app table#sell_table th:nth-child(14),
body.vpos-app table#sell_table td:nth-child(14) {
    text-align: right;
    white-space: nowrap;
}

body.vpos-app table#sell_table th:nth-child(2),
body.vpos-app table#sell_table td:nth-child(2),
body.vpos-app table#sell_table th:nth-child(3),
body.vpos-app table#sell_table td:nth-child(3) {
    white-space: nowrap;
}

body.vpos-app table#sell_table td:nth-child(4),
body.vpos-app table#sell_table td:nth-child(5),
body.vpos-app table#sell_table td:nth-child(6),
body.vpos-app table#sell_table td:nth-child(21),
body.vpos-app table#sell_table td:nth-child(22),
body.vpos-app table#sell_table td:nth-child(23),
body.vpos-app table#sell_table td:nth-child(24) {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.vpos-app table#sell_table .btn-group .btn,
body.vpos-app table#sell_table .btn.dropdown-toggle {
    min-height: 25px;
    padding: 3px 8px;
    border-radius: 7px !important;
    font-size: 10.8px;
    font-weight: 780;
    line-height: 1.15;
}

body.vpos-app table#sell_table .dropdown-menu {
    z-index: 2100;
    min-width: 180px;
    padding: 5px;
}

body.vpos-app table#sell_table .dropdown-menu > li > a {
    min-height: 26px;
    padding: 5px 8px;
    border-radius: 6px;
    color: var(--vpos-text);
    font-size: 11.2px;
}

body.vpos-app table#sell_table .dropdown-menu > li > a:hover,
body.vpos-app table#sell_table .dropdown-menu > li > a:focus {
    background: var(--vpos-primary-soft);
    color: var(--vpos-primary-active);
}

/* ============================================================
   VPOS Overlay Reliability + Register Polish
   Keeps Bootstrap/AdminLTE behavior intact while making header
   dropdowns, popovers, notifications, and AJAX modals visible.
   ============================================================ */

body.vpos-app .main-header.vpos-header,
body.vpos-app .main-header.vpos-header .navbar,
body.vpos-app .main-header.vpos-header .vpos-navbar,
body.vpos-app .navbar-custom-menu.vpos-navbar-actions,
body.vpos-app .vpos-header-action,
body.vpos-app .vpos-user-nav,
body.vpos-app .vpos-user-nav > li,
body.vpos-app .notifications-menu,
body.vpos-app .vpos-user-menu,
body.vpos-pos-layout .vpos-pos-header,
body.vpos-pos-layout .vpos-pos-header-inner,
body.vpos-pos-layout .vpos-pos-header-actions {
    overflow: visible !important;
}

body.vpos-app .main-header.vpos-header {
    z-index: var(--vpos-z-header);
}

body.vpos-admin-layout .navbar-custom-menu.vpos-navbar-actions {
    position: relative;
    overflow: visible !important;
}

body.vpos-app .dropdown-menu,
body.vpos-app .popover,
body.vpos-app .datepicker,
body.vpos-app .daterangepicker,
body.vpos-app .bootstrap-datetimepicker-widget {
    z-index: var(--vpos-z-dropdown) !important;
}

body.vpos-app .select2-container--open,
body.vpos-app .select2-dropdown,
body.vpos-app .ui-autocomplete {
    z-index: var(--vpos-z-modal-dropdown) !important;
}

body.vpos-app .modal-backdrop {
    z-index: var(--vpos-z-modal-backdrop) !important;
    background: rgba(15, 23, 42, 0.62);
}

body.vpos-app .modal-backdrop.in {
    opacity: 1;
}

body.vpos-app .modal {
    position: fixed !important;
    z-index: var(--vpos-z-modal) !important;
    overflow-x: hidden;
    overflow-y: auto;
}

body.vpos-app .modal-dialog {
    position: relative;
    z-index: 1;
    pointer-events: auto;
}

body.vpos-app .modal-content {
    background: var(--vpos-surface);
}

body.vpos-app .vpos-header-dropdown,
body.vpos-app .notifications-menu > .dropdown-menu,
body.vpos-app .vpos-user-dropdown {
    top: calc(100% + 7px);
    right: 0;
    left: auto;
    min-width: 220px;
    max-width: min(380px, calc(100vw - 18px));
    max-height: calc(100vh - var(--vpos-header-height) - 18px);
    padding: 6px;
    overflow-x: hidden;
    overflow-y: auto;
    border: 1px solid var(--vpos-border-strong);
    border-radius: 10px;
    background: var(--vpos-surface);
    color: var(--vpos-text);
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.22);
}

body.vpos-app .vpos-header-dropdown > li > a,
body.vpos-app .notifications-menu > .dropdown-menu a,
body.vpos-app .vpos-user-dropdown a {
    color: var(--vpos-text);
}

body.vpos-app .vpos-header-dropdown > li > a {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 30px;
    padding: 7px 9px;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 720;
    line-height: 1.25;
}

body.vpos-app .vpos-header-dropdown > li > a i {
    width: 16px;
    color: var(--vpos-primary);
    text-align: center;
}

body.vpos-app .vpos-header-dropdown > li > a:hover,
body.vpos-app .vpos-header-dropdown > li > a:focus,
body.vpos-app .vpos-user-dropdown a:hover,
body.vpos-app .vpos-user-dropdown a:focus,
body.vpos-app .notifications-menu > .dropdown-menu a:hover,
body.vpos-app .notifications-menu > .dropdown-menu a:focus {
    background: var(--vpos-primary-soft);
    color: var(--vpos-primary-active);
}

body.vpos-app .notifications-menu {
    position: relative;
}

body.vpos-app .notifications-menu > .dropdown-menu {
    width: min(380px, calc(100vw - 18px));
    padding: 0;
}

body.vpos-app .notifications-menu > .dropdown-menu > li {
    display: block;
}

body.vpos-app .notifications-menu > .dropdown-menu .menu {
    max-height: 360px;
    padding: 6px;
    overflow-y: auto;
    background: var(--vpos-surface);
}

body.vpos-app .notifications-menu > .dropdown-menu .menu > li > a {
    display: block;
    min-height: 34px;
    padding: 8px 9px;
    border-radius: 8px;
    white-space: normal;
}

body.vpos-app .notifications-menu > .dropdown-menu .footer > a,
body.vpos-app .notifications-menu > .dropdown-menu .load_more_notifications {
    display: block;
    padding: 9px 10px;
    border-top: 1px solid var(--vpos-border);
    text-align: center;
    font-size: 11.5px;
    font-weight: 780;
}

body.vpos-app .notifications-menu .label.notifications_count {
    min-width: 15px;
    min-height: 15px;
    padding: 2px 4px;
    background: var(--vpos-danger) !important;
    color: #ffffff;
}

body.vpos-app .vpos-user-menu {
    position: relative;
}

body.vpos-app .vpos-user-dropdown {
    width: 250px;
    padding: 0;
    overflow: hidden;
}

body.vpos-app .vpos-user-header {
    min-height: 118px;
    padding: 16px 14px 12px;
    border-bottom: 1px solid var(--vpos-border);
    background:
        radial-gradient(circle at top left, var(--vpos-primary-soft), transparent 62%),
        linear-gradient(180deg, var(--vpos-surface) 0%, var(--vpos-surface-muted) 100%);
    color: var(--vpos-text-strong);
}

body.vpos-app .vpos-user-header p {
    margin: 8px 0 0;
    color: var(--vpos-text-strong);
    font-size: 13px;
    font-weight: 820;
}

body.vpos-app .vpos-user-footer {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 10px;
    background: var(--vpos-surface);
}

body.vpos-app .vpos-user-footer::before,
body.vpos-app .vpos-user-footer::after {
    display: none;
    content: none;
}

body.vpos-app .vpos-user-footer .pull-left,
body.vpos-app .vpos-user-footer .pull-right {
    float: none !important;
}

body.vpos-app .vpos-user-footer .btn {
    min-height: 29px;
    padding: 6px 10px;
    border-color: var(--vpos-border-strong);
    border-radius: 7px !important;
    background: var(--vpos-surface-muted);
    color: var(--vpos-text-strong);
    font-size: 11.5px;
    font-weight: 800;
}

body.vpos-app .popover {
    border: 1px solid var(--vpos-border-strong);
    background: var(--vpos-surface);
    color: var(--vpos-text);
}

body.vpos-app .popover-title {
    min-height: 34px;
    padding: 9px 11px;
    border-bottom: 1px solid var(--vpos-border);
    background: var(--vpos-surface-muted);
    color: var(--vpos-text-strong);
    font-size: 13px;
    font-weight: 820;
}

body.vpos-app .popover-content {
    padding: 10px;
}

body.vpos-app .popover #calculator {
    width: 184px;
    max-width: 184px;
}

body.vpos-app .popover #calculator .row {
    margin-right: 0;
    margin-left: 0;
}

body.vpos-app .popover #calculator .calcBG {
    width: 100%;
    padding: 0;
}

body.vpos-app .popover #calculator .screen {
    width: 100%;
    height: 32px;
    margin-bottom: 6px;
    padding: 5px 7px;
    border: 1px solid #9fb1c3;
    border-radius: 6px;
    background: #e7eef6;
    color: #0f172a;
    font-size: 15px;
    font-weight: 800;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.12);
}

body.vpos-app .popover #calculator .btn {
    width: 38px;
    height: 32px;
    margin: 2px;
    padding: 0;
    border: 1px solid var(--vpos-border);
    border-radius: 7px !important;
    background: #eef3f8 !important;
    color: #172033 !important;
    font-size: 12px;
    font-weight: 840;
    opacity: 1 !important;
    box-shadow: none;
}

body.vpos-app .popover #calculator .btn:hover,
body.vpos-app .popover #calculator .btn:focus {
    border-color: var(--vpos-primary);
    background: var(--vpos-primary-soft) !important;
    color: var(--vpos-primary-active) !important;
}

body.vpos-app .popover #calculator .btn-danger {
    border-color: color-mix(in srgb, var(--vpos-danger) 70%, #ffffff);
    background: var(--vpos-danger) !important;
    color: #ffffff !important;
}

body.vpos-app .popover #calculator .btn-warning {
    border-color: color-mix(in srgb, var(--vpos-warning) 72%, #ffffff);
    background: var(--vpos-warning) !important;
    color: #ffffff !important;
}

body.vpos-app .popover #calculator .btn-success {
    border-color: var(--vpos-primary-active);
    background: var(--vpos-primary) !important;
    color: #ffffff !important;
}

body.vpos-app .popover #calculator #blank {
    visibility: hidden;
}

body.vpos-app .register_details_modal .vpos-register-details-dialog,
body.vpos-app .close_register_modal .modal-dialog {
    width: calc(100% - 24px);
    max-width: 1020px;
    margin: 12px auto;
}

body.vpos-app .register_details_modal .vpos-register-details-modal,
body.vpos-app .close_register_modal .modal-content {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 24px);
    overflow: hidden;
}

body.vpos-app .register_details_modal .vpos-register-details-header,
body.vpos-app .register_details_modal .vpos-register-details-footer,
body.vpos-app .close_register_modal .modal-header,
body.vpos-app .close_register_modal .modal-footer {
    flex: 0 0 auto;
}

body.vpos-app .register_details_modal .vpos-register-details-body,
body.vpos-app .close_register_modal .modal-body {
    flex: 1 1 auto;
    max-height: calc(100vh - 146px);
    overflow: auto;
    background: var(--vpos-bg-subtle);
}

body.vpos-app .register_details_modal .table,
body.vpos-app .close_register_modal .table {
    margin-bottom: 8px;
    background: var(--vpos-surface);
}

body.vpos-app .register_details_modal .table > thead > tr > th,
body.vpos-app .register_details_modal .table > tbody > tr > th,
body.vpos-app .register_details_modal .table > tbody > tr > td,
body.vpos-app .close_register_modal .table > thead > tr > th,
body.vpos-app .close_register_modal .table > tbody > tr > th,
body.vpos-app .close_register_modal .table > tbody > tr > td {
    padding: 6px 8px;
    border-color: var(--vpos-border);
    font-size: 11.5px;
    vertical-align: middle;
}

body.vpos-app .vpos-register-details-footer {
    justify-content: flex-end;
    gap: 7px;
}

body.vpos-app .vpos-register-details-action {
    min-height: 30px;
    margin: 0;
    padding: 6px 11px;
    border-radius: 7px !important;
    font-size: 11.5px;
    font-weight: 800;
}

body.vpos-auth-page .vpos-register-card {
    border: 1px solid rgba(148, 163, 184, 0.34);
    border-radius: 16px;
    background: var(--vpos-surface);
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.12);
}

body.vpos-auth-page .vpos-register-header {
    border-bottom-color: var(--vpos-border);
    background:
        radial-gradient(circle at top left, color-mix(in srgb, var(--vpos-primary) 16%, transparent), transparent 42%),
        radial-gradient(circle at top right, rgba(14, 165, 233, 0.14), transparent 40%),
        linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
}

body.vpos-auth-page .vpos-register-subtitle {
    display: block;
    color: var(--vpos-text-muted);
    font-size: 12px;
}

body.vpos-auth-page .vpos-register-body {
    background:
        linear-gradient(180deg, rgba(248, 250, 252, 0.76) 0%, rgba(255, 255, 255, 0) 90%),
        var(--vpos-surface);
}

body.vpos-auth-page #business_register_form fieldset,
body.vpos-auth-page .vpos-legacy-register-card fieldset {
    border-left-width: 3px;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.04);
}

body.vpos-auth-page #business_register_form fieldset:nth-of-type(3n + 1),
body.vpos-auth-page .vpos-legacy-register-card fieldset:nth-of-type(3n + 1) {
    border-left-color: var(--vpos-primary);
}

body.vpos-auth-page #business_register_form fieldset:nth-of-type(3n + 2),
body.vpos-auth-page .vpos-legacy-register-card fieldset:nth-of-type(3n + 2) {
    border-left-color: var(--vpos-info);
}

body.vpos-auth-page #business_register_form fieldset:nth-of-type(3n),
body.vpos-auth-page .vpos-legacy-register-card fieldset:nth-of-type(3n) {
    border-left-color: var(--vpos-warning);
}

body.vpos-auth-page #business_register_form legend,
body.vpos-auth-page .vpos-legacy-register-card legend {
    letter-spacing: 0;
}

@media (max-width: 767px) {
    body.vpos-app .vpos-header-dropdown,
    body.vpos-app .notifications-menu > .dropdown-menu,
    body.vpos-app .vpos-user-dropdown {
        position: fixed;
        top: calc((var(--vpos-header-height) * 2) + 6px);
        right: 8px;
        left: auto;
        width: calc(100vw - 16px);
        max-width: calc(100vw - 16px);
    }

    body.vpos-app .register_details_modal .vpos-register-details-dialog,
    body.vpos-app .close_register_modal .modal-dialog {
        width: 100%;
        margin: 0;
    }

    body.vpos-app .register_details_modal .vpos-register-details-modal,
    body.vpos-app .close_register_modal .modal-content {
        min-height: 100vh;
        max-height: 100vh;
        border-radius: 0;
    }

    body.vpos-app .register_details_modal .vpos-register-details-body,
    body.vpos-app .close_register_modal .modal-body {
        max-height: calc(100vh - 118px);
    }
}

body.vpos-app table#sell_table tfoot .footer-total td {
    border-top: 1px solid var(--vpos-border-strong);
    background: var(--vpos-surface-muted) !important;
    color: var(--vpos-text-strong);
    font-size: 12px;
    font-weight: 820;
}

body.vpos-app .vpos-payment-status-link {
    display: inline-flex;
    text-decoration: none;
}

body.vpos-app .vpos-payment-status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 20px;
    padding: 4px 8px;
    border-radius: 999px !important;
    font-size: 10.3px;
    line-height: 1;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.24);
}

body.vpos-app .vpos-sale-detail-dialog {
    width: calc(100% - 32px);
    max-width: 1180px;
    margin: 18px auto;
}

body.vpos-app .vpos-sale-detail-modal {
    overflow: hidden;
    border: 1px solid var(--vpos-border);
    border-radius: 12px;
    background: var(--vpos-surface);
    box-shadow: var(--vpos-shadow-lg);
}

body.vpos-app .vpos-sale-detail-header {
    min-height: 46px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--vpos-border);
    background:
        linear-gradient(135deg, var(--vpos-primary-active), var(--vpos-primary));
    color: #ffffff;
}

body.vpos-app .vpos-sale-detail-title {
    color: #ffffff;
    font-size: 14px;
    font-weight: 840;
    line-height: 1.25;
}

body.vpos-app .vpos-sale-detail-close {
    color: #ffffff;
    opacity: 0.9;
    text-shadow: none;
}

body.vpos-app .vpos-sale-detail-close:hover,
body.vpos-app .vpos-sale-detail-close:focus {
    opacity: 1;
}

body.vpos-app .vpos-sale-detail-body {
    max-height: calc(100vh - 150px);
    overflow-y: auto;
    padding: 12px;
    background: var(--vpos-bg-subtle);
}

body.vpos-app .vpos-sale-detail-datebar {
    margin-right: 0;
    margin-left: 0;
}

body.vpos-app .vpos-sale-detail-date {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 8px;
    padding: 4px 8px;
    border: 1px solid var(--vpos-border);
    border-radius: 999px;
    background: var(--vpos-surface);
    color: var(--vpos-text-muted);
    font-size: 11px;
}

body.vpos-app .vpos-sale-detail-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 8px;
    margin-right: 0;
    margin-left: 0;
}

body.vpos-app .vpos-sale-detail-summary-grid::before,
body.vpos-app .vpos-sale-detail-summary-grid::after {
    display: none;
    content: none;
}

body.vpos-app .vpos-sale-detail-summary-grid > [class*="col-"] {
    float: none;
    width: auto;
    min-width: 0;
    padding: 9px 10px;
    border: 1px solid var(--vpos-border);
    border-radius: 10px;
    background: var(--vpos-surface);
    color: var(--vpos-text);
    box-shadow: var(--vpos-shadow-sm);
}

body.vpos-app .vpos-sale-detail-card {
    position: relative;
    line-height: 1.48;
}

body.vpos-app .vpos-sale-detail-card::before {
    position: absolute;
    top: 10px;
    bottom: 10px;
    left: 0;
    width: 3px;
    border-radius: 999px;
    background: var(--vpos-primary);
    content: "";
}

body.vpos-app .vpos-sale-detail-card b,
body.vpos-app .vpos-sale-detail-card strong {
    color: var(--vpos-text-strong);
    font-weight: 820;
}

body.vpos-app .vpos-sale-detail-section {
    margin-top: 10px;
}

body.vpos-app .vpos-sale-detail-section-title {
    margin: 0 0 7px;
    color: var(--vpos-text-strong);
    font-size: 13px;
    font-weight: 840;
}

body.vpos-app .vpos-sale-detail-table-shell {
    overflow: auto;
    border: 1px solid var(--vpos-border);
    border-radius: 9px;
    background: var(--vpos-surface);
}

body.vpos-app .vpos-sale-detail-table-shell .table {
    margin-bottom: 0;
    background: var(--vpos-surface) !important;
}

body.vpos-app .vpos-sale-detail-table-shell .table > tbody > tr > th,
body.vpos-app .vpos-sale-detail-table-shell .table > tbody > tr > td,
body.vpos-app .vpos-sale-detail-table-shell .table > tr > th,
body.vpos-app .vpos-sale-detail-table-shell .table > tr > td {
    padding: 6px 8px;
    border-color: var(--vpos-border);
    font-size: 11.2px;
    vertical-align: middle;
}

body.vpos-app .vpos-sale-detail-table-shell .table tr.bg-green > th,
body.vpos-app .vpos-sale-detail-table-shell .table tr.bg-green > td {
    border-color: var(--vpos-primary);
    background: var(--vpos-primary) !important;
    color: #ffffff;
}

body.vpos-app .vpos-sale-totals-table th {
    width: 52%;
    color: var(--vpos-text-strong);
}

body.vpos-app .vpos-sale-totals-table tr:last-child th,
body.vpos-app .vpos-sale-totals-table tr:last-child td {
    border-top: 1px solid var(--vpos-border-strong);
    background: var(--vpos-primary-soft);
    color: var(--vpos-primary-active);
    font-weight: 850;
}

body.vpos-app .vpos-sale-detail-notes,
body.vpos-app .vpos-sale-detail-activity {
    margin-top: 10px;
}

body.vpos-app .vpos-sale-note {
    min-height: 52px;
    margin-top: 4px;
    border: 1px solid var(--vpos-border);
    border-radius: 9px;
    background: var(--vpos-surface) !important;
    color: var(--vpos-text);
}

body.vpos-app .vpos-sale-detail-activity > .col-md-12 {
    padding: 9px 10px;
    border: 1px solid var(--vpos-border);
    border-radius: 9px;
    background: var(--vpos-surface);
}

body.vpos-app .vpos-sale-detail-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
    padding: 10px 12px;
    border-top: 1px solid var(--vpos-border);
    background: var(--vpos-surface);
}

body.vpos-app .vpos-sale-detail-action {
    min-height: 28px;
    margin: 0 !important;
    padding: 5px 10px;
    border-radius: 7px !important;
    font-size: 11.3px;
    font-weight: 780;
}

@media (max-width: 991px) {
    body.vpos-app .vpos-sale-detail-dialog {
        width: calc(100% - 16px);
        margin: 8px auto;
    }

    body.vpos-app .vpos-sale-detail-body {
        max-height: calc(100vh - 124px);
    }

    body.vpos-app table#sell_table {
        min-width: 1120px;
    }
}

@media (max-width: 767px) {
    body.vpos-app .vpos-sales-page .dataTables_wrapper .dt-buttons,
    body.vpos-app .vpos-sales-page .dataTables_wrapper .dataTables_filter,
    body.vpos-app .vpos-sales-page .dataTables_wrapper .dataTables_length {
        width: 100%;
        text-align: left;
    }

    body.vpos-app .vpos-sale-detail-dialog {
        width: 100%;
        margin: 0;
    }

    body.vpos-app .vpos-sale-detail-modal {
        min-height: 100vh;
        border-radius: 0;
    }

    body.vpos-app .vpos-sale-detail-body {
        max-height: calc(100vh - 105px);
        padding: 9px;
    }

    body.vpos-app .vpos-sale-detail-summary-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    body.vpos-app .vpos-sale-detail-footer {
        justify-content: stretch;
    }

    body.vpos-app .vpos-sale-detail-footer .btn {
        flex: 1 1 auto;
    }
}

body.vpos-app #toast-container {
    z-index: var(--vpos-z-toast) !important;
}

body.vpos-app #toast-container.toast-top-right {
    top: calc(var(--vpos-header-height) + 8px);
    right: 12px;
}

body.vpos-app #toast-container > .toast {
    width: min(320px, calc(100vw - 24px));
    min-height: 44px;
    padding: 10px 12px 10px 44px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 9px;
    box-shadow: var(--vpos-shadow-lg);
    opacity: 0.98;
    cursor: pointer;
}

body.vpos-app #toast-container > .toast:hover {
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.24);
}

body.vpos-app #toast-container > .toast-success {
    background-color: var(--vpos-success) !important;
}

body.vpos-app #toast-container > .toast-warning {
    background-color: var(--vpos-warning) !important;
}

body.vpos-app #toast-container > .toast-error {
    background-color: var(--vpos-danger) !important;
}

body.vpos-app #toast-container .toast-close-button {
    top: -3px;
    right: -3px;
    color: #ffffff;
    opacity: 0.86;
    text-shadow: none;
}

body.vpos-app #toast-container .toast-progress {
    height: 3px;
    background-color: rgba(255, 255, 255, 0.62);
    opacity: 1;
}

body.vpos-pos-layout .vpos-pos-payment-dialog {
    width: min(980px, calc(100% - 24px));
    max-width: 980px;
    margin: 8px auto;
}

body.vpos-pos-layout .vpos-pos-payment-content {
    display: flex;
    max-height: calc(100vh - 16px);
    flex-direction: column;
}

body.vpos-pos-layout .vpos-pos-payment-header {
    min-height: 38px;
    padding: 8px 12px;
}

body.vpos-pos-layout .vpos-pos-payment-header .modal-title {
    font-size: 14px;
    font-weight: 820;
}

body.vpos-pos-layout .vpos-pos-payment-body {
    flex: 1 1 auto;
    overflow: auto;
    padding: 10px 12px;
}

body.vpos-pos-layout .vpos-pos-payment-footer {
    padding: 8px 12px;
}

body.vpos-pos-layout .vpos-pos-payment-layout {
    display: grid;
    grid-template-areas:
        "advance summary"
        "main summary";
    grid-template-columns: minmax(0, 1fr) 260px;
    align-items: start;
    gap: 10px;
}

body.vpos-pos-layout .vpos-pos-payment-advance,
body.vpos-pos-layout .vpos-pos-payment-main,
body.vpos-pos-layout .vpos-pos-payment-side {
    float: none;
    width: auto;
    min-width: 0;
    padding: 0;
}

body.vpos-pos-layout .vpos-pos-payment-advance {
    grid-area: advance;
    min-height: 24px;
    margin: 0;
    color: var(--vpos-text-muted);
    font-size: 12px;
}

body.vpos-pos-layout .vpos-pos-payment-main {
    grid-area: main;
}

body.vpos-pos-layout .vpos-pos-payment-main > .row {
    margin-right: 0;
    margin-left: 0;
}

body.vpos-pos-layout .vpos-pos-payment-main > .row::before,
body.vpos-pos-layout .vpos-pos-payment-main > .row::after,
body.vpos-pos-layout .vpos-payment-row-grid::before,
body.vpos-pos-layout .vpos-payment-row-grid::after,
body.vpos-pos-layout .vpos-pos-payment-notes::before,
body.vpos-pos-layout .vpos-pos-payment-notes::after {
    display: none;
    content: none;
}

body.vpos-pos-layout #payment_rows_div {
    display: grid;
    gap: 8px;
}

body.vpos-pos-layout .vpos-payment-row-shell,
body.vpos-pos-layout .vpos-pos-payment-add-row > .col-md-12,
body.vpos-pos-layout .vpos-pos-payment-change-return > .col-md-12,
body.vpos-pos-layout .vpos-pos-payment-summary .box-body > .col-md-12 {
    float: none;
    width: 100%;
    min-width: 0;
    padding: 0;
}

body.vpos-pos-layout .vpos-payment-row-card {
    margin: 0;
    border: 1px solid var(--vpos-border);
    border-radius: 10px;
    background: var(--vpos-surface) !important;
    box-shadow: var(--vpos-shadow-sm);
}

body.vpos-pos-layout .vpos-payment-row-card .box-header {
    min-height: 26px;
    padding: 3px 7px;
    border-bottom: 1px solid var(--vpos-border);
    background: var(--vpos-surface-muted);
}

body.vpos-pos-layout .vpos-payment-row-card .btn-box-tool {
    padding: 1px 5px;
    color: var(--vpos-danger);
}

body.vpos-pos-layout .vpos-payment-row-body {
    padding: 9px 10px;
}

body.vpos-pos-layout .vpos-payment-row-grid {
    display: grid;
    grid-template-columns: minmax(130px, 0.9fr) minmax(150px, 1fr) minmax(180px, 1.1fr);
    align-items: start;
    gap: 8px;
    margin-right: 0;
    margin-left: 0;
}

body.vpos-pos-layout .vpos-payment-row-grid > [class*="col-"] {
    float: none;
    width: auto;
    min-width: 0;
    padding: 0;
}

body.vpos-pos-layout .vpos-payment-row-grid .clearfix {
    display: none;
}

body.vpos-pos-layout .vpos-payment-row-grid .form-group {
    margin-bottom: 0;
}

body.vpos-pos-layout .vpos-payment-row-grid label,
body.vpos-pos-layout .vpos-pos-payment-notes label {
    margin-bottom: 3px;
    color: var(--vpos-text-strong);
    font-size: 11.2px;
    font-weight: 760;
}

body.vpos-pos-layout .vpos-payment-row-grid .input-group-addon {
    min-width: 32px;
    padding: 5px 8px;
    border-color: var(--vpos-border-strong);
    background: var(--vpos-surface-muted);
}

body.vpos-pos-layout .vpos-payment-row-grid .form-control,
body.vpos-pos-layout .vpos-payment-row-grid .select2-container .select2-selection--single {
    min-height: 31px;
    height: 31px;
    font-size: 12px;
}

body.vpos-pos-layout .vpos-payment-row-grid .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 29px;
}

body.vpos-pos-layout .vpos-payment-row-grid .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 29px;
}

body.vpos-pos-layout .vpos-payment-note-col {
    grid-column: 1 / -1;
}

body.vpos-pos-layout .vpos-payment-note-col textarea {
    min-height: 48px;
    height: 48px;
    resize: vertical;
}

body.vpos-pos-layout .vpos-pos-payment-add-row {
    margin-top: 8px;
}

body.vpos-pos-layout #add-payment-row {
    min-height: 30px;
    padding: 6px 10px;
    border-radius: 8px !important;
    font-size: 12px;
    font-weight: 780;
}

body.vpos-pos-layout .vpos-pos-payment-change-return {
    margin-top: 8px;
    margin-right: 0;
    margin-left: 0;
}

body.vpos-pos-layout .vpos-pos-payment-notes {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px;
    margin: 9px 0 0;
}

body.vpos-pos-layout .vpos-pos-payment-notes > [class*="col-"] {
    float: none;
    width: auto;
    min-width: 0;
    padding: 0;
}

body.vpos-pos-layout .vpos-pos-payment-notes .form-group {
    margin-bottom: 0;
}

body.vpos-pos-layout .vpos-pos-payment-notes textarea {
    min-height: 50px;
    height: 50px;
    resize: vertical;
}

body.vpos-pos-layout .vpos-pos-payment-side {
    position: sticky;
    top: 0;
    grid-area: summary;
    align-self: start;
}

body.vpos-pos-layout .vpos-pos-payment-summary {
    margin: 0;
}

body.vpos-pos-layout .vpos-pos-payment-summary .box-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
    padding: 10px;
}

body.vpos-pos-layout .vpos-pos-payment-summary hr {
    margin: 4px 0 0;
}

body.vpos-pos-layout .vpos-pos-payment-summary strong {
    font-size: 11px;
    letter-spacing: 0;
}

body.vpos-pos-layout .vpos-pos-payment-summary .lead {
    display: block;
    margin: 1px 0 0;
    font-size: 17px;
    line-height: 1.1;
}

@media (max-width: 991px) {
    body.vpos-pos-layout .vpos-pos-payment-dialog {
        width: calc(100% - 16px);
        margin: 8px auto;
    }

    body.vpos-pos-layout .vpos-pos-payment-layout {
        grid-template-areas:
            "advance"
            "main"
            "summary";
        grid-template-columns: minmax(0, 1fr);
    }

    body.vpos-pos-layout .vpos-pos-payment-side {
        position: static;
    }

    body.vpos-pos-layout .vpos-pos-payment-summary .box-body {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    body.vpos-pos-layout .vpos-payment-row-grid,
    body.vpos-pos-layout .vpos-pos-payment-notes,
    body.vpos-pos-layout .vpos-pos-payment-summary .box-body {
        grid-template-columns: minmax(0, 1fr);
    }

    body.vpos-pos-layout .vpos-pos-payment-footer {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 7px;
    }

    body.vpos-pos-layout .vpos-pos-payment-footer .btn {
        width: 100%;
        margin-left: 0;
    }
}

body.vpos-app .vpos-report-page .box,
body.vpos-app .vpos-report-page .vpos-card {
    border: 1px solid var(--vpos-border);
    border-radius: 10px;
    background: var(--vpos-surface);
    box-shadow: var(--vpos-shadow-sm);
}

body.vpos-app .vpos-report-filter-form .form-group {
    margin-bottom: 8px;
}

body.vpos-app .vpos-report-checkbox {
    display: flex;
    min-height: 52px;
    align-items: flex-end;
    padding-bottom: 3px;
}

body.vpos-app .vpos-stock-value-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin: 0 0 10px;
}

body.vpos-app .vpos-stock-value-strip::before,
body.vpos-app .vpos-stock-value-strip::after {
    display: none;
    content: none;
}

body.vpos-app .vpos-stock-value-strip > [class*="col-"] {
    float: none;
    width: auto;
    min-width: 0;
    padding: 0;
}

body.vpos-app .vpos-stock-value-card {
    min-height: 64px;
    padding: 10px 12px;
    border: 1px solid color-mix(in srgb, var(--vpos-primary) 18%, var(--vpos-border));
    border-radius: 9px;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--vpos-primary) 10%, #ffffff), #ffffff 66%),
        var(--vpos-surface);
    box-shadow: var(--vpos-shadow-sm);
}

body.vpos-app .vpos-stock-value-card span {
    display: block;
    color: var(--vpos-text-muted);
    font-size: 11px;
    font-weight: 760;
    line-height: 1.25;
}

body.vpos-app .vpos-stock-value-card small {
    display: block;
    margin-top: 1px;
    color: var(--vpos-text-muted);
    font-size: 10px;
    font-weight: 650;
}

body.vpos-app .vpos-stock-value-card strong {
    display: block;
    margin-top: 5px;
    color: var(--vpos-text-strong);
    font-size: 17px;
    font-weight: 860;
    line-height: 1.15;
}

body.vpos-app .vpos-stock-report-card .box-header,
body.vpos-app .vpos-stock-report-card .vpos-card-header {
    min-height: 34px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--vpos-border);
    background: var(--vpos-surface-muted);
}

body.vpos-app .vpos-stock-report-card .box-title {
    color: var(--vpos-text-strong);
    font-size: 13px;
    font-weight: 840;
}

body.vpos-app .vpos-stock-report-card .box-body,
body.vpos-app .vpos-stock-report-card .vpos-card-body {
    padding: 9px;
}

body.vpos-app .vpos-stock-report-table-shell {
    overflow: auto;
    border-color: var(--vpos-border);
}

body.vpos-app table#stock_report_table {
    min-width: 1320px;
}

body.vpos-app table#stock_report_table > thead > tr > th {
    color: var(--vpos-text-strong);
    font-size: 11px;
    line-height: 1.18;
    white-space: normal;
}

body.vpos-app table#stock_report_table > tbody > tr > td,
body.vpos-app table#stock_report_table > tfoot > tr > td {
    font-size: 11.2px;
    line-height: 1.25;
}

body.vpos-app table#stock_report_table .vpos-col-actions,
body.vpos-app table#stock_report_table .vpos-col-sku,
body.vpos-app table#stock_report_table .vpos-col-stock,
body.vpos-app table#stock_report_table .vpos-col-number,
body.vpos-app table#stock_report_table .vpos-col-money {
    white-space: nowrap;
}

body.vpos-app table#stock_report_table .vpos-col-stock,
body.vpos-app table#stock_report_table .vpos-col-number,
body.vpos-app table#stock_report_table .vpos-col-money {
    text-align: right;
}

body.vpos-app table#stock_report_table .vpos-col-actions {
    width: 132px;
    min-width: 132px;
    text-align: center;
}

body.vpos-app table#stock_report_table .vpos-col-actions .btn,
body.vpos-app table#stock_report_table td:first-child .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 112px;
    max-width: 126px;
    min-height: 24px;
    padding: 4px 8px;
    border: 1px solid color-mix(in srgb, var(--vpos-primary) 72%, #000000);
    border-radius: 7px;
    background: var(--vpos-primary) !important;
    color: var(--vpos-on-primary, #ffffff) !important;
    font-size: 10.5px;
    font-weight: 780;
    line-height: 1.15;
    text-align: center;
    text-decoration: none;
    white-space: normal;
    box-shadow: 0 6px 14px rgba(15, 118, 110, 0.18);
}

body.vpos-app table#stock_report_table .vpos-col-actions .btn i,
body.vpos-app table#stock_report_table td:first-child .btn i {
    color: inherit !important;
}

body.vpos-app table#stock_report_table .vpos-col-actions .btn:hover,
body.vpos-app table#stock_report_table .vpos-col-actions .btn:focus,
body.vpos-app table#stock_report_table td:first-child .btn:hover,
body.vpos-app table#stock_report_table td:first-child .btn:focus {
    background: var(--vpos-primary-strong, color-mix(in srgb, var(--vpos-primary) 84%, #000000)) !important;
    color: var(--vpos-on-primary, #ffffff) !important;
    border-color: var(--vpos-primary-strong, color-mix(in srgb, var(--vpos-primary) 84%, #000000));
}

body.vpos-app table#stock_report_table .vpos-col-product {
    min-width: 160px;
}

body.vpos-app table#stock_report_table .vpos-col-location,
body.vpos-app table#stock_report_table .vpos-col-category {
    min-width: 120px;
}

body.vpos-app .vpos-report-chart-panel .box-body,
body.vpos-app .vpos-report-chart-panel .vpos-widget-body,
body.vpos-app .vpos-report-chart-shell {
    min-height: 320px;
}

body.vpos-app .vpos-report-chart-shell > div,
body.vpos-app .vpos-report-chart-panel .highcharts-container {
    width: 100% !important;
}

body.vpos-app .vpos-report-table {
    margin-bottom: 0;
}

body.vpos-app .register_details_modal .vpos-register-details-title {
    display: grid;
    gap: 2px;
    margin: 0;
    color: var(--vpos-text-strong);
    font-size: 15px;
    font-weight: 860;
    line-height: 1.25;
}

body.vpos-app .register_details_modal .vpos-register-details-title span {
    color: var(--vpos-text-muted);
    font-size: 11px;
    font-weight: 650;
}

body.vpos-app .vpos-register-details-section,
body.vpos-app .vpos-register-meta-card {
    border: 1px solid var(--vpos-border);
    border-radius: 9px;
    background: var(--vpos-surface);
    box-shadow: var(--vpos-shadow-sm);
}

body.vpos-app .vpos-register-details-section {
    padding: 8px;
}

body.vpos-app .vpos-register-details-payments > .row {
    margin: 0;
}

body.vpos-app .vpos-register-details-payments > .row > .col-sm-12 {
    float: none;
    width: 100%;
    padding: 0;
}

body.vpos-app .vpos-register-details-payments hr {
    margin: 8px 0;
}

body.vpos-app .vpos-register-section-title {
    margin: 2px 0 8px;
    color: var(--vpos-text-strong);
    font-size: 13px;
    font-weight: 840;
}

body.vpos-app .vpos-register-denomination-row {
    margin-right: 0;
    margin-left: 0;
}

body.vpos-app .vpos-register-denomination-row > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
}

body.vpos-app .vpos-register-meta-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 9px 0 0;
}

body.vpos-app .vpos-register-meta-row::before,
body.vpos-app .vpos-register-meta-row::after {
    display: none;
    content: none;
}

body.vpos-app .vpos-register-meta-row > [class*="col-"] {
    float: none;
    width: auto;
    min-width: 0;
    padding: 9px 10px;
}

body.vpos-app .vpos-register-meta-card {
    color: var(--vpos-text);
    font-size: 11.5px;
    line-height: 1.55;
}

body.vpos-app .vpos-register-meta-card b,
body.vpos-app .vpos-register-meta-card strong {
    color: var(--vpos-text-strong);
}

body.vpos-pos-layout .vpos-pos-custom-pay-notes-dialog {
    width: calc(100% - 24px);
    max-width: 640px;
    margin: 12px auto;
}

body.vpos-pos-layout .vpos-pos-custom-pay-notes-content {
    overflow: hidden;
    border: 1px solid var(--vpos-border);
    border-radius: 12px;
    background: var(--vpos-surface);
    box-shadow: var(--vpos-shadow-lg);
}

body.vpos-pos-layout .vpos-pos-custom-pay-notes-header,
body.vpos-pos-layout .vpos-pos-custom-pay-notes-footer {
    min-height: 42px;
    padding: 9px 12px;
    border-color: var(--vpos-border);
    background: var(--vpos-surface-muted);
}

body.vpos-pos-layout .vpos-pos-custom-pay-notes-header .modal-title {
    color: var(--vpos-text-strong);
    font-size: 14px;
    font-weight: 850;
}

body.vpos-pos-layout .vpos-pos-custom-pay-notes-body {
    padding: 12px;
}

body.vpos-pos-layout .vpos-pos-custom-pay-notes-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
    padding: 9px 10px;
    border: 1px solid color-mix(in srgb, var(--vpos-primary) 22%, var(--vpos-border));
    border-radius: 9px;
    background: var(--vpos-primary-soft);
    color: var(--vpos-primary-active);
}

body.vpos-pos-layout .vpos-pos-custom-pay-notes-summary span {
    color: inherit;
    font-size: 11.3px;
    font-weight: 780;
}

body.vpos-pos-layout .vpos-pos-custom-pay-notes-summary strong {
    color: var(--vpos-text-strong);
    font-size: 16px;
    font-weight: 880;
    line-height: 1.1;
}

body.vpos-pos-layout .vpos-pos-custom-pay-notes-body .form-group {
    margin-bottom: 9px;
}

body.vpos-pos-layout .vpos-pos-custom-pay-notes-body label {
    margin-bottom: 4px;
    color: var(--vpos-text-strong);
    font-size: 11.5px;
    font-weight: 780;
}

body.vpos-pos-layout .vpos-pos-custom-pay-notes-body textarea.form-control {
    min-height: 56px;
    resize: vertical;
}

body.vpos-pos-layout .vpos-pos-custom-pay-notes-grid {
    margin-right: -4px;
    margin-left: -4px;
}

body.vpos-pos-layout .vpos-pos-custom-pay-notes-grid > [class*="col-"] {
    padding-right: 4px;
    padding-left: 4px;
}

body.vpos-pos-layout .vpos-pos-custom-pay-notes-footer {
    display: flex;
    justify-content: flex-end;
    gap: 7px;
}

body.vpos-pos-layout .vpos-pos-custom-pay-notes-footer::before,
body.vpos-pos-layout .vpos-pos-custom-pay-notes-footer::after {
    display: none;
    content: none;
}

/* ============================================================
   VPOS Restaurant POS Foundation
   UI-only layer for table/waiter/kitchen workflows.
   ============================================================ */

body.vpos-pos-layout .vpos-restaurant-pos-screen {
    --vpos-restaurant-accent: var(--vpos-primary);
}

body.vpos-pos-layout .vpos-restaurant-commandbar {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
    padding: 10px;
    border: 1px solid color-mix(in srgb, var(--vpos-primary) 22%, var(--vpos-border));
    border-radius: 10px;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--vpos-primary) 8%, transparent), transparent 58%),
        var(--vpos-surface);
    box-shadow: var(--vpos-shadow-sm);
}

body.vpos-pos-layout .vpos-restaurant-commandbar-main {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    align-items: center;
    gap: 12px;
}

body.vpos-pos-layout .vpos-restaurant-commandbar-title {
    display: flex;
    min-width: 190px;
    align-items: center;
    gap: 9px;
}

body.vpos-pos-layout .vpos-restaurant-commandbar-icon {
    display: inline-flex;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: color-mix(in srgb, var(--vpos-primary) 15%, var(--vpos-surface));
    color: var(--vpos-primary);
}

body.vpos-pos-layout .vpos-restaurant-commandbar-title strong {
    display: block;
    color: var(--vpos-text-strong);
    font-size: 14px;
    font-weight: 860;
    line-height: 1.1;
}

body.vpos-pos-layout .vpos-restaurant-commandbar-title span:not(.vpos-restaurant-commandbar-icon) {
    display: block;
    color: var(--vpos-text-muted);
    font-size: 11.5px;
    font-weight: 650;
}

body.vpos-pos-layout .vpos-restaurant-status-strip {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

body.vpos-pos-layout .vpos-restaurant-status-pill {
    display: inline-flex;
    max-width: 230px;
    min-height: 30px;
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    border: 1px solid var(--vpos-border);
    border-radius: 999px;
    background: var(--vpos-surface-muted);
    color: var(--vpos-text-muted);
    font-size: 11.5px;
    font-weight: 760;
}

body.vpos-pos-layout .vpos-restaurant-status-pill span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.vpos-pos-layout .vpos-restaurant-status-pill.is-active {
    border-color: color-mix(in srgb, var(--vpos-primary) 35%, var(--vpos-border));
    background: color-mix(in srgb, var(--vpos-primary) 10%, var(--vpos-surface));
    color: var(--vpos-text-strong);
}

body.vpos-pos-layout .vpos-restaurant-status-pill.has-open-bills {
    border-color: color-mix(in srgb, var(--vpos-warning) 45%, var(--vpos-border));
    background: color-mix(in srgb, var(--vpos-warning) 15%, var(--vpos-surface));
}

body.vpos-pos-layout .vpos-restaurant-status-pill.is-locked i {
    color: var(--vpos-warning);
}

body.vpos-pos-layout .vpos-restaurant-commandbar-actions {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

body.vpos-pos-layout .vpos-restaurant-commandbar-actions .btn {
    min-height: 30px;
    border-color: color-mix(in srgb, var(--vpos-primary) 24%, var(--vpos-border));
    border-radius: 8px;
    background: var(--vpos-surface);
    color: var(--vpos-primary);
    font-size: 11.5px;
    font-weight: 790;
}

body.vpos-pos-layout .vpos-restaurant-commandbar-actions .btn:hover,
body.vpos-pos-layout .vpos-restaurant-commandbar-actions .btn:focus {
    background: color-mix(in srgb, var(--vpos-primary) 10%, var(--vpos-surface));
    color: var(--vpos-primary-strong, var(--vpos-primary));
}

body.vpos-pos-layout .vpos-restaurant-pos-fields {
    display: block;
    width: 100%;
}

body.vpos-pos-layout .vpos-restaurant-selector-panel {
    margin-bottom: 8px;
}

body.vpos-pos-layout .vpos-restaurant-selector-panel > .row {
    margin-right: -5px;
    margin-left: -5px;
}

body.vpos-pos-layout .vpos-restaurant-selector-panel > .row > [class*="col-"] {
    padding-right: 5px;
    padding-left: 5px;
}

body.vpos-pos-layout .vpos-restaurant-field-label {
    margin-bottom: 4px;
    color: var(--vpos-text-muted);
    font-size: 10.8px;
    font-weight: 800;
    text-transform: uppercase;
}

body.vpos-pos-layout .vpos-restaurant-table-map {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
    gap: 6px;
    margin: 2px 0 8px;
}

body.vpos-pos-layout .vpos-restaurant-table-chip {
    display: flex;
    min-width: 0;
    min-height: 46px;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    padding: 7px 9px;
    border: 1px solid var(--vpos-border);
    border-radius: 9px;
    background: var(--vpos-surface);
    color: var(--vpos-text-strong);
    text-align: left;
    box-shadow: none;
}

body.vpos-pos-layout .vpos-restaurant-table-chip span {
    overflow: hidden;
    font-size: 12px;
    font-weight: 850;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.vpos-pos-layout .vpos-restaurant-table-chip small {
    overflow: hidden;
    color: var(--vpos-text-muted);
    font-size: 10.5px;
    font-weight: 760;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.vpos-pos-layout .vpos-restaurant-table-chip:hover,
body.vpos-pos-layout .vpos-restaurant-table-chip:focus,
body.vpos-pos-layout .vpos-restaurant-table-chip.is-selected {
    border-color: color-mix(in srgb, var(--vpos-primary) 48%, var(--vpos-border));
    background: color-mix(in srgb, var(--vpos-primary) 11%, var(--vpos-surface));
    outline: 0;
}

body.vpos-pos-layout .vpos-restaurant-table-chip.has-open-bills {
    border-left: 3px solid var(--vpos-warning);
}

body.vpos-pos-layout .vpos-restaurant-split-modal .modal-dialog {
    width: min(760px, calc(100vw - 20px));
    margin: 18px auto;
}

body.vpos-pos-layout .vpos-restaurant-split-summary {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
    padding: 8px 10px;
    border: 1px solid var(--vpos-border);
    border-radius: 8px;
    background: var(--vpos-surface-muted);
    color: var(--vpos-text-muted);
    font-size: 12px;
    font-weight: 760;
}

body.vpos-pos-layout .vpos-restaurant-split-summary strong {
    color: var(--vpos-text-strong);
    font-weight: 860;
}

body.vpos-pos-layout .vpos-restaurant-split-table {
    margin-bottom: 0;
}

body.vpos-pos-layout .vpos-restaurant-split-table th,
body.vpos-pos-layout .vpos-restaurant-split-table td {
    padding: 7px 8px !important;
    font-size: 12px;
    vertical-align: middle !important;
}

body.vpos-app .vpos-restaurant-open-bills-modal .modal-body {
    padding: 10px;
    background: var(--vpos-page-bg);
}

body.vpos-app .vpos-restaurant-open-bills-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
    padding: 8px 10px;
    border: 1px solid var(--vpos-border);
    border-radius: 8px;
    background: var(--vpos-surface);
    color: var(--vpos-text-muted);
    font-size: 12px;
    font-weight: 760;
}

body.vpos-app .vpos-restaurant-open-bills-summary > span,
body.vpos-app .vpos-restaurant-open-bills-summary > strong {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

body.vpos-app .vpos-restaurant-open-bills-summary strong {
    color: var(--vpos-text-strong);
    font-size: 13px;
    font-weight: 860;
}

body.vpos-app .vpos-restaurant-open-bills-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(245px, 1fr));
    gap: 8px;
    margin-right: 0;
    margin-left: 0;
}

body.vpos-app .vpos-restaurant-open-bills-grid::before,
body.vpos-app .vpos-restaurant-open-bills-grid::after {
    display: none;
    content: none;
}

body.vpos-app .vpos-restaurant-open-bills-grid > [class*="col-"] {
    float: none;
    width: auto;
    min-width: 0;
    padding: 0;
}

body.vpos-app .vpos-restaurant-open-bill-card {
    display: flex;
    min-height: 188px;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--vpos-border);
    border-radius: 10px;
    background: var(--vpos-surface);
    box-shadow: var(--vpos-shadow-sm);
}

body.vpos-app .vpos-restaurant-open-bill-body {
    flex: 1 1 auto;
    padding: 10px;
}

body.vpos-app .vpos-restaurant-open-bill-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

body.vpos-app .vpos-restaurant-open-bill-top strong {
    color: var(--vpos-text-strong);
    font-size: 13px;
    font-weight: 880;
}

body.vpos-app .vpos-restaurant-open-bill-top span {
    color: var(--vpos-primary);
    font-size: 13px;
    font-weight: 880;
    white-space: nowrap;
}

body.vpos-app .vpos-restaurant-open-bill-meta {
    display: grid;
    gap: 4px;
}

body.vpos-app .vpos-restaurant-open-bill-meta span,
body.vpos-app .vpos-restaurant-open-bill-note {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 6px;
    color: var(--vpos-text-muted);
    font-size: 11.5px;
    font-weight: 700;
}

body.vpos-app .vpos-restaurant-open-bill-meta i,
body.vpos-app .vpos-restaurant-open-bill-note i {
    width: 14px;
    color: var(--vpos-primary);
    text-align: center;
}

body.vpos-app .vpos-restaurant-open-bill-note {
    margin-top: 8px;
    padding-top: 7px;
    border-top: 1px dashed var(--vpos-border);
}

body.vpos-app .vpos-restaurant-open-bill-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px;
    border-top: 1px solid var(--vpos-border);
    background: var(--vpos-surface-muted);
}

body.vpos-app .vpos-restaurant-open-bill-actions .btn {
    flex: 1 1 auto;
    min-height: 30px;
    border-radius: 7px;
    font-size: 11.5px;
    font-weight: 800;
}

/* ============================================================
   VPOS Restaurant Queue Screens
   Enterprise queue cards for kitchen/waiter workflows.
   ============================================================ */

body.vpos-restaurant-layout {
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--vpos-primary) 8%, transparent), transparent 42%),
        var(--vpos-page-bg);
    color: var(--vpos-text);
}

body.vpos-restaurant-layout .container-fluid {
    min-height: 100vh;
    padding-right: 14px;
    padding-left: 14px;
}

body.vpos-restaurant-layout > .wrapper,
body.vpos-restaurant-layout .container-fluid {
    background: transparent;
}

body.vpos-restaurant-layout .row.no-print:first-child {
    position: sticky;
    top: 0;
    z-index: 60;
    margin-right: -14px;
    margin-left: -14px;
    padding: 8px 14px;
    border-bottom: 1px solid color-mix(in srgb, var(--vpos-primary) 20%, var(--vpos-border));
    background:
        linear-gradient(90deg, var(--vpos-shell-start, var(--vpos-primary)), var(--vpos-shell-end, var(--vpos-primary-dark, var(--vpos-primary))));
    box-shadow: var(--vpos-shadow-sm);
}

body.vpos-restaurant-layout .row.no-print:first-child .btn {
    border: 1px solid color-mix(in srgb, #ffffff 28%, transparent);
    border-radius: 8px;
    background: color-mix(in srgb, #ffffff 14%, transparent);
    color: #ffffff;
}

body.vpos-restaurant-layout .vpos-restaurant-page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    margin: 12px 0 10px;
    padding: 12px;
    border: 1px solid var(--vpos-border);
    border-radius: 10px;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--vpos-primary) 9%, transparent), transparent 58%),
        var(--vpos-surface);
    box-shadow: var(--vpos-shadow-sm);
}

body.vpos-restaurant-layout .vpos-restaurant-page-header h1 {
    margin: 2px 0 0;
    color: var(--vpos-text-strong);
    font-size: 22px;
    font-weight: 880;
    line-height: 1.15;
}

body.vpos-restaurant-layout .vpos-restaurant-page-header p {
    margin: 3px 0 0;
    color: var(--vpos-text-muted);
    font-size: 12px;
    font-weight: 680;
}

body.vpos-restaurant-layout .vpos-page-kicker {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--vpos-primary);
    font-size: 11px;
    font-weight: 850;
    letter-spacing: 0;
    text-transform: uppercase;
}

body.vpos-restaurant-layout .vpos-restaurant-page-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

body.vpos-restaurant-layout .vpos-restaurant-page-actions .btn {
    min-height: 32px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 820;
}

body.vpos-restaurant-layout .vpos-restaurant-main-tabs {
    margin: 0 0 10px;
    justify-content: flex-start;
}

body.vpos-restaurant-layout .vpos-restaurant-main-tabs .vpos-segment {
    gap: 6px;
    min-height: 31px;
    padding-inline: 12px;
}

body.vpos-restaurant-layout .vpos-restaurant-waiter-context {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 10px;
    padding: 9px 10px;
    border: 1px solid var(--vpos-border);
    border-radius: 10px;
    background: var(--vpos-surface);
    box-shadow: var(--vpos-shadow-xs, var(--vpos-shadow-sm));
}

body.vpos-restaurant-layout .vpos-restaurant-waiter-context > div:first-child {
    display: grid;
    min-width: 0;
    gap: 2px;
}

body.vpos-restaurant-layout .vpos-restaurant-waiter-context strong {
    color: var(--vpos-text-strong);
    font-size: 13px;
    font-weight: 850;
    line-height: 1.2;
}

body.vpos-restaurant-layout .vpos-restaurant-waiter-context span:not(.vpos-restaurant-ticket-label) {
    color: var(--vpos-text-muted);
    font-size: 11.5px;
    font-weight: 720;
}

body.vpos-restaurant-layout .vpos-restaurant-waiter-actions {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

body.vpos-restaurant-layout .vpos-restaurant-waiter-actions .btn {
    min-height: 29px;
    border-radius: 7px;
    font-size: 11.5px;
    font-weight: 800;
}

body.vpos-restaurant-layout .vpos-restaurant-filter-card,
body.vpos-restaurant-layout .vpos-restaurant-queue-card {
    border: 1px solid var(--vpos-border);
    border-radius: 10px;
    background: var(--vpos-surface);
    box-shadow: var(--vpos-shadow-sm);
}

body.vpos-restaurant-layout .vpos-restaurant-filter-card .vpos-widget-body,
body.vpos-restaurant-layout .vpos-restaurant-queue-card .vpos-widget-body,
body.vpos-restaurant-layout .vpos-restaurant-queue-card > .box-body {
    padding: 10px;
}

body.vpos-restaurant-layout .vpos-restaurant-queue-card .vpos-widget-header {
    min-height: 40px;
    padding: 9px 10px;
    border-bottom: 1px solid var(--vpos-border);
    background: color-mix(in srgb, var(--vpos-primary) 5%, var(--vpos-surface));
}

body.vpos-restaurant-layout .vpos-restaurant-order-col {
    margin-bottom: 10px;
}

body.vpos-restaurant-layout .vpos-restaurant-order-card {
    display: flex;
    min-height: 0;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--vpos-border);
    border-radius: 10px;
    background: var(--vpos-surface);
    box-shadow: var(--vpos-shadow-xs, var(--vpos-shadow-sm));
}

body.vpos-restaurant-layout .vpos-restaurant-line-card {
    min-height: 282px;
}

body.vpos-restaurant-layout .vpos-restaurant-order-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    padding: 10px;
    border-bottom: 1px solid var(--vpos-border);
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--vpos-primary) 7%, transparent), transparent 62%),
        var(--vpos-surface-muted);
}

body.vpos-restaurant-layout .vpos-restaurant-order-card-header strong {
    display: block;
    color: var(--vpos-text-strong);
    font-size: 15px;
    font-weight: 880;
    line-height: 1.12;
}

body.vpos-restaurant-layout .vpos-restaurant-ticket-label {
    display: block;
    margin-bottom: 2px;
    color: var(--vpos-text-muted);
    font-size: 10.5px;
    font-weight: 840;
    text-transform: uppercase;
}

body.vpos-restaurant-layout .vpos-restaurant-order-status {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    min-height: 24px;
    padding: 3px 8px;
    border: 1px solid var(--vpos-border);
    border-radius: 999px;
    background: var(--vpos-surface);
    color: var(--vpos-text-muted);
    font-size: 10.8px;
    font-weight: 850;
    white-space: nowrap;
}

body.vpos-restaurant-layout .vpos-restaurant-order-status.is-received {
    border-color: color-mix(in srgb, var(--vpos-info) 35%, var(--vpos-border));
    background: color-mix(in srgb, var(--vpos-info) 13%, var(--vpos-surface));
    color: var(--vpos-info-strong, var(--vpos-info));
}

body.vpos-restaurant-layout .vpos-restaurant-order-status.is-partial {
    border-color: color-mix(in srgb, var(--vpos-warning) 45%, var(--vpos-border));
    background: color-mix(in srgb, var(--vpos-warning) 15%, var(--vpos-surface));
    color: var(--vpos-warning-strong, var(--vpos-warning));
}

body.vpos-restaurant-layout .vpos-restaurant-order-status.is-cooked {
    border-color: color-mix(in srgb, var(--vpos-danger) 34%, var(--vpos-border));
    background: color-mix(in srgb, var(--vpos-danger) 12%, var(--vpos-surface));
    color: var(--vpos-danger-strong, var(--vpos-danger));
}

body.vpos-restaurant-layout .vpos-restaurant-order-status.is-served {
    border-color: color-mix(in srgb, var(--vpos-success) 42%, var(--vpos-border));
    background: color-mix(in srgb, var(--vpos-success) 13%, var(--vpos-surface));
    color: var(--vpos-success-strong, var(--vpos-success));
}

body.vpos-restaurant-layout .vpos-restaurant-order-status.is-pending {
    border-color: color-mix(in srgb, var(--vpos-warning) 40%, var(--vpos-border));
    background: color-mix(in srgb, var(--vpos-warning) 14%, var(--vpos-surface));
    color: var(--vpos-warning-strong, var(--vpos-warning));
}

body.vpos-restaurant-layout .vpos-restaurant-order-status.is-warning {
    border-color: color-mix(in srgb, var(--vpos-warning) 55%, var(--vpos-border));
    background: color-mix(in srgb, var(--vpos-warning) 22%, var(--vpos-surface));
    color: var(--vpos-warning-strong, var(--vpos-warning));
}

body.vpos-restaurant-layout .vpos-restaurant-order-status.is-delayed {
    border-color: color-mix(in srgb, var(--vpos-danger) 50%, var(--vpos-border));
    background: color-mix(in srgb, var(--vpos-danger) 15%, var(--vpos-surface));
    color: var(--vpos-danger-strong, var(--vpos-danger));
}

body.vpos-restaurant-layout .vpos-restaurant-order-meta {
    display: grid;
    gap: 5px;
    padding: 10px;
}

body.vpos-restaurant-layout .vpos-restaurant-order-meta span {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 7px;
    color: var(--vpos-text-muted);
    font-size: 11.5px;
    font-weight: 710;
}

body.vpos-restaurant-layout .vpos-restaurant-order-meta i {
    width: 14px;
    flex: 0 0 14px;
    color: var(--vpos-primary);
    text-align: center;
}

body.vpos-restaurant-layout .vpos-restaurant-order-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 0 10px 10px;
    padding: 8px 9px;
    border: 1px dashed color-mix(in srgb, var(--vpos-primary) 32%, var(--vpos-border));
    border-radius: 8px;
    background: color-mix(in srgb, var(--vpos-primary) 6%, var(--vpos-surface));
}

body.vpos-restaurant-layout .vpos-restaurant-order-summary span {
    color: var(--vpos-text-muted);
    font-size: 11.5px;
    font-weight: 760;
}

body.vpos-restaurant-layout .vpos-restaurant-order-summary strong {
    color: var(--vpos-text-strong);
    font-size: 16px;
    font-weight: 880;
}

body.vpos-restaurant-layout .vpos-restaurant-line-product {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 10px 6px;
}

body.vpos-restaurant-layout .vpos-restaurant-line-product strong {
    min-width: 0;
    color: var(--vpos-text-strong);
    font-size: 13px;
    font-weight: 860;
    line-height: 1.25;
}

body.vpos-restaurant-layout .vpos-restaurant-line-product span {
    flex: 0 0 auto;
    color: var(--vpos-primary);
    font-size: 16px;
    font-weight: 900;
}

body.vpos-restaurant-layout .vpos-restaurant-modifier-list {
    display: grid;
    gap: 3px;
    margin: 0 10px 8px;
    padding: 7px 8px;
    border: 1px solid var(--vpos-border);
    border-radius: 8px;
    background: var(--vpos-surface-muted);
}

body.vpos-restaurant-layout .vpos-restaurant-modifier-list span {
    color: var(--vpos-text-muted);
    font-size: 11.3px;
    font-weight: 720;
}

body.vpos-restaurant-layout .vpos-restaurant-line-note {
    margin: 0 10px 10px;
    padding: 7px 8px;
    border-left: 3px solid var(--vpos-warning);
    border-radius: 7px;
    background: color-mix(in srgb, var(--vpos-warning) 10%, var(--vpos-surface));
    color: var(--vpos-text-strong);
    font-size: 11.5px;
    font-weight: 760;
}

body.vpos-restaurant-layout .vpos-restaurant-docket-status {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin: 8px 8px 0;
}

body.vpos-restaurant-layout .vpos-restaurant-docket-status .vpos-restaurant-ticket-label {
    flex-basis: 100%;
}

body.vpos-restaurant-layout .vpos-restaurant-docket-pill {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    min-height: 23px;
    padding: 3px 7px;
    border: 1px solid color-mix(in srgb, var(--vpos-info) 28%, var(--vpos-border));
    border-radius: 999px;
    background: color-mix(in srgb, var(--vpos-info) 7%, var(--vpos-surface));
    color: var(--vpos-text);
    font-size: 10.5px;
    font-weight: 780;
    line-height: 1.15;
}

body.vpos-restaurant-layout .vpos-restaurant-docket-pill.is-warning {
    border-color: color-mix(in srgb, var(--vpos-warning) 40%, var(--vpos-border));
    background: color-mix(in srgb, var(--vpos-warning) 11%, var(--vpos-surface));
}

body.vpos-restaurant-layout .vpos-restaurant-order-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: auto;
    padding: 8px;
    border-top: 1px solid var(--vpos-border);
    background: var(--vpos-surface-muted);
}

body.vpos-restaurant-layout .vpos-restaurant-order-actions .btn {
    flex: 1 1 auto;
    min-height: 30px;
    border-radius: 7px;
    font-size: 11.5px;
    font-weight: 800;
}

body.vpos-restaurant-layout .vpos-restaurant-order-actions .btn[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
}

body.vpos-restaurant-layout .vpos-restaurant-order-operations-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: auto 8px 8px;
    min-height: 29px;
    border-radius: 7px;
    font-size: 11.5px;
    font-weight: 830;
}

body.vpos-restaurant-layout .vpos-restaurant-order-operations {
    border-top: 1px solid var(--vpos-border);
    background: var(--vpos-surface-muted);
}

body.vpos-restaurant-layout .vpos-restaurant-order-detail-lines {
    display: grid;
    gap: 4px;
    padding: 8px;
}

body.vpos-restaurant-layout .vpos-restaurant-order-detail-lines > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    padding: 5px 7px;
    border: 1px solid color-mix(in srgb, var(--vpos-border) 80%, transparent);
    border-radius: 7px;
    background: var(--vpos-surface);
}

body.vpos-restaurant-layout .vpos-restaurant-order-detail-lines span:not(.vpos-restaurant-ticket-label) {
    overflow: hidden;
    color: var(--vpos-text);
    font-size: 11.5px;
    font-weight: 760;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.vpos-restaurant-layout .vpos-restaurant-order-detail-lines strong {
    color: var(--vpos-text-strong);
    font-size: 11.5px;
    font-weight: 850;
    text-align: right;
}

body.vpos-restaurant-layout .vpos-restaurant-saved-order-modal .modal-dialog {
    margin-top: 70px;
}

body.vpos-restaurant-layout .vpos-restaurant-saved-order-modal {
    z-index: 10650;
}

body.vpos-restaurant-layout .select2-container--open {
    z-index: 10700;
}

body.vpos-restaurant-layout .vpos-restaurant-saved-order-table {
    margin-bottom: 0;
}

body.vpos-restaurant-layout .vpos-restaurant-saved-order-table th,
body.vpos-restaurant-layout .vpos-restaurant-saved-order-table td {
    padding: 6px 8px !important;
    vertical-align: middle !important;
    font-size: 12px;
}

body.vpos-restaurant-layout .vpos-restaurant-empty-state {
    margin: 8px 0;
    padding: 24px 12px;
    border: 1px dashed var(--vpos-border);
    border-radius: 10px;
    background: var(--vpos-surface-muted);
}

body.vpos-restaurant-layout .vpos-restaurant-footer {
    margin: 12px -14px 0;
    padding: 9px 14px;
    border-top: 1px solid var(--vpos-border);
    background: var(--vpos-surface);
    color: var(--vpos-text-muted);
    font-size: 11.5px;
}

/* ============================================================
   VPOS Global Alignment Guardrails
   Final compact alignment layer for legacy Bootstrap 3/AdminLTE
   markup running on the Bootstrap 5 runtime.
   ============================================================ */

body.vpos-admin-layout .main-header.vpos-header,
body.vpos-admin-layout .main-header.vpos-header .navbar,
body.vpos-admin-layout .main-header.vpos-header .vpos-navbar {
    min-height: var(--vpos-header-height);
}

body.vpos-admin-layout .main-header.vpos-header .vpos-navbar {
    display: flex !important;
    align-items: center;
    min-width: 0;
    height: var(--vpos-header-height);
    padding-top: 0 !important;
    padding-right: 8px;
    padding-bottom: 0 !important;
    overflow: visible !important;
}

body.vpos-admin-layout .main-header.vpos-header .vpos-navbar::before,
body.vpos-admin-layout .main-header.vpos-header .vpos-navbar::after,
body.vpos-app .box-header::before,
body.vpos-app .box-header::after,
body.vpos-app .modal-header::before,
body.vpos-app .modal-header::after,
body.vpos-app .modal-footer::before,
body.vpos-app .modal-footer::after,
body.vpos-app .dataTables_wrapper > .row::before,
body.vpos-app .dataTables_wrapper > .row::after {
    display: none;
    content: none;
}

body.vpos-admin-layout .main-header.vpos-header .vpos-sidebar-toggle {
    display: inline-flex !important;
    flex: 0 0 var(--vpos-header-height);
    align-items: center;
    justify-content: center;
    width: var(--vpos-header-height);
    height: var(--vpos-header-height);
    margin: 0;
    padding: 0 !important;
    line-height: 1;
}

body.vpos-admin-layout .navbar-custom-menu.vpos-navbar-actions {
    display: flex !important;
    float: none !important;
    flex: 1 1 auto;
    align-items: center;
    justify-content: flex-end;
    min-width: 0;
    height: var(--vpos-header-height);
    margin-left: auto;
    gap: 6px;
}

body.vpos-admin-layout .navbar-custom-menu.vpos-navbar-actions > * {
    flex: 0 0 auto;
}

body.vpos-app .vpos-user-nav {
    display: flex !important;
    float: none !important;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    height: var(--vpos-header-height);
    margin: 0;
    padding-left: 0;
    list-style: none;
}

body.vpos-app .vpos-user-nav > li,
body.vpos-app .notifications-menu,
body.vpos-app .vpos-user-menu,
body.vpos-app .vpos-header-action {
    display: inline-flex;
    align-items: center;
    height: auto;
    margin: 0;
}

body.vpos-app .vpos-user-nav > li > a,
body.vpos-app .notifications-menu > a,
body.vpos-app .vpos-user-toggle,
body.vpos-app .vpos-header-btn,
body.vpos-app .vpos-header-date {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    gap: 6px;
    line-height: 1.2;
}

body.vpos-app .vpos-user-nav > li > a,
body.vpos-app .notifications-menu > a,
body.vpos-app .vpos-user-toggle {
    padding: 0 8px !important;
}

body.vpos-app .vpos-header-date {
    flex: 0 0 auto;
    white-space: nowrap;
}

body.vpos-app .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 28px;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
}

body.vpos-app .btn.btn-block {
    display: flex;
    width: 100%;
}

body.vpos-app .btn i,
body.vpos-app .btn .fa,
body.vpos-app .btn .fas,
body.vpos-app .btn .far {
    flex: 0 0 auto;
    line-height: 1;
}

body.vpos-app .btn .caret {
    margin-left: 2px;
}

body.vpos-app .btn-primary,
body.vpos-app .btn-success,
body.vpos-app .btn-info,
body.vpos-app .btn-danger,
body.vpos-app .btn.bg-blue,
body.vpos-app .btn.bg-green,
body.vpos-app .btn.bg-aqua,
body.vpos-app .btn.bg-red,
body.vpos-app .btn.bg-navy,
body.vpos-app .btn.bg-purple {
    color: #ffffff !important;
}

body.vpos-app .btn-warning,
body.vpos-app .btn.bg-yellow {
    color: #172033 !important;
}

body.vpos-app .btn-group,
body.vpos-app .btn-group-vertical {
    display: inline-flex;
    align-items: stretch;
    vertical-align: middle;
}

body.vpos-app .btn-group > .btn,
body.vpos-app .btn-group-vertical > .btn {
    position: relative;
    flex: 0 0 auto;
}

body.vpos-app .btn-group > .btn + .btn,
body.vpos-app .btn-group > .btn + .btn-group,
body.vpos-app .btn-group > .btn-group + .btn,
body.vpos-app .btn-group > .btn-group + .btn-group {
    margin-left: -1px;
}

body.vpos-app .input-group-btn > .btn {
    height: 100%;
}

body.vpos-app table .btn,
body.vpos-app .dataTables_wrapper .btn,
body.vpos-app .modal-footer .btn,
body.vpos-app .box-footer .btn {
    max-width: 100%;
}

body.vpos-app .box-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}

body.vpos-app .box-header .box-title {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    margin: 0;
    gap: 6px;
}

body.vpos-app .box-header > .box-tools,
body.vpos-app .box-header .pull-right {
    position: static;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 5px;
    min-width: 0;
    margin-left: auto;
}

body.vpos-app .dataTables_wrapper > .row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    row-gap: 7px;
    margin-right: -6px;
    margin-left: -6px;
}

body.vpos-app .dataTables_wrapper > .row > [class*="col-"] {
    min-width: 0;
    padding-right: 6px;
    padding-left: 6px;
}

body.vpos-app .dataTables_length,
body.vpos-app .dataTables_filter,
body.vpos-app .dt-buttons,
body.vpos-app .dataTables_paginate {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
}

body.vpos-app .dataTables_filter {
    justify-content: flex-end;
}

body.vpos-app .dataTables_length label,
body.vpos-app .dataTables_filter label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 0;
    white-space: nowrap;
}

body.vpos-app .dataTables_filter input,
body.vpos-app .dataTables_length select {
    max-width: 100%;
}

body.vpos-app .modal-header,
body.vpos-app .modal-footer {
    display: flex;
    align-items: center;
    gap: 8px;
}

body.vpos-app .modal-header {
    justify-content: space-between;
}

body.vpos-app .modal-footer {
    justify-content: flex-end;
    flex-wrap: wrap;
}

body.vpos-app .modal-header .close {
    margin-left: auto;
}

@media (max-width: 991px) {
    body.vpos-admin-layout .navbar-custom-menu.vpos-navbar-actions {
        flex: 1 1 auto;
        justify-content: flex-start;
        max-width: calc(100vw - var(--vpos-header-height));
        overflow-x: auto !important;
        overflow-y: visible !important;
        scrollbar-width: none;
    }

    body.vpos-admin-layout .navbar-custom-menu.vpos-navbar-actions::-webkit-scrollbar {
        display: none;
    }

    body.vpos-app .dataTables_filter {
        justify-content: flex-start;
    }
}

@media (max-width: 767px) {
    body.vpos-app .dataTables_length,
    body.vpos-app .dataTables_filter,
    body.vpos-app .dt-buttons,
    body.vpos-app .dataTables_paginate,
    body.vpos-app .dataTables_length label,
    body.vpos-app .dataTables_filter label {
        width: 100%;
        justify-content: flex-start;
    }

    body.vpos-app .modal-footer .btn {
        flex: 1 1 auto;
    }
}

@media (max-width: 991px) {
    body.vpos-app .vpos-stock-value-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.vpos-pos-layout .vpos-restaurant-commandbar,
    body.vpos-pos-layout .vpos-restaurant-commandbar-main {
        flex-direction: column;
        align-items: stretch;
    }

    body.vpos-pos-layout .vpos-restaurant-commandbar-actions {
        justify-content: flex-start;
    }

    body.vpos-restaurant-layout .vpos-restaurant-page-header {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 767px) {
    body.vpos-app .vpos-stock-value-strip,
    body.vpos-app .vpos-register-meta-row {
        grid-template-columns: minmax(0, 1fr);
    }

    body.vpos-app .vpos-report-chart-panel .box-body,
    body.vpos-app .vpos-report-chart-panel .vpos-widget-body,
    body.vpos-app .vpos-report-chart-shell {
        min-height: 260px;
    }

    body.vpos-pos-layout .vpos-pos-custom-pay-notes-dialog {
        width: 100%;
        margin: 0;
    }

    body.vpos-pos-layout .vpos-pos-custom-pay-notes-content {
        min-height: 100vh;
        border-radius: 0;
    }

    body.vpos-pos-layout .vpos-pos-custom-pay-notes-footer {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }

    body.vpos-pos-layout .vpos-restaurant-table-map {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.vpos-pos-layout .vpos-restaurant-commandbar-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.vpos-pos-layout .vpos-restaurant-commandbar-actions .btn {
        width: 100%;
    }
}
/* ============================================================
   VPOS Registration Input Group + Select2 Alignment
   Keeps icon and field on one horizontal line.
   ============================================================ */

body.vpos-auth-page .vpos-register-card .input-group,
body.vpos-auth-page .vpos-legacy-register-card .input-group {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch;
    width: 100%;
    min-width: 0;
}

/* Fixed icon section. */
body.vpos-auth-page .vpos-register-card .input-group > .input-group-addon,
body.vpos-auth-page .vpos-legacy-register-card .input-group > .input-group-addon {
    width: 33px;
    min-width: 33px;
    max-width: 33px;
    height: 32px;
    min-height: 32px;
    flex: 0 0 33px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--vpos-border-strong);
    border-right: 0;
    border-radius:
        var(--vpos-radius-sm)
        0
        0
        var(--vpos-radius-sm) !important;
    background: var(--vpos-surface-muted);
    color: var(--vpos-text-muted);
    line-height: 1;
}

body.vpos-auth-page .vpos-register-card .input-group > .input-group-addon i,
body.vpos-auth-page .vpos-legacy-register-card .input-group > .input-group-addon i {
    margin: 0;
    font-size: 12px;
    line-height: 1;
}

/* Normal text/date input beside an icon. */
body.vpos-auth-page .vpos-register-card
.input-group > .form-control:not(.select2-hidden-accessible),
body.vpos-auth-page .vpos-legacy-register-card
.input-group > .form-control:not(.select2-hidden-accessible) {
    width: 1%;
    min-width: 0;
    height: 32px;
    min-height: 32px;
    flex: 1 1 auto;
    border-radius:
        0
        var(--vpos-radius-sm)
        var(--vpos-radius-sm)
        0 !important;
}

/* Select2 must occupy only the remaining width after the icon. */
body.vpos-auth-page .vpos-register-card
.input-group > .select2-container,
body.vpos-auth-page .vpos-legacy-register-card
.input-group > .select2-container {
    width: 1% !important;
    min-width: 0 !important;
    max-width: none !important;
    flex: 1 1 auto !important;
    display: block !important;
}

/* Match Select2 height and border shape with normal inputs. */
body.vpos-auth-page .vpos-register-card
.input-group > .select2-container .select2-selection--single,
body.vpos-auth-page .vpos-legacy-register-card
.input-group > .select2-container .select2-selection--single {
    width: 100%;
    height: 32px;
    min-height: 32px;
    border: 1px solid var(--vpos-border-strong);
    border-radius:
        0
        var(--vpos-radius-sm)
        var(--vpos-radius-sm)
        0 !important;
    background: var(--vpos-surface);
}

body.vpos-auth-page .vpos-register-card
.input-group > .select2-container
.select2-selection--single .select2-selection__rendered,
body.vpos-auth-page .vpos-legacy-register-card
.input-group > .select2-container
.select2-selection--single .select2-selection__rendered {
    height: 30px;
    padding-right: 28px;
    padding-left: 10px;
    color: var(--vpos-text);
    font-size: 11.5px;
    line-height: 30px;
}

body.vpos-auth-page .vpos-register-card
.input-group > .select2-container
.select2-selection--single .select2-selection__arrow,
body.vpos-auth-page .vpos-legacy-register-card
.input-group > .select2-container
.select2-selection--single .select2-selection__arrow {
    width: 26px;
    height: 30px;
    top: 1px;
    right: 1px;
}

/* Focus treatment. */
body.vpos-auth-page .vpos-register-card
.input-group > .select2-container--focus .select2-selection--single,
body.vpos-auth-page .vpos-register-card
.input-group > .select2-container--open .select2-selection--single,
body.vpos-auth-page .vpos-legacy-register-card
.input-group > .select2-container--focus .select2-selection--single,
body.vpos-auth-page .vpos-legacy-register-card
.input-group > .select2-container--open .select2-selection--single {
    border-color: var(--vpos-primary);
    box-shadow: 0 0 0 2px var(--vpos-primary-ring);
    outline: none;
}
/* ============================================================
   VPOS Responsive Calculator Flyout
   ============================================================ */

.vpos-calculator-template {
    display: none !important;
}

.vpos-calculator-trigger.vpos-calculator-open {
    box-shadow: 0 0 0 2px var(--vpos-primary-ring) !important;
}

.vpos-calculator-flyout {
    width: 244px;
    max-width: calc(100vw - 16px);
    padding: 8px;
    border: 1px solid var(--vpos-border-strong, #cbd5e1);
    border-radius: 9px;
    background: var(--vpos-surface, #ffffff);
    color: var(--vpos-text, #1f2937);
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.24);
    z-index: 5000;
}

.vpos-calculator-flyout .vpos-calculator {
    width: 100%;
    min-width: 0;
}

.vpos-calculator-toolbar {
    min-height: 28px;
    margin-bottom: 7px;
    padding-bottom: 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border-bottom: 1px solid var(--vpos-border, #e2e8f0);
}

.vpos-calculator-title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--vpos-text-strong, #111827);
    font-size: 11.5px;
    font-weight: 800;
}

.vpos-calculator-title i {
    color: var(--vpos-primary, #2563eb);
}

.vpos-calculator-close {
    width: 24px;
    height: 24px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: var(--vpos-text-muted, #64748b);
    cursor: pointer;
    font-size: 12px;
    line-height: 1;
}

.vpos-calculator-close:hover,
.vpos-calculator-close:focus {
    border-color: var(--vpos-border, #e2e8f0);
    background: var(--vpos-surface-muted, #f1f5f9);
    color: var(--vpos-danger, #b91c1c);
    outline: none;
}

.vpos-calculator-flyout #calc,
.vpos-calculator-flyout .calcBG {
    width: 100%;
    margin: 0;
    padding: 0;
}

.vpos-calculator-flyout #result {
    width: 100%;
    margin: 0 0 6px;
}

.vpos-calculator-flyout #result form {
    width: 100%;
    margin: 0;
}

.vpos-calculator-flyout .screen {
    width: 100%;
    height: 34px;
    min-height: 34px;
    padding: 5px 8px;
    border: 1px solid var(--vpos-border-strong, #cbd5e1);
    border-radius: 6px;
    background: var(--vpos-bg-subtle, #f8fafc);
    color: var(--vpos-text-strong, #111827);
    font-size: 15px;
    font-weight: 750;
    line-height: 1;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.05);
}

.vpos-calculator-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
    margin-bottom: 4px;
}

.vpos-calculator-row:last-child {
    margin-bottom: 0;
}

.vpos-calculator-row .btn {
    width: 100%;
    min-width: 0;
    height: 31px;
    min-height: 31px;
    padding: 4px;
    border: 1px solid var(--vpos-border, #dbe3ed);
    border-radius: 6px;
    background: var(--vpos-surface-muted, #f1f5f9);
    color: var(--vpos-text-strong, #111827);
    font-size: 12px;
    font-weight: 750;
    line-height: 1;
    box-shadow: none;
}

.vpos-calculator-row .btn:hover,
.vpos-calculator-row .btn:focus {
    border-color: var(--vpos-primary, #2563eb);
    background: var(--vpos-primary-soft, #eff6ff);
    color: var(--vpos-primary-active, #1d4ed8);
    outline: none;
}

.vpos-calculator-row .btn-danger {
    border-color: #fecaca;
    background: #fef2f2;
    color: #b91c1c;
}

.vpos-calculator-row .btn-warning {
    border-color: #fed7aa;
    background: #fff7ed;
    color: #b45309;
}

.vpos-calculator-row .btn-success {
    border-color: var(--vpos-success, #16834f);
    background: var(--vpos-success, #16834f);
    color: #ffffff;
}

.vpos-calculator-row #blank {
    visibility: hidden;
    pointer-events: none;
}

@media (max-width: 420px) {
    .vpos-calculator-flyout {
        width: calc(100vw - 16px);
    }

    .vpos-calculator-row .btn {
        height: 34px;
        min-height: 34px;
    }
}
/* Calculator visible result screen correction. */
body.vpos-app .vpos-calculator-flyout input.screen,
.vpos-calculator-flyout input.screen {
    display: block !important;
    width: 100% !important;
    height: 38px !important;
    min-height: 38px !important;
    margin: 0 0 8px !important;
    padding: 5px 9px !important;
    border: 1px solid #94a3b8 !important;
    border-radius: 6px !important;
    background: #ffffff !important;
    color: #0f172a !important;
    -webkit-text-fill-color: #0f172a !important;
    opacity: 1 !important;
    font-size: 17px !important;
    font-weight: 800 !important;
    line-height: 26px !important;
    text-align: right !important;
    font-variant-numeric: tabular-nums;
    box-shadow: inset 0 1px 3px rgba(15, 23, 42, 0.10) !important;
}
/* ============================================================
   VPOS Final Status Badge Contrast Fix
   Purchases, Sales, Payments, Drafts, Quotations and Reports
   ============================================================ */

/* Base status-pill visibility */
body.vpos-app table.dataTable td .label.vpos-status-pill,
body.vpos-app table.dataTable td .badge.vpos-status-pill,
body.vpos-app table.table td .label.vpos-status-pill,
body.vpos-app table.table td .badge.vpos-status-pill {
    min-height: 20px;
    padding: 3px 8px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent !important;
    border-radius: 999px !important;
    font-size: 10.5px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    opacity: 1 !important;
    visibility: visible !important;
    filter: none !important;
    text-shadow: none !important;
}

/* Paid, Received, Completed */
body.vpos-app
.payment-status-label[data-orig-value="paid"]
.vpos-payment-status-pill,
body.vpos-app table.dataTable td .vpos-status-pill.bg-light-green,
body.vpos-app table.table td .vpos-status-pill.bg-light-green,
body.vpos-app table.dataTable td .vpos-status-pill.bg-green,
body.vpos-app table.table td .vpos-status-pill.bg-green,
body.vpos-app table.dataTable td .vpos-status-pill.label-success,
body.vpos-app table.table td .vpos-status-pill.label-success {
    border-color: var(--vpos-success, #15803d) !important;
    background-color: var(--vpos-success, #15803d) !important;
    color: #ffffff !important;
}

/* Due, Pending, Partially Paid */
body.vpos-app
.payment-status-label[data-orig-value="due"]
.vpos-payment-status-pill,
body.vpos-app
.payment-status-label[data-orig-value="partial"]
.vpos-payment-status-pill,
body.vpos-app table.dataTable td .vpos-status-pill.bg-light-yellow,
body.vpos-app table.table td .vpos-status-pill.bg-light-yellow,
body.vpos-app table.dataTable td .vpos-status-pill.bg-yellow,
body.vpos-app table.table td .vpos-status-pill.bg-yellow,
body.vpos-app table.dataTable td .vpos-status-pill.bg-light-orange,
body.vpos-app table.table td .vpos-status-pill.bg-light-orange,
body.vpos-app table.dataTable td .vpos-status-pill.label-warning,
body.vpos-app table.table td .vpos-status-pill.label-warning {
    border-color: var(--vpos-warning, #b45309) !important;
    background-color: var(--vpos-warning, #b45309) !important;
    color: #ffffff !important;
}

/* Failed, Cancelled, Overdue */
body.vpos-app
.payment-status-label[data-orig-value="overdue"]
.vpos-payment-status-pill,
body.vpos-app table.dataTable td .vpos-status-pill.bg-light-red,
body.vpos-app table.table td .vpos-status-pill.bg-light-red,
body.vpos-app table.dataTable td .vpos-status-pill.bg-red,
body.vpos-app table.table td .vpos-status-pill.bg-red,
body.vpos-app table.dataTable td .vpos-status-pill.label-danger,
body.vpos-app table.table td .vpos-status-pill.label-danger {
    border-color: var(--vpos-danger, #b91c1c) !important;
    background-color: var(--vpos-danger, #b91c1c) !important;
    color: #ffffff !important;
}

/* Processing, Shipped, Informational */
body.vpos-app table.dataTable td .vpos-status-pill.bg-light-blue,
body.vpos-app table.table td .vpos-status-pill.bg-light-blue,
body.vpos-app table.dataTable td .vpos-status-pill.bg-blue,
body.vpos-app table.table td .vpos-status-pill.bg-blue,
body.vpos-app table.dataTable td .vpos-status-pill.bg-aqua,
body.vpos-app table.table td .vpos-status-pill.bg-aqua,
body.vpos-app table.dataTable td .vpos-status-pill.bg-info,
body.vpos-app table.table td .vpos-status-pill.bg-info,
body.vpos-app table.dataTable td .vpos-status-pill.label-info,
body.vpos-app table.table td .vpos-status-pill.label-info {
    border-color: var(--vpos-info, #0369a1) !important;
    background-color: var(--vpos-info, #0369a1) !important;
    color: #ffffff !important;
}

/* Draft, Suspended, Inactive */
body.vpos-app table.dataTable td .vpos-status-pill.bg-light-gray,
body.vpos-app table.table td .vpos-status-pill.bg-light-gray,
body.vpos-app table.dataTable td .vpos-status-pill.bg-gray,
body.vpos-app table.table td .vpos-status-pill.bg-gray,
body.vpos-app table.dataTable td .vpos-status-pill.label-default,
body.vpos-app table.table td .vpos-status-pill.label-default {
    border-color: var(--vpos-text-muted, #64748b) !important;
    background-color: var(--vpos-text-muted, #64748b) !important;
    color: #ffffff !important;
}

/* Status links should not underline or fade the badge */
body.vpos-app a.payment-status-label,
body.vpos-app a.vpos-payment-status-link {
    display: inline-flex;
    align-items: center;
    color: inherit !important;
    text-decoration: none !important;
    opacity: 1 !important;
}

/* Keep printed status labels readable */
@media print {
    body.vpos-app table td .vpos-status-pill {
        border: 1px solid #555555 !important;
        background: transparent !important;
        color: #000000 !important;
        box-shadow: none !important;
    }
}