/* Modern CSS for Supermarket POS System */
:root {
    /* ProfoundPOS shared design tokens. Keep legacy aliases below while the
       presentation layer is consolidated around this product palette. */
    --pp-primary: #123b5d;
    --pp-primary-hover: #0b2f4c;
    --pp-primary-soft: #eaf2f6;
    --pp-accent: #0f8588;
    --pp-accent-hover: #0b666c;
    --pp-accent-soft: #e8f7f6;
    --pp-bg: #edf3f6;
    --pp-surface: #ffffff;
    --pp-surface-subtle: #f7fafc;
    --pp-border: #cbd9e0;
    --pp-border-strong: #9fb6c2;
    --pp-text: #10263b;
    --pp-text-soft: #314a5b;
    --pp-muted: #607789;
    --pp-success: #16835f;
    --pp-success-soft: #e8f7ef;
    --pp-warning: #b76a0c;
    --pp-warning-soft: #fff4df;
    --pp-danger: #c83e50;
    --pp-danger-hover: #a92f40;
    --pp-danger-soft: #fcecef;
    --pp-info: #2563a6;
    --pp-info-soft: #e8f3fa;
    --pp-action-view: #2f6fa5;
    --pp-action-view-hover: #245985;
    --pp-action-edit: #6267a9;
    --pp-action-edit-hover: #4e548f;
    --pp-action-print: #52697b;
    --pp-action-print-hover: #405666;
    --pp-action-payment: #0f8588;
    --pp-action-payment-hover: #0b696d;
    --pp-action-success: #25815d;
    --pp-action-success-hover: #1c684a;
    --pp-action-warning: #b77418;
    --pp-action-warning-hover: #92590f;
    --pp-whatsapp: #128c4b;
    --pp-whatsapp-hover: #0c713c;
    --pp-table-header: #173f54;
    --pp-table-header-end: #245e70;
    --pp-control-height: 38px;
    --pp-radius-sm: 7px;
    --pp-radius-md: 10px;
    --pp-radius-lg: 14px;
    --pp-shadow-card: 0 8px 24px rgba(11, 45, 62, 0.08);
    --pp-shadow-card-hover: 0 13px 32px rgba(11, 45, 62, 0.12);
    --pp-focus-ring: 0 0 0 3px rgba(15, 133, 136, 0.16);
    --pp-space-1: 0.25rem;
    --pp-space-2: 0.5rem;
    --pp-space-3: 0.75rem;
    --pp-space-4: 1rem;
    --pp-space-5: 1.25rem;
    --pp-space-6: 1.5rem;
    --primary-color: #6366f1;
    --primary-dark: #4f46e5;
    --secondary-color: #06b6d4;
    --accent-color: #f59e0b;
    --danger-color: #ef4444;
    --success-color: #10b981;
    --warning-color: #f59e0b;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --border-radius: 8px;
    --border-radius-sm: 6px;
    --border-radius-lg: 12px;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    line-height: 1.6;
    color: var(--gray-800);
    background:
        radial-gradient(circle at 10% 18%, rgba(99, 102, 241, 0.12), transparent 32%),
        radial-gradient(circle at 88% 8%, rgba(6, 182, 212, 0.12), transparent 30%),
        linear-gradient(135deg, var(--gray-50) 0%, var(--gray-100) 100%);
    min-height: 100vh;
    position: relative;
}

/* subtle layered pattern for ambient depth */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='160' height='160' viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='1' y1='0' y2='1'%3E%3Cstop stop-color='%23ffffff' stop-opacity='0.25'/%3E%3Cstop offset='1' stop-color='%23ffffff' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 80 Q80 120 160 80 T320 80' stroke='url(%23g)' stroke-width='1.2' fill='none'/%3E%3C/svg%3E");
    opacity: 0.28;
    pointer-events: none;
    z-index: -1;
}

.header {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    color: white;
    padding: 1.5rem;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 700;
    box-shadow: var(--shadow-lg);
    position: relative;
    overflow: hidden;
    margin-left: 0;
}

.header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="75" cy="75" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="50" cy="10" r="0.5" fill="rgba(255,255,255,0.1)"/><circle cx="10" cy="50" r="0.5" fill="rgba(255,255,255,0.1)"/><circle cx="90" cy="30" r="0.5" fill="rgba(255,255,255,0.1)"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
    opacity: 0.1;
}

.user-info {
    background: var(--gray-800);
    color: white;
    padding: 1rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: var(--shadow);
    margin-left: 0;
}

.user-info span {
    font-weight: 600;
}

.user-info button {
    background: var(--danger-color);
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    font-weight: 500;
    transition: all 0.2s ease;
    box-shadow: var(--shadow-sm);
}

.user-info button:hover {
    background: #dc2626;
    transform: translateY(-1px);
    box-shadow: var(--shadow);
}

.login-container {
    max-width: 420px;
    width: min(420px, 92%);
    margin: 40px auto;
    background: white;
    padding: 2.5rem;
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--gray-200);
}

body.auth-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    padding: 0;
}
body.auth-page .header {
    width: 100%;
    max-width: none;
}
body.auth-page .login-container {
    align-self: center;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 600px) {
    .login-container {
        margin: 32px auto;
        padding: 2rem 1.5rem;
    }
}

.login-container h2 {
    text-align: center;
    margin-bottom: 2rem;
    color: var(--gray-900);
    font-weight: 700;
    font-size: 1.5rem;
}

.login-container input {
    width: 100%;
    padding: 0.875rem;
    margin: 0.5rem 0;
    border: 2px solid var(--gray-200);
    border-radius: var(--border-radius);
    font-size: 1rem;
    transition: all 0.2s ease;
    background: var(--gray-50);
}

.login-container input:focus {
    outline: none;
    border-color: var(--primary-color);
    background: white;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.login-container button {
    width: 100%;
    padding: 0.875rem;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    color: white;
    border: none;
    border-radius: var(--border-radius);
    cursor: pointer;
    font-size: 1rem;
    font-weight: 600;
    transition: all 0.2s ease;
    box-shadow: var(--shadow);
    margin-top: 1rem;
}

.login-container button:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.login-container button:active {
    transform: translateY(0);
}

#loginMessage {
    color: var(--danger-color);
    text-align: center;
    margin-top: 1rem;
    font-weight: 500;
    padding: 0.5rem;
    border-radius: var(--border-radius-sm);
    background: rgba(239, 68, 68, 0.1);
}

.tabs {
    display: flex;
    background: white;
    border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
    box-shadow: var(--shadow);
    margin-bottom: 0;
    overflow: hidden;
    border: 1px solid var(--gray-200);
    border-bottom: none;
}

.tabs button {
    flex: 1;
    padding: 1rem;
    border: none;
    font-size: 1rem;
    background: var(--gray-50);
    cursor: pointer;
    font-weight: 600;
    color: var(--gray-600);
    transition: all 0.2s ease;
    position: relative;
    border-bottom: 3px solid transparent;
}

.tabs button:hover {
    background: var(--gray-100);
    color: var(--primary-color);
}

.tabs button.active {
    background: white;
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
    box-shadow: inset 0 -3px 0 var(--primary-color);
}

.container {
    padding: 1.5rem;
    width: min(100%, max(980px, 84vw));
    max-width: 1600px;
    margin: 0 auto;
}

.pos-shell {
    display: grid;
    grid-template-columns: minmax(430px, 46%) minmax(460px, 1fr);
    gap: 12px;
    align-items: stretch;
    height: 100%;
    min-height: 0;
}

.pos-shell.pos-checkout-pending {
    cursor: progress;
}

.pos-cart-panel,
.pos-product-panel {
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    box-shadow: var(--shadow);
    padding: 12px;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.pos-cart-panel {
    display: flex;
    flex-direction: column;
}

.pos-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.pos-panel-head h3 {
    margin: 0;
    font-size: 1.1rem;
    color: var(--gray-900);
}

.pos-company-line {
    min-height: 18px;
    font-size: 0.84rem;
    color: var(--gray-500);
}

.pos-receipt-chip {
    border: 1px solid #bfdbfe;
    background: #eff6ff;
    color: #1d4ed8;
    padding: 8px 10px;
    border-radius: 8px;
    white-space: nowrap;
}

.pos-field-label {
    font-weight: 700;
    color: var(--gray-700);
    font-size: 0.86rem;
}

.pos-input {
    width: 100%;
    min-height: 40px;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    padding: 8px 10px;
    background: #fff;
    font-size: 0.98rem;
}

.pos-input:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.pos-customer-row {
    margin: 4px 0 8px;
}

.pos-cart-table-wrap,
.pos-product-list-wrap {
    overflow: auto;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
}

.pos-cart-table-wrap {
    flex: 1;
    min-height: 0;
}

.pos-cart-table,
.pos-product-list {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.pos-cart-table th,
.pos-cart-table td,
.pos-product-list th,
.pos-product-list td {
    padding: 10px;
    border-bottom: 1px solid var(--gray-200);
    text-align: left;
    vertical-align: middle;
}

.pos-cart-table th,
.pos-product-list th {
    background: #0f4ca3;
    color: white;
    font-size: 0.82rem;
}

.pos-cart-table th:nth-child(1) { width: 38%; }
.pos-cart-table th:nth-child(2) { width: 19%; }
.pos-cart-table th:nth-child(3) { width: 14%; }
.pos-cart-table th:nth-child(4) { width: 10%; }
.pos-cart-table th:nth-child(5) { width: 14%; }
.pos-cart-table th:nth-child(6) { width: 5%; }

.pos-cart-name {
    font-weight: 800;
    color: var(--gray-900);
    line-height: 1.25;
}

.pos-cart-meta {
    color: var(--gray-500);
    font-size: 0.78rem;
}

.pos-qty-control {
    display: grid;
    grid-template-columns: 32px minmax(44px, 1fr) 32px;
    align-items: center;
    gap: 4px;
}

.pos-icon-btn {
    min-width: 32px;
    min-height: 32px;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    background: var(--gray-50);
    cursor: pointer;
    font-weight: 900;
}

.pos-remove-btn {
    background: #fee2e2;
    border-color: #fecaca;
    color: #b91c1c;
}

.pos-total-box {
    margin-top: 8px;
    border-top: 1px dashed var(--gray-300);
    padding-top: 8px;
}

.pos-total-box div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 0;
}

.pos-grand-total {
    margin-top: 4px;
    padding-top: 8px !important;
    border-top: 1px solid var(--gray-200);
    font-size: 1.2rem;
    color: #0f4ca3;
}

.pos-payment-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 8px;
}

.pos-payment-grid label {
    font-size: 0.78rem;
    color: var(--gray-600);
    font-weight: 700;
}

.pos-action-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 8px;
}

.pos-btn {
    min-height: 44px;
    border: none;
    border-radius: 8px;
    color: white;
    font-weight: 800;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
}

.pos-btn-hold { background: #1d4ed8; }
.pos-btn-pay { background: #15803d; }
.pos-btn-print { background: #0f766e; }
.pos-btn-return { background: #475569; }
.pos-btn-cancel { background: #dc2626; }
.pos-btn-more { background: #7c3aed; }

.pos-message {
    min-height: 20px;
    margin-top: 6px;
    font-weight: 700;
}

.pos-product-panel {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pos-scan-row {
    display: grid;
    grid-template-columns: minmax(220px, 0.45fr) minmax(260px, 1fr);
    gap: 8px;
}

.pos-barcode-input {
    border-color: #93c5fd;
    background: #eff6ff;
    font-weight: 700;
}

.pos-search-results {
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    overflow: hidden;
    max-height: 220px;
    overflow-y: auto;
}

.pos-search-result {
    width: 100%;
    border: none;
    border-bottom: 1px solid var(--gray-200);
    background: white;
    padding: 10px 12px;
    text-align: left;
    cursor: pointer;
}

.pos-search-result:hover {
    background: #f8fafc;
}

.pos-section-title {
    font-weight: 900;
    color: var(--gray-900);
    letter-spacing: 0;
}

.pos-product-preview {
    min-height: 46px;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    background: #eff6ff;
    color: #1e3a8a;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    overflow: hidden;
}

.pos-product-preview span {
    color: #475569;
    font-size: 0.84rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pos-product-list-wrap {
    flex: 1;
    min-height: 0;
}

.pos-product-list tbody tr {
    cursor: pointer;
}

.pos-product-list tbody tr:hover {
    background: #f8fafc;
}

.pos-product-primary {
    font-weight: 900;
    color: var(--gray-900);
}

.pos-product-secondary {
    color: var(--gray-500);
    font-size: 0.78rem;
}

.pos-calculator {
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    padding: 8px;
    background: #f8fafc;
}

.pos-calculator-display {
    min-height: 36px;
    text-align: right;
    font-weight: 900;
    margin-bottom: 6px;
}

.pos-calculator-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
}

.pos-calculator-grid button {
    min-height: 34px;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    background: white;
    cursor: pointer;
    font-weight: 900;
    color: var(--gray-800);
}

.pos-calculator-grid button:hover {
    background: #eef2ff;
    border-color: #c7d2fe;
}

.pos-calc-zero {
    grid-column: span 4;
}

.hidden {
    display: none !important;
}

@media (max-width: 1180px) {
    #salesEntry {
        height: calc(100vh - 118px);
    }
    .pos-shell {
        grid-template-columns: 1fr;
        grid-template-rows: minmax(0, 1.15fr) minmax(0, 0.85fr);
    }
    .pos-cart-table-wrap,
    .pos-product-list-wrap {
        min-height: 0;
    }
}

@media (max-width: 720px) {
    #salesEntry {
        height: calc(100vh - 96px);
    }
    .pos-shell {
        gap: 10px;
    }
    .pos-payment-grid,
    .pos-action-grid,
    .pos-scan-row {
        grid-template-columns: 1fr;
    }
}

/* Responsive sidebar layout */
.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: white;
    border-bottom: 1px solid var(--gray-200);
    box-shadow: var(--shadow-sm);
    position: sticky;
    top: 0;
    z-index: 900;
}

.topbar-title {
    font-weight: 700;
    color: var(--gray-800);
}

.hamburger {
    width: 48px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #111;
    padding: 4px;
}

.hamburger span {
    display: block;
    width: 20px;
    height: 2px;
    background: #111;
    transition: all 0.2s ease;
}

.hamburger svg {
    display: block;
    color: #111;
    width: 100%;
    height: 100%;
}

.sidebar-open .hamburger span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.sidebar-open .hamburger span:nth-child(2) {
    opacity: 0;
}
.sidebar-open .hamburger span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 240px;
    background: white;
    box-shadow: var(--shadow-lg);
    transform: translateX(-110%);
    transition: transform 240ms ease, width 240ms ease;
    z-index: 950;
    display: flex;
    flex-direction: column;
    padding: 1rem;
}

.sidebar .sidebar-header {
    font-weight: 800;
    color: var(--gray-900);
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav-link {
    width: 100%;
    text-align: left;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--gray-200);
    border-radius: 10px;
    background: white;
    color: var(--gray-700);
    font-weight: 700;
    letter-spacing: 0.01em;
    transition: all 0.2s ease;
    box-shadow: var(--shadow-sm);
    margin-bottom: 8px;
}

.nav-link:hover {
    color: var(--primary-dark);
    border-color: var(--primary-color);
    transform: translateY(-1px);
}

.nav-link.active {
    color: white;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    border-color: transparent;
    box-shadow: var(--shadow-md);
}

.sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.35);
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease;
    z-index: 900;
}

.sidebar-open .sidebar {
    transform: translateX(0);
}
.sidebar-open #sidebarUser,
.sidebar-open #sidebar {
    transform: translateX(0);
}

.sidebar-open #sidebarOverlay,
.sidebar-open #sidebarOverlayUser {
    opacity: 1;
    pointer-events: auto;
}
.sidebar-open #sidebarUser,
.sidebar-open #sidebar {
    transform: translateX(0);
}

@media (min-width: 1024px) {
    .sidebar {
        transform: translateX(0);
        position: fixed;
        top: 0;
        left: 0;
    }
    .sidebar-overlay {
        display: none;
    }
    .topbar {
        display: none;
    }
    body.has-sidebar {
        padding-left: 0;
    }
    /* Shift main content (not header) to make room for sidebar */
    .user-info {
        margin-left: 0; /* bar flush */
        padding-left: calc(1.5rem + 260px);
    }
    .container {
        margin-left: 260px;
    }
    body.sidebar-collapsed .user-info {
        padding-left: calc(1.5rem + 72px);
    }
    body.sidebar-collapsed .container {
        margin-left: 72px;
    }
}

/* Sidebar collapse & submenu */
.collapse-btn {
    border: none;
    background: var(--gray-100);
    border-radius: 8px;
    padding: 4px 6px;
    cursor: pointer;
    transition: background 0.2s ease;
}
.collapse-btn:hover { background: var(--gray-200); }

.sidebar.sidebar-collapsed,
body.sidebar-collapsed .sidebar {
    width: 72px;
    padding: 1rem 0.6rem;
}
.sidebar.sidebar-collapsed .sidebar-header,
body.sidebar-collapsed .sidebar .sidebar-header {
    justify-content: center;
}
.sidebar.sidebar-collapsed .sidebar-title,
body.sidebar-collapsed .sidebar .sidebar-title,
.sidebar.sidebar-collapsed .nav-text,
body.sidebar-collapsed .sidebar .nav-text,
.sidebar.sidebar-collapsed .submenu-arrow,
body.sidebar-collapsed .sidebar .submenu-arrow,
.sidebar.sidebar-collapsed .submenu,
body.sidebar-collapsed .sidebar .submenu {
    display: none;
}
.sidebar.sidebar-collapsed .submenu.open,
body.sidebar-collapsed .sidebar .submenu.open {
    display: block;
    position: fixed;
    left: auto;
    min-width: 200px;
    background: white;
    border: 1px solid var(--gray-200);
    box-shadow: var(--shadow-md);
    padding: 8px 10px;
    border-radius: 10px;
    z-index: 1200;
    top: auto;
}
.sidebar.sidebar-collapsed .nav-link,
body.sidebar-collapsed .sidebar .nav-link {
    justify-content: center;
}
.sidebar.sidebar-collapsed .nav-link .nav-icon,
body.sidebar-collapsed .sidebar .nav-link .nav-icon {
    margin-right: 0;
}
.sidebar.sidebar-collapsed .nav-link:hover::after,
body.sidebar-collapsed .sidebar .nav-link:hover::after {
    content: attr(data-label);
    position: absolute;
    left: 78px;
    padding: 6px 10px;
    background: var(--gray-900);
    color: white;
    border-radius: 8px;
    box-shadow: var(--shadow);
    white-space: nowrap;
    z-index: 1000;
    font-size: 0.85rem;
}

.has-children .submenu-arrow {
    margin-left: auto;
    display: inline-flex;
    transition: transform 0.2s ease;
}
.has-children.open .submenu-arrow {
    transform: rotate(90deg);
}
.submenu {
    display: none;
    margin-left: 12px;
    border-left: 2px solid var(--gray-200);
    padding-left: 10px;
}
.has-children.open + .submenu,
.has-children + .submenu.open {
    display: block;
}
.nav-sublink {
    width: 100%;
    text-align: left;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    background: white;
    color: var(--gray-600);
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 6px;
    transition: all 0.2s ease;
}
.nav-sublink:hover {
    color: var(--primary-dark);
    border-color: var(--primary-color);
    transform: translateY(-1px);
}
.nav-sublink {
    font-size: 0.88rem;
    color: var(--gray-600);
}

/* Hover / active */
.nav-link {
    position: relative;
}
.nav-link::before {
    content: "";
    position: absolute;
    left: -8px;
    top: 8px;
    bottom: 8px;
    width: 4px;
    border-radius: 4px;
    background: transparent;
    transition: background 0.2s ease, transform 0.2s ease;
}
.nav-link.active::before {
    background: var(--primary-color);
    transform: scaleY(1);
}
.nav-link:hover {
    background: var(--gray-50);
}
.nav-link.active:hover {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    color: white;
    box-shadow: var(--shadow-md);
}
.nav-sublink:hover {
    background: var(--gray-50);
}
.has-children .submenu-arrow svg {
    transition: transform 0.2s ease;
}
.has-children.open .submenu-arrow svg {
    transform: rotate(90deg);
}
.collapse-btn svg {
    transition: transform 0.2s ease;
}
.collapse-btn svg.rotated {
    transform: rotate(180deg);
}

/* Icons */
.nav-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    color: var(--primary-dark);
}

/* Login page fix: no sidebar padding */
body:not(.has-sidebar) {
    padding-left: 0;
}

@media (max-width: 1023px) {
    body.has-sidebar {
        padding-left: 0;
    }
}

.hidden {
    display: none !important;
}

table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    margin-bottom: 1.5rem;
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    border: 1px solid var(--gray-200);
}

th,
td {
    border: 1px solid var(--gray-200);
    padding: 1rem;
    text-align: left;
}

th {
    background: linear-gradient(135deg, var(--gray-50) 0%, var(--gray-100) 100%);
    font-weight: 700;
    color: var(--gray-800);
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 2px solid var(--gray-300);
}

tbody tr:hover {
    background: var(--gray-50);
}

input, select {
    width: 100%;
    padding: 0.75rem;
    margin-bottom: 1rem;
    border: 2px solid var(--gray-200);
    border-radius: var(--border-radius);
    font-size: 1rem;
    transition: all 0.2s ease;
    background: white;
}

input:focus, select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

button {
    padding: 0.75rem 1.5rem;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    color: white;
    border: none;
    border-radius: var(--border-radius);
    cursor: pointer;
    font-weight: 600;
    font-size: 0.875rem;
    transition: all 0.2s ease;
    box-shadow: var(--shadow-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

button:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}

button:active {
    transform: translateY(0);
}

button.danger {
    background: linear-gradient(135deg, var(--danger-color) 0%, #dc2626 100%);
}

button.danger:hover {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
}

button.success {
    background: linear-gradient(135deg, var(--success-color) 0%, #059669 100%);
}

button.success:hover {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
}

.card {
    background: white;
    padding: 1.5rem;
    margin-bottom: 1rem;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    border: 1px solid var(--gray-200);
    transition: all 0.2s ease;
}

.card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.receipt-box {
    background: white;
    padding: 2rem;
    border: 2px solid var(--gray-300);
    border-radius: var(--border-radius);
    margin-top: 1rem;
    box-shadow: var(--shadow);
}

.receipt-box h3 {
    text-align: center;
    color: var(--gray-900);
    margin-bottom: 1.5rem;
    font-size: 1.25rem;
}

.receipt-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
    border: 1px solid var(--gray-200);
    border-radius: var(--border-radius);
    overflow: hidden;
}

.receipt-table th,
.receipt-table td {
    border: 1px solid var(--gray-200);
    padding: 0.75rem;
    text-align: left;
}

.receipt-table th {
    background: var(--gray-100);
    font-weight: 600;
}

.total {
    font-weight: 700;
    color: var(--primary-color);
    font-size: 1.1em;
}

.print-btn {
    margin-top: 1rem;
    width: 100%;
}

.filters {
    background: white;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    border: 1px solid var(--gray-200);
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: end;
}

.filters label {
    display: flex;
    flex-direction: column;
    font-weight: 600;
    color: var(--gray-700);
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.filters input,
.filters select {
    padding: 0.5rem;
    margin-top: 0.25rem;
    border: 1px solid var(--gray-300);
    border-radius: var(--border-radius-sm);
    font-size: 0.875rem;
    transition: all 0.2s ease;
}

.filters input:focus,
.filters select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.1);
}

.filters button {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    font-weight: 600;
    transition: all 0.2s ease;
    box-shadow: var(--shadow-sm);
    align-self: end;
}

.filters > span {
    align-self: end;
    display: flex;
    gap: 0.15rem;
    font-weight: 600;
    color: var(--gray-700);
}

.filters button:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow);
}

.accounts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin-top: 10px;
}

.accounts-card {
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--border-radius);
    padding: 12px;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.accounts-card span {
    color: var(--gray-600);
    font-weight: 600;
    letter-spacing: 0.02em;
}

.accounts-card strong {
    font-size: 1.1rem;
    color: var(--gray-900);
}

.accounts-card.highlight {
    border-color: var(--primary-color);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.12);
}

.sale-item {
    border: 2px solid var(--gray-200);
    padding: 1rem;
    margin-bottom: 1rem;
    border-radius: var(--border-radius);
    background: white;
    box-shadow: var(--shadow-sm);
    transition: all 0.2s ease;
}

.sale-item:hover {
    border-color: var(--primary-color);
    box-shadow: var(--shadow);
}

.sale-item button {
    background: linear-gradient(135deg, var(--danger-color) 0%, #dc2626 100%);
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    font-weight: 600;
    transition: all 0.2s ease;
    box-shadow: var(--shadow-sm);
}

.sale-item button:hover {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    transform: translateY(-1px);
    box-shadow: var(--shadow);
}

#saleSummary {
    background: linear-gradient(135deg, var(--gray-50) 0%, white 100%);
    border: 2px solid var(--gray-200);
    border-radius: var(--border-radius);
    padding: 1.5rem;
    box-shadow: var(--shadow);
}

#saleSummary div {
    margin-bottom: 0.75rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 500;
}

#saleSummary div:last-child {
    margin-bottom: 0;
    border-top: 2px solid var(--gray-300);
    padding-top: 1rem;
    font-weight: 700;
    font-size: 1.1em;
    color: var(--primary-color);
}

/* Utility */
.nowrap {
    white-space: nowrap;
}

/* Responsive Design */
@media (max-width: 768px) {
    .header {
        padding: 1rem;
        font-size: 1.25rem;
    }

    .user-info {
        padding: 0.75rem 1rem;
        flex-direction: column;
        gap: 0.5rem;
        text-align: center;
    }

    .login-container {
        margin: 1rem;
        padding: 2rem 1.5rem;
    }

    .tabs {
        flex-direction: column;
    }

    .tabs button {
        padding: 0.875rem;
    }

    .container {
        padding: 1rem;
    }

    .filters {
        flex-direction: column;
        align-items: stretch;
    }

    .filters label {
        margin-bottom: 0.5rem;
    }

    table {
        font-size: 0.875rem;
    }

    th, td {
        padding: 0.5rem;
    }

    .receipt-box {
        padding: 1rem;
    }
}

@media (max-width: 480px) {
    .header {
        font-size: 1.1rem;
    }

    .login-container {
        margin: 1.5rem 1rem;
        padding: 1.75rem 1.25rem;
    }

    .tabs button {
        padding: 0.75rem;
        font-size: 0.875rem;
    }

    .container {
        padding: 0.5rem;
    }

    th, td {
        padding: 0.25rem;
        font-size: 0.75rem;
    }

    button {
        padding: 0.5rem 1rem;
        font-size: 0.75rem;
    }
}

/* Print Styles */
@media print {
    body * {
        visibility: hidden;
    }

    .printable,
    .printable * {
        visibility: visible;
    }

    .printable {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        box-shadow: none;
        border: none;
    }

    button {
        display: none !important;
    }

    .header,
    .user-info,
    .tabs,
    .filters {
        display: none !important;
    }
}

/* Loading Animation */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.loading {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Focus states for accessibility */
button:focus,
input:focus,
select:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--gray-100);
}

::-webkit-scrollbar-thumb {
    background: var(--gray-400);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--gray-500);
}

/* Action buttons in tables */
.actions-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: stretch;
}
.action-btn {
    width: 100%;
    min-width: 110px;
    padding: 0.55rem 0.6rem;
    font-size: 0.85rem;
    line-height: 1.2;
}

.purchase-history-table {
    font-size: 11.5px;
    line-height: 1.25;
}

.purchase-history-table th,
.purchase-history-table td {
    padding: 0.34rem 0.42rem;
    vertical-align: top;
}

.purchase-history-table .action-cell {
    white-space: nowrap;
}

.purchase-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.purchase-actions .action-btn,
.purchase-actions button {
    width: auto;
    min-width: 54px;
    padding: 0.28rem 0.45rem;
    font-size: 11px;
    line-height: 1.15;
}

/* POS SaaS visual refresh */
:root {
    --primary-color: #2563eb;
    --primary-dark: #1d4ed8;
    --secondary-color: #0f766e;
    --accent-color: #f59e0b;
    --danger-color: #dc2626;
    --success-color: #16a34a;
    --warning-color: #d97706;
    --surface: #ffffff;
    --page-bg: #f6f7fb;
    --ink: #111827;
}

body {
    color: var(--ink);
    background: var(--page-bg);
}

body::before {
    display: none;
}

.header {
    background: #ffffff;
    color: var(--gray-900);
    border-bottom: 1px solid var(--gray-200);
    box-shadow: none;
    text-align: left;
    padding: 0.9rem 1.5rem;
    font-size: 1.05rem;
}

.header::before {
    display: none;
}

.app-brand {
    font-weight: 900;
    letter-spacing: 0;
}

.user-info {
    background: #ffffff;
    color: var(--gray-700);
    border-bottom: 1px solid var(--gray-200);
    box-shadow: none;
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
}

.user-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.muted-inline {
    color: var(--gray-500);
    font-weight: 600;
}

.user-info button,
button {
    border-radius: 8px;
    background: var(--primary-color);
    box-shadow: none;
    text-transform: none;
    letter-spacing: 0;
}

.user-info button {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

button:hover {
    transform: translateY(-1px);
}

.secondary-btn,
.text-btn {
    background: #eef2ff;
    color: var(--primary-dark);
    border: 1px solid #c7d2fe;
    box-shadow: none;
}

.text-btn {
    padding: 0.45rem 0.65rem;
    font-size: 0.78rem;
}

.sidebar {
    background: #0f172a;
    color: #e5e7eb;
    box-shadow: none;
    border-right: 1px solid #1e293b;
    gap: 2px;
}

.sidebar .sidebar-header {
    color: #ffffff;
}

.collapse-btn {
    background: #1e293b;
    color: #e2e8f0;
}

.nav-link,
.nav-sublink {
    background: transparent;
    color: #cbd5e1;
    border: 1px solid transparent;
    box-shadow: none;
    border-radius: 8px;
    margin-bottom: 4px;
}

.nav-icon {
    color: #93c5fd;
}

.nav-link:hover,
.nav-sublink:hover {
    background: #172554;
    color: #ffffff;
    border-color: #1e40af;
    transform: none;
}

.nav-link.active,
.nav-link.active:hover,
.nav-sublink.active {
    background: #2563eb;
    color: #ffffff;
    border-color: #2563eb;
    box-shadow: none;
}

.submenu {
    border-left-color: #334155;
}

.container {
    width: min(100%, max(980px, 84vw));
    max-width: 1600px;
    padding: 1.25rem;
    margin: 0 auto;
}

.admin-page .container {
    width: min(100%, max(980px, 84vw));
    max-width: 1600px;
}

.page-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.page-heading h2 {
    margin: 0;
    font-size: 1.6rem;
}

.page-heading p {
    margin: 0.2rem 0 0;
    color: var(--gray-500);
}

.card,
.panel,
.filters,
table {
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    box-shadow: none;
    background: #ffffff;
}

.card:hover {
    transform: none;
    box-shadow: none;
}

.panel {
    padding: 1rem;
    min-width: 0;
}

.panel-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.panel-title h3 {
    margin: 0;
    font-size: 1rem;
}

.metric-grid,
.dashboard-grid {
    display: grid;
    gap: 0.9rem;
}

.metric-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 1rem;
}

.dashboard-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.metric-card {
    background: #ffffff;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    padding: 1rem;
    min-height: 104px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.metric-card span,
.accounts-card span {
    color: var(--gray-500);
    font-size: 0.82rem;
    font-weight: 800;
}

.metric-card strong {
    font-size: 1.35rem;
    color: var(--gray-900);
}

.metric-card.warning {
    border-color: #fed7aa;
    background: #fff7ed;
}

.metric-card.danger {
    border-color: #fecaca;
    background: #fef2f2;
}

.table-scroll {
    overflow: auto;
    border-radius: 8px;
}

.compact-table table,
.pos-product-list,
.pos-cart-table {
    margin-bottom: 0;
}

th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #f8fafc;
    color: #475569;
    border-bottom: 1px solid var(--gray-200);
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.8rem;
}

td,
th {
    padding: 0.72rem 0.85rem;
}

.empty-state {
    color: var(--gray-500);
    text-align: center;
    padding: 1rem;
}

.status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 54px;
    padding: 0.22rem 0.45rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 800;
    background: #e0f2fe;
    color: #075985;
}

.status-pill.danger {
    background: #fee2e2;
    color: #991b1b;
}

.summary-list {
    display: grid;
    gap: 0.55rem;
}

.summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.65rem 0;
    border-bottom: 1px solid var(--gray-100);
}

.summary-row:last-child {
    border-bottom: 0;
}

.inventory-forecast-panel {
    margin-top: 1rem;
    overflow: hidden;
}

.inventory-forecast-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.9rem;
}

.inventory-forecast-heading h3 {
    margin: 0.12rem 0 0.2rem;
    font-size: 1.12rem;
}

.inventory-forecast-heading p {
    margin: 0;
    color: var(--gray-500);
    font-size: 0.86rem;
}

.inventory-forecast-kicker {
    color: var(--primary-color);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.inventory-forecast-updated {
    flex: 0 0 auto;
    color: var(--gray-500);
    font-size: 0.76rem;
    font-weight: 700;
}

.inventory-forecast-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.7rem;
    margin-bottom: 0.85rem;
}

.forecast-summary-card {
    width: 100%;
    min-height: 76px;
    margin: 0;
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    background: #f8fafc;
    color: var(--gray-900);
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.forecast-summary-card:hover {
    transform: none;
    filter: brightness(0.985);
}

.forecast-summary-card span {
    font-size: 0.78rem;
    font-weight: 800;
}

.forecast-summary-card strong {
    font-size: 1.35rem;
}

.forecast-summary-card.critical { background: #fef2f2; border-color: #fecaca; }
.forecast-summary-card.high { background: #fff7ed; border-color: #fed7aa; }
.forecast-summary-card.slow { background: #f8fafc; border-color: #cbd5e1; }
.forecast-summary-card.overstock { background: #eff6ff; border-color: #bfdbfe; }

.inventory-forecast-filters {
    display: grid;
    grid-template-columns: repeat(5, minmax(130px, 1fr)) auto;
    align-items: end;
    gap: 0.6rem;
    padding: 0.75rem;
    margin-bottom: 0.85rem;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    background: #f8fafc;
}

.inventory-forecast-filters label {
    color: #475569;
    font-size: 0.74rem;
    font-weight: 800;
}

.inventory-forecast-filters select {
    width: 100%;
    min-width: 0;
    margin: 0.3rem 0 0;
}

.forecast-clear-btn {
    min-height: 42px;
    margin: 0;
}

.inventory-forecast-state {
    padding: 1.5rem;
    border: 1px dashed var(--gray-300);
    border-radius: 8px;
    color: var(--gray-500);
    text-align: center;
}

.inventory-forecast-state.error {
    border-color: #fecaca;
    background: #fef2f2;
    color: #991b1b;
}

.inventory-forecast-state .text-btn {
    margin-left: 0.35rem;
}

.inventory-forecast-table-wrap {
    max-height: 620px;
    border: 1px solid var(--gray-200);
}

.inventory-forecast-table {
    min-width: 1180px;
    margin: 0;
    border: 0;
    border-radius: 0;
}

.inventory-forecast-table td {
    vertical-align: top;
}

.forecast-product-cell strong,
.forecast-action-cell strong {
    display: block;
}

.forecast-product-cell span,
.forecast-action-cell > span {
    display: block;
    margin-top: 0.16rem;
    color: var(--gray-500);
    font-size: 0.75rem;
}

.forecast-risk,
.forecast-confidence,
.forecast-trend {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    border-radius: 999px;
    padding: 0.24rem 0.48rem;
    font-size: 0.72rem;
    font-weight: 900;
}

.forecast-risk.critical { background: #fee2e2; color: #991b1b; }
.forecast-risk.high { background: #ffedd5; color: #9a3412; }
.forecast-risk.medium { background: #fef3c7; color: #92400e; }
.forecast-risk.low { background: #dcfce7; color: #166534; }
.forecast-confidence.high { background: #dcfce7; color: #166534; }
.forecast-confidence.medium { background: #e0f2fe; color: #075985; }
.forecast-confidence.low { background: #f1f5f9; color: #475569; }
.forecast-trend.rising { background: #dcfce7; color: #166534; }
.forecast-trend.falling { background: #fee2e2; color: #991b1b; }
.forecast-trend.stable { background: #f1f5f9; color: #475569; }

.forecast-explanation {
    margin-top: 0.38rem;
    color: var(--primary-color);
    font-size: 0.75rem;
}

.forecast-explanation summary {
    cursor: pointer;
    font-weight: 800;
}

.forecast-explanation p {
    min-width: 270px;
    margin: 0.38rem 0 0;
    color: #475569;
    line-height: 1.45;
}

.inventory-forecast-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 0.75rem;
    color: var(--gray-500);
    font-size: 0.78rem;
    font-weight: 700;
}

.inventory-forecast-pager > div {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.inventory-forecast-pager button {
    margin: 0;
    padding: 0.45rem 0.7rem;
}

@media (max-width: 1100px) {
    .inventory-forecast-filters {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .inventory-forecast-heading,
    .inventory-forecast-pager {
        align-items: stretch;
        flex-direction: column;
    }

    .inventory-forecast-summary,
    .inventory-forecast-filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .forecast-clear-btn {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .inventory-forecast-summary,
    .inventory-forecast-filters {
        grid-template-columns: 1fr;
    }
}

.filters {
    padding: 0.9rem;
    gap: 0.75rem;
    align-items: flex-end;
}

input,
select,
textarea,
.pos-input {
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    background: #ffffff;
    margin-bottom: 0.75rem;
}

textarea {
    width: 100%;
    padding: 0.75rem;
}

input:focus,
select:focus,
textarea:focus,
.pos-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.login-container {
    border-radius: 8px;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.08);
}

.login-mark {
    width: 54px;
    height: 54px;
    border-radius: 8px;
    background: #2563eb;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    margin: 0 auto 1rem;
}

.login-subtitle {
    color: var(--gray-500);
    text-align: center;
    margin: -1rem 0 1.5rem;
}

/* POS billing fit and quick product pad */
#salesEntry {
    height: calc(100vh - 112px);
}

.pos-shell {
    grid-template-columns: minmax(470px, 43%) minmax(620px, 1fr);
}

.pos-cart-panel,
.pos-product-panel {
    border-radius: 8px;
    box-shadow: none;
}

.pos-cart-table th,
.pos-product-list th {
    background: #f8fafc;
    color: #475569;
}

.pos-cart-table td,
.pos-product-list td {
    padding: 0.55rem 0.65rem;
}

.pos-qty-control {
    grid-template-columns: 30px minmax(54px, 1fr) 30px;
}

.pos-qty-input {
    min-height: 32px;
    padding: 0.25rem;
    margin: 0;
    text-align: center;
    font-weight: 800;
}

.pos-total-box {
    display: grid;
    gap: 0.15rem;
}

.pos-payment-grid,
.pos-action-grid {
    flex-shrink: 0;
}

.pos-btn {
    border-radius: 8px;
    min-height: 42px;
}

.pos-btn-hold { background: #2563eb; }
.pos-btn-pay { background: #16a34a; }
.pos-btn-print { background: #0f766e; }
.pos-btn-return { background: #475569; }
.pos-btn-cancel { background: #dc2626; }
.pos-btn-more { background: #7c3aed; }

.product-pad-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.product-pad-actions,
.quick-editor-actions {
    display: flex;
    gap: 0.45rem;
}

.quick-product-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-auto-rows: minmax(74px, 1fr);
    gap: 6px;
    min-height: 394px;
}

.quick-product-tile {
    padding: 0.35rem;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    background: #ffffff;
    color: var(--gray-900);
    box-shadow: none;
    display: grid;
    grid-template-rows: 28px 1fr auto;
    gap: 0.2rem;
    align-items: center;
    text-align: left;
    overflow: hidden;
}

.quick-product-tile:hover {
    border-color: var(--primary-color);
    background: #eff6ff;
}

.quick-product-tile.empty {
    color: var(--gray-400);
    place-items: center;
    text-align: center;
    background: #f8fafc;
}

.quick-product-image {
    width: 100%;
    height: 28px;
    border-radius: 6px;
    background: #dbeafe;
    color: #1d4ed8;
    background-size: cover;
    background-position: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
}

.quick-product-tile strong {
    font-size: 0.72rem;
    line-height: 1.1;
    max-height: 2.2em;
    overflow: hidden;
}

.quick-product-tile small {
    color: var(--gray-500);
    font-size: 0.68rem;
    font-weight: 800;
}

.quick-product-editor {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr 1fr auto;
    gap: 0.5rem;
    align-items: start;
}

.quick-product-editor .pos-input {
    margin-bottom: 0;
}

.pos-product-list-wrap {
    max-height: 190px;
}

.pos-calculator {
    padding: 6px;
}

.pos-calculator-grid button {
    min-height: 30px;
}

.toast-stack {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 3000;
    display: grid;
    gap: 8px;
}

.toast {
    background: #111827;
    color: #ffffff;
    padding: 0.75rem 0.9rem;
    border-radius: 8px;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.18);
    font-weight: 700;
}

.toast.error {
    background: #991b1b;
}

.pos-dialog-overlay {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(15, 23, 42, 0.38);
}

.pos-dialog {
    width: min(420px, 100%);
    max-height: min(520px, calc(100vh - 32px));
    overflow: auto;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.25);
    padding: 14px;
}

.pos-dialog-title {
    font-size: 16px;
    font-weight: 800;
    color: #111827;
    margin-bottom: 10px;
}

.pos-dialog-body {
    color: #374151;
    font-size: 13px;
}

.pos-dialog-field {
    display: grid;
    gap: 6px;
}

.pos-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 14px;
}

.pos-dialog-btn {
    border: 0;
    border-radius: 7px;
    padding: 9px 12px;
    font-weight: 800;
    cursor: pointer;
    background: #e5e7eb;
    color: #111827;
}

.pos-dialog-btn.primary {
    background: #0f766e;
    color: #fff;
}

.pos-dialog-btn.danger {
    background: #dc2626;
    color: #fff;
}

.pos-dialog-btn.secondary {
    background: #f3f4f6;
}

.whatsapp-receipt-note {
    display: grid;
    gap: 4px;
    margin-bottom: 13px;
    padding: 11px 12px;
    border: 1px solid #b9e5d3;
    border-radius: 9px;
    color: #14513c;
    background: #effbf6;
}

.whatsapp-receipt-note span,
.whatsapp-device-note {
    color: #526778;
    font-size: 0.76rem;
    line-height: 1.4;
}

.whatsapp-customer-number {
    margin-bottom: 12px;
    color: #1f3442;
    font-weight: 800;
}

.whatsapp-number-control {
    display: flex;
    overflow: hidden;
    border: 1px solid #aabfc8;
    border-radius: 8px;
    background: #fff;
}

.whatsapp-number-control strong {
    display: flex;
    align-items: center;
    padding: 0 11px;
    border-right: 1px solid #cbd5e1;
    color: #12613f;
    background: #e8f8f0;
}

.whatsapp-number-control input.pos-input {
    min-width: 0;
    width: 100%;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.whatsapp-option-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 9px 0;
    color: #253a48;
    font-size: 0.79rem;
    font-weight: 750;
    line-height: 1.35;
}

.whatsapp-option-row.optional {
    color: #536879;
    font-weight: 650;
}

.whatsapp-option-row input {
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    margin: 0;
}

.whatsapp-receipt-error {
    min-height: 18px;
    margin-top: 7px;
    color: #b42318;
    font-size: 0.77rem;
    font-weight: 800;
}

.whatsapp-device-note {
    margin: 5px 0 0;
}

#userSalesTable button.whatsapp-action {
    color: #ffffff;
    background: linear-gradient(135deg, #128c4b, #25a866);
    border-color: #128c4b;
}

.pos-held-sale-list {
    display: grid;
    gap: 8px;
}

.pos-held-sale-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    border: 1px solid #e5e7eb;
    border-radius: 7px;
    background: #f9fafb;
    color: #111827;
    padding: 9px 10px;
    text-align: left;
    cursor: pointer;
}

.pos-held-sale-row:hover {
    border-color: #0f766e;
    background: #eefdfa;
}

.pos-held-sale-row span,
.pos-held-sale-row strong {
    color: #111827;
    font-size: 12px;
    line-height: 1.25;
}

.pos-held-sale-row span {
    font-weight: 700;
}

.pos-held-sale-row strong {
    color: #0f766e;
}

#salesTable,
#userSalesTable,
#invoicesTable,
#customerTable,
#productsList {
    font-size: 11px;
}

#salesTable td,
#salesTable th,
#userSalesTable td,
#userSalesTable th,
#invoicesTable td,
#invoicesTable th,
#customerTable td,
#customerTable th,
#productsList td,
#productsList th {
    padding: 4px 6px;
    line-height: 1.15;
}

#salesTable .action-btn,
#userSalesTable button,
#invoicesTable button,
#customerTable button,
#productsList button {
    padding: 4px 7px;
    font-size: 11px;
}

.product-form-card {
    padding: 14px;
    margin-bottom: 12px;
}

.product-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(220px, 1fr));
    gap: 10px 14px;
}

.product-form-grid label,
.purchase-subnav + .card label {
    font-size: 12px;
    font-weight: 700;
    color: var(--gray-600);
}

.product-form-grid input,
.product-form-grid select {
    width: 100%;
    min-height: 34px;
    padding: 7px 9px;
    margin-top: 4px;
}

.product-planning-settings {
    grid-column: 1 / -1;
    margin: 2px 0 0;
    padding: 10px 12px;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    background: #f8fafc;
}

.product-planning-settings legend {
    padding: 0 5px;
    color: var(--gray-900);
    font-size: 0.82rem;
    font-weight: 900;
}

.product-planning-settings > p {
    margin: 0 0 8px;
    color: var(--gray-500);
    font-size: 0.72rem;
    line-height: 1.4;
}

.planning-settings-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(135px, 1fr));
    gap: 8px;
}

.field-help {
    display: block;
    margin-top: 5px;
    color: var(--gray-500);
    font-size: 10px;
    font-weight: 500;
    line-height: 1.35;
}

.barcode-studio-page {
    padding-bottom: 28px;
}

.barcode-studio-heading {
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 16px;
}

.barcode-studio-heading h2 {
    margin: 2px 0 5px;
}

.barcode-studio-heading p {
    max-width: 760px;
    margin: 0;
    color: var(--gray-600);
    font-size: 12px;
    line-height: 1.5;
}

.page-eyebrow {
    color: var(--primary);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.barcode-heading-actions,
.barcode-action-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.barcode-heading-actions {
    justify-content: flex-end;
    flex: 0 0 auto;
}

.barcode-studio-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.75fr);
    gap: 16px;
    align-items: start;
}

.barcode-studio-controls {
    display: grid;
    gap: 12px;
}

.barcode-control-card,
.barcode-preview-card,
.barcode-queue-card {
    margin: 0;
    padding: 16px;
    border: 1px solid var(--gray-200);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
}

.barcode-card-heading {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 13px;
}

.barcode-card-heading h3,
.barcode-queue-heading h3 {
    margin: 0;
    color: var(--gray-800);
    font-size: 14px;
}

.barcode-card-heading p,
.barcode-queue-heading p {
    margin: 3px 0 0;
    color: var(--gray-500);
    font-size: 10.5px;
    line-height: 1.35;
}

.barcode-step {
    display: inline-grid;
    place-items: center;
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    border-radius: 7px;
    background: linear-gradient(145deg, var(--primary), #0f766e);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    box-shadow: 0 4px 10px rgba(15, 118, 110, 0.22);
}

.barcode-control-card > label,
.barcode-form-grid > label,
.barcode-sheet-options > label {
    display: grid;
    gap: 5px;
    min-width: 0;
    color: var(--gray-600);
    font-size: 11px;
    font-weight: 700;
}

.barcode-control-card input,
.barcode-control-card select {
    width: 100%;
    min-height: 36px;
    margin: 0;
    padding: 7px 9px;
}

.barcode-form-grid {
    display: grid;
    gap: 10px;
}

.barcode-form-grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.barcode-form-grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.barcode-form-grid-code {
    grid-template-columns: minmax(150px, 0.35fr) minmax(240px, 1fr);
}

.barcode-selected-product {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    margin: 10px 0;
    padding: 10px 12px;
    border: 1px dashed var(--gray-300);
    border-radius: 9px;
    background: var(--gray-50);
    color: var(--gray-500);
    font-size: 10.5px;
}

.barcode-selected-product.selected {
    border-style: solid;
    border-color: rgba(13, 148, 136, 0.3);
    background: #f0fdfa;
    color: var(--gray-700);
}

.barcode-selected-product > div {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.barcode-selected-product strong,
.barcode-selected-product span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.barcode-selected-product strong {
    color: var(--gray-800);
    font-size: 11.5px;
}

.barcode-option-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    margin-top: 11px;
}

.barcode-option-grid label {
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 34px;
    padding: 7px 9px;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    background: var(--gray-50);
    color: var(--gray-700);
    font-size: 10.5px;
    font-weight: 700;
    cursor: pointer;
}

.barcode-option-grid input {
    width: 15px;
    min-height: 15px;
    margin: 0;
    padding: 0;
    accent-color: var(--primary);
}

.barcode-validation {
    min-height: 30px;
    margin: 10px 0;
    padding: 7px 9px;
    border-radius: 7px;
    background: var(--gray-50);
    color: var(--gray-600);
    font-size: 10.5px;
    line-height: 1.35;
}

.barcode-validation.valid {
    background: #ecfdf5;
    color: #047857;
}

.barcode-validation.invalid {
    background: #fff7ed;
    color: #9a3412;
}

.barcode-sheet-options {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 9px;
    margin-top: 10px;
    padding: 11px;
    border: 1px solid var(--gray-200);
    border-radius: 9px;
    background: var(--gray-50);
}

.barcode-action-row {
    margin-top: 12px;
}

.barcode-action-row button,
.barcode-heading-actions button {
    min-height: 34px;
}

.barcode-studio-preview {
    position: sticky;
    top: 72px;
    display: grid;
    gap: 12px;
}

.barcode-preview-toolbar,
.barcode-queue-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.barcode-preview-toolbar > div {
    display: grid;
    gap: 3px;
}

.barcode-preview-toolbar span {
    color: var(--gray-500);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.barcode-preview-toolbar strong {
    color: var(--gray-800);
    font-size: 12px;
}

.barcode-preview-toolbar .status-badge,
.barcode-selected-product .status-badge {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 4px 8px;
    border-radius: 999px;
    background: var(--gray-100);
    color: var(--gray-600);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.barcode-preview-toolbar .status-badge.success,
.barcode-selected-product .status-badge {
    background: #ccfbf1;
    color: #0f766e;
}

.barcode-designer-preview {
    display: grid;
    place-items: center;
    min-height: 300px;
    padding: 28px 18px;
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    background-color: #f8fafc;
    background-image: linear-gradient(45deg, #eef2f7 25%, transparent 25%), linear-gradient(-45deg, #eef2f7 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #eef2f7 75%), linear-gradient(-45deg, transparent 75%, #eef2f7 75%);
    background-position: 0 0, 0 8px, 8px -8px, -8px 0;
    background-size: 16px 16px;
}

.barcode-preview-scale {
    width: min(100%, 430px);
    max-height: 360px;
    background: #fff;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.18), 0 0 0 1px rgba(15, 23, 42, 0.08);
}

.barcode-preview-empty {
    display: grid;
    gap: 7px;
    max-width: 260px;
    text-align: center;
}

.barcode-preview-empty strong {
    color: var(--gray-700);
    font-size: 13px;
}

.barcode-preview-empty span,
.barcode-print-note {
    color: var(--gray-500);
    font-size: 10.5px;
    line-height: 1.45;
}

.barcode-print-note {
    margin: 10px 0 0;
}

.barcode-output-label {
    width: 100%;
    height: 100%;
    padding: 5% 6% 4%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: #fff;
    color: #111827;
    font-family: Arial, sans-serif;
}

.barcode-output-label.with-border {
    border: 2px solid #111827;
}

.barcode-output-company {
    flex: 0 0 auto;
    color: #475569;
    font-size: clamp(7px, 1.8vw, 12px);
    font-weight: 700;
    line-height: 1.1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.barcode-output-name {
    flex: 0 0 auto;
    max-height: 20%;
    overflow: hidden;
    color: #111827;
    font-size: clamp(9px, 2.25vw, 15px);
    font-weight: 800;
    line-height: 1.12;
}

.barcode-output-symbol {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    align-items: stretch;
    justify-content: center;
    overflow: hidden;
}

.barcode-label-symbol {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
}

.barcode-output-meta {
    flex: 0 0 auto;
    display: flex;
    justify-content: space-between;
    gap: 8px;
    min-height: 10%;
    color: #334155;
    font-size: clamp(7px, 1.7vw, 11px);
    line-height: 1.15;
}

.barcode-output-meta span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.barcode-output-meta strong {
    flex: 0 0 auto;
    color: #0f172a;
}

.barcode-queue-heading button {
    min-height: 32px;
}

.barcode-label-queue {
    display: grid;
    gap: 7px;
    max-height: 280px;
    overflow: auto;
}

.barcode-queue-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 28px;
    align-items: center;
    gap: 8px;
    padding: 8px 9px;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    background: var(--gray-50);
}

.barcode-queue-row > div {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.barcode-queue-row strong,
.barcode-queue-row span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.barcode-queue-row strong {
    color: var(--gray-800);
    font-size: 10.5px;
}

.barcode-queue-row span {
    color: var(--gray-500);
    font-size: 9.5px;
}

.barcode-queue-row label {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--gray-500);
    font-size: 9px;
    font-weight: 700;
}

.barcode-queue-row input {
    width: 52px;
    min-height: 28px;
    margin: 0;
    padding: 4px;
    text-align: center;
}

.barcode-queue-row button {
    width: 28px;
    min-height: 28px;
    padding: 0;
    border-radius: 6px;
    font-size: 17px;
    line-height: 1;
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 12px;
}

.purchase-subnav {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 8px 0 12px;
}

.purchase-subnav button {
    padding: 7px 10px;
    border: 1px solid var(--gray-200);
    background: white;
    color: var(--gray-700);
}

.purchase-subnav button.active {
    border-color: var(--primary);
    background: rgba(37, 99, 235, 0.08);
    color: var(--primary);
}

.supplier-list-view {
    display: block;
    font-size: 13px;
    color: var(--gray-700);
}

.suppliers-layout {
    align-items: stretch;
}

.supplier-create-card,
.supplier-list-card {
    min-height: 0;
}

.supplier-form-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    gap: 8px;
    align-items: end;
    margin-bottom: 10px;
}

.supplier-create-card .supplier-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.supplier-form-grid label {
    display: block;
    color: var(--gray-600);
    font-size: 0.74rem;
    font-weight: 800;
}

.supplier-form-grid input {
    min-height: 34px;
    padding: 7px 9px;
    font-size: 0.82rem;
}

.supplier-form-grid button,
.supplier-create-card > button {
    min-height: 34px;
    padding: 7px 12px;
    font-size: 0.82rem;
    white-space: nowrap;
}

.compact-data-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
    font-size: 0.8rem;
}

.compact-data-table th,
.compact-data-table td {
    padding: 6px 8px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    text-align: left;
    line-height: 1.2;
}

.compact-data-table th {
    background: rgba(15, 118, 110, 0.11);
    color: #0f172a;
    font-size: 0.72rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

@media (max-width: 820px) {
    .supplier-form-grid,
    .supplier-create-card .supplier-form-grid {
        grid-template-columns: 1fr;
    }

    .planning-settings-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.purchase-detail-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(130px, 1fr));
    gap: 8px;
    margin-bottom: 12px;
    font-size: 12px;
}

.compact-detail-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 10px;
    font-size: 11px;
}

.compact-detail-table th,
.compact-detail-table td {
    padding: 5px 6px;
    border-bottom: 1px solid var(--gray-200);
    text-align: left;
}

.admin-dialog-overlay {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: grid;
    place-items: center;
    padding: 18px;
    background: rgba(15, 23, 42, 0.42);
}

.admin-dialog {
    width: min(520px, 96vw);
    max-height: min(680px, 92vh);
    overflow: auto;
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: 10px;
    box-shadow: var(--shadow-lg);
}

.admin-dialog-header,
.admin-dialog-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--gray-200);
}

.admin-dialog-header h3 {
    margin: 0;
    font-size: 15px;
}

.admin-dialog-close {
    width: 30px;
    height: 30px;
    padding: 0;
    border-radius: 6px;
}

.admin-dialog-body {
    padding: 12px;
}

.admin-dialog-actions {
    justify-content: flex-end;
    border-top: 1px solid var(--gray-200);
    border-bottom: 0;
}

@media (max-width: 760px) {
    .product-form-grid,
    .purchase-detail-summary {
        grid-template-columns: 1fr;
    }

    .planning-settings-grid {
        grid-template-columns: 1fr;
    }

    .barcode-form-grid-2,
    .barcode-form-grid-3,
    .barcode-form-grid-code,
    .barcode-sheet-options,
    .barcode-option-grid {
        grid-template-columns: 1fr;
    }

    .barcode-heading-actions {
        width: 100%;
        justify-content: stretch;
    }

    .barcode-heading-actions button {
        flex: 1 1 0;
    }

    .barcode-designer-preview {
        min-height: 230px;
        padding: 18px 10px;
    }
}

@media (max-width: 1100px) {
    .barcode-studio-layout {
        grid-template-columns: 1fr;
    }

    .barcode-studio-preview {
        position: static;
    }
}

@media (max-width: 1220px) {
    .metric-grid,
    .dashboard-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .pos-shell {
        grid-template-columns: 1fr;
    }
    #salesEntry {
        height: auto;
        overflow: visible;
    }
}

/* Final compact POS fit pass */
body:not(.admin-page) {
    font-size: 13px;
}

body:not(.admin-page) .header {
    padding: 0.45rem 1rem;
    font-size: 0.95rem;
}

body:not(.admin-page) .user-info {
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
}

body:not(.admin-page) .container {
    padding: 0.55rem;
}

#salesEntry {
    height: calc(100vh - 78px);
}

.pos-shell {
    grid-template-columns: minmax(520px, 50%) minmax(520px, 50%);
    gap: 8px;
}

.pos-cart-panel,
.pos-product-panel {
    padding: 8px;
    border-radius: 8px;
}

.pos-cart-panel {
    grid-template-rows: auto auto minmax(0, 1fr) auto auto auto minmax(18px, auto);
}

.pos-panel-head {
    align-items: center;
    margin-bottom: 4px;
}

.pos-panel-head h3 {
    font-size: 0.98rem;
}

.pos-company-line {
    min-height: 14px;
    font-size: 0.72rem;
}

.pos-receipt-chip {
    padding: 4px 7px;
    font-size: 0.74rem;
}

.pos-field-label {
    font-size: 0.72rem;
}

.pos-input {
    min-height: 31px;
    padding: 5px 7px;
    font-size: 0.82rem;
    margin-bottom: 0;
}

.pos-customer-row {
    margin: 2px 0 5px;
}

.pos-cart-table {
    table-layout: fixed;
    font-size: 0.76rem;
}

.pos-cart-table th,
.pos-cart-table td {
    padding: 0.34rem 0.38rem;
    line-height: 1.15;
}

.pos-cart-table th:nth-child(1) { width: 44%; }
.pos-cart-table th:nth-child(2) { width: 24%; }
.pos-cart-table th:nth-child(3) { width: 12%; }
.pos-cart-table th:nth-child(4) { width: 16%; }
.pos-cart-table th:nth-child(5) { width: 4%; }

.pos-cart-name,
.pos-product-primary,
.quick-product-tile strong {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.pos-cart-name {
    font-size: 0.78rem;
    line-height: 1.12;
}

.pos-cart-meta {
    font-size: 0.66rem;
}

.pos-qty-control {
    grid-template-columns: 22px minmax(42px, 1fr) 22px;
    gap: 2px;
}

.pos-icon-btn {
    min-width: 22px;
    min-height: 24px;
    padding: 0;
    border-radius: 6px;
    font-size: 0.72rem;
}

.pos-qty-input {
    min-height: 24px;
    padding: 0 2px;
    font-size: 0.72rem;
}

.pos-total-box {
    margin-top: 4px;
    padding-top: 4px;
    font-size: 0.78rem;
}

.pos-total-box div {
    padding: 1px 0;
}

.pos-grand-total {
    font-size: 0.98rem;
}

.pos-payment-grid {
    grid-template-columns: minmax(0, 1fr) 145px;
    gap: 6px;
    margin-top: 4px;
}

.pos-payment-grid label {
    font-size: 0.68rem;
}

.pos-action-grid {
    grid-template-columns: 0.65fr 1.1fr 1.15fr 0.7fr 0.7fr 0.6fr;
    gap: 4px;
    margin-top: 5px;
}

.pos-btn {
    min-height: 34px;
    padding: 0.3rem 0.22rem;
    font-size: 0.68rem;
    line-height: 1.05;
    white-space: normal;
}

.pos-message {
    min-height: 16px;
    margin-top: 3px;
    font-size: 0.75rem;
}

.pos-product-panel {
    grid-template-rows: auto auto auto minmax(0, 1fr);
    gap: 6px;
}

.pos-scan-row {
    grid-template-columns: minmax(170px, 0.7fr) minmax(210px, 1fr);
    gap: 6px;
}

.pos-product-preview {
    min-height: 32px;
    padding: 4px 6px;
    font-size: 0.75rem;
}

.pos-product-preview span {
    font-size: 0.68rem;
}

.pos-section-title {
    font-size: 0.78rem;
}

.pos-right-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 230px;
    gap: 8px;
    min-height: 0;
    overflow: hidden;
}

.quick-product-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(4, minmax(0, 1fr));
    grid-auto-rows: unset;
    gap: 6px;
    min-height: 0;
    height: 100%;
    overflow: hidden;
}

.quick-product-tile {
    min-height: 0;
    padding: 0.36rem;
    border-radius: 7px;
}

.quick-product-tile strong {
    font-size: 0.68rem;
    line-height: 1.08;
    max-height: 2.2em;
}

.quick-product-tile small {
    font-size: 0.62rem;
}

.pos-side-tools {
    display: grid;
    grid-template-rows: 250px minmax(0, 1fr);
    gap: 8px;
    min-height: 0;
    overflow: hidden;
}

.pos-calculator {
    padding: 6px;
    min-height: 0;
    overflow: hidden;
}

.pos-calculator-display {
    min-height: 34px;
    margin-bottom: 5px;
    font-size: 0.95rem;
}

.pos-calculator-grid {
    gap: 5px;
}

.pos-calculator-grid button {
    min-height: 28px;
    padding: 0.2rem;
    font-size: 0.86rem;
    border-radius: 6px;
}

.pos-search-results-panel {
    min-height: 0;
    overflow: hidden;
}

.pos-product-list-wrap {
    min-height: 0;
    overflow: auto;
}

.pos-product-list {
    table-layout: fixed;
    font-size: 0.72rem;
}

.pos-product-list th,
.pos-product-list td {
    padding: 0.32rem 0.36rem;
    line-height: 1.12;
}

.pos-product-list th:nth-child(1) { width: 68%; }
.pos-product-list th:nth-child(2) { width: 32%; }

.pos-product-primary {
    font-size: 0.72rem;
    line-height: 1.1;
}

.pos-product-secondary {
    font-size: 0.62rem;
}

@media (max-width: 1220px) {
    #salesEntry {
        height: auto;
        overflow: visible;
    }
    .pos-shell {
        grid-template-columns: 1fr;
    }
}

/* Desktop sidebar offset: keep headers beside the fixed sidebar, not underneath it. */
@media (min-width: 1024px) {
    body.has-sidebar .header,
    body.has-sidebar .user-info,
    body.has-sidebar .container {
        margin-left: 240px;
        width: calc(100% - 240px);
    }

    body.sidebar-collapsed.has-sidebar .header,
    body.sidebar-collapsed.has-sidebar .user-info,
    body.sidebar-collapsed.has-sidebar .container {
        margin-left: 72px;
        width: calc(100% - 72px);
    }

    body.has-sidebar .user-info {
        padding-left: 1.5rem;
    }
}

/* Final premium skin override: keep this as the last visual layer */
:root {
    --primary: #2563eb;
    --primary-color: #2563eb;
    --primary-dark: #1e40af;
    --secondary-color: #0f766e;
    --accent-color: #f59e0b;
    --surface: #ffffff;
    --page-bg: #eef3fb;
    --ink: #0f172a;
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
    --shadow: 0 10px 26px rgba(15, 23, 42, 0.08);
    --shadow-lg: 0 18px 44px rgba(15, 23, 42, 0.13);
}

body {
    color: var(--ink);
    background: linear-gradient(180deg, #f8fbff 0%, #eef3fb 44%, #f6f7fb 100%);
    -webkit-font-smoothing: antialiased;
}

body.auth-page {
    background:
        radial-gradient(circle at 8% 10%, rgba(7, 114, 136, 0.72) 0%, rgba(7, 82, 104, 0.36) 28%, transparent 54%),
        radial-gradient(circle at 72% 94%, rgba(154, 38, 104, 0.62) 0%, rgba(92, 22, 83, 0.34) 24%, transparent 48%),
        radial-gradient(circle at 88% 8%, rgba(18, 15, 62, 0.88) 0%, rgba(9, 20, 52, 0.62) 36%, transparent 62%),
        linear-gradient(115deg, #073344 0%, #06243a 38%, #081638 68%, #130d31 100%);
    background-attachment: fixed;
}

.header,
.user-info,
.topbar {
    background: rgba(255, 255, 255, 0.94);
    border-bottom: 1px solid rgba(203, 213, 225, 0.72);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
    backdrop-filter: blur(12px);
}

body.auth-page .header {
    background: transparent;
    color: #ffffff;
    border: 0;
    box-shadow: none;
    justify-content: center;
    text-align: center;
}

.app-brand {
    display: flex;
    align-items: center;
    color: #0f172a;
    font-weight: 900;
}

.app-brand::before {
    content: "";
    flex: 0 0 auto;
    width: 12px;
    height: 12px;
    margin-right: 9px;
    border-radius: 4px;
    background: linear-gradient(135deg, #16a34a, #2563eb);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
}

body.auth-page .app-brand {
    color: #ffffff;
}

body.auth-page .app-brand::before {
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.16);
}

.sidebar {
    background: linear-gradient(180deg, #101827 0%, #12223a 52%, #0f172a 100%);
    border-right: 1px solid rgba(148, 163, 184, 0.16);
    box-shadow: 16px 0 40px rgba(15, 23, 42, 0.18);
}

.sidebar .sidebar-header {
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
}

.nav-link,
.nav-sublink {
    color: #cbd5e1;
    border-radius: 8px;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.nav-icon {
    color: #67e8f9;
}

.nav-link:hover,
.nav-sublink:hover {
    background: rgba(37, 99, 235, 0.22);
    color: #ffffff;
    border-color: rgba(96, 165, 250, 0.35);
    transform: translateX(2px);
}

.nav-link.active,
.nav-link.active:hover,
.nav-sublink.active {
    background: linear-gradient(135deg, #2563eb, #0f766e);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.16);
    box-shadow: 0 10px 22px rgba(37, 99, 235, 0.28);
}

.card,
.panel,
.filters,
table,
.metric-card,
.accounts-card,
.pos-cart-panel,
.pos-product-panel,
.pos-calculator,
.pos-search-results-panel,
.login-container {
    border: 1px solid rgba(203, 213, 225, 0.72);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: var(--shadow-sm);
}

.card:hover,
.panel:hover,
.metric-card:hover,
.accounts-card:hover {
    border-color: rgba(37, 99, 235, 0.28);
    box-shadow: var(--shadow);
    transform: translateY(-1px);
}

.page-heading {
    padding: 1rem;
    border: 1px solid rgba(203, 213, 225, 0.72);
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(255,255,255,0.96), rgba(248,250,252,0.92));
    box-shadow: var(--shadow-sm);
}

.metric-card {
    position: relative;
    overflow: hidden;
}

.metric-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: linear-gradient(90deg, #2563eb, #06b6d4, #16a34a);
}

.metric-card:nth-child(2)::before,
.metric-card:nth-child(6)::before {
    background: linear-gradient(90deg, #7c3aed, #2563eb);
}

.metric-card:nth-child(3)::before,
.metric-card:nth-child(7)::before {
    background: linear-gradient(90deg, #16a34a, #0f766e);
}

.metric-card:nth-child(4)::before,
.metric-card:nth-child(8)::before {
    background: linear-gradient(90deg, #f59e0b, #e11d48);
}

button {
    border-radius: 8px;
    border: 1px solid transparent;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.18);
    font-weight: 800;
    transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease, border-color 0.16s ease;
}

button:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 24px rgba(37, 99, 235, 0.22);
}

button.secondary,
.secondary-btn,
.text-btn,
.purchase-subnav button,
.pos-more-menu button {
    background: #eff6ff;
    color: #1d4ed8;
    border-color: #bfdbfe;
    box-shadow: none;
}

.user-info button {
    background: #fff1f2;
    color: #be123c;
    border: 1px solid #fecdd3;
    box-shadow: none;
}

input,
select,
textarea,
.pos-input {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    color: #0f172a;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

input:focus,
select:focus,
textarea:focus,
.pos-input:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}

th {
    background: #eef6ff;
    color: #1e3a8a;
    font-weight: 900;
}

td {
    color: #334155;
}

tbody tr:nth-child(even) {
    background: rgba(248, 250, 252, 0.66);
}

tbody tr:hover {
    background: #eff6ff;
}

.pos-cart-panel,
.pos-product-panel {
    border-color: rgba(37, 99, 235, 0.16);
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.09);
}

.pos-panel-head {
    padding-bottom: 7px;
    border-bottom: 1px solid rgba(203, 213, 225, 0.72);
}

.pos-receipt-chip {
    color: #1d4ed8;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
}

.pos-barcode-input {
    border-color: #93c5fd;
    background: #eff6ff;
    font-weight: 900;
}

.pos-cart-table th,
.pos-product-list th {
    background: #e0f2fe;
    color: #155e75;
}

.pos-grand-total {
    border-radius: 8px;
    background: linear-gradient(135deg, #0f172a, #1e40af);
    color: #ffffff;
}

.pos-grand-total span,
.pos-grand-total strong {
    color: #ffffff;
}

.quick-product-tile {
    border-color: rgba(203, 213, 225, 0.78);
    background: linear-gradient(180deg, #ffffff, #f8fafc);
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.05);
}

.quick-product-tile:hover {
    border-color: #38bdf8;
    background: linear-gradient(180deg, #ecfeff, #eff6ff);
    box-shadow: 0 10px 22px rgba(8, 145, 178, 0.14);
}

.pos-calculator-display {
    background: #0f172a;
    border-color: #0f172a;
    color: #ffffff;
    font-weight: 900;
}

.pos-calculator-grid button {
    background: #eef2ff;
    color: #1e3a8a;
    border: 1px solid #c7d2fe;
    box-shadow: none;
}

.pos-calculator-grid button:hover {
    background: #dbeafe;
}

.pos-btn-hold {
    background: linear-gradient(135deg, #2563eb, #0891b2);
}

.pos-btn-pay {
    background: linear-gradient(135deg, #16a34a, #0f766e);
}

.pos-btn-print {
    background: linear-gradient(135deg, #0f766e, #16a34a);
}

.pos-btn-cancel {
    background: linear-gradient(135deg, #e11d48, #be123c);
}

.pos-btn-more {
    background: linear-gradient(135deg, #7c3aed, #2563eb);
}

.pwa-status.online {
    background: #dcfce7;
    color: #166534;
    border: 1px solid #bbf7d0;
}

.pwa-status.offline {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

/* Brand harmony layer: carry login palette into the app without darkening workflows */
:root {
    --brand-ink: #071527;
    --brand-navy: #0b1635;
    --brand-blue: #1f5fd6;
    --brand-teal: #087b86;
    --brand-teal-soft: #e6fbfb;
    --brand-magenta: #a22568;
    --brand-magenta-soft: #fff0f7;
    --brand-line: rgba(32, 78, 121, 0.16);
}

body:not(.auth-page) {
    background:
        linear-gradient(180deg, rgba(232, 247, 250, 0.88) 0%, rgba(245, 248, 252, 0.98) 34%, #f7f8fb 100%);
}

.header,
.user-info,
.topbar {
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.96) 0%, rgba(246, 252, 253, 0.94) 58%, rgba(255, 246, 251, 0.92) 100%);
    border-bottom-color: var(--brand-line);
}

.app-brand {
    color: var(--brand-ink);
}

.app-brand::before {
    background: linear-gradient(135deg, var(--brand-teal), var(--brand-blue) 58%, var(--brand-magenta));
    box-shadow: 0 0 0 4px rgba(8, 123, 134, 0.11);
}

.sidebar {
    background:
        linear-gradient(180deg, #071527 0%, #0a1c37 48%, #130d31 100%);
}

.nav-icon {
    color: #5eead4;
}

.nav-link.active,
.nav-link.active:hover,
.nav-sublink.active,
.purchase-subnav button.active {
    background: linear-gradient(135deg, var(--brand-teal), var(--brand-blue) 62%, var(--brand-magenta));
    box-shadow: 0 10px 24px rgba(7, 21, 39, 0.22);
}

.page-heading,
.card,
.panel,
.filters,
.metric-card,
.accounts-card,
.product-form-card,
.purchase-subnav + .card {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 252, 253, 0.96));
    border-color: var(--brand-line);
}

.metric-card::before {
    background: linear-gradient(90deg, var(--brand-teal), var(--brand-blue), var(--brand-magenta));
}

.metric-card:nth-child(3)::before,
.metric-card:nth-child(7)::before {
    background: linear-gradient(90deg, #0f766e, #14b8a6);
}

.metric-card:nth-child(4)::before,
.metric-card:nth-child(8)::before {
    background: linear-gradient(90deg, #f59e0b, var(--brand-magenta));
}

button,
.login-container button {
    background: linear-gradient(135deg, var(--brand-blue), #2446b8);
    box-shadow: 0 8px 18px rgba(31, 95, 214, 0.18);
}

button:hover {
    box-shadow: 0 12px 24px rgba(31, 95, 214, 0.22);
}

button.secondary,
.secondary-btn,
.text-btn,
.purchase-subnav button,
.pos-more-menu button {
    background: #eef9fb;
    color: #075b68;
    border-color: rgba(8, 123, 134, 0.2);
}

input:focus,
select:focus,
textarea:focus,
.pos-input:focus {
    border-color: var(--brand-teal);
    box-shadow: 0 0 0 3px rgba(8, 123, 134, 0.14);
}

th,
.pos-cart-table th,
.pos-product-list th {
    background: #e8f7fa;
    color: #075b68;
}

tbody tr:hover {
    background: #eefafb;
}

.status-pill {
    background: var(--brand-teal-soft);
    color: #075b68;
    border-color: rgba(8, 123, 134, 0.18);
}

.status-pill.danger {
    background: var(--brand-magenta-soft);
    color: #9d174d;
    border-color: rgba(162, 37, 104, 0.16);
}

.pos-cart-panel,
.pos-product-panel {
    border-color: rgba(8, 123, 134, 0.18);
}

.pos-receipt-chip,
.pos-barcode-input {
    background: #e8f7fa;
    border-color: rgba(8, 123, 134, 0.24);
    color: #075b68;
}

.pos-grand-total {
    background: linear-gradient(135deg, var(--brand-ink), var(--brand-blue) 58%, var(--brand-magenta));
}

.quick-product-tile:hover {
    border-color: rgba(8, 123, 134, 0.38);
    background: linear-gradient(180deg, #f1fcfd, #f7f8ff);
    box-shadow: 0 10px 22px rgba(8, 123, 134, 0.14);
}

.quick-product-tile small {
    color: #075b68;
}

.pos-calculator-display {
    background: linear-gradient(135deg, var(--brand-ink), var(--brand-navy));
}

.pos-calculator-grid button {
    background: #eef9fb;
    color: #075b68;
    border-color: rgba(8, 123, 134, 0.2);
}

.pos-btn-hold {
    background: linear-gradient(135deg, var(--brand-blue), var(--brand-teal));
}

.pos-btn-pay,
.pos-btn-print {
    background: linear-gradient(135deg, #0f766e, #14b8a6);
}

.pos-btn-cancel {
    background: linear-gradient(135deg, var(--brand-magenta), #be123c);
}

.pos-btn-more {
    background: linear-gradient(135deg, var(--brand-magenta), var(--brand-blue));
}

/* Final admin inventory layout polish */
#warehouseTab {
    max-width: 1180px;
}

#warehouseTab .inventory-top-grid {
    display: grid;
    grid-template-columns: minmax(340px, 0.92fr) minmax(420px, 1.08fr);
    gap: 14px;
    align-items: stretch;
    margin-bottom: 14px;
}

#warehouseTab .inventory-card {
    padding: 12px;
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(248,251,252,0.98), rgba(235,243,247,0.98));
    border: 1px solid rgba(15, 45, 75, 0.16);
    box-shadow: 0 8px 20px rgba(15, 45, 75, 0.06);
}

#warehouseTab .inventory-card h3 {
    margin: 0 0 10px;
    font-size: 0.92rem;
    line-height: 1.2;
    color: #0b1f36;
}

#warehouseTab .inventory-create-card,
#warehouseTab .inventory-list-panel {
    min-height: 128px;
}

#warehouseTab .inventory-form-grid {
    display: grid;
    grid-template-columns: minmax(180px, 260px) 92px;
    gap: 8px;
    justify-content: center;
    align-items: center;
}

#warehouseTab #wName,
#warehouseTab #moveQuantity,
#warehouseTab .inventory-filters select,
#warehouseTab .inventory-filters input {
    height: 32px;
    min-height: 32px;
    padding: 5px 8px;
    font-size: 12px;
    margin: 0;
}

#warehouseTab .inventory-card button,
#warehouseTab #warehouseList button {
    height: 32px;
    min-height: 32px;
    padding: 5px 10px;
    font-size: 11.5px;
    line-height: 1;
    border-radius: 8px;
    white-space: nowrap;
}

#warehouseTab .inventory-list-card {
    display: grid;
    gap: 7px;
    max-height: 170px;
    min-height: 72px;
    overflow: auto;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

#warehouseTab #warehouseList .card {
    display: grid;
    grid-template-columns: minmax(120px, 1fr) auto auto;
    gap: 7px;
    align-items: center;
    min-height: 36px;
    margin: 0;
    padding: 7px 8px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(15, 45, 75, 0.12);
    box-shadow: none;
    font-size: 11.5px;
}

#warehouseTab #warehouseList .card b {
    color: #0b1f36;
    font-size: 12px;
}

#warehouseTab #warehouseList .card button {
    margin-left: 0 !important;
}

#warehouseTab .inventory-move-card {
    margin-top: 0;
}

#warehouseTab .inventory-filters {
    display: grid;
    grid-template-columns: minmax(130px, 1fr) minmax(130px, 1fr) minmax(210px, 1.4fr) 92px 82px;
    gap: 8px;
    align-items: center;
    padding: 0;
    margin: 0 0 9px;
    border: 0;
    background: transparent;
    box-shadow: none;
}

#warehouseTab .inventory-table {
    margin: 0;
    font-size: 11.5px;
}

#warehouseTab .inventory-table th,
#warehouseTab .inventory-table td {
    padding: 5px 7px;
    line-height: 1.15;
}

#warehouseTab .inventory-move-card > button {
    margin-top: 8px !important;
    min-width: 100px;
}

#warehouseTab #moveMessage {
    margin-top: 6px;
    min-height: 14px;
    font-size: 11.5px;
}

#warehouseTab .inventory-history-card {
    margin-top: 12px;
}

#warehouseTab .inventory-history-filters {
    grid-template-columns: repeat(4, minmax(120px, 1fr)) 76px 76px;
    margin-bottom: 8px;
}

#warehouseTab .inventory-history-filters label {
    color: #475569;
    font-size: 11px;
    font-weight: 850;
}

#warehouseTab .inventory-history-filters input,
#warehouseTab .inventory-history-filters select {
    width: 100%;
    min-height: 30px;
    margin-top: 3px;
    padding: 5px 7px;
    font-size: 11.5px;
}

#warehouseTab .inventory-history-table th,
#warehouseTab .inventory-history-table td {
    padding: 4px 6px;
    font-size: 11.5px;
    line-height: 1.12;
}

#warehouseTab .inventory-history-pager {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
    margin-top: 7px;
}

#warehouseTab .inventory-history-pager button {
    min-height: 28px;
    padding: 4px 9px;
    font-size: 11px;
}

@media (max-width: 980px) {
    #warehouseTab .inventory-top-grid,
    #warehouseTab .inventory-form-grid,
    #warehouseTab .inventory-filters,
    #warehouseTab .inventory-history-filters,
    #warehouseTab #warehouseList .card {
        grid-template-columns: 1fr;
    }

}

/* Refined darker professional theme and compact customer/inventory screens */
:root {
    --brand-ink: #061323;
    --brand-navy: #0a1830;
    --brand-blue: #2456b8;
    --brand-teal: #08727c;
    --brand-magenta: #7d2458;
    --brand-surface: #f3f7fa;
    --brand-surface-strong: #e9f1f5;
    --brand-card: rgba(248, 251, 252, 0.96);
    --brand-line: rgba(15, 45, 75, 0.18);
}

body:not(.auth-page) {
    background:
        radial-gradient(circle at 4% 0%, rgba(8, 114, 124, 0.12), transparent 34%),
        radial-gradient(circle at 96% 8%, rgba(36, 86, 184, 0.10), transparent 38%),
        linear-gradient(180deg, #dde9f0 0%, #eef3f6 42%, #f5f7fa 100%);
}

.header,
.user-info,
.topbar {
    background: linear-gradient(90deg, rgba(240, 247, 250, 0.98) 0%, rgba(231, 241, 246, 0.98) 100%);
    border-bottom-color: var(--brand-line);
}

.sidebar {
    background: linear-gradient(180deg, #061323 0%, #0a1830 58%, #0c2036 100%);
}

.nav-link.active,
.nav-link.active:hover,
.nav-sublink.active,
.purchase-subnav button.active {
    background: linear-gradient(135deg, #08727c, #2456b8);
    box-shadow: 0 10px 22px rgba(6, 19, 35, 0.24);
}

.metric-card::before {
    background: linear-gradient(90deg, #08727c, #2456b8);
}

.metric-card:nth-child(4)::before,
.metric-card:nth-child(8)::before {
    background: linear-gradient(90deg, #d97706, #7d2458);
}

.page-heading,
.card,
.panel,
.filters,
.metric-card,
.accounts-card,
.product-form-card,
.purchase-subnav + .card,
.customer-form-card,
.inventory-card,
.inventory-list-card {
    background: linear-gradient(180deg, var(--brand-card), #eef4f7);
    border-color: var(--brand-line);
}

.pos-cart-panel,
.pos-product-panel,
.pos-search-results-panel,
.pos-calculator {
    background: linear-gradient(180deg, rgba(248, 251, 252, 0.98), rgba(235, 243, 247, 0.98));
    border-color: rgba(8, 114, 124, 0.2);
}

button,
.login-container button {
    background: linear-gradient(135deg, #2456b8, #1d3f88);
}

.pos-grand-total {
    background: linear-gradient(135deg, #061323, #14366f);
}

.pos-btn-hold {
    background: linear-gradient(135deg, #2456b8, #08727c);
}

.pos-btn-pay,
.pos-btn-print {
    background: linear-gradient(135deg, #08727c, #0f766e);
}

.pos-btn-cancel {
    background: linear-gradient(135deg, #9f1239, #7d2458);
}

.pos-btn-more {
    background: linear-gradient(135deg, #334155, #2456b8);
}

.quick-product-tile:hover {
    border-color: rgba(8, 114, 124, 0.4);
    background: linear-gradient(180deg, #eaf8f9, #eef3fa);
}

#customerTab > h3,
#warehouseTab > h3,
#stockTabUser > h3 {
    margin-top: 0.65rem;
    margin-bottom: 0.55rem;
    font-size: 1rem;
    color: #10253f;
}

.customer-form-card,
.inventory-card {
    padding: 12px;
    margin-bottom: 12px;
}

.customer-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(180px, 1fr));
    gap: 8px 10px;
}

.customer-form-grid input,
.inventory-form-grid input,
.inventory-form-grid select,
.inventory-filters input,
.inventory-filters select,
#warehouseTab input,
#warehouseTab select,
#stockTabUser input,
#stockTabUser select {
    min-height: 32px;
    padding: 6px 8px;
    margin-bottom: 0;
    font-size: 12px;
}

.customer-form-card .form-actions {
    margin-top: 10px;
}

.customer-form-card button,
.inventory-card button,
#warehouseTab > button {
    min-height: 32px;
    padding: 6px 10px;
    font-size: 12px;
}

.inventory-form-grid {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) 150px auto;
    gap: 8px;
    align-items: center;
}

.inventory-list-card {
    padding: 10px 12px;
    margin-bottom: 12px;
    font-size: 12px;
}

.inventory-list-card div,
#warehouseList div {
    padding: 4px 0;
}

.inventory-filters {
    padding: 8px;
    gap: 8px;
    margin-bottom: 8px;
}

.inventory-filters label {
    font-size: 12px;
}

.inventory-table,
#warehouseTab table,
#stockTabUser table {
    font-size: 11.5px;
}

.inventory-table th,
.inventory-table td,
#warehouseTab table th,
#warehouseTab table td,
#stockTabUser table th,
#stockTabUser table td {
    padding: 5px 7px;
    line-height: 1.18;
}

#customerTab .filters {
    padding: 8px;
    gap: 8px;
}

#customerTab .filters label {
    font-size: 12px;
}

#customerTab .filters input,
#customerTab .filters select {
    min-height: 30px;
    padding: 5px 7px;
    font-size: 12px;
}

@media (max-width: 760px) {
    .customer-form-grid,
    .inventory-form-grid {
        grid-template-columns: 1fr;
    }
}

.toast {
    background: linear-gradient(135deg, var(--brand-ink), var(--brand-navy));
}

.pwa-status.online {
    background: #dff8ea;
    color: #14532d;
    border-color: #bdeed0;
}

/* Admin inventory tab refinement */
#warehouseTab {
    max-width: 1120px;
}

.inventory-top-grid {
    display: grid;
    grid-template-columns: minmax(320px, 0.9fr) minmax(360px, 1.1fr);
    gap: 12px;
    align-items: start;
}

#warehouseTab > h3,
.inventory-top-grid h3 {
    margin: 0 0 6px;
    font-size: 0.95rem;
    font-weight: 900;
    color: #10253f;
}

.inventory-card,
.inventory-list-card {
    border-radius: 8px;
    padding: 10px;
}

.inventory-create-card {
    min-height: 0;
}

.inventory-form-grid {
    grid-template-columns: minmax(180px, 1fr) 112px 128px;
    gap: 7px;
}

.inventory-form-grid input,
.inventory-form-grid select {
    width: 100%;
}

.inventory-card button,
.inventory-form-grid button,
.inventory-filters button,
#warehouseList button {
    min-height: 30px;
    padding: 5px 9px;
    font-size: 11.5px;
    line-height: 1.1;
    white-space: nowrap;
}

.inventory-list-card {
    display: grid;
    gap: 6px;
    min-height: 52px;
    max-height: 178px;
    overflow: auto;
}

#warehouseList .card {
    display: grid;
    grid-template-columns: minmax(120px, 1fr) auto auto;
    align-items: center;
    gap: 7px;
    padding: 7px 8px;
    margin: 0;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: none;
    font-size: 11.5px;
    line-height: 1.2;
}

#warehouseList .card b {
    color: #0b1f36;
    font-size: 12px;
}

#warehouseList .card button {
    margin-left: 0 !important;
}

.inventory-move-card {
    padding: 10px;
}

.inventory-filters {
    display: grid;
    grid-template-columns: minmax(140px, 1fr) minmax(140px, 1fr) minmax(190px, 1.3fr) 96px 88px;
    align-items: center;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.inventory-filters select,
.inventory-filters input {
    width: 100%;
}

.inventory-table {
    margin-top: 8px;
}

.inventory-table th,
.inventory-table td {
    padding: 4px 6px;
}

#warehouseTab .inventory-move-card > button {
    margin-top: 7px !important;
    min-width: 112px;
}

#moveMessage {
    margin-top: 5px;
    min-height: 14px;
    font-size: 11.5px;
    font-weight: 700;
}

@media (max-width: 980px) {
    .inventory-top-grid,
    .inventory-form-grid,
    .inventory-filters,
    #warehouseList .card {
        grid-template-columns: 1fr;
    }
}

/* Premium POS UX layer: visual polish only, no layout/functionality changes */
:root {
    --primary: #2563eb;
    --primary-color: #2563eb;
    --primary-dark: #1e40af;
    --secondary-color: #0f766e;
    --accent-color: #f59e0b;
    --violet: #7c3aed;
    --rose: #e11d48;
    --cyan: #0891b2;
    --green: #16a34a;
    --amber: #d97706;
    --surface: #ffffff;
    --surface-soft: #f8fafc;
    --page-bg: #eef3fb;
    --ink: #0f172a;
    --line-soft: rgba(148, 163, 184, 0.28);
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
    --shadow: 0 10px 26px rgba(15, 23, 42, 0.08);
    --shadow-lg: 0 18px 44px rgba(15, 23, 42, 0.13);
}

html {
    scroll-behavior: smooth;
}

body {
    color: var(--ink);
    background:
        linear-gradient(180deg, #f8fbff 0%, #eef3fb 42%, #f6f7fb 100%);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body.auth-page {
    background:
        linear-gradient(135deg, #0f766e 0%, #2563eb 52%, #7c3aed 100%);
}

body.auth-page .header {
    background: transparent;
    color: #ffffff;
    border: 0;
    box-shadow: none;
    justify-content: center;
    text-align: center;
}

.header {
    display: flex;
    align-items: center;
    min-height: 52px;
    background: rgba(255, 255, 255, 0.94);
    border-bottom: 1px solid rgba(203, 213, 225, 0.72);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
    backdrop-filter: blur(12px);
}

.app-brand {
    color: #0f172a;
    font-size: 1.08rem;
    font-weight: 900;
}

.app-brand::before {
    content: "";
    width: 12px;
    height: 12px;
    margin-right: 9px;
    border-radius: 4px;
    background: linear-gradient(135deg, #16a34a, #2563eb);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
}

body.auth-page .app-brand::before {
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.16);
}

.user-info {
    background: rgba(255, 255, 255, 0.9);
    border-bottom: 1px solid rgba(203, 213, 225, 0.7);
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
    backdrop-filter: blur(12px);
}

.user-info strong {
    color: #0f172a;
}

.user-actions span {
    padding: 0.34rem 0.58rem;
    border: 1px solid rgba(148, 163, 184, 0.32);
    border-radius: 8px;
    background: #f8fafc;
    color: #334155;
    font-size: 0.82rem;
}

.user-info button {
    background: #fff1f2;
    color: #be123c;
    border: 1px solid #fecdd3;
}

.user-info button:hover {
    background: #ffe4e6;
    color: #9f1239;
}

.sidebar {
    background:
        linear-gradient(180deg, #101827 0%, #12223a 52%, #0f172a 100%);
    border-right: 1px solid rgba(148, 163, 184, 0.16);
    box-shadow: 16px 0 40px rgba(15, 23, 42, 0.18);
}

.sidebar .sidebar-header {
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
    margin-bottom: 0.45rem;
}

.sidebar-title {
    color: #f8fafc;
    font-weight: 900;
}

.collapse-btn {
    background: rgba(255, 255, 255, 0.08);
    color: #dbeafe;
    border: 1px solid rgba(147, 197, 253, 0.22);
}

.nav-link,
.nav-sublink {
    position: relative;
    color: #cbd5e1;
    border-radius: 8px;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.nav-icon {
    color: #67e8f9;
}

.nav-link:hover,
.nav-sublink:hover {
    background: rgba(37, 99, 235, 0.22);
    color: #ffffff;
    border-color: rgba(96, 165, 250, 0.35);
    transform: translateX(2px);
}

.nav-link.active,
.nav-link.active:hover,
.nav-sublink.active {
    background: linear-gradient(135deg, #2563eb, #0f766e);
    border-color: rgba(255, 255, 255, 0.16);
    color: #ffffff;
    box-shadow: 0 10px 22px rgba(37, 99, 235, 0.28);
}

.nav-link.active .nav-icon,
.nav-sublink.active {
    color: #ffffff;
}

.topbar {
    background: rgba(255, 255, 255, 0.94);
    border-bottom: 1px solid rgba(203, 213, 225, 0.72);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
}

.hamburger {
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
}

.container {
    color: #0f172a;
}

h2,
h3,
h4 {
    color: #0f172a;
}

.page-heading {
    padding: 1rem;
    border: 1px solid rgba(203, 213, 225, 0.72);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.96), rgba(248,250,252,0.92));
    box-shadow: var(--shadow-sm);
}

.page-heading h2 {
    font-weight: 900;
}

.page-heading p,
.muted-inline {
    color: #64748b;
}

.card,
.panel,
.filters,
table,
.metric-card,
.accounts-card,
.pos-cart-panel,
.pos-product-panel,
.pos-calculator,
.pos-search-results-panel {
    border: 1px solid rgba(203, 213, 225, 0.72);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: var(--shadow-sm);
}

.card,
.panel,
.metric-card,
.accounts-card {
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.card:hover,
.panel:hover,
.metric-card:hover,
.accounts-card:hover {
    border-color: rgba(37, 99, 235, 0.28);
    box-shadow: var(--shadow);
    transform: translateY(-1px);
}

.metric-card {
    position: relative;
    overflow: hidden;
    min-height: 112px;
}

.metric-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: linear-gradient(90deg, #2563eb, #06b6d4, #16a34a);
}

.metric-card:nth-child(2)::before,
.metric-card:nth-child(6)::before {
    background: linear-gradient(90deg, #7c3aed, #2563eb);
}

.metric-card:nth-child(3)::before,
.metric-card:nth-child(7)::before {
    background: linear-gradient(90deg, #16a34a, #0f766e);
}

.metric-card:nth-child(4)::before,
.metric-card:nth-child(8)::before {
    background: linear-gradient(90deg, #f59e0b, #e11d48);
}

.metric-card span,
.accounts-card span {
    color: #64748b;
    font-size: 0.78rem;
}

.metric-card strong,
.accounts-card strong {
    color: #0f172a;
}

button,
.pos-dialog-btn,
.admin-dialog-actions button {
    border-radius: 8px;
    border: 1px solid transparent;
    font-weight: 800;
    transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease, border-color 0.16s ease;
}

button {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.18);
}

button:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 24px rgba(37, 99, 235, 0.22);
}

button:active {
    transform: translateY(0);
}

button.secondary,
.secondary-btn,
.text-btn,
.purchase-subnav button,
.pos-more-menu button {
    background: #eff6ff;
    color: #1d4ed8;
    border-color: #bfdbfe;
    box-shadow: none;
}

button.danger,
.pos-btn-cancel {
    background: linear-gradient(135deg, #e11d48, #be123c);
    box-shadow: 0 8px 18px rgba(225, 29, 72, 0.18);
}

button.success,
.pos-btn-pay {
    background: linear-gradient(135deg, #16a34a, #0f766e);
    box-shadow: 0 8px 18px rgba(22, 163, 74, 0.18);
}

.pos-btn-hold {
    background: linear-gradient(135deg, #2563eb, #0891b2);
}

.pos-btn-print {
    background: linear-gradient(135deg, #0f766e, #16a34a);
}

.pos-btn-return {
    background: linear-gradient(135deg, #475569, #334155);
}

.pos-btn-more {
    background: linear-gradient(135deg, #7c3aed, #2563eb);
}

input,
select,
textarea,
.pos-input {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    color: #0f172a;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

input:hover,
select:hover,
textarea:hover,
.pos-input:hover {
    border-color: #94a3b8;
}

input:focus,
select:focus,
textarea:focus,
.pos-input:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}

.filters {
    background: linear-gradient(180deg, #ffffff, #f8fafc);
}

table {
    overflow: hidden;
    border-collapse: separate;
    border-spacing: 0;
}

th {
    background: #eef6ff;
    color: #1e3a8a;
    font-weight: 900;
}

td {
    color: #334155;
}

tbody tr {
    transition: background 0.14s ease;
}

tbody tr:nth-child(even) {
    background: rgba(248, 250, 252, 0.66);
}

tbody tr:hover {
    background: #eff6ff;
}

.status-pill {
    border: 1px solid rgba(14, 116, 144, 0.2);
    background: #ecfeff;
    color: #0e7490;
}

.status-pill.danger,
.metric-card.danger {
    background: #fff1f2;
    color: #9f1239;
}

.metric-card.warning {
    background: #fffbeb;
}

.login-container {
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.62);
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.28);
}

.login-mark {
    background: linear-gradient(135deg, #16a34a, #2563eb);
    box-shadow: 0 12px 24px rgba(37, 99, 235, 0.28);
}

.login-container h2 {
    color: #0f172a;
    font-size: 1.6rem;
}

.login-subtitle {
    color: #64748b;
}

#loginMessage:empty {
    display: none;
}

#loginMessage {
    background: #fff1f2;
    border: 1px solid #fecdd3;
    color: #be123c;
}

/* Premium POS billing surface */
body:not(.admin-page) {
    background:
        linear-gradient(180deg, #f7fbff 0%, #edf4fb 100%);
}

body:not(.admin-page) .header,
body:not(.admin-page) .user-info {
    min-height: 44px;
}

#salesEntry {
    isolation: isolate;
}

.pos-shell {
    background: transparent;
}

.pos-cart-panel,
.pos-product-panel {
    background: rgba(255, 255, 255, 0.96);
    border-color: rgba(37, 99, 235, 0.16);
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.09);
}

.pos-panel-head {
    padding-bottom: 7px;
    border-bottom: 1px solid rgba(203, 213, 225, 0.72);
}

.pos-panel-head h3 {
    color: #0f172a;
    font-weight: 900;
}

.pos-company-line {
    color: #64748b;
}

.pos-receipt-chip {
    color: #1d4ed8;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
}

.pos-field-label,
.pos-payment-grid label {
    color: #475569;
    font-weight: 900;
}

.pos-barcode-input {
    border-color: #93c5fd;
    background: #eff6ff;
    font-weight: 900;
}

.pos-cart-table,
.pos-product-list {
    border: 0;
    box-shadow: none;
}

.pos-cart-table th,
.pos-product-list th {
    background: #e0f2fe;
    color: #155e75;
}

.pos-cart-table tbody tr:hover,
.pos-product-list tbody tr:hover {
    background: #ecfeff;
}

.pos-cart-name,
.pos-product-primary {
    color: #0f172a;
    font-weight: 900;
}

.pos-product-secondary {
    color: #64748b;
}

.pos-total-box {
    border-top: 1px solid rgba(203, 213, 225, 0.72);
    background: linear-gradient(180deg, #ffffff, #f8fafc);
}

.pos-total-box div {
    color: #475569;
}

.pos-grand-total {
    margin-top: 2px;
    padding: 7px 9px !important;
    border-radius: 8px;
    background: linear-gradient(135deg, #0f172a, #1e40af);
    color: #ffffff;
}

.pos-grand-total span,
.pos-grand-total strong {
    color: #ffffff;
}

.pos-icon-btn:not(.pos-remove-btn) {
    background: #f8fafc !important;
    color: #0f172a !important;
}

.pos-icon-btn:not(.pos-remove-btn):hover {
    background: #dbeafe !important;
    border-color: #93c5fd !important;
}

.quick-product-grid {
    padding: 2px;
}

.quick-product-tile {
    border-color: rgba(203, 213, 225, 0.78);
    background:
        linear-gradient(180deg, #ffffff, #f8fafc);
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.05);
}

.quick-product-tile:hover {
    border-color: #38bdf8;
    background: linear-gradient(180deg, #ecfeff, #eff6ff);
    box-shadow: 0 10px 22px rgba(8, 145, 178, 0.14);
    transform: translateY(-1px);
}

.quick-product-tile strong {
    color: #0f172a;
}

.quick-product-tile small {
    color: #0f766e;
}

.quick-product-tile.empty {
    background: #f8fafc;
    border-style: dashed;
}

.pos-search-results-panel,
.pos-calculator {
    background: linear-gradient(180deg, #ffffff, #f8fafc);
}

.pos-section-title {
    color: #334155;
    font-weight: 900;
}

.pos-calculator-display {
    background: #0f172a;
    border-color: #0f172a;
    color: #ffffff;
    font-weight: 900;
}

.pos-calculator-grid button {
    background: #eef2ff;
    color: #1e3a8a;
    border: 1px solid #c7d2fe;
    box-shadow: none;
}

.pos-calculator-grid button:hover {
    background: #dbeafe;
}

.pos-calculator-grid button:nth-child(4n),
.pos-calculator-grid button:nth-child(12),
.pos-calculator-grid button:nth-child(16) {
    background: #fff7ed;
    color: #c2410c;
    border-color: #fed7aa;
}

.pos-message {
    color: #0f766e;
    font-weight: 800;
}

.pos-dialog,
.admin-dialog {
    border: 1px solid rgba(203, 213, 225, 0.72);
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.24);
}

.toast {
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: linear-gradient(135deg, #0f172a, #1e293b);
}

.pwa-status.online {
    background: #dcfce7;
    color: #166534;
    border: 1px solid #bbf7d0;
}

.pwa-status.offline {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

.product-form-card,
.purchase-subnav + .card {
    background: linear-gradient(180deg, #ffffff, #f8fafc);
}

.product-form-grid label,
.purchase-subnav + .card label {
    color: #334155;
}

.purchase-subnav button.active {
    background: linear-gradient(135deg, #2563eb, #0f766e);
    color: #ffffff;
    border-color: transparent;
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.18);
}

@media (max-width: 760px) {
    .page-heading {
        padding: 0.85rem;
    }

    .user-actions span {
        width: 100%;
    }
}

.pwa-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 7px 10px;
    border-radius: 999px;
    background: #111827;
    color: #ffffff;
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
    box-shadow: none;
    pointer-events: none;
}

.header .pwa-status {
    position: absolute;
    right: 1rem;
    top: 50%;
    z-index: 1;
    transform: translateY(-50%);
}

.user-actions .pwa-status {
    flex: 0 0 auto;
}

.pwa-status.online {
    background: #14532d;
}

.pwa-status.offline {
    background: #991b1b;
}

/* POS rollback/fix: readable compact layout without overlap */
#lastScannedProduct {
    display: none !important;
}

#salesEntry {
    height: calc(100vh - 86px);
    overflow: hidden;
}

.pos-shell {
    display: grid;
    grid-template-columns: minmax(560px, 50%) minmax(560px, 50%);
    gap: 10px;
    height: 100%;
    min-height: 0;
}

.pos-cart-panel {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto auto auto auto;
    padding: 8px;
    min-height: 0;
    overflow: hidden;
}

.pos-product-panel {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) 176px;
    gap: 7px;
    padding: 8px;
    min-height: 0;
    overflow: hidden;
}

.pos-panel-head {
    margin-bottom: 4px;
}

.pos-panel-head h3 {
    font-size: 1rem;
}

.pos-customer-row {
    margin: 2px 0 5px;
}

.pos-input {
    min-height: 32px;
    padding: 5px 7px;
    font-size: 0.84rem;
}

.pos-cart-table-wrap {
    min-height: 0;
    overflow: auto;
}

.pos-cart-table {
    table-layout: fixed;
    font-size: 0.78rem;
}

.pos-cart-table th,
.pos-cart-table td {
    padding: 0.36rem 0.38rem;
    line-height: 1.16;
}

.pos-cart-table th:nth-child(1) { width: 42%; }
.pos-cart-table th:nth-child(2) { width: 25%; }
.pos-cart-table th:nth-child(3) { width: 12%; }
.pos-cart-table th:nth-child(4) { width: 17%; }
.pos-cart-table th:nth-child(5) { width: 4%; }

.pos-cart-name,
.pos-product-primary,
.quick-product-tile strong {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.pos-cart-name {
    font-size: 0.78rem;
    line-height: 1.12;
}

.pos-cart-meta {
    display: none;
}

.pos-qty-control {
    grid-template-columns: 24px minmax(48px, 1fr) 24px;
    gap: 3px;
}

.pos-icon-btn {
    min-width: 24px !important;
    width: 24px;
    min-height: 26px !important;
    height: 26px;
    padding: 0 !important;
    border-radius: 6px;
    font-size: 0.95rem !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-transform: none;
}

.pos-icon-btn:not(.pos-remove-btn) {
    border: 1px solid #cbd5e1 !important;
    background: #f8fafc !important;
    color: #111827 !important;
    box-shadow: none !important;
}

.pos-qty-input {
    min-height: 26px;
    height: 26px;
    padding: 0 2px;
    font-size: 0.75rem;
}

.pos-total-box {
    margin-top: 5px;
    padding-top: 5px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 0.8rem;
    font-size: 0.8rem;
}

.pos-total-box div {
    padding: 1px 0;
}

.pos-grand-total {
    grid-column: 1 / -1;
    font-size: 1rem;
}

.pos-payment-grid {
    grid-template-columns: minmax(0, 1fr) 150px;
    gap: 6px;
    margin-top: 5px;
}

.pos-payment-grid label {
    font-size: 0.7rem;
}

.pos-action-grid {
    grid-template-columns: 0.7fr 1.2fr 1.25fr 0.75fr 0.75fr 0.65fr;
    gap: 5px;
    margin-top: 5px;
}

.pos-btn {
    min-height: 36px;
    padding: 0.32rem 0.25rem;
    font-size: 0.7rem;
    line-height: 1.08;
    white-space: normal;
}

.pos-message {
    min-height: 16px;
    margin-top: 3px;
    font-size: 0.75rem;
}

.pos-scan-row {
    grid-template-columns: minmax(190px, 0.75fr) minmax(220px, 1fr);
    gap: 6px;
}

.product-pad-title {
    min-height: 18px;
}

.quick-product-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(4, minmax(0, 1fr));
    gap: 6px;
    min-height: 0;
    overflow: hidden;
}

.quick-product-tile {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    min-height: 0;
    padding: 0.38rem;
    border-radius: 7px;
}

.quick-product-tile strong {
    font-size: 0.7rem;
    line-height: 1.08;
    max-height: 2.25em;
}

.quick-product-tile small {
    font-size: 0.64rem;
}

.pos-bottom-tools {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 235px;
    gap: 8px;
    min-height: 0;
}

.pos-search-results-panel {
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pos-product-list-wrap {
    min-height: 0;
    overflow: auto;
}

.pos-product-list {
    table-layout: fixed;
    font-size: 0.72rem;
}

.pos-product-list th,
.pos-product-list td {
    padding: 0.32rem 0.36rem;
    line-height: 1.12;
}

.pos-product-list th:nth-child(1) { width: 70%; }
.pos-product-list th:nth-child(2) { width: 30%; }

.pos-calculator {
    padding: 7px;
    min-height: 0;
    overflow: hidden;
}

.pos-calculator-display {
    min-height: 34px;
    margin-bottom: 6px;
    padding: 0.35rem 0.5rem;
    font-size: 0.95rem;
}

.pos-calculator-grid {
    gap: 5px;
}

.pos-calculator-grid button {
    min-height: 28px;
    padding: 0.2rem;
    font-size: 0.86rem;
    border-radius: 6px;
    color: #111827;
}

@media (max-width: 1220px) {
    #salesEntry {
        height: auto;
        overflow: visible;
    }
    .pos-shell,
    .pos-right-workspace,
    .pos-bottom-tools {
        grid-template-columns: 1fr;
    }
    .pos-side-tools {
        grid-template-rows: auto auto;
    }
    .pos-product-panel {
        grid-template-rows: auto auto minmax(360px, auto) auto;
    }
    .pos-action-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
/* Desktop sidebar offset: keep headers beside the fixed sidebar, not underneath it. */
@media (min-width: 1024px) {
    body.has-sidebar .header,
    body.has-sidebar .user-info,
    body.has-sidebar .container {
        margin-left: 240px;
        width: calc(100% - 240px);
    }

    body.sidebar-collapsed.has-sidebar .header,
    body.sidebar-collapsed.has-sidebar .user-info,
    body.sidebar-collapsed.has-sidebar .container {
        margin-left: 72px;
        width: calc(100% - 72px);
    }

    body.has-sidebar .user-info {
        padding-left: 1.5rem;
    }
}

/* Final right-panel visibility override: four visible rows because preview is hidden. */
#lastScannedProduct {
    display: none !important;
}

.pos-product-panel {
    grid-template-rows: auto auto minmax(0, 1fr) 205px !important;
}

.quick-product-grid {
    height: auto !important;
    min-height: 0 !important;
}

.pos-bottom-tools {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 250px !important;
    min-height: 0 !important;
    height: 205px !important;
    overflow: hidden !important;
}

.pos-search-results-panel,
.pos-calculator {
    min-height: 0 !important;
    overflow: hidden !important;
}

.pos-product-list-wrap {
    min-height: 0 !important;
    overflow: auto !important;
}

/* Keep the existing right-side layout, but reserve the bottom strip for search/calculator. */
#lastScannedProduct {
    display: none !important;
}

.pos-product-panel {
    grid-template-rows: auto auto minmax(0, 1fr) 205px !important;
}

.quick-product-grid {
    height: auto !important;
    min-height: 0 !important;
}

.pos-bottom-tools {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 250px !important;
    min-height: 0 !important;
    height: 205px !important;
    overflow: hidden !important;
}

.pos-search-results-panel,
.pos-calculator {
    min-height: 0 !important;
    overflow: hidden !important;
}

.pos-product-list-wrap {
    min-height: 0 !important;
    overflow: auto !important;
}

@media (max-width: 760px) {
    .metric-grid,
    .dashboard-grid {
        grid-template-columns: 1fr;
    }
    .user-info,
    .user-actions,
    .page-heading {
        align-items: flex-start;
        flex-direction: column;
    }
    .quick-product-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        min-height: auto;
    }
    .quick-product-editor {
        grid-template-columns: 1fr;
    }
}

/* POS billing usability fixes */
body:not(.admin-page).sidebar-collapsed .container {
    max-width: none;
}

#salesEntry {
    height: calc(100vh - 104px);
    overflow: hidden;
}

.pos-shell {
    grid-template-columns: minmax(600px, 52%) minmax(500px, 48%);
    gap: 12px;
    height: 100%;
    min-height: 0;
}

.pos-cart-panel {
    display: grid;
    grid-template-rows: auto auto auto minmax(0, 1fr) auto auto auto auto auto auto;
    row-gap: 0;
    padding: 10px;
    min-height: 0;
    overflow: hidden;
}

.pos-panel-head {
    margin-bottom: 6px;
}

.pos-field-label {
    margin-bottom: 0;
}

.pos-customer-row {
    margin: 0;
}

.pos-cart-table-wrap {
    min-height: 0;
    max-height: none;
    overflow: auto;
    align-self: stretch;
    margin-top: 0;
}

.pos-cart-table th,
.pos-cart-table td {
    padding: 0.5rem 0.55rem;
}

.pos-cart-table th:nth-child(1) { width: 42%; }
.pos-cart-table th:nth-child(2) { width: 20%; }
.pos-cart-table th:nth-child(3) { width: 13%; }
.pos-cart-table th:nth-child(4) { width: 8%; }
.pos-cart-table th:nth-child(5) { width: 13%; }
.pos-cart-table th:nth-child(6) { width: 4%; }

.pos-total-box {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 1rem;
    margin-top: 6px;
}

.pos-total-box div {
    padding: 2px 0;
}

.pos-grand-total {
    grid-column: 1 / -1;
    font-size: 1.1rem;
}

.pos-payment-grid {
    grid-template-columns: minmax(0, 1fr) 170px;
    margin-top: 6px;
}

.pos-notes-input {
    margin-top: 5px;
    min-height: 30px;
}

.pos-action-grid {
    grid-template-columns: 0.75fr 1.25fr 1.35fr 0.8fr 0.7fr;
    gap: 6px;
    margin-top: 6px;
}

.pos-btn {
    min-height: 42px;
    padding: 0.45rem;
}

.pos-more-menu {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr)) 36px;
    gap: 5px;
    margin-top: 5px;
}

.pos-more-menu button {
    min-height: 30px;
    padding: 0.25rem;
    font-size: 0.68rem;
    border-radius: 7px;
    background: #eef2ff;
    color: var(--primary-dark);
    border: 1px solid #c7d2fe;
    box-shadow: none;
}

.pos-product-panel {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) 205px;
    gap: 8px;
    padding: 10px;
    min-height: 0;
    overflow: hidden;
}

.pos-product-preview {
    min-height: 38px;
    padding: 6px 8px;
}

.quick-product-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: minmax(72px, 1fr);
    min-height: 0;
    height: auto;
    gap: 8px;
}

.quick-product-tile {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.22rem;
    padding: 0.55rem;
    min-height: 0;
}

.quick-product-tile strong {
    font-size: 0.78rem;
    max-height: 2.35em;
}

.quick-product-tile small {
    font-size: 0.72rem;
}

.pos-bottom-tools {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 250px;
    gap: 8px;
    min-height: 0;
    height: 205px;
    overflow: hidden;
}

.pos-search-results-panel {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.pos-product-list-wrap {
    max-height: none;
    flex: 1;
    min-height: 0;
}

.pos-calculator {
    padding: 8px;
    align-self: stretch;
}

.pos-calculator-display {
    min-height: 40px;
    margin-bottom: 7px;
    padding: 0.45rem 0.6rem;
    font-size: 1rem;
}

.pos-calculator-grid {
    gap: 6px;
}

.pos-calculator-grid button {
    min-height: 32px;
    padding: 0.3rem;
    font-size: 0.92rem;
}

.pos-calc-zero {
    grid-column: span 4;
}

@media (max-width: 1220px) {
    #salesEntry {
        height: auto;
        overflow: visible;
    }
    .pos-shell,
    .pos-bottom-tools {
        grid-template-columns: 1fr;
    }
    .pos-cart-table-wrap {
        min-height: 300px;
    }
    .pos-action-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Desktop sidebar offset: keep headers beside the fixed sidebar, not underneath it. */
@media (min-width: 1024px) {
    body.has-sidebar .header,
    body.has-sidebar .user-info,
    body.has-sidebar .container {
        margin-left: 240px;
        width: calc(100% - 240px);
    }

    body.sidebar-collapsed.has-sidebar .header,
    body.sidebar-collapsed.has-sidebar .user-info,
    body.sidebar-collapsed.has-sidebar .container {
        margin-left: 72px;
        width: calc(100% - 72px);
    }

    body.has-sidebar .user-info {
        padding-left: 1.5rem;
    }
}

/* True final premium skin override */
:root {
    --primary: #2563eb;
    --primary-color: #2563eb;
    --primary-dark: #1e40af;
    --secondary-color: #0f766e;
    --accent-color: #f59e0b;
    --page-bg: #eef3fb;
    --ink: #0f172a;
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
    --shadow: 0 10px 26px rgba(15, 23, 42, 0.08);
}

body {
    color: var(--ink);
    background: linear-gradient(180deg, #f8fbff 0%, #eef3fb 44%, #f6f7fb 100%);
    -webkit-font-smoothing: antialiased;
}

body.auth-page {
    background:
        radial-gradient(circle at 8% 10%, rgba(7, 114, 136, 0.72) 0%, rgba(7, 82, 104, 0.36) 28%, transparent 54%),
        radial-gradient(circle at 72% 94%, rgba(154, 38, 104, 0.62) 0%, rgba(92, 22, 83, 0.34) 24%, transparent 48%),
        radial-gradient(circle at 88% 8%, rgba(18, 15, 62, 0.88) 0%, rgba(9, 20, 52, 0.62) 36%, transparent 62%),
        linear-gradient(115deg, #073344 0%, #06243a 38%, #081638 68%, #130d31 100%);
    background-attachment: fixed;
}

.header,
.user-info,
.topbar {
    background: rgba(255, 255, 255, 0.94);
    border-bottom: 1px solid rgba(203, 213, 225, 0.72);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
    backdrop-filter: blur(12px);
}

body.auth-page .header {
    background: transparent;
    color: #ffffff;
    border: 0;
    box-shadow: none;
    justify-content: center;
    text-align: center;
}

.app-brand {
    display: flex;
    align-items: center;
    color: #0f172a;
    font-weight: 900;
}

.app-brand::before {
    content: "";
    flex: 0 0 auto;
    width: 12px;
    height: 12px;
    margin-right: 9px;
    border-radius: 4px;
    background: linear-gradient(135deg, #16a34a, #2563eb);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
}

body.auth-page .app-brand {
    color: #ffffff;
}

body.auth-page .app-brand::before {
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.16);
}

.sidebar {
    background: linear-gradient(180deg, #101827 0%, #12223a 52%, #0f172a 100%);
    border-right: 1px solid rgba(148, 163, 184, 0.16);
    box-shadow: 16px 0 40px rgba(15, 23, 42, 0.18);
}

.nav-link,
.nav-sublink {
    color: #cbd5e1;
    border-radius: 8px;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.nav-icon {
    color: #67e8f9;
}

.nav-link:hover,
.nav-sublink:hover {
    background: rgba(37, 99, 235, 0.22);
    color: #ffffff;
    border-color: rgba(96, 165, 250, 0.35);
    transform: translateX(2px);
}

.nav-link.active,
.nav-link.active:hover,
.nav-sublink.active {
    background: linear-gradient(135deg, #2563eb, #0f766e);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.16);
    box-shadow: 0 10px 22px rgba(37, 99, 235, 0.28);
}

.card,
.panel,
.filters,
table,
.metric-card,
.accounts-card,
.pos-cart-panel,
.pos-product-panel,
.pos-calculator,
.pos-search-results-panel,
.login-container {
    border: 1px solid rgba(203, 213, 225, 0.72);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: var(--shadow-sm);
}

.card:hover,
.panel:hover,
.metric-card:hover,
.accounts-card:hover {
    border-color: rgba(37, 99, 235, 0.28);
    box-shadow: var(--shadow);
    transform: translateY(-1px);
}

.page-heading {
    padding: 1rem;
    border: 1px solid rgba(203, 213, 225, 0.72);
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(255,255,255,0.96), rgba(248,250,252,0.92));
    box-shadow: var(--shadow-sm);
}

.metric-card {
    position: relative;
    overflow: hidden;
}

.metric-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: linear-gradient(90deg, #2563eb, #06b6d4, #16a34a);
}

button {
    border-radius: 8px;
    border: 1px solid transparent;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.18);
    font-weight: 800;
    transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease, border-color 0.16s ease;
}

button:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 24px rgba(37, 99, 235, 0.22);
}

button.secondary,
.secondary-btn,
.text-btn,
.purchase-subnav button,
.pos-more-menu button {
    background: #eff6ff;
    color: #1d4ed8;
    border-color: #bfdbfe;
    box-shadow: none;
}

.user-info button {
    background: #fff1f2;
    color: #be123c;
    border: 1px solid #fecdd3;
    box-shadow: none;
}

input,
select,
textarea,
.pos-input {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    color: #0f172a;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

input:focus,
select:focus,
textarea:focus,
.pos-input:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}

th {
    background: #eef6ff;
    color: #1e3a8a;
    font-weight: 900;
}

tbody tr:nth-child(even) {
    background: rgba(248, 250, 252, 0.66);
}

tbody tr:hover {
    background: #eff6ff;
}

.pos-cart-panel,
.pos-product-panel {
    border-color: rgba(37, 99, 235, 0.16);
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.09);
}

.pos-panel-head {
    padding-bottom: 7px;
    border-bottom: 1px solid rgba(203, 213, 225, 0.72);
}

.pos-receipt-chip {
    color: #1d4ed8;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
}

.pos-barcode-input {
    border-color: #93c5fd;
    background: #eff6ff;
    font-weight: 900;
}

.pos-cart-table th,
.pos-product-list th {
    background: #e0f2fe;
    color: #155e75;
}

.pos-grand-total {
    border-radius: 8px;
    background: linear-gradient(135deg, #0f172a, #1e40af);
    color: #ffffff;
}

.pos-grand-total span,
.pos-grand-total strong {
    color: #ffffff;
}

.quick-product-tile {
    border-color: rgba(203, 213, 225, 0.78);
    background: linear-gradient(180deg, #ffffff, #f8fafc);
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.05);
}

.quick-product-tile:hover {
    border-color: #38bdf8;
    background: linear-gradient(180deg, #ecfeff, #eff6ff);
    box-shadow: 0 10px 22px rgba(8, 145, 178, 0.14);
}

.pos-calculator-display {
    background: #0f172a;
    border-color: #0f172a;
    color: #ffffff;
    font-weight: 900;
}

.pos-calculator-grid button {
    background: #eef2ff;
    color: #1e3a8a;
    border: 1px solid #c7d2fe;
    box-shadow: none;
}

.pos-btn-hold {
    background: linear-gradient(135deg, #2563eb, #0891b2);
}

.pos-btn-pay {
    background: linear-gradient(135deg, #16a34a, #0f766e);
}

.pos-btn-print {
    background: linear-gradient(135deg, #0f766e, #16a34a);
}

.pos-btn-cancel {
    background: linear-gradient(135deg, #e11d48, #be123c);
}

.pos-btn-more {
    background: linear-gradient(135deg, #7c3aed, #2563eb);
}

.pwa-status.online {
    background: #dcfce7;
    color: #166534;
    border: 1px solid #bbf7d0;
}

.pwa-status.offline {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

/* App/login palette bridge: final active theme */
:root {
    --brand-ink: #071527;
    --brand-navy: #0b1635;
    --brand-blue: #1f5fd6;
    --brand-teal: #087b86;
    --brand-magenta: #a22568;
    --brand-line: rgba(32, 78, 121, 0.16);
}

body:not(.auth-page) {
    background: linear-gradient(180deg, rgba(232, 247, 250, 0.88) 0%, rgba(245, 248, 252, 0.98) 34%, #f7f8fb 100%);
}

.header,
.user-info,
.topbar {
    background: linear-gradient(90deg, rgba(255,255,255,0.96) 0%, rgba(246,252,253,0.94) 58%, rgba(255,246,251,0.92) 100%);
    border-bottom-color: var(--brand-line);
}

.app-brand::before {
    background: linear-gradient(135deg, var(--brand-teal), var(--brand-blue) 58%, var(--brand-magenta));
    box-shadow: 0 0 0 4px rgba(8, 123, 134, 0.11);
}

.sidebar {
    background: linear-gradient(180deg, #071527 0%, #0a1c37 48%, #130d31 100%);
}

.nav-link.active,
.nav-link.active:hover,
.nav-sublink.active,
.purchase-subnav button.active {
    background: linear-gradient(135deg, var(--brand-teal), var(--brand-blue) 62%, var(--brand-magenta));
    box-shadow: 0 10px 24px rgba(7, 21, 39, 0.22);
}

.metric-card::before {
    background: linear-gradient(90deg, var(--brand-teal), var(--brand-blue), var(--brand-magenta));
}

button,
.login-container button {
    background: linear-gradient(135deg, var(--brand-blue), #2446b8);
}

button.secondary,
.secondary-btn,
.text-btn,
.purchase-subnav button,
.pos-more-menu button,
.pos-calculator-grid button {
    background: #eef9fb;
    color: #075b68;
    border-color: rgba(8, 123, 134, 0.2);
}

input:focus,
select:focus,
textarea:focus,
.pos-input:focus {
    border-color: var(--brand-teal);
    box-shadow: 0 0 0 3px rgba(8, 123, 134, 0.14);
}

th,
.pos-cart-table th,
.pos-product-list th {
    background: #e8f7fa;
    color: #075b68;
}

tbody tr:hover {
    background: #eefafb;
}

.pos-receipt-chip,
.pos-barcode-input {
    background: #e8f7fa;
    border-color: rgba(8, 123, 134, 0.24);
    color: #075b68;
}

.pos-grand-total {
    background: linear-gradient(135deg, var(--brand-ink), var(--brand-blue) 58%, var(--brand-magenta));
}

.quick-product-tile:hover {
    border-color: rgba(8, 123, 134, 0.38);
    background: linear-gradient(180deg, #f1fcfd, #f7f8ff);
}

.pos-calculator-display {
    background: linear-gradient(135deg, var(--brand-ink), var(--brand-navy));
}

.pos-btn-hold {
    background: linear-gradient(135deg, var(--brand-blue), var(--brand-teal));
}

.pos-btn-pay,
.pos-btn-print {
    background: linear-gradient(135deg, #0f766e, #14b8a6);
}

.pos-btn-cancel {
    background: linear-gradient(135deg, var(--brand-magenta), #be123c);
}

.pos-btn-more {
    background: linear-gradient(135deg, var(--brand-magenta), var(--brand-blue));
}

/* Final active inventory tab layout */
#warehouseTab {
    max-width: 1180px;
}

#warehouseTab .inventory-top-grid {
    display: grid;
    grid-template-columns: minmax(340px, 0.92fr) minmax(420px, 1.08fr);
    gap: 14px;
    align-items: stretch;
    margin-bottom: 14px;
}

#warehouseTab .inventory-card {
    padding: 12px;
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(248,251,252,0.98), rgba(235,243,247,0.98));
    border: 1px solid rgba(15, 45, 75, 0.16);
    box-shadow: 0 8px 20px rgba(15, 45, 75, 0.06);
}

#warehouseTab .inventory-card h3 {
    margin: 0 0 10px;
    font-size: 0.92rem;
    line-height: 1.2;
    color: #0b1f36;
}

#warehouseTab .inventory-create-card,
#warehouseTab .inventory-list-panel {
    min-height: 128px;
}

#warehouseTab .inventory-form-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 92px 86px;
    gap: 8px;
    align-items: center;
}

#warehouseTab #wName,
#warehouseTab #moveQuantity,
#warehouseTab .inventory-filters select,
#warehouseTab .inventory-filters input {
    width: 100%;
    height: 32px;
    min-height: 32px;
    padding: 5px 8px;
    font-size: 12px;
    margin: 0;
}

.inventory-type-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    padding: 0 9px;
    border-radius: 8px;
    background: #e8f7fa;
    color: #075b68;
    border: 1px solid rgba(8, 114, 124, 0.22);
    font-size: 11.5px;
    font-weight: 900;
}

#warehouseTab .inventory-card button,
#warehouseTab #warehouseList button {
    height: 32px;
    min-height: 32px;
    padding: 5px 10px;
    font-size: 11.5px;
    line-height: 1;
    border-radius: 8px;
    white-space: nowrap;
}

#warehouseTab .inventory-list-card {
    display: grid;
    gap: 7px;
    max-height: 170px;
    min-height: 72px;
    overflow: auto;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

#warehouseTab #warehouseList .card {
    display: grid;
    grid-template-columns: minmax(120px, 1fr) auto;
    gap: 7px;
    align-items: center;
    min-height: 36px;
    margin: 0;
    padding: 7px 8px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(15, 45, 75, 0.12);
    box-shadow: none;
    font-size: 11.5px;
}

#warehouseTab #warehouseList .card b {
    color: #0b1f36;
    font-size: 12px;
}

.inventory-row-actions {
    display: grid;
    grid-template-columns: repeat(2, 86px);
    gap: 6px;
    align-items: center;
}

#warehouseTab #warehouseList .card button {
    width: 86px;
    margin-left: 0 !important;
}

#warehouseTab .inventory-filters {
    display: grid;
    grid-template-columns: minmax(130px, 1fr) minmax(130px, 1fr) minmax(210px, 1.4fr) 92px 82px;
    gap: 8px;
    align-items: center;
    padding: 0;
    margin: 0 0 9px;
    border: 0;
    background: transparent;
    box-shadow: none;
}

#warehouseTab .inventory-table {
    margin: 0;
    font-size: 11.5px;
}

#warehouseTab .inventory-table th,
#warehouseTab .inventory-table td {
    padding: 5px 7px;
    line-height: 1.15;
}

#warehouseTab .inventory-move-card > button {
    margin-top: 8px !important;
    min-width: 100px;
}

#warehouseTab #moveMessage {
    margin-top: 6px;
    min-height: 14px;
    font-size: 11.5px;
}

@media (max-width: 980px) {
    #warehouseTab .inventory-top-grid,
    #warehouseTab .inventory-form-grid,
    #warehouseTab .inventory-filters,
    #warehouseTab #warehouseList .card {
        grid-template-columns: 1fr;
    }

    .inventory-type-pill {
        justify-content: flex-start;
    }
}

.warehouse-stock-overlay {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(6, 19, 35, 0.54);
}

.warehouse-stock-modal {
    width: min(760px, 94vw);
    max-height: min(620px, 88vh);
    overflow: auto;
    padding: 16px;
    border-radius: 8px;
    background: #ffffff;
    border: 1px solid rgba(15, 45, 75, 0.16);
    box-shadow: 0 24px 70px rgba(6, 19, 35, 0.28);
}

.warehouse-stock-modal h4 {
    margin: 0 0 10px;
}

.warehouse-stock-modal table {
    font-size: 12px;
    margin-bottom: 10px;
}

.warehouse-stock-modal th,
.warehouse-stock-modal td {
    padding: 6px 8px;
}

.warehouse-stock-actions {
    display: flex;
    justify-content: flex-end;
}

/* Inventory create card final fix */
#warehouseTab .inventory-create-card {
    display: grid;
    grid-template-rows: auto 1fr;
}

#warehouseTab .inventory-create-card h3 {
    text-align: center;
}

#warehouseTab .inventory-create-card .inventory-form-grid {
    align-self: center;
    justify-self: center;
    width: min(380px, 100%);
    display: grid;
    grid-template-columns: minmax(210px, 1fr) 92px;
    gap: 8px;
    align-items: center;
}

#warehouseTab .inventory-create-card #wName {
    width: 100%;
}

#warehouseTab .inventory-create-card button {
    width: 92px;
}

#warehouseTab .inventory-type-pill {
    display: none !important;
}

@media (max-width: 560px) {
    #warehouseTab .inventory-create-card .inventory-form-grid {
        grid-template-columns: 1fr;
    }

    #warehouseTab .inventory-create-card button {
        width: 100%;
    }
}

/* Final form and dialog polish */
input,
select,
textarea,
.pos-input {
    background-color: #f8fbff;
    border: 1px solid rgba(66, 92, 124, 0.28);
    color: #102033;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

select {
    appearance: none;
    -webkit-appearance: none;
    background-image:
        url("data:image/svg+xml,%3Csvg width='10' height='7' viewBox='0 0 10 7' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.25L5 5.25L9 1.25Z' fill='%230f8f8f'/%3E%3C/svg%3E"),
        linear-gradient(135deg, rgba(37, 107, 143, 0.14), rgba(16, 32, 51, 0.08));
    background-position:
        calc(100% - 12px) 50%,
        right 0 top 0;
    background-size: 10px 7px, 34px 100%;
    background-repeat: no-repeat;
    padding-right: 40px;
}

input:hover,
select:hover,
textarea:hover,
.pos-input:hover {
    background-color: #ffffff;
    border-color: rgba(37, 107, 143, 0.58);
}

input:focus,
select:focus,
textarea:focus,
.pos-input:focus {
    background-color: #ffffff;
    border-color: #1c88a8;
    box-shadow:
        0 0 0 3px rgba(28, 136, 168, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.85);
    outline: none;
}

input::placeholder,
textarea::placeholder {
    color: #7b8da3;
}

input:disabled,
select:disabled,
textarea:disabled,
input[readonly],
textarea[readonly] {
    background: #eef3f8;
    color: #6a7c91;
    border-color: rgba(66, 92, 124, 0.18);
    box-shadow: none;
}

.admin-dialog {
    border-color: rgba(28, 136, 168, 0.18);
    box-shadow: 0 24px 70px rgba(7, 23, 45, 0.32);
}

.dialog-warning-text {
    margin: 0;
    color: #26384d;
    font-size: 13px;
    line-height: 1.5;
}

.admin-dialog-actions .danger-btn,
button.danger-btn {
    background: linear-gradient(135deg, #e11d48, #b91c1c);
    color: #ffffff;
    border-color: rgba(185, 28, 28, 0.22);
    box-shadow: 0 10px 22px rgba(225, 29, 72, 0.2);
}

.admin-dialog-actions .danger-btn:hover,
button.danger-btn:hover {
    box-shadow: 0 14px 28px rgba(225, 29, 72, 0.28);
}

.purchase-return-form {
    display: grid;
    gap: 10px;
}

.purchase-return-form label {
    display: grid;
    gap: 5px;
    color: var(--text-muted);
    font-size: 0.84rem;
    font-weight: 700;
}

.purchase-return-form select,
.purchase-return-form input {
    width: 100%;
}

.form-message {
    min-height: 18px;
    color: #dc2626;
    font-size: 0.84rem;
    font-weight: 700;
}

select {
    accent-color: #0f9a9a;
    background-image:
        url("data:image/svg+xml,%3Csvg width='10' height='7' viewBox='0 0 10 7' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.25L5 5.25L9 1.25Z' fill='%230f8f8f'/%3E%3C/svg%3E"),
        linear-gradient(135deg, rgba(15, 154, 154, 0.16), rgba(12, 48, 73, 0.08));
    background-position:
        calc(100% - 12px) 50%,
        right 0 top 0;
    background-size: 10px 7px, 34px 100%;
    background-repeat: no-repeat;
}

select:focus {
    border-color: #0f9a9a !important;
    box-shadow:
        0 0 0 3px rgba(15, 154, 154, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.86) !important;
}

select option:checked {
    background: #d8fbf7;
    color: #074c4c;
}

.dashboard-refresh-btn,
.dashboard-refresh-btn:hover,
.dashboard-refresh-btn:focus {
    transform: none !important;
    box-shadow: none !important;
}

.dashboard-refresh-btn:active {
    transform: translateY(1px) scale(0.99) !important;
    box-shadow: inset 0 2px 8px rgba(7, 21, 39, 0.16) !important;
}

.dashboard-refresh-btn.is-loading,
.dashboard-refresh-btn:disabled {
    cursor: wait;
    opacity: 0.72;
}

#dashboardRefreshBtn,
#dashboardRefreshBtn.secondary-btn,
#dashboardRefreshBtn.dashboard-refresh-btn {
    background: #e8f7f6 !important;
    color: #075b68 !important;
    border: 1px solid rgba(15, 154, 154, 0.28) !important;
    box-shadow: none !important;
    transform: none !important;
}

#dashboardRefreshBtn:hover,
#dashboardRefreshBtn:focus,
#dashboardRefreshBtn:focus-visible {
    background: #e8f7f6 !important;
    color: #075b68 !important;
    border-color: rgba(15, 154, 154, 0.28) !important;
    box-shadow: none !important;
    transform: none !important;
    outline: none !important;
}

#dashboardRefreshBtn:active,
#dashboardRefreshBtn.refresh-pressed {
    background: #c9f1ee !important;
    border-color: rgba(15, 154, 154, 0.48) !important;
    box-shadow: inset 0 2px 8px rgba(7, 91, 104, 0.14) !important;
    transform: translateY(1px) !important;
}

#dashboardRefreshBtn.is-loading,
#dashboardRefreshBtn:disabled {
    background: #dff2f0 !important;
    color: #4f7280 !important;
    cursor: wait !important;
}

/* POS total contrast tuning */
.pos-grand-total {
    background:
        linear-gradient(135deg, #0c2135, #1b548f 58%, #7f2858) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 8px 18px rgba(7, 21, 39, 0.12);
}

/* Modern launch and sign-in loading states */
.launch-page {
    justify-content: center;
    padding: 22px;
}

.launch-shell {
    width: min(1080px, 100%);
    min-height: min(640px, calc(100vh - 44px));
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(320px, 0.88fr);
    gap: 22px;
    align-items: center;
}

.launch-copy,
.launch-panel {
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 14px;
    background: rgba(5, 18, 36, 0.38);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.24);
    backdrop-filter: blur(18px);
}

.launch-copy {
    padding: clamp(28px, 5vw, 58px);
    color: #ffffff;
}

.launch-brand {
    margin-bottom: 28px;
    color: #ffffff;
    font-size: 0.95rem;
    letter-spacing: 0;
}

.launch-copy h1 {
    max-width: 720px;
    margin: 0;
    color: #ffffff;
    font-size: clamp(2.2rem, 5.8vw, 4.7rem);
    line-height: 0.96;
    letter-spacing: 0;
}

.launch-copy p {
    max-width: 560px;
    margin: 20px 0 0;
    color: rgba(236, 254, 255, 0.82);
    font-size: 1rem;
    line-height: 1.65;
}

.launch-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 28px;
}

.launch-primary,
.launch-secondary {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 18px;
    border-radius: 8px;
    font-size: 0.92rem;
    font-weight: 900;
    text-decoration: none;
}

.launch-primary {
    color: #061427;
    background: linear-gradient(135deg, #7dd3fc, #5eead4);
    border: 1px solid rgba(255, 255, 255, 0.34);
    box-shadow: 0 14px 30px rgba(94, 234, 212, 0.22);
}

.launch-secondary {
    color: #ecfeff;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: none;
}

.launch-panel {
    padding: 18px;
}

.launch-status-card {
    display: grid;
    grid-template-columns: 14px 1fr;
    gap: 12px;
    align-items: start;
    padding: 16px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.92);
    color: #071527;
}

.launch-status-dot {
    width: 12px;
    height: 12px;
    margin-top: 4px;
    border-radius: 999px;
    background: #14b8a6;
    box-shadow: 0 0 0 6px rgba(20, 184, 166, 0.16);
}

.launch-status-card strong {
    display: block;
    font-size: 0.98rem;
}

.launch-status-card p {
    margin: 4px 0 0;
    color: #52677c;
    font-size: 0.82rem;
    line-height: 1.45;
}

.launch-preview-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 12px;
}

.launch-preview-grid div {
    padding: 14px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.launch-preview-grid span {
    display: block;
    color: rgba(236, 254, 255, 0.64);
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
}

.launch-preview-grid strong {
    display: block;
    margin-top: 6px;
    color: #ffffff;
    font-size: 1.15rem;
}

#loginMessage:empty {
    display: none;
}

.login-container button:disabled {
    cursor: wait;
    opacity: 0.78;
    transform: none;
}

@media (max-width: 820px) {
    .launch-page {
        justify-content: flex-start;
        padding: 14px;
    }

    .launch-shell {
        min-height: auto;
        grid-template-columns: 1fr;
    }

    .launch-copy {
        padding: 26px;
    }
}

/* Minimal POS accounting workspace */
.accounts-subnav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 16px;
    padding: 10px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.62);
    border: 1px solid rgba(148, 163, 184, 0.18);
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06);
}

.accounts-subnav button {
    min-height: 34px;
    padding: 0 13px;
    border-radius: 999px;
    border: 1px solid rgba(15, 118, 110, 0.18);
    background: rgba(255, 255, 255, 0.76);
    color: #243647;
    font-size: 0.82rem;
    font-weight: 800;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
}

.accounts-subnav button.active,
.accounts-subnav button:hover {
    background: linear-gradient(135deg, #0f766e, #164e63);
    color: #ffffff;
    border-color: transparent;
}

.accounts-view {
    min-height: 260px;
}

.ledger-account-filter {
    flex: 1 1 300px;
}

.ledger-account-filter select {
    min-width: 280px;
}

.ledger-account-meta {
    color: #334155;
    font-size: 0.86rem;
    font-weight: 850;
}

.ledger-totals {
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
}

.ledger-totals span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.72);
}

.ledger-table th {
    cursor: default;
    white-space: nowrap;
}

.ledger-reference {
    color: #0f766e;
    font-weight: 800;
    white-space: nowrap;
}

.ledger-amount {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.ledger-balance {
    color: #102a43;
}

.ledger-pager button:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

.accounts-view .table-scroll {
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.07);
}

.accounts-view table th {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.accounts-view table th:hover {
    color: #0f766e;
}

.accounts-view .compact-table table th,
.accounts-view .compact-table table td {
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
    line-height: 1.14;
}

.accounts-view .compact-table table td {
    height: 28px;
}

.accounts-dashboard-panel {
    display: grid;
    gap: 14px;
    padding: 14px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 16px;
    background:
        radial-gradient(circle at top left, rgba(15, 118, 110, 0.12), transparent 32%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(241, 245, 249, 0.78));
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.08);
}

.accounts-dashboard-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.accounts-dashboard-heading h3 {
    margin: 0 0 4px;
    color: #102a43;
    font-size: 1.08rem;
    font-weight: 950;
}

.accounts-dashboard-heading p {
    margin: 0;
    color: #64748b;
    font-size: 0.82rem;
    font-weight: 700;
}

.accounts-dashboard-heading button {
    min-height: 34px;
    padding: 0 13px;
    white-space: nowrap;
}

.accounts-dashboard-grid {
    grid-template-columns: repeat(5, minmax(140px, 1fr));
    gap: 10px;
}

.accounts-dashboard-grid .accounts-card {
    position: relative;
    overflow: hidden;
    min-height: 92px;
    padding: 13px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.84));
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.07);
}

.accounts-dashboard-grid .accounts-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: #0f766e;
}

.accounts-dashboard-grid .accounts-card::after {
    content: "";
    position: absolute;
    right: -24px;
    top: -24px;
    width: 76px;
    height: 76px;
    border-radius: 999px;
    background: rgba(15, 118, 110, 0.08);
}

.accounts-dashboard-grid .accounts-card span,
.accounts-dashboard-grid .accounts-card strong {
    position: relative;
    z-index: 1;
}

.accounts-dashboard-grid .accounts-card span {
    color: #64748b;
    font-size: 0.76rem;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: 0;
}

.accounts-dashboard-grid .accounts-card strong {
    margin-top: 8px;
    color: #0f172a;
    font-size: 1.08rem;
    font-weight: 950;
}

.accounts-dashboard-grid .cash-card::before,
.accounts-dashboard-grid .sales-card::before,
.accounts-dashboard-grid .profit-card::before,
.accounts-dashboard-grid .net-card::before {
    background: #0f766e;
}

.accounts-dashboard-grid .benefit-card::before,
.accounts-dashboard-grid .card-card::before {
    background: #2563eb;
}

.accounts-dashboard-grid .receivable-card::before {
    background: #7c3aed;
}

.accounts-dashboard-grid .payable-card::before,
.accounts-dashboard-grid .expense-card::before {
    background: #dc2626;
}

.accounts-dashboard-grid .cogs-card::before {
    background: #b45309;
}

.accounts-dashboard-grid .highlight.net-card {
    border-color: rgba(15, 118, 110, 0.26);
    background: linear-gradient(135deg, rgba(236, 253, 245, 0.96), rgba(204, 251, 241, 0.78));
}

.accounts-dashboard-grid .highlight.net-card strong {
    color: #0f766e;
}

.accounts-dashboard-table-card {
    margin-top: 14px;
    padding: 14px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.07);
}

#accountsViewDashboard .accounts-dashboard-table-card {
    border-radius: 16px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(248, 250, 252, 0.82));
}

#accountsViewDashboard .accounts-dashboard-table-card .panel-title {
    margin-bottom: 10px;
}

#accountsViewDashboard .accounts-dashboard-table-card .panel-title h3 {
    color: #102a43;
    font-size: 0.98rem;
    font-weight: 950;
}

.accounts-dashboard-table th,
.accounts-dashboard-table td {
    padding: 0.42rem 0.62rem;
    font-size: 0.86rem;
}

.accounts-dashboard-table th {
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: 0;
}

.accounts-dashboard-table td strong {
    color: #0f172a;
    font-weight: 900;
}

@media (max-width: 1180px) {
    .accounts-dashboard-grid {
        grid-template-columns: repeat(3, minmax(150px, 1fr));
    }
}

.accounts-category-card {
    margin: 12px 0;
    padding: 12px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.82);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
}

.accounts-category-card .panel-title {
    margin-bottom: 8px;
}

.accounts-category-form {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) auto;
    gap: 8px;
    align-items: center;
    margin-bottom: 10px;
}

.accounts-category-form input {
    min-height: 32px;
    margin: 0;
    padding: 6px 9px;
    font-size: 0.82rem;
}

.accounts-category-form button {
    min-height: 30px;
    padding: 0 10px;
    font-size: 0.78rem;
}

.accounts-category-table th,
.accounts-category-table td,
.accounts-expenses-table th,
.accounts-expenses-table td {
    padding: 0.2rem 0.48rem;
    font-size: 0.8rem;
    line-height: 1.12;
}

.accounts-category-table td {
    height: 26px;
}

.accounts-expenses-table td {
    height: 28px;
}

.accounts-expenses-table th,
.accounts-expenses-table td {
    font-size: 0.84rem;
}

.accounts-action-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.small-action-btn {
    min-height: 28px;
    padding: 0 9px;
    border-radius: 7px;
    font-size: 0.76rem;
    font-weight: 900;
    box-shadow: none;
}

.small-action-btn.accent {
    background: linear-gradient(135deg, #0f8f8f, #155e8b);
}

.small-action-btn.print-action {
    background: linear-gradient(135deg, #7c3aed, #2563eb);
}

.small-action-btn:disabled {
    cursor: not-allowed;
    opacity: 0.45;
    filter: grayscale(0.3);
}

.salary-module-grid {
    display: grid;
    grid-template-columns: minmax(300px, 0.92fr) minmax(520px, 1.5fr);
    gap: 14px;
    align-items: start;
}

.salary-setup-card,
.salary-staff-card {
    margin: 0 0 14px;
}

.salary-staff-card .panel-title span {
    display: none !important;
}

.salary-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.salary-form-grid input[readonly] {
    background: linear-gradient(135deg, rgba(15, 118, 110, 0.08), rgba(37, 99, 235, 0.08));
    color: #0f172a;
    font-weight: 900;
}

.salary-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.salary-form-actions button {
    min-height: 32px;
    padding: 0 14px;
    font-size: 0.82rem;
}

.accounts-salary-staff-table th,
.accounts-salary-staff-table td,
.accounts-salary-history-table th,
.accounts-salary-history-table td {
    padding: 0.2rem 0.46rem;
    font-size: 0.8rem;
    line-height: 1.14;
}

.accounts-salary-staff-table td,
.accounts-salary-history-table td {
    height: 28px;
}

.accounts-salary-history-table th,
.accounts-salary-history-table td {
    font-size: 0.84rem;
}

.accounts-salary-staff-table td:first-child strong {
    font-weight: 900;
    color: #102a43;
}

.accounts-salary-staff-table .accounts-action-row {
    flex-wrap: nowrap;
    gap: 4px;
    align-items: center;
}

.accounts-salary-staff-table .small-action-btn {
    min-height: 24px;
    padding: 0 8px;
}

@media (max-width: 1100px) {
    .salary-module-grid {
        grid-template-columns: 1fr;
    }
}

.accounts-table-toolbar,
.accounts-table-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 10px 0;
}

.accounts-table-toolbar input,
.accounts-table-toolbar select {
    min-height: 34px;
    border-radius: 10px;
    border: 1px solid rgba(100, 116, 139, 0.24);
    background: rgba(255, 255, 255, 0.9);
    color: #0f172a;
    font-size: 0.84rem;
}

.accounts-table-toolbar input {
    flex: 1;
    min-width: 180px;
    padding: 7px 11px;
}

.accounts-table-toolbar select {
    width: 88px;
    padding: 7px 9px;
}

.accounts-table-pager {
    justify-content: flex-end;
    margin-top: 8px;
}

.accounts-table-pager span {
    color: #475569;
    font-size: 0.8rem;
    font-weight: 800;
}

.accounts-table-pager button {
    min-height: 32px;
    padding: 0 12px;
    border-radius: 9px;
    background: #ffffff;
    color: #0f766e;
    border: 1px solid rgba(15, 118, 110, 0.22);
    box-shadow: none;
}

.accounts-table-pager button:hover {
    background: rgba(15, 118, 110, 0.09);
}

.accounts-table-total {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 6px;
    margin: 0 0 7px;
    color: #475569;
    font-size: 0.86rem;
    font-weight: 850;
}

.accounts-table-total strong {
    color: #0f766e;
    font-size: 0.94rem;
    font-weight: 950;
}

.compact-form-card {
    margin-bottom: 14px;
    padding: 16px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(148, 163, 184, 0.22);
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.08);
}

.compact-form-card h4 {
    margin: 0 0 12px;
    font-size: 0.95rem;
    color: #102a43;
}

.form-grid {
    display: grid;
    gap: 10px;
    margin-bottom: 12px;
}

.form-grid.two-col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.form-grid label {
    display: grid;
    gap: 5px;
    color: #475569;
    font-size: 0.76rem;
    font-weight: 800;
}

.form-grid input,
.form-grid select {
    min-height: 34px;
    padding: 7px 10px;
    border-radius: 9px;
    border: 1px solid rgba(100, 116, 139, 0.26);
    background: #ffffff;
    color: #0f172a;
    font-size: 0.86rem;
}

.form-grid .span-2 {
    grid-column: 1 / -1;
}

.accounts-statement {
    display: grid;
    gap: 8px;
    max-width: 560px;
    padding: 16px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.84);
    border: 1px solid rgba(148, 163, 184, 0.22);
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.08);
}

.accounts-statement div {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 7px 0;
    border-bottom: 1px solid rgba(148, 163, 184, 0.16);
    font-size: 0.9rem;
}

.accounts-statement .muted-row {
    display: block;
    padding: 0;
    border: 0;
    color: #64748b;
    font-size: 0.78rem;
}

.accounts-statement .statement-total {
    margin-top: 4px;
    padding-top: 12px;
    border-top: 2px solid rgba(15, 118, 110, 0.24);
    border-bottom: 0;
    color: #0f766e;
    font-weight: 900;
}

.profit-loss-report {
    display: grid;
    gap: 14px;
}

.pl-filter-card,
.pl-report-card {
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.86);
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.07);
}

.pl-filter-card {
    display: grid;
    grid-template-columns: repeat(3, minmax(150px, 1fr)) auto;
    gap: 10px;
    align-items: end;
    padding: 12px;
}

.pl-filter-card label {
    display: grid;
    gap: 5px;
    color: #475569;
    font-size: 0.78rem;
    font-weight: 900;
}

.pl-filter-card input,
.pl-filter-card select {
    min-height: 34px;
    padding: 7px 10px;
    border-radius: 10px;
    border: 1px solid rgba(100, 116, 139, 0.24);
    background: #ffffff;
    color: #0f172a;
    font-size: 0.86rem;
}

.pl-filter-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
}

.pl-filter-actions button {
    min-height: 34px;
    padding: 0 12px;
    white-space: nowrap;
}

.tax-day-filters {
    align-items: end;
}

.tax-day-table-wrap {
    margin-top: 8px;
}

.tax-day-table {
    width: 100%;
    border-collapse: collapse;
}

.tax-day-table th,
.tax-day-table td {
    padding-top: 2px;
    padding-bottom: 2px;
    line-height: 1.05;
}

.tax-day-table td {
    height: 24px;
}

.tax-day-table th {
    white-space: nowrap;
}

.tax-day-pager {
    justify-content: flex-end;
    margin-top: 8px;
}

.capital-funds-panel {
    display: grid;
    grid-template-columns: minmax(300px, 0.82fr) minmax(520px, 1.18fr);
    gap: 14px;
    align-items: start;
}

.capital-funds-card {
    padding: 14px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 16px;
    background:
        radial-gradient(circle at top left, rgba(15, 118, 110, 0.1), transparent 34%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(248, 250, 252, 0.82));
    box-shadow: 0 16px 38px rgba(15, 23, 42, 0.08);
}

.capital-funds-card .panel-title {
    margin-bottom: 12px;
}

.capital-funds-card .panel-title h3 {
    margin: 0 0 4px;
    color: #102a43;
    font-size: 1rem;
    font-weight: 950;
}

.capital-funds-card .panel-title span {
    color: #64748b;
    font-size: 0.8rem;
    font-weight: 700;
}

.capital-funds-form {
    display: grid;
    gap: 10px;
}

.capital-funds-form label {
    display: grid;
    gap: 5px;
    color: #475569;
    font-size: 0.78rem;
    font-weight: 900;
}

.capital-funds-form input,
.capital-funds-form select {
    min-height: 34px;
    padding: 7px 10px;
    border-radius: 10px;
    border: 1px solid rgba(100, 116, 139, 0.24);
    background: #ffffff;
    color: #0f172a;
    font-size: 0.86rem;
}

.capital-funds-form button {
    justify-self: end;
    min-height: 34px;
    padding: 0 14px;
}

.capital-funds-table th,
.capital-funds-table td {
    padding: 0.28rem 0.52rem;
    font-size: 0.84rem;
    line-height: 1.12;
}

.capital-funds-table td {
    height: 28px;
}

.pl-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(150px, 1fr));
    gap: 10px;
}

.pl-summary-card {
    padding: 13px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(241, 245, 249, 0.86));
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.07);
}

.pl-summary-card span {
    display: block;
    margin-bottom: 6px;
    color: #64748b;
    font-size: 0.76rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0;
}

.pl-summary-card strong {
    color: #0f172a;
    font-size: 1.05rem;
    font-weight: 950;
}

.pl-summary-card.positive {
    border-color: rgba(15, 118, 110, 0.24);
    background: linear-gradient(135deg, rgba(236, 253, 245, 0.96), rgba(204, 251, 241, 0.76));
}

.pl-summary-card.negative {
    border-color: rgba(220, 38, 38, 0.24);
    background: linear-gradient(135deg, rgba(254, 242, 242, 0.96), rgba(255, 228, 230, 0.78));
}

.pl-summary-card.positive strong {
    color: #0f766e;
}

.pl-summary-card.negative strong {
    color: #b91c1c;
}

.pl-report-card {
    padding: 14px;
}

.pl-report-header {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
}

.pl-report-header h3 {
    margin: 0 0 4px;
    color: #102a43;
    font-size: 1.05rem;
}

.pl-report-header p {
    margin: 0;
    color: #64748b;
    font-size: 0.82rem;
}

.pl-sections {
    display: grid;
    gap: 12px;
    margin-top: 12px;
}

.pl-section {
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 12px;
    overflow: hidden;
    background: rgba(248, 250, 252, 0.7);
}

.pl-section h4 {
    margin: 0;
    padding: 9px 12px;
    color: #0f172a;
    background: linear-gradient(135deg, rgba(15, 118, 110, 0.1), rgba(37, 99, 235, 0.08));
    border-bottom: 1px solid rgba(148, 163, 184, 0.16);
    font-size: 0.86rem;
    text-transform: uppercase;
    letter-spacing: 0;
}

.pl-line,
.pl-margin-row {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 7px 12px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
    color: #334155;
    font-size: 0.9rem;
}

.pl-line:last-child,
.pl-margin-row:last-child {
    border-bottom: 0;
}

.pl-line strong,
.pl-margin-row strong {
    color: #0f172a;
    font-weight: 900;
    text-align: right;
}

.pl-line em {
    color: #64748b;
    font-style: normal;
    font-weight: 800;
}

.pl-line.pl-less strong {
    color: #b45309;
}

.pl-line.pl-total {
    background: rgba(255, 255, 255, 0.7);
    font-weight: 900;
}

.pl-line.positive strong,
.pl-final.positive .pl-grand-total strong {
    color: #0f766e;
}

.pl-line.negative strong,
.pl-final.negative .pl-grand-total strong {
    color: #b91c1c;
}

.pl-margin-row {
    background: rgba(255, 255, 255, 0.62);
    color: #475569;
    font-weight: 800;
}

.pl-final {
    border-color: rgba(15, 118, 110, 0.24);
}

.pl-final.negative {
    border-color: rgba(220, 38, 38, 0.26);
}

.pl-grand-total {
    padding: 11px 12px;
    font-size: 1rem;
    font-weight: 950;
}

@media (max-width: 1100px) {
    .pl-filter-card {
        grid-template-columns: repeat(2, minmax(160px, 1fr));
    }

    .pl-filter-actions {
        justify-content: flex-start;
    }

    .pl-summary-grid {
        grid-template-columns: repeat(2, minmax(150px, 1fr));
    }
}

@media (max-width: 760px) {
    .form-grid.two-col {
        grid-template-columns: 1fr;
    }

    .accounts-table-toolbar,
    .accounts-table-pager {
        align-items: stretch;
        flex-direction: column;
    }

    .accounts-table-toolbar select,
    .accounts-table-pager button {
        width: 100%;
    }

    .ledger-account-filter select {
        min-width: 0;
        width: 100%;
    }
}

.redirect-page {
    justify-content: center;
    padding: 18px;
}

.redirect-card {
    width: min(420px, 94vw);
    padding: 26px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.26);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.24);
    backdrop-filter: blur(18px);
    text-align: center;
}

.redirect-card h1 {
    margin: 12px 0 16px;
    color: #071527;
    font-size: 1.45rem;
    letter-spacing: 0;
}

/* Root launch page: one-screen sign-in entry */
.launch-page {
    min-height: 100vh;
    justify-content: flex-start;
    padding: 16px;
    overflow: hidden;
}

.launch-topbar {
    width: min(1080px, 100%);
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 auto 12px;
    color: #ffffff;
}

.launch-topbar .app-brand {
    color: #ffffff;
    font-size: 0.98rem;
}

.launch-status-host {
    min-height: 34px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0;
    background: transparent;
    box-shadow: none;
    color: inherit;
}

.launch-status-host .pwa-status {
    position: static;
    margin: 0;
    min-height: 30px;
    padding: 0.35rem 0.65rem;
    border-radius: 999px;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.16);
}

.launch-page .launch-shell {
    width: min(1080px, 100%);
    min-height: 0;
    height: calc(100vh - 90px);
    margin: 0 auto;
    grid-template-columns: minmax(0, 1.12fr) minmax(300px, 0.88fr);
}

.launch-page .launch-copy {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(22px, 4vw, 44px);
}

.launch-page .launch-copy .login-mark {
    margin-bottom: 18px;
}

.launch-page .launch-copy h1 {
    font-size: clamp(2rem, 4.8vw, 4rem);
    line-height: 1;
}

.launch-page .launch-copy p {
    margin-top: 16px;
}

.launch-page .launch-panel {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.launch-page .launch-preview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 820px) {
    .launch-page {
        overflow: auto;
        padding: 12px;
    }

    .launch-topbar {
        height: auto;
        min-height: 42px;
        margin-bottom: 10px;
    }

    .launch-page .launch-shell {
        height: auto;
        grid-template-columns: 1fr;
    }

    .launch-page .launch-copy,
    .launch-page .launch-panel {
        padding: 18px;
    }

    .launch-page .launch-copy h1 {
        font-size: 2rem;
    }
}

.nav-section-title {
    margin: 14px 12px 6px;
    color: rgba(226, 232, 240, 0.68);
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

body.sidebar-collapsed .nav-section-title {
    display: none;
}

/* POS cart readability refinements */
.pos-cart-table td.pos-cart-price,
.pos-cart-table td.pos-cart-line-total,
.pos-cart-table tbody td:nth-child(3),
.pos-cart-table tbody td:nth-child(4) {
    font-weight: 900;
    color: #0f172a;
}

.pos-action-grid .pos-btn,
.pos-more-menu button {
    font-size: 0.98rem;
    font-weight: 900;
}

.pos-more-menu button {
    color: #ffffff;
    border: 0;
}

.pos-more-menu button:nth-child(1) {
    background: linear-gradient(135deg, #0f766e, #14b8a6);
}

.pos-more-menu button:nth-child(2) {
    background: linear-gradient(135deg, #2563eb, #38bdf8);
}

.pos-more-menu button:nth-child(3) {
    background: linear-gradient(135deg, #7c3aed, #a855f7);
}

.pos-more-menu button:nth-child(4) {
    background: linear-gradient(135deg, #475569, #64748b);
}

.pos-more-menu button.pos-more-whatsapp-btn {
    background: linear-gradient(135deg, #128c4b, #25a866);
}

.pos-more-menu button.pos-more-return-btn {
    background: linear-gradient(135deg, #dc2626, #f97316);
}

.pos-more-menu .pos-more-whatsapp-btn {
    display: grid;
    place-items: center;
    width: 36px;
    min-width: 36px;
    padding: 0;
}

.pos-more-menu .pos-more-whatsapp-btn svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.customer-purchase-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}

.customer-purchase-summary span {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.95), rgba(241, 245, 249, 0.95));
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.customer-purchase-summary strong {
    color: #0f172a;
    font-size: 0.98rem;
    letter-spacing: 0;
    text-transform: none;
}

.customer-purchase-history {
    max-height: min(52vh, 460px);
    overflow: auto;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 10px;
}

.customer-purchase-history table {
    margin: 0;
}

.customer-purchase-history th,
.customer-purchase-history td {
    padding: 8px 10px;
    font-size: 0.82rem;
    line-height: 1.25;
}

@media (max-width: 720px) {
    .customer-purchase-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Transaction filters, purchase totals, and supplier payment polish */
.filter-select,
.filters select {
    padding-right: 34px !important;
    text-overflow: ellipsis;
}

.medium-btn {
    min-height: 34px;
    padding: 7px 14px;
    border-radius: 9px;
    font-size: 0.84rem;
    font-weight: 900;
}

.purchase-total-row,
.supplier-payment-summary {
    display: grid;
    grid-template-columns: repeat(5, minmax(110px, 1fr));
    gap: 8px;
    align-items: stretch;
    margin: 10px 0;
}

.supplier-payment-summary {
    grid-template-columns: repeat(3, minmax(140px, 1fr));
}

.purchase-total-row span,
.purchase-total-row label,
.supplier-payment-summary span {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 58px;
    margin: 0;
    padding: 8px 10px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 10px;
    background: rgba(248, 250, 252, 0.92);
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.purchase-total-row strong,
.supplier-payment-summary strong {
    color: #0f172a;
    font-size: 1rem;
    letter-spacing: 0;
}

.purchase-total-row em,
.supplier-payment-summary em {
    color: #64748b;
    font-size: 0.68rem;
    font-style: normal;
}

.purchase-total-row input {
    width: 100%;
    min-height: 30px;
    margin-top: 4px;
    padding: 5px 7px;
    font-size: 0.9rem;
    font-weight: 800;
}

#stockTabUser .inventory-filters {
    display: grid;
    grid-template-columns: minmax(220px, 420px) auto auto;
    justify-content: start;
    align-items: end;
    gap: 8px;
    padding: 10px;
}

#stockTabUser .inventory-filters label {
    flex: 1 1 280px;
    margin: 0;
    font-size: 0.78rem;
    font-weight: 900;
    color: #475569;
}

#stockTabUser .inventory-filters input {
    min-height: 36px;
    margin-top: 5px;
    font-size: 0.86rem;
}

#stockTabUser .inventory-filters .medium-btn {
    width: 70px !important;
    min-width: 70px;
    justify-self: start;
    min-height: 30px;
    padding: 5px 6px;
    font-size: 0.76rem;
    border-radius: 8px;
}

.inline-pay-input {
    width: 96px;
    min-height: 30px;
    padding: 5px 7px;
    font-size: 0.82rem;
}

@media (max-width: 900px) {
    .purchase-total-row,
    .supplier-payment-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* POS billing readability: text-only scale */
.user-page .quick-product-tile strong,
.user-page .pos-product-primary {
    font-size: 0.8rem;
    line-height: 1.12;
}

.user-page .quick-product-tile small,
.user-page .pos-product-secondary,
.user-page .pos-cart-meta {
    font-size: 0.71rem;
    line-height: 1.1;
}

.user-page .pos-cart-name {
    font-size: 0.82rem;
    line-height: 1.15;
}

.user-page .pos-total-box div,
.user-page .pos-payment-grid label {
    font-size: 0.86rem;
}

.user-page .pos-total-box span {
    font-size: 0.94rem;
    font-weight: 950;
}

.user-page .pos-total-box strong {
    font-size: 1rem;
    font-weight: 950;
}

.user-page .pos-grand-total span {
    font-size: 1.02rem;
    font-weight: 950;
}

.user-page .pos-grand-total strong {
    font-size: 1.22rem;
    font-weight: 950;
}

.user-page .pos-action-grid .pos-btn,
.user-page .pos-more-menu button {
    font-size: 1.02rem;
}

.user-page .pos-calculator {
    padding: 7px;
}

.user-page .pos-calculator-display {
    min-height: 38px;
    margin-bottom: 6px;
    font-size: 1.08rem;
}

.user-page .pos-calculator-grid {
    gap: 6px;
}

.user-page .pos-calculator-grid button {
    min-height: 32px;
    padding: 0.22rem;
    font-size: 0.98rem;
    line-height: 1;
}

.user-page #paymentMethod.pos-input {
    appearance: none;
    -webkit-appearance: none;
    background-image:
        url("data:image/svg+xml,%3Csvg width='10' height='7' viewBox='0 0 10 7' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.25L5 5.25L9 1.25Z' fill='%230f8f8f'/%3E%3C/svg%3E"),
        linear-gradient(135deg, rgba(15, 154, 154, 0.16), rgba(12, 48, 73, 0.08));
    background-position:
        calc(100% - 12px) 50%,
        right 0 top 0;
    background-size: 10px 7px, 34px 100%;
    background-repeat: no-repeat;
    padding-right: 40px;
}

/* Admin dashboard color refresh */
.admin-page #dashboardTab .page-heading {
    position: relative;
    overflow: hidden;
    padding: 18px 20px;
    border: 1px solid rgba(37, 99, 235, 0.14);
    border-radius: 14px;
    background:
        radial-gradient(circle at 10% 0%, rgba(20, 184, 166, 0.24), transparent 34%),
        radial-gradient(circle at 86% 12%, rgba(124, 58, 237, 0.18), transparent 30%),
        linear-gradient(135deg, #f8fbff 0%, #eef8ff 44%, #f7f3ff 100%);
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.08);
}

.admin-page #dashboardTab .page-heading h2 {
    color: #0f223d;
}

.admin-page #dashboardTab .page-heading p {
    color: #43566f;
    font-weight: 700;
}

.admin-page :is(#dashboardTab, #adminEditionDashboardTab, #gymPanelTab:where(.gym-dashboard)) .metric-card {
    min-height: 116px;
    padding: 1.05rem;
    border: 1px solid rgba(255, 255, 255, 0.72);
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.1);
}

.admin-page :is(#dashboardTab, #adminEditionDashboardTab, #gymPanelTab:where(.gym-dashboard)) .metric-card::before {
    height: 100%;
    opacity: 1;
    z-index: 0;
}

.admin-page :is(#dashboardTab, #adminEditionDashboardTab, #gymPanelTab:where(.gym-dashboard)) .metric-card > * {
    position: relative;
    z-index: 1;
}

.admin-page :is(#dashboardTab, #adminEditionDashboardTab, #gymPanelTab:where(.gym-dashboard)) .metric-card:nth-child(1)::before {
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.22), rgba(37, 99, 235, 0.12));
}

.admin-page :is(#dashboardTab, #adminEditionDashboardTab, #gymPanelTab:where(.gym-dashboard)) .metric-card:nth-child(2)::before {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.2), rgba(59, 130, 246, 0.12));
}

.admin-page :is(#dashboardTab, #adminEditionDashboardTab, #gymPanelTab:where(.gym-dashboard)) .metric-card:nth-child(3)::before {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(20, 184, 166, 0.12));
}

.admin-page :is(#dashboardTab, #adminEditionDashboardTab, #gymPanelTab:where(.gym-dashboard)) .metric-card:nth-child(4)::before {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.22), rgba(239, 68, 68, 0.11));
}

.admin-page :is(#dashboardTab, #adminEditionDashboardTab, #gymPanelTab:where(.gym-dashboard)) .metric-card:nth-child(5)::before {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.2), rgba(99, 102, 241, 0.12));
}

.admin-page :is(#dashboardTab, #adminEditionDashboardTab, #gymPanelTab:where(.gym-dashboard)) .metric-card:nth-child(6)::before {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.24), rgba(249, 115, 22, 0.12));
}

.admin-page :is(#dashboardTab, #adminEditionDashboardTab, #gymPanelTab:where(.gym-dashboard)) .metric-card:nth-child(7)::before {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(132, 204, 22, 0.12));
}

.admin-page :is(#dashboardTab, #adminEditionDashboardTab, #gymPanelTab:where(.gym-dashboard)) .metric-card:nth-child(8)::before {
    background: linear-gradient(135deg, rgba(244, 63, 94, 0.2), rgba(168, 85, 247, 0.12));
}

.admin-page :is(#dashboardTab, #adminEditionDashboardTab, #gymPanelTab:where(.gym-dashboard)) .metric-card span {
    color: #334155;
    font-size: 0.88rem;
    font-weight: 950;
}

.admin-page :is(#dashboardTab, #adminEditionDashboardTab, #gymPanelTab:where(.gym-dashboard)) .metric-card strong {
    color: #0b172a;
    font-size: 1.48rem;
    font-weight: 950;
}

.admin-page #dashboardTab .dashboard-grid .panel {
    border: 1px solid rgba(37, 99, 235, 0.12);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 251, 255, 0.94)),
        radial-gradient(circle at 0% 0%, rgba(20, 184, 166, 0.12), transparent 30%);
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.08);
}

.admin-page #dashboardTab .dashboard-grid .panel:nth-child(2) {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 251, 255, 0.94)),
        radial-gradient(circle at 100% 0%, rgba(124, 58, 237, 0.12), transparent 30%);
}

.admin-page #dashboardTab .dashboard-grid .panel:nth-child(3) {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 251, 255, 0.94)),
        radial-gradient(circle at 0% 100%, rgba(245, 158, 11, 0.14), transparent 32%);
}

.admin-page #dashboardTab .dashboard-grid .panel:nth-child(4) {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 251, 255, 0.94)),
        radial-gradient(circle at 100% 100%, rgba(14, 165, 233, 0.13), transparent 32%);
}

.admin-page #dashDailySummary.summary-list {
    gap: 0.28rem;
}

.admin-page #dashDailySummary .summary-row {
    min-height: 0;
    padding: 0.36rem 0;
    gap: 0.5rem;
}

/* Admin dashboard palette refinement */
.admin-page #dashboardTab {
    --dash-navy: #0b2139;
    --dash-blue: #155e8b;
    --dash-teal: #0f8f8f;
    --dash-cyan: #0ea5b7;
    --dash-green: #138a5b;
    --dash-amber: #c97910;
    --dash-rose: #c2415b;
}

.admin-page #dashboardTab .page-heading {
    border-color: rgba(15, 143, 143, 0.28);
    background:
        linear-gradient(135deg, rgba(11, 33, 57, 0.98) 0%, rgba(16, 78, 103, 0.96) 52%, rgba(12, 48, 73, 0.98) 100%),
        linear-gradient(90deg, rgba(15, 143, 143, 0.36), rgba(14, 165, 183, 0.22));
    box-shadow: 0 18px 42px rgba(11, 33, 57, 0.18);
}

.admin-page #dashboardTab .page-heading h2 {
    color: #ffffff;
}

.admin-page #dashboardTab .page-heading p {
    color: rgba(232, 247, 250, 0.88);
}

.admin-page #dashboardTab #dashboardRefreshBtn {
    background: linear-gradient(135deg, #ffffff, #dff7f5) !important;
    color: #0c4a57 !important;
    border-color: rgba(255, 255, 255, 0.58) !important;
}

.admin-page :is(#dashboardTab, #adminEditionDashboardTab, #gymPanelTab:where(.gym-dashboard)) .metric-card {
    background: linear-gradient(145deg, var(--dash-card-start, #f8fbff), var(--dash-card-end, #eef7ff));
    border-color: color-mix(in srgb, var(--dash-card-accent, #0f8f8f) 25%, white);
    box-shadow: 0 14px 30px rgba(11, 33, 57, 0.11);
}

.admin-page :is(#dashboardTab, #adminEditionDashboardTab, #gymPanelTab:where(.gym-dashboard)) .metric-card::before {
    inset: 0 0 auto 0;
    height: 5px;
    background: linear-gradient(90deg, var(--dash-card-accent, #0f8f8f), var(--dash-card-accent-soft, #38bdf8));
}

.admin-page :is(#dashboardTab, #adminEditionDashboardTab, #gymPanelTab:where(.gym-dashboard)) .metric-card:nth-child(1) {
    --dash-card-start: #c9f7f1;
    --dash-card-end: #e0f7ff;
    --dash-card-accent: var(--dash-teal);
    --dash-card-accent-soft: #19b8ad;
}

.admin-page :is(#dashboardTab, #adminEditionDashboardTab, #gymPanelTab:where(.gym-dashboard)) .metric-card:nth-child(2) {
    --dash-card-start: #d7eaff;
    --dash-card-end: #e8f3ff;
    --dash-card-accent: var(--dash-blue);
    --dash-card-accent-soft: #38bdf8;
}

.admin-page :is(#dashboardTab, #adminEditionDashboardTab, #gymPanelTab:where(.gym-dashboard)) .metric-card:nth-child(3) {
    --dash-card-start: #d5f7e3;
    --dash-card-end: #e7fbf1;
    --dash-card-accent: var(--dash-green);
    --dash-card-accent-soft: #22c55e;
}

.admin-page :is(#dashboardTab, #adminEditionDashboardTab, #gymPanelTab:where(.gym-dashboard)) .metric-card:nth-child(4) {
    --dash-card-start: #ffedc2;
    --dash-card-end: #fff5dc;
    --dash-card-accent: var(--dash-amber);
    --dash-card-accent-soft: #f59e0b;
}

.admin-page :is(#dashboardTab, #adminEditionDashboardTab, #gymPanelTab:where(.gym-dashboard)) .metric-card:nth-child(5) {
    --dash-card-start: #ccefff;
    --dash-card-end: #e2f5ff;
    --dash-card-accent: var(--dash-cyan);
    --dash-card-accent-soft: #06b6d4;
}

.admin-page :is(#dashboardTab, #adminEditionDashboardTab, #gymPanelTab:where(.gym-dashboard)) .metric-card:nth-child(6) {
    --dash-card-start: #ffebbf;
    --dash-card-end: #fff3da;
    --dash-card-accent: #d97706;
    --dash-card-accent-soft: #f97316;
}

.admin-page :is(#dashboardTab, #adminEditionDashboardTab, #gymPanelTab:where(.gym-dashboard)) .metric-card:nth-child(7) {
    --dash-card-start: #d5f7dd;
    --dash-card-end: #ebfae7;
    --dash-card-accent: #0f766e;
    --dash-card-accent-soft: #84cc16;
}

.admin-page :is(#dashboardTab, #adminEditionDashboardTab, #gymPanelTab:where(.gym-dashboard)) .metric-card:nth-child(8) {
    --dash-card-start: #ffdce5;
    --dash-card-end: #ffebf1;
    --dash-card-accent: var(--dash-rose);
    --dash-card-accent-soft: #ef4444;
}

.admin-page :is(#dashboardTab, #adminEditionDashboardTab, #gymPanelTab:where(.gym-dashboard)) .metric-card span {
    color: #233951;
}

.admin-page :is(#dashboardTab, #adminEditionDashboardTab, #gymPanelTab:where(.gym-dashboard)) .metric-card strong {
    color: var(--dash-navy);
}

.admin-page #dashboardTab .dashboard-grid .panel {
    border-color: rgba(15, 143, 143, 0.14);
    background: linear-gradient(180deg, #ffffff 0%, #f7fbfd 100%);
}

.admin-page #dashboardTab .dashboard-sales-chart-panel {
    width: 100%;
    margin: 0 0 1rem;
    padding: 1rem 1.1rem 0.9rem;
    border: 1px solid rgba(15, 143, 143, 0.16);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 251, 253, 0.96)),
        radial-gradient(circle at 0% 0%, rgba(15, 143, 143, 0.12), transparent 36%);
    box-shadow: 0 16px 34px rgba(11, 33, 57, 0.1);
}

.dashboard-chart-total {
    color: #0f8f8f;
    font-size: 0.94rem;
    font-weight: 950;
}

.dashboard-sales-chart {
    position: relative;
    width: 100%;
    min-height: 240px;
}

.dashboard-sales-chart svg {
    display: block;
    width: 100%;
    height: 260px;
}

.dash-chart-grid {
    stroke: rgba(15, 143, 143, 0.12);
    stroke-width: 1;
}

.dash-chart-y,
.dash-chart-x {
    fill: #64748b;
    font-size: 12px;
    font-weight: 800;
}

.dash-chart-area {
    fill: url(#dashSalesAreaGradient);
}

.dash-chart-line {
    fill: none;
    stroke: url(#dashSalesLineGradient);
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.dash-chart-dot {
    fill: #ffffff;
    stroke: #0f8f8f;
    stroke-width: 3;
    cursor: pointer;
    transition: r 0.15s ease, stroke-width 0.15s ease;
}

.dash-chart-dot:hover,
.dash-chart-dot:focus {
    stroke-width: 4;
    outline: none;
}

.dash-chart-tooltip {
    position: absolute;
    z-index: 5;
    pointer-events: none;
    transform: translate(-50%, -100%);
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 118px;
    padding: 8px 10px;
    border: 1px solid rgba(15, 143, 143, 0.22);
    border-radius: 9px;
    background: rgba(11, 33, 57, 0.96);
    color: #ffffff;
    box-shadow: 0 14px 28px rgba(11, 33, 57, 0.24);
    text-align: center;
}

.dash-chart-tooltip strong {
    font-size: 0.78rem;
    line-height: 1.1;
}

.dash-chart-tooltip span {
    color: #9ff4ec;
    font-size: 0.86rem;
    font-weight: 950;
    line-height: 1.15;
}

.admin-page #dashboardTab .panel-title {
    padding-bottom: 0.55rem;
    border-bottom: 1px solid rgba(15, 143, 143, 0.13);
}

.admin-page #dashboardTab .panel-title h3 {
    color: var(--dash-navy);
    font-weight: 950;
}

.admin-page #dashboardTab .panel-title .text-btn {
    color: var(--dash-teal);
}

.admin-page #dashboardTab .dashboard-grid th {
    background: linear-gradient(100deg, #2a4d68 0%, #3a6683 100%) !important;
    color: #f1f5f9 !important;
    border-bottom-color: #477793 !important;
    font-weight: 950;
}

.admin-page #dashDailySummary .summary-row {
    border-color: rgba(15, 143, 143, 0.12);
}

.admin-page #dashDailySummary .summary-row strong {
    color: var(--dash-teal);
}

.field-autocomplete-panel {
    position: absolute;
    z-index: 5000;
    max-height: 260px;
    overflow-y: auto;
    padding: 6px;
    border: 1px solid rgba(15, 143, 143, 0.22);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 18px 36px rgba(11, 33, 57, 0.18);
}

.field-autocomplete-option {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    margin: 0;
    padding: 8px 10px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: #ffffff;
    color: #102033;
    box-shadow: none;
    text-align: left;
    cursor: pointer;
}

.field-autocomplete-option:hover,
.field-autocomplete-option.active {
    border-color: #a8d8d5;
    background: #edf8f7;
    color: #0b3445;
    transform: none;
    box-shadow: inset 3px 0 0 var(--pp-accent, #0f8f8f);
}

.field-autocomplete-option:focus-visible {
    outline: 2px solid var(--pp-accent, #0f8f8f);
    outline-offset: -2px;
    border-color: #8fcac7;
    background: #edf8f7;
    color: #0b3445;
    box-shadow: inset 3px 0 0 var(--pp-accent, #0f8f8f);
}

.field-autocomplete-option strong {
    font-size: 0.86rem;
    line-height: 1.15;
}

.field-autocomplete-option span {
    color: #64748b;
    font-size: 0.72rem;
    line-height: 1.15;
}

.field-autocomplete-option:hover span,
.field-autocomplete-option.active span,
.field-autocomplete-option:focus-visible span {
    color: #486475;
}

.product-master-search {
    position: relative;
    display: block;
}

.product-master-results {
    top: calc(100% + 5px);
    right: 0;
    left: 0;
    min-width: min(420px, 90vw);
}

.product-master-option em {
    color: #526172;
    font-size: 0.69rem;
    font-style: normal;
    font-weight: 800;
}

.product-master-option:disabled {
    cursor: not-allowed;
    border-color: #e1e7eb;
    background: #f5f7f8;
    opacity: 0.74;
}

.product-master-option:disabled:hover {
    border-color: #e1e7eb;
    background: #f5f7f8;
    color: #102033;
    box-shadow: none;
}

.product-master-empty {
    display: block;
    padding: 10px;
    color: #64748b;
    font-size: 0.8rem;
}

#pMasterProductStatus.field-error {
    color: var(--pp-danger, #b42318);
}

/* Profound POS branding */
.app-brand {
    gap: 9px;
}

.app-brand::before {
    width: 26px !important;
    height: 26px !important;
    margin-right: 0 !important;
    border-radius: 8px !important;
    background: #ffffff url("/static/icons/logo.png") center / cover no-repeat !important;
    box-shadow: 0 8px 22px rgba(15, 143, 143, 0.22) !important;
}

body.auth-page .app-brand::before {
    background: rgba(255, 255, 255, 0.96) url("/static/icons/logo.png") center / cover no-repeat !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22) !important;
}

.login-logo {
    width: 58px;
    height: 58px;
    display: block;
    margin: 0 auto 12px;
    border-radius: 16px;
    object-fit: cover;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 18px 40px rgba(3, 18, 34, 0.22);
}

.sidebar-footer {
    margin-top: auto;
    padding: 12px 12px 14px;
    border-top: 1px solid rgba(148, 163, 184, 0.14);
    color: #cbd5e1;
    display: flex;
    flex-direction: column;
    gap: 3px;
    line-height: 1.15;
}

.sidebar-footer strong {
    color: #ffffff;
    font-size: 0.82rem;
    font-weight: 950;
}

.sidebar-footer span {
    color: #9ff4ec;
    font-size: 0.68rem;
    font-weight: 800;
}

.sidebar-footer small {
    color: #94a3b8;
    font-size: 0.66rem;
    font-weight: 700;
}

.sidebar-collapsed .sidebar-footer {
    align-items: center;
    padding: 10px 6px;
}

.sidebar-collapsed .sidebar-footer span,
.sidebar-collapsed .sidebar-footer small {
    display: none;
}

.sidebar-collapsed .sidebar-footer strong {
    width: 26px;
    height: 26px;
    overflow: hidden;
    border-radius: 8px;
    background: #ffffff url("/static/icons/logo.png") center / cover no-repeat;
    color: transparent;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22);
}

.app-footer,
.auth-footer {
    color: #64748b;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0;
}

.app-footer {
    display: flex;
    justify-content: center;
    gap: 12px;
    padding: 10px 16px 14px;
}

body.user-page.user-pos-active .app-footer {
    display: none;
}

.auth-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 14px;
    text-align: center;
    color: rgba(255, 255, 255, 0.78);
}

.support-line {
    margin: 12px 0 0;
    color: #64748b;
    font-size: 0.76rem;
    font-weight: 800;
    line-height: 1.35;
    text-align: center;
}

.auth-support-line {
    position: relative;
    z-index: 2;
    max-width: 360px;
    margin: 12px auto 0;
    color: rgba(255, 255, 255, 0.78);
}

.support-line strong {
    color: #0f766e;
    font-weight: 950;
}

.auth-support-line strong {
    color: #9ff4ec;
}

.launch-support {
    color: rgba(255, 255, 255, 0.76);
    text-align: left;
}

.launch-support strong {
    color: #9ff4ec;
}

/* User collections batch */
.compact-heading {
    margin-bottom: 10px;
}

.compact-heading h3 {
    margin-bottom: 2px;
}

.compact-heading p {
    margin: 0;
    color: #64748b;
    font-size: 0.82rem;
    font-weight: 700;
}

.collection-entry-card,
.collection-batch-card {
    padding: 12px;
    margin-bottom: 12px;
}

.collection-entry-grid {
    display: grid;
    grid-template-columns: minmax(220px, 1.4fr) minmax(140px, 0.8fr) minmax(150px, 0.9fr) minmax(150px, 0.9fr);
    gap: 10px;
    align-items: end;
}

.collection-entry-grid label {
    font-size: 0.74rem;
    font-weight: 850;
    color: #475569;
}

.collection-entry-grid input,
.collection-entry-grid select {
    width: 100%;
    min-height: 34px;
    margin-top: 4px;
    padding: 7px 9px;
    font-size: 0.84rem;
}

.collection-outstanding-box {
    min-height: 34px;
    padding: 7px 10px;
    border: 1px solid rgba(15, 143, 143, 0.18);
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(15, 143, 143, 0.08), rgba(14, 165, 183, 0.06));
}

.collection-outstanding-box span {
    display: block;
    color: #64748b;
    font-size: 0.66rem;
    font-weight: 850;
    line-height: 1;
}

.collection-outstanding-box strong {
    display: block;
    margin-top: 3px;
    color: #0f766e;
    font-size: 0.95rem;
    font-weight: 950;
    line-height: 1.1;
}

.collection-action-row,
.collection-batch-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 10px;
}

.collection-action-row button,
.collection-batch-actions button {
    min-height: 32px;
    padding: 7px 12px;
    font-size: 0.78rem;
}

.collection-batch-table th,
.collection-batch-table td {
    padding: 5px 7px;
    font-size: 0.8rem;
    line-height: 1.2;
}

.collection-batch-table .small-action {
    padding: 4px 8px;
    font-size: 0.72rem;
}

.collection-batch-table input[type="checkbox"],
#collectionSelectAll {
    width: 16px;
    height: 16px;
    accent-color: #0f8f8f;
}

.collection-batch-total {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    margin-top: 8px;
    color: #475569;
    font-size: 0.84rem;
    font-weight: 850;
}

.collection-batch-total strong {
    color: #0f766e;
    font-weight: 950;
}

/* Collapsed sidebar submenu is a light flyout, so keep its labels dark and readable. */
body.sidebar-collapsed .sidebar .submenu.open .nav-sublink,
.sidebar.sidebar-collapsed .submenu.open .nav-sublink {
    color: #334155;
}

body.sidebar-collapsed .sidebar .submenu.open .nav-sublink:hover,
.sidebar.sidebar-collapsed .submenu.open .nav-sublink:hover {
    color: #0f172a;
    background: #f1f5f9;
    border-color: #bfdbfe;
}

/* POS cart's empty state mirrors the full-height cart panel instead of a plain table row. */
.pos-cart-table:has(.pos-cart-empty-cell) {
    height: 100%;
}

.pos-cart-empty-cell {
    padding: 0 !important;
    text-align: center;
    vertical-align: middle !important;
}

.pos-cart-empty-state {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 220px;
    height: 100%;
    padding: 24px;
    flex-direction: column;
    color: #64748b;
    font-size: 0.92rem;
    line-height: 1.35;
}

.pos-cart-empty-state strong {
    margin: 10px 0 6px;
    color: #0f172a;
    font-size: 1.08rem;
}

.pos-cart-empty-icon {
    width: 58px;
    height: 58px;
    color: #dbe5f1;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 4;
}

.pos-btn-icon {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    margin-right: 0.28em;
    vertical-align: -0.1em;
    line-height: 1;
}

.pos-btn-icon svg {
    width: 0.86em;
    height: 0.86em;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

/* Compact barcode affordance and calculator styling for the user POS billing pane. */
.user-page .pos-barcode-field {
    position: relative;
    min-width: 0;
}

.user-page .pos-barcode-field .pos-barcode-input {
    padding-left: 2.35rem;
}

.user-page .pos-barcode-icon {
    position: absolute;
    top: 50%;
    left: 0.7rem;
    z-index: 1;
    display: inline-flex;
    width: 1em;
    height: 1em;
    color: #087b86;
    font-size: 1rem;
    pointer-events: none;
    transform: translateY(-50%);
}

.user-page .pos-barcode-icon svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-width: 1.8;
}

.user-page .pos-calculator {
    padding: 7px;
    background: #ffffff;
    border-color: #e2e8f0;
}

.user-page .pos-calculator-display {
    min-height: 38px;
    margin-bottom: 6px;
    padding: 0.4rem 0.6rem;
    background: #102132;
    border-color: #102132;
    border-radius: 7px;
    color: #ffffff;
    font-size: 1rem;
}

.user-page .pos-calculator-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-flow: row;
    gap: 6px;
}

.user-page .pos-calculator-grid button {
    min-height: 32px;
    padding: 0.22rem;
    background: #f8fafc;
    border: 1px solid #f1f5f9;
    border-radius: 7px;
    color: #0f172a;
    font-size: 0.9rem;
    font-weight: 800;
    box-shadow: none;
}

.user-page .pos-calculator-grid button:hover {
    background: #eef2f7;
    border-color: #e2e8f0;
    transform: none;
}

.user-page .pos-calculator-grid button:nth-child(1) {
    color: #087b86;
}

.user-page .pos-calculator-grid button:nth-child(8),
.user-page .pos-calculator-grid button:nth-child(12) {
    background: #fff3e6;
    color: #9a4a13;
    border-color: #fff3e6;
}

.user-page .pos-calculator-grid .pos-calc-backspace {
    background: #de8470;
    border-color: #de8470;
    color: #ffffff;
}

.user-page .pos-calculator-grid .pos-calc-backspace:hover {
    background: #d17460;
    border-color: #d17460;
    color: #ffffff;
}

.user-page .pos-calculator-grid .pos-calc-equals {
    grid-row: span 2;
    background: #078567;
    border-color: #078567;
    color: #ffffff;
}

.user-page .pos-calculator-grid .pos-calc-equals:hover {
    background: #06745a;
    border-color: #06745a;
}

.user-page .pos-calculator-grid .pos-calc-zero {
    grid-column: span 2;
}

.user-page .pos-customer-field {
    position: relative;
    width: 100%;
}

.user-page .pos-customer-field .pos-input {
    padding-right: 2.8rem;
}

.user-page .pos-customer-icon {
    position: absolute;
    top: 1px;
    right: 1px;
    bottom: 1px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    color: #5b7286;
    font-size: 0.84rem;
    background: #f8fafc;
    border-left: 1px solid #d7e1e8;
    border-radius: 0 7px 7px 0;
    pointer-events: none;
}

.user-page .pos-customer-icon svg {
    width: 1em;
    height: 1em;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

/* Subtle sidebar-inspired color treatment for the POS cart and search-result headers only. */
.user-page .pos-cart-table th,
.user-page .pos-product-list th {
    background: linear-gradient(100deg, #2a4d68 0%, #3a6683 100%) !important;
    color: #f1f5f9 !important;
    border-bottom-color: #477793 !important;
}

@media (min-width: 641px) {
    .user-page .pos-product-panel {
        grid-template-rows: auto 210px minmax(0, 1fr) !important;
    }

    .user-page .pos-search-results-panel {
        display: flex;
        height: 210px;
        max-height: 210px;
        min-height: 0;
        gap: 5px;
        overflow: hidden;
    }

    .user-page .pos-search-results-panel .pos-product-list-wrap {
        flex: 1;
        min-height: 0;
    }

    .user-page .pos-product-workspace {
        display: grid;
        grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.9fr);
        grid-row: 3;
        gap: 10px;
        height: 100%;
        min-height: 0;
        align-self: stretch;
        overflow: hidden;
    }

    .user-page .pos-quick-products {
        display: grid;
        grid-template-rows: auto minmax(0, 1fr);
        height: 100%;
        min-height: 0;
    }

    .user-page .pos-quick-products .quick-product-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-template-rows: repeat(5, minmax(0, 1fr));
        grid-auto-rows: minmax(0, 1fr);
        height: 100%;
        min-height: 0;
        overflow: hidden;
    }

    .user-page .pos-quick-products .quick-product-tile {
        container-type: inline-size;
        justify-content: space-between;
        gap: clamp(2px, 2cqw, 4px);
        padding: clamp(2px, 2.5cqw, 5px);
    }

    .user-page .pos-quick-products .quick-product-tile strong {
        display: -webkit-box;
        min-height: 0;
        max-height: 4.32em;
        overflow: hidden;
        /* Scale the label with its tile, while keeping compact POS cards readable. */
        font-size: clamp(0.72rem, 11.5cqw, 1.08rem);
        line-height: 1.08;
        white-space: normal;
        -webkit-box-orient: vertical;
        line-clamp: 4;
        -webkit-line-clamp: 4;
    }

    .user-page .pos-quick-products .quick-product-tile small {
        display: block;
        flex: 0 0 auto;
        margin-top: auto;
        font-size: clamp(0.66rem, 9.5cqw, 0.9rem);
    }

    .user-page .pos-calculator {
        display: flex;
        min-height: 0;
        flex-direction: column;
    }

    .user-page .pos-calculator-grid {
        flex: 1;
        grid-template-rows: repeat(5, minmax(0, 1fr));
        min-height: 0;
    }

    .user-page .pos-calculator-grid button {
        min-height: 0;
    }
}

/* Keep the five existing POS actions on one compact row at tablet/desktop widths. */
@media (min-width: 641px) {
    .user-page .pos-action-grid {
        grid-template-columns: 0.7fr 1.2fr 1.25fr 0.75fr 0.75fr;
    }

    .user-page .pos-action-grid .pos-btn {
        min-width: 0;
        white-space: nowrap;
    }
}

@media (max-width: 1100px) {
    .collection-entry-grid {
        grid-template-columns: repeat(2, minmax(160px, 1fr));
    }
}

@media (max-width: 640px) {
    .collection-entry-grid {
        grid-template-columns: 1fr;
    }
}

/* Product promotion controls and reporting. */
.promotion-status-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 12px;
}

.promotion-main-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 0 0 14px;
    padding: 4px;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    background: #f8fafc;
}

.promotion-main-tabs button {
    flex: 1 1 180px;
    padding: 9px 12px;
    border: 1px solid transparent;
    border-radius: 7px;
    background: transparent;
    color: #475569;
    font-weight: 850;
}

.promotion-main-tabs button.active {
    background: linear-gradient(100deg, #2a4d68, #3a6683);
    border-color: #3a6683;
    color: #f1f5f9;
}

.promotion-status-tabs button {
    padding: 8px 12px;
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    color: #334155;
}

.promotion-status-tabs button.active {
    background: linear-gradient(100deg, #2a4d68, #3a6683);
    border-color: #3a6683;
    color: #f1f5f9;
}

.promotion-form-card,
.promotion-list-card,
.promotion-report-card {
    margin-bottom: 14px;
}

.promotion-form-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(180px, 1fr));
    gap: 12px;
    margin: 12px 0;
}

.promotion-form-grid label,
.promotion-picker-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
    color: #334155;
    font-size: 0.82rem;
    font-weight: 800;
}

.promotion-checkbox {
    flex-direction: row !important;
    align-items: center;
    align-self: end;
    min-height: 38px;
}

.promotion-checkbox input {
    width: auto;
    margin: 0;
}

.promotion-picker-group {
    margin: 14px 0;
}

.promotion-picker-results {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 6px;
    max-height: 168px;
    overflow: auto;
    padding: 6px;
    border: 1px solid #dbe4ee;
    border-radius: 8px;
    background: #f8fafc;
}

.promotion-product-option {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 0;
    padding: 7px 9px;
    background: #ffffff;
    border: 1px solid #dbe4ee;
    color: #1e3a56;
    text-align: left;
}

.promotion-product-option span {
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 700;
}

.promotion-selected-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 28px;
}

.promotion-product-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    padding: 4px 7px;
    border: 1px solid #9bd5d4;
    border-radius: 999px;
    background: #e5f8f5;
    color: #0f5960;
    font-size: 0.76rem;
    font-weight: 800;
}

.promotion-product-chip button {
    min-width: 18px;
    height: 18px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #0f5960;
    line-height: 1;
}

.promotion-status {
    display: inline-flex;
    padding: 3px 7px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 900;
    text-transform: capitalize;
}

.promotion-status.active { background: #dcfce7; color: #166534; }
.promotion-status.scheduled { background: #dbeafe; color: #1d4ed8; }
.promotion-status.expired { background: #f1f5f9; color: #64748b; }
.promotion-status.inactive { background: #fee2e2; color: #b91c1c; }
.promotion-actions { white-space: nowrap; }
.promotion-actions button { margin: 2px; }

.promotion-report-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 12px 0;
}

.promotion-report-summary div {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px;
    border: 1px solid #cfe5ed;
    border-radius: 9px;
    background: linear-gradient(135deg, #effcff, #eff6ff);
}

.promotion-report-summary span { color: #475569; font-size: 0.75rem; font-weight: 800; }
.promotion-report-summary strong { color: #153d5a; font-size: 1rem; }
.promotion-cashier-heading { margin-top: 16px; }

/* POS promotion pricing: no promotion label in the product column. */
.user-page .pos-cart-table th:nth-child(1) { width: 31%; }
.user-page .pos-cart-table th:nth-child(2) { width: 15%; }
.user-page .pos-cart-table th:nth-child(3) { width: 13%; }
.user-page .pos-cart-table th:nth-child(4) { width: 8%; }
.user-page .pos-cart-table th:nth-child(5) { width: 11%; }
.user-page .pos-cart-table th:nth-child(6) { width: 17%; }
.user-page .pos-cart-table th:nth-child(7) { width: 5%; }

.user-page .pos-cart-price {
    white-space: nowrap;
}

.user-page .pos-cart-price strong {
    display: block;
    color: #0f172a;
}

.user-page .pos-cart-original-price {
    display: block;
    color: #94a3b8;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: line-through;
}

.user-page .pos-cart-vat,
.user-page .pos-cart-discount {
    color: #475569;
    font-weight: 800;
    text-align: center;
    white-space: nowrap;
}

.user-page .pos-cart-discount { color: #b45309; }
.user-page .pos-cart-compact-meta { display: none; }

@media (max-width: 1180px) {
    .promotion-form-grid { grid-template-columns: repeat(2, minmax(180px, 1fr)); }
    .user-page .pos-cart-table th:nth-child(1) { width: 36%; }
    .user-page .pos-cart-table th:nth-child(2) { width: 20%; }
    .user-page .pos-cart-table th:nth-child(3) { width: 16%; }
    .user-page .pos-cart-table th:nth-child(6) { width: 21%; }
    .user-page .pos-cart-table th:nth-child(7) { width: 6%; }
    .user-page .pos-cart-table th:nth-child(4),
    .user-page .pos-cart-table th:nth-child(5),
    .user-page .pos-cart-table td:nth-child(4),
    .user-page .pos-cart-table td:nth-child(5) { display: none; }
    .user-page .pos-cart-compact-meta {
        display: block;
        margin-top: 3px;
        color: #64748b;
        font-size: 0.68rem;
        font-weight: 700;
    }
}

@media (max-width: 760px) {
    .promotion-form-grid,
    .promotion-report-summary { grid-template-columns: 1fr; }
    .promotion-picker-results { grid-template-columns: 1fr; }
}

/* Contrast-only surface system: preserves the existing POS layout and palette. */
:root {
    --ui-contrast-border: #afc2ce;
    --ui-contrast-border-strong: #7698aa;
    --ui-contrast-surface: #ffffff;
    --ui-contrast-surface-soft: #f7fbfc;
    --ui-contrast-radius: 8px;
    --ui-contrast-shadow: 0 3px 11px rgba(15, 45, 75, 0.09);
    --ui-contrast-shadow-major: 0 7px 18px rgba(15, 45, 75, 0.12);
    --ui-contrast-shadow-hover: 0 10px 22px rgba(15, 45, 75, 0.15);
}

body:not(.auth-page) .card,
body:not(.auth-page) .panel,
body:not(.auth-page) .filters,
body:not(.auth-page) .accounts-card,
body:not(.auth-page) .metric-card,
body:not(.auth-page) .page-heading {
    border-color: var(--ui-contrast-border);
    border-radius: var(--ui-contrast-radius);
    background: linear-gradient(180deg, var(--ui-contrast-surface) 0%, var(--ui-contrast-surface-soft) 100%);
    box-shadow: var(--ui-contrast-shadow);
}

body:not(.auth-page) .card:hover,
body:not(.auth-page) .panel:hover,
body:not(.auth-page) .accounts-card:hover,
body:not(.auth-page) .metric-card:hover {
    border-color: var(--ui-contrast-border-strong);
    box-shadow: var(--ui-contrast-shadow-hover);
}

body:not(.auth-page) .metric-card,
body:not(.auth-page) .collection-outstanding-box,
body:not(.auth-page) .customer-purchase-summary span,
body:not(.auth-page) .purchase-total-row span,
body:not(.auth-page) .purchase-total-row label,
body:not(.auth-page) .supplier-payment-summary span,
body:not(.auth-page) .promotion-report-summary div {
    border-color: var(--ui-contrast-border);
    border-radius: var(--ui-contrast-radius);
    box-shadow: var(--ui-contrast-shadow);
}

/* Major POS panes use the strongest edge and depth in the shared system. */
.user-page .pos-cart-panel,
.user-page .pos-product-panel {
    border-color: var(--ui-contrast-border-strong);
    background: linear-gradient(180deg, #ffffff 0%, #f8fcfd 100%);
    box-shadow: var(--ui-contrast-shadow-major);
}

.user-page .pos-cart-table-wrap,
.user-page .pos-product-list-wrap,
.user-page .pos-search-results-panel,
.user-page .pos-calculator {
    border-color: var(--ui-contrast-border);
    border-radius: var(--ui-contrast-radius);
    background: linear-gradient(180deg, #ffffff 0%, #f8fcfd 100%);
    box-shadow: var(--ui-contrast-shadow);
}

.user-page .pos-quick-products,
.user-page .pos-total-box,
.user-page .pos-payment-grid {
    border-radius: var(--ui-contrast-radius);
    background: linear-gradient(180deg, #ffffff 0%, #f8fcfd 100%);
    box-shadow: inset 0 0 0 1px var(--ui-contrast-border), var(--ui-contrast-shadow);
}

.user-page .pos-search-results-panel:hover,
.user-page .pos-quick-products:hover,
.user-page .pos-calculator:hover {
    box-shadow: inset 0 0 0 1px var(--ui-contrast-border-strong), var(--ui-contrast-shadow-hover);
}

/* Keep the form controls bright, with clearer edges around barcode, search, and payment. */
.user-page .pos-input,
.user-page .pos-qty-input {
    border-color: #9db6c4;
    background-color: #ffffff;
    box-shadow: inset 0 1px 1px rgba(15, 45, 75, 0.03);
}

.user-page .pos-barcode-input,
.user-page #productSearch {
    border-color: #7299ac;
    background-color: #f6fcfd;
    box-shadow: 0 2px 6px rgba(15, 45, 75, 0.08);
}

.user-page .pos-input:hover,
.user-page .pos-qty-input:hover {
    border-color: var(--ui-contrast-border-strong);
}

/* Product surfaces stay light, but are easier to scan and identify as actionable. */
.user-page .quick-product-tile {
    border-color: var(--ui-contrast-border);
    border-radius: var(--ui-contrast-radius);
    background: linear-gradient(180deg, #ffffff 0%, #f8fcfd 100%);
    box-shadow: var(--ui-contrast-shadow);
    transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease, transform 0.16s ease;
}

.user-page .quick-product-tile:hover {
    border-color: var(--ui-contrast-border-strong);
    background: linear-gradient(180deg, #f6fcfd 0%, #eef8fa 100%);
    box-shadow: var(--ui-contrast-shadow-hover);
}

.user-page .pos-product-list tbody tr:hover,
.user-page .pos-cart-table tbody tr:hover {
    background: #f1f9fb;
}

.user-page .pos-calculator-grid button {
    border-color: #b5c7d2;
    background: #fbfdfe;
}

.user-page .pos-calculator-grid button:hover {
    border-color: var(--ui-contrast-border-strong);
    background: #eef7fa;
    box-shadow: 0 2px 6px rgba(15, 45, 75, 0.08);
}

.user-page .pos-calculator-display {
    background: #102132;
    border-color: #102132;
    color: #ffffff;
}

.user-page .pos-grand-total {
    box-shadow: 0 4px 10px rgba(15, 45, 75, 0.2);
}

/* Extend the same visual-only contrast system across shared admin and user workspaces. */
body:not(.auth-page) .table-scroll,
body:not(.auth-page) .table-responsive,
body:not(.auth-page) .table-container,
body:not(.auth-page) .inventory-list-card,
body:not(.auth-page) .accounts-dashboard-table-card,
body:not(.auth-page) .accounts-category-card,
body:not(.auth-page) .capital-funds-card,
body:not(.auth-page) .pl-filter-card,
body:not(.auth-page) .pl-report-card,
body:not(.auth-page) .customer-purchase-history,
body:not(.auth-page) .promotion-picker-results {
    border-radius: var(--ui-contrast-radius);
    background: linear-gradient(180deg, #ffffff 0%, #f8fcfd 100%);
    box-shadow: inset 0 0 0 1px var(--ui-contrast-border), var(--ui-contrast-shadow);
}

body:not(.auth-page) table {
    border-color: var(--ui-contrast-border);
    background: #ffffff;
    box-shadow: var(--ui-contrast-shadow);
}

body:not(.auth-page) .table-scroll > table,
body:not(.auth-page) .table-responsive > table,
body:not(.auth-page) .table-container > table {
    border-color: transparent;
    box-shadow: none;
}

.user-page .pos-cart-table,
.user-page .pos-product-list {
    box-shadow: none;
}

body:not(.auth-page) table thead th {
    border-color: #87a3b2;
}

body:not(.auth-page) table td,
body:not(.auth-page) table tfoot th,
body:not(.auth-page) table tfoot td {
    border-color: #d0dde4;
}

body:not(.auth-page) table tbody tr:nth-child(even) {
    background: #f9fcfd;
}

body:not(.auth-page) table tbody tr:hover {
    background: #f0f9fb;
}

body:not(.auth-page) input,
body:not(.auth-page) select,
body:not(.auth-page) textarea {
    border-color: #9db6c4;
    background-color: #ffffff;
    box-shadow: inset 0 1px 1px rgba(15, 45, 75, 0.03);
}

body:not(.auth-page) input:hover,
body:not(.auth-page) select:hover,
body:not(.auth-page) textarea:hover {
    border-color: var(--ui-contrast-border-strong);
}

body:not(.auth-page) input:focus,
body:not(.auth-page) select:focus,
body:not(.auth-page) textarea:focus {
    border-color: #0f7f8b;
    box-shadow: 0 0 0 3px rgba(15, 127, 139, 0.14);
}

/* Dashboard-specific rules use ID selectors, so apply the same contrast system explicitly. */
.admin-page #dashboardTab .page-heading {
    border-color: #4d8193;
    box-shadow: 0 8px 20px rgba(15, 45, 75, 0.16);
}

.admin-page :is(#dashboardTab, #adminEditionDashboardTab, #gymPanelTab:where(.gym-dashboard)) .metric-card {
    border-color: var(--ui-contrast-border-strong);
    box-shadow: var(--ui-contrast-shadow-major);
}

.admin-page :is(#dashboardTab, #adminEditionDashboardTab, #gymPanelTab:where(.gym-dashboard)) .metric-card:hover {
    border-color: #4f8397;
    box-shadow: var(--ui-contrast-shadow-hover);
}

.admin-page #dashboardTab .dashboard-sales-chart-panel,
.admin-page #dashboardTab .dashboard-grid .panel {
    border-color: var(--ui-contrast-border-strong);
    box-shadow: var(--ui-contrast-shadow-major);
}

.admin-page #dashboardTab .dashboard-grid .panel:hover,
.admin-page #dashboardTab .dashboard-sales-chart-panel:hover {
    border-color: #4f8397;
    box-shadow: var(--ui-contrast-shadow-hover);
}

.admin-page #dashboardTab .panel-title {
    border-bottom-color: #b8cad3;
}

.admin-page #dashboardTab .table-scroll {
    box-shadow: inset 0 0 0 1px var(--ui-contrast-border), var(--ui-contrast-shadow);
}

.admin-page #dashboardTab .dashboard-grid th {
    border-bottom-color: #527f95 !important;
}

.admin-page #dashDailySummary .summary-row {
    border-color: #c4d5de;
}

.company-setting-field {
    display: grid;
    gap: 5px;
    margin: 10px 0;
    color: #334155;
    font-size: 0.84rem;
    font-weight: 800;
}

.company-setting-field input {
    width: min(280px, 100%);
}

.company-whatsapp-settings {
    width: min(620px, 100%);
    margin: 16px 0;
    padding: 14px;
    border: 1px solid var(--ui-contrast-border, #afc2ce);
    border-radius: 10px;
    background: linear-gradient(180deg, #f8fcfd, #eef9f7);
}

.company-whatsapp-settings h4 {
    margin: 0 0 10px;
    color: #0f513f;
}

.company-setting-toggle {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #173d43;
    font-size: 0.86rem;
    font-weight: 850;
}

.company-setting-toggle input {
    width: 18px;
    height: 18px;
    margin: 0;
}

.company-whatsapp-number {
    display: flex;
    width: min(280px, 100%);
    overflow: hidden;
    border: 1px solid #a9bdc7;
    border-radius: 8px;
    background: #fff;
}

.company-whatsapp-prefix {
    display: flex;
    align-items: center;
    padding: 0 11px;
    border-right: 1px solid #cbd5e1;
    color: #0f513f;
    background: #e8f7f2;
    font-weight: 900;
}

.company-whatsapp-number input {
    min-width: 0;
    width: 100%;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.company-whatsapp-number.disabled {
    opacity: 0.62;
}

.company-setting-help {
    max-width: 590px;
    color: #64748b;
    font-size: 0.75rem;
    font-weight: 650;
    line-height: 1.45;
}

.pos-shortcut-reference {
    margin-top: 12px;
}

.pos-shortcut-reference h4 {
    margin: 0 0 10px;
    color: #0f172a;
}

.pos-shortcut-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 8px;
}

.pos-shortcut-list div {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 6px 8px;
    border: 1px solid var(--ui-contrast-border, #afc2ce);
    border-radius: var(--ui-contrast-radius, 8px);
    background: #f8fcfd;
    color: #475569;
    font-size: 0.8rem;
    font-weight: 700;
}

.pos-shortcut-list kbd {
    min-width: 42px;
    padding: 3px 6px;
    border: 1px solid #8fa8b7;
    border-radius: 5px;
    background: #ffffff;
    color: #0f5960;
    font-family: inherit;
    font-size: 0.74rem;
    font-weight: 900;
    text-align: center;
    white-space: nowrap;
}

/* Inventory and accounts also contain ID-scoped visual rules, so keep their surfaces aligned. */
#warehouseTab .inventory-card {
    border-color: var(--ui-contrast-border-strong);
    background: linear-gradient(180deg, #ffffff 0%, #f8fcfd 100%);
    box-shadow: var(--ui-contrast-shadow-major);
}

#warehouseTab .inventory-card:hover {
    border-color: #4f8397;
    box-shadow: var(--ui-contrast-shadow-hover);
}

#warehouseTab #warehouseList .card {
    border-color: var(--ui-contrast-border);
    background: #ffffff;
    box-shadow: var(--ui-contrast-shadow);
}

#warehouseTab #warehouseList .card:hover {
    border-color: var(--ui-contrast-border-strong);
    box-shadow: var(--ui-contrast-shadow-hover);
}

#accountsViewDashboard .accounts-dashboard-table-card {
    border-color: var(--ui-contrast-border-strong);
    box-shadow: var(--ui-contrast-shadow-major);
}

/* ================================================================
   Unified Admin Dashboard workspace
   Presentation is deliberately scoped to the dashboard so the POS and
   every other admin workspace retain their existing layout and behavior.
   ================================================================ */
.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) {
    --dashboard-ink: #0b2139;
    --dashboard-text: #243b53;
    --dashboard-muted: #647b8c;
    --dashboard-teal: #0f8588;
    --dashboard-teal-dark: #0b666c;
    --dashboard-blue: #176a94;
    --dashboard-line: #c9d9df;
    --dashboard-line-soft: #deeaee;
    --dashboard-surface: #ffffff;
    --dashboard-surface-soft: #f6fafb;
    --dashboard-shadow: 0 10px 28px rgba(11, 45, 62, 0.09);
    --dashboard-shadow-hover: 0 15px 36px rgba(11, 45, 62, 0.13);
    display: grid;
    gap: 1.35rem;
    padding-bottom: 1rem;
    color: var(--dashboard-text);
}

.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .dashboard-icon-library {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    pointer-events: none;
}

.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .dashboard-visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .dashboard-section-icon svg,
.admin-page :is(#dashboardTab, #adminEditionDashboardTab, #gymPanelTab:where(.gym-dashboard)) .dashboard-metric-icon svg,
.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .forecast-summary-icon svg,
.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .dashboard-link-btn svg,
.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .dashboard-refresh-btn svg,
.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .forecast-clear-btn svg,
.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .forecast-page-btn svg {
    display: block;
    width: 1.15rem;
    height: 1.15rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .dashboard-hero,
.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .page-heading.dashboard-hero {
    position: relative;
    isolation: isolate;
    min-height: 148px;
    margin: 0;
    padding: 1.45rem 1.55rem;
    overflow: hidden;
    border: 1px solid rgba(87, 203, 196, 0.42);
    border-radius: 16px;
    background:
        radial-gradient(circle at 88% 16%, rgba(79, 209, 197, 0.2), transparent 28%),
        radial-gradient(circle at 8% 110%, rgba(23, 106, 148, 0.38), transparent 38%),
        linear-gradient(128deg, #09283c 0%, #0b4c5b 55%, #0b3d50 100%);
    box-shadow: 0 18px 42px rgba(8, 39, 56, 0.2);
}

.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .dashboard-hero::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: -72px;
    right: 8%;
    width: 210px;
    height: 210px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    box-shadow: 0 0 0 34px rgba(255, 255, 255, 0.035), 0 0 0 68px rgba(255, 255, 255, 0.025);
}

.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .dashboard-hero-copy,
.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .dashboard-hero-actions {
    position: relative;
    z-index: 1;
}

.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .dashboard-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0.7rem;
    color: #a9eee7;
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .dashboard-live-dot,
.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .dashboard-view-status > span,
.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .dashboard-status-dot {
    display: inline-block;
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 0 4px rgba(74, 222, 128, 0.14);
}

.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .dashboard-title-lockup {
    display: flex;
    align-items: center;
    gap: 0.9rem;
}

.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .dashboard-section-icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid #cce3e7;
    border-radius: 11px;
    background: linear-gradient(145deg, #edfafa, #e6f3f7);
    color: var(--dashboard-teal-dark);
    box-shadow: 0 5px 14px rgba(15, 133, 136, 0.09);
}

.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .dashboard-section-icon-hero {
    width: 48px;
    height: 48px;
    border-color: rgba(174, 241, 235, 0.28);
    background: rgba(224, 250, 247, 0.12);
    color: #b9f5ef;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(8px);
}

.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .dashboard-section-icon-hero svg {
    width: 1.35rem;
    height: 1.35rem;
}

.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .dashboard-hero h2,
.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .page-heading.dashboard-hero h2 {
    margin: 0;
    color: #ffffff;
    font-size: clamp(1.55rem, 2.4vw, 2rem);
    font-weight: 900;
    letter-spacing: -0.035em;
    line-height: 1.1;
}

.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .dashboard-hero p,
.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .page-heading.dashboard-hero p {
    max-width: 660px;
    margin: 0.38rem 0 0;
    color: rgba(230, 246, 248, 0.84);
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.5;
}

.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .dashboard-hero-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .dashboard-view-status {
    display: inline-flex;
    align-items: center;
    gap: 0.48rem;
    padding: 0.5rem 0.68rem;
    border: 1px solid rgba(184, 239, 234, 0.2);
    border-radius: 999px;
    background: rgba(1, 20, 32, 0.18);
    color: rgba(235, 250, 251, 0.88);
    font-size: 0.72rem;
    font-weight: 800;
    white-space: nowrap;
}

.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) :is(#dashboardRefreshBtn, #gymRefresh),
.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) :is(#dashboardRefreshBtn, #gymRefresh).secondary-btn,
.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) :is(#dashboardRefreshBtn, #gymRefresh).dashboard-refresh-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 42px;
    margin: 0;
    padding: 0.62rem 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.58) !important;
    border-radius: 10px;
    background: linear-gradient(135deg, #ffffff, #dff7f5) !important;
    color: #0b5961 !important;
    box-shadow: 0 9px 22px rgba(0, 18, 30, 0.2) !important;
    font-size: 0.8rem;
    font-weight: 900;
}

.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) :is(#dashboardRefreshBtn, #gymRefresh):hover,
.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) :is(#dashboardRefreshBtn, #gymRefresh):focus-visible {
    transform: translateY(-1px);
    background: #ffffff !important;
    box-shadow: 0 12px 26px rgba(0, 18, 30, 0.26) !important;
}

.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) :is(#dashboardRefreshBtn, #gymRefresh).is-loading svg {
    animation: dashboard-refresh-spin 0.85s linear infinite;
}

@keyframes dashboard-refresh-spin {
    to { transform: rotate(360deg); }
}

.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .dashboard-section {
    display: grid;
    gap: 0.85rem;
    min-width: 0;
}

.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .dashboard-section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin: 0;
}

.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .dashboard-section-heading-compact {
    align-items: center;
}

.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .dashboard-section-kicker,
.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .inventory-forecast-kicker {
    display: block;
    margin-bottom: 0.18rem;
    color: var(--dashboard-teal-dark);
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .dashboard-section-heading h3,
.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .dashboard-panel-title h3 {
    margin: 0;
    color: var(--dashboard-ink);
    font-size: 1.08rem;
    font-weight: 900;
    letter-spacing: -0.015em;
    line-height: 1.25;
}

.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .dashboard-section-heading p,
.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .dashboard-panel-heading-main p {
    margin: 0.2rem 0 0;
    color: var(--dashboard-muted);
    font-size: 0.76rem;
    font-weight: 650;
    line-height: 1.4;
}

.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .dashboard-section-note,
.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .dashboard-period-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.38rem 0.58rem;
    border: 1px solid var(--dashboard-line-soft);
    border-radius: 999px;
    background: #f4f9fa;
    color: #526a78;
    font-size: 0.69rem;
    font-weight: 800;
    white-space: nowrap;
}

.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .dashboard-section-note .dashboard-status-dot {
    width: 6px;
    height: 6px;
    box-shadow: none;
}

.admin-page :is(#dashboardTab, #adminEditionDashboardTab, #gymPanelTab:where(.gym-dashboard)) .metric-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.85rem;
    margin: 0;
}

.admin-page :is(#dashboardTab, #adminEditionDashboardTab, #gymPanelTab:where(.gym-dashboard)) .metric-card {
    --metric-accent: var(--dashboard-teal);
    --metric-soft: #eaf8f8;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-height: 164px;
    padding: 0.95rem 1rem 0.9rem;
    overflow: hidden;
    border: 1px solid var(--dashboard-line);
    border-radius: 13px;
    background: linear-gradient(155deg, #ffffff 28%, var(--metric-soft) 150%);
    box-shadow: var(--dashboard-shadow);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.admin-page :is(#dashboardTab, #adminEditionDashboardTab, #gymPanelTab:where(.gym-dashboard)) .metric-card:hover {
    transform: translateY(-2px);
    border-color: var(--metric-accent);
    box-shadow: var(--dashboard-shadow-hover);
}

.admin-page :is(#dashboardTab, #adminEditionDashboardTab, #gymPanelTab:where(.gym-dashboard)) .metric-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    z-index: 0;
    width: auto;
    height: 3px;
    opacity: 1;
    background: var(--metric-accent);
}

.admin-page :is(#dashboardTab, #adminEditionDashboardTab, #gymPanelTab:where(.gym-dashboard)) .metric-card > * {
    position: relative;
    z-index: 1;
}

.admin-page :is(#dashboardTab, #adminEditionDashboardTab, #gymPanelTab:where(.gym-dashboard)) .metric-card-sales { --metric-accent: #0f8588; --metric-soft: #e5f7f6; }
.admin-page :is(#dashboardTab, #adminEditionDashboardTab, #gymPanelTab:where(.gym-dashboard)) .metric-card-transactions { --metric-accent: #176a94; --metric-soft: #e8f3fa; }
.admin-page :is(#dashboardTab, #adminEditionDashboardTab, #gymPanelTab:where(.gym-dashboard)) .metric-card-cash { --metric-accent: #18845b; --metric-soft: #e8f7ef; }
.admin-page :is(#dashboardTab, #adminEditionDashboardTab, #gymPanelTab:where(.gym-dashboard)) .metric-card-credit { --metric-accent: #b36a15; --metric-soft: #fff4df; }
.admin-page :is(#dashboardTab, #adminEditionDashboardTab, #gymPanelTab:where(.gym-dashboard)) .metric-card-inventory { --metric-accent: #3f6fb4; --metric-soft: #edf3fb; }
.admin-page :is(#dashboardTab, #adminEditionDashboardTab, #gymPanelTab:where(.gym-dashboard)) .metric-card-stock { --metric-accent: #d0770e; --metric-soft: #fff3df; }
.admin-page :is(#dashboardTab, #adminEditionDashboardTab, #gymPanelTab:where(.gym-dashboard)) .metric-card-purchases { --metric-accent: #0d766e; --metric-soft: #e7f7f3; }
.admin-page :is(#dashboardTab, #adminEditionDashboardTab, #gymPanelTab:where(.gym-dashboard)) .metric-card-expenses { --metric-accent: #bd4659; --metric-soft: #fcecef; }

.admin-page :is(#dashboardTab, #adminEditionDashboardTab, #gymPanelTab:where(.gym-dashboard)) .metric-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    margin-bottom: 0.72rem;
}

.admin-page :is(#dashboardTab, #adminEditionDashboardTab, #gymPanelTab:where(.gym-dashboard)) .dashboard-metric-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid #c9dde1;
    border-radius: 10px;
    background: var(--metric-soft);
    color: var(--metric-accent);
}

.admin-page :is(#dashboardTab, #adminEditionDashboardTab, #gymPanelTab:where(.gym-dashboard)) .metric-card .metric-card-period {
    padding: 0.25rem 0.43rem;
    border: 1px solid var(--dashboard-line-soft);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.78);
    color: #617888;
    font-size: 0.61rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.admin-page :is(#dashboardTab, #adminEditionDashboardTab, #gymPanelTab:where(.gym-dashboard)) .metric-card .metric-card-period-alert {
    border-color: #f3d3a6;
    color: #96590c;
    background: #fff8ec;
}

.admin-page :is(#dashboardTab, #adminEditionDashboardTab, #gymPanelTab:where(.gym-dashboard)) .metric-card .metric-card-label {
    color: #526979;
    font-size: 0.75rem;
    font-weight: 800;
    line-height: 1.3;
}

.admin-page :is(#dashboardTab, #adminEditionDashboardTab, #gymPanelTab:where(.gym-dashboard)) .metric-card strong {
    display: block;
    margin: 0.16rem 0 0.18rem;
    color: var(--dashboard-ink);
    font-size: clamp(1.26rem, 1.8vw, 1.58rem);
    font-weight: 900;
    letter-spacing: -0.035em;
    line-height: 1.2;
}

.admin-page :is(#dashboardTab, #adminEditionDashboardTab, #gymPanelTab:where(.gym-dashboard)) .metric-card .metric-card-support {
    margin-top: auto;
    color: #718493;
    font-size: 0.66rem;
    font-weight: 700;
    line-height: 1.3;
}

.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .dashboard-sales-chart-panel,
.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .dashboard-data-panel,
.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .inventory-forecast-panel {
    margin: 0;
    border: 1px solid var(--dashboard-line);
    border-radius: 14px;
    background: var(--dashboard-surface);
    box-shadow: var(--dashboard-shadow);
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .dashboard-sales-chart-panel:hover,
.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .dashboard-data-panel:hover,
.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .inventory-forecast-panel:hover {
    transform: none;
    border-color: #9bbbc4;
    box-shadow: var(--dashboard-shadow-hover);
}

.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .dashboard-sales-chart-panel {
    width: 100%;
    padding: 1.05rem 1.15rem 0.85rem;
    background:
        radial-gradient(circle at 0% 0%, rgba(15, 133, 136, 0.08), transparent 34%),
        linear-gradient(180deg, #ffffff, #f9fcfd);
}

.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .dashboard-panel-title,
.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .panel-title.dashboard-panel-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.9rem;
    min-height: 52px;
    margin: 0 0 0.75rem;
    padding: 0 0 0.75rem;
    border-bottom: 1px solid var(--dashboard-line-soft);
}

.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .dashboard-panel-heading-main {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 0.68rem;
}

.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .dashboard-panel-heading-meta {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .dashboard-chart-total {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0.35rem 0.58rem;
    border: 1px solid #b7dbdc;
    border-radius: 8px;
    background: #eaf8f7;
    color: #0b666c;
    font-size: 0.82rem;
    font-weight: 900;
    white-space: nowrap;
}

.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .dashboard-sales-chart {
    min-height: 248px;
    padding-top: 0.2rem;
}

.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .dashboard-sales-chart svg {
    height: 260px;
}

.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .dashboard-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.95rem;
}

.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .dashboard-data-panel {
    min-height: 306px;
    padding: 1rem;
    overflow: hidden;
}

.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .dashboard-section-icon-warning {
    border-color: #f1d2a9;
    background: #fff6e8;
    color: #b4690d;
}

.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .dashboard-link-btn,
.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .panel-title .dashboard-link-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    flex: 0 0 auto;
    min-height: 32px;
    margin: 0;
    padding: 0.35rem 0.5rem;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--dashboard-teal-dark);
    box-shadow: none;
    font-size: 0.72rem;
    font-weight: 900;
}

.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .dashboard-link-btn svg {
    width: 0.9rem;
    height: 0.9rem;
    transition: transform 0.18s ease;
}

.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .dashboard-link-btn:hover,
.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .dashboard-link-btn:focus-visible {
    transform: none;
    background: #eaf7f7;
    color: #07585f;
    box-shadow: none;
}

.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .dashboard-link-btn:hover svg {
    transform: translateX(2px);
}

.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .dashboard-data-panel .table-scroll {
    max-height: 222px;
    overflow: auto;
    border: 1px solid var(--dashboard-line-soft);
    border-radius: 9px;
    box-shadow: none;
}

.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .dashboard-compact-table {
    margin: 0;
    border: 0;
    border-radius: 0;
    background: #ffffff;
    box-shadow: none;
}

.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .dashboard-compact-table th,
.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .dashboard-grid th {
    padding: 0.62rem 0.7rem;
    border-bottom: 1px solid #2e6475 !important;
    background: linear-gradient(105deg, #173f54, #245e70) !important;
    color: #edf9fa !important;
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.035em;
    text-transform: uppercase;
}

.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .dashboard-compact-table td {
    padding: 0.65rem 0.7rem;
    border-bottom: 1px solid #e4edef;
    color: #314a5b;
    font-size: 0.76rem;
    font-weight: 650;
    vertical-align: middle;
}

.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .dashboard-compact-table tbody tr:nth-child(even) {
    background: #f7fbfc;
}

.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .dashboard-compact-table tbody tr:hover {
    background: #edf8f8;
}

.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .dashboard-compact-table th:nth-last-child(-n + 2),
.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .dashboard-compact-table td:nth-last-child(-n + 2) {
    text-align: right;
}

.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .dashboard-products-panel .dashboard-compact-table th:nth-child(2),
.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .dashboard-products-panel .dashboard-compact-table td:nth-child(2),
.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .dashboard-alerts-panel .dashboard-compact-table th:last-child,
.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .dashboard-alerts-panel .dashboard-compact-table td:last-child {
    text-align: right;
}

.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .dashboard-receipt-code,
.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .dashboard-rank-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 0.2rem 0.42rem;
    border: 1px solid #c6dfe3;
    border-radius: 6px;
    background: #eef8f8;
    color: #0b666c;
    font-size: 0.68rem;
    font-weight: 900;
}

.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .dashboard-ranked-product {
    display: flex;
    align-items: center;
    gap: 0.48rem;
}

.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .dashboard-rank-badge {
    width: 24px;
    min-width: 24px;
    padding: 0;
    border-radius: 50%;
}

.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .dashboard-customer-name {
    color: #617687;
}

.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .dashboard-summary-list {
    gap: 0;
    max-height: 222px;
    overflow: auto;
    border: 1px solid var(--dashboard-line-soft);
    border-radius: 9px;
    background: #ffffff;
}

.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .dashboard-summary-list .summary-row {
    min-height: 43px;
    padding: 0.58rem 0.7rem;
    border-color: #e4edef;
    background: #ffffff;
}

.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .dashboard-summary-list .summary-row:nth-child(even) {
    background: #f7fbfc;
}

.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .dashboard-summary-day {
    display: flex;
    align-items: center;
    gap: 0.48rem;
    color: #40586a;
    font-size: 0.75rem;
    font-weight: 750;
}

.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .dashboard-summary-day::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--dashboard-teal);
    box-shadow: 0 0 0 3px #e3f5f4;
}

.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .dashboard-summary-list .summary-row strong {
    color: #0b666c;
    font-size: 0.78rem;
    font-weight: 900;
}

.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .dashboard-summary-count {
    color: #7b8e9b;
    font-size: 0.67rem;
    font-weight: 750;
}

.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .inventory-forecast-panel,
.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .dashboard-intelligence-section {
    position: relative;
    padding: 1.15rem;
    overflow: hidden;
    background:
        radial-gradient(circle at 100% 0%, rgba(23, 106, 148, 0.08), transparent 30%),
        linear-gradient(180deg, #ffffff, #f8fbfc);
}

.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .dashboard-intelligence-section::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: linear-gradient(90deg, #0f8588, #176a94 58%, #5a67b5);
}

.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .inventory-forecast-heading {
    align-items: center;
    margin: 0 0 0.95rem;
    padding: 0.18rem 0 0.9rem;
    border-bottom: 1px solid var(--dashboard-line-soft);
}

.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .dashboard-section-icon-intelligence {
    width: 44px;
    height: 44px;
    border-color: #bcdcdf;
    background: linear-gradient(145deg, #e6f8f7, #e8f1fa);
    color: #126d78;
}

.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .inventory-forecast-heading h3 {
    margin: 0;
    color: var(--dashboard-ink);
    font-size: 1.18rem;
    font-weight: 900;
    letter-spacing: -0.02em;
}

.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .inventory-forecast-heading p {
    max-width: 720px;
    margin: 0.22rem 0 0;
    color: var(--dashboard-muted);
    font-size: 0.78rem;
    font-weight: 650;
    line-height: 1.45;
}

.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .inventory-forecast-updated {
    display: inline-flex;
    align-items: center;
    gap: 0.48rem;
    flex: 0 0 auto;
    padding: 0.4rem 0.58rem;
    border: 1px solid #cfe1e5;
    border-radius: 999px;
    background: #f3f9fa;
    color: #587080;
    font-size: 0.68rem;
    font-weight: 800;
    white-space: nowrap;
}

.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .inventory-forecast-updated::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #22a06b;
    box-shadow: 0 0 0 3px rgba(34, 160, 107, 0.12);
}

.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .inventory-forecast-updated.is-loading::before {
    background: #d29021;
    box-shadow: 0 0 0 3px rgba(210, 144, 33, 0.13);
    animation: dashboard-status-pulse 1.2s ease-in-out infinite;
}

.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .inventory-forecast-updated.is-error::before {
    background: #c94d5f;
    box-shadow: 0 0 0 3px rgba(201, 77, 95, 0.12);
}

@keyframes dashboard-status-pulse {
    50% { opacity: 0.42; transform: scale(0.82); }
}

.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .inventory-forecast-summary {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 0 0 0.9rem;
}

.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .forecast-summary-card {
    --forecast-accent: #0f8588;
    --forecast-soft: #eef8f8;
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 0.22rem 0.75rem;
    min-height: 112px;
    margin: 0;
    padding: 0.82rem 0.9rem;
    overflow: hidden;
    border: 1px solid var(--dashboard-line);
    border-radius: 12px;
    background: linear-gradient(145deg, #ffffff 15%, var(--forecast-soft) 125%);
    color: var(--dashboard-text);
    box-shadow: 0 7px 18px rgba(11, 45, 62, 0.07);
    text-align: left;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .forecast-summary-card::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--forecast-accent);
}

.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .forecast-summary-card:hover,
.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .forecast-summary-card:focus-visible,
.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .forecast-summary-card.is-active {
    transform: translateY(-2px);
    border-color: var(--forecast-accent);
    box-shadow: 0 12px 25px rgba(11, 45, 62, 0.12);
}

.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .forecast-summary-card.is-active {
    box-shadow: 0 0 0 2px rgba(15, 133, 136, 0.16), 0 12px 25px rgba(11, 45, 62, 0.12);
}

.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .forecast-summary-card.critical { --forecast-accent: #bd4659; --forecast-soft: #fcecef; }
.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .forecast-summary-card.high { --forecast-accent: #d0770e; --forecast-soft: #fff3df; }
.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .forecast-summary-card.slow { --forecast-accent: #66788a; --forecast-soft: #f0f4f6; }
.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .forecast-summary-card.overstock { --forecast-accent: #3f6fb4; --forecast-soft: #edf3fb; }

.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .forecast-summary-card-top {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .forecast-summary-card .forecast-summary-card-top > span:last-child {
    color: #3c5566;
    font-size: 0.72rem;
    font-weight: 900;
    line-height: 1.25;
}

.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .forecast-summary-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--forecast-soft);
    color: var(--forecast-accent);
}

.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .forecast-summary-icon svg {
    width: 0.95rem;
    height: 0.95rem;
}

.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .forecast-summary-card strong {
    grid-column: 2;
    grid-row: 1;
    color: var(--dashboard-ink);
    font-size: 1.7rem;
    font-weight: 900;
    letter-spacing: -0.04em;
}

.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .forecast-summary-card small {
    grid-column: 1 / -1;
    color: #708594;
    font-size: 0.64rem;
    font-weight: 700;
    line-height: 1.3;
}

.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .inventory-forecast-filter-shell {
    margin-bottom: 0.95rem;
    overflow: hidden;
    border: 1px solid var(--dashboard-line);
    border-radius: 12px;
    background: #f6fafb;
}

.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .inventory-forecast-filter-heading,
.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .inventory-forecast-results-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .inventory-forecast-filter-heading {
    padding: 0.72rem 0.8rem;
    border-bottom: 1px solid var(--dashboard-line-soft);
    background: #eef6f7;
}

.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .inventory-forecast-filter-heading > div,
.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .inventory-forecast-results-heading > div {
    display: flex;
    align-items: center;
    gap: 0.58rem;
}

.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .dashboard-section-icon-small {
    width: 32px;
    height: 32px;
    border-radius: 9px;
}

.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .dashboard-section-icon-small svg {
    width: 0.95rem;
    height: 0.95rem;
}

.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .inventory-forecast-filter-heading h4,
.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .inventory-forecast-results-heading h4 {
    margin: 0;
    color: var(--dashboard-ink);
    font-size: 0.82rem;
    font-weight: 900;
}

.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .inventory-forecast-filter-heading p,
.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .inventory-forecast-results-heading p {
    margin: 0.12rem 0 0;
    color: var(--dashboard-muted);
    font-size: 0.67rem;
    font-weight: 650;
}

.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .inventory-forecast-filter-heading > span,
.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .inventory-table-scroll-note {
    color: #718694;
    font-size: 0.65rem;
    font-weight: 750;
    white-space: nowrap;
}

.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .inventory-forecast-filters {
    display: grid;
    grid-template-columns: repeat(5, minmax(130px, 1fr)) auto;
    align-items: end;
    gap: 0.65rem;
    margin: 0;
    padding: 0.78rem;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .inventory-forecast-filters label {
    display: grid;
    gap: 0.3rem;
    min-width: 0;
    color: #496171;
    font-size: 0.67rem;
    font-weight: 900;
}

.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .inventory-forecast-filters select {
    width: 100%;
    min-width: 0;
    min-height: 40px;
    margin: 0;
    padding: 0.5rem 2rem 0.5rem 0.62rem;
    border: 1px solid #afc7cf;
    border-radius: 8px;
    background-color: #ffffff;
    color: #203b4d;
    box-shadow: 0 2px 6px rgba(11, 45, 62, 0.04);
    font-size: 0.74rem;
    font-weight: 700;
}

.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .inventory-forecast-filters select:focus {
    border-color: var(--dashboard-teal);
    box-shadow: 0 0 0 3px rgba(15, 133, 136, 0.12);
}

.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .forecast-clear-btn,
.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .forecast-page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin: 0;
    border: 1px solid #abc3cc;
    border-radius: 8px;
    background: #ffffff;
    color: #325466;
    box-shadow: none;
    font-size: 0.72rem;
    font-weight: 850;
}

.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .forecast-clear-btn {
    min-height: 40px;
    padding: 0.5rem 0.68rem;
    white-space: nowrap;
}

.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .forecast-clear-btn svg,
.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .forecast-page-btn svg {
    width: 0.9rem;
    height: 0.9rem;
}

.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .forecast-clear-btn:hover,
.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .forecast-clear-btn:focus-visible,
.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .forecast-page-btn:hover,
.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .forecast-page-btn:focus-visible {
    transform: none;
    border-color: var(--dashboard-teal);
    background: #edf8f8;
    color: #0b666c;
    box-shadow: none;
}

.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .inventory-forecast-results-heading {
    min-height: 52px;
    padding: 0.18rem 0 0.62rem;
}

.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .inventory-forecast-state {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.58rem;
    min-height: 112px;
    padding: 1.2rem;
    border: 1px dashed #abc4cd;
    border-radius: 10px;
    background: #f7fbfc;
    color: #607786;
    font-size: 0.78rem;
    font-weight: 750;
}

.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .inventory-forecast-state.is-loading::before {
    content: "";
    width: 18px;
    height: 18px;
    border: 2px solid #cce3e5;
    border-top-color: var(--dashboard-teal);
    border-radius: 50%;
    animation: dashboard-refresh-spin 0.8s linear infinite;
}

.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .inventory-forecast-state.error {
    border-color: #edbdc5;
    background: #fff5f6;
    color: #a4384a;
}

.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .inventory-forecast-table-wrap {
    max-height: 620px;
    overflow: auto;
    border: 1px solid #afc7cf;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
    scrollbar-color: #9ab8c2 #edf4f6;
    scrollbar-width: thin;
}

.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .inventory-forecast-table {
    min-width: 1240px;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: #ffffff;
    box-shadow: none;
}

.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .inventory-forecast-table th {
    top: 0;
    z-index: 3;
    padding: 0.72rem 0.68rem;
    border-bottom: 1px solid #2e6475;
    background: linear-gradient(105deg, #173f54, #245e70);
    color: #edf9fa;
    font-size: 0.66rem;
    font-weight: 900;
    letter-spacing: 0.035em;
    text-transform: uppercase;
    white-space: nowrap;
}

.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .inventory-forecast-table td {
    padding: 0.78rem 0.68rem;
    border-bottom: 1px solid #e1ebee;
    color: #314a5b;
    font-size: 0.74rem;
    font-weight: 650;
    line-height: 1.4;
    vertical-align: middle;
}

.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .inventory-forecast-table tbody tr:nth-child(even) {
    background: #f7fbfc;
}

.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .inventory-forecast-table tbody tr:hover {
    background: #edf8f8;
}

.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .inventory-forecast-table th:nth-child(2),
.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .inventory-forecast-table th:nth-child(3),
.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .inventory-forecast-table th:nth-child(4),
.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .inventory-forecast-table th:nth-child(7),
.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .inventory-forecast-table td:nth-child(2),
.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .inventory-forecast-table td:nth-child(3),
.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .inventory-forecast-table td:nth-child(4),
.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .inventory-forecast-table td:nth-child(7) {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .inventory-forecast-table th:first-child {
    min-width: 218px;
}

.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .inventory-forecast-table th:nth-child(8) {
    min-width: 235px;
}

.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .forecast-row.risk-critical td:first-child { box-shadow: inset 3px 0 #bd4659; }
.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .forecast-row.risk-high td:first-child { box-shadow: inset 3px 0 #d0770e; }
.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .forecast-row.risk-medium td:first-child { box-shadow: inset 3px 0 #d3a028; }
.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .forecast-row.risk-low td:first-child { box-shadow: inset 3px 0 #27946a; }

.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .forecast-product-cell strong,
.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .forecast-action-cell strong {
    color: #17384b;
    font-size: 0.76rem;
    font-weight: 900;
}

.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .forecast-product-cell span,
.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .forecast-action-cell > span {
    color: #748795;
    font-size: 0.66rem;
    font-weight: 650;
}

.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .forecast-reorder-quantity {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 54px;
    padding: 0.24rem 0.4rem;
    border: 1px solid #c5dfe1;
    border-radius: 7px;
    background: #edf8f8;
    color: #0b666c;
    font-weight: 900;
}

.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .forecast-risk,
.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .forecast-confidence,
.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .forecast-trend {
    gap: 0.34rem;
    min-height: 25px;
    padding: 0.25rem 0.46rem;
    border: 1px solid transparent;
    font-size: 0.65rem;
    font-weight: 900;
}

.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .forecast-risk::before,
.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .forecast-confidence::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.82;
}

.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .forecast-risk.critical { border-color: #efbdc5; background: #fff0f2; color: #ad3448; }
.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .forecast-risk.high { border-color: #f0cf9e; background: #fff5e5; color: #a55d0c; }
.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .forecast-risk.medium { border-color: #eadb9d; background: #fff9df; color: #806514; }
.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .forecast-risk.low { border-color: #bee3d0; background: #edf9f3; color: #17734d; }
.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .forecast-confidence.high { border-color: #bee3d0; background: #edf9f3; color: #17734d; }
.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .forecast-confidence.medium { border-color: #bddce8; background: #eef8fb; color: #17627d; }
.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .forecast-confidence.low { border-color: #d2dde2; background: #f3f7f8; color: #5f7180; }
.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .forecast-trend.rising { border-color: #bee3d0; background: #edf9f3; color: #17734d; }
.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .forecast-trend.falling { border-color: #efbdc5; background: #fff0f2; color: #ad3448; }
.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .forecast-trend.stable { border-color: #d2dde2; background: #f3f7f8; color: #5f7180; }

.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .forecast-explanation {
    margin-top: 0.38rem;
    color: var(--dashboard-teal-dark);
}

.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .forecast-explanation summary {
    width: max-content;
    cursor: pointer;
    color: var(--dashboard-teal-dark);
    font-size: 0.67rem;
    font-weight: 900;
}

.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .forecast-explanation summary::marker {
    color: var(--dashboard-teal);
}

.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .forecast-explanation[open] {
    padding: 0.38rem 0.46rem;
    border: 1px solid #c9dfe3;
    border-radius: 7px;
    background: #f3f9fa;
}

.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .forecast-explanation p {
    min-width: 260px;
    max-width: 410px;
    color: #526979;
    font-size: 0.68rem;
}

.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .inventory-forecast-pager {
    min-height: 48px;
    padding: 0.72rem 0.08rem 0;
    border-top: 0;
    color: #607786;
    font-size: 0.71rem;
    font-weight: 800;
}

.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .inventory-forecast-pager > div {
    gap: 0.5rem;
}

.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .forecast-page-btn {
    min-height: 34px;
    padding: 0.38rem 0.58rem;
}

.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .forecast-page-btn-prev svg {
    transform: rotate(180deg);
}

.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .forecast-page-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .empty-state {
    padding: 1.3rem 0.8rem;
    color: #718694;
    font-size: 0.75rem;
    font-weight: 700;
}

@media (max-width: 1200px) {
    .admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .inventory-forecast-filters {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .forecast-clear-btn {
        width: 100%;
    }
}

@media (max-width: 1050px) {
    .admin-page :is(#dashboardTab, #adminEditionDashboardTab, #gymPanelTab:where(.gym-dashboard)) .metric-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .dashboard-grid,
    .admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .inventory-forecast-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .dashboard-grid {
        grid-template-columns: 1fr;
    }

    .admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .dashboard-data-panel {
        min-height: 0;
    }
}

@media (max-width: 760px) {
    .admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) {
        gap: 1.1rem;
    }

    .admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .dashboard-hero,
    .admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .page-heading.dashboard-hero,
    .admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .dashboard-section-heading,
    .admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .inventory-forecast-heading,
    .admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .dashboard-panel-title,
    .admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .inventory-forecast-filter-heading,
    .admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .inventory-forecast-results-heading,
    .admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .inventory-forecast-pager {
        align-items: stretch;
        flex-direction: column;
    }

    .admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .dashboard-hero {
        min-height: 0;
        padding: 1.2rem;
    }

    .admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .dashboard-hero-actions {
        justify-content: space-between;
        width: 100%;
    }

    .admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .inventory-forecast-filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .dashboard-panel-heading-meta {
        justify-content: space-between;
    }

    .admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .dashboard-sales-chart,
    .admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .dashboard-sales-chart svg {
        min-height: 218px;
        height: 218px;
    }

    .admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .inventory-forecast-pager > div {
        justify-content: space-between;
        width: 100%;
    }

    .admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .inventory-table-scroll-note {
        white-space: normal;
    }
}

@media (max-width: 540px) {
    .admin-page :is(#dashboardTab, #adminEditionDashboardTab, #gymPanelTab:where(.gym-dashboard)) .metric-grid,
    .admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .inventory-forecast-summary,
    .admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .inventory-forecast-filters {
        grid-template-columns: 1fr;
    }

    .admin-page :is(#dashboardTab, #adminEditionDashboardTab, #gymPanelTab:where(.gym-dashboard)) .metric-card {
        min-height: 148px;
    }

    .admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .dashboard-title-lockup {
        align-items: flex-start;
    }

    .admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .dashboard-title-lockup .dashboard-section-icon-hero {
        width: 42px;
        height: 42px;
    }

    .admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .dashboard-view-status {
        display: none;
    }

    .admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) :is(#dashboardRefreshBtn, #gymRefresh) {
        width: 100%;
    }

    .admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .dashboard-panel-heading-main {
        align-items: flex-start;
    }

    .admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .dashboard-link-btn {
        align-self: flex-start;
    }

    .admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .inventory-forecast-panel {
        padding: 0.95rem;
    }

    .admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .inventory-forecast-pager > div {
        flex-wrap: wrap;
    }
}

@media (prefers-reduced-motion: reduce) {
    .admin-page :is(#dashboardTab, #adminEditionDashboardTab, #gymPanelTab:where(.gym-dashboard)) .metric-card,
    .admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .forecast-summary-card,
    .admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .dashboard-link-btn svg,
    .admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) :is(#dashboardRefreshBtn, #gymRefresh) {
        transition: none;
    }

    .admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) :is(#dashboardRefreshBtn, #gymRefresh).is-loading svg,
    .admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .inventory-forecast-updated.is-loading::before,
    .admin-page :is(#dashboardTab, #gymPanelTab:where(.gym-dashboard)) .inventory-forecast-state.is-loading::before {
        animation: none;
    }
}

/* Phase 2 business-edition shells. These selectors are intentionally scoped
   to registry-rendered presentation and do not alter operational workspaces. */
[data-profile-placeholder-nav] {
    display: grid;
    gap: 0.25rem;
}

[data-profile-placeholder-nav].hidden {
    display: none;
}

.profile-placeholder-nav {
    opacity: 0.82;
}

.profile-placeholder-badge {
    margin-left: auto;
    padding: 0.12rem 0.42rem;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.admin-page #adminEditionDashboardTab .dashboard-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
    padding: 1.25rem;
    border: 1px solid rgba(15, 143, 143, 0.18);
    border-radius: 18px;
    background: linear-gradient(135deg, #ffffff 0%, #edfafa 100%);
}

.admin-page #adminEditionDashboardTab .dashboard-title-lockup {
    display: flex;
    align-items: center;
    gap: 0.9rem;
}

.admin-page #adminEditionDashboardTab .dashboard-section-icon {
    display: inline-grid;
    width: 46px;
    height: 46px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 13px;
    background: #e5f7f7;
    color: #0f7f7f;
}

.admin-page #adminEditionDashboardTab .dashboard-section-icon svg {
    width: 22px;
    height: 22px;
}

.admin-page #adminEditionDashboardTab .dashboard-eyebrow {
    display: block;
    margin-bottom: 0.45rem;
    color: #0f7f7f;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.admin-page #adminEditionDashboardTab .dashboard-view-status {
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    white-space: nowrap;
    color: #0f766e;
    font-size: 0.78rem;
    font-weight: 800;
}

.admin-page #adminEditionDashboardTab .dashboard-view-status > span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.13);
}

.admin-page #adminEditionDashboardTab .dashboard-section,
#userEditionHomeTab .card {
    margin-bottom: 1rem;
}

.profile-placeholder-card {
    min-height: 130px;
    padding: 1rem;
    border: 1px solid #dce7e7;
    border-radius: 14px;
    background: #ffffff;
    color: #172b2b;
    box-shadow: 0 8px 24px rgba(15, 44, 44, 0.06);
    text-align: left;
}

.profile-placeholder-card:hover {
    border-color: #9bd2d2;
    background: #f6fdfd;
    color: #172b2b;
    transform: translateY(-1px);
}

.profile-placeholder-card > span {
    display: block;
    margin-bottom: 0.45rem;
    color: #0f8f8f;
    font-size: 1.25rem;
}

.profile-placeholder-card strong,
.profile-placeholder-card small {
    display: block;
}

.profile-placeholder-card strong {
    margin-bottom: 0.35rem;
    font-size: 0.98rem;
}

.profile-placeholder-card small {
    color: #64748b;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.45;
}

.profile-shared-tools-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 0.75rem;
    margin: 0.75rem 0 1rem;
}

.profile-shared-card {
    min-height: 96px;
    border-color: #b9dddd;
    background: linear-gradient(145deg, #ffffff, #f4fbfb);
}

.profile-shared-card > span {
    margin-bottom: 0.25rem;
}

.profile-upcoming-heading {
    margin-top: 1.25rem;
}

#userEditionHomeTab [data-profile-placeholder-cards="user"] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 0.75rem;
    margin-top: 1rem;
}

@media (max-width: 700px) {
    .admin-page #adminEditionDashboardTab .dashboard-hero {
        align-items: flex-start;
        flex-direction: column;
    }

    .admin-page #adminEditionDashboardTab .dashboard-view-status {
        align-self: flex-start;
    }
}

/* Edition-specific user workspaces. Every selector is profile-scoped so the
   established Retail POS layout and interaction styling remain unchanged. */
body.user-page[data-business-profile="van_sales"] .container,
body.user-page[data-business-profile="flex_printing"] .container {
    width: min(100%, 1680px);
    max-width: none;
    padding: 1.15rem clamp(0.8rem, 2vw, 1.75rem) 2rem;
}

body.user-page[data-business-profile="van_sales"] #salesEntry {
    height: auto;
    min-height: 0;
    overflow: visible;
}

/* Van tabs use natural page height; only their wide tables scroll sideways. */
body.user-page[data-business-profile="van_sales"] .container {
    height: auto;
    min-height: 0;
    overflow: visible;
}

body.user-page[data-business-profile="van_sales"] .van-sales-card,
body.user-page[data-business-profile="van_sales"] .van-checkout-card,
body.user-page[data-business-profile="van_sales"] .van-field {
    min-width: 0;
}

body.user-page[data-business-profile="van_sales"] .van-data-table-scroll {
    min-width: 0;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
}

body.user-page[data-business-profile="van_sales"] .container .van-data-table-scroll > table {
    display: table;
    width: 100%;
    max-width: none;
}

@media (max-width: 760px) {
    body.user-page[data-business-profile="van_sales"] #stockTabUser .inventory-filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.user-page[data-business-profile="van_sales"] #stockTabUser .inventory-filters label {
        grid-column: 1 / -1;
        max-width: none;
        min-width: 0;
    }
}

[data-van-sales-workspace] .van-sales-shell {
    display: block;
    height: auto;
    min-height: auto;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
}

.van-workspace-heading,
.flex-page-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    margin-bottom: 1rem;
    padding: 1.25rem 1.4rem;
    border: 1px solid rgba(99, 102, 241, 0.16);
    border-radius: 18px;
    background: linear-gradient(135deg, #ffffff 0%, #f2f4ff 100%);
    box-shadow: 0 10px 32px rgba(31, 41, 55, 0.07);
}

.van-workspace-heading h2,
.flex-page-heading h2 {
    margin: 0.12rem 0 0.15rem;
    color: var(--gray-900);
    font-size: clamp(1.35rem, 2vw, 1.8rem);
    line-height: 1.2;
}

.van-workspace-heading p,
.flex-page-heading p,
.van-card-heading p,
.van-checkout-heading p,
.flex-section-heading p,
.flex-summary-heading p {
    margin: 0;
    color: var(--gray-500);
    font-size: 0.82rem;
    line-height: 1.45;
}

.van-workspace-eyebrow,
.flex-eyebrow {
    color: var(--primary-dark);
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.van-workspace-meta,
.flex-document-state {
    display: flex;
    align-items: flex-end;
    flex-direction: column;
    gap: 0.45rem;
    color: var(--gray-500);
    font-size: 0.74rem;
    white-space: nowrap;
}

.van-document-chip,
.flex-document-state strong {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.42rem 0.7rem;
    border: 1px solid #cdd3ff;
    border-radius: 999px;
    background: #eef0ff;
    color: var(--primary-dark);
    font-size: 0.78rem;
    font-weight: 800;
}

.van-sales-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 355px);
    align-items: start;
    gap: 1rem;
}

.van-sales-main {
    display: grid;
    min-width: 0;
    gap: 1rem;
}

.van-sales-card,
.van-checkout-card,
.flex-editor-card,
.flex-summary-card,
.flex-list-card {
    border: 1px solid var(--gray-200);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 8px 28px rgba(31, 41, 55, 0.065);
}

.van-sales-card,
.flex-editor-card,
.flex-list-card {
    padding: 1rem;
}

.van-card-heading,
.van-card-heading > div,
.van-checkout-heading,
.flex-section-heading,
.flex-section-heading > div,
.flex-summary-heading {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.van-card-heading,
.flex-section-heading {
    justify-content: space-between;
    margin-bottom: 0.9rem;
}

.van-card-heading h3,
.van-checkout-heading h3,
.flex-section-heading h3,
.flex-summary-heading h3 {
    margin: 0;
    color: var(--gray-900);
    font-size: 0.97rem;
}

.van-step,
.flex-section-icon {
    display: inline-grid;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    place-items: center;
    border-radius: 10px;
    background: #eef0ff;
    color: var(--primary-dark);
    font-size: 0.7rem;
    font-weight: 900;
}

.van-customer-grid,
.flex-customer-row {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(190px, 0.45fr);
    align-items: end;
    gap: 0.75rem;
}

.van-field,
.flex-field {
    display: grid;
    gap: 0.33rem;
    margin: 0;
}

.van-field > span,
.flex-field > span {
    color: var(--gray-600);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.035em;
    text-transform: uppercase;
}

.van-field input,
.van-field select,
.van-field textarea,
.flex-field input,
.flex-field select,
.flex-field textarea,
.flex-job-table input,
.flex-job-table select,
.flex-queue-toolbar input,
.flex-queue-toolbar select {
    width: 100%;
    min-height: 40px;
    margin: 0;
    padding: 0.58rem 0.68rem;
    border: 1px solid var(--gray-300);
    border-radius: 9px;
    background: #fff;
    color: var(--gray-800);
    font: inherit;
    font-size: 0.83rem;
}

.van-field textarea,
.flex-field textarea {
    min-height: 64px;
    resize: vertical;
}

.van-field input:focus,
.van-field select:focus,
.van-field textarea:focus,
.flex-field input:focus,
.flex-field select:focus,
.flex-field textarea:focus,
.flex-job-table input:focus,
.flex-job-table select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.11);
}

.van-account-summary,
.flex-customer-balance {
    display: flex;
    min-height: 67px;
    justify-content: center;
    flex-direction: column;
    padding: 0.7rem 0.85rem;
    border: 1px solid #dbe2f0;
    border-radius: 11px;
    background: #f8faff;
}

.van-account-summary span,
.flex-customer-balance span {
    color: var(--gray-500);
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
}

.van-account-summary strong,
.flex-customer-balance strong {
    color: #0f766e;
    font-size: 1rem;
}

.van-account-summary strong.has-balance,
.flex-customer-balance strong.has-balance {
    color: #b45309;
}

.van-account-summary small {
    color: var(--gray-500);
    font-size: 0.7rem;
}

.van-product-entry {
    display: grid;
    grid-template-columns: minmax(230px, 1fr) 110px auto;
    align-items: end;
    gap: 0.65rem;
}

.van-add-item-btn,
.van-complete-btn,
.van-print-btn,
.flex-create-job-btn,
.flex-add-line-btn {
    border: 0;
    border-radius: 9px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: #fff;
    font-weight: 800;
    box-shadow: 0 5px 14px rgba(79, 70, 229, 0.22);
}

.van-add-item-btn {
    min-height: 40px;
    padding: 0.55rem 1rem;
}

.van-barcode-row {
    display: grid;
    grid-template-columns: auto minmax(180px, 360px);
    align-items: center;
    gap: 0.65rem;
    margin-top: 0.65rem;
    color: var(--gray-500);
    font-size: 0.72rem;
    font-weight: 700;
}

.van-barcode-row input {
    min-height: 34px;
    margin: 0;
    padding: 0.45rem 0.6rem;
    border: 1px dashed var(--gray-300);
    border-radius: 8px;
    background: var(--gray-50);
}

.van-product-results,
.van-order-table-wrap,
.flex-job-table-wrap,
.flex-responsive-table {
    overflow: auto;
    border: 1px solid var(--gray-200);
    border-radius: 11px;
}

.van-product-results {
    max-height: 230px;
    margin-top: 0.75rem;
}

.van-product-results table,
.van-order-table,
.flex-job-table,
.flex-queue-table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
}

.van-product-results th,
.van-product-results td,
.van-order-table th,
.van-order-table td,
.flex-job-table th,
.flex-job-table td,
.flex-queue-table th,
.flex-queue-table td {
    padding: 0.62rem 0.7rem;
    border-bottom: 1px solid #edf0f5;
    text-align: left;
    vertical-align: middle;
    font-size: 0.78rem;
}

.van-product-results th,
.van-order-table th,
.flex-job-table th,
.flex-queue-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    font-size: 0.67rem;
    font-weight: 900;
    letter-spacing: 0.035em;
    text-transform: uppercase;
}

.van-product-results tbody tr {
    cursor: pointer;
}

.van-product-results tbody tr:hover,
.flex-queue-table tbody tr:hover {
    background: #f8f9ff;
}

.van-product-results th:nth-child(n+2),
.van-product-results td:nth-child(n+2),
.van-order-table th:nth-child(n+2):not(:last-child),
.van-order-table td:nth-child(n+2):not(:last-child),
.flex-job-table th:nth-child(n+5),
.flex-job-table td:nth-child(n+5),
.flex-queue-table th:nth-child(5),
.flex-queue-table td:nth-child(5) {
    text-align: right;
}

.van-stock-badge {
    display: inline-flex;
    min-width: 56px;
    justify-content: center;
    padding: 0.18rem 0.45rem;
    border-radius: 999px;
    background: #dcfce7;
    color: #166534;
    font-size: 0.7rem;
    font-weight: 900;
}

.van-stock-badge.low {
    background: #fef3c7;
    color: #92400e;
}

.van-stock-badge.out {
    background: #fee2e2;
    color: #991b1b;
}

.van-quick-products {
    margin-top: 0.85rem;
}

.van-inline-heading {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.55rem;
    color: var(--gray-500);
    font-size: 0.72rem;
}

[data-van-sales-workspace] .quick-product-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.45rem;
}

[data-van-sales-workspace] .quick-product-tile {
    min-height: 68px;
}

.van-order-table-wrap {
    min-height: 170px;
    max-height: 390px;
}

[data-van-sales-workspace] .pos-cart-empty-cell {
    height: 165px;
}

.van-notes-field {
    margin-top: 0.75rem;
}

.van-checkout-card,
.flex-summary-card {
    position: sticky;
    top: 0.8rem;
    padding: 1rem;
}

.van-checkout-heading,
.flex-summary-heading {
    margin-bottom: 1rem;
}

.van-total-list,
.flex-totals-list {
    display: grid;
    gap: 0.05rem;
    padding: 0.7rem 0;
    border-top: 1px solid var(--gray-200);
    border-bottom: 1px solid var(--gray-200);
}

.van-total-list > div,
.flex-totals-list > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;
    padding: 0.42rem 0;
    color: var(--gray-600);
    font-size: 0.8rem;
}

.van-grand-total,
.flex-grand-total {
    margin-top: 0.35rem;
    padding-top: 0.72rem !important;
    border-top: 1px dashed var(--gray-300);
    color: var(--gray-900) !important;
    font-size: 1rem !important;
}

.van-grand-total strong,
.flex-grand-total strong {
    color: var(--primary-dark);
    font-size: 1.25rem;
}

.van-payment-fields {
    display: grid;
    gap: 0.7rem;
    margin-top: 0.9rem;
}

.van-due-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.72rem;
    border-radius: 9px;
    background: #fff7ed;
    color: #9a3412;
    font-size: 0.8rem;
    font-weight: 800;
}

.van-primary-actions,
.flex-primary-actions {
    display: grid;
    gap: 0.55rem;
    margin-top: 0.9rem;
}

.van-primary-actions button,
.flex-primary-actions button {
    min-height: 44px;
    margin: 0;
}

.van-print-btn {
    background: linear-gradient(135deg, #0891b2, #0e7490);
    box-shadow: 0 5px 14px rgba(8, 145, 178, 0.2);
}

.van-secondary-actions,
.flex-action-grid,
.flex-row-actions,
.flex-status-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.42rem;
}

.van-secondary-actions,
.flex-action-grid {
    margin-top: 0.75rem;
}

.van-secondary-actions button,
.flex-action-grid button,
.flex-row-actions button,
.flex-status-actions button {
    min-height: 32px;
    margin: 0;
    padding: 0.38rem 0.58rem;
    border: 1px solid var(--gray-300);
    border-radius: 7px;
    background: #fff;
    color: var(--gray-700);
    font-size: 0.7rem;
    font-weight: 800;
    box-shadow: none;
}

.van-secondary-actions button:hover,
.flex-action-grid button:hover,
.flex-row-actions button:hover,
.flex-status-actions button:hover {
    border-color: #a5b4fc;
    background: #f5f6ff;
    transform: none;
}

.van-secondary-actions button.danger,
.flex-action-grid button.danger,
.flex-row-actions button.danger {
    border-color: #fecaca;
    color: #b91c1c;
}

.van-secondary-actions button:disabled,
.flex-action-grid button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.van-secondary-actions button:disabled:hover,
.flex-action-grid button:disabled:hover {
    border-color: var(--gray-300);
    background: #fff;
}

/* Flex Printing */
.flex-page-heading {
    border-color: rgba(15, 118, 110, 0.17);
    background: linear-gradient(135deg, #ffffff 0%, #effcf9 100%);
}

.flex-eyebrow,
.flex-document-state strong {
    color: #0f766e;
}

.flex-document-state strong {
    border-color: #bce5dd;
    background: #eaf9f5;
}

.flex-workspace-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
    align-items: start;
    gap: 1rem;
}

.flex-customer-row {
    grid-template-columns: minmax(220px, 1fr) minmax(150px, 0.35fr) minmax(175px, 0.38fr);
    margin-bottom: 1rem;
}

.flex-job-table-wrap {
    min-height: 260px;
}

.flex-job-table {
    table-layout: fixed;
}

.flex-job-table th:nth-child(1) { width: 29%; }
.flex-job-table th:nth-child(2),
.flex-job-table th:nth-child(3) { width: 10%; }
.flex-job-table th:nth-child(4) { width: 8%; }
.flex-job-table th:nth-child(5) { width: 10%; }
.flex-job-table th:nth-child(6) { width: 12%; }
.flex-job-table th:nth-child(7) { width: 15%; }
.flex-job-table th:nth-child(8) { width: 6%; }

.flex-job-table td {
    padding: 0.5rem 0.42rem;
}

.flex-job-table input,
.flex-job-table select {
    min-height: 36px;
    padding: 0.42rem 0.48rem;
    font-size: 0.76rem;
}

.flex-job-table output,
.flex-job-table td strong {
    color: var(--gray-800);
    font-size: 0.77rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.flex-editor-footer {
    display: grid;
    grid-template-columns: auto minmax(260px, 1fr);
    align-items: end;
    gap: 0.8rem;
    margin-top: 0.85rem;
}

.flex-add-line-btn {
    min-height: 40px;
    margin: 0;
    padding: 0.55rem 0.9rem;
    background: linear-gradient(135deg, #0f8f83, #0f766e);
    box-shadow: 0 5px 14px rgba(15, 118, 110, 0.2);
}

.flex-create-job-btn {
    min-height: 40px;
    padding: 0.55rem 0.95rem;
    background: linear-gradient(135deg, #0f8f83, #0f766e);
    box-shadow: 0 5px 14px rgba(15, 118, 110, 0.2);
}

.flex-queue-toolbar {
    display: grid;
    grid-template-columns: minmax(150px, 210px) minmax(220px, 1fr) auto;
    align-items: end;
    gap: 0.7rem;
    margin-bottom: 0.85rem;
}

.flex-queue-job-identity {
    display: flex;
    min-width: max-content;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
}

.flex-queue-job-identity > span,
.flex-queue-job-identity > small {
    color: var(--gray-500);
    font-size: 0.68rem;
}

body.user-page[data-business-profile="flex_printing"] .flex-queue-table th,
body.user-page[data-business-profile="flex_printing"] .flex-queue-table td {
    padding-top: 0.42rem;
    padding-bottom: 0.42rem;
    line-height: 1.2;
}

body.user-page[data-business-profile="flex_printing"] .flex-queue-table td:nth-child(3) small {
    display: inline;
    margin-left: 0.35rem;
    color: var(--gray-500);
    font-size: 0.66rem;
}

.flex-status-select {
    min-height: 32px;
    padding: 0.3rem 0.45rem;
    border: 1px solid var(--gray-300);
    border-radius: 999px;
    background: #f8fafc;
    color: var(--gray-700);
    font-size: 0.7rem;
    font-weight: 800;
}

.flex-status-select.status-in_progress { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.flex-status-select.status-completed { background: #f3f4f6; color: #4b5563; border-color: #d1d5db; }

.flex-empty-state,
.flex-status-empty {
    padding: 1.5rem;
    color: var(--gray-500);
    text-align: center;
    font-size: 0.8rem;
}

.flex-message {
    min-height: 22px;
    margin-top: 0.7rem;
    color: var(--gray-500);
    font-size: 0.76rem;
    font-weight: 700;
}

.flex-message.success { color: #047857; }
.flex-message.error,
.flex-dialog-error { color: #b91c1c; }

.flex-status-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.flex-status-stat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 76px;
    margin: 0;
    padding: 0.9rem 1rem;
    border: 1px solid var(--gray-200);
    border-radius: 13px;
    background: #fff;
    color: var(--gray-600);
    box-shadow: 0 7px 22px rgba(31, 41, 55, 0.055);
}

.flex-status-stat-label {
    display: grid;
    gap: 0.15rem;
    text-align: left;
}

.flex-status-stat-label strong {
    color: var(--gray-800);
    font-size: 0.78rem;
}

.flex-status-stat-label small {
    color: var(--gray-500);
    font-size: 0.65rem;
    font-weight: 650;
}

.flex-status-stat > b {
    color: var(--gray-900);
    font-size: 1.55rem;
}

.flex-status-stat.status-queued { border-left: 4px solid #94a3b8; }
.flex-status-stat.status-in_progress { border-left: 4px solid #3b82f6; }
.flex-status-stat.status-completed { border-left: 4px solid #6366f1; }

.flex-status-board {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: start;
    gap: 0.75rem;
    overflow-x: auto;
    padding: 0 0.1rem 0.45rem;
    scroll-snap-type: x proximity;
    scrollbar-gutter: stable;
}

.flex-status-column {
    overflow: hidden;
    border: 1px solid var(--gray-200);
    border-radius: 14px;
    background: rgba(248, 250, 252, 0.88);
    scroll-snap-align: start;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.flex-status-column.is-focused {
    border-color: #6ee7d8;
    box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.12);
}

.flex-status-column > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.7rem 0.8rem;
    border-bottom: 1px solid var(--gray-200);
    background: #fff;
    color: var(--gray-700);
    font-size: 0.75rem;
    font-weight: 900;
}

.flex-status-column > header strong {
    display: inline-grid;
    min-width: 24px;
    height: 24px;
    place-items: center;
    border-radius: 999px;
    background: var(--gray-100);
    font-size: 0.7rem;
}

.flex-status-column-body {
    display: grid;
    max-height: min(620px, calc(100vh - 330px));
    min-height: 150px;
    overflow: auto;
    gap: 0.55rem;
    padding: 0.6rem;
}

.flex-status-job {
    padding: 0.7rem;
    border: 1px solid var(--gray-200);
    border-radius: 10px;
    background: #fff;
    box-shadow: var(--shadow-sm);
}

.flex-status-job-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.45rem;
}

.flex-status-customer {
    display: block;
    overflow: hidden;
    margin-top: 0.22rem;
    color: var(--gray-700);
    font-size: 0.72rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.flex-status-job > small {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.45rem;
    color: var(--gray-500);
    font-size: 0.67rem;
}

.flex-status-job > small {
    margin: 0.3rem 0 0.5rem;
}

.flex-status-job > small strong {
    color: var(--gray-700);
}

.flex-status-actions .primary {
    flex: 1 1 auto;
}

.flex-status-actions button.primary {
    border-color: #99d7cc;
    background: #effcf9;
    color: #0f766e;
}

/* Connected Flex Printing modules. Intentionally profile-scoped so the
   frozen Retail and Van layouts retain their existing dimensions and theme. */
body[data-business-profile="flex_printing"] .flex-module-page {
    display: block;
}

body[data-business-profile="flex_printing"] .flex-module-page.hidden {
    display: none !important;
}

.flex-module-toolbar,
.flex-inline-fields {
    display: flex;
    align-items: end;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-bottom: 0.75rem;
}

.flex-module-toolbar .flex-field,
.flex-inline-fields .flex-field {
    min-width: 145px;
}

.flex-module-toolbar .flex-grow,
.flex-inline-fields .flex-grow,
.flex-grow {
    flex: 1 1 230px;
}

.flex-small-field {
    flex: 0 1 112px;
    min-width: 96px !important;
}

.flex-check {
    display: inline-flex;
    align-items: center;
    align-self: center;
    gap: 0.45rem;
    min-height: 38px;
    color: var(--gray-700);
    font-size: 0.76rem;
    font-weight: 800;
    white-space: nowrap;
}

.flex-check input {
    width: 16px;
    height: 16px;
}

.flex-module-editor-table {
    max-height: 310px;
}

.flex-module-editor-table input,
.flex-module-editor-table select {
    min-width: 78px;
    min-height: 34px;
    padding: 0.35rem 0.45rem;
    font-size: 0.74rem;
}

.flex-module-editor-footer {
    display: flex;
    align-items: end;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-top: 0.75rem;
}

.flex-module-total {
    display: grid;
    min-width: 155px;
    gap: 0.1rem;
    padding: 0.45rem 0.7rem;
    border: 1px solid #bce5dd;
    border-radius: 9px;
    background: #effcf9;
}

.flex-module-total span {
    color: var(--gray-500);
    font-size: 0.65rem;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.flex-module-total strong {
    color: #0f766e;
    font-size: 1rem;
}

.flex-module-split,
.flex-admin-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 0.85rem;
}

.flex-finance-grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
}

.flex-status-pill {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0.2rem 0.5rem;
    border: 1px solid #dbe3ed;
    border-radius: 999px;
    background: #f8fafc;
    color: #475569;
    font-size: 0.66rem;
    font-weight: 900;
    text-transform: capitalize;
    white-space: nowrap;
}

.flex-status-pill.status-accepted,
.flex-status-pill.status-paid,
.flex-status-pill.status-sent,
.flex-status-pill.status-partially_paid,
.flex-status-pill.status-in_progress { border-color: #bfdbfe; background: #eff6ff; color: #1d4ed8; }
.flex-status-pill.status-expired { border-color: #fecaca; background: #fef2f2; color: #b91c1c; }
.flex-status-pill.status-draft,
.flex-status-pill.status-unpaid,
.flex-status-pill.status-queued { border-color: #fed7aa; background: #fff7ed; color: #9a3412; }

.flex-editor-actions,
.flex-job-admin-actions {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-top: 0.7rem;
}

.flex-job-detail-summary,
.flex-report-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
    gap: 0.55rem;
    margin-bottom: 0.75rem;
}

.flex-job-detail-summary > span,
.flex-report-summary > article {
    display: grid;
    gap: 0.16rem;
    padding: 0.6rem 0.7rem;
    border: 1px solid var(--gray-200);
    border-radius: 9px;
    background: #f8fafc;
    color: var(--gray-500);
    font-size: 0.66rem;
    font-weight: 800;
    text-transform: capitalize;
}

.flex-job-detail-summary strong,
.flex-report-summary strong {
    color: var(--gray-900);
    font-size: 0.82rem;
}

body.admin-page[data-business-profile="flex_printing"] #adminEditionDashboardTab {
    --dashboard-line: #c9d9df;
    --dashboard-line-soft: #deeaee;
    --dashboard-surface: #ffffff;
    --dashboard-shadow: 0 10px 28px rgba(11, 45, 62, 0.09);
    --dashboard-shadow-hover: 0 15px 36px rgba(11, 45, 62, 0.13);
}

body.admin-page[data-business-profile="flex_printing"] #adminEditionDashboardTab .dashboard-sales-chart-panel {
    width: 100%;
    margin: 0;
    padding: 1.05rem 1.15rem 0.85rem;
    border: 1px solid var(--dashboard-line);
    border-radius: 14px;
    background:
        radial-gradient(circle at 0% 0%, rgba(15, 133, 136, 0.08), transparent 34%),
        linear-gradient(180deg, #ffffff, #f9fcfd);
    box-shadow: var(--dashboard-shadow);
}

body.admin-page[data-business-profile="flex_printing"] #adminEditionDashboardTab .dashboard-sales-chart-panel:hover {
    border-color: #9bbbc4;
    box-shadow: var(--dashboard-shadow-hover);
}

body.admin-page[data-business-profile="flex_printing"] #adminEditionDashboardTab .dashboard-panel-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .9rem;
    min-height: 52px;
    margin: 0 0 .75rem;
    padding: 0 0 .75rem;
    border-bottom: 1px solid var(--dashboard-line-soft);
}

body.admin-page[data-business-profile="flex_printing"] #adminEditionDashboardTab .dashboard-panel-heading-main,
body.admin-page[data-business-profile="flex_printing"] #adminEditionDashboardTab .dashboard-panel-heading-meta {
    display: flex;
    align-items: center;
    gap: .68rem;
}

body.admin-page[data-business-profile="flex_printing"] #adminEditionDashboardTab .dashboard-panel-heading-main {
    min-width: 0;
}

body.admin-page[data-business-profile="flex_printing"] #adminEditionDashboardTab .dashboard-section-kicker {
    display: block;
    color: #0f7f7f;
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

body.admin-page[data-business-profile="flex_printing"] #adminEditionDashboardTab .dashboard-panel-heading-main h3,
body.admin-page[data-business-profile="flex_printing"] #adminEditionDashboardTab .dashboard-panel-heading-main p {
    margin: 0;
}

body.admin-page[data-business-profile="flex_printing"] #adminEditionDashboardTab .dashboard-panel-heading-main p {
    margin-top: .2rem;
    color: #64748b;
    font-size: .76rem;
}

body.admin-page[data-business-profile="flex_printing"] #adminEditionDashboardTab .dashboard-period-badge,
body.admin-page[data-business-profile="flex_printing"] #adminEditionDashboardTab .dashboard-chart-total {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: .35rem .58rem;
    border: 1px solid #b7dbdc;
    border-radius: 999px;
    background: #f4f9fa;
    color: #0b666c;
    font-size: .78rem;
    font-weight: 900;
    white-space: nowrap;
}

body.admin-page[data-business-profile="flex_printing"] #adminEditionDashboardTab .dashboard-chart-total {
    border-radius: 8px;
    background: #eaf8f7;
    font-size: .82rem;
}

#flexDashSalesTrendChart .dash-chart-area {
    fill: url(#flexDashSalesTrendChartAreaGradient);
}

#flexDashSalesTrendChart .dash-chart-line {
    stroke: url(#flexDashSalesTrendChartLineGradient);
}

@media (max-width: 700px) {
    body.admin-page[data-business-profile="flex_printing"] #adminEditionDashboardTab .dashboard-panel-title {
        align-items: stretch;
        flex-direction: column;
    }

    body.admin-page[data-business-profile="flex_printing"] #adminEditionDashboardTab .dashboard-panel-heading-meta {
        justify-content: space-between;
    }

    body.admin-page[data-business-profile="flex_printing"] #adminEditionDashboardTab .dashboard-sales-chart,
    body.admin-page[data-business-profile="flex_printing"] #adminEditionDashboardTab .dashboard-sales-chart svg {
        min-height: 218px;
        height: 218px;
    }
}

.flex-admin-dashboard-grid .panel {
    min-width: 0;
    margin: 0;
}

body.user-page[data-business-profile="flex_printing"] [data-flex-module-tab] {
    height: 100%;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
}

@media (max-width: 1180px) {
    .flex-module-split,
    .flex-admin-dashboard-grid,
    .flex-finance-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
    .flex-module-toolbar,
    .flex-inline-fields,
    .flex-module-editor-footer { align-items: stretch; flex-direction: column; }
    .flex-module-toolbar .flex-field,
    .flex-inline-fields .flex-field,
    .flex-small-field { width: 100%; min-width: 0 !important; }
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 1180px) {
    .van-sales-layout,
    .flex-workspace-grid {
        grid-template-columns: 1fr;
    }

    .van-checkout-card,
    .flex-summary-card {
        position: static;
    }

    .van-primary-actions,
    .flex-primary-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .flex-status-board {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    body.user-page[data-business-profile="van_sales"] .container,
    body.user-page[data-business-profile="flex_printing"] .container {
        padding: 0.7rem 0.55rem 1.5rem;
    }

    .van-workspace-heading,
    .flex-page-heading,
    .van-card-heading,
    .flex-section-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .van-workspace-meta,
    .flex-document-state {
        align-items: flex-start;
    }

    .van-customer-grid,
    .van-product-entry,
    .flex-customer-row,
    .flex-editor-footer,
    .flex-queue-toolbar {
        grid-template-columns: 1fr;
    }

    .van-barcode-row {
        grid-template-columns: 1fr;
    }

    [data-van-sales-workspace] .quick-product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .van-primary-actions,
    .flex-primary-actions,
    .flex-status-summary,
    .flex-status-board {
        grid-template-columns: 1fr;
    }

    .flex-job-table,
    .flex-job-table tbody,
    .flex-job-table tr,
    .flex-job-table td,
    .flex-queue-table,
    .flex-queue-table tbody,
    .flex-queue-table tr,
    .flex-queue-table td {
        display: block;
        width: 100%;
    }

    .flex-job-table thead,
    .flex-queue-table thead {
        display: none;
    }

    .flex-job-table tr,
    .flex-queue-table tr {
        margin: 0.6rem;
        padding: 0.65rem;
        width: calc(100% - 1.2rem);
        border: 1px solid var(--gray-200);
        border-radius: 10px;
        background: #fff;
    }

    .flex-job-table td,
    .flex-queue-table td {
        display: grid;
        grid-template-columns: 92px minmax(0, 1fr);
        align-items: center;
        gap: 0.65rem;
        padding: 0.35rem 0;
        border: 0;
        text-align: left !important;
    }

    .flex-job-table td::before,
    .flex-queue-table td::before {
        content: attr(data-label);
        color: var(--gray-500);
        font-size: 0.65rem;
        font-weight: 900;
        letter-spacing: 0.035em;
        text-transform: uppercase;
    }

    .van-order-table-wrap {
        overflow-x: auto;
    }

    .van-order-table {
        min-width: 760px;
    }
}

/* Flex viewport lock; Van tabs retain natural page scrolling. */
.van-heading-actions {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

body.user-page[data-business-profile="flex_printing"] .app-footer {
    display: none;
}

@media (min-width: 900px) {
    body.user-page[data-business-profile="flex_printing"] .container {
        height: calc(100vh - 104px);
        min-height: 520px;
        padding: 0.55rem 0.75rem 0.7rem;
        overflow: hidden;
    }

    body.user-page[data-business-profile="flex_printing"] #printingWorkspaceTab,
    body.user-page[data-business-profile="flex_printing"] #printJobQueueTab,
    body.user-page[data-business-profile="flex_printing"] #printJobStatusTab {
        height: 100%;
        min-height: 0;
        overflow: hidden;
    }

    [data-van-sales-workspace] .van-sales-shell,
    body.user-page[data-business-profile="flex_printing"] #printingWorkspaceTab,
    body.user-page[data-business-profile="flex_printing"] #printJobQueueTab,
    body.user-page[data-business-profile="flex_printing"] #printJobStatusTab {
        display: flex;
        flex-direction: column;
    }

    .van-workspace-heading,
    .flex-page-heading {
        flex: 0 0 auto;
        min-height: 56px;
        margin-bottom: 0.5rem;
        padding: 0.55rem 0.8rem;
        border-radius: 12px;
    }

    .van-workspace-heading h2,
    .flex-page-heading h2 {
        font-size: 1.2rem;
    }

    .van-sales-layout,
    .flex-workspace-grid {
        flex: 1 1 auto;
        grid-template-columns: minmax(0, 1fr) minmax(280px, 330px);
        align-items: stretch;
        min-height: 0;
        gap: 0.55rem;
    }

    .van-sales-main {
        grid-template-rows: auto minmax(165px, 0.82fr) minmax(175px, 1fr);
        min-height: 0;
        gap: 0.5rem;
    }

    .van-sales-card,
    .flex-editor-card,
    .flex-list-card,
    .van-checkout-card,
    .flex-summary-card {
        min-height: 0;
        padding: 0.55rem 0.65rem;
        border-radius: 11px;
    }

    .van-product-card,
    .van-order-card,
    .flex-editor-card,
    .flex-list-card {
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .van-card-heading,
    .van-checkout-heading,
    .flex-section-heading,
    .flex-summary-heading {
        flex: 0 0 auto;
        margin-bottom: 0.42rem;
    }

    .van-step,
    .flex-section-icon {
        width: 27px;
        height: 27px;
        flex-basis: 27px;
        border-radius: 8px;
    }

    .van-customer-grid,
    .flex-customer-row {
        gap: 0.5rem;
    }

    .van-field input,
    .van-field select,
    .flex-field input,
    .flex-field select,
    .flex-queue-toolbar input,
    .flex-queue-toolbar select {
        min-height: 34px;
        padding: 0.4rem 0.55rem;
    }

    .van-account-summary,
    .flex-customer-balance {
        min-height: 52px;
        padding: 0.42rem 0.65rem;
    }

    .van-product-entry {
        grid-template-columns: minmax(210px, 1fr) 92px auto;
        gap: 0.45rem;
    }

    .van-add-item-btn,
    .flex-add-line-btn,
    .flex-create-job-btn {
        min-height: 34px;
        padding: 0.4rem 0.7rem;
    }

    .van-barcode-row {
        margin-top: 0.35rem;
    }

    .van-product-results {
        flex: 1 1 auto;
        min-height: 58px;
        max-height: none;
        margin-top: 0.4rem;
    }

    .van-product-results th,
    .van-product-results td,
    .van-order-table th,
    .van-order-table td,
    .flex-job-table th,
    .flex-job-table td,
    .flex-queue-table th,
    .flex-queue-table td {
        padding: 0.38rem 0.5rem;
        line-height: 1.25;
    }

    .van-quick-products {
        flex: 0 0 auto;
        margin-top: 0.35rem;
    }

    .van-inline-heading {
        margin-bottom: 0.3rem;
    }

    [data-van-sales-workspace] .quick-product-tile {
        min-height: 45px;
        padding: 0.3rem;
    }

    .van-order-table-wrap,
    .flex-job-table-wrap,
    .flex-responsive-table {
        flex: 1 1 auto;
        min-height: 0;
        max-height: none;
    }

    [data-van-sales-workspace] .pos-cart-empty-cell {
        height: 88px;
    }

    .van-checkout-card,
    .flex-summary-card {
        position: static;
        height: 100%;
        overflow: auto;
    }

    .van-total-list,
    .flex-totals-list {
        padding: 0.35rem 0;
    }

    .van-total-list > div,
    .flex-totals-list > div {
        padding: 0.25rem 0;
    }

    .van-payment-fields {
        gap: 0.4rem;
        margin-top: 0.45rem;
    }

    .van-due-row {
        padding: 0.5rem 0.6rem;
    }

    .van-primary-actions,
    .flex-primary-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.4rem;
        margin-top: 0.5rem;
    }

    .van-primary-actions button,
    .flex-primary-actions button {
        min-height: 38px;
    }

    .van-secondary-actions,
    .flex-action-grid {
        margin-top: 0.5rem;
    }

    .flex-customer-row {
        flex: 0 0 auto;
        margin-bottom: 0.5rem;
    }

    .flex-editor-footer {
        flex: 0 0 auto;
        margin-top: 0.45rem;
    }

    .flex-notes-field textarea {
        min-height: 42px;
        height: 42px;
        padding: 0.38rem 0.5rem;
        resize: none;
    }

    .flex-queue-toolbar {
        flex: 0 0 auto;
        margin-bottom: 0.5rem;
    }

    .flex-status-summary {
        flex: 0 0 auto;
        gap: 0.45rem;
        margin-bottom: 0.5rem;
    }

    .flex-status-stat {
        min-height: 52px;
        padding: 0.5rem 0.65rem;
    }

    .flex-status-stat > b {
        font-size: 1.15rem;
    }

    .flex-status-board {
        flex: 1 1 auto;
        min-height: 0;
        gap: 0.5rem;
    }

    .flex-status-column {
        display: flex;
        min-height: 0;
        flex-direction: column;
    }

    .flex-status-column-body {
        flex: 1 1 auto;
        max-height: none;
        min-height: 0;
        overflow: auto;
    }
}

@media (min-width: 900px) and (max-height: 800px) {
    .van-workspace-heading p,
    .flex-page-heading p,
    .van-card-heading p,
    .van-checkout-heading p,
    .flex-section-heading p,
    .flex-summary-heading p {
        display: none;
    }

    .van-quick-products {
        display: none;
    }
}

@media (max-width: 899px) {
    body.user-page[data-business-profile="flex_printing"] .container {
        height: calc(100vh - 104px);
        min-height: 480px;
        padding: 0.55rem;
        overflow: hidden;
    }

    body.user-page[data-business-profile="flex_printing"] #printingWorkspaceTab,
    body.user-page[data-business-profile="flex_printing"] #printJobQueueTab,
    body.user-page[data-business-profile="flex_printing"] #printJobStatusTab {
        height: 100%;
        overflow: auto;
        overscroll-behavior: contain;
    }

    .van-workspace-heading,
    .flex-page-heading {
        margin-bottom: 0.55rem;
        padding: 0.7rem;
    }

    .van-sales-main,
    .van-sales-layout,
    .flex-workspace-grid {
        gap: 0.55rem;
    }
}

/* Flex document printing and compact workspace controls. */
.flex-production-footer {
    grid-template-columns: auto minmax(260px, 1fr);
    align-items: end;
}

.flex-print-settings {
    border: 1px solid #cfe8e4;
    border-radius: 10px;
    background: #fff;
    padding: .55rem .65rem;
}
.flex-print-settings { margin-top: 1rem; }
.flex-settings-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(130px, 1fr)) auto;
    align-items: end;
    gap: .55rem;
}


@media (min-width: 1024px) {
    body.user-page[data-business-profile="flex_printing"] #printingWorkspaceTab {
        height: 100%;
        min-height: 0;
        overflow: hidden;
    }

    body.user-page[data-business-profile="flex_printing"] .flex-page-heading {
        min-height: 42px;
        margin-bottom: .45rem;
        padding: .38rem .7rem;
    }

    body.user-page[data-business-profile="flex_printing"] .flex-page-heading h2 { margin: 0; font-size: 1.08rem; }
    body.user-page[data-business-profile="flex_printing"] .flex-workspace-grid { height: calc(100% - 50px); gap: .55rem; }
    body.user-page[data-business-profile="flex_printing"] .flex-editor-card,
    body.user-page[data-business-profile="flex_printing"] .flex-summary-card { min-height: 0; padding: .55rem .65rem; overflow: hidden; }
    body.user-page[data-business-profile="flex_printing"] .flex-editor-card { display: flex; flex-direction: column; }
    body.user-page[data-business-profile="flex_printing"] .flex-section-heading { margin-bottom: .35rem; }
    body.user-page[data-business-profile="flex_printing"] .flex-section-heading p,
    body.user-page[data-business-profile="flex_printing"] .flex-summary-heading p { display: none; }
    body.user-page[data-business-profile="flex_printing"] .flex-customer-row { grid-template-columns: minmax(190px, 1fr) repeat(3, minmax(105px, .3fr)) auto; gap: .45rem; margin-bottom: .4rem; }
    body.user-page[data-business-profile="flex_printing"] .flex-job-table-wrap { flex: 1 1 auto; min-height: 150px; overflow: auto; }
    body.user-page[data-business-profile="flex_printing"] .flex-editor-footer { flex: 0 0 auto; gap: .45rem; margin-top: .4rem; }
    body.user-page[data-business-profile="flex_printing"] .flex-summary-card { overflow-y: auto; }
    body.user-page[data-business-profile="flex_printing"] .flex-totals-list > div { padding: .28rem 0; }
    body.user-page[data-business-profile="flex_printing"] .flex-action-grid { gap: .3rem; }
    body.user-page[data-business-profile="flex_printing"] .flex-action-grid button { min-height: 30px; padding: .3rem; }
}

@media (max-width: 1180px) {
    .flex-production-footer { grid-template-columns: auto minmax(180px, 1fr); }
    .flex-settings-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
    .flex-settings-grid { grid-template-columns: 1fr; }
    .flex-production-footer { grid-template-columns: 1fr; }
}

@media (min-width: 900px) and (max-width: 1023px) {
    body.user-page[data-business-profile="flex_printing"] .container {
        height: calc(100vh - 157px);
        min-height: 0;
    }
}

/* Compact Flex Printing workspace. */
body.user-page[data-business-profile="flex_printing"] .flex-workspace-header {
    justify-content: flex-start;
    gap: 0.7rem;
}

body.user-page[data-business-profile="flex_printing"] .flex-workspace-title,
body.user-page[data-business-profile="flex_printing"] .flex-document-state {
    display: flex;
    align-items: center;
    flex-direction: row;
    gap: 0.55rem;
    min-width: 0;
}

body.user-page[data-business-profile="flex_printing"] .flex-workspace-title {
    flex: 1 1 auto;
}

body.user-page[data-business-profile="flex_printing"] .flex-workspace-header-actions {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-left: auto;
}

body.user-page[data-business-profile="flex_printing"] .flex-new-job-btn,
body.user-page[data-business-profile="flex_printing"] .flex-new-customer-btn {
    min-height: 32px;
    margin: 0;
    padding: .34rem .62rem;
    font-size: .7rem;
    box-shadow: none;
}

body.user-page[data-business-profile="flex_printing"] .flex-action-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

body.user-page[data-business-profile="flex_printing"] .flex-primary-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

body.user-page[data-business-profile="flex_printing"] .flex-primary-actions .flex-create-job-btn {
    grid-column: 1 / -1;
}

body.user-page[data-business-profile="flex_printing"] #printJobStatusTab .flex-status-board {
    grid-template-columns: repeat(4, minmax(240px, 1fr));
    scrollbar-width: thin;
}

/* Compact Flex data/history rows. Shared Retail and Van tables are excluded. */
body.admin-page[data-business-profile="flex_printing"] #transactionsTab table,
body.admin-page[data-business-profile="flex_printing"] #invoicesTab table,
body.user-page[data-business-profile="flex_printing"] #salesReportTab table,
body.admin-page[data-business-profile="flex_printing"] .flex-queue-table,
body.user-page[data-business-profile="flex_printing"] .flex-queue-table {
    width: max-content;
    min-width: 100%;
    font-size: 11px;
}

body.admin-page[data-business-profile="flex_printing"] #transactionsTab th,
body.admin-page[data-business-profile="flex_printing"] #transactionsTab td,
body.admin-page[data-business-profile="flex_printing"] #invoicesTab th,
body.admin-page[data-business-profile="flex_printing"] #invoicesTab td,
body.user-page[data-business-profile="flex_printing"] #salesReportTab th,
body.user-page[data-business-profile="flex_printing"] #salesReportTab td,
body.admin-page[data-business-profile="flex_printing"] .flex-queue-table th,
body.admin-page[data-business-profile="flex_printing"] .flex-queue-table td,
body.user-page[data-business-profile="flex_printing"] .flex-queue-table th,
body.user-page[data-business-profile="flex_printing"] .flex-queue-table td {
    height: auto;
    padding: 0.2rem 0.38rem;
    line-height: 1.1;
    white-space: nowrap;
}

body.admin-page[data-business-profile="flex_printing"] #transactionsTab .actions-group,
body.admin-page[data-business-profile="flex_printing"] #invoicesTab .actions-group,
body.admin-page[data-business-profile="flex_printing"] .flex-row-actions,
body.user-page[data-business-profile="flex_printing"] .flex-row-actions {
    display: inline-flex;
    align-items: center;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 0.25rem;
}

body.admin-page[data-business-profile="flex_printing"] #transactionsTab .action-btn,
body.admin-page[data-business-profile="flex_printing"] #invoicesTab .action-btn,
body.user-page[data-business-profile="flex_printing"] #salesReportTab button,
body.admin-page[data-business-profile="flex_printing"] .flex-row-actions button,
body.user-page[data-business-profile="flex_printing"] .flex-row-actions button {
    width: auto;
    min-width: 0;
    min-height: 24px;
    margin: 0;
    padding: 0.18rem 0.38rem;
    font-size: 10.5px;
    line-height: 1.1;
    white-space: nowrap;
    box-shadow: none;
}

body.user-page[data-business-profile="flex_printing"] .flex-whatsapp-btn:not(:disabled) {
    border-color: #128c4b;
    background: linear-gradient(135deg, #128c4b, #25a866);
    color: #fff;
}

/* Shared Admin Sales / Invoices polish for Retail, Van Sales, and Flex Printing. */
body.admin-page #transactionsTab > h3,
body.admin-page #invoicesTab > h3 {
    margin-bottom: 0.7rem;
    color: #153b47;
    font-size: clamp(1.08rem, 1.5vw, 1.3rem);
    letter-spacing: -0.015em;
}

body.admin-page .admin-sales-filters {
    align-items: end;
    gap: 0.45rem;
    padding: 0.65rem;
    border: 1px solid rgba(28, 136, 168, 0.14);
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(247, 252, 253, 0.96), rgba(239, 248, 250, 0.86));
    box-shadow: 0 5px 16px rgba(19, 59, 71, 0.055);
}

body.admin-page .admin-sales-filters button {
    min-height: 34px;
    margin: 0;
    padding: 0.42rem 0.72rem;
    box-shadow: none;
}

body.admin-page .admin-sales-filter-primary {
    background: linear-gradient(135deg, #167c91, #0f6478);
}

body.admin-page .admin-sales-filter-clear {
    border-color: #cbd8dc;
    background: #ffffff;
    color: #38545d;
}

body.admin-page .admin-sales-filter-print {
    border-color: #bfdbfe;
    background: #eff6ff;
    color: #1d4ed8;
}

body.admin-page .admin-sales-filter-credit {
    border-color: #fde68a;
    background: #fffbeb;
    color: #92400e;
}

body.admin-page .admin-sales-table-wrap {
    width: 100%;
    overflow: auto;
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 11px;
    background: #ffffff;
    box-shadow: 0 7px 22px rgba(15, 45, 58, 0.06);
}

body.admin-page .admin-sales-table {
    width: max-content;
    min-width: 100%;
    margin: 0;
    border: 0;
    box-shadow: none;
}

body.admin-page .admin-sales-table th {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.025em;
    text-transform: uppercase;
}

body.admin-page .admin-sales-table th,
body.admin-page .admin-sales-table td {
    height: auto;
    padding: 0.3rem 0.43rem;
    line-height: 1.15;
    white-space: nowrap;
    vertical-align: middle;
}

body.admin-page .admin-sales-table tbody tr:hover td {
    background: rgba(235, 248, 250, 0.58);
}

body.admin-page .admin-sale-action-cell {
    padding-inline: 0.32rem;
}

body.admin-page .admin-sale-actions {
    display: inline-flex;
    align-items: center;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 0.25rem;
}

body.admin-page .admin-sale-actions .admin-sale-action {
    width: auto;
    min-width: 0;
    min-height: 28px;
    margin: 0;
    padding: 0.25rem 0.48rem;
    border: 1px solid transparent;
    border-radius: 6px;
    font-size: 10.5px;
    line-height: 1;
    box-shadow: none;
}

body.admin-page .admin-sale-actions .admin-sale-print {
    border-color: #bfdbfe;
    background: #eff6ff;
    color: #1d4ed8;
}

body.admin-page .admin-sale-actions .admin-sale-whatsapp {
    display: inline-grid;
    width: 29px;
    place-items: center;
    padding: 0;
    border-color: #128c4b;
    background: linear-gradient(135deg, #128c4b, #25a866);
    color: #ffffff;
}

body.admin-page .admin-sale-actions .admin-sale-whatsapp svg {
    width: 15px;
    height: 15px;
}

body.admin-page .admin-sale-actions .admin-sale-return {
    border-color: #fde68a;
    background: #fffbeb;
    color: #92400e;
}

body.admin-page .admin-sale-actions .admin-sale-delete {
    padding-inline: 0.45rem;
}

body.admin-page .admin-whatsapp-dialog-btn {
    border-color: #128c4b;
    background: linear-gradient(135deg, #128c4b, #25a866);
    color: #ffffff;
}

body.admin-page .admin-sale-actions .admin-sale-print:hover,
body.admin-page .admin-sales-filter-print:hover {
    border-color: #93c5fd;
    background: #dbeafe;
    color: #1e40af;
}

body.admin-page .admin-sale-actions .admin-sale-whatsapp:hover,
body.admin-page .admin-whatsapp-dialog-btn:hover {
    border-color: #0f7a40;
    background: linear-gradient(135deg, #0f7a40, #1f995a);
    color: #ffffff;
}

body.admin-page .admin-sale-actions .admin-sale-return:hover,
body.admin-page .admin-sales-filter-credit:hover {
    border-color: #fcd34d;
    background: #fef3c7;
    color: #78350f;
}

body.admin-page .admin-sales-filter-clear:hover {
    border-color: #aabdc3;
    background: #f8fafc;
    color: #243f47;
}

@media (max-width: 760px) {
    body.admin-page .admin-sales-filters {
        align-items: stretch;
    }

    body.admin-page .admin-sales-filters button {
        flex: 1 1 auto;
    }
}

body.user-page[data-business-profile="flex_printing"] .flex-module-editor-table input,
body.user-page[data-business-profile="flex_printing"] .flex-module-editor-table select {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    text-overflow: ellipsis;
}

@media (min-width: 761px) {
    body.user-page[data-business-profile="flex_printing"] .flex-module-editor-table .flex-queue-table {
        width: 100%;
        min-width: 1000px;
        table-layout: fixed;
    }

    body.user-page[data-business-profile="flex_printing"] .flex-module-editor-table th,
    body.user-page[data-business-profile="flex_printing"] .flex-module-editor-table td {
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .flex-quote-col-description { width: 26%; }
    .flex-quote-col-product { width: 24%; }
    .flex-quote-col-width,
    .flex-quote-col-height { width: 4.5%; }
    .flex-quote-col-unit { width: 5%; }
    .flex-quote-col-qty { width: 5%; }
    .flex-quote-col-sale-qty { width: 8%; }
    .flex-quote-col-rate { width: 7%; }
    .flex-quote-col-finishing { width: 8%; }
    .flex-quote-col-total { width: 6%; }
    .flex-quote-col-remove { width: 2%; }
}

body.user-page[data-business-profile="flex_printing"] .flex-module-editor-table .flex-remove-cell {
    padding-right: 0.1rem;
    padding-left: 0.1rem;
    text-align: center;
}

body.user-page[data-business-profile="flex_printing"] .flex-module-editor-table .flex-quote-remove-line {
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
    padding: 0;
    border-radius: 5px;
    font-size: 0.72rem;
}

body.user-page[data-business-profile="flex_printing"] .flex-workspace-title .flex-eyebrow {
    padding-right: 0.55rem;
    border-right: 1px solid #cfe1de;
    white-space: nowrap;
}

body.user-page[data-business-profile="flex_printing"] .flex-document-state {
    flex: 0 0 auto;
    color: var(--gray-600);
    font-size: 0.72rem;
    font-weight: 800;
}

body.user-page[data-business-profile="flex_printing"] .flex-document-state strong {
    padding: 0.3rem 0.58rem;
}

.flex-job-table col.flex-col-description { width: 21%; }
.flex-job-table col.flex-col-product { width: 17%; }
.flex-job-table col.flex-col-size { width: 19%; }
.flex-job-table col.flex-col-quantity { width: 8%; }
.flex-job-table col.flex-col-area { width: 11%; }
.flex-job-table col.flex-col-rate { width: 9%; }
.flex-job-table col.flex-col-total { width: 11%; }
.flex-job-table col.flex-col-remove { width: 4%; }

body.user-page[data-business-profile="flex_printing"] .flex-job-table th {
    width: auto;
}

.flex-job-table .flex-size-inputs {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.18rem;
}

.flex-job-table .flex-size-inputs input {
    min-width: 0;
}

.flex-line-unit-chip {
    min-height: 28px;
    border: 1px solid #cfe1de;
    border-radius: 7px;
    background: #f3faf8;
    color: #0f766e;
    font-size: .66rem;
    font-weight: 800;
}

.flex-line-unit-chip { min-width: 31px; padding: .2rem .3rem; }

.flex-job-table .flex-remove-cell {
    padding-right: .25rem;
    padding-left: .25rem;
    text-align: center;
}

.flex-remove-line {
    display: inline-grid;
    width: 26px;
    height: 26px;
    margin: 0;
    padding: 0;
    place-items: center;
    border: 1px solid #fecaca;
    border-radius: 7px;
    background: #fff;
    color: #b91c1c;
    font-size: .95rem;
    line-height: 1;
    box-shadow: none;
}

.flex-remove-line:hover,
.flex-remove-line:focus-visible {
    border-color: #ef4444;
    background: #fef2f2;
    color: #991b1b;
}

.flex-line-detail-summary {
    display: block;
    overflow: hidden;
    margin-top: .2rem;
    color: var(--gray-500);
    font-size: .64rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.flex-line-details-dialog {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .65rem;
    min-width: min(480px, 72vw);
}

.flex-line-details-dialog label {
    display: grid;
    gap: .3rem;
    color: var(--gray-700);
    font-size: .75rem;
    font-weight: 750;
}

.flex-line-details-dialog .wide { grid-column: 1 / -1; }

.flex-line-details-dialog select,
.flex-line-details-dialog input,
.flex-line-details-dialog textarea {
    width: 100%;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    padding: .55rem;
    font: inherit;
}

.flex-payment-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .5rem;
}

.flex-payment-summary span,
.flex-payment-result {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    padding: .55rem;
    border-radius: 8px;
    background: var(--gray-100);
}

.flex-muted-control { color: var(--gray-500); }

body.user-page[data-business-profile="flex_printing"] .pos-dialog.flex-invoice-dialog-shell {
    width: min(540px, 100%);
    overflow: hidden;
}

body.user-page[data-business-profile="flex_printing"] .flex-invoice-dialog-shell .pos-dialog-body {
    overflow: visible;
}

.flex-invoice-dialog {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    min-width: 0;
    align-items: end;
}

.flex-invoice-dialog input,
.flex-invoice-dialog select {
    box-sizing: border-box;
    width: 100%;
    height: 38px;
    min-height: 38px;
    margin: 0;
    padding: 0.42rem 0.55rem;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    font: inherit;
}

.flex-invoice-dialog > small {
    line-height: 1.4;
}

.flex-production-footer {
    align-items: end;
}

.flex-add-line-btn,
body.user-page[data-business-profile="flex_printing"] .flex-add-line-btn {
    width: auto;
    min-height: 32px;
    align-self: end;
    padding: 0.35rem 0.65rem;
    border: 1px solid var(--gray-300);
    background: #fff;
    color: var(--gray-700);
    box-shadow: none;
    font-size: 0.72rem;
}

.flex-action-hint {
    display: block;
    margin-top: 0.4rem;
    color: var(--gray-500);
    font-size: 0.67rem;
    line-height: 1.3;
}

.flex-action-hint.actionable {
    color: #0f766e;
    font-weight: 750;
}

@media (max-width: 760px) {
    body.user-page[data-business-profile="flex_printing"] .flex-workspace-header,
    body.user-page[data-business-profile="flex_printing"] .flex-workspace-header-actions,
    body.user-page[data-business-profile="flex_printing"] .flex-workspace-title,
    body.user-page[data-business-profile="flex_printing"] .flex-document-state {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    body.user-page[data-business-profile="flex_printing"] .flex-primary-actions,
    .flex-invoice-dialog {
        grid-template-columns: 1fr;
    }

    body.user-page[data-business-profile="flex_printing"] .flex-primary-actions .flex-create-job-btn,
    .flex-invoice-dialog .wide {
        grid-column: 1;
    }
}

/* Phase 3A edition stabilization. These rules are intentionally limited to
   the Van Sales and Flex Printing user workspaces; Retail remains untouched. */
body.user-page[data-business-profile="van_sales"] .container,
body.user-page[data-business-profile="flex_printing"] .container {
    box-sizing: border-box;
}

@media (min-width: 1024px) {
    body.has-sidebar.user-page[data-business-profile="van_sales"] .container,
    body.has-sidebar.user-page[data-business-profile="flex_printing"] .container {
        width: calc(100% - 240px);
    }

    body.sidebar-collapsed.has-sidebar.user-page[data-business-profile="van_sales"] .container,
    body.sidebar-collapsed.has-sidebar.user-page[data-business-profile="flex_printing"] .container {
        width: calc(100% - 72px);
    }
}

@media (min-width: 900px) {
    body.user-page[data-business-profile="van_sales"] .van-workspace-heading {
        display: flex;
        box-sizing: border-box;
        min-height: 42px;
        height: 42px;
        align-items: center;
        flex-wrap: nowrap;
        gap: 0.65rem;
        padding: 0.35rem 0.7rem;
        white-space: nowrap;
    }

    body.user-page[data-business-profile="van_sales"] .van-sales-shell {
        height: 100%;
    }

    body.user-page[data-business-profile="van_sales"] .van-workspace-heading h2 {
        margin: 0;
        font-size: 1.05rem;
    }

    .van-header-divider {
        width: 1px;
        height: 20px;
        background: var(--gray-300);
    }

    .van-header-spacer {
        flex: 1 1 auto;
    }

    .van-live-time {
        color: var(--gray-600);
        font-size: 0.72rem;
        font-weight: 750;
    }

    body.user-page[data-business-profile="van_sales"] .van-sales-layout {
        grid-template-columns: minmax(0, 2fr) minmax(310px, 0.92fr);
    }

    body.user-page[data-business-profile="van_sales"] .van-sales-main {
        grid-template-rows: auto auto minmax(0, 1fr);
    }

    body.user-page[data-business-profile="van_sales"] .van-sales-card,
    body.user-page[data-business-profile="van_sales"] .van-checkout-card {
        padding: 0.48rem 0.58rem;
    }

    body.user-page[data-business-profile="van_sales"] .van-card-heading,
    body.user-page[data-business-profile="van_sales"] .van-checkout-heading {
        margin-bottom: 0.34rem;
    }

    body.user-page[data-business-profile="van_sales"] .van-customer-grid {
        grid-template-columns: minmax(220px, 1fr) minmax(170px, 0.34fr);
    }

    body.user-page[data-business-profile="van_sales"] .van-account-summary {
        min-height: 46px;
        padding: 0.3rem 0.55rem;
    }

    body.user-page[data-business-profile="van_sales"] .van-product-card {
        position: relative;
        z-index: 4;
        overflow: visible;
    }

    body.user-page[data-business-profile="van_sales"] .van-product-entry {
        grid-template-columns: minmax(190px, 1.35fr) minmax(145px, 0.9fr) 78px auto;
    }

    body.user-page[data-business-profile="van_sales"] .van-product-results {
        position: absolute;
        top: calc(100% - 2px);
        right: 0.58rem;
        left: 0.58rem;
        z-index: 25;
        max-height: 220px;
        margin: 0;
        background: #fff;
        box-shadow: 0 16px 34px rgba(15, 23, 42, 0.16);
    }

    body.user-page[data-business-profile="van_sales"] .van-order-card {
        position: relative;
        z-index: 1;
    }

    body.user-page[data-business-profile="van_sales"] .van-checkout-card {
        height: auto;
        overflow: visible;
    }

    body.user-page[data-business-profile="van_sales"] .van-checkout-heading {
        min-height: 28px;
    }

    body.user-page[data-business-profile="van_sales"] .van-total-list {
        padding: 0.24rem 0;
    }

    body.user-page[data-business-profile="van_sales"] .van-total-list > div {
        padding: 0.22rem 0;
    }

    body.user-page[data-business-profile="van_sales"] .van-grand-total {
        margin-top: 0.15rem;
        padding-top: 0.42rem !important;
    }

    body.user-page[data-business-profile="van_sales"] .van-payment-fields {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.4rem;
        margin-top: 0.45rem;
    }

    body.user-page[data-business-profile="van_sales"] .van-due-row {
        grid-column: 1 / -1;
        padding: 0.42rem 0.55rem;
    }

    body.user-page[data-business-profile="van_sales"] .van-primary-actions {
        margin-top: 0.45rem;
    }

    body.user-page[data-business-profile="van_sales"] .van-secondary-actions {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.32rem;
        margin-top: 0.45rem;
    }

    body.user-page[data-business-profile="van_sales"] .van-secondary-actions button {
        min-height: 29px;
        padding: 0.3rem 0.28rem;
        line-height: 1.1;
    }

    body.user-page[data-business-profile="van_sales"] #saleMessage {
        min-height: 16px;
        margin-top: 0.3rem;
    }
}

@media (min-width: 761px) and (max-width: 1199px) {
    body.user-page[data-business-profile="van_sales"] .van-sales-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    body.user-page[data-business-profile="van_sales"] .van-product-entry {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 899px) {
    body.user-page[data-business-profile="van_sales"] .van-workspace-heading {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 0.45rem;
    }

    body.user-page[data-business-profile="van_sales"] .van-header-spacer,
    body.user-page[data-business-profile="van_sales"] .van-header-divider {
        display: none;
    }

    body.user-page[data-business-profile="van_sales"] .van-live-time {
        grid-column: 1;
        color: var(--gray-600);
        font-size: 0.7rem;
    }

    body.user-page[data-business-profile="van_sales"] .van-document-chip {
        grid-column: 2;
        grid-row: 2 / 4;
        justify-self: end;
    }

    body.user-page[data-business-profile="van_sales"] .van-workspace-eyebrow {
        grid-column: 1 / -1;
    }

    body.user-page[data-business-profile="van_sales"] .van-product-results {
        max-height: 210px;
    }
}

/* ========================================================================
   ProfoundPOS interactive design system

   This is the authoritative shared presentation layer for tenant workspaces.
   Profile workspaces retain their task-specific layouts and behavior while
   using one set of surfaces, controls, tables, actions, and status language.
   Printable documents and public authentication screens are intentionally
   outside this layer.
   ======================================================================== */

body.admin-page,
body.user-page,
body.platform-owner-page {
    color: var(--pp-text);
    background: var(--pp-bg);
}

body.admin-page .container,
body.user-page .container,
body.platform-owner-page .owner-container {
    min-width: 0;
}

body.admin-page h1,
body.admin-page h2,
body.admin-page h3,
body.user-page h1,
body.user-page h2,
body.user-page h3,
body.platform-owner-page h1,
body.platform-owner-page h2,
body.platform-owner-page h3 {
    color: var(--pp-text);
    letter-spacing: -0.018em;
}

/* Shared cards and section framing */
body.admin-page .page-heading:not(.dashboard-hero),
body.user-page .page-heading,
body.admin-page .card,
body.admin-page .panel,
body.admin-page .filters,
body.admin-page .flex-list-card,
body.user-page .card,
body.user-page .panel,
body.user-page .filters,
body.user-page .flex-list-card,
body.user-page .flex-editor-card,
body.user-page .flex-summary-card,
body.user-page .van-sales-card,
body.user-page .van-checkout-card {
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-radius-lg);
    background: var(--pp-surface);
    box-shadow: var(--pp-shadow-card);
}

body.admin-page .page-heading:not(.dashboard-hero),
body.user-page .page-heading {
    min-height: 92px;
    margin-bottom: var(--pp-space-4);
    padding: var(--pp-space-4) var(--pp-space-5);
    background:
        radial-gradient(circle at 96% 0%, rgba(15, 133, 136, 0.1), transparent 34%),
        linear-gradient(135deg, #ffffff, #f5fafb);
}

body.admin-page .page-heading:not(.dashboard-hero) h2,
body.user-page .page-heading h2 {
    margin: 0;
    font-size: clamp(1.28rem, 2vw, 1.6rem);
    font-weight: 900;
}

body.admin-page .page-heading:not(.dashboard-hero) p,
body.user-page .page-heading p {
    margin: 0.28rem 0 0;
    color: var(--pp-muted);
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.45;
}

body.admin-page .panel-title,
body.user-page .panel-title {
    gap: var(--pp-space-3);
    margin-bottom: var(--pp-space-3);
    padding-bottom: var(--pp-space-3);
    border-bottom: 1px solid #e2ebef;
}

body.admin-page .panel-title h3,
body.user-page .panel-title h3 {
    margin: 0;
    color: var(--pp-text);
    font-size: 1rem;
    font-weight: 900;
}

body.admin-page .panel-title p,
body.user-page .panel-title p {
    margin: 0.18rem 0 0;
    color: var(--pp-muted);
    font-size: 0.76rem;
    font-weight: 600;
}

/* Compact, predictable form controls */
body.admin-page label,
body.user-page label,
body.platform-owner-page label {
    color: var(--pp-text-soft);
    font-size: 0.74rem;
    font-weight: 800;
}

body.admin-page input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
body.admin-page select,
body.user-page input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
body.user-page select,
body.platform-owner-page input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
body.platform-owner-page select {
    box-sizing: border-box;
    min-height: var(--pp-control-height);
    height: var(--pp-control-height);
    margin: 0;
    padding: 0.48rem 0.66rem;
    border: 1px solid var(--pp-border-strong);
    border-radius: var(--pp-radius-sm);
    background-color: var(--pp-surface);
    color: var(--pp-text);
    font: inherit;
    font-size: 0.82rem;
    line-height: 1.2;
    box-shadow: inset 0 1px 2px rgba(15, 42, 58, 0.025);
    transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

body.admin-page textarea,
body.user-page textarea,
body.platform-owner-page textarea {
    box-sizing: border-box;
    width: 100%;
    min-height: 82px;
    margin: 0;
    padding: 0.58rem 0.66rem;
    border: 1px solid var(--pp-border-strong);
    border-radius: var(--pp-radius-sm);
    background: var(--pp-surface);
    color: var(--pp-text);
    font: inherit;
    font-size: 0.82rem;
    line-height: 1.45;
    resize: vertical;
}

body.admin-page input:focus,
body.admin-page select:focus,
body.admin-page textarea:focus,
body.user-page input:focus,
body.user-page select:focus,
body.user-page textarea:focus,
body.platform-owner-page input:focus,
body.platform-owner-page select:focus,
body.platform-owner-page textarea:focus {
    outline: none;
    border-color: var(--pp-accent);
    box-shadow: var(--pp-focus-ring);
}

body.admin-page input::placeholder,
body.admin-page textarea::placeholder,
body.user-page input::placeholder,
body.user-page textarea::placeholder,
body.platform-owner-page input::placeholder,
body.platform-owner-page textarea::placeholder {
    color: #8a9eac;
    opacity: 1;
}

body.admin-page input:disabled,
body.admin-page select:disabled,
body.admin-page textarea:disabled,
body.admin-page input[readonly],
body.user-page input:disabled,
body.user-page select:disabled,
body.user-page textarea:disabled,
body.user-page input[readonly],
body.platform-owner-page input:disabled,
body.platform-owner-page select:disabled,
body.platform-owner-page textarea:disabled,
body.platform-owner-page input[readonly] {
    border-color: #d7e0e5;
    background: #eef3f5;
    color: #6f8290;
    box-shadow: none;
    cursor: not-allowed;
}

body.admin-page .product-form-grid,
body.admin-page .customer-form-grid,
body.admin-page .supplier-form-grid,
body.admin-page .company-settings-grid,
body.user-page .customer-form-grid,
body.user-page .supplier-form-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
    align-items: end;
    gap: var(--pp-space-3) var(--pp-space-4);
}

/* Product helper text belongs below its control and must not lift that
   control above neighbouring fields in the same grid row. */
body.admin-page .product-form-grid {
    align-items: stretch;
}

@media (min-width: 1000px) {
    body.admin-page .customer-form-card,
    body.user-page .customer-form-card {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: end;
        gap: var(--pp-space-3);
    }

    body.admin-page .customer-form-grid,
    body.user-page .customer-form-grid {
        grid-template-columns: repeat(4, minmax(150px, 1fr));
    }

    body.admin-page .customer-form-card .form-actions,
    body.user-page .customer-form-card .form-actions {
        margin: 0;
    }
}

body.admin-page .customer-form-grid > label,
body.admin-page .supplier-form-grid > label,
body.user-page .customer-form-grid > label,
body.user-page .supplier-form-grid > label,
body.admin-page .flex-field,
body.user-page .flex-field {
    display: grid;
    align-content: end;
    gap: 0.32rem;
    min-width: 0;
}

body.admin-page .product-form-grid > label {
    display: grid;
    align-content: start;
    align-self: stretch;
    gap: 0.32rem;
    min-width: 0;
}

/* Filters use a dense toolbar layout and expand only useful search fields. */
body.admin-page .filters,
body.user-page .filters,
body.admin-page .flex-queue-toolbar,
body.user-page .flex-queue-toolbar,
body.admin-page .flex-module-toolbar,
body.user-page .flex-module-toolbar {
    align-items: end;
    gap: var(--pp-space-2) var(--pp-space-3);
    padding: var(--pp-space-3);
}

body.admin-page .filters > label,
body.user-page .filters > label,
body.admin-page .flex-queue-toolbar > label,
body.user-page .flex-queue-toolbar > label,
body.admin-page .flex-module-toolbar > label,
body.user-page .flex-module-toolbar > label {
    flex: 0 1 210px;
    min-width: 128px;
    max-width: 260px;
}

body.admin-page .filters > label:has(input[type="search"]),
body.user-page .filters > label:has(input[type="search"]),
body.admin-page .flex-queue-search,
body.user-page .flex-queue-search,
body.admin-page .flex-grow,
body.user-page .flex-grow {
    flex: 1 1 260px;
    max-width: none;
}

/* Shared action language. Sidebar controls retain the established shell skin. */
body:is(.admin-page, .user-page, .platform-owner-page) button:where(:not(.nav-link):not(.nav-sublink):not(.collapse-btn):not(.hamburger):not(.pos-native-button):not(.field-autocomplete-option)) {
    --pp-button-start: var(--pp-primary);
    --pp-button-end: #18577a;
    --pp-button-hover-start: var(--pp-primary-hover);
    --pp-button-hover-end: var(--pp-primary);
    --pp-button-border: transparent;
    min-height: 36px;
    padding: 0.48rem 0.82rem;
    border: 1px solid var(--pp-button-border);
    border-radius: var(--pp-radius-sm);
    background: linear-gradient(135deg, var(--pp-button-start), var(--pp-button-end));
    color: #ffffff;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 850;
    line-height: 1.15;
    box-shadow: 0 4px 11px rgba(18, 59, 93, 0.14);
    transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease, border-color 0.16s ease;
}

body:is(.admin-page, .user-page, .platform-owner-page) button:where(:not(.nav-link):not(.nav-sublink):not(.collapse-btn):not(.hamburger):not(.pos-native-button):not(.field-autocomplete-option)):hover:not(:disabled) {
    transform: translateY(-1px);
    border-color: var(--pp-button-border);
    background: linear-gradient(135deg, var(--pp-button-hover-start), var(--pp-button-hover-end));
    box-shadow: 0 7px 16px rgba(18, 59, 93, 0.2);
}

body:is(.admin-page, .user-page, .platform-owner-page) button:where(:not(.nav-link):not(.nav-sublink):not(.collapse-btn):not(.hamburger):not(.pos-native-button):not(.field-autocomplete-option)):focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 1px;
    box-shadow: var(--pp-focus-ring), 0 4px 11px rgba(18, 59, 93, 0.16);
}

body.admin-page button.secondary,
body.admin-page .secondary-btn,
body.admin-page .neutral-btn,
body.user-page button.secondary,
body.user-page .secondary-btn,
body.user-page .neutral-btn,
body.platform-owner-page .secondary-btn {
    border-color: var(--pp-border);
    background: var(--pp-surface);
    color: var(--pp-text-soft);
    box-shadow: 0 2px 7px rgba(15, 42, 58, 0.06);
}

body.admin-page button.secondary:hover:not(:disabled),
body.admin-page .secondary-btn:hover:not(:disabled),
body.admin-page .neutral-btn:hover:not(:disabled),
body.user-page button.secondary:hover:not(:disabled),
body.user-page .secondary-btn:hover:not(:disabled),
body.user-page .neutral-btn:hover:not(:disabled),
body.platform-owner-page .secondary-btn:hover:not(:disabled) {
    border-color: #9ec5ca;
    background: var(--pp-accent-soft);
    color: var(--pp-accent-hover);
}

body:is(.admin-page, .user-page, .platform-owner-page) :is(.btn-view, .action-view) {
    --pp-button-start: var(--pp-action-view);
    --pp-button-end: #397fb0;
    --pp-button-hover-start: var(--pp-action-view-hover);
    --pp-button-hover-end: var(--pp-action-view);
    --pp-button-border: #28628f;
}

body:is(.admin-page, .user-page, .platform-owner-page) :is(.btn-edit, .action-edit) {
    --pp-button-start: var(--pp-action-edit);
    --pp-button-end: #7378b7;
    --pp-button-hover-start: var(--pp-action-edit-hover);
    --pp-button-hover-end: var(--pp-action-edit);
    --pp-button-border: #555b9a;
}

body:is(.admin-page, .user-page, .platform-owner-page) :is(.btn-print, .action-print) {
    --pp-button-start: var(--pp-action-print);
    --pp-button-end: #657c8d;
    --pp-button-hover-start: var(--pp-action-print-hover);
    --pp-button-hover-end: var(--pp-action-print);
    --pp-button-border: #465d6e;
}

body:is(.admin-page, .user-page, .platform-owner-page) :is(.btn-payment, .action-payment) {
    --pp-button-start: var(--pp-action-payment);
    --pp-button-end: #15989a;
    --pp-button-hover-start: var(--pp-action-payment-hover);
    --pp-button-hover-end: var(--pp-action-payment);
    --pp-button-border: #0d7478;
}

body:is(.admin-page, .user-page, .platform-owner-page) :is(.btn-success, .action-success, button.success, .success-btn) {
    --pp-button-start: var(--pp-action-success);
    --pp-button-end: #32936c;
    --pp-button-hover-start: var(--pp-action-success-hover);
    --pp-button-hover-end: var(--pp-action-success);
    --pp-button-border: #20704f;
}

body:is(.admin-page, .user-page, .platform-owner-page) :is(.btn-warning, .action-warning) {
    --pp-button-start: var(--pp-action-warning);
    --pp-button-end: #ca8527;
    --pp-button-hover-start: var(--pp-action-warning-hover);
    --pp-button-hover-end: var(--pp-action-warning);
    --pp-button-border: #9e6313;
}

body:is(.admin-page, .user-page, .platform-owner-page) :is(.btn-whatsapp, .flex-whatsapp-btn, .whatsapp-action, .admin-sale-whatsapp, .pos-more-whatsapp-btn) {
    --pp-button-start: var(--pp-whatsapp);
    --pp-button-end: #25a866;
    --pp-button-hover-start: var(--pp-whatsapp-hover);
    --pp-button-hover-end: var(--pp-whatsapp);
    --pp-button-border: #0f7a40;
}

body.admin-page button.danger,
body.admin-page .danger-btn,
body.user-page button.danger,
body.user-page .danger-btn,
body.platform-owner-page .danger-btn {
    border-color: var(--pp-danger);
    background: var(--pp-danger);
    color: #ffffff;
}

body.admin-page button.danger:hover:not(:disabled),
body.admin-page .danger-btn:hover:not(:disabled),
body.user-page button.danger:hover:not(:disabled),
body.user-page .danger-btn:hover:not(:disabled),
body.platform-owner-page .danger-btn:hover:not(:disabled) {
    border-color: var(--pp-danger-hover);
    background: var(--pp-danger-hover);
}

body:is(.admin-page, .user-page) :is(.btn-remove-line, .flex-remove-line, .pos-remove-btn) {
    min-width: 26px;
    width: 26px;
    min-height: 26px;
    height: 26px;
    padding: 0;
    border-color: #efb6bf;
    background: var(--pp-danger-soft);
    color: #ad2f42;
    font-size: 1rem;
    line-height: 1;
    box-shadow: none;
}

body:is(.admin-page, .user-page) :is(.btn-remove-line, .flex-remove-line, .pos-remove-btn):hover:not(:disabled) {
    border-color: var(--pp-danger);
    background: #f8dce2;
    color: #8f2234;
    box-shadow: none;
    transform: none;
}

body:is(.admin-page, .user-page, .platform-owner-page) button:where(:not(.nav-link):not(.nav-sublink):not(.collapse-btn):not(.hamburger):not(.pos-native-button):not(.field-autocomplete-option)):is(:disabled, .disabled, [aria-disabled="true"]) {
    border-color: #d2dce2;
    background: #e5ebee;
    color: #7c8d98;
    box-shadow: none;
    cursor: not-allowed;
    opacity: 1;
    transform: none;
}

body.admin-page td button,
body.admin-page td .secondary-btn,
body.admin-page .flex-row-actions button,
body.user-page td button,
body.user-page td .secondary-btn,
body.user-page .flex-row-actions button,
body.platform-owner-page td button {
    min-height: 30px;
    padding: 0.34rem 0.58rem;
    font-size: 0.7rem;
    white-space: nowrap;
}

body.admin-page .text-btn,
body.user-page .text-btn,
body.platform-owner-page .text-btn {
    min-height: 30px;
    padding: 0.32rem 0.52rem;
    border-color: transparent;
    background: transparent;
    color: var(--pp-accent-hover);
    box-shadow: none;
}

body.admin-page .text-btn:hover:not(:disabled),
body.user-page .text-btn:hover:not(:disabled),
body.platform-owner-page .text-btn:hover:not(:disabled) {
    background: var(--pp-accent-soft);
    color: #07585f;
    box-shadow: none;
    transform: none;
}

body.admin-page .filters.table-pager,
body.user-page .filters.table-pager {
    justify-content: flex-start;
    min-height: 48px;
    margin: var(--pp-space-2) 0 0;
    padding: var(--pp-space-2) 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

body.admin-page .table-pager button,
body.user-page .table-pager button {
    min-width: 38px;
    padding-inline: 0.58rem;
}

body.admin-page .table-pager > span,
body.user-page .table-pager > span {
    color: var(--pp-text-soft);
    font-size: 0.78rem;
    font-weight: 800;
}

body.admin-page .section-total,
body.user-page .section-total {
    margin-top: var(--pp-space-2);
    color: var(--pp-text);
    font-size: 0.82rem;
    font-weight: 850;
}

body.admin-page .report-subsection,
body.user-page .report-subsection {
    margin-top: var(--pp-space-4);
}

body.admin-page .report-summary-card,
body.user-page .report-summary-card {
    margin-bottom: var(--pp-space-3);
    padding: var(--pp-space-4);
}

body.admin-page .report-summary-filters,
body.user-page .report-summary-filters {
    margin-bottom: var(--pp-space-3);
}

body.admin-page .inline-empty-state,
body.user-page .inline-empty-state {
    display: none;
    margin-top: var(--pp-space-2);
    color: var(--pp-muted);
    font-size: 0.8rem;
}

body.admin-page .category-create-row,
body.user-page .category-create-row {
    margin-top: var(--pp-space-3);
}

body.admin-page .section-action,
body.user-page .section-action {
    margin-top: var(--pp-space-2);
}

body.admin-page .selection-cell,
body.user-page .selection-cell {
    width: 44px;
    text-align: center;
}

body.admin-page .full-field,
body.user-page .full-field {
    width: 100%;
    margin-top: 0.38rem;
}

body.admin-page .stacked-field,
body.user-page .stacked-field {
    display: block;
    margin-top: var(--pp-space-3);
}

/* One interactive data-table treatment. Print tables remain untouched. */
body.admin-page table:not(.receipt-table):not(.printable-table),
body.user-page table:not(.receipt-table):not(.printable-table),
body.platform-owner-page table:not(.receipt-table):not(.printable-table) {
    color: var(--pp-text-soft);
    background: var(--pp-surface);
    border-color: var(--pp-border);
    border-radius: var(--pp-radius-md);
    box-shadow: none;
}

body.admin-page table:not(.receipt-table):not(.printable-table) thead th,
body.user-page table:not(.receipt-table):not(.printable-table) thead th,
body.platform-owner-page table:not(.receipt-table):not(.printable-table) thead th {
    padding: 0.62rem 0.7rem;
    border-color: #2e6475;
    background: linear-gradient(105deg, var(--pp-table-header), var(--pp-table-header-end));
    color: #edf9fa;
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.035em;
    line-height: 1.25;
    text-transform: uppercase;
    vertical-align: middle;
}

body.admin-page table:not(.receipt-table):not(.printable-table) tbody td,
body.user-page table:not(.receipt-table):not(.printable-table) tbody td,
body.platform-owner-page table:not(.receipt-table):not(.printable-table) tbody td {
    padding: 0.62rem 0.7rem;
    border-color: #e3ecef;
    color: var(--pp-text-soft);
    font-size: 0.76rem;
    line-height: 1.35;
    vertical-align: middle;
}

body.admin-page table:not(.receipt-table):not(.printable-table) tbody tr:nth-child(even),
body.user-page table:not(.receipt-table):not(.printable-table) tbody tr:nth-child(even),
body.platform-owner-page table:not(.receipt-table):not(.printable-table) tbody tr:nth-child(even) {
    background: var(--pp-surface-subtle);
}

body.admin-page table:not(.receipt-table):not(.printable-table) tbody tr:hover,
body.user-page table:not(.receipt-table):not(.printable-table) tbody tr:hover,
body.platform-owner-page table:not(.receipt-table):not(.printable-table) tbody tr:hover {
    background: #edf8f8;
}

body.admin-page .table-scroll,
body.admin-page .compact-table,
body.admin-page .admin-sales-table-wrap,
body.admin-page .flex-responsive-table,
body.user-page .table-scroll,
body.user-page .compact-table,
body.user-page .flex-responsive-table,
body.user-page .flex-job-table-wrap,
body.user-page .van-order-table-wrap,
body.user-page .van-product-results,
body.platform-owner-page .owner-table-wrap {
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-radius-md);
    background: var(--pp-surface);
    box-shadow: 0 4px 14px rgba(11, 45, 62, 0.055);
}

/* Shared status chips */
body.admin-page .status-pill,
body.admin-page .flex-status-pill,
body.admin-page .promotion-status,
body.user-page .status-pill,
body.user-page .flex-status-pill,
body.user-page .promotion-status,
body.platform-owner-page .status-pill,
body.platform-owner-page .owner-status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 0.2rem 0.52rem;
    border: 1px solid #d5e0e5;
    border-radius: 999px;
    background: #f1f5f7;
    color: #526876;
    font-size: 0.66rem;
    font-weight: 900;
    line-height: 1;
    text-transform: capitalize;
    white-space: nowrap;
}

body.admin-page :is(.status-paid, .status-completed, .status-accepted, .status-active, .status-success),
body.user-page :is(.status-paid, .status-completed, .status-accepted, .status-active, .status-success),
body.platform-owner-page :is(.status-paid, .status-completed, .status-accepted, .status-active, .status-success) {
    border-color: #a8dcc6;
    background: var(--pp-success-soft);
    color: #116a4c;
}

body.admin-page :is(.status-sent, .status-in_progress, .status-partially_paid, .status-partial, .status-info),
body.user-page :is(.status-sent, .status-in_progress, .status-partially_paid, .status-partial, .status-info),
body.platform-owner-page :is(.status-sent, .status-in_progress, .status-partially_paid, .status-partial, .status-info) {
    border-color: #b7d2e7;
    background: var(--pp-info-soft);
    color: #1f5f91;
}

body.admin-page :is(.status-draft, .status-queued, .status-unpaid, .status-pending, .status-warning),
body.user-page :is(.status-draft, .status-queued, .status-unpaid, .status-pending, .status-warning),
body.platform-owner-page :is(.status-draft, .status-queued, .status-unpaid, .status-pending, .status-warning) {
    border-color: #edcf9f;
    background: var(--pp-warning-soft);
    color: #8c570d;
}

body.admin-page :is(.status-expired, .status-suspended, .status-danger),
body.user-page :is(.status-expired, .status-suspended, .status-danger),
body.platform-owner-page :is(.status-expired, .status-suspended, .status-danger) {
    border-color: #edbec7;
    background: var(--pp-danger-soft);
    color: #a52f41;
}

/* Flex and Van keep their operational layouts while sharing the same shell. */
body.user-page[data-business-profile="flex_printing"] .flex-page-heading,
body.user-page[data-business-profile="van_sales"] .van-workspace-heading {
    border-color: var(--pp-border);
    background: linear-gradient(135deg, #ffffff, #f3f9fa);
    box-shadow: var(--pp-shadow-card);
}

body.user-page[data-business-profile="flex_printing"] .flex-editor-card,
body.user-page[data-business-profile="flex_printing"] .flex-summary-card,
body.user-page[data-business-profile="van_sales"] .van-sales-card,
body.user-page[data-business-profile="van_sales"] .van-checkout-card {
    border-color: var(--pp-border);
    background: var(--pp-surface);
}

body.user-page[data-business-profile="flex_printing"] .flex-section-heading,
body.user-page[data-business-profile="van_sales"] .van-card-heading,
body.user-page[data-business-profile="van_sales"] .van-checkout-heading {
    color: var(--pp-primary);
    border-bottom-color: #e1eaee;
}

body.user-page[data-business-profile="flex_printing"] .flex-production-state {
    display: grid;
    gap: 0.28rem;
    padding: 0.48rem 0;
    border-top: 1px solid #e1eaee;
}

body.user-page[data-business-profile="flex_printing"] .flex-production-state > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--pp-space-2);
    color: var(--pp-muted);
    font-size: 0.72rem;
}

body.user-page[data-business-profile="flex_printing"] .flex-production-state strong {
    color: var(--pp-text);
    font-size: 0.74rem;
}

@media (min-width: 900px) {
    body.admin-page #adminFlexQuotationsTab .flex-queue-toolbar {
        grid-template-columns: minmax(150px, 0.7fr) minmax(230px, 1.4fr) minmax(145px, 0.7fr) minmax(145px, 0.7fr) auto;
    }

    body.admin-page #adminFlexReportsTab .flex-queue-toolbar {
        grid-template-columns: minmax(210px, 1.4fr) minmax(145px, 0.7fr) minmax(145px, 0.7fr) auto;
    }

    body.admin-page #adminFlexQuotationsTab .flex-queue-toolbar > button,
    body.admin-page #adminFlexReportsTab .flex-queue-toolbar > button {
        width: auto;
        align-self: end;
    }
}

/* Every business-edition dashboard uses the Retail dashboard visual language. */
body.admin-page #adminEditionDashboardTab {
    --dashboard-ink: var(--pp-text);
    --dashboard-muted: var(--pp-muted);
    --dashboard-line: var(--pp-border);
    --dashboard-line-soft: #deeaee;
    display: grid;
    gap: 1.2rem;
    padding-bottom: 1rem;
}

body.admin-page #adminEditionDashboardTab .dashboard-hero,
body.admin-page #adminEditionDashboardTab .page-heading.dashboard-hero {
    position: relative;
    isolation: isolate;
    min-height: 148px;
    margin: 0;
    padding: 1.4rem 1.5rem;
    overflow: hidden;
    border: 1px solid rgba(87, 203, 196, 0.42);
    border-radius: 16px;
    background:
        radial-gradient(circle at 88% 16%, rgba(79, 209, 197, 0.2), transparent 28%),
        radial-gradient(circle at 8% 110%, rgba(23, 106, 148, 0.38), transparent 38%),
        linear-gradient(128deg, #09283c 0%, #0b4c5b 55%, #0b3d50 100%);
    box-shadow: 0 18px 42px rgba(8, 39, 56, 0.2);
}

body.admin-page #adminEditionDashboardTab .dashboard-hero::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: -72px;
    right: 8%;
    width: 210px;
    height: 210px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    box-shadow: 0 0 0 34px rgba(255, 255, 255, 0.035), 0 0 0 68px rgba(255, 255, 255, 0.025);
}

body.admin-page #adminEditionDashboardTab .dashboard-eyebrow {
    color: #a9eee7;
}

body.admin-page #adminEditionDashboardTab .dashboard-section-icon-hero {
    border: 1px solid rgba(174, 241, 235, 0.28);
    background: rgba(224, 250, 247, 0.12);
    color: #b9f5ef;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

body.admin-page #adminEditionDashboardTab .dashboard-hero h2,
body.admin-page #adminEditionDashboardTab .dashboard-hero p {
    color: #ffffff;
}

body.admin-page #adminEditionDashboardTab .dashboard-hero p {
    color: rgba(230, 246, 248, 0.84);
}

body.admin-page #adminEditionDashboardTab .dashboard-view-status {
    padding: 0.46rem 0.66rem;
    border: 1px solid rgba(184, 239, 234, 0.2);
    border-radius: 999px;
    background: rgba(1, 20, 32, 0.18);
    color: rgba(235, 250, 251, 0.88);
}

body.admin-page #adminEditionDashboardTab .panel,
body.admin-page #adminEditionDashboardTab .dashboard-sales-chart-panel {
    border-color: var(--pp-border);
    background: linear-gradient(180deg, #ffffff, #f9fcfd);
    box-shadow: var(--pp-shadow-card);
}

/* Modal shells shared by admin and operator pages. */
body.admin-page .modal-overlay,
body.user-page .modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--pp-space-4);
    overflow: auto;
    background: rgba(4, 20, 32, 0.62);
    backdrop-filter: blur(3px);
}

body.admin-page .modal-card,
body.user-page .modal-card,
body.admin-page .modal-content,
body.user-page .modal-content {
    width: min(540px, 100%);
    max-height: calc(100vh - 2rem);
    overflow: auto;
    padding: var(--pp-space-5);
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-radius-lg);
    background: var(--pp-surface);
    box-shadow: 0 24px 64px rgba(4, 24, 38, 0.28);
}

body.admin-page .return-modal-card,
body.user-page .return-modal-card {
    width: min(440px, 100%);
}

body.admin-page .return-modal-card > label,
body.user-page .return-modal-card > label {
    display: grid;
    gap: 0.34rem;
    margin-top: var(--pp-space-3);
}

body.admin-page .return-modal-card .form-message,
body.user-page .return-modal-card .form-message,
body.admin-page #paymentMessage,
body.user-page #paymentMessage {
    margin-top: var(--pp-space-2);
}

body.admin-page .modal-actions,
body.user-page .modal-actions {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: var(--pp-space-2);
    margin-top: var(--pp-space-4);
    padding-top: var(--pp-space-3);
    border-top: 1px solid #e2ebef;
}

@media (max-width: 760px) {
    body.admin-page .container > div,
    body.user-page .container > div,
    body.platform-owner-page .owner-container > section {
        min-width: 0;
        max-width: 100%;
    }

    body.admin-page table:not(.receipt-table):not(.printable-table),
    body.user-page table:not(.receipt-table):not(.printable-table),
    body.platform-owner-page table:not(.receipt-table):not(.printable-table) {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        -webkit-overflow-scrolling: touch;
    }

    body.admin-page .purchase-subnav,
    body.admin-page .accounts-subnav,
    body.user-page .purchase-subnav,
    body.user-page .accounts-subnav {
        flex-wrap: wrap;
    }

    body.admin-page .accounts-dashboard-heading,
    body.user-page .accounts-dashboard-heading {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    body.admin-page .accounts-dashboard-grid,
    body.user-page .accounts-dashboard-grid,
    body.admin-page .capital-funds-panel,
    body.user-page .capital-funds-panel {
        grid-template-columns: minmax(0, 1fr);
    }

    body.admin-page .capital-funds-card,
    body.user-page .capital-funds-card {
        min-width: 0;
    }

    body.admin-page .page-heading:not(.dashboard-hero),
    body.user-page .page-heading,
    body.admin-page #adminEditionDashboardTab .dashboard-hero {
        min-height: 0;
        padding: var(--pp-space-4);
    }

    body.admin-page #adminEditionDashboardTab .dashboard-hero,
    body.admin-page #adminEditionDashboardTab .dashboard-title-lockup,
    body.admin-page #adminEditionDashboardTab .dashboard-hero .flex-row-actions {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    body.admin-page .filters > label,
    body.user-page .filters > label,
    body.admin-page .flex-queue-toolbar > label,
    body.user-page .flex-queue-toolbar > label,
    body.admin-page .flex-module-toolbar > label,
    body.user-page .flex-module-toolbar > label {
        flex: 0 1 auto;
        width: 100%;
        max-width: none;
    }
}

@media (max-width: 520px) {
    body.admin-page td button,
    body.user-page td button,
    body.platform-owner-page td button {
        min-height: 32px;
    }
}

@media (prefers-reduced-motion: reduce) {
    body:is(.admin-page, .user-page, .platform-owner-page) button:where(:not(.nav-link):not(.nav-sublink):not(.collapse-btn):not(.hamburger):not(.pos-native-button):not(.field-autocomplete-option)),
    body.admin-page input,
    body.admin-page select,
    body.admin-page textarea,
    body.user-page input,
    body.user-page select,
    body.user-page textarea {
        transition: none;
    }
}

/* Retail POS keeps its dense operational cart geometry inside the shared shell. */
body.user-page[data-business-profile="retail_pos"] #salesEntry .pos-cart-table th:nth-child(1) { width: 28%; }
body.user-page[data-business-profile="retail_pos"] #salesEntry .pos-cart-table th:nth-child(2) { width: 18%; }
body.user-page[data-business-profile="retail_pos"] #salesEntry .pos-cart-table th:nth-child(3) { width: 13%; }
body.user-page[data-business-profile="retail_pos"] #salesEntry .pos-cart-table th:nth-child(4) { width: 8%; }
body.user-page[data-business-profile="retail_pos"] #salesEntry .pos-cart-table th:nth-child(5) { width: 10%; }
body.user-page[data-business-profile="retail_pos"] #salesEntry .pos-cart-table th:nth-child(6) { width: 17%; }
body.user-page[data-business-profile="retail_pos"] #salesEntry .pos-cart-table th:nth-child(7) { width: 6%; }

body.user-page[data-business-profile="retail_pos"] #salesEntry .pos-cart-table td:nth-child(2) {
    padding-inline: 0.3rem;
}

body.user-page[data-business-profile="retail_pos"] #salesEntry .pos-cart-table td:last-child {
    padding-inline: 0.15rem;
    text-align: center;
}

body.user-page[data-business-profile="retail_pos"] #salesEntry .pos-qty-control {
    width: 100%;
    grid-template-columns: 24px minmax(32px, 1fr) 24px;
    gap: 2px;
}

body.user-page[data-business-profile="retail_pos"] #salesEntry .pos-qty-input {
    width: 100%;
    min-width: 0;
}

@media (max-width: 1180px) {
    body.user-page[data-business-profile="retail_pos"] #salesEntry .pos-cart-table th:nth-child(1) { width: 36%; }
    body.user-page[data-business-profile="retail_pos"] #salesEntry .pos-cart-table th:nth-child(2) { width: 21%; }
    body.user-page[data-business-profile="retail_pos"] #salesEntry .pos-cart-table th:nth-child(3) { width: 16%; }
    body.user-page[data-business-profile="retail_pos"] #salesEntry .pos-cart-table th:nth-child(6) { width: 21%; }
    body.user-page[data-business-profile="retail_pos"] #salesEntry .pos-cart-table th:nth-child(7) { width: 6%; }
}